@dfosco/storyboard 0.7.1 → 0.9.0

package/src/internals/CommandPalette/CommandPalette.jsx

@@ -94,7 +94,7 @@ function ItemIcon({ type, toolIcon, toolMeta }) {
   const entry = toolIcon || icons[type] || icons.fallback || 'feather/hexagon'
   const iconName = typeof entry === 'object' ? entry.name : entry
   const meta = toolMeta || (typeof entry === 'object' ? entry.meta : undefined)
-  return <Icon name={iconName} size={ICON_SIZE} color="var(--fgColor-muted, #656d76)" {...(meta || {})} />
+  return <Icon name={iconName} size={ICON_SIZE} color="var(--color-foreground-muted, #656d76)" {...(meta || {})} />
 }
 
 function AvatarIcon({ username }) {
@@ -433,11 +433,17 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
   if (section.source === 'create') {
     const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
     if (!isLocalDev) return null
+    // Same workshop.features.create<X> flags that control the workspace
+    // Create-Artifact menu. Default true; set to false in
+    // storyboard.config.json to hide that artifact type here too.
+    const features = getConfig('workshop')?.features || {}
+    const isEnabled = (flag) => features[flag] !== false
     const createItems = [
-      { id: 'create:canvas', children: 'Canvas', keywords: ['create', 'canvas', 'new', 'board'], itemType: 'create', onClick: () => onCreateAction?.('Canvas') },
-      { id: 'create:prototype', children: 'Prototype', keywords: ['create', 'prototype', 'new', 'page'], itemType: 'create', onClick: () => onCreateAction?.('Prototype') },
-      { id: 'create:component', children: 'Component', keywords: ['create', 'component', 'new', 'story'], itemType: 'create', onClick: () => onCreateAction?.('Component') },
-    ]
+      { id: 'create:canvas',    children: 'Canvas',    keywords: ['create', 'canvas',    'new', 'board'], itemType: 'create', flag: 'createCanvas',    onClick: () => onCreateAction?.('Canvas') },
+      { id: 'create:prototype', children: 'Prototype', keywords: ['create', 'prototype', 'new', 'page'],  itemType: 'create', flag: 'createPrototype', onClick: () => onCreateAction?.('Prototype') },
+      { id: 'create:component', children: 'Component', keywords: ['create', 'component', 'new', 'story'], itemType: 'create', flag: 'createComponent', onClick: () => onCreateAction?.('Component') },
+    ].filter(it => isEnabled(it.flag))
+    if (createItems.length === 0) return null
     return { group: { heading: section.title, id: `cfg:${section.id}`, items: createItems } }
   }
 
@@ -447,25 +453,31 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
     if (!isLocalDev) return null
     const isCanvasRoute = typeof window !== 'undefined' && window.location.pathname.includes('/canvas/')
     if (!isCanvasRoute) return null
