@dfosco/storyboard-react 3.12.0 → 4.0.0-beta.1

package/package.json

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

package/src/canvas/CanvasPage.jsx

@@ -1017,6 +1017,17 @@ export default function CanvasPage({ name }) {
       return pathname
     }
 
+    /** Parse text as a web URL (http/https only). Returns URL object or null. */
+    function looksLikeWebUrl(text) {
+      try {
+        const url = new URL(text)
+        if (url.protocol === 'http:' || url.protocol === 'https:') return url
+        return null
+      } catch {
+        return null
+      }
+    }
+
     function blobToDataUrl(blob) {
       return new Promise((resolve, reject) => {
         const reader = new FileReader()
@@ -1099,13 +1110,13 @@ export default function CanvasPage({ name }) {
       e.preventDefault()
 
       let type, props
-      try {
-        const parsed = new URL(text)
+      const url = looksLikeWebUrl(text)
+      if (url) {
         if (isFigmaUrl(text)) {
           type = 'figma-embed'
           props = { url: sanitizeFigmaUrl(text), width: 800, height: 450 }
         } else if (isSameOriginPrototype(text)) {
-          const pathPortion = parsed.pathname + parsed.search + parsed.hash
+          const pathPortion = url.pathname + url.search + url.hash
           const src = extractPrototypeSrc(pathPortion)
           type = 'prototype'
           props = { src: src || '/', originalSrc: src || '/', label: '', width: 800, height: 600 }
@@ -1113,7 +1124,7 @@ export default function CanvasPage({ name }) {
           type = 'link-preview'
           props = { url: text, title: '' }
         }
-      } catch {
+      } else {
         type = 'markdown'
         props = { content: text }
       }

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()
   })