@dfosco/storyboard-react 3.11.0-beta.2 → 3.11.0-beta.4

package/package.json

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

package/src/canvas/CanvasPage.jsx

@@ -130,6 +130,26 @@ function roundPosition(value) {
   return Math.round(value)
 }
 
+/** Snap a value to the nearest grid line. */
+function snapValue(value, gridSize) {
+  return Math.round(value / gridSize) * gridSize
+}
+
+/** Snap a position to the grid if snapping is enabled. */
+function snapPosition(pos, gridSize, enabled) {
+  if (!enabled || !gridSize) return pos
+  return {
+    x: Math.max(0, snapValue(pos.x, gridSize)),
+    y: Math.max(0, snapValue(pos.y, gridSize)),
+  }
+}
+
+/** Snap a dimension to the grid if snapping is enabled. */
+function snapDimension(value, gridSize, enabled, min = 0) {
+  if (!enabled || !gridSize) return value
+  return Math.max(min, snapValue(value, gridSize))
+}
+
 /** Padding (canvas-space pixels) around bounding box for zoom-to-fit. */
 const FIT_PADDING = 48
 
@@ -264,6 +284,8 @@ export default function CanvasPage({ name }) {
   const titleInputRef = useRef(null)
   const [localSources, setLocalSources] = useState(canvas?.sources ?? [])
   const [canvasTheme, setCanvasTheme] = useState(() => resolveCanvasThemeFromStorage())
+  const [snapEnabled, setSnapEnabled] = useState(canvas?.snapToGrid ?? false)
+  const snapGridSize = canvas?.gridSize || 40
 
   // Undo/redo history — tracks both widgets and sources as a combined snapshot
   const undoRedo = useUndoRedo()
@@ -321,15 +343,21 @@ export default function CanvasPage({ name }) {
 
   const handleWidgetUpdate = useCallback((widgetId, updates) => {
     undoRedo.snapshot(stateRef.current, 'edit', widgetId)
+    // Snap width/height to grid when snap is enabled
+    const snapped = { ...updates }
+    if (snapEnabled && snapGridSize) {
+      if (snapped.width != null) snapped.width = snapDimension(snapped.width, snapGridSize, true, 60)
+      if (snapped.height != null) snapped.height = snapDimension(snapped.height, snapGridSize, true, 60)
+    }
     setLocalWidgets((prev) => {
       if (!prev) return prev
       const next = prev.map((w) =>
-        w.id === widgetId ? { ...w, props: { ...w.props, ...updates } } : w
+        w.id === widgetId ? { ...w, props: { ...w.props, ...snapped } } : w
       )
       debouncedSave(name, next)
       return next
     })
-  }, [name, debouncedSave, undoRedo])
+  }, [name, debouncedSave, undoRedo, snapEnabled, snapGridSize])
 
   const handleWidgetRemove = useCallback((widgetId) => {
     undoRedo.snapshot(stateRef.current, 'remove', widgetId)
@@ -390,7 +418,8 @@ export default function CanvasPage({ name }) {
 
   const handleItemDragEnd = useCallback((dragId, position) => {
     if (!dragId || !position) return
-    const rounded = { x: Math.max(0, roundPosition(position.x)), y: Math.max(0, roundPosition(position.y)) }
+    const raw = { x: Math.max(0, roundPosition(position.x)), y: Math.max(0, roundPosition(position.y)) }
+    const rounded = snapPosition(raw, snapGridSize, snapEnabled)
 
     if (dragId.startsWith('jsx-')) {
       undoRedo.snapshot(stateRef.current, 'move', dragId)
@@ -423,7 +452,7 @@ export default function CanvasPage({ name }) {
       )
       return next
     })
-  }, [name, undoRedo])
+  }, [name, undoRedo, snapEnabled, snapGridSize])
 
   useEffect(() => {
     zoomRef.current = zoom
@@ -446,29 +475,49 @@ export default function CanvasPage({ name }) {
     const targetId = params.get('widget')
     if (!targetId || loading) return
 
-    const widgets = localWidgets ?? []
-    const widget = widgets.find((w) => w.id === targetId)
-    if (!widget) return
-
     const el = scrollRef.current
     if (!el) return
 
-    const scale = zoomRef.current / 100
-    const fallback = WIDGET_FALLBACK_SIZES[widget.type] || { width: 200, height: 150 }
-    const wW = (widget.props?.width ?? fallback.width) * scale
-    const wH = (widget.props?.height ?? fallback.height) * scale
-    const wX = (widget.position?.x ?? 0) * scale
-    const wY = (widget.position?.y ?? 0) * scale
+    let x, y, w, h
+
+    // Check JSON widgets first
+    const widgets = localWidgets ?? []
+    const widget = widgets.find((wgt) => wgt.id === targetId)
+    if (widget) {
+      const fallback = WIDGET_FALLBACK_SIZES[widget.type] || { width: 200, height: 150 }
+      x = widget.position?.x ?? 0
+      y = widget.position?.y ?? 0
+      w = widget.props?.width ?? fallback.width
+      h = widget.props?.height ?? fallback.height
+    }
 
-    // Center the widget in the viewport
-    el.scrollLeft = wX + wW / 2 - el.clientWidth / 2
-    el.scrollTop = wY + wH / 2 - el.clientHeight / 2
+    // Check JSX sources (jsx-ExportName)
+    if (!widget && targetId.startsWith('jsx-')) {
+      const exportName = targetId.slice(4)
+      const sourceMap = Object.fromEntries(
+        (localSources || []).filter((s) => s?.export).map((s) => [s.export, s])
+      )
+      const sourceData = sourceMap[exportName]
+      if (sourceData || (jsxExports && exportName in jsxExports)) {
+        const fallback = WIDGET_FALLBACK_SIZES['component']
+        x = sourceData?.position?.x ?? 0
+        y = sourceData?.position?.y ?? 0
+        w = sourceData?.width ?? fallback.width
+        h = sourceData?.height ?? fallback.height
+      }
+    }
+
+    if (x == null) return
+
+    const scale = zoomRef.current / 100
+    el.scrollLeft = (x + w / 2) * scale - el.clientWidth / 2
+    el.scrollTop = (y + h / 2) * scale - el.clientHeight / 2
 
     // Clean the URL param without triggering navigation
     const url = new URL(window.location.href)
     url.searchParams.delete('widget')
     window.history.replaceState({}, '', url.toString())
-  }, [loading, localWidgets])
+  }, [loading, localWidgets, localSources, jsxExports])
 
   // Persist viewport state (zoom + scroll) to localStorage on changes
   useEffect(() => {
@@ -627,6 +676,28 @@ export default function CanvasPage({ name }) {
     return () => document.removeEventListener('storyboard:canvas:set-zoom', handleZoom)
   }, [])
 
+  // Listen for snap-to-grid toggle from CoreUIBar
+  useEffect(() => {
+    function handleSnapToggle() {
+      setSnapEnabled((prev) => {
+        const next = !prev
+        updateCanvas(name, { snapToGrid: next }).catch((err) =>
+          console.error('[canvas] Failed to persist snap setting:', err)
+        )
+        return next
+      })
+    }
+    document.addEventListener('storyboard:canvas:toggle-snap', handleSnapToggle)
+    return () => document.removeEventListener('storyboard:canvas:toggle-snap', handleSnapToggle)
+  }, [name])
+
+  // Broadcast snap state to Svelte toolbar
+  useEffect(() => {
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:snap-state', {
+      detail: { snapEnabled }
+    }))
+  }, [snapEnabled])
+
   // Listen for zoom-to-fit from CoreUIBar
   useEffect(() => {
     function handleZoomToFit() {
@@ -1065,6 +1136,7 @@ export default function CanvasPage({ name }) {
           }}
         >
           <WidgetChrome
+            widgetId={`jsx-${exportName}`}
             features={componentFeatures}
             selected={selectedWidgetId === `jsx-${exportName}`}
             onSelect={() => setSelectedWidgetId(`jsx-${exportName}`)}

package/src/canvas/widgets/ImageWidget.jsx

@@ -51,6 +51,28 @@ const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate }, ref) {
         }).catch((err) => {
           console.error('[canvas] Failed to toggle image privacy:', err)
         })
