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

package/src/canvas/computeCanvasBounds.test.js

@@ -0,0 +1,121 @@
+import { describe, it, expect } from 'vitest'
+
+// computeCanvasBounds is not exported, so we replicate it here for unit testing.
+// This keeps the test decoupled from CanvasPage internals while validating the algorithm.
+
+const WIDGET_FALLBACK_SIZES = {
+  'sticky-note':  { width: 180, height: 60 },
+  'markdown':     { width: 360, height: 200 },
+  'prototype':    { width: 800, height: 600 },
+  'link-preview': { width: 320, height: 120 },
+  'figma-embed':  { width: 800, height: 450 },
+  'component':    { width: 200, height: 150 },
+  'image':        { width: 400, height: 300 },
+}
+
+function computeCanvasBounds(widgets, sources, jsxExports) {
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+  let hasItems = false
+
+  for (const w of (widgets ?? [])) {
+    const x = w?.position?.x ?? 0
+    const y = w?.position?.y ?? 0
+    const fallback = WIDGET_FALLBACK_SIZES[w.type] || { width: 200, height: 150 }
+    const width = w.props?.width ?? fallback.width
+    const height = w.props?.height ?? fallback.height
+    minX = Math.min(minX, x)
+    minY = Math.min(minY, y)
+    maxX = Math.max(maxX, x + width)
+    maxY = Math.max(maxY, y + height)
+    hasItems = true
+  }
+
+  const sourceMap = Object.fromEntries(
+    (sources || []).filter((s) => s?.export).map((s) => [s.export, s])
+  )
+  if (jsxExports) {
+    for (const exportName of Object.keys(jsxExports)) {
+      const sourceData = sourceMap[exportName] || {}
+      const x = sourceData.position?.x ?? 0
+      const y = sourceData.position?.y ?? 0
+      const fallback = WIDGET_FALLBACK_SIZES['component']
+      const width = sourceData.width ?? fallback.width
+      const height = sourceData.height ?? fallback.height
+      minX = Math.min(minX, x)
+      minY = Math.min(minY, y)
+      maxX = Math.max(maxX, x + width)
+      maxY = Math.max(maxY, y + height)
+      hasItems = true
+    }
+  }
+
+  return hasItems ? { minX, minY, maxX, maxY } : null
+}
+
+describe('computeCanvasBounds', () => {
+  it('returns null for empty canvas', () => {
+    expect(computeCanvasBounds([], [], null)).toBeNull()
+    expect(computeCanvasBounds(null, null, null)).toBeNull()
+  })
+
+  it('computes bounds for a single widget using props dimensions', () => {
+    const widgets = [
+      { type: 'sticky-note', position: { x: 100, y: 200 }, props: { width: 300, height: 100 } },
+    ]
+    const bounds = computeCanvasBounds(widgets, [], null)
+    expect(bounds).toEqual({ minX: 100, minY: 200, maxX: 400, maxY: 300 })
+  })
+
+  it('uses fallback dimensions when props are missing', () => {
+    const widgets = [
+      { type: 'sticky-note', position: { x: 50, y: 50 }, props: {} },
+    ]
+    const bounds = computeCanvasBounds(widgets, [], null)
+    expect(bounds).toEqual({ minX: 50, minY: 50, maxX: 230, maxY: 110 }) // 50+180, 50+60
+  })
+
+  it('computes bounds spanning multiple widgets', () => {
+    const widgets = [
+      { type: 'sticky-note', position: { x: 0, y: 0 }, props: { width: 180, height: 60 } },
+      { type: 'markdown', position: { x: 500, y: 300 }, props: { width: 360, height: 200 } },
+    ]
+    const bounds = computeCanvasBounds(widgets, [], null)
+    expect(bounds).toEqual({ minX: 0, minY: 0, maxX: 860, maxY: 500 })
+  })
+
+  it('includes JSX sources in bounds', () => {
+    const sources = [{ export: 'Hero', position: { x: -100, y: -50 }, width: 400, height: 300 }]
+    const jsxExports = { Hero: () => null }
+    const bounds = computeCanvasBounds([], sources, jsxExports)
+    expect(bounds).toEqual({ minX: -100, minY: -50, maxX: 300, maxY: 250 })
+  })
+
+  it('combines widgets and JSX sources', () => {
+    const widgets = [
+      { type: 'sticky-note', position: { x: 200, y: 200 }, props: { width: 180, height: 60 } },
+    ]
+    const sources = [{ export: 'Nav', position: { x: 0, y: 0 }, width: 100, height: 100 }]
+    const jsxExports = { Nav: () => null }
+    const bounds = computeCanvasBounds(widgets, sources, jsxExports)
+    expect(bounds).toEqual({ minX: 0, minY: 0, maxX: 380, maxY: 260 })
+  })
+
+  it('handles widgets with missing position (defaults to 0,0)', () => {
+    const widgets = [
+      { type: 'sticky-note', props: { width: 180, height: 60 } },
+    ]
+    const bounds = computeCanvasBounds(widgets, [], null)
+    expect(bounds).toEqual({ minX: 0, minY: 0, maxX: 180, maxY: 60 })
+  })
+
+  it('uses component fallback for JSX sources without explicit size', () => {
+    const sources = [{ export: 'Card', position: { x: 10, y: 10 } }]
+    const jsxExports = { Card: () => null }
+    const bounds = computeCanvasBounds([], sources, jsxExports)
+    // component fallback: 200x150
+    expect(bounds).toEqual({ minX: 10, minY: 10, maxX: 210, maxY: 160 })
+  })
+})

