@dfosco/storyboard-react 4.2.0-beta.17 → 4.2.0-beta.18

package/src/canvas/widgets/widgetConfig.js

@@ -50,6 +50,11 @@ function resolveFeature(feature) {
       const r = {}
       for (const [k, v] of Object.entries(val)) r[k] = resolveVar(v)
       resolved[key] = r
+    } else if (key === 'toggle' && val && typeof val === 'object') {
+      // Pass toggle config through as-is (stateKey, activeIcon, activeLabel)
+      resolved[key] = { ...val }
+    } else if (key === 'surfaces' && Array.isArray(val)) {
+      resolved[key] = val
     } else {
       resolved[key] = resolveVar(val)
     }
@@ -115,16 +120,44 @@ export const widgetTypes = buildWidgetTypes()
  * In production (or when isLocalDev is false, e.g. ?prodMode simulation),
  * only features with `prod: true` are returned.
  * In dev, all features are returned.
+ *
+ * Features with an explicit `surfaces` array that does NOT include `"toolbar"`
+ * are excluded — they only render on their declared surfaces (fullbar/splitbar).
+ * Features without a `surfaces` array default to toolbar-only.
+ *
  * @param {string} type — widget type string
  * @param {{ isLocalDev?: boolean }} [options]
  * @returns {Array} features array from config (variables resolved), or empty array
  */
 export function getFeatures(type, { isLocalDev = true } = {}) {
   const features = widgetTypes[type]?.features ?? []
+  let filtered = features.filter(f => {
+    const surfaces = f.surfaces || ['toolbar']
+    return surfaces.includes('toolbar')
+  })
+  if (import.meta.env?.PROD || !isLocalDev) {
+    filtered = filtered.filter(f => f.prod)
+  }
+  return filtered
+}
+
+/**
+ * Get features for a specific rendering surface.
+ * Features without a `surfaces` array default to `["toolbar"]`.
+ * @param {string} type — widget type string
+ * @param {'toolbar' | 'fullbar' | 'splitbar'} surface — target surface
+ * @param {{ isLocalDev?: boolean }} [options]
+ * @returns {Array} filtered features for the given surface
+ */
+export function getFeaturesForSurface(type, surface, { isLocalDev = true } = {}) {
+  let features = widgetTypes[type]?.features ?? []
   if (import.meta.env?.PROD || !isLocalDev) {
-    return features.filter(f => f.prod)
+    features = features.filter(f => f.prod)
   }
-  return features
+  return features.filter(f => {
+    const surfaces = f.surfaces || ['toolbar']
+    return surfaces.includes(surface)
+  })
 }
 
 /**
@@ -188,7 +221,7 @@ export function getInteractGate(type) {
  */
 export function getMenuWidgetTypes() {
   return Object.entries(widgetTypes)
-    .filter(([type]) => type !== 'link-preview' && type !== 'image' && type !== 'figma-embed' && type !== 'codepen-embed' && type !== 'story' && type !== 'terminal-read')
+    .filter(([type, def]) => type !== 'link-preview' && type !== 'image' && type !== 'figma-embed' && type !== 'codepen-embed' && type !== 'story' && type !== 'terminal-read' && !def.unlisted)
     .map(([type, def]) => ({ type, label: def.label, icon: def.icon }))
 }
 
