@dfosco/storyboard 0.7.1 → 0.9.0

package/src/internals/canvas/widgets/PrototypeEmbed.module.css

@@ -1,8 +1,8 @@
 .embed {
   position: relative;
   overflow: hidden;
-  background: var(--bgColor-default, #ffffff);
-  border: 3px solid var(--borderColor-default, #d0d7de);
+  background: var(--color-background, #ffffff);
+  border: 3px solid var(--color-border, #d0d7de);
   border-radius: 12px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
@@ -14,9 +14,9 @@
   padding: 10px 10px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--fgColor-muted, #656d76);
-  background: var(--bgColor-muted, #f6f8fa);
-  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  color: var(--color-foreground-muted, #656d76);
+  background: var(--color-background-muted, #f6f8fa);
+  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -48,8 +48,10 @@
   align-items: center;
   justify-content: center;
   gap: 8px;
-  color: var(--fgColor-muted, #656d76);
+  background: var(--color-background-muted, #f6f8fa);
+  color: var(--color-foreground-muted, #656d76);
   text-align: center;
+  z-index: 2;
 }
 
 .placeholderIcon {
@@ -63,10 +65,10 @@
 }
 
 .spinner {
-  width: 24px;
-  height: 24px;
-  border: 3px solid var(--borderColor-muted, #d0d7de);
-  border-top-color: var(--fgColor-accent, #2f81f7);
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--color-border-muted, #d0d7de);
+  border-top-color: var(--color-foreground-accent, #2f81f7);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
@@ -100,7 +102,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   font-size: 14px;
   font-style: italic;
   cursor: pointer;
@@ -122,9 +124,9 @@
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background: var(--bgColor-default, rgba(255, 255, 255, 0.92));
-  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.12));
-  color: var(--fgColor-default, #1f2328);
+  background: var(--color-background, rgba(255, 255, 255, 0.92));
+  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
+  color: var(--color-foreground, #1f2328);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
   font-size: 14px;
   opacity: 0;
@@ -137,7 +139,7 @@
 }
 
 .editBtn:hover {
-  background: var(--bgColor-muted, rgba(255, 255, 255, 0.98));
+  background: var(--color-background-muted, rgba(255, 255, 255, 0.98));
 }
 
 .urlForm {
@@ -170,14 +172,14 @@
   margin: 8px 16px;
   padding: 6px 10px;
   font-size: 13px;
-  border: 1px solid var(--borderColor-default, #d0d7de);
+  border: 1px solid var(--color-border, #d0d7de);
   border-radius: 6px;
-  background: var(--bgColor-default, #ffffff);
-  color: var(--fgColor-default, #1f2328);
+  background: var(--color-background, #ffffff);
+  color: var(--color-foreground, #1f2328);
 }
 
 .filterInput:focus {
-  border-color: var(--bgColor-accent-emphasis, #2f81f7);
+  border-color: var(--color-background-accent-emphasis, #2f81f7);
   box-shadow: 0 0 0 2px rgba(47, 129, 247, 0.3);
 }
 
@@ -195,7 +197,7 @@
   padding: 6px 8px 2px;
   font-size: 11px;
   font-weight: 600;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -207,7 +209,7 @@
   box-sizing: border-box;
   padding: 6px 12px;
   font-size: 13px;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   border-radius: 6px;
   cursor: pointer;
   white-space: nowrap;
@@ -216,18 +218,18 @@
 }
 
 .pickerItem:hover {
-  background: var(--bgColor-neutral-muted, #eaeef2);
+  background: var(--color-background-neutral-muted, #eaeef2);
 }
 
 .pickerItem:focus-visible {
-  outline: 4px solid var(--bgColor-accent-emphasis, #2f81f7);
+  outline: 4px solid var(--color-background-accent-emphasis, #2f81f7);
   outline-offset: -2px;
 }
 
 .pickerEmpty {
   padding: 12px;
   font-size: 13px;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   font-style: italic;
   text-align: center;
 }
@@ -235,7 +237,7 @@
 .pickerDivider {
   height: 1px;
   margin: 4px 16px;
-  background: var(--borderColor-muted, #d8dee4);
+  background: var(--color-border-muted, #d8dee4);
 }
 
 .customUrlSection {
@@ -248,7 +250,7 @@
 .urlLabel {
   font-size: 12px;
   font-weight: 600;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -258,14 +260,14 @@
   padding: 8px 10px;
   font-size: 14px;
   font-family: ui-monospace, SFMono-Regular, monospace;
-  border: 1px solid var(--borderColor-default, #d0d7de);
+  border: 1px solid var(--color-border, #d0d7de);
   border-radius: 6px;
-  background: var(--bgColor-default, #ffffff);
-  color: var(--fgColor-default, #1f2328);
+  background: var(--color-background, #ffffff);
+  color: var(--color-foreground, #1f2328);
 }
 
 .urlInput:focus {
-  border-color: var(--bgColor-accent-emphasis, #2f81f7);
+  border-color: var(--color-background-accent-emphasis, #2f81f7);
   box-shadow: 0 0 0 2px rgba(47, 129, 247, 0.3);
 }
 
@@ -286,21 +288,21 @@
 }
 
 .urlSave {
-  background: var(--bgColor-accent-emphasis, #2f81f7);
-  color: var(--fgColor-onEmphasis, #ffffff);
+  background: var(--color-background-accent-emphasis, #2f81f7);
+  color: var(--color-foreground-on-emphasis, #ffffff);
 }
 
 .urlSave:hover {
-  background: var(--bgColor-accent-emphasis, #388bfd);
+  background: var(--color-background-accent-emphasis, #388bfd);
 }
 
 .urlCancel {
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
 }
 
 .urlCancel:hover {
-  color: var(--fgColor-default, #1f2328);
-  background: var(--bgColor-muted, #f6f8fa);
+  color: var(--color-foreground, #1f2328);
+  background: var(--color-background-muted, #f6f8fa);
 }
 
 .resizeHandle {
@@ -313,12 +315,12 @@
   background: linear-gradient(
     135deg,
     transparent 40%,
-    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 40%,
-    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 50%,
+    var(--color-border-muted, rgba(0, 0, 0, 0.15)) 40%,
+    var(--color-border-muted, rgba(0, 0, 0, 0.15)) 50%,
     transparent 50%,
     transparent 65%,
-    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 65%,
-    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 75%,
+    var(--color-border-muted, rgba(0, 0, 0, 0.15)) 65%,
+    var(--color-border-muted, rgba(0, 0, 0, 0.15)) 75%,
     transparent 75%
   );
   opacity: 0;
@@ -339,8 +341,8 @@
   display: flex;
   align-items: center;
   border-radius: 10px;
-  border: 1.5px solid var(--trigger-border, var(--borderColor-muted, #d0d7de));
-  background: var(--trigger-bg, var(--bgColor-muted, #f6f8fa));
+  border: 1.5px solid var(--trigger-border, var(--color-border-muted, #d0d7de));
+  background: var(--trigger-bg, var(--color-background-muted, #f6f8fa));
   opacity: 0;
   transition: opacity 150ms;
   z-index: 3;
@@ -360,7 +362,7 @@
   justify-content: center;
   font-size: 16px;
   font-weight: 600;
-  color: var(--trigger-text, var(--fgColor-default, #1f2328));
+  color: var(--trigger-text, var(--color-foreground, #1f2328));
   transition: background 120ms;
 }
 
@@ -373,7 +375,7 @@
 }
 
 .zoomBtn:hover:not(:disabled) {
-  background: var(--trigger-bg-hover, var(--bgColor-neutral-muted, #eaeef2));
+  background: var(--trigger-bg-hover, var(--color-background-neutral-muted, #eaeef2));
 }
 
 .zoomBtn:disabled {
@@ -391,9 +393,9 @@
   font-size: 11px;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
-  color: var(--trigger-text, var(--fgColor-default, #1f2328));
-  border-left: 1.5px solid var(--trigger-border, var(--borderColor-muted, #d0d7de));
-  border-right: 1.5px solid var(--trigger-border, var(--borderColor-muted, #d0d7de));
+  color: var(--trigger-text, var(--color-foreground, #1f2328));
+  border-left: 1.5px solid var(--trigger-border, var(--color-border-muted, #d0d7de));
+  border-right: 1.5px solid var(--trigger-border, var(--color-border-muted, #d0d7de));
   user-select: none;
 }
 
@@ -420,7 +422,7 @@
   position: relative;
   border-radius: 12px;
   overflow: hidden;
-  background: var(--bgColor-default, #ffffff);
+  background: var(--color-background, #ffffff);
   box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
   animation: expandScaleIn 0.2s ease;
 }
@@ -469,7 +471,7 @@
   height: 100%;
   position: relative;
   overflow: hidden;
-  background: var(--bgColor-default, #ffffff);
+  background: var(--color-background, #ffffff);
 }
 
 .expandContainerSplit .expandIframe {
@@ -499,7 +501,7 @@
   min-width: 0;
   height: 100%;
   overflow: hidden;
-  border-right: 1px solid var(--borderColor-muted, #d8dee4);
+  border-right: 1px solid var(--color-border-muted, #d8dee4);
 }
 
 .expandSplitRight {
@@ -513,7 +515,7 @@
   width: 100%;
   height: 100%;
   overflow: auto;
-  background: var(--bgColor-default, #ffffff);
+  background: var(--color-background, #ffffff);
 }
 
 .expandSecondary iframe {
@@ -533,13 +535,13 @@
   padding: 32px 40px;
   font-size: 15px;
   line-height: 1.7;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   max-width: 800px;
   margin: 0 auto;
 }
 
 .expandMarkdownContent * { pointer-events: auto; }
-.expandMarkdownContent a { color: var(--fgColor-accent, #0969da); text-decoration: none; }
+.expandMarkdownContent a { color: var(--color-foreground-accent, #0969da); text-decoration: none; }
 .expandMarkdownContent a:hover { text-decoration: underline; }
 .expandMarkdownContent img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
 
@@ -547,14 +549,14 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: var(--bgColor-default, #ffffff);
+  background: var(--color-background, #ffffff);
 }
 
 .expandGithubHeader {
   padding: 16px 24px;
   font-size: 18px;
   font-weight: 600;
-  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
 }
 
 .expandGithubBody {
@@ -566,7 +568,7 @@
 }
 
 .expandGithubBody * { pointer-events: auto; }
-.expandGithubBody a { color: var(--fgColor-accent, #0969da); }
+.expandGithubBody a { color: var(--color-foreground-accent, #0969da); }
 
 .expandLinkCard {
   padding: 32px 40px;

package/src/internals/canvas/widgets/PrototypeEmbed.test.jsx

@@ -1,10 +1,124 @@
 import { describe, expect, it } from 'vitest'
 import { getEmbedChromeVars } from './embedTheme.js'
+import { normalizeLegacyEmbedSrc } from './normalizeLegacyEmbedSrc.js'
 
 describe('getEmbedChromeVars', () => {
-  it('follows toolbar theme variants for embed edit chrome', () => {
-    expect(getEmbedChromeVars('light')['--bgColor-default']).toBe('#ffffff')
-    expect(getEmbedChromeVars('dark')['--bgColor-default']).toBe('#0d1117')
-    expect(getEmbedChromeVars('dark_dimmed')['--bgColor-default']).toBe('#212830')
+  it('returns an empty object — color tokens now cascade from data-sb-canvas-theme via tailwind.css', () => {
+    expect(getEmbedChromeVars('light')).toEqual({})
+    expect(getEmbedChromeVars('dark')).toEqual({})
+    expect(getEmbedChromeVars('dark_dimmed')).toEqual({})
+  })
+})
+
+describe('normalizeLegacyEmbedSrc', () => {
+  it('passes through clean canvas-app routes unchanged', () => {
+    expect(normalizeLegacyEmbedSrc('/cq-org-enablement')).toBe('/cq-org-enablement')
+    expect(normalizeLegacyEmbedSrc('/MyProto/SignupForm')).toBe('/MyProto/SignupForm')
+    expect(normalizeLegacyEmbedSrc('/cq-org-enablement#x=1')).toBe('/cq-org-enablement#x=1')
+  })
+
+  it('passes through external http(s) URLs unchanged', () => {
+    expect(normalizeLegacyEmbedSrc('https://example.com/foo')).toBe('https://example.com/foo')
+  })
+
+  it('passes through empty/falsy values', () => {
+    expect(normalizeLegacyEmbedSrc('')).toBe('')
+    expect(normalizeLegacyEmbedSrc(null)).toBe(null)
+    expect(normalizeLegacyEmbedSrc(undefined)).toBe(undefined)
+  })
+
+  describe('legacy hash-form: /prototypes.html#/<route>', () => {
+    it('strips loader prefix and keeps inner route', () => {
+      expect(normalizeLegacyEmbedSrc('/prototypes.html#/cq-org-enablement')).toBe('/cq-org-enablement')
+    })
+
+    it('keeps query strings inside inner', () => {
+      expect(normalizeLegacyEmbedSrc('/prototypes.html#/cq-org-enablement?cqConfirmOpen=true'))
+        .toBe('/cq-org-enablement?cqConfirmOpen=true')
+    })
+
+    it('handles non-root basePath', () => {
+      expect(normalizeLegacyEmbedSrc('/storyboard/prototypes.html#/MyProto')).toBe('/MyProto')
+    })
+
+    it('returns "/" for empty inner', () => {
+      expect(normalizeLegacyEmbedSrc('/prototypes.html#')).toBe('/')
+    })
+
+    it('prefixes "/" if inner missing leading slash', () => {
+      expect(normalizeLegacyEmbedSrc('/prototypes.html#MyProto')).toBe('/MyProto')
+    })
+  })
+
+  describe('legacy URLSearchParams-clobbered form (real-world 0.6.13/0.6.14 bug)', () => {
+    // Real bug: storyboard's session.writeHash did URLSearchParams.toString()
+    // on the entire hash, which URL-encoded the route slash to %2F and turned
+    // /MyProto into a key with an empty value. Real persisted srcs from the
+    // wild look like /prototypes.html#%2Fcq-org-enablement=&cqConfirmOpen=true
+    it('recovers route from URLSearchParams-mangled hash', () => {
+      expect(
+        normalizeLegacyEmbedSrc('/prototypes.html#%2Fcq-org-enablement=&cqConfirmOpen=true'),
+      ).toBe('/cq-org-enablement#cqConfirmOpen=true')
+    })
+
+    it('recovers route with no surviving storyboard state', () => {
+      expect(normalizeLegacyEmbedSrc('/prototypes.html#%2Fcq-org-enablement=')).toBe('/cq-org-enablement')
+    })
+
+    it('recovers route with multiple storyboard params', () => {
+      expect(
+        normalizeLegacyEmbedSrc(
+          '/prototypes.html#%2Fcq-org-enablement=&cqEnabled=null&cqFlashDismissed=null&cqConfirmOpen=true',
+        ),
+      ).toBe('/cq-org-enablement#cqEnabled=null&cqFlashDismissed=null&cqConfirmOpen=true')
+    })
+
+    it('recovers nested route', () => {
+      expect(
+        normalizeLegacyEmbedSrc('/prototypes.html#%2FMyProto%2FSignupForm=&x=1'),
+      ).toBe('/MyProto/SignupForm#x=1')
+    })
+
+    it('handles non-root basePath', () => {
+      expect(
+        normalizeLegacyEmbedSrc('/storyboard/prototypes.html#%2FMyProto=&x=1'),
+      ).toBe('/MyProto#x=1')
+    })
+  })
+
+  describe('defensive path-form: /prototypes.html/<route>', () => {
+    it('strips loader prefix', () => {
+      expect(normalizeLegacyEmbedSrc('/prototypes.html/MyProto')).toBe('/MyProto')
+    })
+
+    it('handles nested routes', () => {
+      expect(normalizeLegacyEmbedSrc('/prototypes.html/MyProto/SignupForm')).toBe('/MyProto/SignupForm')
+    })
+
+    it('handles non-root basePath', () => {
+      expect(normalizeLegacyEmbedSrc('/storyboard/prototypes.html/MyProto')).toBe('/MyProto')
+    })
+  })
+
+  describe('all-encompassing regression — no legacy shape can produce a /prototypes.html src', () => {
+    const cases = [
+      '/prototypes.html#/foo',
+      '/prototypes.html#/foo?bar=1',
+      '/prototypes.html#',
+      '/prototypes.html#%2Ffoo=&bar=1',
+      '/prototypes.html#%2Ffoo%2Fbar=&x=1',
+      '/prototypes.html/foo',
+      '/prototypes.html/foo/bar',
+      '/storyboard/prototypes.html#/foo',
+      '/storyboard/prototypes.html#%2Ffoo=&x=1',
+      '/storyboard/prototypes.html/foo',
+    ]
+    for (const input of cases) {
+      it(`recovers ${input}`, () => {
+        const result = normalizeLegacyEmbedSrc(input)
+        expect(result).not.toMatch(/prototypes\.html/)
+        expect(result.startsWith('/')).toBe(true)
+      })
+    }
   })
 })

package/src/internals/canvas/widgets/ResizeHandle.module.css

@@ -8,12 +8,12 @@
   background: linear-gradient(
     135deg,
     transparent 40%,
-    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 40%,
-    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 50%,
+    var(--color-border-muted, rgba(0, 0, 0, 0.15)) 40%,
+    var(--color-border-muted, rgba(0, 0, 0, 0.15)) 50%,
     transparent 50%,
     transparent 65%,
-    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 65%,
-    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 75%,
+    var(--color-border-muted, rgba(0, 0, 0, 0.15)) 65%,
+    var(--color-border-muted, rgba(0, 0, 0, 0.15)) 75%,
     transparent 75%
   );
   opacity: 0;

package/src/internals/canvas/widgets/StorySetWidget.jsx

@@ -20,7 +20,6 @@ import ExpandedPane from './ExpandedPane.jsx'
 import { buildSecondaryIframeUrl, getSplitPaneLabel } from './expandUtils.js'
 import { useExpandOverride } from './useExpandOverride.js'
 import { useIframeDevLogs } from './iframeDevLogs.js'
-import styles from './StorySetWidget.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
 function GridIcon({ size = 16 }) {
@@ -31,18 +30,28 @@ function resolveStorySetUrl(storyId, layout, selected, density, theme) {
   const story = getStoryData(storyId)
   if (!story?._storyModule) return ''
   const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+
+  // Route through the shared iframe-isolation entry in dev so a broken
+  // .story.jsx can't poison the canvas SPA's module graph. The real story
+  // route handles it in prod (no isolation middleware in deployed builds).
   const params = new URLSearchParams()
-  // Route via the real story page (works in dev AND prod). The dev-only
-  // `_storyboard/canvas/isolate-set` middleware doesn't exist in deployed
-  // builds, so we mount ComponentSetPage at the story's route with
-  // `_sb_component_set` instead. `_sb_embed` keeps the canvas chrome off.
   params.set('_sb_embed', '')
   params.set('_sb_component_set', '')
+  // Force the prototype surface inside the iframe to follow the global
+  // theme. themeBootstrap only writes a theme's companion attrs
+  // (data-color-mode, data-light-theme, data-dark-theme) to <html> for
+  // the prototype surface — so any other target would leave Primer
+  // components rendering in light mode regardless of the canvas theme.
+  params.set('_sb_theme_target', 'prototype')
   if (layout) params.set('layout', layout)
   if (selected) params.set('selected', selected)
   if (density) params.set('density', density)
   if (theme) params.set('theme', theme)
+
   const route = story._route || `/components/${storyId}`
+  if (import.meta.env.DEV) {
+    return `${base}/stories.html${route}?${params}`
+  }
   return `${base}${route}?${params}`
 }
 
@@ -61,6 +70,10 @@ export default forwardRef(function StorySetWidget({ id: widgetId, props, onUpdat
   const contentSizeRef = useRef({ width: 0, height: 0 })
   const [snapping, setSnapping] = useState(false)
   const [interactive, setInteractive] = useState(false)
+  // Track which src URL has fired its onLoad callback so we can overlay a
+  // spinner while a new iframe is fetching. Stored as the URL itself so
+  // changing src naturally invalidates the loaded state without an effect.
+  const [loadedSrc, setLoadedSrc] = useState(null)
   const [storyIndexKey, setStoryIndexKey] = useState(0)
   const [expandedMode, setExpandedMode] = useExpandOverride('storyset', widgetId)
   const expanded = expandedMode === '1' || expandedMode === 'immersive'
@@ -193,10 +206,13 @@ export default forwardRef(function StorySetWidget({ id: widgetId, props, onUpdat
   if (!storyId) {
     return (
       <WidgetWrapper>
-        <div className={styles.container} ref={containerRef}>
-          <div className={styles.error}>
-            <span className={styles.errorIcon}><GridIcon size={20} /></span>
-            <span className={styles.errorText}>Missing story ID</span>
+        <div
+          ref={containerRef}
+          className="relative overflow-hidden min-w-[200px] min-h-[120px] w-full h-full rounded-lg bg-background shadow-[0_4px_16px_rgba(0,0,0,0.08)]"
+        >
+          <div className="flex items-center gap-2 p-4 text-sm leading-snug font-[system-ui,-apple-system,sans-serif] text-foreground-danger">
+            <span className="text-xl flex-shrink-0"><GridIcon size={20} /></span>
+            <span className="break-words">Missing story ID</span>
           </div>
         </div>
       </WidgetWrapper>
@@ -206,10 +222,13 @@ export default forwardRef(function StorySetWidget({ id: widgetId, props, onUpdat
   if (!iframeSrc) {
     return (
       <WidgetWrapper>
-        <div className={styles.container} ref={containerRef}>
-          <div className={styles.error}>
-            <span className={styles.errorIcon}><GridIcon size={20} /></span>
-            <span className={styles.errorText}>Story &ldquo;{storyId}&rdquo; not found or has no route</span>
+        <div
+          ref={containerRef}
+          className="relative overflow-hidden min-w-[200px] min-h-[120px] w-full h-full rounded-lg bg-background shadow-[0_4px_16px_rgba(0,0,0,0.08)]"
+        >
+          <div className="flex items-center gap-2 p-4 text-sm leading-snug font-[system-ui,-apple-system,sans-serif] text-foreground-danger">
+            <span className="text-xl flex-shrink-0"><GridIcon size={20} /></span>
+            <span className="break-words">Story &ldquo;{storyId}&rdquo; not found or has no route</span>
           </div>
         </div>
       </WidgetWrapper>
@@ -224,25 +243,34 @@ export default forwardRef(function StorySetWidget({ id: widgetId, props, onUpdat
   return (
     <>
     <WidgetWrapper>
-      <div ref={containerRef} className={styles.container} style={sizeStyle}>
-        <div className={styles.header}>
-          <span className={styles.headerIcon}><GridIcon size={16} /></span>
-          <span className={styles.headerTitle}>{displayName}</span>
+      <div
+        ref={containerRef}
+        className="relative overflow-hidden min-w-[200px] min-h-[120px] w-full h-full rounded-lg bg-background shadow-[0_4px_16px_rgba(0,0,0,0.08)]"
+        style={sizeStyle}
+      >
+        <div className="flex items-center gap-1.5 px-2.5 py-2.5 text-xs font-medium whitespace-nowrap overflow-hidden text-ellipsis select-none border-b border-border-muted bg-background-muted text-foreground-muted">
+          <span className="inline-flex flex-shrink-0"><GridIcon size={16} /></span>
+          <span className="overflow-hidden text-ellipsis">{displayName}</span>
           {selected && (
-            <span className={styles.headerSelected}>· {selected}</span>
+            <span className="font-semibold flex-shrink-0 text-foreground-accent">· {selected}</span>
           )}
-          <span className={styles.headerLayout} title={`Layout: ${layout}`}>
-            {layout === 'wide' ? '▭' : layout === 'tall' ? '▯' : '▦'}
-          </span>
         </div>
-        <div className={styles.content}>
+        <div className="relative w-full h-[calc(100%-37px)]">
           <iframe
             ref={iframeRef}
             src={iframeSrc}
-            className={styles.iframe}
+            className="absolute inset-0 block w-full h-full border-0 z-[1]"
             title={`${displayName} component set`}
-            onLoad={(e) => e.target.blur()}
+            onLoad={(e) => { e.target.blur(); setLoadedSrc(iframeSrc) }}
           />
+          {loadedSrc !== iframeSrc && (
+            <div
+              className="absolute inset-0 z-[2] flex flex-col items-center justify-center gap-2 text-center bg-background-muted text-foreground-muted"
+              aria-hidden="true"
+            >
+              <div className="w-10 h-10 rounded-full animate-spin border-t-foreground-accent" />
+            </div>
+          )}
         </div>
         {!interactive && (
           <div
@@ -299,7 +327,7 @@ function ComponentSetExpandPane({ widgetId, storyId, layout, selected, immersive
     kind: 'react',
     render: () => url
       ? <iframe src={url} style={{ border: 'none', width: '100%', height: '100%', display: 'block' }} title={storyId} onLoad={(e) => e.target.blur()} />
-      : <div style={{ padding: 32, color: 'var(--fgColor-muted)' }}>Story &quot;{storyId}&quot; not found</div>,
+      : <div style={{ padding: 32, color: 'var(--color-foreground-muted)' }}>Story &quot;{storyId}&quot; not found</div>,
   }), [widgetId, label, url, storyId])
 
   return (