@dfosco/storyboard-react 4.0.0-beta.23 → 4.0.0-beta.25

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

@@ -123,7 +123,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('shift+click on select handle adds widget to selection', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Select first widget
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -138,7 +138,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('shift+click on already selected widget removes it from selection', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Select both
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -155,7 +155,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('normal click replaces multi-selection with single', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Multi-select
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -172,7 +172,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('sets multiSelected on all selected widgets when multiple are selected', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     fireEvent.click(screen.getByTestId('select-w1'))
     fireEvent.click(screen.getByTestId('shift-select-w2'))
@@ -185,7 +185,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('Escape clears all selection', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     fireEvent.click(screen.getByTestId('select-w1'))
     fireEvent.click(screen.getByTestId('shift-select-w2'))
@@ -199,7 +199,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('Delete removes all selected widgets and calls updateCanvas', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Multi-select w1 and w2
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -224,7 +224,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('single-select Delete uses removeWidget API', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     fireEvent.click(screen.getByTestId('select-w1'))
     fireEvent.keyDown(document, { key: 'Backspace' })
@@ -234,7 +234,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('multi-select move applies delta to all selected widgets', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Multi-select w1 (100,100) and w2 (300,100)
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -265,7 +265,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('multi-select drag captures peer articles on drag start', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Multi-select w1 and w2
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -288,7 +288,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('multi-select drag preserves selection after drag end', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Multi-select w1 and w2
     fireEvent.click(screen.getByTestId('select-w1'))
@@ -313,7 +313,7 @@ describe('CanvasPage multi-select', () => {
   })
 
   it('any selected widget can serve as drag handler for the group', async () => {
-    render(<CanvasPage name="test-canvas" />)
+    render(<CanvasPage canvasId="test-canvas" />)
 
     // Multi-select w1 (100,100), w2 (300,100), w3 (500,200)
     fireEvent.click(screen.getByTestId('select-w1'))

package/src/canvas/CanvasToolbar.jsx

@@ -9,7 +9,7 @@ const WIDGET_TYPES = getMenuWidgetTypes()
 /**
  * Floating toolbar for adding widgets to a canvas.
  */
-export default function CanvasToolbar({ canvasName, onWidgetAdded }) {
+export default function CanvasToolbar({ canvasId, onWidgetAdded }) {
   const [open, setOpen] = useState(false)
   const [adding, setAdding] = useState(false)
 
@@ -18,7 +18,7 @@ export default function CanvasToolbar({ canvasName, onWidgetAdded }) {
     setAdding(true)
     try {
       const defaultProps = schemas[type] ? getDefaults(schemas[type]) : {}
-      const result = await addWidgetApi(canvasName, {
+      const result = await addWidgetApi(canvasId, {
         type,
         props: defaultProps,
         position: { x: 0, y: 0 },

package/src/canvas/canvasApi.js

@@ -28,26 +28,28 @@ export function createCanvas(data) {
   return request('/create', 'POST', data)
 }
 
-export function updateCanvas(name, { widgets, sources, settings }) {
-  return request('/update', 'PUT', { name, widgets, sources, settings })
+export function updateCanvas(canvasId, { widgets, sources, settings }) {
+  return request('/update', 'PUT', { name: canvasId, widgets, sources, settings })
 }
 
-export function addWidget(name, { type, props, position }) {
-  return request('/widget', 'POST', { name, type, props, position })
+export function addWidget(canvasId, { type, props, position }) {
+  return request('/widget', 'POST', { name: canvasId, type, props, position })
 }
 
-export function removeWidget(name, widgetId) {
-  return request('/widget', 'DELETE', { name, widgetId })
+export function removeWidget(canvasId, widgetId) {
+  return request('/widget', 'DELETE', { name: canvasId, widgetId })
 }
 
-export function uploadImage(dataUrl, canvasName) {
-  return request('/image', 'POST', { dataUrl, canvasName })
+export function uploadImage(dataUrl, canvasId, filename) {
+  const body = { dataUrl, canvasName: canvasId }
+  if (filename) body.filename = filename
+  return request('/image', 'POST', body)
 }
 
 export function toggleImagePrivacy(filename) {
   return request('/image/toggle-private', 'POST', { filename })
 }
 
-export function getCanvas(name) {
-  return request(`/read?name=${encodeURIComponent(name)}`, 'GET')
+export function getCanvas(canvasId) {
+  return request(`/read?name=${encodeURIComponent(canvasId)}`, 'GET')
 }

package/src/canvas/useCanvas.js

@@ -31,11 +31,11 @@ export function resolveCanvasModuleImport(modulePath, baseUrl = import.meta.env?
  * Uses build-time data for static config (routes, JSX path), but fetches
  * fresh widget data from the server to pick up persisted edits.
  *
- * @param {string} name - Canvas name as indexed by the data plugin
+ * @param {string} canvasId - Canonical canvas ID as indexed by the data plugin
  * @returns {{ canvas: object|null, jsxExports: object|null, jsxError: boolean, loading: boolean }}
  */
-export function useCanvas(name) {
-  const buildTimeCanvas = useMemo(() => getCanvasData(name), [name])
+export function useCanvas(canvasId) {
+  const buildTimeCanvas = useMemo(() => getCanvasData(canvasId), [canvasId])
   const [canvas, setCanvas] = useState(buildTimeCanvas)
   const [jsxExports, setJsxExports] = useState(null)
   const [jsxError, setJsxError] = useState(false)
@@ -50,7 +50,7 @@ export function useCanvas(name) {
     }
 
     setLoading(true)
-    fetchCanvasFromServer(name).then((fresh) => {
+    fetchCanvasFromServer(canvasId).then((fresh) => {
       if (fresh) {
         // Merge: use server data for widgets/sources, keep build-time for _route/_jsxModule
         setCanvas({ ...buildTimeCanvas, ...fresh })
@@ -59,7 +59,7 @@ export function useCanvas(name) {
       }
       setLoading(false)
     })
-  }, [name, buildTimeCanvas])
+  }, [canvasId, buildTimeCanvas])
 
   const jsxModule = canvas?._jsxModule
   const jsxImport = canvas?._jsxImport
@@ -99,8 +99,9 @@ export function useCanvas(name) {
     if (!import.meta.hot || !buildTimeCanvas) return
 
     const handleCanvasFileChanged = ({ data }) => {
-      if (!data || data.name !== name) return
-      fetchCanvasFromServer(name).then((fresh) => {
+      const eventId = data?.canvasId || data?.name
+      if (!data || eventId !== canvasId) return
+      fetchCanvasFromServer(canvasId).then((fresh) => {
         if (fresh) {
           setCanvas((prev) => ({ ...(prev || buildTimeCanvas), ...fresh }))
         }
@@ -111,7 +112,7 @@ export function useCanvas(name) {
     return () => {
       import.meta.hot.off('storyboard:canvas-file-changed', handleCanvasFileChanged)
     }
-  }, [name, buildTimeCanvas])
+  }, [canvasId, buildTimeCanvas])
 
   return { canvas, jsxExports, jsxError, loading }
 }

package/src/canvas/widgets/ComponentWidget.jsx

@@ -2,6 +2,7 @@ import { useRef, useCallback, useState, useEffect, useMemo } from 'react'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
 import ComponentErrorBoundary from '../ComponentErrorBoundary.jsx'
+import { useIframeDevLogs } from './iframeDevLogs.js'
 import styles from './ComponentWidget.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
@@ -31,6 +32,7 @@ export default function ComponentWidget({
 }) {
   const containerRef = useRef(null)
   const [interactive, setInteractive] = useState(false)
+  const [showIframe, setShowIframe] = useState(false)
 
   const handleResize = useCallback((w, h) => {
     onUpdate?.({ width: w, height: h })
@@ -44,6 +46,7 @@ export default function ComponentWidget({
     function handlePointerDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setInteractive(false)
+        setShowIframe(false)
       }
     }
     document.addEventListener('pointerdown', handlePointerDown)
@@ -64,6 +67,12 @@ export default function ComponentWidget({
 
   const useIframe = isLocalDev && iframeSrc
 
+  useIframeDevLogs({
+    widget: 'ComponentWidget',
+    loaded: Boolean(useIframe && showIframe),
+    src: iframeSrc,
+  })
+
   if (!useIframe && !Component) return null
 
   const sizeStyle = {}
@@ -75,12 +84,16 @@ export default function ComponentWidget({
       <div ref={containerRef} className={styles.container} style={sizeStyle}>
         <div className={styles.content}>
           {useIframe ? (
-            <iframe
-              src={iframeSrc}
-              className={styles.iframe}
-              title={exportName || 'Component widget'}
-              sandbox="allow-same-origin allow-scripts"
-            />
+            showIframe ? (
+              <iframe
+                src={iframeSrc}
+                className={styles.iframe}
+                title={exportName || 'Component widget'}
+                sandbox="allow-same-origin allow-scripts"
+              />
+            ) : (
+              <div className={styles.placeholder} />
+            )
           ) : Component ? (
             <ComponentErrorBoundary name={exportName}>
               <Component />
@@ -93,6 +106,7 @@ export default function ComponentWidget({
             onClick={(e) => {
               // Don't enter interactive mode for modifier clicks (shift/meta/ctrl for multi-select)
               if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+              if (useIframe) setShowIframe(true)
               enterInteractive()
             }}
             role="button"
@@ -101,6 +115,7 @@ export default function ComponentWidget({
               if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault()
                 e.stopPropagation()
+                if (useIframe) setShowIframe(true)
                 enterInteractive()
               }
             }}

package/src/canvas/widgets/ComponentWidget.module.css

@@ -19,3 +19,8 @@
   height: 100%;
   border: none;
 }
+
+.placeholder {
+  width: 100%;
+  height: 100%;
+}

package/src/canvas/widgets/FigmaEmbed.jsx

@@ -4,6 +4,7 @@ import WidgetWrapper from './WidgetWrapper.jsx'
 import { readProp } from './widgetProps.js'
 import { schemas } from './widgetConfig.js'
 import { toFigmaEmbedUrl, getFigmaTitle, getFigmaType, isFigmaUrl } from './figmaUrl.js'
+import { useIframeDevLogs } from './iframeDevLogs.js'
 import styles from './FigmaEmbed.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
@@ -30,9 +31,11 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, re
   const height = readProp(props, 'height', figmaEmbedSchema)
 
   const [interactive, setInteractive] = useState(false)
+  const [showIframe, setShowIframe] = useState(false)
   const [expanded, setExpanded] = useState(false)
 
   const iframeRef = useRef(null)
+  const embedRef = useRef(null)
   const inlineContainerRef = useRef(null)
   const modalContainerRef = useRef(null)
 
@@ -43,7 +46,28 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, re
   const figmaType = useMemo(() => getFigmaType(url), [url])
   const typeLabel = figmaType ? TYPE_LABELS[figmaType] : 'Figma'
 
-  const enterInteractive = useCallback(() => setInteractive(true), [])
+  useIframeDevLogs({
+    widget: 'FigmaEmbed',
+    loaded: showIframe && Boolean(embedUrl),
+    src: embedUrl,
+  })
+
+  const enterInteractive = useCallback(() => {
+    setShowIframe(true)
+    setInteractive(true)
+  }, [])
+
+  useEffect(() => {
+    if (!interactive || expanded) return
+    function handlePointerDown(e) {
+      if (embedRef.current && !embedRef.current.contains(e.target)) {
+        setInteractive(false)
+        setShowIframe(false)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive, expanded])
 
   // Close expanded modal on Escape
   useEffect(() => {
@@ -97,6 +121,7 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, re
       if (actionId === 'open-external') {
         if (url) window.open(url, '_blank', 'noopener')
       } else if (actionId === 'expand') {
+        setShowIframe(true)
         setExpanded(true)
       }
     },
@@ -105,26 +130,30 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, re
   return (
     <>
     <WidgetWrapper>
-      <div className={styles.embed} style={{ width, height }}>
+      <div ref={embedRef} className={styles.embed} style={{ width, height }}>
         <div className={styles.header}>
           <FigmaLogo />
           <span className={styles.headerTitle}>{title}</span>
         </div>
         {embedUrl ? (
           <>
-            <div
-              ref={inlineContainerRef}
-              className={styles.iframeContainer}
-              style={expanded ? { visibility: 'hidden' } : undefined}
-            >
-              <iframe
-                ref={iframeRef}
-                src={embedUrl}
-                className={styles.iframe}
-                title={`Figma ${typeLabel}: ${title}`}
-                allowFullScreen
-              />
-            </div>
+            {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
+                />
+              </div>
+            ) : (
+              <div className={styles.iframeContainer} />
+            )}
             {!interactive && !expanded && (
               <div
                 className={overlayStyles.interactOverlay}