+      } else if (actionId === 'download-image') {
+        if (!src) return
+        const url = getImageUrl(src)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = src.replace(/^_/, '')
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+      } else if (actionId === 'copy-as-png') {
+        if (!src) return
+        const url = getImageUrl(src)
+        fetch(url)
+          .then((r) => r.blob())
+          .then((blob) => {
+            const pngBlob = blob.type === 'image/png' ? blob : blob
+            navigator.clipboard.write([new ClipboardItem({ 'image/png': pngBlob })]).catch(() => {})
+          })
+          .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, onUpdate])

package/src/canvas/widgets/WidgetChrome.jsx

@@ -85,6 +85,23 @@ function LinkIcon() {
   )
 }
 
+function ChevronDownIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z" />
+    </svg>
+  )
+}
+
+function DownloadIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z" />
+      <path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06Z" />
+    </svg>
+  )
+}
+
 /** Icon registry — maps icon name strings from config to React components. */
 const ICON_REGISTRY = {
   'trash': DeleteIcon,
@@ -97,6 +114,8 @@ const ICON_REGISTRY = {
   'copy': CopyIcon,
   'link': LinkIcon,
   'more': MoreIcon,
+  'chevron-down': ChevronDownIcon,
+  'download': DownloadIcon,
 }
 
 /** Danger-styled actions in the overflow menu. */
@@ -167,6 +186,64 @@ function WidgetOverflowMenu({ widgetId, menuFeatures, onAction }) {
   )
 }
 
