@dfosco/storyboard-react 3.11.3 → 4.0.0-beta.0

package/package.json

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

package/src/canvas/CanvasPage.jsx

@@ -287,7 +287,6 @@ export default function CanvasPage({ name }) {
   const zoomRef = useRef(initialViewport?.zoom ?? 100)
   const scrollRef = useRef(null)
   const pendingScrollRestore = useRef(initialViewport)
-  const initialWidgetParam = useRef(new URLSearchParams(window.location.search).has('widget'))
   const [canvasTitle, setCanvasTitle] = useState(canvas?.title || name)
   const titleInputRef = useRef(null)
   const [localSources, setLocalSources] = useState(canvas?.sources ?? [])
@@ -396,8 +395,6 @@ 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()
   }
 
@@ -863,7 +860,7 @@ export default function CanvasPage({ name }) {
     function handleSnapToggle() {
       setSnapEnabled((prev) => {
         const next = !prev
-        updateCanvas(name, { settings: { snapToGrid: next } }).catch((err) =>
+        updateCanvas(name, { snapToGrid: next }).catch((err) =>
           console.error('[canvas] Failed to persist snap setting:', err)
         )
         return next
@@ -922,16 +919,6 @@ export default function CanvasPage({ name }) {
     return () => document.removeEventListener('storyboard:canvas:zoom-to-fit', handleZoomToFit)
   }, [localWidgets, localSources, jsxExports])
 
-  // On initial load without a ?widget= deep link, zoom to fit all objects.
-  // Wait for jsxExports when the canvas has a JSX module so components are
-  // included in the bounding-box calculation.
-  useEffect(() => {
-    if (loading || initialWidgetParam.current) return
-    if (canvas?._jsxModule && !jsxExports) return
-    initialWidgetParam.current = true // only once
-    document.dispatchEvent(new CustomEvent('storyboard:canvas:zoom-to-fit'))
-  }, [loading, jsxExports, canvas])
-
   // Canvas background should follow toolbar theme target.
   useEffect(() => {
     function readMode() {

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -64,6 +64,8 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }
 
   const iframeSrc = useMemo(() => {
     if (!rawSrc) return ''
+    // External URLs are embedded as-is — storyboard query params only apply to local prototypes
+    if (/^https?:\/\//.test(rawSrc)) return rawSrc
     const hashIdx = rawSrc.indexOf('#')
     const base = hashIdx >= 0 ? rawSrc.slice(0, hashIdx) : rawSrc
     const hash = hashIdx >= 0 ? rawSrc.slice(hashIdx) : ''

package/src/canvas/widgets/WidgetChrome.jsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, useEffect } from 'react'
+import { useState, useCallback, useRef, useEffect, useSyncExternalStore } from 'react'
 import { Tooltip } from '@primer/react'
 import { EyeIcon as OcticonEye, EyeClosedIcon as OcticonEyeClosed } from '@primer/octicons-react'
 import styles from './WidgetChrome.module.css'
@@ -130,12 +130,45 @@ const ICON_REGISTRY = {
 /** Danger-styled actions in the overflow menu. */
 const DANGER_ACTIONS = new Set(['delete'])
 
+/**
+ * useAltKey — tracks whether the Alt/Option key is currently held.
+ * Uses useSyncExternalStore for tear-free reads across concurrent renders.
+ */
+let altKeyHeld = false
+const altKeyListeners = new Set()
+function notifyAltKeyListeners() {
+  for (const cb of altKeyListeners) cb()
+}
+
+if (typeof window !== 'undefined') {
+  window.addEventListener('keydown', (e) => {
+    if (e.key === 'Alt' && !altKeyHeld) { altKeyHeld = true; notifyAltKeyListeners() }
+  })
+  window.addEventListener('keyup', (e) => {
+    if (e.key === 'Alt' && altKeyHeld) { altKeyHeld = false; notifyAltKeyListeners() }
+  })
+  window.addEventListener('blur', () => {
+    if (altKeyHeld) { altKeyHeld = false; notifyAltKeyListeners() }
+  })
+}
+
+function subscribeAltKey(cb) {
+  altKeyListeners.add(cb)
+  return () => altKeyListeners.delete(cb)
+}
+function getAltKeySnapshot() { return altKeyHeld }
+
+function useAltKey() {
+  return useSyncExternalStore(subscribeAltKey, getAltKeySnapshot, () => false)
+}
+
 /**
  * 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)
+  const altHeld = useAltKey()
 
   useEffect(() => {
     if (!open) return
@@ -148,17 +181,21 @@ function WidgetOverflowMenu({ widgetId, menuFeatures, onAction }) {
     return () => document.removeEventListener('pointerdown', handlePointerDown)
   }, [open])
 
-  const handleItemClick = useCallback((action, e) => {
+  const handleItemClick = useCallback((feature, e) => {
     e.stopPropagation()
+    const action = (altHeld && feature.alt) ? feature.alt.action : feature.action
     if (action === 'copy-link') {
       const url = new URL(window.location.href)
       url.searchParams.set('widget', widgetId)
       navigator.clipboard.writeText(url.toString()).catch(() => {})
+    } else if (action === 'copy-widget-id') {
+      const canvasName = window.location.pathname.split('/').filter(Boolean).pop() || ''
+      navigator.clipboard.writeText(`${canvasName}/${widgetId}`).catch(() => {})
     } else {
       onAction?.(action)
     }
     setOpen(false)
-  }, [widgetId, onAction])
+  }, [widgetId, onAction, altHeld])
 
   return (
     <div ref={menuRef} className={styles.overflowWrapper}>
@@ -176,16 +213,20 @@ function WidgetOverflowMenu({ widgetId, menuFeatures, onAction }) {
         <div className={styles.overflowMenu}>
           {menuFeatures.map((feature) => {
             const Icon = ICON_REGISTRY[feature.icon]
-            const label = feature.label || feature.action
+            const hasAlt = !!feature.alt
+            const label = (altHeld && hasAlt) ? feature.alt.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)}
+                onClick={(e) => handleItemClick(feature, e)}
               >
                 {Icon && <Icon />}
                 <span>{label}</span>
+                {hasAlt && (
+                  <span className={`${styles.altHint} ${altHeld ? styles.altHintActive : ''}`}>⌥ alt</span>
+                )}
               </button>
             )
           })}
@@ -202,6 +243,7 @@ function WidgetOverflowMenu({ widgetId, menuFeatures, onAction }) {
 function DropdownFeature({ feature, onAction }) {
   const [open, setOpen] = useState(false)
   const menuRef = useRef(null)
+  const altHeld = useAltKey()
 
   useEffect(() => {
     if (!open) return
@@ -232,18 +274,24 @@ function DropdownFeature({ feature, onAction }) {
         <div className={styles.overflowMenu}>
           {(feature.items || []).map((item) => {
             const Icon = ICON_REGISTRY[item.icon]
+            const hasAlt = !!item.alt
+            const label = (altHeld && hasAlt) ? item.alt.label : (item.label || item.action)
+            const action = (altHeld && hasAlt) ? item.alt.action : item.action
             return (
               <button
                 key={item.action}
                 className={styles.overflowItem}
                 onClick={(e) => {
                   e.stopPropagation()
-                  onAction?.(item.action)
+                  onAction?.(action)
                   setOpen(false)
                 }}
               >
                 {Icon && <Icon />}
-                <span>{item.label || item.action}</span>
+                <span>{label}</span>
+                {hasAlt && (
+                  <span className={`${styles.altHint} ${altHeld ? styles.altHintActive : ''}`}>⌥ alt</span>
+                )}
               </button>
             )
           })}

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

@@ -288,3 +288,29 @@
   background: var(--bgColor-danger-muted, #490202);
   color: var(--fgColor-danger, #f85149);
 }
+
+/* Alt hint — muted label on the right side of a menu item */
+.altHint {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--fgColor-muted, #656d76);
+  padding: 1px 6px;
+  border-radius: 4px;
+  transition: background 80ms, color 80ms;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+:global([data-sb-canvas-theme^='dark']) .altHint {
+  color: var(--fgColor-muted, #8b949e);
+}
+
+.altHintActive {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+  color: var(--fgColor-default, #1f2328);
+}
+
+:global([data-sb-canvas-theme^='dark']) .altHintActive {
+  background: var(--bgColor-neutral-muted, #272c33);
+  color: var(--fgColor-default, #e6edf3);
+}

package/src/canvas/widgets/widgetConfig.js

@@ -37,6 +37,10 @@ function resolveFeature(feature) {
         for (const [k, v] of Object.entries(item)) r[k] = resolveVar(v)
         return r
       })
+    } else if (key === 'alt' && val && typeof val === 'object') {
+      const r = {}
+      for (const [k, v] of Object.entries(val)) r[k] = resolveVar(v)
+      resolved[key] = r
     } else {
       resolved[key] = resolveVar(val)
     }

package/src/vite/data-plugin.js

@@ -509,8 +509,6 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
   }
   for (const [route, flows] of Object.entries(routeGroups)) {
     if (flows.length > 1) {
-      const labels = flows.map(f => `  - ${f.name}${f.isDefault ? ' (default)' : ''}`).join('\n')
-      console.log(`[storyboard-data] Route "${route}" has ${flows.length} flows:\n${labels}`)
       const defaults = flows.filter(f => f.isDefault)
       if (defaults.length > 1) {
         console.warn(

package/src/vite/data-plugin.test.js

@@ -358,7 +358,7 @@ describe('flow route inference', () => {
     expect(code).not.toContain('"_route"')
   })
 
-  it('logs info when multiple flows share the same route', () => {
+  it('does not log info when multiple flows share the same route', () => {
     mkdirSync(path.join(tmpDir, 'src', 'prototypes', 'Dashboard'), { recursive: true })
     writeFileSync(
       path.join(tmpDir, 'src', 'prototypes', 'Dashboard', 'happy.flow.json'),
@@ -376,7 +376,7 @@ describe('flow route inference', () => {
     const routeLog = logSpy.mock.calls.find(call =>
       typeof call[0] === 'string' && call[0].includes('Route "/Dashboard" has 2 flows')
     )
-    expect(routeLog).toBeTruthy()
+    expect(routeLog).toBeUndefined()
     logSpy.mockRestore()
   })