-    // Note: 'story' is intentionally NOT hidden here — it now has a proper
-    // artifact picker dialog (see WIDGET_TYPES_WITH_PICKER below). The
-    // deprecated 'component' widget type is hidden in favor of 'story'.
-    const hiddenTypes = new Set(['link-preview', 'image', 'figma-embed', 'codepen-embed', 'component', 'terminal-read', 'agent'])
-    const items = Object.entries(widgetTypes).filter(([type]) => !hiddenTypes.has(type)).map(([type, def]) => ({
-      id: `create-widget:${type}`,
-      children: def.label,
-      index_tags: [`Add ${def.label}`],
-      keywords: ['add', 'widget', 'create', type, def.label.toLowerCase()],
-      itemType: type,
-      onClick: () => {
-        if (WIDGET_TYPES_WITH_PICKER.has(type)) {
-          // Open the artifact picker dialog instead of creating an empty widget.
-          document.dispatchEvent(new CustomEvent('storyboard:open-widget-artifact-dialog', { detail: { type } }))
-        } else {
-          document.dispatchEvent(new CustomEvent('storyboard:canvas:add-widget', { detail: { type } }))
-        }
-      },
-    }))
+    // 'story' is shown as "Component" — the StoryPicker auto-upgrades
+    // multi-export stories to a component-set widget, so we expose a single
+    // unified "Component" entry instead of separate Story / Component Set items.
+    // The deprecated 'component' widget type and the raw 'component-set' entry
+    // are both hidden in favor of this consolidated flow.
+    const hiddenTypes = new Set(['link-preview', 'image', 'figma-embed', 'codepen-embed', 'component', 'component-set', 'terminal-read', 'agent'])
+    const labelOverrides = { story: 'Component' }
+    const items = Object.entries(widgetTypes).filter(([type]) => !hiddenTypes.has(type)).map(([type, def]) => {
+      const label = labelOverrides[type] || def.label
+      return {
+        id: `create-widget:${type}`,
+        children: label,
+        index_tags: [`Add ${label}`],
+        keywords: ['add', 'widget', 'create', type, label.toLowerCase(), def.label.toLowerCase()],
+        itemType: type === 'story' ? 'component' : type,
+        onClick: () => {
+          if (WIDGET_TYPES_WITH_PICKER.has(type)) {
+            // Open the artifact picker dialog instead of creating an empty widget.
+            document.dispatchEvent(new CustomEvent('storyboard:open-widget-artifact-dialog', { detail: { type } }))
+          } else {
+            document.dispatchEvent(new CustomEvent('storyboard:canvas:add-widget', { detail: { type } }))
+          }
+        },
+      }
+    })
 
     // Build agent submenu from canvas.agents config
     const subPages = []
@@ -1289,8 +1301,8 @@ export default function StoryboardCommandPalette({ basePath }) {
     Object.assign(el.style, {
       position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
       zIndex: '10000', padding: '0.625rem 1rem', borderRadius: '0.5rem',
-      background: 'var(--bgColor-emphasis, #1f2328)', color: 'var(--fgColor-onEmphasis, #fff)',
-      fontSize: '0.8125rem', fontFamily: 'var(--fontStack-sansSerif, system-ui)',
+      background: 'var(--color-background-emphasis, #1f2328)', color: 'var(--color-foreground-on-emphasis, #fff)',
+      fontSize: '0.8125rem', fontFamily: 'var(--font-sans, system-ui)',
       opacity: '0', transition: 'opacity 0.15s ease',
       pointerEvents: 'none',
     })
@@ -1367,7 +1379,7 @@ export default function StoryboardCommandPalette({ basePath }) {
                     value={itemValue(item)}
                     onSelect={item.onSelect}
                   >
-                    {item.icon && <Icon name={item.icon} size={ICON_SIZE} color="var(--fgColor-muted, #656d76)" />}
+                    {item.icon && <Icon name={item.icon} size={ICON_SIZE} color="var(--color-foreground-muted, #656d76)" />}
                     <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
                       <span>{item.label}</span>
                       {(item.isActiveToggle || item.isActiveTheme) && <span>✓</span>}
@@ -1446,7 +1458,7 @@ export default function StoryboardCommandPalette({ basePath }) {
                     <AvatarIcon username={group.author} />
                     <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
                       <span>{item.label}</span>
-                      <span style={{ fontSize: '12px', color: 'var(--fgColor-muted, #999)' }}>{item.type}</span>
+                      <span style={{ fontSize: '12px', color: 'var(--color-foreground-muted, #999)' }}>{item.type}</span>
                     </span>
                   </Command.Item>
                 ))}
@@ -1473,7 +1485,7 @@ export default function StoryboardCommandPalette({ basePath }) {
                     setActivePage('root')
                   }}
                 >
-                  {opt.icon && <Icon name={opt.icon} size={ICON_SIZE} color="var(--fgColor-muted, #656d76)" />}
+                  {opt.icon && <Icon name={opt.icon} size={ICON_SIZE} color="var(--color-foreground-muted, #656d76)" />}
                   {opt.toolHandler === 'core:theme' && opt.value === currentTheme
                     ? <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}><span>{opt.label}</span><span>✓</span></span>
                     : opt.label}

