@dfosco/storyboard 0.7.0 → 0.8.1

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

@@ -583,3 +583,74 @@
 .expandedUrl:hover {
   text-decoration: underline;
 }
+
+/* ── PR metadata (state badge + branch refs + diff stats) ──────────── */
+
+.prMeta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+  min-width: 0;
+}
+
+.prStateBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px 5px 9px;
+  border-radius: 2em;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--fgColor-onEmphasis, #ffffff);
+  white-space: nowrap;
+}
+
+.prStateOpen { background: var(--bgColor-open-emphasis, #1f883d); }
+.prStateMerged { background: var(--bgColor-done-emphasis, #8250df); }
+.prStateClosed { background: var(--bgColor-closed-emphasis, #cf222e); }
+.prStateDraft {
+  background: var(--bgColor-neutral-emphasis, #59636e);
+}
+
+.prBranchRef {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--bgColor-muted, #f6f8fa);
+  color: var(--fgColor-default, #1f2328);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  max-width: 240px;
+  overflow: hidden;
+}
+
+.prBranchName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 96px;
+}
+
+.prBranchArrow {
+  color: var(--fgColor-muted, #656d76);
+  font-family: -apple-system, system-ui, sans-serif;
+  flex-shrink: 0;
+}
+
+.prDiffStat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.prDiffAdd { color: var(--fgColor-success, #1a7f37); }
+.prDiffDel { color: var(--fgColor-danger, #cf222e); }

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

@@ -7,6 +7,7 @@ import { readProp, prototypeEmbedSchema } from './widgetProps.js'
 import { getEmbedChromeVars } from './embedTheme.js'
 import { useIframeDevLogs } from './iframeDevLogs.js'
 import { findAllConnectedSplitTargets, getSplitPaneLabel, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
+import { normalizeLegacyEmbedSrc } from './normalizeLegacyEmbedSrc.js'
 import ExpandedPane from './ExpandedPane.jsx'
 import styles from './PrototypeEmbed.module.css'
 import overlayStyles from './embedOverlay.module.css'
@@ -46,21 +47,76 @@ function resolveCanvasThemeFromStorage() {
 const HEADER_HEIGHT = 37
 
 export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdate, resizable }, ref) {
-  const src = readProp(props, 'src', prototypeEmbedSchema)
+  const rawStoredSrc = readProp(props, 'src', prototypeEmbedSchema)
+  const src = normalizeLegacyEmbedSrc(rawStoredSrc)
   const width = readProp(props, 'width', prototypeEmbedSchema) || 800
   const height = readProp(props, 'height', prototypeEmbedSchema) || 600
   const zoom = readProp(props, 'zoom', prototypeEmbedSchema) || 100
   const label = readProp(props, 'label', prototypeEmbedSchema) || src
 
+  // Self-healing write-back: if normalization changed the src, persist the
+  // clean form so the canvas JSONL stops carrying the broken URL. Without
+  // this, every render keeps recovering at runtime but the file stays
+  // poisoned and any consumer on an older library still sees the bug.
+  useEffect(() => {
+    if (!onUpdate) return
+    if (typeof rawStoredSrc !== 'string' || rawStoredSrc === src) return
+    onUpdate({ src })
+  }, [rawStoredSrc, src, onUpdate])
+
   const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
   const baseSegment = basePath.replace(/^\//, '')
-  const rawSrc = useMemo(() => {
-    if (!src) return ''
-    if (/^https?:\/\//.test(src)) return src
+  // Two URLs are derived from `src`:
+  //   - rawSrc — the iframe URL. In DEV this routes through the isolated
+  //     prototypes.html entry so a broken prototype's transform/HMR errors
+  //     stay inside the iframe (see .agents/plans/vite-isolation.md):
+  //     /MyProto/SignupForm becomes prototypes.html/MyProto/SignupForm.
+  //     Routing happens in the *pathname* (createBrowserRouter), not in the
+  //     hash, so the hash and search stay free for storyboard URL state
+  //     (`?flow=...` and `#key=value` overrides). In PROD it loads the
+  //     prototype path directly through the canvas SPA (prototypes.html is
+  //     a build-time isolation artifact that must not leak into deployed URLs).
+  //   - externalSrc — the URL used by "Open in new tab". Always direct
+  //     (`${basePath}/<protoPath>`), never prototypes.html, even in dev —
+  //     opening prototypes.html/... in a fresh tab is a leaky surprise
+  //     for users navigating from the canvas.
+  // External http(s) URLs are left alone in both cases. basePath already
+  // carries the /branch--xxx/ prefix on branch deploys, so both work for
+  // main and branch deploys alike.
+  const { rawSrc, externalSrc } = useMemo(() => {
+    if (!src) return { rawSrc: '', externalSrc: '' }
+    if (/^https?:\/\//.test(src)) return { rawSrc: src, externalSrc: src }
     const cleaned = src.replace(/^\/branch--[^/]+/, '')
-    if (baseSegment && cleaned.startsWith(basePath)) return cleaned
-    if (baseSegment && cleaned.startsWith(baseSegment)) return `/${cleaned}`
-    return `${basePath}${cleaned}`
+    let normalized
+    if (baseSegment && cleaned.startsWith(basePath)) normalized = cleaned
+    else if (baseSegment && cleaned.startsWith(baseSegment)) normalized = `/${cleaned}`
+    else normalized = `${basePath}${cleaned}`
+    // Strip basePath so we can split path/query/hash cleanly and
+    // re-anchor for whichever mode we're in. Any pre-existing #hash on
+    // the original src is preserved.
+    const withoutBase = baseSegment && normalized.startsWith(basePath)
+      ? normalized.slice(basePath.length) || '/'
+      : normalized
+    const hashIdx = withoutBase.indexOf('#')
+    const innerHash = hashIdx >= 0 ? withoutBase.slice(hashIdx + 1) : ''
+    const pathAndQuery = hashIdx >= 0 ? withoutBase.slice(0, hashIdx) : withoutBase
+    const routePath = pathAndQuery.startsWith('/') ? pathAndQuery : `/${pathAndQuery}`
+    const suffix = innerHash ? `#${innerHash}` : ''
+    // Direct path through the canvas SPA — used in prod for the iframe and
+    // always for "Open in new tab".
+    const directUrl = `${basePath}${routePath}${suffix}`
+    if (import.meta.env.PROD) {
+      return { rawSrc: directUrl, externalSrc: directUrl }
+    }
+    // Dev iframe: prototypes.html with the route as a sub-path. The library
+    // middleware (`data-plugin.js`) serves the same HTML shell for
+    // `/prototypes.html/*` so a hard reload / open-in-new-tab works. The
+    // prototype name (first path segment) narrows getRoutesForProto so a
+    // broken sibling prototype can't poison the lazy() chain. Hash and
+    // search stay attached so storyboard URL state (`#key=value` overrides,
+    // `?flow=name`) survives the redirect through the isolation entry.
+    const iframeUrl = `${basePath}/prototypes.html${routePath}${suffix}`
+    return { rawSrc: iframeUrl, externalSrc: directUrl }
   }, [src, basePath, baseSegment])
 
   const scale = zoom / 100
@@ -268,7 +324,10 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     function handleMessage(e) {
       if (e.source !== iframeRef.current?.contentWindow) return
       if (e.data?.type !== 'storyboard:embed:navigate') return
-      const newSrc = e.data.src
+      // Defensive: older consumer embeds reported `/prototypes.html#/route`
+      // here (loader path + hash). Normalize to the inner route so we never
+      // persist the broken form.
+      const newSrc = normalizeLegacyEmbedSrc(e.data.src)
       if (newSrc && newSrc !== src) {
         const originalSrc = readProp(props, 'originalSrc', prototypeEmbedSchema)
         onUpdate?.({ src: newSrc, originalSrc: originalSrc || src })
@@ -295,7 +354,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
       } else if (actionId === 'split-screen') {
         setExpandMode('split')
       } else if (actionId === 'open-external') {
-        if (rawSrc) window.open(rawSrc, '_blank', 'noopener')
+        if (externalSrc) window.open(externalSrc, '_blank', 'noopener')
       } else if (actionId === 'refresh-frame') {
         const iframe = iframeRef.current
         if (iframe) {
@@ -310,7 +369,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
         onUpdate?.({ zoom: Math.max(25, zoom - step) })
       }
     },
-  }), [rawSrc, zoom, onUpdate])
+  }), [externalSrc, zoom, onUpdate])
 
   function handlePickRoute(route) {
     onUpdate?.({ src: route })

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

@@ -1,5 +1,6 @@
 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', () => {
@@ -8,3 +9,116 @@ describe('getEmbedChromeVars', () => {
     expect(getEmbedChromeVars('dark_dimmed')['--bgColor-default']).toBe('#212830')
   })
 })
+
+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/StorySetWidget.jsx

@@ -31,18 +31,22 @@ 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', '')
   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}`
 }
 

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

@@ -11,7 +11,6 @@
 import { forwardRef, useImperativeHandle, useRef, useCallback, useState, useEffect, useMemo } from 'react'
 import { getStoryData } from '../../../core/index.js'
 import { useThemeState, useThemeSyncTargets } from '../../hooks/useThemeState.js'
-import { getConfig } from '../../../core/stores/configStore.js'
 import { createInspectorHighlighter } from '../../../core/inspector/highlighter.js'
 import Icon from '../../Icon.jsx'
 import WidgetWrapper from './WidgetWrapper.jsx'
@@ -20,7 +19,6 @@ import { useIframeDevLogs } from './iframeDevLogs.js'
 import { findAllConnectedSplitTargets, getSplitPaneLabel, buildPaneForWidget, buildSplitLayout, buildSecondaryIframeUrl } from './expandUtils.js'
 import { useExpandOverride } from './useExpandOverride.js'
 import ExpandedPane from './ExpandedPane.jsx'
-import InlineStoryRenderer from './InlineStoryRenderer.jsx'
 import styles from './StoryWidget.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
@@ -28,30 +26,24 @@ function ComponentIcon({ size = 36 }) {
   return <Icon name="iconoir/keyframe" size={size} />
 }
 
-function isInlineStoriesEnabled() {
-  try {
-    if (typeof window !== 'undefined') {
-      const params = new URLSearchParams(window.location.search)
-      if (params.has('_sb_inline_stories')) {
-        const v = params.get('_sb_inline_stories')
-        return v !== '0' && v !== 'false'
-      }
-    }
-  } catch { /* */ }
-  try {
-    return Boolean(getConfig('canvas')?.inlineStories)
-  } catch { return false }
-}
-
 function resolveStoryUrl(storyId, exportName, theme) {
   const story = getStoryData(storyId)
   if (!story?._storyModule) return ''
   const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+
+  // In dev, route through the isolated `stories.html` entry so a broken
+  // .story.jsx's transform/HMR errors stay inside the iframe (the canvas
+  // chrome can't be poisoned by a sibling story's module graph). In prod
+  // there is no isolation middleware — the real SPA route handles it.
   const params = new URLSearchParams()
-  params.set('module', story._storyModule)
   if (exportName) params.set('export', exportName)
+  params.set('_sb_embed', '')
   if (theme) params.set('theme', theme)
-  return `${base}/_storyboard/canvas/isolate?${params}`
+
+  if (import.meta.env.DEV) {
+    return `${base}/stories.html${story._route || `/components/${storyId}`}?${params}`
+  }
+  return `${base}${story._route || `/components/${storyId}`}?${params}`
 }
 
 const _storySourcesCache = {}
@@ -205,15 +197,10 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
     [storyId, exportName, storyIndexKey, effectiveTheme],
   )
 
-  const inlineEnabled = isInlineStoriesEnabled()
-
-  // When paused and not interactive, freeze the iframe src to prevent reloads
-  const effectiveSrc = iframeSrc
-
   useIframeDevLogs({
     widget: 'StoryWidget',
-    loaded: !inlineEnabled && interactive && !showCode && Boolean(effectiveSrc),
-    src: effectiveSrc,
+    loaded: interactive && !showCode && Boolean(iframeSrc),
+    src: iframeSrc,
   })
 
   const displayName = exportName ? `${storyId} / ${exportName}` : storyId
@@ -231,7 +218,7 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
     )
   }
 
-  if (!inlineEnabled && !effectiveSrc) {
+  if (!iframeSrc) {
     return (
       <WidgetWrapper>
         <div className={styles.container} ref={containerRef}>
@@ -279,17 +266,13 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
         ) : (
           <>
             <div className={styles.content}>
-              {inlineEnabled ? (
-                <InlineStoryRenderer storyId={storyId} exportName={exportName} />
-              ) : (
-                <iframe
-                  ref={iframeRef}
-                  src={effectiveSrc}
-                  className={styles.iframe}
-                  title={displayName}
-                  onLoad={(e) => e.target.blur()}
-                />
-              )}
+              <iframe
+                ref={iframeRef}
+                src={iframeSrc}
+                className={styles.iframe}
+                title={displayName}
+                onLoad={(e) => e.target.blur()}
+              />
             </div>
 
             {!interactive && (

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

@@ -55,26 +55,24 @@ export default function TerminalReadWidget({ id, props }) {
       const canvasId = getCanvasId()
       if (!canvasId) { setFailed(true); return }
 
-      const urls = isProduction()
-        ? [
-            // New flat format: <widgetId>.snapshot.json
-            `${baseUrl}_storyboard/terminal-snapshots/${id}.snapshot.json`,
-            // Legacy nested format: <canvasDir>/<widgetId>.json
-            `${baseUrl}_storyboard/terminal-snapshots/${canvasId.replace(/\//g, '--')}/${id}.json`,
-          ]
-        : [
-            `${baseUrl}_storyboard/canvas/terminal-snapshot/${id}`,
-            `${baseUrl}_storyboard/terminal-snapshots/${id}.snapshot.json`,
-            `${baseUrl}_storyboard/terminal-snapshots/${canvasId.replace(/\//g, '--')}/${id}.json`,
-          ]
-
-      for (const url of urls) {
+      const indexUrl = `${baseUrl}_storyboard/terminal-snapshots/agents.snapshot.json`
+      const legacyUrl = `${baseUrl}_storyboard/terminal-snapshots/${canvasId.replace(/\//g, '--')}/${id}.json`
+      const restUrl = `${baseUrl}_storyboard/canvas/terminal-snapshot/${id}`
+
+      const tryUrls = isProduction()
+        ? [{ url: indexUrl, fromIndex: true }, { url: legacyUrl, fromIndex: false }]
+        : [{ url: restUrl, fromIndex: false }, { url: indexUrl, fromIndex: true }, { url: legacyUrl, fromIndex: false }]
+
+      for (const { url, fromIndex } of tryUrls) {
         try {
           const res = await fetch(url)
           if (!res.ok) continue
           const data = await res.json()
           if (cancelled) return
-          const text = data.paneContent || data.content || data.output || ''
+          const entry = fromIndex ? data?.agents?.[id] : data
+          if (!entry) continue
+          const text = entry.paneContent || entry.content || entry.output || ''
+          if (!text) continue
           setContent(text)
 
           const converter = await getConverter()

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

@@ -1,5 +1,5 @@
 import { useState, useCallback, useRef, useEffect, useSyncExternalStore } from 'react'
-import { Tooltip } from '@primer/react'
+import Tooltip from '../../Tooltip.jsx'
 import { CheckIcon } from '@primer/octicons-react'
 import { getConnectorConfig, getInteractGate } from './widgetConfig.js'
 import { ICON_REGISTRY } from './widgetIcons.jsx'

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

@@ -149,6 +149,21 @@
   top: calc(100% + 10px);
 }
 
+/* Invisible hit-area that bridges the 10px gap between the widget and the
+   toolbar. Keeps the parent .chromeContainer in :hover (and React mouseenter)
+   when the pointer crosses the padding, and — crucially — stops the pointer
+   from falling through to widgets stacked underneath, so the toolbar of an
+   overlapping widget on top stays interactive. */
+.toolbar::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  height: 10px;
+  pointer-events: auto;
+}
+
 /* Trigger dot — positioned in the toolbar, visible at rest */
 .triggerDot {
   width: 6px;

package/src/internals/canvas/widgets/embedTheme.js

@@ -2,7 +2,7 @@
  * Resolve the effective canvas theme from the core theme store.
  * Respects the canvas-specific theme sync toggle.
  */
-import { getTheme, getThemeSyncTargets } from '../../../core/index.js'
+import { getTheme, getSurfaceSync } from '../../../core/index.js'
 
 function resolveSystem() {
   if (typeof window === 'undefined') return 'light'
@@ -10,7 +10,7 @@ function resolveSystem() {
 }
 
 export function resolveCanvasTheme() {
-  const sync = getThemeSyncTargets()
+  const sync = getSurfaceSync()
   if (!sync.canvas) return 'light'
   const theme = getTheme()
   return theme === 'system' ? resolveSystem() : theme

package/src/internals/canvas/widgets/expandUtils.js

@@ -498,31 +498,31 @@ export function buildSecondaryIframeUrl(widget) {
     const exportName = widget.props?.exportName
     if (!storyId) return null
     const storyData = getStoryData(storyId)
-    if (storyData?._storyModule) {
-      const params = new URLSearchParams()
-      params.set('module', storyData._storyModule)
-      if (exportName) params.set('export', exportName)
-      return `${baseClean}/_storyboard/canvas/isolate?${params}`
-    }
-    return null
+    if (!storyData?._storyModule) return null
+    const route = storyData._route || `/components/${storyId}`
+    const params = new URLSearchParams()
+    if (exportName) params.set('export', exportName)
+    params.set('_sb_embed', '')
+    // Dev: route through the shared isolation entry. Prod: direct SPA route.
+    if (import.meta.env.DEV) return `${baseClean}/stories.html${route}?${params}`
+    return `${baseClean}${route}?${params}`
   }
 
   if (widget.type === 'component-set') {
     const storyId = widget.props?.storyId
     if (!storyId) return null
     const storyData = getStoryData(storyId)
-    if (storyData?._storyModule) {
-      const params = new URLSearchParams()
-      params.set('_sb_embed', '')
-      params.set('_sb_component_set', '')
-      const layout = widget.props?.layout
-      if (layout) params.set('layout', layout)
-      const selected = widget.props?.selected
-      if (selected) params.set('selected', selected)
-      const route = storyData._route || `/components/${storyId}`
-      return `${baseClean}${route}?${params}`
-    }
-    return null
+    if (!storyData?._storyModule) return null
+    const params = new URLSearchParams()
+    params.set('_sb_embed', '')
+    params.set('_sb_component_set', '')
+    const layout = widget.props?.layout
+    if (layout) params.set('layout', layout)
+    const selected = widget.props?.selected
+    if (selected) params.set('selected', selected)
+    const route = storyData._route || `/components/${storyId}`
+    if (import.meta.env.DEV) return `${baseClean}/stories.html${route}?${params}`
+    return `${baseClean}${route}?${params}`
   }
 
   return null