alexgrozav · Sep 8, 2026 · Sep 8, 2026
@@ -4,6 +4,10 @@
 
 NUXT_PUBLIC_BASE_URL=http://localhost:4000
 
+# Where `::storybook-embed` blocks point. Defaults to the deployed Storybook;
+# point it at `pnpm --filter @styleframe/storybook dev` to work on embeds.
+NUXT_PUBLIC_STORYBOOK_BASE_URL=http://localhost:6006
+
 #
 # Posthog
 #

@@ -154,13 +154,17 @@ More content.
 ::
 ```
 
-### Story Previews (Component demos)
+### Storybook Embeds (Component demos)
+
+`mode` picks the Storybook surface: `full` for the story with its toolbar,
+`panel` when the demo is read through the controls or actions panel, `preview`
+for a bare canvas.
 
 ```markdown
-::story-preview
+::storybook-embed
 ---
 story: theme-recipes-feedback-badge--default
-panel: true
+mode: panel
 ---
 ::
 ```

@@ -333,10 +333,10 @@ export function Button({
 
 #### See it in action
 
-::::story-preview
+::::storybook-embed
 ---
 story: theme-recipes-actions-button--default
-panel: true
+mode: panel
 ---
 ::::
 
@@ -449,10 +449,10 @@ export function ProfileCard() {
 
 #### See it in action
 
-::::story-preview
+::::storybook-embed
 ---
 story: theme-recipes-layout-card--default
-panel: true
+mode: panel
 ---
 ::::
 

@@ -14,10 +14,10 @@ navigation:
 
 The `useBodyElement` composable sets the foundational styles for the `body` element — text color, background color, font family, font size, and line height. It also enables font smoothing for crisp text rendering.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-body--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The `useHeadingElement` composable styles all heading levels (`h1` through `h6`) with shared typography properties and individual font sizes per level. It creates CSS variables for the font family, weight, line height, color, and each heading level's size.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-heading--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The `useParagraphElement` composable styles `p` elements with configurable top and bottom margins. By default, it removes the top margin and sets the bottom margin to your base spacing token.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-paragraph--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The `useLinkElement` composable styles `a` elements with configurable color and text decoration for both default and hover states. It creates CSS variables for each property, making link styling easy to customize per-theme.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-link--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The list composables style `ol` and `ul` elements with configurable bottom margin and left padding. Both composables automatically reset the bottom margin of nested lists to prevent double spacing.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-ol--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The definition list composables style the `dl`, `dt`, and `dd` elements for displaying term-description pairs. They control margin, font weight, and spacing to create readable, well-structured definition lists.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-dl--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The `useAbbrElement` composable styles `abbr[title]` elements with a help cursor and dotted underline, making it clear to users that a tooltip is available on hover.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-abbr--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The code composables style inline code snippets and preformatted text blocks. The `useCodeElement` composable targets `code` and `samp` elements, while `usePreElement` configures `pre` blocks with scroll overflow and nested code resets.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-code--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The `useKbdElement` composable styles the `kbd` element for displaying keyboard shortcuts and key combinations. It creates a compact, visually distinct key cap appearance with configurable background, color, font, border radius, and padding.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-kbd--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The `useMarkElement` composable styles the `mark` element for highlighting text. It creates CSS variables for the background color, text color, and padding on each side.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-mark--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The `useImgElement` composable sets `vertical-align: middle` on `img` and `svg` elements, preventing the small gap that appears below inline images due to baseline alignment. This is a config-free composable with no customization options.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-img--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The `useIframeElement` composable removes the default border from `iframe` elements. This is a config-free composable — it applies a fixed style with no customization options.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-iframe--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The `useCaptionElement` composable styles the `caption` element for table captions with configurable text color, padding on each side, and text alignment.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-caption--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The `useLegendElement` composable styles the `legend` element for consistent form layout. It floats the legend to span the full width and applies a clearfix on the following sibling element. This is a config-free composable with no customization options.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-legend--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The output composables style HTML elements that represent program output. The `useOutputElement` composable sets the display mode of the `output` element, while `useSampElement` configures the font family for `samp` (sample output) elements.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-output--default
-panel: true
+mode: panel
 ---
 ::
 
@@ -64,10 +64,10 @@ function useSampElement(
 ): SampElementResult
 ```
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-samp--default
-panel: true
+mode: panel
 ---
 ::
 

@@ -14,10 +14,10 @@ navigation:
 
 The `useAddressElement` composable styles the `address` element with consistent bottom margin, resets the default italic font style to normal, and inherits the parent line height.
 
-::story-preview
+::storybook-embed
 ---
 story: theme-elements-address--default
-panel: true
+mode: panel
 ---
 ::