+/**
+ * Dropdown feature — a chevron button that opens a menu of actions.
+ * Items and their icons/labels come from config.
+ */
+function DropdownFeature({ feature, onAction }) {
+  const [open, setOpen] = useState(false)
+  const menuRef = useRef(null)
+
+  useEffect(() => {
+    if (!open) return
+    function handlePointerDown(e) {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [open])
+
+  const TriggerIcon = ICON_REGISTRY[feature.icon] || ChevronDownIcon
+
+  return (
+    <div ref={menuRef} className={styles.overflowWrapper}>
+      <Tooltip text={feature.label || 'Actions'} direction="n">
+        <button
+          className={styles.featureBtn}
+          onClick={(e) => { e.stopPropagation(); setOpen((v) => !v) }}
+          aria-label={feature.label || 'Actions'}
+          aria-expanded={open}
+        >
+          <TriggerIcon />
+        </button>
+      </Tooltip>
+      {open && (
+        <div className={styles.overflowMenu}>
+          {(feature.items || []).map((item) => {
+            const Icon = ICON_REGISTRY[item.icon]
+            return (
+              <button
+                key={item.action}
+                className={styles.overflowItem}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onAction?.(item.action)
+                  setOpen(false)
+                }}
+              >
+                {Icon && <Icon />}
+                <span>{item.label || item.action}</span>
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
 /**
  * ColorPicker feature button — shows a dot that reveals color options on hover.
  */
@@ -347,6 +424,22 @@ export default function WidgetChrome({
                 )
               }
 
+              if (feature.type === 'dropdown') {
+                return (
+                  <DropdownFeature
+                    key={feature.id}
+                    feature={feature}
+                    onAction={(actionId) => {
+                      if (widgetRef?.current?.handleAction) {
+                        widgetRef.current.handleAction(actionId)
+                      } else {
+                        onAction?.(actionId)
+                      }
+                    }}
+                  />
+                )
+              }
+
               return null
             })}
             <WidgetOverflowMenu

package/src/canvas/widgets/widgetConfig.js

@@ -26,12 +26,20 @@ function resolveVar(value) {
 }
 
 /**
- * Resolve all string values in a feature object.
+ * Resolve all string values in a feature object, including nested items.
  */
 function resolveFeature(feature) {
   const resolved = {}
   for (const [key, val] of Object.entries(feature)) {
-    resolved[key] = resolveVar(val)
+    if (key === 'items' && Array.isArray(val)) {
+      resolved[key] = val.map((item) => {
+        const r = {}
+        for (const [k, v] of Object.entries(item)) r[k] = resolveVar(v)
+        return r
+      })
+    } else {
+      resolved[key] = resolveVar(val)
+    }
   }
   return resolved
 }