@dfosco/storyboard 0.7.1 → 0.9.0

package/src/core/workleaf/paths.js

@@ -0,0 +1,146 @@
+/**
+ * Workleaf path helpers.
+ *
+ * A workleaf is an ephemeral sub-worktree owned by a parent worktree (or
+ * main). It lives at:
+ *
+ *   <repo-root>/workleafs/<parent>/workleaf--<slug>/
+ *
+ * The parent name is encoded in the path — no metadata file is needed.
+ * Workleaves cannot be nested: spawning a workleaf from inside another
+ * workleaf is refused at the CLI layer using `detectWorkleafContext`.
+ *
+ * Branch naming convention is `<parent>--workleaf--<slug>` so the branch
+ * is self-describing in `git branch` output even without spatial context.
+ *
+ * This module is intentionally pure and side-effect-free so it can be
+ * unit-tested without touching the filesystem (apart from the listing
+ * helper, which obviously must read disk).
+ */
+
+import { existsSync, readdirSync, realpathSync } from 'fs'
+import { join } from 'path'
+import { repoRoot, slugify } from '../worktree/port.js'
+
+/** Literal prefix every workleaf directory and branch slug carries. */
+export const WORKLEAF_PREFIX = 'workleaf--'
+
+/** Branch convention: `<parent>--workleaf--<slug>`. */
+export const WORKLEAF_BRANCH_SEPARATOR = '--workleaf--'
+
+/**
+ * Build the absolute on-disk path for a workleaf.
+ *
+ * @param {string} parent — parent worktree name (e.g. 'main' or '4.3.0')
+ * @param {string} name — user-supplied workleaf name (will be slugified)
+ * @param {string} [cwd] — for tests; falls back to process.cwd()
+ * @returns {string} absolute path
+ */
+export function workleafDir(parent, name, cwd) {
+  const root = repoRoot(cwd)
+  const slug = slugify(name)
+  return join(root, 'workleafs', parent, WORKLEAF_PREFIX + slug)
+}
+
+/**
+ * Compose the git branch name for a workleaf.
+ *
+ * @param {string} parent
+ * @param {string} name
+ * @returns {string} e.g. '4.3.0--workleaf--quick-fix'
+ */
+export function workleafBranchName(parent, name) {
+  const slug = slugify(name)
+  return `${parent}${WORKLEAF_BRANCH_SEPARATOR}${slug}`
+}
+
+/**
+ * Inverse of {@link workleafBranchName}. Splits `parent--workleaf--slug`
+ * into its parts. Uses the LAST occurrence of `--workleaf--` so the
+ * function survives parent names that contain `--workleaf--` literally
+ * (unlikely, but cheap to handle).
+ *
+ * Returns null if the input is not a workleaf branch.
+ */
+export function parentOfWorkleaf(branchName) {
+  if (typeof branchName !== 'string') return null
+  const idx = branchName.lastIndexOf(WORKLEAF_BRANCH_SEPARATOR)
+  if (idx <= 0) return null
+  const parent = branchName.slice(0, idx)
+  const slug = branchName.slice(idx + WORKLEAF_BRANCH_SEPARATOR.length)
+  if (!parent || !slug) return null
+  return { parent, slug }
+}
+
+/**
+ * Detect whether the given cwd is inside a workleaf, and if so, which
+ * parent and slug it belongs to.
+ *
+ * Returns:
+ *   { inWorkleaf: true,  parent, slug, branch, dir, root } when inside
+ *   { inWorkleaf: false }                                  when outside
+ *
+ * Uses realpathSync to resolve symlinks before pattern-matching — same
+ * convention as `worktree/port.js`. Falls back to the raw cwd if the
+ * path does not exist on disk yet (e.g. during dry-run tests).
+ */
+export function detectWorkleafContext(cwd = process.cwd()) {
+  let realCwd
+  try {
+    realCwd = realpathSync(cwd)
+  } catch {
+    realCwd = cwd
+  }
+
+  // Match <root>/workleafs/<parent>/workleaf--<slug> (anywhere within it).
+  // Capture groups: 1=root, 2=parent, 3=slug.
+  const re = new RegExp(`^(.+)[/\\\\]workleafs[/\\\\]([^/\\\\]+)[/\\\\]${WORKLEAF_PREFIX}([^/\\\\]+)`)
+  const m = realCwd.match(re)
+  if (!m) return { inWorkleaf: false }
+
+  const [, root, parent, slug] = m
+  return {
+    inWorkleaf: true,
+    parent,
+    slug,
+    branch: workleafBranchName(parent, slug),
+    dir: join(root, 'workleafs', parent, WORKLEAF_PREFIX + slug),
+    root,
+  }
+}
+
+/**
+ * Enumerate every workleaf on disk under <repoRoot>/workleafs/, grouped
+ * by parent. Skips entries that don't look like real git worktrees
+ * (must contain a `.git` file at the workleaf root).
+ *
+ * @param {string} [cwd]
+ * @returns {Array<{ parent: string, slug: string, branch: string, dir: string }>}
+ */
+export function listWorkleafs(cwd) {
+  const root = repoRoot(cwd)
+  const base = join(root, 'workleafs')
+  if (!existsSync(base)) return []
+
+  const out = []
+  for (const parentEntry of readdirSync(base, { withFileTypes: true })) {
+    if (!parentEntry.isDirectory()) continue
+    const parent = parentEntry.name
+    const parentDir = join(base, parent)
+    for (const child of readdirSync(parentDir, { withFileTypes: true })) {
+      if (!child.isDirectory()) continue
+      if (!child.name.startsWith(WORKLEAF_PREFIX)) continue
+      const dir = join(parentDir, child.name)
+      // A worktree-managed directory has a `.git` file (not dir) inside.
+      if (!existsSync(join(dir, '.git'))) continue
+      const slug = child.name.slice(WORKLEAF_PREFIX.length)
+      out.push({
+        parent,
+        slug,
+        branch: workleafBranchName(parent, slug),
+        dir,
+      })
+    }
+  }
+  return out
+}

