@dfosco/storyboard 0.7.0 → 0.8.1

package/src/internals/CommandPalette/CommandPalette.jsx

@@ -447,25 +447,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 = []

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.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/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}`
+}

package/src/internals/CreatePage/CreatePage.jsx

@@ -0,0 +1,57 @@
+/**
+ * CreatePage — full-page route that renders only the schema-driven
+ * artifact creation form, centered on a clean background. Used by
+ * `storyboard create --ui` to give the user a focused creation surface
+ * without the workspace/viewfinder chrome.
+ *
+ * URL contract:
+ *   /create               → picker (TypeSelector visible)
+ *   /create?type=canvas   → fixed type
+ *
+ * The component renders as a fixed full-viewport overlay so it covers
+ * the chrome (BranchBar, FeatureFlagBanner, CoreUIBar toolbar) that
+ * StoryboardProvider mounts globally — even on this route. No close
+ * button: this surface is opened by the CLI specifically as the create
+ * flow; the user closes it by completing/cancelling the form.
+ *
+ * After successful create:
+ *   - If the artifact has a route (prototype, canvas, page) → navigate to it.
+ *   - Otherwise → navigate back to the workspace (basePath).
+ */
+import { useMemo } from 'react'
+import CreateArtifactForm from '../CommandPalette/CreateArtifactForm.jsx'
+import styles from './CreatePage.module.css'
+
+export default function CreatePage({ basePath }) {
+  const resolvedBase = basePath || (typeof window !== 'undefined' ? '/' : '/')
+
+  // Parse `?type=<type>` once. We don't react to changes — switching the
+  // type is handled in-form via the TypeSelector when in picker mode.
+  const type = useMemo(() => {
+    if (typeof window === 'undefined') return null
+    const params = new URLSearchParams(window.location.search)
+    return params.get('type') || null
+  }, [])
+
+  function handleClose() {
+    // Cancel = navigate back to the workspace. Hard navigation so we
+    // drop the `?type=…` query and any in-flight form state.
+    if (typeof window !== 'undefined') {
+      const target = (resolvedBase || '/').replace(/\/+$/, '/') || '/'
+      window.location.href = target
+    }
+  }
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.card}>
+        <CreateArtifactForm
+          type={type}
+          basePath={resolvedBase}
+          onClose={handleClose}
+          hideHeader={false}
+        />
+      </div>
+    </div>
+  )
+}

package/src/internals/CreatePage/CreatePage.module.css

@@ -0,0 +1,34 @@
+/**
+ * Standalone create-only page styling.
+ *
+ * The page is a fixed full-viewport overlay so it covers the chrome
+ * (BranchBar, FeatureFlagBanner, CoreUIBar toolbar) that
+ * StoryboardProvider mounts globally on every prototype route. A high
+ * z-index keeps it above the toolbar specifically.
+ *
+ * The `.card` wrapper deliberately mirrors `.form` in ArtifactForm.module.css
+ * so the card looks identical to the in-app dialog body.
+ */
+
+.page {
+  position: fixed;
+  inset: 0;
+  /* Sits above the BranchBar (10001), CoreUIBar toolbar (9999), and any
+   * other dev-overlay chrome StoryboardProvider mounts. The /create
+   * route is a focused creation surface — chrome would be a distraction. */
+  z-index: 2147483646;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 2rem 1.5rem 4rem;
+  background: var(--bgColor-muted, #f6f8fa);
+  overflow: auto;
+}
+
+.card {
+  width: 100%;
+  max-width: 480px;
+  /* Center horizontally; vertical alignment is flex-start so tall forms
+   * scroll naturally instead of clipping the top. */
+  margin: auto;
+}

package/src/internals/Dialog.jsx

@@ -0,0 +1,51 @@
+/**
+ * Dialog — internal adapter that exposes a Primer-style
+ * `<Dialog title subtitle onClose width height>` API on top of the
+ * framework-neutral core Dialog primitive (`core/lib/components/ui/dialog`).
+ *
+ * Lets the command palette mount its existing dialogs without pulling in
+ * `@primer/react/experimental`. See plan `.github/plans/style-separation.md`
+ * (Layer A).
+ *
+ * Semantics:
+ *   - The dialog is open while mounted (caller controls visibility by
+ *     conditionally rendering this component, matching Primer's behaviour).
+ *   - Backdrop click + ESC fire `onClose`.
+ */
+import * as Dialog from '../core/lib/components/ui/dialog/index.js'
+import css from '../core/lib/components/ui/dialog/dialog.module.css'
+
+export default function DialogAdapter({
+  title,
+  subtitle,
+  onClose,
+  width = 'medium',
+  height = 'auto',
+  children,
+}) {
+  return (
+    <Dialog.Root open onOpenChange={(open) => { if (!open) onClose?.() }}>
+      <Dialog.Content width={width} height={height} aria-label={typeof title === 'string' ? title : undefined}>
+        {(title || subtitle) && (
+          <div className={css.header}>
+            <div className={css.titleGroup}>
+              {title && <h2 className={css.title}>{title}</h2>}
+              {subtitle && <p className={css.subtitle}>{subtitle}</p>}
+            </div>
+            <button
+              type="button"
+              className={css.closeBtn}
+              onClick={() => onClose?.()}
+              aria-label="Close"
+            >
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z" />
+              </svg>
+            </button>
+          </div>
+        )}
+        <div className={css.body}>{children}</div>
+      </Dialog.Content>
+    </Dialog.Root>
+  )
+}