@dfosco/storyboard-react 3.2.0 → 3.3.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.2.0",
+    "@dfosco/storyboard-core": "3.3.0",
     "@dfosco/tiny-canvas": "^1.1.0",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",

package/src/Viewfinder.jsx

@@ -33,7 +33,7 @@ export default function Viewfinder({ pageModules = {}, basePath, title = 'Storyb
 
     let cancelled = false
 
-    import('@dfosco/storyboard-core/ui/viewfinder').then(({ mountViewfinder, unmountViewfinder }) => {
+    import('@dfosco/storyboard-core/ui-runtime').then(({ mountViewfinder, unmountViewfinder }) => {
       if (cancelled) return
       // Ensure clean state for re-mounts
       unmountViewfinder()

package/src/canvas/CanvasControls.jsx

@@ -8,7 +8,7 @@ export const ZOOM_MAX = ZOOM_STEPS[ZOOM_STEPS.length - 1]
 const WIDGET_TYPES = [
   { type: 'sticky-note', label: 'Sticky Note' },
   { type: 'markdown', label: 'Markdown' },
-  { type: 'prototype', label: 'Prototype' },
+  { type: 'prototype', label: 'Prototype embed' },
 ]
 
 /**

package/src/canvas/CanvasPage.jsx

@@ -1,5 +1,6 @@
 import { createElement, useCallback, useEffect, useRef, useState } from 'react'
 import { Canvas } from '@dfosco/tiny-canvas'
+import '@dfosco/tiny-canvas/style.css'
 import { useCanvas } from './useCanvas.js'
 import { getWidgetComponent } from './widgets/index.js'
 import { schemas, getDefaults } from './widgets/widgetProps.js'

package/src/canvas/CanvasPage.module.css

@@ -71,3 +71,8 @@
   border-color: var(--bgColor-accent-emphasis, #2f81f7);
   background: var(--bgColor-default, #ffffff);
 }
+
+/* Remove tiny-canvas wrapper clipping — widgets handle their own overflow/radius */
+:global(.tc-draggable-inner) {
+  overflow: visible;
+}

package/src/canvas/CanvasToolbar.jsx

@@ -6,7 +6,7 @@ import styles from './CanvasToolbar.module.css'
 const WIDGET_TYPES = [
   { type: 'sticky-note', label: 'Sticky Note', icon: '📝' },
   { type: 'markdown', label: 'Markdown', icon: '📄' },
-  { type: 'prototype', label: 'Prototype', icon: '🖥️' },
+  { type: 'prototype', label: 'Prototype embed', icon: '🖥️' },
 ]
 
 /**

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -1,8 +1,15 @@
-import { useState, useRef, useEffect, useCallback } from 'react'
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import { buildPrototypeIndex } from '@dfosco/storyboard-core'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import { readProp, prototypeEmbedSchema } from './widgetProps.js'
 import styles from './PrototypeEmbed.module.css'
 
+function formatName(name) {
+  return name
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
 export default function PrototypeEmbed({ props, onUpdate }) {
   const src = readProp(props, 'src', prototypeEmbedSchema)
   const width = readProp(props, 'width', prototypeEmbedSchema)
@@ -18,15 +25,100 @@ export default function PrototypeEmbed({ props, onUpdate }) {
 
   const [editing, setEditing] = useState(false)
   const [interactive, setInteractive] = useState(false)
+  const [filter, setFilter] = useState('')
   const inputRef = useRef(null)
+  const filterRef = useRef(null)
   const embedRef = useRef(null)
 
+  // Build prototype index for the picker
+  const prototypeIndex = useMemo(() => {
+    try {
+      return buildPrototypeIndex()
+    } catch {
+      return { folders: [], prototypes: [], globalFlows: [], sorted: { title: { prototypes: [], folders: [] } } }
+    }
+  }, [])
+
+  // Build grouped picker entries from the prototype index
+  const pickerGroups = useMemo(() => {
+    const groups = []
+    const idx = prototypeIndex
+
+    // Collect all prototypes (from folders first, then ungrouped)
+    const allProtos = []
+    for (const folder of (idx.sorted?.title?.folders || idx.folders || [])) {
+      for (const proto of folder.prototypes || []) {
+        if (!proto.isExternal) allProtos.push(proto)
+      }
+    }
+    for (const proto of (idx.sorted?.title?.prototypes || idx.prototypes || [])) {
+      if (!proto.isExternal) allProtos.push(proto)
+    }
+
+    for (const proto of allProtos) {
+      if (proto.hideFlows && proto.flows.length === 1) {
+        groups.push({
+          label: proto.name,
+          items: [{ name: proto.name, route: proto.flows[0].route }],
+        })
+      } else if (proto.flows.length > 0) {
+        groups.push({
+          label: proto.name,
+          items: proto.flows.map((f) => ({
+            name: f.meta?.title || formatName(f.name),
+            route: f.route,
+          })),
+        })
+      } else {
+        groups.push({
+          label: proto.name,
+          items: [{ name: proto.name, route: `/${proto.dirName}` }],
+        })
+      }
+    }
+
+    // Global flows
+    const gf = idx.globalFlows || []
+    if (gf.length > 0) {
+      groups.push({
+        label: 'Other flows',
+        items: gf.map((f) => ({
+          name: f.meta?.title || formatName(f.name),
+          route: f.route,
+        })),
+      })
+    }
+
+    return groups
+  }, [prototypeIndex])
+
+  // Filter groups by search text
+  const filteredGroups = useMemo(() => {
+    if (!filter) return pickerGroups
+    const q = filter.toLowerCase()
+    return pickerGroups
+      .map((group) => {
+        const labelMatch = group.label.toLowerCase().includes(q)
+        if (labelMatch) return group
+        const matchedItems = group.items.filter((item) =>
+          item.name.toLowerCase().includes(q) || item.route.toLowerCase().includes(q)
+        )
+        if (matchedItems.length === 0) return null
+        return { ...group, items: matchedItems }
+      })
+      .filter(Boolean)
+  }, [pickerGroups, filter])
+
+  const hasPicker = pickerGroups.length > 0
+
   useEffect(() => {
-    if (editing && inputRef.current) {
+    if (editing && hasPicker && filterRef.current) {
+      filterRef.current.focus()
+    } else if (editing && !hasPicker && inputRef.current) {
       inputRef.current.focus()
       inputRef.current.select()
     }
-  }, [editing])
+  }, [editing, hasPicker])
 
   // Exit interactive mode when clicking outside the embed
   useEffect(() => {
@@ -42,11 +134,23 @@ export default function PrototypeEmbed({ props, onUpdate }) {
 
   const enterInteractive = useCallback(() => setInteractive(true), [])
 
+  function handlePickRoute(route) {
+    onUpdate?.({ src: route })
+    setEditing(false)
+    setFilter('')
+  }
+
   function handleSubmit(e) {
     e.preventDefault()
     const value = inputRef.current?.value?.trim() || ''
     onUpdate?.({ src: value })
     setEditing(false)
+    setFilter('')
+  }
+
+  function handleCancelEdit() {
+    setEditing(false)
+    setFilter('')
   }
 
   return (
@@ -57,26 +161,86 @@ export default function PrototypeEmbed({ props, onUpdate }) {
         style={{ width, height }}
       >
         {editing ? (
-          <form
-            className={styles.urlForm}
-            onSubmit={handleSubmit}
+          <div
+            className={styles.pickerPanel}
             onMouseDown={(e) => e.stopPropagation()}
             onPointerDown={(e) => e.stopPropagation()}
           >
-            <label className={styles.urlLabel}>Prototype URL path</label>
-            <input
-              ref={inputRef}
-              className={styles.urlInput}
-              type="text"
-              defaultValue={src}
-              placeholder="/MyPrototype/page"
-              onKeyDown={(e) => { if (e.key === 'Escape') setEditing(false) }}
-            />
-            <div className={styles.urlActions}>
-              <button type="submit" className={styles.urlSave}>Save</button>
-              <button type="button" className={styles.urlCancel} onClick={() => setEditing(false)}>Cancel</button>
-            </div>
-          </form>
+            {hasPicker && (
+              <>
+                <div className={styles.pickerHeader}>
+                  <span className={styles.urlLabel}>Pick a prototype</span>
+                  <button
+                    type="button"
+                    className={styles.urlCancel}
+                    onClick={handleCancelEdit}
+                    aria-label="Cancel"
+                  >✕</button>
+                </div>
+                <input
+                  ref={filterRef}
+                  className={styles.filterInput}
+                  type="text"
+                  value={filter}
+                  onChange={(e) => setFilter(e.target.value)}
+                  placeholder="Filter…"
+                  onKeyDown={(e) => { if (e.key === 'Escape') handleCancelEdit() }}
+                />
+                <div className={styles.pickerList} role="listbox">
+                  {filteredGroups.map((group) => (
+                    <div key={group.label} className={styles.pickerGroup}>
+                      {group.items.length === 1 && group.items[0].name === group.label ? (
+                        <button
+                          className={styles.pickerItem}
+                          role="option"
+                          onClick={() => handlePickRoute(group.items[0].route)}
+                        >
+                          {group.label}
+                        </button>
+                      ) : (
+                        <>
+                          <div className={styles.pickerGroupLabel}>{group.label}</div>
+                          {group.items.map((item) => (
+                            <button
+                              key={item.route}
+                              className={styles.pickerItem}
+                              role="option"
+                              onClick={() => handlePickRoute(item.route)}
+                            >
+                              {item.name}
+                            </button>
+                          ))}
+                        </>
+                      )}
+                    </div>
+                  ))}
+                  {filteredGroups.length === 0 && (
+                    <div className={styles.pickerEmpty}>No matches</div>
+                  )}
+                </div>
+                <div className={styles.pickerDivider} />
+              </>
+            )}
+            <form className={styles.customUrlSection} onSubmit={handleSubmit}>
+              <label className={styles.urlLabel}>
+                {hasPicker ? 'Or enter a custom URL' : 'Prototype URL path'}
+              </label>
+              <input
+                ref={inputRef}
+                className={styles.urlInput}
+                type="text"
+                defaultValue={src}
+                placeholder="/MyPrototype/page"
+                onKeyDown={(e) => { if (e.key === 'Escape') handleCancelEdit() }}
+              />
+              <div className={styles.urlActions}>
+                <button type="submit" className={styles.urlSave}>Save</button>
+                {!hasPicker && (
+                  <button type="button" className={styles.urlCancel} onClick={handleCancelEdit}>Cancel</button>
+                )}
+              </div>
+            </form>
+          </div>
         ) : iframeSrc ? (
           <>
             <div className={styles.iframeContainer}>

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

@@ -2,6 +2,9 @@
   position: relative;
   overflow: hidden;
   background: var(--bgColor-default, #ffffff);
+  border: 3px solid var(--borderColor-default, #d0d7de);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
 
 .iframeContainer {
@@ -89,6 +92,101 @@
   justify-content: center;
 }
 
+.pickerPanel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.pickerHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px 0;
+}
+
+.filterInput {
+  all: unset;
+  margin: 8px 16px;
+  padding: 6px 10px;
+  font-size: 13px;
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  border-radius: 6px;
+  background: var(--bgColor-default, #ffffff);
+  color: var(--fgColor-default, #1f2328);
+}
+
+.filterInput:focus {
+  border-color: var(--bgColor-accent-emphasis, #2f81f7);
+  box-shadow: 0 0 0 2px rgba(47, 129, 247, 0.3);
+}
+
+.pickerList {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 8px;
+}
+
+.pickerGroup {
+  margin-bottom: 2px;
+}
+
+.pickerGroupLabel {
+  padding: 6px 8px 2px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fgColor-muted, #656d76);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.pickerItem {
+  all: unset;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 12px;
+  font-size: 13px;
+  color: var(--fgColor-default, #1f2328);
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pickerItem:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+}
+
+.pickerItem:focus-visible {
+  outline: 2px solid var(--bgColor-accent-emphasis, #2f81f7);
+  outline-offset: -2px;
+}
+
+.pickerEmpty {
+  padding: 12px;
+  font-size: 13px;
+  color: var(--fgColor-muted, #656d76);
+  font-style: italic;
+  text-align: center;
+}
+
+.pickerDivider {
+  height: 1px;
+  margin: 4px 16px;
+  background: var(--borderColor-muted, #d8dee4);
+}
+
+.customUrlSection {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 16px 12px;
+}
+
 .urlLabel {
   font-size: 12px;
   font-weight: 600;

package/src/context.jsx

@@ -1,13 +1,27 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, Suspense, lazy } from 'react'
 import { useParams, useLocation } from 'react-router-dom'
-// Side-effect import: seeds the core data index via init()
-import 'virtual:storyboard-data-index'
+// Named import seeds the core data index via init() AND provides canvas route data
+import { canvases } 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 styles from './FlowError.module.css'
 
 export { StoryboardContext }
 
+const CanvasPageLazy = lazy(() => import('./canvas/CanvasPage.jsx'))
+
+// Build a map from canvas route paths → canvas names at module load time
+const canvasRouteMap = new Map()
+for (const [name, data] of Object.entries(canvases || {})) {
+  const route = (data?._route || `/${name}`).replace(/\/+$/, '')
+  canvasRouteMap.set(route, name)
+}
+
+function matchCanvasRoute(pathname) {
+  const normalized = pathname.replace(/\/+$/, '') || '/'
+  return canvasRouteMap.get(normalized) || null
+}
+
 /**
  * Derives the top-level prototype name from a pathname.
  * "/Dashboard" → "Dashboard", "/Dashboard/sub" → "Dashboard"
@@ -44,14 +58,19 @@ function getPageFlowName(pathname) {
  */
 export default function StoryboardProvider({ flowName, sceneName, recordName, recordParam, children }) {
   const location = useLocation()
+  const params = useParams()
+
+  // Canvas route detection — matches current URL against registered canvas routes
+  const canvasName = useMemo(() => matchCanvasRoute(location.pathname), [location.pathname])
+
   const searchParams = new URLSearchParams(location.search)
   const sceneParam = searchParams.get('flow') || searchParams.get('scene')
   const prototypeName = getPrototypeName(location.pathname)
   const pageFlow = getPageFlowName(location.pathname)
-  const params = useParams()
 
-  // Resolve flow name with prototype scoping
+  // Resolve flow name with prototype scoping (skip for canvas pages)
   const activeFlowName = useMemo(() => {
+    if (canvasName) return null
     const requested = sceneParam || flowName || sceneName
     if (requested) {
       return resolveFlowName(prototypeName, requested)
@@ -66,7 +85,7 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
     }
     // 3. Global default
     return 'default'
-  }, [sceneParam, flowName, sceneName, prototypeName, pageFlow])
+  }, [canvasName, sceneParam, flowName, sceneName, prototypeName, pageFlow])
 
   // Auto-install body class sync (sb-key--value classes on <body>)
   useEffect(() => installBodyClassSync(), [])
@@ -76,9 +95,9 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
     if (!isModesEnabled()) return
 
     let cleanup
-    import('@dfosco/storyboard-core/ui/design-modes')
-      .then(({ mountDesignModesUI }) => {
-        cleanup = mountDesignModesUI()
+    import('@dfosco/storyboard-core/ui-runtime')
+      .then(({ mountDesignModes }) => {
+        cleanup = mountDesignModes()
       })
       .catch(() => {
         // Svelte UI not available — degrade gracefully
@@ -87,7 +106,9 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
     return () => cleanup?.()
   }, [])
 
+  // Skip flow loading for canvas pages
   const { data, error } = useMemo(() => {
+    if (canvasName) return { data: null, error: null }
     try {
       let flowData = loadFlow(activeFlowName)
 
@@ -105,7 +126,26 @@ export default function StoryboardProvider({ flowName, sceneName, recordName, re
     } catch (err) {
       return { data: null, error: err.message }
     }
-  }, [activeFlowName, recordName, recordParam, params, prototypeName])
+  }, [canvasName, activeFlowName, recordName, recordParam, params, prototypeName])
+
+  // Canvas pages get their own rendering path — no flow data needed
+  if (canvasName) {
+    const canvasValue = {
+      data: null,
+      error: null,
+      loading: false,
+      flowName: null,
+      sceneName: null,
+      prototypeName: null,
+    }
+    return (
+      <StoryboardContext.Provider value={canvasValue}>
+        <Suspense fallback={null}>
+          <CanvasPageLazy name={canvasName} />
+        </Suspense>
+      </StoryboardContext.Provider>
+    )
+  }
 
   const value = {
     data,

package/src/vite/data-plugin.js

@@ -295,7 +295,7 @@ function readConfig(root) {
 }
 
 /**
- * Read core-ui.config.json from @dfosco/storyboard-core.
+ * Read toolbar.config.json from @dfosco/storyboard-core.
  * Returns the full config object with modes array.
  * Falls back to hardcoded defaults if not found.
  */
@@ -311,9 +311,9 @@ function readModesConfig(root) {
 
   // Try local workspace path first (monorepo), then node_modules
   const candidates = [
-    path.resolve(root, 'packages/core/core-ui.config.json'),
+    path.resolve(root, 'packages/core/toolbar.config.json'),
     path.resolve(root, 'packages/core/configs/modes.config.json'),
-    path.resolve(root, 'node_modules/@dfosco/storyboard-core/core-ui.config.json'),
+    path.resolve(root, 'node_modules/@dfosco/storyboard-core/toolbar.config.json'),
     path.resolve(root, 'node_modules/@dfosco/storyboard-core/configs/modes.config.json'),
   ]