package/src/canvas/useUndoRedo.js

@@ -0,0 +1,86 @@
+import { useRef, useState, useCallback } from 'react'
+
+const MAX_HISTORY = 100
+const COALESCE_MS = 2000
+
+/**
+ * Snapshot-based undo/redo history for canvas widgets.
+ *
+ * Tracks past/future stacks of widget array clones. The present state
+ * is always the live `localWidgets` — this hook only manages history.
+ *
+ * Edit coalescing: continuous edits to the same widget within COALESCE_MS
+ * are merged into one undo step (like Figma).
+ */
+export default function useUndoRedo() {
+  const pastRef = useRef([])
+  const futureRef = useRef([])
+  const lastActionRef = useRef({ type: null, widgetId: null, time: 0 })
+  // State counter drives canUndo/canRedo re-renders without cloning the stacks
+  const [counts, setCounts] = useState({ past: 0, future: 0 })
+
+  const snapshot = useCallback((currentWidgets, actionType, widgetId) => {
+    const widgets = currentWidgets ?? []
+
+    // Edit coalescing — skip snapshot if same edit target within timeout
+    if (actionType === 'edit' && widgetId) {
+      const last = lastActionRef.current
+      const now = Date.now()
+      if (
+        last.type === 'edit' &&
+        last.widgetId === widgetId &&
+        now - last.time < COALESCE_MS
+      ) {
+        lastActionRef.current = { type: 'edit', widgetId, time: now }
+        return
+      }
+    }
+
+    pastRef.current.push(structuredClone(widgets))
+    if (pastRef.current.length > MAX_HISTORY) pastRef.current.shift()
+    futureRef.current = []
+    lastActionRef.current = {
+      type: actionType,
+      widgetId: widgetId || null,
+      time: Date.now(),
+    }
+    setCounts({ past: pastRef.current.length, future: 0 })
+  }, [])
+
+  const undo = useCallback((currentWidgets) => {
+    if (pastRef.current.length === 0) return null
+    futureRef.current.push(structuredClone(currentWidgets))
+    const previous = pastRef.current.pop()
+    lastActionRef.current = { type: 'undo', widgetId: null, time: Date.now() }
+    setCounts({ past: pastRef.current.length, future: futureRef.current.length })
+    return previous
+  }, [])
+
+  const redo = useCallback((currentWidgets) => {
+    if (futureRef.current.length === 0) return null
+    pastRef.current.push(structuredClone(currentWidgets))
+    const next = futureRef.current.pop()
+    lastActionRef.current = { type: 'redo', widgetId: null, time: Date.now() }
+    setCounts({ past: pastRef.current.length, future: futureRef.current.length })
+    return next
+  }, [])
+
+  const reset = useCallback(() => {
+    pastRef.current = []
+    futureRef.current = []
+    lastActionRef.current = { type: null, widgetId: null, time: 0 }
+    setCounts((prev) => {
+      if (prev.past === 0 && prev.future === 0) return prev
+      return { past: 0, future: 0 }
+    })
+  }, [])
+
+  return {
+    snapshot,
+    undo,
+    redo,
+    reset,
+    canUndo: counts.past > 0,
+    canRedo: counts.future > 0,
+  }
+}