@@ -234,7 +267,7 @@ export function getConnectorDefaults() {
     endpointFill: defaults.endpointFill ?? 'var(--fgColor-accent, #0969da)',
     endpointStroke: defaults.endpointStroke ?? 'var(--bgColor-default, #ffffff)',
     endpointStrokeWidth: defaults.endpointStrokeWidth ?? 3,
-    hitAreaStrokeWidth: defaults.hitAreaStrokeWidth ?? 16,
+    hitAreaStrokeWidth: defaults.hitAreaStrokeWidth ?? 24,
     dragStroke: defaults.dragStroke ?? 'var(--fgColor-accent, #0969da)',
     dragStrokeWidth: defaults.dragStrokeWidth ?? 2,
     dragDasharray: defaults.dragDasharray ?? '6 4',

package/src/canvas/widgets/widgetIcons.jsx

@@ -0,0 +1,190 @@
+/**
+ * Shared icon registry for widget toolbars and titlebar actions.
+ *
+ * Maps string icon names from widgets.config.json to React components.
+ * Used by both WidgetChrome (canvas toolbar) and ExpandedPaneTopBar (fullscreen/split titlebars).
+ */
+import { EyeIcon as OcticonEye, EyeClosedIcon as OcticonEyeClosed, CodeIcon as OcticonCode, UnwrapIcon as OcticonUnwrap, ImageIcon as OcticonImage, UnfoldIcon as OcticonUnfold, FoldIcon as OcticonFold, ScreenFullIcon as OcticonScreenFull, ScreenNormalIcon as OcticonScreenNormal, BroadcastIcon as OcticonBroadcast, CheckIcon as OcticonCheck, MirrorIcon as OcticonMirror } from '@primer/octicons-react'
+
+function DeleteIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.15l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z" />
+    </svg>
+  )
+}
+
+function ZoomInIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z" />
+    </svg>
+  )
+}
+
+function ZoomOutIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M2.75 7.25h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5Z" />
+    </svg>
+  )
+}
+
+function EditIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z" />
+    </svg>
+  )
+}
+
+function OpenExternalIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z" />
+    </svg>
+  )
+}
+
+function EyeIcon() {
+  return <OcticonEye size={12} />
+}
+
+function EyeClosedIcon() {
+  return <OcticonEyeClosed size={12} />
+}
+
+function CodeIcon() {
+  return <OcticonCode size={12} />
+}
+
+function UnwrapIcon() {
+  return <OcticonUnwrap size={12} />
+}
+
+function ImageIcon() {
+  return <OcticonImage size={12} />
+}
+
+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>
+  )
+}
+
+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>
+  )
+}
+
+function ExpandIcon() {
+  return <OcticonScreenFull size={12} />
+}
+
+function CollapseIcon() {
+  return <OcticonScreenNormal size={12} />
+}
+
+function SyncIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z" />
+    </svg>
+  )
+}
+
+function UnfoldIcon() {
+  return <OcticonUnfold size={12} />
+}
+
+function FoldIcon() {
+  return <OcticonFold size={12} />
+}
+
+function ColumnsIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M12 3v18" /><rect x="3" y="3" width="18" height="18" rx="2" />
+    </svg>
+  )
+}
+
+function CheckMarkIcon() {
+  return <OcticonCheck size={12} />
+}
+
+function BroadcastIcon() {
+  return <OcticonBroadcast size={12} />
+}
+
+function MirrorIcon() {
+  return <OcticonMirror size={12} />
+}
+
+function CropIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M3.75 1a.75.75 0 0 1 .75.75V3.5h7a1.75 1.75 0 0 1 1.75 1.75v7h1.75a.75.75 0 0 1 0 1.5H13.25v1.5a.75.75 0 0 1-1.5 0v-1.5h-7A1.75 1.75 0 0 1 3 12.5v-7H1.25a.75.75 0 0 1 0-1.5H3V1.75A.75.75 0 0 1 3.75 1ZM4.5 5.25v7c0 .138.112.25.25.25h7V5.25a.25.25 0 0 0-.25-.25h-7Z" />
+    </svg>
+  )
+}
+
+/** Maps icon name strings from config to React components. */
+export const ICON_REGISTRY = {
+  'trash': DeleteIcon,
+  'zoom-in': ZoomInIcon,
+  'zoom-out': ZoomOutIcon,
+  'edit': EditIcon,
+  'open-external': OpenExternalIcon,
+  'eye': EyeIcon,
+  'eye-closed': EyeClosedIcon,
+  'code': CodeIcon,
+  'unwrap': UnwrapIcon,
+  'image': ImageIcon,
+  'copy': CopyIcon,
+  'link': LinkIcon,
+  'more': MoreIcon,
+  'chevron-down': ChevronDownIcon,
+  'download': DownloadIcon,
+  'expand': ExpandIcon,
+  'collapse': CollapseIcon,
+  'sync': SyncIcon,
+  'unfold': UnfoldIcon,
+  'fold': FoldIcon,
+  'columns': ColumnsIcon,
+  'broadcast': BroadcastIcon,
+  'check': CheckMarkIcon,
+  'crop': CropIcon,
+  'mirror': MirrorIcon,
+}

package/src/canvas/widgets/widgetProps.js

@@ -130,3 +130,4 @@ export const linkPreviewSchema = schemas['link-preview']
 export const imageSchema = schemas['image']
 export const figmaEmbedSchema = schemas['figma-embed']
 export const terminalSchema = schemas['terminal']
+export const promptSchema = schemas['prompt']

package/src/context.jsx