package/src/internals/CommandPalette/CreateArtifactForm.jsx

@@ -0,0 +1,150 @@
+/**
+ * CreateArtifactForm — shared form body for the artifact create UI.
+ *
+ * Wraps `ArtifactForm` with the data-loading, gh-author prefill, payload
+ * shaping, and post-submit navigation logic. Used by both the in-app
+ * modal (`CreateDialog`) and the standalone full-page route
+ * (`CreatePage`). Picker mode (no `type`) is supported — ArtifactForm
+ * renders its TypeSelector and the submit handler resolves the schema
+ * from the form callback.
+ */
+import { useState, useEffect, useMemo } from 'react'
+import ArtifactForm, { ARTIFACT_SCHEMAS, isFieldVisible } from '../ArtifactForm/ArtifactForm.jsx'
+import { resolveSchemaKey, withBase } from './createHelpers.js'
+
+export default function CreateArtifactForm({
+  type,
+  basePath,
+  onClose,
+  hideHeader = true,
+}) {
+  const schemaKey = resolveSchemaKey(type)
+  const isPicker = schemaKey === null
+  const fixedSchema = schemaKey ? ARTIFACT_SCHEMAS[schemaKey] : null
+
+  const [prototypes, setPrototypes] = useState([])
+  const [partials, setPartials] = useState([])
+  const [ghLogin, setGhLogin] = useState(null)
+
+  // In picker mode we don't yet know the schema, so load everything that
+  // any schema might need. For a fixed type we only load what's required.
+  const needsPrototypes = useMemo(() => {
+    if (isPicker) return true
+    return fixedSchema?.fields.some(f => f.dynamic === 'prototypes') || false
+  }, [isPicker, fixedSchema])
+
+  const needsPartials = useMemo(() => {
+    if (isPicker) return true
+    return fixedSchema?.fields.some(f => f.dynamic === 'partials') || false
+  }, [isPicker, fixedSchema])
+
+  const needsAuthor = useMemo(() => {
+    if (isPicker) return true
+    return fixedSchema?.fields.some(f => f.name === 'author') || false
+  }, [isPicker, fixedSchema])
+
+  useEffect(() => {
+    if (!needsPrototypes) return
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    fetch(`${apiBase}/_storyboard/artifact/list?type=prototype`)
+      .then(r => (r.ok ? r.json() : null))
+      .then(data => { if (data?.items) setPrototypes(data.items.map(p => p.name)) })
+      .catch(() => {})
+  }, [needsPrototypes, basePath])
+
+  useEffect(() => {
+    if (!needsPartials) return
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    fetch(`${apiBase}/_storyboard/workshop/prototypes`)
+      .then(r => (r.ok ? r.json() : null))
+      .then(data => {
+        if (!data?.partials) return
+        // Group by scope+kind: "Templates" / "Recipes" for global, "<proto> / Templates" etc. for local.
+        const opts = data.partials.map(p => {
+          const kindLabel = p.kind === 'recipe' ? 'Recipes' : 'Templates'
+          const group = p.scope === 'global'
+            ? kindLabel
+            : `${p.folder ? p.folder + ' / ' : ''}${p.prototype || 'local'} / ${kindLabel}`
+          return { value: p.id, label: p.name, group }
+        })
+        setPartials(opts)
+      })
+      .catch(() => {})
+  }, [needsPartials, basePath])
+
+  useEffect(() => {
+    if (!needsAuthor) return
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    fetch(`${apiBase}/_storyboard/git-user`)
+      .then(r => (r.ok ? r.json() : null))
+      .then(data => { if (data?.login) setGhLogin(data.login) })
+      .catch(() => {})
+  }, [needsAuthor, basePath])
+
+  // Late-arriving gh login is merged into empty fields inside ArtifactForm.
+  const initialValues = useMemo(() => {
+    if (!needsAuthor || !ghLogin) return undefined
+    return { author: ghLogin }
+  }, [needsAuthor, ghLogin])
+
+  if (!isPicker && !fixedSchema) return null
+
+  async function handleSubmit({ type: t, values }) {
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    const endpoint = `${apiBase}/_storyboard/artifact/`
+
+    // In picker mode the schema is decided by the form; resolve it now.
+    const submittedSchema = ARTIFACT_SCHEMAS[t] || fixedSchema
+    if (!submittedSchema) throw new Error(`Unknown artifact type: ${t}`)
+
+    const payload = { type: t }
+    for (const field of submittedSchema.fields) {
+      // Skip UI-only fields (e.g. the `external` toggle on prototype —
+      // the server infers external mode from the presence of `url`).
+      if (field.uiOnly) continue
+      // Skip fields hidden by `showIf` so we never send a stale value
+      // for a field the user can't see (e.g. `url` when external is off).
+      if (!isFieldVisible(field, values)) continue
+      const val = values[field.name]
+      if (field.type === 'checkbox') {
+        if (val) payload[field.name] = true
+      } else if (typeof val === 'string') {
+        const trimmed = val.trim()
+        if (trimmed) payload[field.name] = trimmed
+      } else if (val != null) {
+        payload[field.name] = val
+      }
+    }
+
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+    if (!res.ok) {
+      const data = await res.json().catch(() => null)
+      throw new Error(data?.error || `Request failed (${res.status})`)
+    }
+    const data = await res.json().catch(() => ({}))
+    // Navigate only if the server gave us an explicit route. Types without
+    // a route (object/record/component) just close the form.
+    if (data.route) {
+      window.location.href = withBase(basePath, data.route)
+    } else {
+      onClose?.()
+    }
+  }
+
+  return (
+    <ArtifactForm
+      type={isPicker ? undefined : schemaKey}
+      onSubmit={handleSubmit}
+      onCancel={onClose}
+      dynamicOptions={{ prototypes, partials }}
+      initialValues={initialValues}
+      hideHeader={hideHeader}
+    />
+  )
+}
+
+export { ARTIFACT_SCHEMAS }

