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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.11.0-beta.1",
+  "version": "3.11.0-beta.2",
   "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.2",
+    "@dfosco/tiny-canvas": "3.11.0-beta.2",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1"

package/src/canvas/CanvasPage.jsx

@@ -440,6 +440,36 @@ 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 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
+
+    // Center the widget in the viewport
+    el.scrollLeft = wX + wW / 2 - el.clientWidth / 2
+    el.scrollTop = wY + wH / 2 - 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])
+
   // Persist viewport state (zoom + scroll) to localStorage on changes
   useEffect(() => {
     const el = scrollRef.current

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,102 @@ 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>
+  )
+}
+
+/** 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',
-  '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>
+  )
 }
 
 /**
@@ -146,6 +224,7 @@ function ColorPickerFeature({ currentColor, options, onColorChange }) {
  * non-standard actions (anything other than 'delete').
  */
 export default function WidgetChrome({
+  widgetId,
   features = [],
   selected = false,
   widgetProps,
@@ -227,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
@@ -239,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'
@@ -267,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">

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,36 @@
  *
  * 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.
+ */
+function resolveFeature(feature) {
+  const resolved = {}
+  for (const [key, val] of Object.entries(feature)) {
+    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 +69,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 ?? []