@@ -1,9 +1,10 @@
-import { useEffect, useMemo, Suspense, lazy } from 'react'
+import { useState, useEffect, useMemo, Suspense, lazy } from 'react'
 import { useParams, useLocation } from 'react-router-dom'
 // Named import seeds the core data index via init() AND provides canvas/story route data
 import { canvases, canvasAliases, stories } from 'virtual:storyboard-data-index'
 import { loadFlow, flowExists, findRecord, deepMerge, setFlowClass, installBodyClassSync, resolveFlowName, resolveRecordName, isModesEnabled } from '@dfosco/storyboard-core'
 import { StoryboardContext } from './StoryboardContext.js'
+import usePrototypeReloadGuard from './hooks/usePrototypeReloadGuard.js'
 import styles from './FlowError.module.css'
 
 export { StoryboardContext }
@@ -46,23 +47,35 @@ for (const [, pages] of canvasGroupMap) {
   }
 }
 
-// Build a map from story route paths → story names at module load time
-const storyRouteMap = new Map()
-for (const [name, data] of Object.entries(stories || {})) {
-  if (data?._route) {
-    const route = data._route.replace(/\/+$/, '')
-    storyRouteMap.set(route, name)
-  }
-}
-
 function matchCanvasRoute(pathname) {
   const normalized = stripBasePath(pathname)
   return canvasRouteMap.get(normalized) || null
 }
 
+/**
+ * Live-lookup a story route against the current `stories` object.
+ *
+ * Unlike the canvas route map (built once at module scope), this iterates
+ * the `stories` object on every call so it always reflects HMR mutations
+ * (the virtual-module HMR handler mutates `stories` in place).
+ *
+ * Also strips encoded query strings (%3F / %3f) that can leak into the
+ * pathname when an iframe src is percent-encoded incorrectly.
+ */
 function matchStoryRoute(pathname) {
-  const normalized = stripBasePath(pathname)
-  return storyRouteMap.get(normalized) || null
+  let normalized = stripBasePath(pathname)
+  // Strip encoded query strings that leaked into the path (%3F / %3f = ?)
+  const encodedIdx = normalized.search(/%3f/i)
+  if (encodedIdx !== -1) normalized = normalized.substring(0, encodedIdx)
+  const literalIdx = normalized.indexOf('?')
+  if (literalIdx !== -1) normalized = normalized.substring(0, literalIdx)
+
+  for (const [name, data] of Object.entries(stories || {})) {
+    if (data?._route && data._route.replace(/\/+$/, '') === normalized) {
+      return name
+    }
+  }
+  return null
 }
 
 /**
@@ -133,6 +146,9 @@ function getPageFlowName(pathname) {
 export default function StoryboardProvider({ flowName, sceneName, recordName, recordParam, children }) {
   const basePath = import.meta.env?.BASE_URL || '/'
 
+  // Suppress HMR full-reloads when prototype-auto-reload flag is off
+  usePrototypeReloadGuard()
+
   return (
     <>
       <StoryboardProviderInner
@@ -154,20 +170,32 @@ function StoryboardProviderInner({ flowName, sceneName, recordName, recordParam,
   const location = useLocation()
   const params = useParams()
 
-  // Canvas route detection — matches current URL against registered canvas routes
-  const canvasId = useMemo(() => matchCanvasRoute(location.pathname), [location.pathname])
-  const isMissingCanvasRoute = useMemo(
-    () => isCanvasPath(location.pathname) && !canvasId && !matchStoryRoute(location.pathname),
-    [location.pathname, canvasId],
-  )
+  // Re-evaluate story route detection when the data index changes via HMR.
+  // The virtual-module HMR handler mutates `stories` in place and dispatches
+  // this event; bumping the key forces useMemo deps to re-fire.
+  const [storyIndexKey, setStoryIndexKey] = useState(0)
+  useEffect(() => {
+    const handler = () => setStoryIndexKey((k) => k + 1)
+    document.addEventListener('storyboard:story-index-changed', handler)
+    return () => document.removeEventListener('storyboard:story-index-changed', handler)
+  }, [])
 
   // Story route detection — matches current URL against registered story routes
-  const storyName = useMemo(() => matchStoryRoute(location.pathname), [location.pathname])
+  // storyIndexKey forces re-evaluation when HMR mutates the stories object in place
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const storyName = useMemo(() => matchStoryRoute(location.pathname), [location.pathname, storyIndexKey])
   const isMissingStoryRoute = useMemo(
     () => isStoryPath(location.pathname) && !storyName,
     [location.pathname, storyName],
   )
 
+  // Canvas route detection — matches current URL against registered canvas routes
+  const canvasId = useMemo(() => matchCanvasRoute(location.pathname), [location.pathname])
+  const isMissingCanvasRoute = useMemo(
+    () => isCanvasPath(location.pathname) && !canvasId && !storyName,
+    [location.pathname, canvasId, storyName],
+  )
+
   const searchParams = new URLSearchParams(location.search)
   const sceneParam = searchParams.get('flow') || searchParams.get('scene')
   const prototypeName = getPrototypeName(location.pathname)

package/src/hooks/usePrototypeReloadGuard.js

@@ -0,0 +1,64 @@
+/**
+ * Prototype reload guard — suppresses Vite HMR full-reloads for non-canvas pages.
+ *
+ * Controlled by the "prototype-auto-reload" feature flag (default: true).
+ * When the flag is false (user opted out), sends heartbeat messages to the
+ * Vite dev server which suppresses full-reload and update payloads for this
+ * client. Custom storyboard events (canvas file changes, story changes, etc.)
+ * always pass through.
+ *
+ * Heartbeats are sent every 3s and auto-expire server-side after 5s, so
+ * closed tabs never leave the guard stuck.
+ */
+import { useEffect } from 'react'
+import { getFlag, subscribeToStorage } from '@dfosco/storyboard-core'
+
+const FLAG_KEY = 'prototype-auto-reload'
+const HEARTBEAT_MS = 3000
+
+export default function usePrototypeReloadGuard() {
+  useEffect(() => {
+    if (!import.meta.hot) return
+
+    let interval = null
+
+    function start() {
+      if (interval) return
+      const msg = { active: true }
+      import.meta.hot.send('storyboard:prototype-reload-guard', msg)
+      interval = setInterval(() => {
+        import.meta.hot.send('storyboard:prototype-reload-guard', msg)
+      }, HEARTBEAT_MS)
+    }
+
+    function stop() {
+      if (interval) {
+        clearInterval(interval)
+        interval = null
+      }
+      import.meta.hot.send('storyboard:prototype-reload-guard', { active: false })
+    }
+
+    function sync() {
+      const autoReload = getFlag(FLAG_KEY)
+      if (autoReload) {
+        stop()
+      } else {
+        start()
+      }
+    }
+
+    // Initial sync
+    sync()
+
+    // Re-sync when the flag changes in localStorage (e.g. toggled from devtools)
+    const unsub = subscribeToStorage((key) => {
+      if (key === 'flag.' + FLAG_KEY) sync()
+    })
+
+    return () => {
+      stop()
+      unsub()
+    }
+  }, [])
+}

