<!--
Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
Adds a dynamic popup codeblock on components pages for components that
have live examples with prop manipulation.
<img width="1253" height="298" alt="image"
src="https://github.com/user-attachments/assets/6d046c5f-77c1-4bec-98ed-fd0c2e347635"
/>
<!-- ELLIPSIS_HIDDEN -->
----
> [!IMPORTANT]
> Adds a dynamic code block overlay feature to documentation pages,
enhancing code example interaction with new components, hooks, and
styling.
>
> - **Behavior**:
> - Adds `DynamicCodeblockOverlay` in `dynamic-code-block-overlay.tsx`
for interactive code display with syntax highlighting, copy,
expand/collapse, and close features.
> - Integrates `CodeOverlayProvider` and `useCodeOverlay` in
`use-code-overlay.tsx` to manage overlay state and behavior.
> - Updates `DocsLayout` in `docs.tsx` to include the code overlay in
the documentation layout.
> - **Components**:
> - `DynamicCodeblock` in `dynamic-code-block.tsx` now supports overlay
mode with a floating "View Code" button.
> - `StackContainer` in `stack-container.tsx` updated for better layout
and styling.
> - **Styling**:
> - Adds `stack-reset.css` for isolating stack component styles from
global styles.
> - Updates `stack-team-switcher.tsx` to use new styling and layout for
team switcher demos.
>
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 4ef6c67bd8. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>
----
<!-- ELLIPSIS_HIDDEN -->
<!-- RECURSEML_SUMMARY:START -->
## Review by RecurseML
_🔍 Review performed on
[8424c4d..9c860b3](8424c4d624...9c860b3067)_
✨ No bugs found, your code is sparkling clean
<details>
<summary>✅ Files analyzed, no issues (5)</summary>
• `docs/src/components/mdx/dynamic-code-block-overlay.tsx`
• `docs/src/components/mdx/dynamic-code-block.tsx`
• `docs/src/components/layouts/docs.tsx`
• `docs/src/hooks/use-code-overlay.tsx`
• `docs/src/components/stack-auth/stack-team-switcher.tsx`
</details>
<details>
<summary>⏭️ Files skipped (trigger manually) (2)</summary>
| Locations | Trigger Analysis |
|-----------|------------------|
`docs/src/components/mdx/stack-container.tsx` |
[
`docs/src/components/mdx/stack-reset.css` |
[
</details>
[](https://discord.gg/n3SsVDAW6U)
<!-- RECURSEML_SUMMARY:END -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* New Features
* Interactive code overlay in docs with syntax-highlighted view,
copy-to-clipboard, expand/collapse, ESC-to-close, and floating “View
Code” trigger; responsive sizing and auto-open behavior.
* Adds overlay provider/hooks to control overlay state and exposes a
reusable overlay component and trigger.
* Refactor
* Integrates the overlay into DocsLayout and updates sidebar composition
without changing public APIs.
* Style
* Adjusts Stack layout/title positioning, adds scoped stack CSS reset,
and updates team-switcher demo wrappers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
0ab5fcc165