package/src/internals/CommandPalette/CreateDialog.jsx

@@ -1,125 +1,35 @@
 /**
- * CreateDialog — Primer Dialog wrapper around the unified ArtifactForm.
+ * CreateDialog — Primer Dialog wrapper around CreateArtifactForm.
  *
- * The form, fields, and validation are entirely schema-driven via
- * ARTIFACT_SCHEMAS. This component supplies modal chrome (Primer Dialog),
- * fetches dynamic select options (e.g. prototype list), POSTs to the
- * artifact API, and navigates to the resulting route on success.
+ * The form, fields, validation, data-loading, and submission live in
+ * `CreateArtifactForm`. This component just supplies the modal chrome.
  */
-import { useState, useEffect, useMemo } from 'react'
-import { Dialog } from '@primer/react/experimental'
-import ArtifactForm, { ARTIFACT_SCHEMAS } from '../ArtifactForm/ArtifactForm.jsx'
-
-// Map UI command-palette type ids (PascalCase) to schema keys (lowercase)
-const TYPE_KEY_MAP = {
-  Prototype: 'prototype', Canvas: 'canvas', Component: 'component',
-  Flow: 'flow', Object: 'object', Record: 'record', Page: 'page',
-}
-
-function withBase(base, route) {
-  const b = (base || '/').replace(/\/+$/, '')
-  const r = route?.startsWith('/') ? route : `/${route || ''}`
-  return b === '' || b === '/' ? r : `${b}${r}`
-}
+import Dialog from '../Dialog.jsx'
+import CreateArtifactForm, { ARTIFACT_SCHEMAS } from './CreateArtifactForm.jsx'
+import { resolveSchemaKey, TYPE_KEY_MAP } from './createHelpers.js'
 
 export default function CreateDialog({ type, basePath, onClose }) {
-  const schemaKey = type ? (TYPE_KEY_MAP[type] || String(type).toLowerCase()) : null
-  const schema = schemaKey ? ARTIFACT_SCHEMAS[schemaKey] : null
-  const [prototypes, setPrototypes] = useState([])
-  const [partials, setPartials] = useState([])
-
-  const needsPrototypes = useMemo(() => {
-    if (!schema) return false
-    return schema.fields.some(f => f.dynamic === 'prototypes')
-  }, [schema])
+  // `type === null`/`undefined` means "no dialog requested" — render nothing.
+  // Explicit `'Any'` (or empty string) means picker mode.
+  if (type == null) return null
 
-  const needsPartials = useMemo(() => {
-    if (!schema) return false
-    return schema.fields.some(f => f.dynamic === 'partials')
-  }, [schema])
-
-  useEffect(() => {
-    if (!needsPrototypes || !schemaKey) return
-    const apiBase = (basePath || '/').replace(/\/+$/, '')
-    fetch(`${apiBase}/_storyboard/artifact/list?type=prototype`)
-      .then(r => (r.ok ? r.json() : null))
-      .then(data => { if (data?.items) setPrototypes(data.items.map(p => p.name)) })
-      .catch(() => {})
-  }, [needsPrototypes, schemaKey, basePath])
-
-  useEffect(() => {
-    if (!needsPartials || !schemaKey) return
-    const apiBase = (basePath || '/').replace(/\/+$/, '')
-    fetch(`${apiBase}/_storyboard/workshop/prototypes`)
-      .then(r => (r.ok ? r.json() : null))
-      .then(data => {
-        if (!data?.partials) return
-        // Map workshop format → grouped select options.
-        // Group by scope+kind: "Templates" / "Recipes" for global, "<proto> / Templates" etc. for local.
-        const opts = data.partials.map(p => {
-          const kindLabel = p.kind === 'recipe' ? 'Recipes' : 'Templates'
-          const group = p.scope === 'global'
-            ? kindLabel
-            : `${p.folder ? p.folder + ' / ' : ''}${p.prototype || 'local'} / ${kindLabel}`
-          return { value: p.id, label: p.name, group }
-        })
-        setPartials(opts)
-      })
-      .catch(() => {})
-  }, [needsPartials, schemaKey, basePath])
-
-  if (!schemaKey || !schema) return null
-
-  async function handleSubmit({ type: t, values }) {
-    const apiBase = (basePath || '/').replace(/\/+$/, '')
-    const endpoint = `${apiBase}/_storyboard/artifact/`
-
-    // Build payload — include checkboxes that are true, trimmed strings, raw selects
-    const payload = { type: t }
-    for (const field of schema.fields) {
-      const val = values[field.name]
-      if (field.type === 'checkbox') {
-        if (val) payload[field.name] = true
-      } else if (typeof val === 'string') {
-        const trimmed = val.trim()
-        if (trimmed) payload[field.name] = trimmed
-      } else if (val != null) {
-        payload[field.name] = val
-      }
-    }
+  const schemaKey = resolveSchemaKey(type)
+  const isPicker = schemaKey === null
+  const schema = schemaKey ? ARTIFACT_SCHEMAS[schemaKey] : null
 
-    const res = await fetch(endpoint, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload),
-    })
-    if (!res.ok) {
-      const data = await res.json().catch(() => null)
-      throw new Error(data?.error || `Request failed (${res.status})`)
-    }
-    const data = await res.json().catch(() => ({}))
-    // Only navigate when the server gives us an explicit route. Falling back
-    // to data.path here is wrong — that's a filesystem path (e.g. "src/canvas"),
-    // not a URL route. Types without a route (object/record/component) just close.
-    if (data.route) {
-      window.location.href = withBase(basePath, data.route)
-    } else {
-      onClose?.()
-    }
-  }
+  if (!isPicker && !schema) return null
 
   return (
     <Dialog
-      title={`New ${schema.label}`}
-      subtitle={schema.description}
+      title={isPicker ? 'New artifact' : `New ${schema.label}`}
+      subtitle={isPicker ? 'Pick an artifact type to create.' : schema.description}
       onClose={onClose}
       width="large"
     >
-      <ArtifactForm
-        type={schemaKey}
-        onSubmit={handleSubmit}
-        onCancel={onClose}
-        dynamicOptions={{ prototypes, partials }}
+      <CreateArtifactForm
+        type={type}
+        basePath={basePath}
+        onClose={onClose}
         hideHeader
       />
     </Dialog>
@@ -127,4 +37,4 @@ export default function CreateDialog({ type, basePath, onClose }) {
 }
 
 // Re-export for canvas/workspace integrations
-export { ARTIFACT_SCHEMAS as CREATE_SCHEMAS }
+export { ARTIFACT_SCHEMAS as CREATE_SCHEMAS, TYPE_KEY_MAP }

package/src/internals/CommandPalette/WidgetArtifactDialog.css

@@ -12,24 +12,24 @@
   width: 100%;
   padding: 8px 10px;
   font: inherit;
-  color: var(--fgColor-default);
-  background: var(--bgColor-inset, var(--color-canvas-inset));
-  border: 1px solid var(--borderColor-default, var(--color-border-default));
+  color: var(--color-foreground);
+  background: var(--color-background-inset, var(--color-background-inset));
+  border: 1px solid var(--color-border, var(--color-border));
   border-radius: 6px;
   outline: none;
 }
 
 .sb-wad-filter:focus,
 .sb-wad-custom-input:focus {
-  border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
-  box-shadow: 0 0 0 3px var(--bgColor-accent-muted, rgba(9, 105, 218, 0.2));
+  border-color: var(--color-border-accent-emphasis, var(--color-background-accent-emphasis));
+  box-shadow: 0 0 0 3px var(--color-background-accent-muted, rgba(9, 105, 218, 0.2));
 }
 
 .sb-wad-list {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
-  border: 1px solid var(--borderColor-muted, var(--color-border-muted));
+  border: 1px solid var(--color-border-muted, var(--color-border-muted));
   border-radius: 6px;
   padding: 4px;
 }