package/src/core/workleaf/paths.test.js

@@ -0,0 +1,230 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { mkdtempSync, mkdirSync, writeFileSync, rmSync, realpathSync } from 'fs'
+import { join } from 'path'
+import { tmpdir } from 'os'
+
+import {
+  WORKLEAF_PREFIX,
+  WORKLEAF_BRANCH_SEPARATOR,
+  workleafDir,
+  workleafBranchName,
+  parentOfWorkleaf,
+  detectWorkleafContext,
+  listWorkleafs,
+} from './paths.js'
+
+describe('workleafBranchName', () => {
+  it('builds <parent>--workleaf--<slug>', () => {
+    expect(workleafBranchName('main', 'quick-fix')).toBe('main--workleaf--quick-fix')
+    expect(workleafBranchName('4.3.0', 'Quick Fix')).toBe('4.3.0--workleaf--quick-fix')
+  })
+
+  it('slugifies the name', () => {
+    expect(workleafBranchName('main', 'My Cool.Feature')).toBe('main--workleaf--my-cool-feature')
+  })
+})
+
+describe('parentOfWorkleaf', () => {
+  it('splits a normal workleaf branch', () => {
+    expect(parentOfWorkleaf('main--workleaf--quick-fix')).toEqual({ parent: 'main', slug: 'quick-fix' })
+    expect(parentOfWorkleaf('4.3.0--workleaf--bench')).toEqual({ parent: '4.3.0', slug: 'bench' })
+  })
+
+  it('returns null for non-workleaf branches', () => {
+    expect(parentOfWorkleaf('main')).toBeNull()
+    expect(parentOfWorkleaf('4.3.0--feature')).toBeNull()
+    expect(parentOfWorkleaf('')).toBeNull()
+  })
+
+  it('returns null for malformed inputs', () => {
+    expect(parentOfWorkleaf(null)).toBeNull()
+    expect(parentOfWorkleaf(undefined)).toBeNull()
+    expect(parentOfWorkleaf(123)).toBeNull()
+  })
+
+  it('uses the LAST --workleaf-- separator (parent names containing it)', () => {
+    // A pathological but possible parent name: someone named their parent
+    // worktree `something--workleaf--child`. We should still split it correctly.
+    expect(parentOfWorkleaf('something--workleaf--child--workleaf--slug')).toEqual({
+      parent: 'something--workleaf--child',
+      slug: 'slug',
+    })
+  })
+
+  it('returns null when parent or slug ends up empty', () => {
+    expect(parentOfWorkleaf('--workleaf--slug')).toBeNull()
+    expect(parentOfWorkleaf('parent--workleaf--')).toBeNull()
+  })
+})
+
+describe('workleafDir', () => {
+  let tempRoot
+  let originalCwd
+
+  beforeEach(() => {
+    tempRoot = realpathSync(mkdtempSync(join(tmpdir(), 'sb-workleaf-dir-')))
+    originalCwd = process.cwd()
+    process.chdir(tempRoot)
+  })
+
+  afterEach(() => {
+    process.chdir(originalCwd)
+    rmSync(tempRoot, { recursive: true, force: true })
+  })
+
+  it('returns workleafs/<parent>/workleaf--<slug> when called from repo root', () => {
+    expect(workleafDir('main', 'quick-fix')).toBe(
+      join(tempRoot, 'workleafs', 'main', 'workleaf--quick-fix')
+    )
+  })
+
+  it('slugifies the workleaf name', () => {
+    expect(workleafDir('main', 'My Cool.Feature')).toBe(
+      join(tempRoot, 'workleafs', 'main', 'workleaf--my-cool-feature')
+    )
+  })
+
+  it('resolves repo root even when called from inside a worktree', () => {
+    const wt = join(tempRoot, 'worktrees', '4.3.0')
+    mkdirSync(wt, { recursive: true })
+    expect(workleafDir('4.3.0', 'fix', wt)).toBe(
+      join(tempRoot, 'workleafs', '4.3.0', 'workleaf--fix')
+    )
+  })
+
+  it('resolves repo root even when called from inside a workleaf', () => {
+    const wl = join(tempRoot, 'workleafs', '4.3.0', 'workleaf--outer')
+    mkdirSync(wl, { recursive: true })
+    expect(workleafDir('4.3.0', 'inner', wl)).toBe(
+      join(tempRoot, 'workleafs', '4.3.0', 'workleaf--inner')
+    )
+  })
+})
+
+describe('detectWorkleafContext', () => {
+  let tempRoot
+
+  beforeEach(() => {
+    tempRoot = realpathSync(mkdtempSync(join(tmpdir(), 'sb-workleaf-ctx-')))
+  })
+
+  afterEach(() => {
+    rmSync(tempRoot, { recursive: true, force: true })
+  })
+
+  it('returns inWorkleaf=false from repo root', () => {
+    expect(detectWorkleafContext(tempRoot).inWorkleaf).toBe(false)
+  })
+
+  it('returns inWorkleaf=false from inside a worktree', () => {
+    const wt = join(tempRoot, 'worktrees', '4.3.0')
+    mkdirSync(wt, { recursive: true })
+    expect(detectWorkleafContext(wt).inWorkleaf).toBe(false)
+  })
+
+  it('detects parent=main when cwd is inside a main-parented workleaf', () => {
+    const dir = join(tempRoot, 'workleafs', 'main', 'workleaf--fix')
+    mkdirSync(dir, { recursive: true })
+    const ctx = detectWorkleafContext(dir)
+    expect(ctx.inWorkleaf).toBe(true)
+    expect(ctx.parent).toBe('main')
+    expect(ctx.slug).toBe('fix')
+    expect(ctx.branch).toBe('main--workleaf--fix')
+    expect(ctx.dir).toBe(dir)
+    expect(ctx.root).toBe(tempRoot)
+  })
+
+  it('detects parent=<worktree> when cwd is inside a worktree-parented workleaf', () => {
+    const dir = join(tempRoot, 'workleafs', '4.3.0', 'workleaf--bench')
+    mkdirSync(dir, { recursive: true })
+    const ctx = detectWorkleafContext(dir)
+    expect(ctx.inWorkleaf).toBe(true)
+    expect(ctx.parent).toBe('4.3.0')
+    expect(ctx.slug).toBe('bench')
+    expect(ctx.branch).toBe('4.3.0--workleaf--bench')
+    expect(ctx.root).toBe(tempRoot)
+  })
+
+  it('detects context from a nested cwd inside a workleaf', () => {
+    const dir = join(tempRoot, 'workleafs', 'main', 'workleaf--fix', 'src', 'nested')
+    mkdirSync(dir, { recursive: true })
+    const ctx = detectWorkleafContext(dir)
+    expect(ctx.inWorkleaf).toBe(true)
+    expect(ctx.parent).toBe('main')
+    expect(ctx.slug).toBe('fix')
+  })
+
+  it('does not match a directory that lacks the workleaf-- prefix', () => {
+    const dir = join(tempRoot, 'workleafs', 'main', 'not-a-workleaf')
+    mkdirSync(dir, { recursive: true })
+    expect(detectWorkleafContext(dir).inWorkleaf).toBe(false)
+  })
+})
+
+describe('listWorkleafs', () => {
+  let tempRoot
+
+  beforeEach(() => {
+    tempRoot = realpathSync(mkdtempSync(join(tmpdir(), 'sb-workleaf-list-')))
+  })
+
+  afterEach(() => {
+    rmSync(tempRoot, { recursive: true, force: true })
+  })
+
+  it('returns [] when workleafs/ does not exist', () => {
+    expect(listWorkleafs(tempRoot)).toEqual([])
+  })
+
+  it('returns [] when workleafs/ has no valid entries', () => {
+    mkdirSync(join(tempRoot, 'workleafs'), { recursive: true })
+    expect(listWorkleafs(tempRoot)).toEqual([])
+  })
+
+  it('lists workleafs that have a .git marker', () => {
+    const dir = join(tempRoot, 'workleafs', 'main', 'workleaf--fix')
+    mkdirSync(dir, { recursive: true })
+    writeFileSync(join(dir, '.git'), 'gitdir: /fake')
+
+    const result = listWorkleafs(tempRoot)
+    expect(result).toEqual([
+      { parent: 'main', slug: 'fix', branch: 'main--workleaf--fix', dir },
+    ])
+  })
+
+  it('skips entries missing the workleaf-- prefix and entries without .git', () => {
+    mkdirSync(join(tempRoot, 'workleafs', 'main', 'workleaf--ok'), { recursive: true })
+    writeFileSync(join(tempRoot, 'workleafs', 'main', 'workleaf--ok', '.git'), 'gitdir: /fake')
+    // Missing .git marker
+    mkdirSync(join(tempRoot, 'workleafs', 'main', 'workleaf--no-git'), { recursive: true })
+    // Missing prefix
+    mkdirSync(join(tempRoot, 'workleafs', 'main', 'just-a-folder'), { recursive: true })
+
+    const result = listWorkleafs(tempRoot)
+    expect(result).toHaveLength(1)
+    expect(result[0].slug).toBe('ok')
+  })
+
+  it('groups workleafs across multiple parents', () => {
+    const a = join(tempRoot, 'workleafs', 'main', 'workleaf--alpha')
+    const b = join(tempRoot, 'workleafs', '4.3.0', 'workleaf--beta')
+    mkdirSync(a, { recursive: true })
+    mkdirSync(b, { recursive: true })
+    writeFileSync(join(a, '.git'), 'gitdir: /fake')
+    writeFileSync(join(b, '.git'), 'gitdir: /fake')
+
+    const result = listWorkleafs(tempRoot)
+    const parents = result.map((r) => r.parent).sort()
+    expect(parents).toEqual(['4.3.0', 'main'])
+  })
+})
+
+describe('constants', () => {
+  it('exposes WORKLEAF_PREFIX', () => {
+    expect(WORKLEAF_PREFIX).toBe('workleaf--')
+  })
+
+  it('exposes WORKLEAF_BRANCH_SEPARATOR', () => {
+    expect(WORKLEAF_BRANCH_SEPARATOR).toBe('--workleaf--')
+  })
+})

