@dfosco/storyboard 0.7.1 → 0.9.0

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

@@ -33,7 +33,7 @@
   width: 12px;
   height: 12px;
   background: #ffffff;
-  border: 2px solid var(--fgColor-accent, #0969da);
+  border: 2px solid var(--color-foreground-accent, #0969da);
   border-radius: 2px;
   z-index: 12;
 }
@@ -55,8 +55,8 @@
   justify-content: center;
   gap: 6px;
   padding: 4px 8px;
-  background: var(--bgColor-default, #ffffff);
-  border: 1.6px solid var(--borderColor-muted, #d0d7de);
+  background: var(--color-background, #ffffff);
+  border: 1.6px solid var(--color-border-muted, #d0d7de);
   border-radius: 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   white-space: nowrap;
@@ -64,8 +64,8 @@
 }
 
 :global([data-sb-canvas-theme^='dark']) .cropBar {
-  background: var(--bgColor-muted, #161b22);
-  border-color: var(--borderColor-muted, #373e47);
+  background: var(--color-background-muted, #161b22);
+  border-color: var(--color-border-muted, #373e47);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
@@ -79,76 +79,76 @@
   border-radius: 6px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   transition: background 100ms;
 }
 
 :global([data-sb-canvas-theme^='dark']) .cropBarBtn {
-  color: var(--fgColor-default, #e6edf3);
+  color: var(--color-foreground, #e6edf3);
 }
 
 .cropBarBtn:hover {
-  background: var(--bgColor-neutral-muted, #eaeef2);
+  background: var(--color-background-neutral-muted, #eaeef2);
 }
 
 :global([data-sb-canvas-theme^='dark']) .cropBarBtn:hover {
-  background: var(--bgColor-neutral-muted, #272c33);
+  background: var(--color-background-neutral-muted, #272c33);
 }
 
 .cropBarBtnSave {
-  background: var(--bgColor-success-emphasis, #1a7f37);
-  color: var(--fgColor-onEmphasis, #ffffff);
+  background: var(--color-background-success-emphasis, #1a7f37);
+  color: var(--color-foreground-on-emphasis, #ffffff);
 }
 
 .cropBarBtnSave:hover {
-  background: var(--bgColor-success-emphasis, #2da44e);
+  background: var(--color-background-success-emphasis, #2da44e);
   filter: brightness(1.1);
 }
 
 :global([data-sb-canvas-theme^='dark']) .cropBarBtnSave {
-  background: var(--bgColor-success-emphasis, #238636);
-  color: var(--fgColor-onEmphasis, #ffffff);
+  background: var(--color-background-success-emphasis, #238636);
+  color: var(--color-foreground-on-emphasis, #ffffff);
 }
 
 :global([data-sb-canvas-theme^='dark']) .cropBarBtnSave:hover {
-  background: var(--bgColor-success-emphasis, #2ea043);
+  background: var(--color-background-success-emphasis, #2ea043);
   filter: brightness(1.1);
 }
 
 .cropBarBtnCancel {
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
 }
 
 :global([data-sb-canvas-theme^='dark']) .cropBarBtnCancel {
-  color: var(--fgColor-muted, #8b949e);
+  color: var(--color-foreground-muted, #8b949e);
 }
 
 .cropBarBtnCancel:hover {
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
 }
 
 :global([data-sb-canvas-theme^='dark']) .cropBarBtnCancel:hover {
-  color: var(--fgColor-default, #e6edf3);
+  color: var(--color-foreground, #e6edf3);
 }
 
 .dimensions {
   font-size: 11px;
   font-weight: 500;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   padding: 0 4px;
   font-variant-numeric: tabular-nums;
 }
 
 :global([data-sb-canvas-theme^='dark']) .dimensions {
-  color: var(--fgColor-muted, #8b949e);
+  color: var(--color-foreground-muted, #8b949e);
 }
 
 .separator {
   width: 1px;
   height: 16px;
-  background: var(--borderColor-muted, #d0d7de);
+  background: var(--color-border-muted, #d0d7de);
 }
 
 :global([data-sb-canvas-theme^='dark']) .separator {
-  background: var(--borderColor-muted, #373e47);
+  background: var(--color-border-muted, #373e47);
 }

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

@@ -26,7 +26,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);
   display: flex;
   flex-direction: column;
@@ -58,7 +58,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--bgColor-default, #ffffff);
+  background: var(--color-background, #ffffff);
   animation: expandedPaneScaleIn 0.2s ease;
 }
 
@@ -165,7 +165,7 @@
 
 .divider:hover,
 .divider:active {
-  background: var(--bgColor-accent-muted, rgba(9, 105, 218, 0.15));
+  background: var(--color-background-accent-muted, rgba(9, 105, 218, 0.15));
 }
 
 .divider::after {
@@ -175,13 +175,13 @@
   bottom: 0;
   left: 50%;
   width: 1px;
-  background: var(--borderColor-muted, #d8dee4);
+  background: var(--color-border-muted, #d8dee4);
   transform: translateX(-50%);
 }
 
 .divider:hover::after,
 .divider:active::after {
-  background: var(--fgColor-accent, #0969da);
+  background: var(--color-foreground-accent, #0969da);
   width: 2px;
 }
 
@@ -200,7 +200,7 @@
 
 .rowDivider:hover,
 .rowDivider:active {
-  background: var(--bgColor-accent-muted, rgba(9, 105, 218, 0.15));
+  background: var(--color-background-accent-muted, rgba(9, 105, 218, 0.15));
 }
 
 .rowDivider::after {
@@ -210,12 +210,12 @@
   right: 0;
   top: 50%;
   height: 1px;
-  background: var(--borderColor-muted, #d8dee4);
+  background: var(--color-border-muted, #d8dee4);
   transform: translateY(-50%);
 }
 
 .rowDivider:hover::after,
 .rowDivider:active::after {
-  background: var(--fgColor-accent, #0969da);
+  background: var(--color-foreground-accent, #0969da);
   height: 2px;
 }

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

@@ -13,7 +13,7 @@
  *      Combined with `getState` for toggle resolution and `onAction` for dispatch.
  */
 import { ScreenNormalIcon } from '@primer/octicons-react'
-import { Tooltip } from '@primer/react'
+import Tooltip from '../../Tooltip.jsx'
 import { ICON_REGISTRY } from './widgetIcons.jsx'
 import { getWidgetMeta } from './widgetConfig.js'
 import Icon from '../../Icon.jsx'

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

@@ -57,7 +57,6 @@ export default forwardRef(function FigmaEmbed({ id: widgetId, props, onUpdate, r
   const height = readProp(props, 'height', figmaEmbedSchema)
 
   const [interactive, setInteractive] = useState(false)
-  const [showIframe, setShowIframe] = useState(true)
   const [expandMode, setExpandMode] = useExpandOverride('figma', widgetId)
   const expanded = expandMode !== null
 
@@ -65,8 +64,6 @@ export default forwardRef(function FigmaEmbed({ id: widgetId, props, onUpdate, r
   const embedRef = useRef(null)
   const inlineContainerRef = useRef(null)
   const modalContainerRef = useRef(null)
-  const teardownTimerRef = useRef(null)
-  const exitSessionRef = useRef(0)
 
   // Validate URL at render time — only embed known Figma URLs
   const isValid = useMemo(() => isFigmaUrl(url), [url])
@@ -77,14 +74,11 @@ export default forwardRef(function FigmaEmbed({ id: widgetId, props, onUpdate, r
 
   useIframeDevLogs({
     widget: 'FigmaEmbed',
-    loaded: showIframe && Boolean(embedUrl),
+    loaded: Boolean(embedUrl),
     src: embedUrl,
   })
 
   const enterInteractive = useCallback(() => {
-    exitSessionRef.current++
-    clearTimeout(teardownTimerRef.current)
-    setShowIframe(true)
     setInteractive(true)
   }, [])
 
@@ -93,21 +87,12 @@ export default forwardRef(function FigmaEmbed({ id: widgetId, props, onUpdate, r
     function handlePointerDown(e) {
       if (embedRef.current && !embedRef.current.contains(e.target)) {
         setInteractive(false)
-        // Keep iframe alive for 5 min — Figma is slow to reload
-        const session = ++exitSessionRef.current
-        clearTimeout(teardownTimerRef.current)
-        teardownTimerRef.current = setTimeout(() => {
-          if (exitSessionRef.current !== session) return
-          setShowIframe(false)
-        }, 5 * 60 * 1000)
       }
     }
     document.addEventListener('pointerdown', handlePointerDown)
     return () => document.removeEventListener('pointerdown', handlePointerDown)
   }, [interactive, expanded])
 
-  useEffect(() => () => clearTimeout(teardownTimerRef.current), [])
-
   // Reparent iframe DOM node between inline container and modal.
   // Uses moveBefore() (Chrome 133+) which preserves the iframe's
   // browsing context — no reload. Falls back to appendChild.
@@ -147,10 +132,8 @@ export default forwardRef(function FigmaEmbed({ id: widgetId, props, onUpdate, r
       if (actionId === 'open-external') {
         if (url) window.open(url, '_blank', 'noopener')
       } else if (actionId === 'expand' || actionId === 'expand-single') {
-        setShowIframe(true)
         setExpandMode('single')
       } else if (actionId === 'split-screen') {
-        setShowIframe(true)
         setExpandMode('split')
       }
     },
@@ -166,24 +149,20 @@ export default forwardRef(function FigmaEmbed({ id: widgetId, props, onUpdate, r
         </div>
         {embedUrl ? (
           <>
-            {showIframe ? (
-              <div
-                ref={inlineContainerRef}
-                className={styles.iframeContainer}
-                style={expanded ? { visibility: 'hidden' } : undefined}
-              >
-                <iframe
-                  ref={iframeRef}
-                  src={embedUrl}
-                  className={styles.iframe}
-                  title={`Figma ${typeLabel}: ${title}`}
-                  allowFullScreen
-                  onLoad={(e) => e.target.blur()}
-                />
-              </div>
-            ) : (
-              <div className={styles.iframeContainer} />
-            )}
+            <div
+              ref={inlineContainerRef}
+              className={styles.iframeContainer}
+              style={expanded ? { visibility: 'hidden' } : undefined}
+            >
+              <iframe
+                ref={iframeRef}
+                src={embedUrl}
+                className={styles.iframe}
+                title={`Figma ${typeLabel}: ${title}`}
+                allowFullScreen
+                onLoad={(e) => e.target.blur()}
+              />
+            </div>
             {!interactive && !expanded && (
               <div
                 className={overlayStyles.interactOverlay}

package/src/internals/canvas/widgets/FigmaEmbed.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: 6px 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;
@@ -57,12 +57,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;
@@ -98,7 +98,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;
 }
@@ -147,7 +147,7 @@
   height: 100%;
   position: relative;
   overflow: hidden;
-  background: var(--bgColor-default, #ffffff);
+  background: var(--color-background, #ffffff);
 }
 
 .expandSplitBody {
@@ -170,7 +170,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 {
@@ -184,7 +184,7 @@
   width: 100%;
   height: 100%;
   overflow: auto;
-  background: var(--bgColor-default, #ffffff);
+  background: var(--color-background, #ffffff);
 }
 
 .expandSecondaryIframe {
@@ -211,12 +211,12 @@
 }
 
 .emptyIcon {
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   opacity: 0.5;
 }
 
 .emptyLabel {
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   font-size: 13px;
   font-style: italic;
 }

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

@@ -48,32 +48,41 @@ export default function FrozenTerminalOverlay({ widgetId, onActivate }) {
 
     async function fetchSnapshot() {
       const baseUrl = getBaseUrl()
-      const urls = [
-        `${baseUrl}_storyboard/canvas/terminal-snapshot/${widgetId}`,
-        `${baseUrl}_storyboard/terminal-snapshots/${widgetId}.snapshot.json`,
-      ]
-
-      for (const url of urls) {
-        try {
-          const res = await fetch(url)
-          if (!res.ok) continue
+      // Try the dev-server REST endpoint first, then fall back to the static
+      // consolidated index (production builds / no server).
+      const restUrl = `${baseUrl}_storyboard/canvas/terminal-snapshot/${widgetId}`
+      const indexUrl = `${baseUrl}_storyboard/terminal-snapshots/agents.snapshot.json`
+
+      try {
+        const res = await fetch(restUrl)
+        if (res.ok) {
           const data = await res.json()
           if (cancelled) return
           const text = data.paneContent || data.content || data.output || ''
-          if (!text) continue
-
-          const converter = await getConverter()
-          if (cancelled) return
-          if (converter) {
-            setHtml(converter.toHtml(text))
-          } else {
-            setPlainText(stripAnsi(text))
+          if (text) {
+            const converter = await getConverter()
+            if (cancelled) return
+            if (converter) setHtml(converter.toHtml(text))
+            else setPlainText(stripAnsi(text))
+            return
           }
-          return
-        } catch {
-          continue
         }
-      }
+      } catch { /* fall through to static index */ }
+
+      try {
+        const res = await fetch(indexUrl)
+        if (!res.ok) return
+        const data = await res.json()
+        if (cancelled) return
+        const entry = data?.agents?.[widgetId]
+        if (!entry) return
+        const text = entry.paneContent || entry.content || entry.output || ''
+        if (!text) return
+        const converter = await getConverter()
+        if (cancelled) return
+        if (converter) setHtml(converter.toHtml(text))
+        else setPlainText(stripAnsi(text))
+      } catch { /* empty */ }
     }
 
     fetchSnapshot()

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

@@ -12,7 +12,7 @@
   position: absolute;
   inset: 0;
   overflow: hidden;
-  padding: var(--base-size-16, 16px);
+  padding: 16px;
   font-family: 'Ghostty', 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
   font-size: 12px;
   line-height: 1.4;
@@ -46,10 +46,10 @@
 
 /* Matches interactHint from embedOverlay — solid pill button, always visible */
 .actionButton {
-  color: var(--fgColor-onInverse, #fff);
-  background-color: var(--bgColor-inverse, #21262d);
-  padding: var(--base-size-12, 12px) var(--base-size-16, 16px);
-  border-radius: var(--base-size-6, 6px);
+  color: var(--color-foreground-on-inverse, #fff);
+  background-color: var(--color-background-inverse, #21262d);
+  padding: 12px 16px;
+  border-radius: 6px;
   font-size: 14px;
   font-weight: 600;
   pointer-events: none;

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

@@ -137,7 +137,10 @@ const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resiz
             const blobUrl = URL.createObjectURL(blob)
             const a = document.createElement('a')
             a.href = blobUrl
-            a.download = src.replace(/^~/, '')
+            // Strip optional drafts/ directory prefix and leading ~ from the
+            // downloaded filename — the user wants the bare basename.
+            const baseName = src.includes('/') ? src.slice(src.lastIndexOf('/') + 1) : src
+            a.download = baseName.replace(/^~/, '')
             document.body.appendChild(a)
             a.click()
             document.body.removeChild(a)
@@ -156,7 +159,9 @@ const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resiz
           .catch((err) => console.error('[canvas] Failed to copy image:', err))
       } else if (actionId === 'copy-file-path') {
         if (!src) return
-        navigator.clipboard.writeText(`src/canvas/images/${src}`).catch(() => {})
+        // `src` may include an optional `drafts/` prefix; in both cases the
+        // file lives under assets/canvas/images/.
+        navigator.clipboard.writeText(`assets/canvas/images/${src}`).catch(() => {})
       }
     }
   }), [src, onUpdate])

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

@@ -55,8 +55,8 @@
   font-weight: 600;
   line-height: 1.4;
   letter-spacing: 0.02em;
-  color: var(--fgColor-onEmphasis, #fff);
-  background: var(--bgColor-neutral-emphasis, rgba(0, 0, 0, 0.55));
+  color: var(--color-foreground-on-emphasis, #fff);
+  background: var(--color-background-neutral-emphasis, rgba(0, 0, 0, 0.55));
   pointer-events: none;
 }
 
@@ -69,7 +69,7 @@
   align-items: center;
   justify-content: center;
   overflow: auto;
-  background: var(--bgColor-inset, #f6f8fa);
+  background: var(--color-background-inset, #f6f8fa);
 }
 
 .expandedImage {