package/src/index.js

@@ -36,8 +36,10 @@ export { FormContext } from './context/FormContext.js'
 // Design mode hook (keep — React apps may still read mode state)
 // ModeSwitch and ToolbarShell UI moved to @dfosco/storyboard-svelte-ui
 
-// Viewfinder dashboard
-export { default as Viewfinder } from './Viewfinder.jsx'
+// Workspace dashboard
+export { default as Workspace } from './Workspace.jsx'
+// Deprecated alias — use Workspace instead
+export { default as Viewfinder } from './Workspace.jsx'
 
 // Command Palette (includes BranchBar automatically)
 export { default as StoryboardCommandPalette } from './CommandPalette/CommandPalette.jsx'

package/src/story/ComponentSetPage.jsx

@@ -0,0 +1,186 @@
+/**
+ * ComponentSetPage — renders all exports from a .story.jsx in a grid.
+ *
+ * Mounted when StoryPage detects `?_sb_component_set` in the URL.
+ * Each export gets its own grid cell with a selectable label header.
+ *
+ * URL params:
+ *   layout   — "horizontal" (default) | "vertical"
+ *   selected — export name of the currently selected cell
+ *
+ * Selection: clicking a cell label updates `?selected=` and posts
+ * `storyboard:component-set:select` to the parent window so the
+ * canvas widget can track which export the user picked.
+ */
+import { useState, useEffect, useLayoutEffect, useMemo, useCallback, useRef } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { getStoryData } from '@dfosco/storyboard-core'
+import { ThemeProvider, BaseStyles } from '@primer/react'
+import styles from './ComponentSetPage.module.css'
+
+export default function ComponentSetPage({ name }) {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const searchParams = new URLSearchParams(location.search)
+
+  const layout = searchParams.get('layout') || 'horizontal'
+  const selected = searchParams.get('selected') || ''
+  const isEmbed = searchParams.has('_sb_embed')
+
+  // Suppress HMR full-reloads when embedded as a canvas iframe
+  useEffect(() => {
+    if (!isEmbed || !import.meta.hot) return
+    const msg = { active: true }
+    import.meta.hot.send('storyboard:canvas-hmr-guard', msg)
+    const interval = setInterval(() => {
+      import.meta.hot.send('storyboard:canvas-hmr-guard', msg)
+    }, 3000)
+    return () => {
+      clearInterval(interval)
+      import.meta.hot.send('storyboard:canvas-hmr-guard', { active: false })
+    }
+  }, [isEmbed])
+
+  const story = useMemo(() => getStoryData(name), [name])
+  const [exports, setExports] = useState(null)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    if (!story?._storyImport) {
+      Promise.resolve().then(() => setError(`Story "${name}" not found or missing import`))
+      return
+    }
+
+    let cancelled = false
+    story._storyImport()
+      .then((mod) => {
+        if (cancelled) return
+        const namedExports = {}
+        for (const [key, value] of Object.entries(mod)) {
+          if (key !== 'default' && typeof value === 'function') {
+            namedExports[key] = value
+          }
+        }
+        setExports(namedExports)
+        setError(null)
+      })
+      .catch((err) => {
+        if (cancelled) return
+        setError(`Failed to load story "${name}": ${err.message || err}`)
+      })
+
+    return () => { cancelled = true }
+  }, [name, story])
+
+  // Signal snapshot-ready after grid renders in embed mode
+  useEffect(() => {
+    if (!isEmbed || !exports || window.parent === window) return
+    document.fonts.ready.then(() => {
+      requestAnimationFrame(() => requestAnimationFrame(() => {
+        window.__sbSnapshotReady?.()
+      }))
+    })
+  }, [isEmbed, exports])
+
+  const gridRef = useRef(null)
+
+  // Measure all cell content elements and snap cells to the largest
+  useLayoutEffect(() => {
+    const grid = gridRef.current
+    if (!grid || !exports) return
+
+    const cells = grid.querySelectorAll('[data-cell-content]')
+    if (cells.length === 0) return
+
+    function measure() {
+      let maxW = 0
+      let maxH = 0
+      for (const el of cells) {
+        maxW = Math.max(maxW, el.scrollWidth)
+        maxH = Math.max(maxH, el.scrollHeight)
+      }
+      grid.style.setProperty('--cell-snap-w', `${maxW}px`)
+      grid.style.setProperty('--cell-snap-h', `${maxH}px`)
+    }
+
+    // Measure after fonts load and initial paint
+    measure()
+    document.fonts.ready.then(() => requestAnimationFrame(measure))
+
+    const ro = new ResizeObserver(measure)
+    for (const el of cells) ro.observe(el)
+    return () => ro.disconnect()
+  }, [exports, layout])
+
+  const handleSelect = useCallback((exportName) => {
+    const params = new URLSearchParams(location.search)
+    if (exportName === params.get('selected')) {
+      params.delete('selected')
+    } else {
+      params.set('selected', exportName)
+    }
+    navigate(`${location.pathname}?${params}`, { replace: true })
+
+    // Notify parent widget
+    if (window.parent !== window) {
+      window.parent.postMessage({
+        type: 'storyboard:component-set:select',
+        storyId: name,
+        exportName: exportName === selected ? null : exportName,
+      }, '*')
+    }
+  }, [location, navigate, name, selected])
+
+  if (error) {
+    return (
+      <div className={styles.error}>
+        <strong>Component Set Error</strong>
+        <span>{error}</span>
+      </div>
+    )
+  }
+
+  if (!exports) {
+    if (isEmbed) return null
+    return <div className={styles.loading}>Loading component set…</div>
+  }
+
+  const exportNames = Object.keys(exports)
+
+  return (
+    <ThemeProvider colorMode="day">
+      <BaseStyles>
+        <div
+          ref={gridRef}
+          className={styles.grid}
+          data-layout={layout}
+        >
+          {exportNames.map((exportName) => {
+            const Component = exports[exportName]
+            const isSelected = exportName === selected
+            return (
+              <div
+                key={exportName}
+                className={styles.cell}
+                data-selected={isSelected || undefined}
+              >
+                <button
+                  className={styles.cellLabel}
+                  onClick={() => handleSelect(exportName)}
+                  data-selected={isSelected || undefined}
+                  aria-pressed={isSelected}
+                >
+                  <span className={styles.cellRadio} data-selected={isSelected || undefined} />
+                  <span className={styles.cellName}>{exportName}</span>
+                </button>
+                <div className={styles.cellContent} data-cell-content>
+                  <Component />
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </BaseStyles>
+    </ThemeProvider>
+  )
+}