@@ -44,7 +44,7 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
 }
 
 .sb-wad-item {
@@ -56,7 +56,7 @@
   padding: 8px 10px;
   text-align: left;
   font: inherit;
-  color: var(--fgColor-default);
+  color: var(--color-foreground);
   background: transparent;
   border: 0;
   border-radius: 4px;
@@ -69,7 +69,7 @@
 
 .sb-wad-item:hover,
 .sb-wad-item:focus-visible {
-  background: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
+  background: var(--color-background-neutral-muted, var(--color-background-neutral-muted));
   outline: none;
 }
 
@@ -84,13 +84,13 @@
 .sb-wad-item-hint {
   flex: 0 0 auto;
   font-size: 12px;
-  color: var(--fgColor-muted);
-  font-family: var(--fontStack-monospace, ui-monospace, monospace);
+  color: var(--color-foreground-muted);
+  font-family: var(--font-mono, ui-monospace, monospace);
 }
 
 .sb-wad-empty {
   padding: 16px;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
   text-align: center;
   font-size: 13px;
 }
@@ -99,7 +99,7 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  border-top: 1px solid var(--borderColor-muted, var(--color-border-muted));
+  border-top: 1px solid var(--color-border-muted, var(--color-border-muted));
   padding-top: 12px;
 }
 