package/src/canvas/useUndoRedo.test.js

@@ -0,0 +1,231 @@
+import { renderHook, act } from '@testing-library/react'
+import useUndoRedo from './useUndoRedo.js'
+
+describe('useUndoRedo', () => {
+  it('starts with canUndo and canRedo as false', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    expect(result.current.canUndo).toBe(false)
+    expect(result.current.canRedo).toBe(false)
+  })
+
+  it('can undo after a snapshot', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    const widgets = [{ id: '1', type: 'sticky-note', props: { text: 'a' }, position: { x: 0, y: 0 } }]
+
+    act(() => result.current.snapshot(widgets, 'add'))
+
+    expect(result.current.canUndo).toBe(true)
+    expect(result.current.canRedo).toBe(false)
+  })
+
+  it('undo returns the previous state and enables redo', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    const before = [{ id: '1', props: { text: 'a' } }]
+    const after = [{ id: '1', props: { text: 'b' } }]
+
+    act(() => result.current.snapshot(before, 'edit', '1'))
+
+    let restored
+    act(() => { restored = result.current.undo(after) })
+
+    expect(restored).toEqual(before)
+    expect(result.current.canUndo).toBe(false)
+    expect(result.current.canRedo).toBe(true)
+  })
+
+  it('redo returns the next state', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    const before = [{ id: '1', props: { text: 'a' } }]
+    const after = [{ id: '1', props: { text: 'b' } }]
+
+    act(() => result.current.snapshot(before, 'edit', '1'))
+    act(() => { result.current.undo(after) })
+
+    let redone
+    act(() => { redone = result.current.redo(before) })
+
+    expect(redone).toEqual(after)
+    expect(result.current.canUndo).toBe(true)
+    expect(result.current.canRedo).toBe(false)
+  })
+
+  it('new mutation after undo clears the redo chain', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    const s0 = [{ id: '1' }]
+    const s1 = [{ id: '1' }, { id: '2' }]
+    const s2 = [{ id: '1' }, { id: '3' }]
+
+    act(() => result.current.snapshot(s0, 'add'))
+    act(() => result.current.undo(s1))
+    expect(result.current.canRedo).toBe(true)
+
+    // New mutation breaks redo
+    act(() => result.current.snapshot(s0, 'add'))
+    expect(result.current.canRedo).toBe(false)
+    expect(result.current.canUndo).toBe(true)
+  })
+
+  it('supports multi-step undo-redo-undo chains', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    const s0 = [{ id: '1' }]
+    const s1 = [{ id: '1' }, { id: '2' }]
+    const s2 = [{ id: '1' }, { id: '2' }, { id: '3' }]
+    const s3 = [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }]
+
+    // Build history: s0 → s1 → s2 → s3
+    act(() => result.current.snapshot(s0, 'add'))
+    act(() => result.current.snapshot(s1, 'add'))
+    act(() => result.current.snapshot(s2, 'add'))
+
+    // present = s3, past = [s0, s1, s2]
+    // Undo to s2
+    let r
+    act(() => { r = result.current.undo(s3) })
+    expect(r).toEqual(s2)
+
+    // Undo to s1
+    act(() => { r = result.current.undo(s2) })
+    expect(r).toEqual(s1)
+
+    // Redo to s2
+    act(() => { r = result.current.redo(s1) })
+    expect(r).toEqual(s2)
+
+    // Redo to s3
+    act(() => { r = result.current.redo(s2) })
+    expect(r).toEqual(s3)
+
+    // Undo to s2 again
+    act(() => { r = result.current.undo(s3) })
+    expect(r).toEqual(s2)
+
+    // Undo to s1
+    act(() => { r = result.current.undo(s2) })
+    expect(r).toEqual(s1)
+
+    // Undo to s0
+    act(() => { r = result.current.undo(s1) })
+    expect(r).toEqual(s0)
+
+    // Can't undo further
+    expect(result.current.canUndo).toBe(false)
+    act(() => { r = result.current.undo(s0) })
+    expect(r).toBeNull()
+  })
+
+  it('coalesces edits to the same widget within timeout', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    const s0 = [{ id: '1', props: { text: '' } }]
+
+    // First edit — creates snapshot
+    act(() => result.current.snapshot(s0, 'edit', '1'))
+    expect(result.current.canUndo).toBe(true)
+
+    // Second edit to same widget within 2s — coalesced, no new snapshot
+    act(() => result.current.snapshot(s0, 'edit', '1'))
+    // Still only one entry in past
+    let r
+    act(() => { r = result.current.undo([{ id: '1', props: { text: 'abc' } }]) })
+    expect(r).toEqual(s0)
+    // No more undo after that
+    expect(result.current.canUndo).toBe(false)
+  })
+
+  it('does NOT coalesce edits to different widgets', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    const s0 = [{ id: '1' }, { id: '2' }]
+    const s1 = [{ id: '1', props: { text: 'a' } }, { id: '2' }]
+
+    act(() => result.current.snapshot(s0, 'edit', '1'))
+    act(() => result.current.snapshot(s1, 'edit', '2'))
+
+    // Two entries in past
+    expect(result.current.canUndo).toBe(true)
+    act(() => { result.current.undo([]) })
+    expect(result.current.canUndo).toBe(true)
+    act(() => { result.current.undo([]) })
+    expect(result.current.canUndo).toBe(false)
+  })
+
+  it('does NOT coalesce edit after a different action type', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    const s0 = [{ id: '1' }]
+    const s1 = [{ id: '1' }, { id: '2' }]
+
+    act(() => result.current.snapshot(s0, 'edit', '1'))
+    act(() => result.current.snapshot(s1, 'add'))
+    act(() => result.current.snapshot(s1, 'edit', '1'))
+
+    // Three entries in past (edit + add + edit — not coalesced because add broke the sequence)
+    act(() => { result.current.undo([]) })
+    act(() => { result.current.undo([]) })
+    act(() => { result.current.undo([]) })
+    expect(result.current.canUndo).toBe(false)
+  })
+
+  it('reset clears all history', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    act(() => result.current.snapshot([{ id: '1' }], 'add'))
+    act(() => result.current.snapshot([{ id: '1' }, { id: '2' }], 'add'))
+    expect(result.current.canUndo).toBe(true)
+
+    act(() => result.current.reset())
+    expect(result.current.canUndo).toBe(false)
+    expect(result.current.canRedo).toBe(false)
+  })
+
+  it('undo returns null when history is empty', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    let r
+    act(() => { r = result.current.undo([]) })
+    expect(r).toBeNull()
+  })
+
+  it('redo returns null when future is empty', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    let r
+    act(() => { r = result.current.redo([]) })
+    expect(r).toBeNull()
+  })
+
+  it('snapshots are deep clones (mutations do not leak)', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    const widgets = [{ id: '1', props: { text: 'original' } }]
+
+    act(() => result.current.snapshot(widgets, 'add'))
+
+    // Mutate the original array
+    widgets[0].props.text = 'mutated'
+
+    let restored
+    act(() => { restored = result.current.undo(widgets) })
+    expect(restored[0].props.text).toBe('original')
+  })
+
+  it('caps history at 100 entries', () => {
+    const { result } = renderHook(() => useUndoRedo())
+
+    for (let i = 0; i < 110; i++) {
+      act(() => result.current.snapshot([{ id: String(i) }], 'add'))
+    }
+
+    // Should be capped at 100 — undo 100 times, then can't undo further
+    let count = 0
+    let r = true
+    while (r !== null) {
+      act(() => { r = result.current.undo([]) })
+      if (r !== null) count++
+    }
+    expect(count).toBe(100)
+  })
+
+  it('snapshots null widgets as empty array (first widget on new canvas)', () => {
+    const { result } = renderHook(() => useUndoRedo())
+    act(() => result.current.snapshot(null, 'add'))
+    expect(result.current.canUndo).toBe(true)
+
+    let restored
+    act(() => { restored = result.current.undo([{ id: '1' }]) })
+    expect(restored).toEqual([])
+  })
+})

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -56,6 +56,7 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
   const inputRef = useRef(null)
   const filterRef = useRef(null)
   const embedRef = useRef(null)
