@dfosco/storyboard 0.12.0 → 0.12.2

package/src/internals/SimpleWorkspace/SimpleWorkspace.module.css

@@ -286,6 +286,60 @@
   margin-top: 32px;
 }
 
+.controls {
+  flex-basis: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 4px;
+}
+
+.controlLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--color-foreground-muted, #555);
+  cursor: pointer;
+  user-select: none;
+}
+
+.controlCheckbox {
+  accent-color: var(--color-foreground, #1a1a1a);
+  cursor: pointer;
+}
+
+.folderCardButton {
+  appearance: none;
+  width: 100%;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background 0.12s;
+}
+
+.folderCardButton:hover {
+  background: var(--color-background, #fff);
+}
+
+.folderChevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-foreground-muted, #656d76);
+  flex-shrink: 0;
+  transition: transform 0.12s ease;
+}
+
+.folderChevronExpanded {
+  composes: folderChevron;
+  transform: rotate(90deg);
+}
+
 .expandBtn {
   appearance: none;
   border: 1px solid var(--color-border, #d0d7de);

package/src/internals/Viewfinder.jsx

@@ -113,6 +113,7 @@ function useGitHubUser() {
 const STARRED_KEY = 'sb-workspace-starred'
 const GROUP_BY_FOLDERS_KEY = 'sb-workspace-group-folders'
 const COLLAPSED_FOLDERS_KEY = 'sb-workspace-collapsed-folders'
+const SHOW_DRAFTS_KEY = 'sb-workspace-show-drafts'
 
 function readJSON(key, fallback) {
   try { return JSON.parse(localStorage.getItem(key)) || fallback }
@@ -795,10 +796,22 @@ function CreateFooter() {
 
 /* ─── Create Form ─── */
 
+function slugify(value) {
+  return String(value || '')
+    .replace(/[^a-zA-Z0-9\s_-]/g, '')
+    .trim()
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase()
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
 function CreateForm({ type, onClose, basePath }) {
   const [name, setName] = useState('')
+  const [nameTouched, setNameTouched] = useState(false)
   const [title, setTitle] = useState('')
   const [description, setDescription] = useState('')
+  const [author, setAuthor] = useState('')
   const [url, setUrl] = useState('')
   const [isExternal, setIsExternal] = useState(false)
   const [prototype, setPrototype] = useState('')
@@ -810,6 +823,22 @@ function CreateForm({ type, onClose, basePath }) {
 
   const needsPrototype = type === 'Flow' || type === 'Page'
   const showPartials = type === 'Prototype' && !isExternal
+  // Types that expose a Title field derive their Name from a slug of the
+  // Title; Component/Page have no Title so Name stays the primary field.
+  const hasTitle = type !== 'Component' && type !== 'Page'
+
+  // Prefill author from the currently authed gh user (login preferred, then
+  // git user.name), mirroring the CLI `create` behavior.
+  useEffect(() => {
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    fetch(`${apiBase}/_storyboard/git-user`)
+      .then(r => r.ok ? r.json() : null)
+      .then(data => {
+        const resolved = data?.login || data?.name
+        if (resolved) setAuthor(resolved)
+      })
+      .catch(() => {})
+  }, [basePath])
 
   useEffect(() => {
     if (!needsPrototype) return
@@ -831,6 +860,14 @@ function CreateForm({ type, onClose, basePath }) {
       .catch(() => {})
   }, [type, basePath])
 
+  // When the user finishes editing Title, auto-fill Name with a slug of the
+  // Title — unless they've already typed their own Name.
+  const handleTitleBlur = () => {
+    if (nameTouched) return
+    const slug = slugify(title)
+    if (slug) setName(slug)
+  }
+
   const handleSubmit = async (e) => {
     e.preventDefault()
     if (!name.trim()) { setError('Name is required'); return }
@@ -849,6 +886,7 @@ function CreateForm({ type, onClose, basePath }) {
     const payload = { type: apiType, name: name.trim() }
     if (title.trim()) payload.title = title.trim()
     if (description.trim()) payload.description = description.trim()
+    if (hasTitle && author.trim()) payload.author = author.trim()
     if (needsPrototype && prototype) payload.prototype = prototype
     if (type === 'Prototype' && isExternal && url.trim()) payload.url = url.trim()
     if (type === 'Prototype' && !isExternal && partial) payload.partial = partial
@@ -875,6 +913,21 @@ function CreateForm({ type, onClose, basePath }) {
 
   const typeLabels = { Canvas: 'Canvas', Prototype: 'Prototype', Component: 'Component', Flow: 'Prototype Flow', Page: 'Prototype Page', Object: 'Object', Record: 'Record' }
 
+  const nameField = (
+    <div className={css.createFormField}>
+      <label className={css.createFormLabel}>Name *</label>
+      <input
+        className={css.createFormInput}
+        value={name}
+        onChange={e => { setName(e.target.value); setNameTouched(true) }}
+        placeholder={type === 'Page' ? 'my-page' : `my-${type.toLowerCase()}`}
+        autoFocus={!needsPrototype && !hasTitle}
+        autoComplete="off"
+        spellCheck={false}
+      />
+    </div>
+  )
+
   return (
     <form onSubmit={handleSubmit}>
       <div className={css.createFormHeader}>
@@ -900,18 +953,7 @@ function CreateForm({ type, onClose, basePath }) {
         </div>
       )}
 
-      <div className={css.createFormField}>
-        <label className={css.createFormLabel}>Name *</label>
-        <input
-          className={css.createFormInput}
-          value={name}
-          onChange={e => setName(e.target.value)}
-          placeholder={type === 'Page' ? 'my-page' : `my-${type.toLowerCase()}`}
-          autoFocus={!needsPrototype}
-        />
-      </div>
-
-      {type !== 'Component' && type !== 'Page' && (
+      {hasTitle ? (
         <>
           <div className={css.createFormField}>
             <label className={css.createFormLabel}>Title</label>
@@ -919,9 +961,12 @@ function CreateForm({ type, onClose, basePath }) {
               className={css.createFormInput}
               value={title}
               onChange={e => setTitle(e.target.value)}
+              onBlur={handleTitleBlur}
               placeholder="Optional display title"
+              autoFocus={!needsPrototype}
             />
           </div>
+          {nameField}
           <div className={css.createFormField}>
             <label className={css.createFormLabel}>Description</label>
             <input
@@ -932,6 +977,8 @@ function CreateForm({ type, onClose, basePath }) {
             />
           </div>
         </>
+      ) : (
+        nameField
       )}
 
       {type === 'Prototype' && (
@@ -1407,6 +1454,9 @@ function WorkspaceImpl({
       return new Set(Array.isArray(parsed) ? parsed : [])
     } catch { return new Set() }
   })
+  const [showDrafts, setShowDrafts] = useState(() => {
+    try { return localStorage.getItem(SHOW_DRAFTS_KEY) !== 'false' } catch { return true }
+  })
   const [hiddenItems, setHiddenItems] = useState(new Set())
   const { starred, toggle: toggleStar } = useStarred()
   const recentIds = useRecent()
@@ -1415,8 +1465,9 @@ function WorkspaceImpl({
   const navFiltered = useMemo(() => {
     let filtered = activeNav === 'all' ? allItems : allItems.filter(i => i.type === TYPE_MAP[activeNav])
     if (hiddenItems.size > 0) filtered = filtered.filter(i => !hiddenItems.has(i.id))
+    if (!showDrafts) filtered = filtered.filter(i => !i.isPrivate)
     return filtered
-  }, [allItems, activeNav, hiddenItems])
+  }, [allItems, activeNav, hiddenItems, showDrafts])
 
   // Filter by tab
   const items = useMemo(() => {
@@ -1484,6 +1535,14 @@ function WorkspaceImpl({
     })
   }, [])
 
+  const toggleShowDrafts = useCallback(() => {
+    setShowDrafts(prev => {
+      const next = !prev
+      try { localStorage.setItem(SHOW_DRAFTS_KEY, String(next)) } catch { /* empty */ }
+      return next
+    })
+  }, [])
+
   const handleItemDeleted = useCallback((itemId) => {
     setHiddenItems(prev => new Set(prev).add(itemId))
   }, [])
@@ -1631,15 +1690,26 @@ function WorkspaceImpl({
                 {t}
               </button>
             ))}
-            <label className={css.groupByFolders}>
-              <input
-                type="checkbox"
-                className={css.groupByFoldersCheckbox}
-                checked={groupByFolders}
-                onChange={toggleGrouping}
-              />
-              Group by folders
-            </label>
+            <div className={css.tabOptions}>
+              <label className={css.groupByFolders}>
+                <input
+                  type="checkbox"
+                  className={css.groupByFoldersCheckbox}
+                  checked={groupByFolders}
+                  onChange={toggleGrouping}
+                />
+                Group by folders
+              </label>
+              <label className={css.groupByFolders}>
+                <input
+                  type="checkbox"
+                  className={css.groupByFoldersCheckbox}
+                  checked={showDrafts}
+                  onChange={toggleShowDrafts}
+                />
+                Show drafts
+              </label>
+            </div>
           </div>
 
           {/* Grid */}

package/src/internals/Viewfinder.module.css

@@ -910,11 +910,17 @@
   border-radius: 6px;
   font-size: 16px;
   box-sizing: border-box;
+  background: var(--color-background-inset, #fafafa);
+  color: var(--color-foreground, #1a1a1a);
+}
+
+.createFormInput::placeholder {
+  color: var(--color-foreground-muted, #999);
 }
 
 .createFormInput:focus {
   outline: none;
-  border-color: var(--color-foreground-muted, #999);
+  border-color: var(--color-border-emphasis, #999);
 }
 
 .createFormCheckbox {
@@ -989,6 +995,13 @@
 
 /* Group by folders checkbox */
 
+.tabOptions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: auto;
+}
+
 .groupByFolders {
   display: flex;
   align-items: center;

package/src/internals/canvas/isolation/prototypeRoutes.filter.test.js

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { filterChildrenForProto } from './routeFilter.js'
+
+// Shape mirrors what generouted's generateRegularRoutes produces: nested
+// sub-routes live as children of the prototype's top-level path node.
+//   src/prototypes/canvas-threats/index.jsx   -> { path: 'canvas-threats', children: [{ index: true }, ...] }
+//   src/prototypes/canvas-threats/threats.jsx -> a { path: 'threats' } child of 'canvas-threats'
+const nestedTree = () => [
+  {
+    path: 'canvas-threats',
+    children: [
+      { index: true, id: 'index' },
+      { path: 'threats', id: 'threats' },
+      { path: 'detail/:id', id: 'detail' },
+    ],
+  },
+  { path: 'other-proto', children: [{ index: true, id: 'other' }] },
+  { path: '*', id: 'fallback' },
+]
+
+describe('filterChildrenForProto', () => {
+  it('keeps nested sub-routes of the matched prototype (regression: nested scoped routes)', () => {
+    const out = filterChildrenForProto(nestedTree(), 'canvas-threats')
+    const proto = out.find((r) => r.path === 'canvas-threats')
+    expect(proto).toBeTruthy()
+    // The nested `threats` child must survive — this was the bug.
+    expect(proto.children.map((c) => c.id)).toEqual(['index', 'threats', 'detail'])
+  })
+
+  it('drops sibling prototypes but keeps the splat fallback', () => {
+    const out = filterChildrenForProto(nestedTree(), 'canvas-threats')
+    expect(out.find((r) => r.path === 'other-proto')).toBeUndefined()
+    expect(out.find((r) => r.path === '*')).toBeTruthy()
+  })
+
+  it('descends through pathless layout wrappers to reach prototype routes', () => {
+    const wrapped = [
+      { Component: () => null, children: nestedTree() },
+      { path: '*', id: 'fallback' },
+    ]
+    const out = filterChildrenForProto(wrapped, 'canvas-threats')
+    const layout = out.find((r) => !r.path && r.children)
+    const proto = layout.children.find((r) => r.path === 'canvas-threats')
+    expect(proto.children.map((c) => c.id)).toEqual(['index', 'threats', 'detail'])
+    expect(layout.children.find((r) => r.path === 'other-proto')).toBeUndefined()
+  })
+})

package/src/internals/canvas/isolation/prototypeRoutes.jsx

@@ -19,6 +19,7 @@ import {
   patterns,
 } from '@generouted/react-router/core'
 import PrototypeErrorBoundary, { ImportErrorFallback } from '../../PrototypeErrorBoundary.jsx'
+import { filterChildrenForProto } from './routeFilter.js'
 
 // Strip src/library/, src/prototypes/, .folder/, and `drafts/` segments
 // from route paths. `_app.jsx` lives in src/library/ (since
@@ -111,6 +112,20 @@ const fallback = { path: '*', Component: _404?.default || Fragment }
 
 export const routes = [{ ...app, children: [...regularRoutes, fallback] }]
 
+/**
+ * Filter a route tree's children down to a single prototype subtree.
+ *
+ * Pure helper (no module-level globs) so it's unit-testable. Keeps `*` and
+ * pathless layout wrappers (descending into the latter to reach the prototype
+ * routes). Any route WITH a path is kept iff its first segment matches the
+ * requested proto — and when it matches we keep its ENTIRE subtree intact,
+ * since generouted nests sub-routes under the prototype (e.g.
+ * `canvas-threats/threats` → a `threats` child of `canvas-threats`).
+ * Re-filtering those children by first segment would drop them because their
+ * own path segment isn't the proto name — that was the nested-route bug.
+ */
+export { filterChildrenForProto } from './routeFilter.js'
+
 /**
  * Return a routes tree filtered to a single prototype subtree. Used by the
  * per-prototype iframe entry — filtering at this layer keeps a broken
@@ -119,22 +134,5 @@ export const routes = [{ ...app, children: [...regularRoutes, fallback] }]
  */
 export function getRoutesForProto(proto) {
   if (!proto) return routes
-  const matchesProto = (route) => {
-    const seg = (route.path || '').split('/').filter(Boolean)[0]
-    return seg === proto
-  }
-  const filter = (children) => children
-    .map((r) => {
-      if (r.path === '*') return r
-      if (!r.path) {
-        if (r.children) return { ...r, children: filter(r.children) }
-        return r
-      }
-      if (matchesProto(r)) {
-        return r.children ? { ...r, children: filter(r.children) } : r
-      }
-      return null
-    })
-    .filter(Boolean)
-  return [{ ...routes[0], children: filter(routes[0].children || []) }]
+  return [{ ...routes[0], children: filterChildrenForProto(routes[0].children || [], proto) }]
 }

package/src/internals/canvas/isolation/routeFilter.js

@@ -0,0 +1,31 @@
+/**
+ * Pure (dependency-free) route-tree filtering for the isolated prototypes
+ * iframe. Kept separate from `prototypeRoutes.jsx` so it can be unit-tested
+ * without pulling in that module's eager `import.meta.glob` chain.
+ *
+ * Filter a route tree's children down to a single prototype subtree:
+ *   - `*` splat fallback is always kept.
+ *   - Pathless layout wrappers are kept, descending into their children to
+ *     reach the prototype routes.
+ *   - Any route WITH a path is kept iff its first segment matches the
+ *     requested proto. When it matches, its ENTIRE subtree is kept intact,
+ *     because generouted nests sub-routes under the prototype's path node
+ *     (e.g. `canvas-threats/threats` → a `threats` child of `canvas-threats`).
+ *     Re-filtering those children by first segment would drop them since
+ *     their own segment isn't the proto name — that was the nested-route bug.
+ */
+export function filterChildrenForProto(children, proto) {
+  const matchesProto = (route) => {
+    const seg = (route.path || '').split('/').filter(Boolean)[0]
+    return seg === proto
+  }
+  return children
+    .map((r) => {
+      if (r.path === '*') return r
+      if (!r.path) {
+        return r.children ? { ...r, children: filterChildrenForProto(r.children, proto) } : r
+      }
+      return matchesProto(r) ? r : null
+    })
+    .filter(Boolean)
+}

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

@@ -552,7 +552,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
                   // Match the placeholder's themed background so any
                   // brief gap during navigation (refresh or src change)
                   // never flashes the browser's default white.
-                  background: 'var(--color-background-muted)',
+                  background: 'var(--color-background)',
                 }}
                 title={`${prototypeTitle} prototype`}
                 sandbox="allow-same-origin allow-scripts allow-forms allow-popups"

package/src/internals/vite/data-plugin.js

@@ -917,6 +917,10 @@ function buildDiscoveryResult({ index, protoFolders, flowRoutes, canvasRoutes, c
         const dirPath = path.dirname(absPath).replace(/\\/g, '/')
         const canvasRelDir = dirPath.replace(/^.*?src\/canvas\//, '')
         canvasMetaByDir[canvasRelDir] = parsed
+        // Drafts canvases derive their group with `drafts/` stripped, so also
+        // index the meta under the stripped dir so the group lookup matches.
+        const canvasRelDirPublic = canvasRelDir.split('/').filter(seg => seg !== 'drafts').join('/')
+        if (canvasRelDirPublic !== canvasRelDir) canvasMetaByDir[canvasRelDirPublic] = parsed
       }
     } catch { /* skip invalid meta files */ }
   }

package/src/internals/vite/data-plugin.test.js

@@ -1,7 +1,7 @@
 import { mkdtempSync, writeFileSync, mkdirSync, rmSync } from 'node:fs'
 import { tmpdir } from 'node:os'
 import path from 'node:path'
-import storyboardDataPlugin, { resolveTemplateVars, computeTemplateVars, parseDataFile } from './data-plugin.js'
+import storyboardDataPlugin, { resolveTemplateVars, computeTemplateVars, parseDataFile, buildDataDiscovery } from './data-plugin.js'
 
 const RESOLVED_ID = '\0virtual:storyboard-data-index'
 
@@ -1243,3 +1243,33 @@ describe('parseDataFile — canvas path-based IDs', () => {
     expect(result.group).toBeNull()
   })
 })
+
+describe('buildDataDiscovery — drafts canvas-group meta', () => {
+  function writePage(dir, name, title) {
+    const evt = { event: 'canvas_created', title, timestamp: Date.now() }
+    writeFileSync(path.join(dir, `${name}.canvas.jsonl`), JSON.stringify(evt) + '\n')
+  }
+
+  it('attaches .meta.json to a drafts/ canvas group (drafts-stripped key reconciliation)', () => {
+    const groupDir = path.join(tmpDir, 'src', 'canvas', 'drafts', 'security-vision')
+    mkdirSync(groupDir, { recursive: true })
+    writePage(groupDir, '1-security-vision', 'Security Vision')
+    writePage(groupDir, '2-confidence-scores', 'Confidence Scores')
+    writeFileSync(
+      path.join(groupDir, 'security-vision.meta.json'),
+      JSON.stringify({
+        title: 'Security Vision',
+        pageOrder: ['security-vision/1-security-vision', 'security-vision/2-confidence-scores'],
+      }),
+    )
+
+    const discovery = buildDataDiscovery(tmpDir, { includeDraft: true })
+    const page = discovery.canvases['drafts/security-vision/1-security-vision']
+    expect(page).toBeTruthy()
+    expect(page._group).toBe('security-vision')
+    // Before the fix this was null because the meta was keyed under
+    // "drafts/security-vision" while the group lookup used "security-vision".
+    expect(page._canvasMeta).toBeTruthy()
+    expect(page._canvasMeta.title).toBe('Security Vision')
+  })
+})