@@ -108,7 +108,7 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
 }
 
 .sb-wad-custom-row {
@@ -119,8 +119,8 @@
 .sb-wad-submit {
   padding: 8px 14px;
   font: inherit;
-  color: var(--fgColor-onEmphasis, white);
-  background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+  color: var(--color-foreground-on-emphasis, white);
+  background: var(--color-background-accent-emphasis, var(--color-background-accent-emphasis));
   border: 0;
   border-radius: 6px;
   cursor: pointer;

package/src/internals/CommandPalette/WidgetArtifactDialog.jsx

@@ -8,7 +8,7 @@
  * `storyboard:canvas:add-widget` with full props.
  */
 import { useState, useMemo, useEffect, useRef } from 'react'
-import { Dialog } from '@primer/react/experimental'
+import Dialog from '../Dialog.jsx'
 import { buildPrototypeIndex, listStories, getStoryData } from '../../core/index.js'
 import './WidgetArtifactDialog.css'
 

package/src/internals/CommandPalette/command-palette.css

@@ -25,9 +25,9 @@
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  background: var(--bgColor-default, #ffffff);
-  color: var(--fgColor-default, #1f2328);
-  border: 1px solid var(--borderColor-muted, #d1d9e0);
+  background: var(--color-background, #ffffff);
+  color: var(--color-foreground, #1f2328);
+  border: 1px solid var(--color-border-muted, #d1d9e0);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   outline: none;
   animation: cmdk-dialog-in 120ms ease-out;
@@ -49,15 +49,15 @@
   padding: 14px 16px;
   font-size: 15px;
   border: none;
-  border-bottom: 1px solid var(--borderColor-muted, #d1d9e0);
+  border-bottom: 1px solid var(--color-border-muted, #d1d9e0);
   outline: none;
   background: transparent;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   font-family: inherit;
 }
 
 [cmdk-input]::placeholder {
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
 }
 
 /* ─── List ─── */
@@ -73,7 +73,7 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   padding: 8px 8px 4px;
   user-select: none;
 }
@@ -89,16 +89,16 @@
   /* font-weight: 500; */
   cursor: pointer;
   user-select: none;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   transition: background 0.1s;
 }
 
 [cmdk-item][data-selected="true"] {
-  background: var(--bgColor-neutral-muted, rgba(175, 184, 193, 0.2));
+  background: var(--color-background-neutral-muted, rgba(175, 184, 193, 0.2));
 }
 
 [cmdk-item]:active {
-  background: var(--bgColor-neutral-muted, rgba(175, 184, 193, 0.3));
+  background: var(--color-background-neutral-muted, rgba(175, 184, 193, 0.3));
 }
 
 /* ─── Item tag (background badge) ─── */
@@ -106,8 +106,8 @@
   font-size: 11px;
   padding: 2px 6px;
   border-radius: 999px;
-  background: var(--bgColor-neutral-muted, rgba(175, 184, 193, 0.2));
-  color: var(--fgColor-muted, #656d76);
+  background: var(--color-background-neutral-muted, rgba(175, 184, 193, 0.2));
+  color: var(--color-foreground-muted, #656d76);
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -116,14 +116,14 @@
 [cmdk-separator] {
   height: 1px;
   margin: 4px 14px;
-  background: var(--borderColor-muted, #d1d9e0);
+  background: var(--color-border-muted, #d1d9e0);
 }
 
 /* ─── Empty state ─── */
 [cmdk-empty] {
   padding: 2rem;
   text-align: center;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   font-size: 14px;
 }
 

package/src/internals/CommandPalette/createHelpers.js

@@ -0,0 +1,30 @@
+/**
+ * Map UI command-palette type ids (PascalCase) to schema keys (lowercase),
+ * and normalise consumer-supplied `type` values to a schema key.
+ *
+ * Kept in its own file so React Fast Refresh stays happy in
+ * `CreateArtifactForm.jsx` and `CreateDialog.jsx` (component-only modules).
+ */
+export const TYPE_KEY_MAP = {
+  Prototype: 'prototype', Canvas: 'canvas', Component: 'component',
+  Flow: 'flow', Object: 'object', Record: 'record', Page: 'page',
+}
+
+/**
+ * Returns the schema key (lowercase) for a consumer-supplied type, or
+ * `null` when no fixed type was requested (picker mode).
+ */
+export function resolveSchemaKey(type) {
+  if (!type || type === 'Any' || String(type).toLowerCase() === 'any') return null
+  return TYPE_KEY_MAP[type] || String(type).toLowerCase()
+}
+
+/**
+ * Prepend `base` (e.g. `/storyboard/`) to an artifact route. Used by the
+ * post-create navigation in `CreateArtifactForm`.
+ */
+export function withBase(base, route) {
+  const b = (base || '/').replace(/\/+$/, '')
+  const r = route?.startsWith('/') ? route : `/${route || ''}`
+  return b === '' || b === '/' ? r : `${b}${r}`
+}