@dfosco/storyboard 0.6.8 → 0.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard",
-  "version": "0.6.8",
+  "version": "0.6.10",
   "type": "module",
   "license": "MIT",
   "description": "Storyboard prototyping framework — core engine, React integration, and canvas",

package/src/internals/ArtifactForm/ArtifactForm.jsx

@@ -11,11 +11,27 @@
  *   Schemas may declare `field.dynamic = 'prototypes'`. Pass
  *   `dynamicOptions={{ prototypes: ['my-app', ...] }}` to populate them.
  */
-import { useState, useMemo, useEffect } from 'react'
+import { useState, useMemo, useEffect, useRef } from 'react'
 import { FormControl, Button, TextInput, Textarea, Flash, Text, ActionMenu, ActionList } from '@primer/react'
 import { ARTIFACT_SCHEMAS, validateArtifact } from './artifactSchemas.js'
 import styles from './ArtifactForm.module.css'
 
+/**
+ * Slugify a freeform string into the kebab-case form the `name` field expects.
+ * Mirrors the NAME_PATTERN in artifactSchemas.js — lowercase letters, digits,
+ * and hyphens. Used to auto-derive `name` from `title` while the user types,
+ * until they manually edit `name` themselves.
+ */
+function slugifyName(value) {
+  return String(value || '')
+    .toLowerCase()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 64)
+}
+
 function TypeSelector({ selected, onChange }) {
   const types = Object.entries(ARTIFACT_SCHEMAS)
   const current = ARTIFACT_SCHEMAS[selected]
@@ -150,18 +166,66 @@ export default function ArtifactForm({
   const [errors, setErrors] = useState({})
   const [submitting, setSubmitting] = useState(false)
 
+  // Tracks whether the `name` field should keep auto-following `title`.
+  // Flips to false the first time the user edits `name` directly, so we don't
+  // clobber their input. Reset on type change or unmount.
+  const nameAutoFollowRef = useRef(true)
+
   // Reset form when fixed type changes (parent-controlled)
   useEffect(() => {
     if (!fixedType) return
     setValues({ ...initialValues(ARTIFACT_SCHEMAS[fixedType]), ...(initialOverride || {}) })
     setErrors({})
     setSubmitting(false)
+    nameAutoFollowRef.current = true
   }, [fixedType])
 
+  // Merge late-arriving initial overrides (e.g. a gh-login fetch that resolves
+  // after mount) into empty fields. Only fills fields the user hasn't typed
+  // into yet, so we never overwrite their input. Stringify the override so the
+  // dep check fires on content changes rather than parent re-render identity.
+  const overrideKey = useMemo(() => JSON.stringify(initialOverride || {}), [initialOverride])
+  useEffect(() => {
+    if (!initialOverride || !schema) return
+    setValues(prev => {
+      let next = prev
+      for (const [k, v] of Object.entries(initialOverride)) {
+        if (v == null || v === '') continue
+        const fieldExists = schema.fields.some(f => f.name === k)
+        const isEmpty = prev[k] === '' || prev[k] == null
+        if (fieldExists && isEmpty) {
+          if (next === prev) next = { ...prev }
+          next[k] = v
+        }
+      }
+      return next
+    })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [overrideKey, schema])
+
+  // Derive `name` (kebab-case) from `title` as the user types, until they
+  // manually edit `name`. Only applies to schemas that expose both fields
+  // (prototype, canvas, flow). Component uses PascalCase and has no title,
+  // so it's naturally excluded.
+  useEffect(() => {
+    if (!schema || !nameAutoFollowRef.current) return
+    const hasName = schema.fields.some(f => f.name === 'name' && f.type === 'text')
+    const hasTitle = schema.fields.some(f => f.name === 'title')
+    if (!hasName || !hasTitle) return
+    const derived = slugifyName(values.title)
+    if (derived === (values.name || '')) return
+    setValues(prev => ({ ...prev, name: derived }))
+    if (errors.name) {
+      setErrors(prev => { const next = { ...prev }; delete next.name; return next })
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [values.title, schema])
+
   function handleTypeChange(newType) {
     setSelectedType(newType)
     setValues(initialValues(ARTIFACT_SCHEMAS[newType]))
     setErrors({})
+    nameAutoFollowRef.current = true
   }
 
   const [showAdvanced, setShowAdvanced] = useState(false)
@@ -205,6 +269,9 @@ export default function ArtifactForm({
   }
 
   function handleChange(fieldName, value) {
+    if (fieldName === 'name') {
+      nameAutoFollowRef.current = false
+    }
     setValues(prev => ({ ...prev, [fieldName]: value }))
     if (errors[fieldName]) {
       setErrors(prev => { const next = { ...prev }; delete next[fieldName]; return next })

package/src/internals/CommandPalette/CreateDialog.jsx

@@ -27,6 +27,7 @@ export default function CreateDialog({ type, basePath, onClose }) {
   const schema = schemaKey ? ARTIFACT_SCHEMAS[schemaKey] : null
   const [prototypes, setPrototypes] = useState([])
   const [partials, setPartials] = useState([])
+  const [ghLogin, setGhLogin] = useState(null)
 
   const needsPrototypes = useMemo(() => {
     if (!schema) return false
@@ -38,6 +39,11 @@ export default function CreateDialog({ type, basePath, onClose }) {
     return schema.fields.some(f => f.dynamic === 'partials')
   }, [schema])
 
+  const needsAuthor = useMemo(() => {
+    if (!schema) return false
+    return schema.fields.some(f => f.name === 'author')
+  }, [schema])
+
   useEffect(() => {
     if (!needsPrototypes || !schemaKey) return
     const apiBase = (basePath || '/').replace(/\/+$/, '')
@@ -68,6 +74,25 @@ export default function CreateDialog({ type, basePath, onClose }) {
       .catch(() => {})
   }, [needsPartials, schemaKey, basePath])
 
+  // Fetch the gh CLI login once per dialog open and prefill it as the default
+  // author when the schema supports it (currently only `prototype`).
+  useEffect(() => {
+    if (!needsAuthor || !schemaKey) 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, schemaKey, basePath])
+
+  // Build the initial values object for the form. Late-arriving values (like
+  // the gh login fetch above) get merged into empty fields inside ArtifactForm
+  // — see the override-merge effect there.
+  const initialValues = useMemo(() => {
+    if (!needsAuthor || !ghLogin) return undefined
+    return { author: ghLogin }
+  }, [needsAuthor, ghLogin])
+
   if (!schemaKey || !schema) return null
 
   async function handleSubmit({ type: t, values }) {
@@ -120,6 +145,7 @@ export default function CreateDialog({ type, basePath, onClose }) {
         onSubmit={handleSubmit}
         onCancel={onClose}
         dynamicOptions={{ prototypes, partials }}
+        initialValues={initialValues}
         hideHeader
       />
     </Dialog>

package/src/internals/canvas/widgets/PrototypeEmbed.jsx

@@ -54,22 +54,24 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
 
   const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
   const baseSegment = basePath.replace(/^\//, '')
-  // Iframe URL is mode-dependent:
-  //   - DEV: route through the isolated prototypes.html entry so a
-  //     broken prototype's transform/HMR errors stay inside the iframe
-  //     and never poison the canvas (see .agents/plans/vite-isolation.md).
-  //     prototypes.html uses createHashRouter, so /MyProto/SignupForm
-  //     becomes prototypes.html?proto=MyProto#/MyProto/SignupForm.
-  //   - PROD: load the prototype path directly through the canvas SPA's
-  //     BrowserRouter (e.g. /MyProto/SignupForm). prototypes.html is a
-  //     build-time isolation artifact — it must not leak into deployed
-  //     URLs (breaks deep links, exposes build internals). basePath
-  //     already carries the /branch--xxx/ prefix on branch deploys, so
-  //     this works for main and branch deploys alike.
-  // External http(s) URLs are left alone.
-  const rawSrc = useMemo(() => {
-    if (!src) return ''
-    if (/^https?:\/\//.test(src)) return src
+  // Two URLs are derived from `src`:
+  //   - rawSrc — the iframe URL. In DEV this routes through the isolated
+  //     prototypes.html entry so a broken prototype's transform/HMR errors
+  //     stay inside the iframe (see .agents/plans/vite-isolation.md):
+  //     /MyProto/SignupForm becomes prototypes.html?proto=MyProto#/MyProto/SignupForm.
+  //     In PROD it loads the prototype path directly through the canvas SPA
+  //     (prototypes.html is a build-time isolation artifact that must not
+  //     leak into deployed URLs).
+  //   - externalSrc — the URL used by "Open in new tab". Always direct
+  //     (`${basePath}/<protoPath>`), never prototypes.html, even in dev —
+  //     opening prototypes.html#/... in a fresh tab is a leaky surprise
+  //     for users navigating from the canvas.
+  // External http(s) URLs are left alone in both cases. basePath already
+  // carries the /branch--xxx/ prefix on branch deploys, so both work for
+  // main and branch deploys alike.
+  const { rawSrc, externalSrc } = useMemo(() => {
+    if (!src) return { rawSrc: '', externalSrc: '' }
+    if (/^https?:\/\//.test(src)) return { rawSrc: src, externalSrc: src }
     const cleaned = src.replace(/^\/branch--[^/]+/, '')
     let normalized
     if (baseSegment && cleaned.startsWith(basePath)) normalized = cleaned
@@ -77,7 +79,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     else normalized = `${basePath}${cleaned}`
     // Strip basePath so we can split path/query/hash cleanly and
     // re-anchor for whichever mode we're in. Any pre-existing #hash on
-    // the original src is preserved as the iframe URL's hash.
+    // the original src is preserved.
     const withoutBase = baseSegment && normalized.startsWith(basePath)
       ? normalized.slice(basePath.length) || '/'
       : normalized
@@ -86,18 +88,20 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     const pathAndQuery = hashIdx >= 0 ? withoutBase.slice(0, hashIdx) : withoutBase
     const routePath = pathAndQuery.startsWith('/') ? pathAndQuery : `/${pathAndQuery}`
     const suffix = innerHash ? `#${innerHash}` : ''
+    // Direct path through the canvas SPA — used in prod for the iframe and
+    // always for "Open in new tab".
+    const directUrl = `${basePath}${routePath}${suffix}`
     if (import.meta.env.PROD) {
-      // Direct path through the canvas SPA — no prototypes.html in
-      // production URLs.
-      return `${basePath}${routePath}${suffix}`
+      return { rawSrc: directUrl, externalSrc: directUrl }
     }
-    // Dev: prototypes.html with ?proto= narrowing. The consumer's
+    // Dev iframe: prototypes.html with ?proto= narrowing. The consumer's
     // prototypes-entry.jsx reads ?proto= and calls getRoutesForProto();
     // older scaffolds harmlessly ignore the param and load the full tree.
     const pathOnly = pathAndQuery.split('?')[0]
     const protoName = pathOnly.split('/').filter(Boolean)[0] || ''
     const queryStr = protoName ? `?proto=${encodeURIComponent(protoName)}` : ''
-    return `${basePath}/prototypes.html${queryStr}#${routePath}${suffix}`
+    const iframeUrl = `${basePath}/prototypes.html${queryStr}#${routePath}${suffix}`
+    return { rawSrc: iframeUrl, externalSrc: directUrl }
   }, [src, basePath, baseSegment])
 
   const scale = zoom / 100
@@ -332,7 +336,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
       } else if (actionId === 'split-screen') {
         setExpandMode('split')
       } else if (actionId === 'open-external') {
-        if (rawSrc) window.open(rawSrc, '_blank', 'noopener')
+        if (externalSrc) window.open(externalSrc, '_blank', 'noopener')
       } else if (actionId === 'refresh-frame') {
         const iframe = iframeRef.current
         if (iframe) {
@@ -347,7 +351,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
         onUpdate?.({ zoom: Math.max(25, zoom - step) })
       }
     },
-  }), [rawSrc, zoom, onUpdate])
+  }), [externalSrc, zoom, onUpdate])
 
   function handlePickRoute(route) {
     onUpdate?.({ src: route })