@dfosco/storyboard-react 4.2.0-alpha.15 → 4.2.0-alpha.16

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.2.0-alpha.15",
+  "version": "4.2.0-alpha.16",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.2.0-alpha.15",
-    "@dfosco/tiny-canvas": "4.2.0-alpha.15",
+    "@dfosco/storyboard-core": "4.2.0-alpha.16",
+    "@dfosco/tiny-canvas": "4.2.0-alpha.16",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",

package/src/BranchBar/BranchBar.jsx

@@ -1,8 +1,8 @@
 /**
- * BranchBar — dark top bar showing current branch on non-main routes.
+ * BranchBar — blue accent bar showing current branch and local dev status.
  *
- * Dev: shows branch name as a static label (use CLI to switch branches).
- * Prod: same label (dropdown switching deferred to ViewfinderNew).
+ * Dev: always visible (main or branch). Shows "Local development" label.
+ * Prod: shows on non-main branches only.
  */
 import { useState, useEffect, useMemo } from 'react'
 import { GitBranchIcon } from '@primer/octicons-react'
@@ -22,6 +22,7 @@ export default function BranchBar({ basePath }) {
     return m ? m[1] : 'main'
   }, [basePath])
 
+  const isLocalDev = import.meta.env.DEV
   const isOnBranch = currentBranch !== 'main'
 
   useEffect(() => {
@@ -32,7 +33,7 @@ export default function BranchBar({ basePath }) {
     return () => observer.disconnect()
   }, [])
 
-  if (!isOnBranch || hidden || isHiddenByParam) return null
+  if ((!isOnBranch && !isLocalDev) || hidden || isHiddenByParam) return null
 
   function hideChrome() {
     window.dispatchEvent(new KeyboardEvent('keydown', {
@@ -46,6 +47,8 @@ export default function BranchBar({ basePath }) {
         <span className={css.barLabel}>
           <GitBranchIcon size={12} />
           <span className={css.barBranchName}>{currentBranch}</span>
+          <span className={css.barSeparator}>·</span>
+          <span>Local development</span>
         </span>
         <div className={css.barActions}>
           <button className={css.barAction} onClick={hideChrome}>Hide</button>

package/src/BranchBar/BranchBar.module.css

@@ -16,8 +16,8 @@
   justify-content: center;
   gap: 8px;
   height: 32px;
-  background: var(--bgColor-emphasis, #1a1a1a);
-  color: var(--fgColor-onEmphasis, #ccc);
+  background: hsl(212, 92%, 45%);
+  color: #fff;
   padding: 4px 12px;
   position: relative;
 }
@@ -68,6 +68,11 @@
   white-space: nowrap;
 }
 
+.barSeparator {
+  opacity: 0.6;
+  margin: 0 2px;
+}
+
 .barAction {
   background: none;
   border: none;

package/src/CommandPalette/CommandPalette.jsx

@@ -204,6 +204,11 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
         continue
       }
 
+      if (tool.inlineAction === 'open-palette') {
+        // Skip — no point opening the palette from within itself
+        continue
+      }
+
       // Any remaining tools (all surfaces)
       if (tool.render === 'link' && tool.url) {
         remainingItems.push({
@@ -489,7 +494,7 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
 /**
  * Build a section from toolbar.config.json tools.
  * If toolIds is provided, only include those tools in that order (with optional custom labels).
- * Otherwise include all command-list tools.
+ * Otherwise include all command-palette tools.
  *
  * toolIds format: ["theme", "flows"] or [{ id: "theme", label: "Change theme" }]
  */
@@ -515,7 +520,7 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
     }
   } else {
     for (const [toolId, tool] of Object.entries(tools)) {
-      if (tool.surface !== 'command-list') continue
+      if (tool.surface !== 'command-palette') continue
       const state = getToolbarToolState(toolId)
       if (state === 'disabled' || state === 'hidden') continue
       if (isHiddenInPalette(tool, basePath)) continue
@@ -543,6 +548,19 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
       continue
     }
 
+    if (tool.inlineAction === 'open-palette') {
+      items.push({
+        id: `cfg:${section.id}:${toolId}`,
+        children: label,
+        keywords: [label, toolId, 'command', 'palette', 'search'].filter(Boolean),
+        showType: false,
+        onClick: () => {
+          document.dispatchEvent(new CustomEvent('storyboard:open-palette'))
+        },
+      })
+      continue
+    }
+
     if (tool.render === 'link' && tool.url) {
       items.push({
         id: `cfg:${section.id}:${toolId}`,

package/src/Icon.jsx

@@ -15,6 +15,10 @@
 /* ─── Custom SVG paths (fill-based, no namespace prefix) ─── */
 
 const customIcons = {
+  'home': {
+    viewBox: '0 0 16 16',
+    path: 'M6.906.664a1.749 1.749 0 0 1 2.187 0l5.25 4.2c.415.332.657.835.657 1.367v7.019A1.75 1.75 0 0 1 13.25 15h-3.5a.75.75 0 0 1-.75-.75V9H7v5.25a.75.75 0 0 1-.75.75h-3.5A1.75 1.75 0 0 1 1 13.25V6.23c0-.531.242-1.034.657-1.366l5.25-4.2Zm1.25 1.171a.25.25 0 0 0-.312 0l-5.25 4.2a.25.25 0 0 0-.094.196v7.019c0 .138.112.25.25.25H5.5V8.25a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v5.25h2.75a.25.25 0 0 0 .25-.25V6.23a.25.25 0 0 0-.094-.195Z',
+  },
   'folder': {
     viewBox: '0 0 24 24',
     path: 'M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h5.175q.4 0 .763.15t.637.425L12 6h8q.825 0 1.413.588T22 8v10q0 .825-.587 1.413T20 20z',

package/src/Viewfinder.jsx

@@ -1071,7 +1071,7 @@ export default function Viewfinder({
                 {activeTab === 'Starred' && 'No starred items. Click ☆ on a card to star it.'}
                 {activeTab === 'All' && 'No items found. Create a prototype, canvas, or component to get started.'}
               </div>
-            ) : groupByFolders && grouped && activeTab === 'All' && activeNav === 'all' ? (
+            ) : groupByFolders && grouped && activeTab === 'All' ? (
               <>
                 {grouped.folders.map(folder => (
                   <FolderSection

package/src/canvas/CanvasPage.bridge.test.jsx

@@ -63,12 +63,16 @@ vi.mock('./widgets/widgetProps.js', () => ({
   getDefaults: () => ({}),
 }))
 
-vi.mock('./widgets/widgetConfig.js', () => ({
-  getFeatures: () => [],
-  isResizable: () => false,
-  schemas: {},
-  getMenuWidgetTypes: () => [],
-}))
+vi.mock('./widgets/widgetConfig.js', async () => {
+  const actual = await vi.importActual('./widgets/widgetConfig.js')
+  return {
+    getFeatures: () => [],
+    isResizable: () => false,
+    schemas: {},
+    getMenuWidgetTypes: () => [],
+    getConnectorDefaults: actual.getConnectorDefaults,
+  }
+})
 
 vi.mock('./widgets/figmaUrl.js', () => ({
   isFigmaUrl: () => false,
@@ -129,6 +133,8 @@ describe('CanvasPage canvas bridge', () => {
     expect(window.__storyboardCanvasBridgeState).toEqual({
       active: true,
       canvasId: 'design-overview',
+      connectors: [],
+      widgets: [{ id: 'widget-1', type: 'mock-widget', position: { x: 10, y: 20 }, props: {} }],
       zoom: 100,
     })
     expect(mountedHandler).toHaveBeenCalled()
@@ -138,6 +144,8 @@ describe('CanvasPage canvas bridge', () => {
     expect(statusHandler.mock.calls.at(-1)?.[0]?.detail).toEqual({
       active: true,
       canvasId: 'design-overview',
+      connectors: [],
+      widgets: [{ id: 'widget-1', type: 'mock-widget', position: { x: 10, y: 20 }, props: {} }],
       zoom: 100,
     })
 

package/src/canvas/CanvasPage.dragdrop.test.jsx

@@ -48,12 +48,16 @@ vi.mock('./widgets/widgetProps.js', () => ({
   getDefaults: () => ({}),
 }))
 
-vi.mock('./widgets/widgetConfig.js', () => ({
-  getFeatures: () => [],
-  isResizable: () => false,
-  schemas: {},
-  getMenuWidgetTypes: () => [],
-}))
+vi.mock('./widgets/widgetConfig.js', async () => {
+  const actual = await vi.importActual('./widgets/widgetConfig.js')
+  return {
+    getFeatures: () => [],
+    isResizable: () => false,
+    schemas: {},
+    getMenuWidgetTypes: () => [],
+    getConnectorDefaults: actual.getConnectorDefaults,
+  }
+})
 
 vi.mock('./widgets/figmaUrl.js', () => ({
   isFigmaUrl: () => false,

package/src/canvas/CanvasPage.jsx

@@ -12,7 +12,6 @@ import { getPasteRules } from '@dfosco/storyboard-core'
 import { registerSmoothCorners } from '@dfosco/storyboard-core/smooth-corners'
 import { isGitHubEmbedUrl } from './widgets/githubUrl.js'
 import WidgetChrome from './widgets/WidgetChrome.jsx'
-import { EmbedControllerProvider } from './widgets/useEmbedController.jsx'
 import ComponentWidget from './widgets/ComponentWidget.jsx'
 import useUndoRedo from './useUndoRedo.js'
 import useMarqueeSelect from './useMarqueeSelect.js'
@@ -531,7 +530,6 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   const [canvasTheme, setCanvasTheme] = useState(() => resolveCanvasThemeFromStorage())
   const [snapEnabled, setSnapEnabled] = useState(canvas?.snapToGrid ?? false)
   const [snapGridSize, setSnapGridSize] = useState(canvas?.gridSize || 40)
-  const [perfMode, setPerfMode] = useState(canvas?.performanceMode ?? false)
   const [showGhInstallBanner, setShowGhInstallBanner] = useState(false)
 
   // Refs for snap settings (used by drop handler inside effect closure)
@@ -672,7 +670,6 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     setLocalSources(canvas?.sources ?? [])
     setSnapEnabled(canvas?.snapToGrid ?? false)
     setSnapGridSize(canvas?.gridSize || 40)
-    setPerfMode(canvas?.performanceMode ?? false)
     undoRedo.reset()
     // Only reset viewport state when switching to a different canvas,
     // not when the same canvas refreshes with server data.
@@ -686,11 +683,14 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     }
   }
 
-  // Debounced save to server
+  // Debounced save to server — routed through queueWrite to serialize
+  // with deletes and other writes, preventing stale data from overwriting.
   const debouncedSave = useRef(
     debounce((canvasId, widgets) => {
-      updateCanvas(canvasId, { widgets }).catch((err) =>
-        console.error('[canvas] Failed to save:', err)
+      queueWrite(() =>
+        updateCanvas(canvasId, { widgets }).catch((err) =>
+          console.error('[canvas] Failed to save:', err)
+        )
       )
     }, 2000)
   ).current
@@ -714,6 +714,10 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   }, [canvasId, debouncedSave, undoRedo, snapEnabled, snapGridSize])
 
   const handleWidgetRemove = useCallback((widgetId) => {
+    // Cancel any pending debounced save — it may contain stale data
+    // that includes the widget we're about to delete
+    debouncedSave.cancel()
+
     undoRedo.snapshot(stateRef.current, 'remove', widgetId)
     setLocalWidgets((prev) => prev ? prev.filter((w) => w.id !== widgetId) : prev)
     // Cascade: remove connectors referencing this widget
@@ -734,7 +738,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         console.error('[canvas] Failed to remove widget:', err)
       )
     )
-  }, [canvasId, undoRedo])
+  }, [canvasId, undoRedo, debouncedSave])
 
   const handleConnectorAdd = useCallback(async ({ startWidgetId, startAnchor, endWidgetId, endAnchor }) => {
     try {
@@ -923,10 +927,14 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     }
     const position = { x: baseX + n * 40, y: baseY + n * 40 }
     try {
+      const copyProps = { ...widget.props }
+      // Terminal widgets must get unique names — strip prettyName so the server generates a fresh one
+      if (widget.type === 'terminal') delete copyProps.prettyName
+
       undoRedo.snapshot(stateRef.current, 'add')
       const result = await addWidgetApi(canvasId, {
         type: widget.type,
-        props: { ...widget.props },
+        props: copyProps,
         position,
       })
       if (result.success && result.widget) {
@@ -1127,6 +1135,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     }
 
     undoRedo.snapshot(stateRef.current, 'move', dragId)
+    debouncedSave.cancel()
     setLocalWidgets((prev) => {
       if (!prev) return prev
       const next = prev.map((w) =>
@@ -1552,21 +1561,6 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     return () => document.removeEventListener('storyboard:canvas:toggle-snap', handleSnapToggle)
   }, [canvasId])
 
-  // Listen for performance mode toggle from command palette
-  useEffect(() => {
-    function handlePerfToggle() {
-      setPerfMode((prev) => {
-        const next = !prev
-        updateCanvas(canvasId, { settings: { performanceMode: next } }).catch((err) =>
-          console.error('[canvas] Failed to persist performance mode:', err)
-        )
-        return next
-      })
-    }
-    document.addEventListener('storyboard:canvas:toggle-performance-mode', handlePerfToggle)
-    return () => document.removeEventListener('storyboard:canvas:toggle-performance-mode', handlePerfToggle)
-  }, [canvasId])
-
   // Broadcast snap state to Svelte toolbar
   useEffect(() => {
     document.dispatchEvent(new CustomEvent('storyboard:canvas:snap-state', {
@@ -1804,6 +1798,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           undoRedo.snapshot(stateRef.current, 'add')
           setLocalWidgets((prev) => [...(prev || []), result.widget])
           setSelectedWidgetIds(new Set([result.widget.id]))
+          navigator.clipboard?.writeText(result.widget.id).catch(() => {})
         }
         return true
       } catch (err) {
@@ -1895,9 +1890,11 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           for (const w of sourceWidgets) {
             const relX = (w.position?.x ?? 0) - minX
             const relY = (w.position?.y ?? 0) - minY
+            const pasteProps = { ...w.props }
+            if (w.type === 'terminal') delete pasteProps.prettyName
             const result = await addWidgetApi(canvasId, {
               type: w.type,
-              props: { ...w.props },
+              props: pasteProps,
               position: { x: baseX + relX, y: baseY + relY },
             })
             if (result.success && result.widget) {
@@ -2382,7 +2379,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     <>
       <div className={styles.canvasTitle}>
         <a href={(import.meta.env?.BASE_URL || '/')} className={styles.canvasLogo} aria-label="Go to homepage">
-          <Icon name="iconoir/key-command" size={16} color="#fff" />
+          <Icon name="home" size={16} color="#fff" />
         </a>
         <CanvasTitleEditable
           canvasId={canvasId}
@@ -2391,9 +2388,6 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           isLocalDev={isLocalDev}
         />
         <PageSelector currentName={canvasId} pages={siblingPages} isLocalDev={isLocalDev} />
-        {isLocalDev && (
-          <span className={styles.localEditingLabel}>Local editing</span>
-        )}
       </div>
       <div
         ref={scrollRef}
@@ -2429,11 +2423,9 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
             dragPreview={connectorDrag}
             hidden={widgetDragging}
           />
-          <EmbedControllerProvider performanceMode={perfMode} scrollRef={scrollRef}>
           <Canvas {...canvasProps} onDragStart={isLocalDev ? handleItemDragStart : undefined} onDrag={isLocalDev ? handleItemDrag : undefined} onDragEnd={isLocalDev ? handleItemDragEnd : undefined}>
             {allChildren}
           </Canvas>
-          </EmbedControllerProvider>
         </div>
       </div>
       {showGhInstallBanner && (

package/src/canvas/CanvasPage.module.css

@@ -109,21 +109,6 @@
   isolation: isolate;
 }
 
-.localEditingLabel {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 12px;
-  background: hsl(212, 92%, 45%);
-  color: #fff;
-  font-size: 13px;
-  font-weight: 600;
-  border-radius: 6px;
-  letter-spacing: 0.01em;
-  white-space: nowrap;
-  pointer-events: none;
-  user-select: none;
-}
-
 .ghInstallBanner {
   position: fixed;
   left: 50%;

package/src/canvas/CanvasPage.multiselect.test.jsx

@@ -89,12 +89,16 @@ vi.mock('./widgets/widgetProps.js', () => ({
   getDefaults: () => ({}),
 }))
 
-vi.mock('./widgets/widgetConfig.js', () => ({
-  getFeatures: () => [],
-  isResizable: () => false,
-  schemas: {},
-  getMenuWidgetTypes: () => [],
-}))
+vi.mock('./widgets/widgetConfig.js', async () => {
+  const actual = await vi.importActual('./widgets/widgetConfig.js')
+  return {
+    getFeatures: () => [],
+    isResizable: () => false,
+    schemas: {},
+    getMenuWidgetTypes: () => [],
+    getConnectorDefaults: actual.getConnectorDefaults,
+  }
+})
 
 vi.mock('./widgets/figmaUrl.js', () => ({
   isFigmaUrl: () => false,

package/src/canvas/PageSelector.test.jsx

@@ -1,5 +1,5 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import PageSelector from './PageSelector.jsx'
 
 const PAGES = [
@@ -10,9 +10,15 @@ const PAGES = [
 
 describe('PageSelector', () => {
   beforeEach(() => {
-    // Reset location mock
+    // Reset location mock — use a setter spy so we can track assignments
     delete window.location
-    window.location = { href: '' }
+    const loc = { _href: '' }
+    Object.defineProperty(loc, 'href', {
+      get() { return loc._href },
+      set(v) { loc._href = v },
+      configurable: true,
+    })
+    window.location = loc
   })
 
   it('renders nothing when fewer than 2 pages', () => {
@@ -58,14 +64,17 @@ describe('PageSelector', () => {
     expect(options[0].getAttribute('aria-selected')).toBe('false')
   })
 
-  it('navigates to selected page', () => {
+  it('navigates to selected page', async () => {
     render(<PageSelector currentName="research/interviews" pages={PAGES} />)
     fireEvent.click(screen.getByTitle('Switch canvas page'))
     // Click the option in the menu (not the trigger label)
     const options = screen.getAllByRole('option')
     fireEvent.click(options[1]) // Surveys
 
-    expect(window.location.href).toContain('/canvas/research/surveys')
+    // Navigation uses a 300ms setTimeout for mouse clicks
+    await waitFor(() => {
+      expect(window.location.href).toContain('/canvas/research/surveys')
+    })
   })
 
   it('closes dropdown on Escape', () => {

package/src/canvas/widgets/ImageWidget.jsx

@@ -59,7 +59,7 @@ const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate, resizable
         const url = getImageUrl(src)
         const a = document.createElement('a')
         a.href = url
-        a.download = src.replace(/^_/, '')
+        a.download = src.replace(/^~/, '')
         document.body.appendChild(a)
         a.click()
         document.body.removeChild(a)

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -6,7 +6,7 @@ import ResizeHandle from './ResizeHandle.jsx'
 import { readProp, prototypeEmbedSchema } from './widgetProps.js'
 import { getEmbedChromeVars } from './embedTheme.js'
 import { useIframeDevLogs } from './iframeDevLogs.js'
-import { useEmbedActive } from './useEmbedController.jsx'
+import { useEmbedsPaused } from './useEmbedsPaused.js'
 import styles from './PrototypeEmbed.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
@@ -68,13 +68,14 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
   const [expanded, setExpanded] = useState(false)
   const [filter, setFilter] = useState('')
   const [canvasTheme, setCanvasTheme] = useState(() => resolveCanvasThemeFromStorage())
+  const embedsPaused = useEmbedsPaused()
+  const frozenSrcRef = useRef(null)
   const inputRef = useRef(null)
   const filterRef = useRef(null)
   const embedRef = useRef(null)
   const iframeRef = useRef(null)
   const inlineContainerRef = useRef(null)
   const modalContainerRef = useRef(null)
-  const { active: embedActive, activate: activateEmbed, performanceMode, tooMany } = useEmbedActive(widgetId, embedRef)
 
   const iframeSrc = useMemo(() => {
     if (!rawSrc) return ''
@@ -86,7 +87,15 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     return `${base}${sep}_sb_embed&_sb_hide_branch_bar&_sb_theme_target=prototype&_sb_canvas_theme=${canvasTheme}${hash}`
   }, [rawSrc, canvasTheme])
 
-  const inactive = !embedActive
+  // When paused and not interactive, freeze the iframe src to prevent reloads
+  const effectiveSrc = (() => {
+    if (!embedsPaused || interactive) {
+      frozenSrcRef.current = iframeSrc
+      return iframeSrc
+    }
+    if (frozenSrcRef.current == null) frozenSrcRef.current = iframeSrc
+    return frozenSrcRef.current
+  })()
 
   const prototypeIndex = useMemo(() => {
     try { return buildPrototypeIndex() }
@@ -157,8 +166,8 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
 
   useIframeDevLogs({
     widget: 'PrototypeEmbed',
-    loaded: Boolean(iframeSrc && interactive),
-    src: iframeSrc,
+    loaded: Boolean(effectiveSrc && interactive),
+    src: effectiveSrc,
   })
 
   useEffect(() => {
@@ -299,7 +308,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
         className={styles.embed}
         style={{ width, height, ...chromeVars }}
       >
-        <div className={`${styles.header}${inactive ? ` ${styles.headerPaused}` : ''}`}>
+        <div className={`${styles.header}${embedsPaused && !interactive ? ` ${styles.headerPaused}` : ''}`}>
           <span className={styles.headerIcon}><CollageFrameIcon size={16} /></span>
           <span className={styles.headerTitle}>{prototypeTitle}</span>
         </div>
@@ -357,17 +366,6 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
               </div>
             </form>
           </div>
-        ) : iframeSrc && inactive ? (
-          <div
-            className={overlayStyles.interactOverlay}
-            onClick={() => { activateEmbed(); enterInteractive() }}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => { if (e.key === 'Enter') { activateEmbed(); enterInteractive() } }}
-            aria-label="Click to refresh"
-          >
-            <span className={overlayStyles.interactHint}>Click to refresh</span>
-          </div>
         ) : iframeSrc ? (
           <>
             <div
@@ -377,7 +375,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
             >
               <iframe
                 ref={iframeRef}
-                src={iframeSrc}
+                src={effectiveSrc}
                 className={styles.iframe}
                 style={{
                   width: width / scale,

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

@@ -4,7 +4,7 @@ import { getEmbedChromeVars } from './embedTheme.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('#161b22')
-    expect(getEmbedChromeVars('dark_dimmed')['--bgColor-default']).toBe('#22272e')
+    expect(getEmbedChromeVars('dark')['--bgColor-default']).toBe('#0d1117')
+    expect(getEmbedChromeVars('dark_dimmed')['--bgColor-default']).toBe('#212830')
   })
 })

package/src/canvas/widgets/StoryWidget.jsx

@@ -10,7 +10,7 @@
  */
 import { forwardRef, useImperativeHandle, useRef, useCallback, useState, useEffect, useMemo } from 'react'
 import { getStoryData } from '@dfosco/storyboard-core'
-import { useEmbedActive } from './useEmbedController.jsx'
+import { useEmbedsPaused } from './useEmbedsPaused.js'
 import { createInspectorHighlighter } from '@dfosco/storyboard-core/inspector/highlighter'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
@@ -66,7 +66,8 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
   const [highlightedHtml, setHighlightedHtml] = useState(null)
   const [sourceLoading, setSourceLoading] = useState(false)
   const [storyIndexKey, setStoryIndexKey] = useState(0)
-  const { active: embedActive, activate: activateEmbed, performanceMode, tooMany } = useEmbedActive(widgetId, containerRef)
+  const embedsPaused = useEmbedsPaused()
+  const frozenSrcRef = useRef(null)
 
   // Re-resolve story URL when the story index is live-patched
   useEffect(() => {
@@ -173,17 +174,24 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
     [storyId, exportName, storyIndexKey],
   )
 
-  // Only render iframe when embed is active (controlled by EmbedController)
-  const shouldRenderIframe = embedActive && iframeSrc
+  // When paused and not interactive, freeze the iframe src to prevent reloads
+  const effectiveSrc = (() => {
+    if (!embedsPaused || interactive) {
+      frozenSrcRef.current = iframeSrc
+      return iframeSrc
+    }
+    // Paused & not interactive — use frozen src (or current if first time)
+    if (frozenSrcRef.current == null) frozenSrcRef.current = iframeSrc
+    return frozenSrcRef.current
+  })()
 
   useIframeDevLogs({
     widget: 'StoryWidget',
-    loaded: interactive && !showCode && Boolean(iframeSrc),
-    src: iframeSrc,
+    loaded: interactive && !showCode && Boolean(effectiveSrc),
+    src: effectiveSrc,
   })
 
   const displayName = exportName ? `${storyId} / ${exportName}` : storyId
-  const inactive = !embedActive
 
   if (!storyId) {
     return (
@@ -198,7 +206,7 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
     )
   }
 
-  if (!iframeSrc) {
+  if (!effectiveSrc) {
     return (
       <WidgetWrapper>
         <div className={styles.container} ref={containerRef}>
@@ -218,7 +226,7 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
   return (
     <WidgetWrapper>
       <div ref={containerRef} className={styles.container} style={sizeStyle}>
-        <div className={`${styles.header}${inactive ? ` ${styles.headerPaused}` : ''}`}>
+        <div className={`${styles.header}${embedsPaused && !interactive ? ` ${styles.headerPaused}` : ''}`}>
           <span className={styles.headerIcon}><ComponentIcon size={16} /></span>
           <span className={styles.headerTitle}>{displayName}</span>
         </div>
@@ -242,23 +250,12 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
               <pre className={styles.codeBlock}><code>{sourceCode || ''}</code></pre>
             )}
           </div>
-        ) : inactive ? (
-          <div
-            className={overlayStyles.interactOverlay}
-            onClick={() => { activateEmbed(); enterInteractive() }}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => { if (e.key === 'Enter') { activateEmbed(); enterInteractive() } }}
-            aria-label="Click to refresh"
-          >
-            <span className={overlayStyles.interactHint}>Click to refresh</span>
-          </div>
         ) : (
           <>
             <div className={styles.content}>
               <iframe
                 ref={iframeRef}
-                src={iframeSrc}
+                src={effectiveSrc}
                 className={styles.iframe}
                 title={displayName}
               />