@dfosco/storyboard-react 4.1.0 → 4.2.0-beta.1

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.1.0",
+  "version": "4.2.0-beta.1",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.1.0",
-    "@dfosco/tiny-canvas": "4.1.0",
+    "@dfosco/storyboard-core": "4.2.0-beta.1",
+    "@dfosco/tiny-canvas": "4.2.0-beta.1",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",

package/src/CommandPalette/CommandPalette.jsx

@@ -20,6 +20,7 @@ import {
   getTheme,
   isExcludedByRoute,
 } from '@dfosco/storyboard-core'
+import { widgetTypes } from '../canvas/widgets/widgetConfig.js'
 import CreateDialog from './CreateDialog.jsx'
 import BranchBar from '../BranchBar/BranchBar.jsx'
 import AuthModal from '../AuthModal/AuthModal.jsx'
@@ -287,15 +288,78 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
     const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
     if (!isLocalDev) return null
     const createItems = [
-      { id: 'create:canvas', children: 'New Canvas', keywords: ['create', 'canvas', 'new', 'board'], showType: false, onClick: () => onCreateAction?.('Canvas') },
-      { id: 'create:prototype', children: 'New Prototype', keywords: ['create', 'prototype', 'new', 'page'], showType: false, onClick: () => onCreateAction?.('Prototype') },
-      { id: 'create:component', children: 'New Component', keywords: ['create', 'component', 'new', 'story'], showType: false, onClick: () => onCreateAction?.('Component') },
-      { id: 'create:flow', children: 'New Prototype Flow', keywords: ['create', 'flow', 'new', 'data'], showType: false, onClick: () => onCreateAction?.('Flow') },
-      { id: 'create:page', children: 'New Prototype Page', keywords: ['create', 'page', 'new'], showType: false, onClick: () => onCreateAction?.('Page') },
+      { id: 'create:canvas', children: 'Canvas', keywords: ['create', 'canvas', 'new', 'board'], showType: false, onClick: () => onCreateAction?.('Canvas') },
+      { id: 'create:prototype', children: 'Prototype', keywords: ['create', 'prototype', 'new', 'page'], showType: false, onClick: () => onCreateAction?.('Prototype') },
+      { id: 'create:component', children: 'Component', keywords: ['create', 'component', 'new', 'story'], showType: false, onClick: () => onCreateAction?.('Component') },
+      { id: 'create:flow', children: 'Prototype Flow', keywords: ['create', 'flow', 'new', 'data'], showType: false, onClick: () => onCreateAction?.('Flow') },
+      { id: 'create:page', children: 'Prototype Page', keywords: ['create', 'page', 'new'], showType: false, onClick: () => onCreateAction?.('Page') },
     ]
     return { group: { heading: section.title, id: `cfg:${section.id}`, items: createItems } }
   }
 
+  // --- Create widget source (all canvas widget types) ---
+  if (section.source === 'create-widget') {
+    const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
+    if (!isLocalDev) return null
+    const isCanvasRoute = typeof window !== 'undefined' && window.location.pathname.includes('/canvas/')
+    if (!isCanvasRoute) return null
+    const items = Object.entries(widgetTypes).map(([type, def]) => ({
+      id: `create-widget:${type}`,
+      children: def.label,
+      keywords: ['add', 'widget', 'create', type, def.label.toLowerCase()],
+      showType: false,
+      onClick: () => {
+        document.dispatchEvent(new CustomEvent('storyboard:canvas:add-widget', { detail: { type } }))
+      },
+    }))
+    return { group: { heading: section.title, id: `cfg:${section.id}`, items } }
+  }
+
+  // --- Starred source (reads from viewfinder localStorage) ---
+  if (section.source === 'starred') {
+    const STARRED_KEY = 'sb-viewfinder-starred'
+    let starredIds = []
+    try { starredIds = JSON.parse(localStorage.getItem(STARRED_KEY)) || [] } catch {}
+    if (starredIds.length === 0) return null
+
+    const index = buildPrototypeIndex()
+    // Build a lookup map of all artifacts
+    const artifactMap = new Map()
+    const allProtos = [...index.prototypes]
+    for (const folder of index.folders) {
+      allProtos.push(...folder.prototypes)
+      if (folder.canvases) folder.canvases.forEach(c => artifactMap.set(`canvas:${c.dirName}`, { ...c, _type: 'canvas' }))
+    }
+    for (const c of index.canvases) artifactMap.set(`canvas:${c.dirName}`, { ...c, _type: 'canvas' })
+    for (const p of allProtos) artifactMap.set(`proto:${p.dirName}`, { ...p, _type: 'prototype' })
+
+    const items = []
+    for (const id of starredIds) {
+      const artifact = artifactMap.get(id)
+      if (!artifact) continue
+      const route = artifact._type === 'canvas'
+        ? `${prefix}/canvas/${artifact.dirName}`
+        : artifact.isExternal
+          ? artifact.externalUrl
+          : `${prefix}/${artifact.dirName}`
+      items.push({
+        id: `starred:${id}`,
+        children: artifact.name,
+        keywords: ['starred', 'star', artifact.name.toLowerCase()],
+        showType: false,
+        onClick: () => {
+          if (artifact.isExternal) {
+            window.open(route, '_blank')
+          } else {
+            window.location.href = route
+          }
+        },
+      })
+    }
+    if (items.length === 0) return null
+    return { group: { heading: section.title, id: `cfg:${section.id}`, items } }
+  }
+
   // --- Commands source (all registered toolbar actions) ---
   if (section.source === 'commands') {
     const mode = getCurrentMode() || 'default'

package/src/CommandPalette/command-palette.css

@@ -109,3 +109,8 @@ html[data-color-mode="dark"] .command-palette .border-b {
 .command-palette .command-palette-list-item .text-gray-500.text-sm {
   display: none !important;
 }
+
+/* Medium weight for item text */
+.command-palette .command-palette-list-item {
+  font-weight: 500 !important;
+}