+  const iframeRef = useRef(null)
 
   const iframeSrc = useMemo(() => {
     if (!rawSrc) return ''
@@ -177,6 +178,21 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
     return () => document.removeEventListener('storyboard:theme:changed', readToolbarTheme)
   }, [])
 
+  // Listen for navigation events from the embedded prototype iframe
+  useEffect(() => {
+    function handleMessage(e) {
+      if (e.source !== iframeRef.current?.contentWindow) return
+      if (e.data?.type !== 'storyboard:embed:navigate') return
+      const newSrc = e.data.src
+      if (newSrc && newSrc !== src) {
+        const originalSrc = readProp(props, 'originalSrc', prototypeEmbedSchema)
+        onUpdate?.({ src: newSrc, originalSrc: originalSrc || src })
+      }
+    }
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [src, props, onUpdate])
+
   const chromeVars = useMemo(() => getEmbedChromeVars(canvasTheme), [canvasTheme])
 
   const enterInteractive = useCallback(() => setInteractive(true), [])
@@ -309,6 +325,7 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
           <>
             <div className={styles.iframeContainer}>
               <iframe
+                ref={iframeRef}
                 src={iframeSrc}
                 className={styles.iframe}
                 style={{

package/src/canvas/widgets/WidgetChrome.jsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 import { Tooltip } from '@primer/react'
 import { EyeIcon as OcticonEye, EyeClosedIcon as OcticonEyeClosed } from '@primer/octicons-react'
 import styles from './WidgetChrome.module.css'
@@ -60,22 +60,111 @@ function EyeClosedIcon() {
   return <OcticonEyeClosed size={12} />
 }
 
-const ACTION_ICONS = {
-  'delete': DeleteIcon,
+function CopyIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z" />
+      <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z" />
+    </svg>
+  )
+}
+
+function MoreIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+    </svg>
+  )
+}
+
+function LinkIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z" />
+    </svg>
+  )
+}
+
+/** Icon registry — maps icon name strings from config to React components. */
+const ICON_REGISTRY = {
+  'trash': DeleteIcon,
   'zoom-in': ZoomInIcon,
   'zoom-out': ZoomOutIcon,
   'edit': EditIcon,
   'open-external': OpenExternalIcon,
-  'toggle-private': EyeIcon,
+  'eye': EyeIcon,
+  'eye-closed': EyeClosedIcon,
+  'copy': CopyIcon,
+  'link': LinkIcon,
+  'more': MoreIcon,
 }
 
