@dfosco/storyboard-react 3.11.0-beta.1 → 3.11.0-beta.3

package/package.json

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

package/src/canvas/CanvasPage.jsx

@@ -440,6 +440,56 @@ export default function CanvasPage({ name }) {
     }
   }, [name, loading])
 
+  // Center on a specific widget if `?widget=<id>` is in the URL
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    const targetId = params.get('widget')
+    if (!targetId || loading) return
+
+    const el = scrollRef.current
+    if (!el) return
+
+    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
+    }
+
+    // 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, localSources, jsxExports])
+
   // Persist viewport state (zoom + scroll) to localStorage on changes
   useEffect(() => {
     const el = scrollRef.current
@@ -1035,6 +1085,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

@@ -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'
@@ -69,24 +69,179 @@ function CopyIcon() {
   )
 }
 
-const ACTION_ICONS = {
-  'delete': DeleteIcon,
+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>
+  )
+}
+
+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,
   '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,
+  'chevron-down': ChevronDownIcon,
+  'download': DownloadIcon,
 }
 
-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',
-  'copy': 'Copy widget',
+/** 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>
+  )
+}
+
+/**
+ * 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>
+  )
 }
 
 /**
@@ -146,6 +301,7 @@ function ColorPickerFeature({ currentColor, options, onColorChange }) {
  * non-standard actions (anything other than 'delete').
  */
 export default function WidgetChrome({
+  widgetId,
   features = [],
   selected = false,
   widgetProps,
@@ -227,6 +383,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
@@ -239,13 +398,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'
@@ -265,8 +424,29 @@ 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
+              widgetId={widgetId}
+              menuFeatures={features.filter((f) => f.menu)}
+              onAction={onAction}
+            />
           </div>
 
           <Tooltip text="Select" direction="n">

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

@@ -217,3 +217,67 @@
   border-color: currentColor;
   box-shadow: 0 0 0 1px currentColor;
 }
+
+/* Overflow menu */
+.overflowWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.overflowMenu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 180px;
+  padding: 4px;
+  background: var(--bgColor-default, #ffffff);
+  border-radius: 10px;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.08),
+    0 4px 12px rgba(0, 0, 0, 0.12);
+  z-index: 10;
+}
+
+:global([data-sb-canvas-theme^='dark']) .overflowMenu {
+  background: var(--bgColor-muted, #161b22);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.08),
+    0 4px 12px rgba(0, 0, 0, 0.45);
+}
+
+.overflowItem {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--fgColor-default, #1f2328);
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+
+:global([data-sb-canvas-theme^='dark']) .overflowItem {
+  color: var(--fgColor-default, #e6edf3);
+}
+
+.overflowItem:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+}
+
+:global([data-sb-canvas-theme^='dark']) .overflowItem:hover {
+  background: var(--bgColor-neutral-muted, #272c33);
+}
+
+.overflowItemDanger:hover {
+  background: var(--bgColor-danger-muted, #ffebe9);
+  color: var(--fgColor-danger, #d1242f);
+}
+
+:global([data-sb-canvas-theme^='dark']) .overflowItemDanger:hover {
+  background: var(--bgColor-danger-muted, #490202);
+  color: var(--fgColor-danger, #f85149);
+}

package/src/canvas/widgets/widgetConfig.js

@@ -6,9 +6,44 @@
  *
  * The config is the single source of truth for widget definitions —
  * prop schemas, feature lists, labels, and icons all come from here.
+ *
+ * Supports `$variable` references in string values, resolved from
+ * the top-level `variables` object in widgets.config.json.
  */
 import widgetsConfig from '@dfosco/storyboard-core/widgets.config.json'
 
+/** Variables defined in config — used to resolve `$key` references. */
+const variables = widgetsConfig.variables || {}
+
+/**
+ * Resolve `$variable` references in a string value.
+ * Returns the original value if it's not a string or doesn't start with `$`.
+ */
+function resolveVar(value) {
+  if (typeof value !== 'string' || !value.startsWith('$')) return value
+  const key = value.slice(1)
+  return variables[key] ?? value
+}
+
+/**
+ * Resolve all string values in a feature object, including nested items.
+ */
+function resolveFeature(feature) {
+  const resolved = {}
+  for (const [key, val] of Object.entries(feature)) {
+    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
+}
+
 /**
  * Convert a config prop definition to the schema shape used by widgetProps.js.
  * Config uses `"default"`, schema uses `"defaultValue"`.
@@ -42,16 +77,30 @@ function buildSchemas() {
   return result
 }
 
+/**
+ * Build resolved widget type entries with variables expanded in features.
+ */
+function buildWidgetTypes() {
+  const result = {}
+  for (const [type, def] of Object.entries(widgetsConfig.widgets)) {
+    result[type] = {
+      ...def,
+      features: (def.features || []).map(resolveFeature),
+    }
+  }
+  return result
+}
+
 /** All widget schemas, keyed by type string. */
 export const schemas = buildSchemas()
 
-/** Full widget config entries, keyed by type string. */
-export const widgetTypes = widgetsConfig.widgets
+/** Full widget config entries (with resolved variables), keyed by type string. */
+export const widgetTypes = buildWidgetTypes()
 
 /**
  * Get the feature list for a widget type.
  * @param {string} type — widget type string
- * @returns {Array} features array from config, or empty array
+ * @returns {Array} features array from config (variables resolved), or empty array
  */
 export function getFeatures(type) {
   return widgetTypes[type]?.features ?? []