@dfosco/storyboard-react 4.0.0-beta.12 → 4.0.0-beta.13

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.12",
+  "version": "4.0.0-beta.13",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "4.0.0-beta.12",
-    "@dfosco/tiny-canvas": "4.0.0-beta.12",
+    "@dfosco/storyboard-core": "4.0.0-beta.13",
+    "@dfosco/tiny-canvas": "4.0.0-beta.13",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",

package/src/canvas/CanvasPage.jsx

@@ -12,7 +12,7 @@ import { isFigmaUrl, sanitizeFigmaUrl } from './widgets/figmaUrl.js'
 import WidgetChrome from './widgets/WidgetChrome.jsx'
 import ComponentWidget from './widgets/ComponentWidget.jsx'
 import useUndoRedo from './useUndoRedo.js'
-import { addWidget as addWidgetApi, updateCanvas, removeWidget as removeWidgetApi, uploadImage } from './canvasApi.js'
+import { addWidget as addWidgetApi, updateCanvas, removeWidget as removeWidgetApi, uploadImage, getCanvas as getCanvasApi } from './canvasApi.js'
 import styles from './CanvasPage.module.css'
 
 const ZOOM_MIN = 25
@@ -51,6 +51,7 @@ function resolveCanvasThemeFromStorage() {
  * Get the copyable URL for a widget based on its type.
  * Returns the most relevant URL/path for the widget content.
  */
+// eslint-disable-next-line no-unused-vars
 function getWidgetCopyableUrl(widget) {
   const { type, props = {} } = widget
   const base = (typeof import.meta !== 'undefined' && import.meta.env?.BASE_URL) || '/'
@@ -403,13 +404,13 @@ export default function CanvasPage({ name }) {
   // Flag to suppress the click-based selection reset that fires after a drag
   const justDraggedRef = useRef(false)
 
-  const handleItemDragStart = useCallback((dragId, position) => {
+  const handleItemDragStart = useCallback((dragId) => {
     const ids = selectedIdsRef.current
     peerArticlesRef.current.clear()
     if (ids.size <= 1 || !ids.has(dragId)) return
 
     // Suppress selection changes for the duration of the drag
-    justDraggedRef.current = true
+    justDraggedRef.current = true // eslint-disable-line react-hooks/immutability
 
     // Collect peer article elements for transition on drag end
     for (const id of ids) {
@@ -449,6 +450,8 @@ export default function CanvasPage({ name }) {
     setLocalWidgets(canvas?.widgets ?? null)
     setLocalSources(canvas?.sources ?? [])
     setCanvasTitle(canvas?.title || name)
+    setSnapEnabled(canvas?.snapToGrid ?? false)
+    setSnapGridSize(canvas?.gridSize || 40)
     undoRedo.reset()
   }
 
@@ -575,7 +578,7 @@ export default function CanvasPage({ name }) {
     if (ids.size > 1 && ids.has(dragId)) {
       transitionPeers()
       // Suppress the click-based selection reset that fires after pointerup
-      justDraggedRef.current = true
+      justDraggedRef.current = true // eslint-disable-line react-hooks/immutability
       requestAnimationFrame(() => { justDraggedRef.current = false })
       undoRedo.snapshot(stateRef.current, 'multi-move')
 
@@ -911,7 +914,7 @@ export default function CanvasPage({ name }) {
     function handleSnapToggle() {
       setSnapEnabled((prev) => {
         const next = !prev
-        updateCanvas(name, { snapToGrid: next }).catch((err) =>
+        updateCanvas(name, { settings: { snapToGrid: next } }).catch((err) =>
           console.error('[canvas] Failed to persist snap setting:', err)
         )
         return next
@@ -929,6 +932,17 @@ export default function CanvasPage({ name }) {
     snapEnabledRef.current = snapEnabled
   }, [snapEnabled])
 
+  // Respond to snap-state requests from Svelte toolbar (handles mount-order race)
+  useEffect(() => {
+    function handleRequest() {
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:snap-state', {
+        detail: { snapEnabled: snapEnabledRef.current }
+      }))
+    }
+    document.addEventListener('storyboard:canvas:snap-state-request', handleRequest)
+    return () => document.removeEventListener('storyboard:canvas:snap-state-request', handleRequest)
+  }, [])
+
   // Listen for gridSize from Svelte toolbar config
   useEffect(() => {
     function handleGridSize(e) {
@@ -1015,33 +1029,13 @@ export default function CanvasPage({ name }) {
         e.preventDefault()
         setSelectedWidgetIds(new Set())
       }
-      // Copy shortcuts (single widget selected):
-      // - cmd+c → copy URL/content
-      // - Shift+C (no cmd) → copy widget ID (or file path for images)
+      // Copy shortcut (single widget selected):
+      // cmd+c → copy canvasName/widgetId (for cross-canvas paste-duplicate)
       const mod = e.metaKey || e.ctrlKey
       if (mod && e.key === 'c' && !e.shiftKey && selectedWidgetIds.size === 1) {
         const widgetId = [...selectedWidgetIds][0]
-        const widget = localWidgets?.find(w => w.id === widgetId)
-        if (widget) {
-          e.preventDefault()
-          const url = getWidgetCopyableUrl(widget)
-          if (url) {
-            navigator.clipboard.writeText(url).catch(() => {})
-          }
-        }
-      }
-      // Shift+C (uppercase C, no cmd) → copy ID or file path
-      if (e.key === 'C' && e.shiftKey && !mod && selectedWidgetIds.size === 1) {
-        const widgetId = [...selectedWidgetIds][0]
-        const widget = localWidgets?.find(w => w.id === widgetId)
-        if (widget) {
-          e.preventDefault()
-          if (widget.type === 'image' && widget.props?.src) {
-            navigator.clipboard.writeText(`src/canvas/images/${widget.props.src}`).catch(() => {})
-          } else {
-            navigator.clipboard.writeText(widgetId).catch(() => {})
-          }
-        }
+        e.preventDefault()
+        navigator.clipboard.writeText(`${name}/${widgetId}`).catch(() => {})
       }
       if (e.key === 'Delete' || e.key === 'Backspace') {
         e.preventDefault()
@@ -1217,6 +1211,40 @@ export default function CanvasPage({ name }) {
 
       e.preventDefault()
 
+      // Detect canvasName/widgetId format for widget duplication (cross-canvas copy-paste)
+      const widgetRefMatch = text.match(/^([^/]+)\/([^/]+)$/)
+      if (widgetRefMatch) {
+        const [, sourceCanvas, sourceWidgetId] = widgetRefMatch
+        // Component widgets are code, not duplicable data — silently consume the ref
+        if (sourceWidgetId.startsWith('jsx-')) return
+        try {
+          let sourceWidget = null
+          if (sourceCanvas === name) {
+            sourceWidget = (localWidgets ?? []).find(w => w.id === sourceWidgetId)
+          } else {
+            const canvasData = await getCanvasApi(sourceCanvas)
+            sourceWidget = (canvasData?.widgets ?? []).find(w => w.id === sourceWidgetId)
+          }
+          if (sourceWidget) {
+            const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
+            const pos = centerPositionForWidget(center, sourceWidget.type, sourceWidget.props)
+            undoRedo.snapshot(stateRef.current, 'add')
+            const result = await addWidgetApi(name, {
+              type: sourceWidget.type,
+              props: { ...sourceWidget.props },
+              position: pos,
+            })
+            if (result.success && result.widget) {
+              setLocalWidgets((prev) => [...(prev || []), result.widget])
+            }
+          }
+        } catch (err) {
+          console.error('[canvas] Failed to paste widget reference:', err)
+        }
+        // Always consume the ref — never fall through to markdown creation
+        return
+      }
+
       let type, props
       const url = looksLikeWebUrl(text)
       if (url) {
@@ -1256,7 +1284,7 @@ export default function CanvasPage({ name }) {
 
     document.addEventListener('paste', handlePaste)
     return () => document.removeEventListener('paste', handlePaste)
-  }, [name, undoRedo])
+  }, [name, undoRedo, localWidgets])
 
   // --- Drag and drop handlers for images from Finder/file manager ---
   // Separate effect to ensure listeners attach after scroll container mounts (loading=false)

package/src/canvas/CanvasPage.module.css

@@ -103,6 +103,12 @@
   overflow: visible;
 }
 
+/* Elevate stacking context for hovered/selected widgets so their chrome
+   (toolbar, menus, selection outline) renders above sibling widgets. */
+:global(.tc-drag:has([data-tc-elevated])) {
+  z-index: 1;
+}
+
 .localEditingLabel {
   display: inline-flex;
   align-items: center;

package/src/canvas/canvasApi.js

@@ -47,3 +47,7 @@ export function uploadImage(dataUrl, canvasName) {
 export function toggleImagePrivacy(filename) {
   return request('/image/toggle-private', 'POST', { filename })
 }
+
+export function getCanvas(name) {
+  return request(`/read?name=${encodeURIComponent(name)}`, 'GET')
+}

package/src/canvas/widgets/WidgetChrome.jsx

@@ -421,6 +421,7 @@ export default function WidgetChrome({
   return (
     <div
       className={styles.chromeContainer}
+      data-tc-elevated={(hovered || selected) || undefined}
       onMouseEnter={(readOnly && !hasFeatures) ? undefined : handleMouseEnter}
       onMouseLeave={(readOnly && !hasFeatures) ? undefined : handleMouseLeave}
     >

package/src/hooks/useSceneData.js

@@ -17,10 +17,12 @@ import { subscribeToStorage, getStorageSnapshot } from '@dfosco/storyboard-core'
  *
  * @param {string} [path] - Dot-notation path (e.g. 'user.profile.name').
  *                          Omit to get the entire flow object.
+ * @param {{ optional?: boolean }} [opts] - Pass { optional: true } to suppress
+ *                          the "path not found" warning for optional data.
  * @returns {*} The resolved value. Returns {} if path is missing after loading.
  * @throws If used outside a StoryboardProvider.
  */
-export function useFlowData(path) {
+export function useFlowData(path, opts) {
   const context = useContext(StoryboardContext)
 
   if (context === null) {
@@ -73,7 +75,7 @@ export function useFlowData(path) {
     }
 
     if (sceneValue === undefined) {
-      if (data != null && Object.keys(data).length > 0) {
+      if (!opts?.optional && data != null && Object.keys(data).length > 0) {
         console.warn(`[useFlowData] Path "${path}" not found in flow data.`)
       }
       return {}