-const ACTION_LABELS = {
-  'delete': 'Delete widget',
-  'zoom-in': 'Zoom in',
-  'zoom-out': 'Zoom out',
-  'edit': 'Edit',
-  'open-external': 'Open in new tab',
-  'toggle-private': 'Make private',
+/** Danger-styled actions in the overflow menu. */
+const DANGER_ACTIONS = new Set(['delete'])
+
+/**
+ * Overflow menu — `...` button that opens a dropdown with menu-only actions.
+ */
+function WidgetOverflowMenu({ widgetId, menuFeatures, 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 handleItemClick = useCallback((action, e) => {
+    e.stopPropagation()
+    if (action === 'copy-link') {
+      const url = new URL(window.location.href)
+      url.searchParams.set('widget', widgetId)
+      navigator.clipboard.writeText(url.toString()).catch(() => {})
+    } else {
+      onAction?.(action)
+    }
+    setOpen(false)
+  }, [widgetId, onAction])
+
+  return (
+    <div ref={menuRef} className={styles.overflowWrapper}>
+      <Tooltip text="More actions" direction="n">
+        <button
+          className={styles.featureBtn}
+          onClick={(e) => { e.stopPropagation(); setOpen((v) => !v) }}
+          aria-label="More actions"
+          aria-expanded={open}
+        >
+          <MoreIcon />
+        </button>
+      </Tooltip>
+      {open && (
+        <div className={styles.overflowMenu}>
+          {menuFeatures.map((feature) => {
+            const Icon = ICON_REGISTRY[feature.icon]
+            const label = feature.label || feature.action
+            const isDanger = DANGER_ACTIONS.has(feature.action)
+            return (
+              <button
+                key={feature.id}
+                className={`${styles.overflowItem} ${isDanger ? styles.overflowItemDanger : ''}`}
+                onClick={(e) => handleItemClick(feature.action, e)}
+              >
+                {Icon && <Icon />}
+                <span>{label}</span>
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
 }
 
 /**
@@ -135,6 +224,7 @@ function ColorPickerFeature({ currentColor, options, onColorChange }) {
  * non-standard actions (anything other than 'delete').
  */
 export default function WidgetChrome({
+  widgetId,
   features = [],
   selected = false,
   widgetProps,
@@ -176,7 +266,7 @@ export default function WidgetChrome({
   const handleActionClick = useCallback((actionId, e) => {
     e.stopPropagation()
     // Standard actions go through onAction (handled by CanvasPage)
-    if (actionId === 'delete') {
+    if (actionId === 'delete' || actionId === 'copy') {
       onAction?.(actionId)
       return
     }
@@ -216,6 +306,9 @@ export default function WidgetChrome({
         <div className={`${styles.toolbarContent} ${showToolbar ? styles.toolbarContentVisible : ''}`}>
           <div className={styles.featureButtons}>
             {features.map((feature) => {
+              // Menu features are rendered in WidgetOverflowMenu
+              if (feature.menu) return null
+
               if (feature.type === 'color-picker') {
                 return (
                   <ColorPickerFeature
@@ -228,13 +321,13 @@ export default function WidgetChrome({
               }
 
               if (feature.type === 'action') {
-                let Icon = ACTION_ICONS[feature.action]
-                let label = ACTION_LABELS[feature.action] || feature.action
+                let Icon = ICON_REGISTRY[feature.icon]
+                let label = feature.label || feature.action
 
                 // Toggle-private: swap icon/label based on current state
                 if (feature.action === 'toggle-private') {
                   if (widgetProps?.private) {
-                    Icon = EyeClosedIcon
+                    Icon = ICON_REGISTRY['eye-closed']
                     label = 'Private image — only visible locally'
                   } else {
                     label = 'Published image — deployed with canvas'
@@ -256,6 +349,11 @@ export default function WidgetChrome({
 
               return null
             })}
+            <WidgetOverflowMenu
+              widgetId={widgetId}
+              menuFeatures={features.filter((f) => f.menu)}
+              onAction={onAction}
+            />
           </div>
 
           <Tooltip text="Select" direction="n">