package/src/core/workshop/features/createCanvas/CreateCanvasForm.jsx

@@ -8,6 +8,9 @@ import * as Alert from '../../../lib/components/ui/alert/index.js'
 
 const CANVAS_SUCCESS_KEY = 'sb-canvas-created'
 
+const selectClass =
+  'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
+
 function getApiUrl() {
   const basePath = window.__STORYBOARD_BASE_PATH__ || '/'
   return basePath.replace(/\/$/, '') + '/_storyboard/canvas'
@@ -19,8 +22,15 @@ export default function CreateCanvasForm({ onClose }) {
   const [titleTouched, setTitleTouched] = useState(false)
   const [description, setDescription] = useState('')
   const [folder, setFolder] = useState('')
+  // Special folder select value indicating the user wants to create a new
+  // folder rather than pick an existing one. Triggers the new-folder input.
+  const NEW_FOLDER_VALUE = '__new__'
+  const [folderSelectValue, setFolderSelectValue] = useState('')
+  const [newFolderName, setNewFolderName] = useState('')
+  const [newFolderKind, setNewFolderKind] = useState('workspace')
   const [grid, setGrid] = useState(true)
-  const [folders, setFolders] = useState([])
+  // folderEntries: [{ name, kind: 'workspace' | 'pages' }, ...]
+  const [folderEntries, setFolderEntries] = useState([])
   const [loading, setLoading] = useState(true)
   const [submitting, setSubmitting] = useState(false)
   const [error, setError] = useState(null)
@@ -56,8 +66,13 @@ export default function CreateCanvasForm({ onClose }) {
   )
 
   const routePreview = useMemo(
-    () => (kebabName ? `/canvas/${kebabName}` : ''),
-    [kebabName],
+    () => {
+      if (!kebabName) return ''
+      // Both `.folder/` and plain dir produce the same URL — `.folder` is
+      // stripped by the data plugin's route resolver.
+      return folder ? `/canvas/${folder}/${kebabName}` : `/canvas/${kebabName}`
+    },
+    [kebabName, folder],
   )
 
   const nameError = useMemo(() => {
@@ -68,10 +83,14 @@ export default function CreateCanvasForm({ onClose }) {
     return null
   }, [name, kebabName])
 
-  const canSubmit = useMemo(
-    () => !!kebabName && !nameError && !submitting,
-    [kebabName, nameError, submitting],
-  )
+  const canSubmit = useMemo(() => {
+    if (!kebabName || nameError || submitting) return false
+    // When the user picked "+ Create new folder" they must also provide a
+    // valid (kebab-case) folder name. Other selections (existing folder or
+    // "No folder") always have a usable `folder` value already.
+    if (folderSelectValue === NEW_FOLDER_VALUE && !folder) return false
+    return true
+  }, [kebabName, nameError, submitting, folderSelectValue, folder])
 
   useEffect(() => {
     // Restore success state after Vite's full-reload on file creation
@@ -90,7 +109,13 @@ export default function CreateCanvasForm({ onClose }) {
         const res = await fetch(getApiUrl() + '/folders')
         if (res.ok) {
           const data = await res.json()
-          setFolders(data.folders || [])
+          // Prefer the new tagged `entries` shape; fall back to legacy
+          // `folders` string array (treat as 'pages' for back-compat).
+          if (Array.isArray(data.entries)) {
+            setFolderEntries(data.entries.filter((e) => e && e.name))
+          } else if (Array.isArray(data.folders)) {
+            setFolderEntries(data.folders.map((name) => ({ name, kind: 'pages' })))
+          }
         }
       } catch { /* empty */ } finally {
         setLoading(false)
@@ -99,6 +124,38 @@ export default function CreateCanvasForm({ onClose }) {
     fetchFolders()
   }, [])
 
+  function handleFolderSelectChange(value) {
+    setFolderSelectValue(value)
+    if (value === NEW_FOLDER_VALUE) {
+      // Defer folder commit until the user types a name.
+      setFolder('')
+    } else {
+      setFolder(value)
+      setNewFolderName('')
+    }
+  }
+
+  // Whenever the user types into the new-folder input, mirror it into `folder`
+  // so the submit handler picks it up. Kebab-case to match canvas folder
+  // naming conventions (data plugin / route resolution assumes lowercase).
+  const kebabNewFolder = useMemo(
+    () =>
+      newFolderName
+        .replace(/[^a-zA-Z0-9\s_-]/g, '')
+        .trim()
+        .replace(/[\s_]+/g, '-')
+        .toLowerCase()
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, ''),
+    [newFolderName],
+  )
+
+  useEffect(() => {
+    if (folderSelectValue === NEW_FOLDER_VALUE) {
+      setFolder(kebabNewFolder)
+    }
+  }, [folderSelectValue, kebabNewFolder])
+
   function handleTitleInput(e) {
     setTitle(e.target.value)
     setTitleTouched(true)
@@ -123,6 +180,10 @@ export default function CreateCanvasForm({ onClose }) {
           title: displayTitle,
           description: description || undefined,
           folder: folder || undefined,
+          // Only meaningful when the folder doesn't exist yet — the server
+          // resolves existing folders by inspecting the filesystem and
+          // ignores `folderKind` in that case.
+          folderKind: folder && folderSelectValue === NEW_FOLDER_VALUE ? newFolderKind : undefined,
           grid,
         }),
       })
@@ -152,45 +213,46 @@ export default function CreateCanvasForm({ onClose }) {
   }
 
   return (
-    <div onKeyDown={handleKeydown}>
+    <>
       <Panel.Header>
         <Panel.Title>Create canvas</Panel.Title>
-        <Panel.Close onClick={onClose} />
+        <Panel.Close />
       </Panel.Header>
 
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', padding: '1rem' }}>
-        <div>
+      <div className="p-4 pt-2 space-y-3" onKeyDown={handleKeydown}>
+        <div className="space-y-1">
           <Label htmlFor="canvas-name">Name</Label>
           <Input
             id="canvas-name"
             value={name}
             onChange={(e) => setName(e.target.value)}
             placeholder="my-canvas"
+            autoComplete="off"
+            spellCheck={false}
           />
-          {nameError && (
-            <p style={{ color: 'var(--color-danger-fg, red)', fontSize: '0.875rem', marginTop: '0.25rem' }}>
-              {nameError}
-            </p>
-          )}
+          {nameError && <p className="text-sm text-destructive">{nameError}</p>}
           {routePreview && (
-            <p style={{ color: 'var(--color-fg-muted, #666)', fontSize: '0.875rem', marginTop: '0.25rem' }}>
-              {routePreview}
+            <p className="text-xs text-muted-foreground">
+              Route:{' '}
+              <code className="px-1 py-0.5 bg-muted rounded font-mono text-foreground text-xs">
+                {routePreview}
+              </code>
             </p>
           )}
         </div>
 
-        <div>
+        <div className="space-y-1">
           <Label htmlFor="canvas-title">Title</Label>
           <Input
             id="canvas-title"
             value={displayTitle}
             onChange={handleTitleInput}
             onBlur={handleTitleBlur}
-            placeholder="Auto-generated from name"
+            placeholder={autoTitle || 'Auto-derived from name'}
           />
         </div>
 
-        <div>
+        <div className="space-y-1">
           <Label htmlFor="canvas-description">Description</Label>
           <Input
             id="canvas-description"
@@ -200,30 +262,64 @@ export default function CreateCanvasForm({ onClose }) {
           />
         </div>
 
-        <div>
+        <div className="space-y-1">
           <Label htmlFor="canvas-folder">Folder</Label>
           <select
             id="canvas-folder"
-            value={folder}
-            onChange={(e) => setFolder(e.target.value)}
+            className={selectClass}
+            value={folderSelectValue}
+            onChange={(e) => handleFolderSelectChange(e.target.value)}
             disabled={loading}
           >
             <option value="">No folder</option>
-            {folders.map((f) => (
-              <option key={f} value={f}>
-                {f}
+            {folderEntries.map((f) => (
+              <option key={`${f.kind}:${f.name}`} value={f.name}>
+                {f.name} {f.kind === 'workspace' ? '— workspace folder' : '— canvas pages'}
               </option>
             ))}
+            <option value={NEW_FOLDER_VALUE}>+ Create new folder…</option>
           </select>
         </div>
 
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        {folderSelectValue === NEW_FOLDER_VALUE && (
+          <div className="space-y-2 pl-4 border-l-2 border-muted">
+            <div className="space-y-1">
+              <Label htmlFor="canvas-new-folder-name">New folder name</Label>
+              <Input
+                id="canvas-new-folder-name"
+                value={newFolderName}
+                onChange={(e) => setNewFolderName(e.target.value)}
+                placeholder="kebab-case-folder"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="canvas-new-folder-kind">Folder type</Label>
+              <select
+                id="canvas-new-folder-kind"
+                className={selectClass}
+                value={newFolderKind}
+                onChange={(e) => setNewFolderKind(e.target.value)}
+              >
+                <option value="workspace">
+                  Workspace folder — sibling canvases grouped in the workspace
+                </option>
+                <option value="pages">
+                  Canvas pages — multi-page canvas, canvases become pages
+                </option>
+              </select>
+            </div>
+          </div>
+        )}
+
+        <div className="flex items-center gap-2">
           <Checkbox
             id="canvas-grid"
             checked={grid}
             onCheckedChange={setGrid}
           />
-          <Label htmlFor="canvas-grid">Show grid</Label>
+          <Label htmlFor="canvas-grid" className="text-sm font-normal cursor-pointer">
+            Show grid
+          </Label>
         </div>
 
         {error && (
@@ -234,12 +330,12 @@ export default function CreateCanvasForm({ onClose }) {
 
         {success && (
           <Alert.Root>
-            <Alert.Description>
+            <Alert.Description className="text-success">
               {success}
               {createdRoute && (
                 <>
                   {' — '}
-                  <a href={createdRoute}>Open canvas</a>
+                  <a href={createdRoute} className="underline">Open canvas</a>
                 </>
               )}
             </Alert.Description>
@@ -252,9 +348,9 @@ export default function CreateCanvasForm({ onClose }) {
           Cancel
         </Button>
         <Button onClick={submit} disabled={!canSubmit}>
-          {submitting ? 'Creating…' : 'Create'}
+          {submitting ? 'Creating\u2026' : 'Create'}
         </Button>
       </Panel.Footer>
-    </div>
+    </>
   )
 }

package/src/core/workshop/features/createFlow/server.js

@@ -13,6 +13,7 @@ import {
   buildTemplateRecipeIndex,
   resolveTemplateRecipeEntry,
 } from '../templateIndex.js'
+import { readWorkshopPartials } from '../partialRender.js'
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -461,7 +462,10 @@ function generateFlowJson({ title, author, description, globals, sourceData, rou
  */
 export function createFlowsHandler(ctx) {
   const { root, sendJson, workshopConfig = {} } = ctx
-  const getTemplateRecipes = () => buildTemplateRecipeIndex(root, workshopConfig.partials)
+  const getTemplateRecipes = () => {
+    const partials = readWorkshopPartials(root)
+    return buildTemplateRecipeIndex(root, partials.length ? partials : workshopConfig.partials)
+  }
 
   return async (req, res, { body, path: routePath, method }) => {
     const templateRecipes = getTemplateRecipes()