@dfosco/storyboard-core 3.6.0 → 3.7.0

package/src/svelte-plugin-ui/components/Viewfinder.svelte

@@ -9,8 +9,10 @@
 -->
 
 <script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
   import { buildPrototypeIndex } from '../../viewfinder.js'
   import { getLocal, setLocal } from '../../localStorage.js'
+  import { getParam, setParam, removeParam } from '../../session.js'
   import Icon from './Icon.svelte'
 
   interface Props {
@@ -86,6 +88,24 @@
   type ViewMode = 'prototypes' | 'canvases'
   let viewMode: ViewMode = $state('prototypes')
 
+  function syncViewModeFromHash() {
+    viewMode = getParam('canvas') != null ? 'canvases' : 'prototypes'
+  }
+
+  onMount(() => {
+    syncViewModeFromHash()
+    window.addEventListener('hashchange', syncViewModeFromHash)
+  })
+
+  onDestroy(() => {
+    window.removeEventListener('hashchange', syncViewModeFromHash)
+  })
+
+  $effect(() => {
+    if (viewMode === 'canvases') setParam('canvas', '1')
+    else removeParam('canvas')
+  })
+
   // Canvas folder data: extract folders that contain canvases for canvas view
   const canvasFolders = $derived.by(() => {
     const src = prototypeIndex.sorted?.[sortBy]?.folders ?? folders
@@ -152,7 +172,7 @@
       const w = 20 + (s * (i + 3)) % 80
       const ht = 8 + (s * (i + 7)) % 40
       const opacity = 0.06 + ((s * (i + 2)) % 20) / 100
-      const fill = i % 3 === 0 ? 'var(--placeholder-accent)' : i % 3 === 1 ? 'var(--placeholder-fg)' : 'var(--placeholder-muted)'
+      const fill = i % 3 === 0 ? 'var(--sb--placeholder-accent)' : i % 3 === 1 ? 'var(--sb--placeholder-fg)' : 'var(--sb--placeholder-muted)'
       rects += `<rect x="${x}" y="${y}" width="${w}" height="${ht}" rx="2" fill="${fill}" opacity="${opacity}" />`
     }
 
@@ -160,15 +180,15 @@
     for (let i = 0; i < 6; i++) {
       const s = h * (i + 5)
       const y = 10 + (s % 180)
-      lines += `<line x1="0" y1="${y}" x2="320" y2="${y}" stroke="var(--placeholder-grid)" stroke-width="0.5" opacity="0.4" />`
+      lines += `<line x1="0" y1="${y}" x2="320" y2="${y}" stroke="var(--sb--placeholder-grid)" stroke-width="0.5" opacity="0.4" />`
     }
     for (let i = 0; i < 8; i++) {
       const s = h * (i + 9)
       const x = 10 + (s % 300)
-      lines += `<line x1="${x}" y1="0" x2="${x}" y2="200" stroke="var(--placeholder-grid)" stroke-width="0.5" opacity="0.3" />`
+      lines += `<line x1="${x}" y1="0" x2="${x}" y2="200" stroke="var(--sb--placeholder-grid)" stroke-width="0.5" opacity="0.3" />`
     }
 
-    return `<svg viewBox="0 0 320 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect width="320" height="200" fill="var(--placeholder-bg)" />${lines}${rects}</svg>`
+    return `<svg viewBox="0 0 320 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect width="320" height="200" fill="var(--sb--placeholder-bg)" />${lines}${rects}</svg>`
   }
 
   // Branch switching
@@ -450,7 +470,7 @@
           <a class="listItem" href={canvas.route}>
             <div class="cardBody">
               <p class="protoName">
-                <span class="protoIcon">{canvas.icon || '🎨'}</span>
+                <span class="protoIcon">{canvas.icon || ''}</span>
                 {canvas.name}
               </p>
               {#if canvas.description}
@@ -947,11 +967,11 @@
     overflow: hidden;
     background: var(--bgColor-inset, #010409);
 
-    --placeholder-bg: var(--bgColor-inset, #010409);
-    --placeholder-grid: var(--borderColor-default, #30363d);
-    --placeholder-accent: var(--fgColor-accent, #58a6ff);
-    --placeholder-fg: var(--fgColor-default, #c9d1d9);
-    --placeholder-muted: var(--fgColor-muted, #484f58);
+    --sb--placeholder-bg: var(--bgColor-inset, #010409);
+    --sb--placeholder-grid: var(--borderColor-default, #30363d);
+    --sb--placeholder-accent: var(--fgColor-accent, #58a6ff);
+    --sb--placeholder-fg: var(--fgColor-default, #c9d1d9);
+    --sb--placeholder-muted: var(--fgColor-muted, #484f58);
   }
 
   .thumbnail :global(svg) {
@@ -975,7 +995,7 @@
     padding: 10px 14px;
     margin-bottom: 16px;
     border-radius: 8px;
-    border: 1px solid var(--borderColor-default, var(--color-border, #d0d7de));
+    border: 1px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
     background: var(--bgColor-attention-muted, #3d2e00);
     color: var(--fgColor-attention, #9a6700);
     font-size: 13px;

package/src/svelte-plugin-ui/styles/base.css

@@ -9,61 +9,61 @@
 
 /* --- Light theme (default) --- */
 :root {
-  --sb-bg: #ffffff;
-  --sb-bg-inset: #f6f8fa;
-  --sb-bg-muted: #f3f4f6;
-  --sb-border: #d1d5db;
-  --sb-border-muted: #e5e7eb;
-  --sb-fg: #1f2328;
-  --sb-fg-muted: #656d76;
-  --sb-fg-accent: #0969da;
-  --sb-fg-success: #1a7f37;
-  --sb-fg-danger: #d1242f;
-  --sb-btn-success: #1a7f37;
+  --sb--bg: #ffffff;
+  --sb--bg-inset: #f6f8fa;
+  --sb--bg-muted: #f3f4f6;
+  --sb--border: #d1d5db;
+  --sb--border-muted: #e5e7eb;
+  --sb--fg: #1f2328;
+  --sb--fg-muted: #656d76;
+  --sb--fg-accent: #0969da;
+  --sb--fg-success: #1a7f37;
+  --sb--fg-danger: #d1242f;
+  --sb--btn-success: #1a7f37;
 }
 
 /* --- Dark theme (any dark-* variant) --- */
 [data-sb-theme^="dark"] {
-  --sb-bg: #161b22;
-  --sb-bg-inset: #0d1117;
-  --sb-bg-muted: #21262d;
-  --sb-border: #30363d;
-  --sb-border-muted: #21262d;
-  --sb-fg: #e6edf3;
-  --sb-fg-muted: #8b949e;
-  --sb-fg-accent: #58a6ff;
-  --sb-fg-success: #3fb950;
-  --sb-fg-danger: #f85149;
-  --sb-btn-success: #238636;
+  --sb--bg: #161b22;
+  --sb--bg-inset: #0d1117;
+  --sb--bg-muted: #21262d;
+  --sb--border: #30363d;
+  --sb--border-muted: #21262d;
+  --sb--fg: #e6edf3;
+  --sb--fg-muted: #8b949e;
+  --sb--fg-accent: #58a6ff;
+  --sb--fg-success: #3fb950;
+  --sb--fg-danger: #f85149;
+  --sb--btn-success: #238636;
 }
 
 /* --- Semantic utility classes (supplement Tachyons) --- */
-.sb-bg         { background-color: var(--sb-bg); }
-.sb-bg-inset   { background-color: var(--sb-bg-inset); }
-.sb-bg-muted   { background-color: var(--sb-bg-muted); }
-.sb-b-default  { border-color: var(--sb-border); }
-.sb-b-muted    { border-color: var(--sb-border-muted); }
-.sb-fg         { color: var(--sb-fg); }
-.sb-fg-muted   { color: var(--sb-fg-muted); }
-.sb-fg-accent  { color: var(--sb-fg-accent); }
-.sb-fg-success { color: var(--sb-fg-success); }
-.sb-fg-danger  { color: var(--sb-fg-danger); }
-.sb-btn-success { background-color: var(--sb-btn-success); color: #fff; }
+.sb-bg         { background-color: var(--sb--bg); }
+.sb-bg-inset   { background-color: var(--sb--bg-inset); }
+.sb-bg-muted   { background-color: var(--sb--bg-muted); }
+.sb-b-default  { border-color: var(--sb--border); }
+.sb-b-muted    { border-color: var(--sb--border-muted); }
+.sb-fg         { color: var(--sb--fg); }
+.sb-fg-muted   { color: var(--sb--fg-muted); }
+.sb-fg-accent  { color: var(--sb--fg-accent); }
+.sb-fg-success { color: var(--sb--fg-success); }
+.sb-fg-danger  { color: var(--sb--fg-danger); }
+.sb-btn-success { background-color: var(--sb--btn-success); color: #fff; }
 .sb-btn-success:hover { filter: brightness(1.15); }
-.sb-btn-cancel { background-color: var(--sb-bg-muted); border: 1px solid var(--sb-border); color: var(--sb-fg); }
-.sb-btn-cancel:hover { background-color: var(--sb-border-muted); }
+.sb-btn-cancel { background-color: var(--sb--bg-muted); border: 1px solid var(--sb--border); color: var(--sb--fg); }
+.sb-btn-cancel:hover { background-color: var(--sb--border-muted); }
 
 .sb-input {
-  background: var(--sb-bg-inset);
-  border: 1px solid var(--sb-border);
-  color: var(--sb-fg);
+  background: var(--sb--bg-inset);
+  border: 1px solid var(--sb--border);
+  color: var(--sb--fg);
   outline: none;
 }
 .sb-input:focus {
-  border-color: var(--sb-fg-accent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-fg-accent) 15%, transparent);
+  border-color: var(--sb--fg-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb--fg-accent) 15%, transparent);
 }
-.sb-input::placeholder { color: var(--sb-fg-muted); }
+.sb-input::placeholder { color: var(--sb--fg-muted); }
 
 .sb-shadow { box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1); }
 [data-sb-theme^="dark"] .sb-shadow { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3); }

package/src/workshop/features/createFlow/CreateFlowForm.svelte

@@ -11,22 +11,36 @@
   import * as Panel from '../../../lib/components/ui/panel/index.js'
   import * as Alert from '../../../lib/components/ui/alert/index.js'
 
-  interface Props { onClose?: () => void }
+  interface Props {
+    onClose?: () => void
+  }
   let { onClose }: Props = $props()
 
   let name = $state('')
   let title = $state('')
   let titleTouched = $state(false)
   let selectedPrototype = $state('')
-  let author = $state('')
   let description = $state('')
   let copyFrom = $state('')
+  let startingPage = $state('')
+  let newPagePath = $state('')
+  let newPageTemplate = $state('')
+  const CREATE_NEW_PAGE_VALUE = '__create_new_page__'
 
-  interface PrototypeEntry { name: string; folder?: string }
-  interface FlowEntry { name: string; title: string; path: string }
+  interface PrototypeEntry { name: string; folder?: string; routes?: string[] }
+  interface FlowEntry { name: string; title: string; path: string; prototype?: string; folder?: string; route?: string }
+  interface PartialEntry {
+    id: string
+    name: string
+    kind: 'template' | 'recipe'
+    scope: 'global' | 'prototype'
+    prototype?: string
+    folder?: string
+  }
 
   let prototypes: PrototypeEntry[] = $state([])
   let flows: FlowEntry[] = $state([])
+  let partials: PartialEntry[] = $state([])
   let loading = $state(true)
   let submitting = $state(false)
   let error: string | null = $state(null)
@@ -45,11 +59,49 @@
     : name.trim() && !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(kebabName) ? 'Name must be kebab-case'
     : null
   )
-  const canSubmit = $derived(!!kebabName && !nameError && !submitting)
-
   const selectedProtoEntry = $derived(
     selectedPrototype ? prototypes.find(p => p.name === selectedPrototype) : null
   )
+  const copyFromFlows = $derived(
+    selectedPrototype
+      ? flows.filter((f) => {
+          if (f.prototype !== selectedPrototype) return false
+          const flowFolder = f.folder || ''
+          const selectedFolder = selectedProtoEntry?.folder || ''
+          return flowFolder === selectedFolder
+        })
+      : []
+  )
+  const prototypeRoutes = $derived(selectedProtoEntry?.routes || [])
+  const showNewPageFields = $derived(startingPage === CREATE_NEW_PAGE_VALUE)
+  const newPagePrefix = $derived(selectedPrototype ? `/${selectedPrototype}/` : '/prototype-name/')
+  const templateChoices = $derived(
+    selectedPrototype
+      ? partials.filter((partial) => {
+          if (partial.scope === 'global') return true
+          return partial.prototype === selectedPrototype && (partial.folder || '') === (selectedProtoEntry?.folder || '')
+        })
+      : partials.filter((partial) => partial.scope === 'global')
+  )
+  const globalTemplateChoices = $derived(templateChoices.filter((partial) => partial.scope === 'global'))
+  const localTemplateChoices = $derived(
+    templateChoices.filter((partial) => partial.scope === 'prototype')
+  )
+  const localTemplateHeading = $derived(
+    selectedPrototype || ''
+  )
+  const startingPageError = $derived(
+    showNewPageFields && !newPagePath.trim()
+      ? 'Please provide a new page path'
+      : null
+  )
+  const canSubmit = $derived(
+    !!kebabName &&
+    !!selectedPrototype &&
+    !nameError &&
+    !startingPageError &&
+    !submitting
+  )
 
   function getApiUrl() {
     const basePath = document.querySelector('base')?.getAttribute('href') || '/'
@@ -63,10 +115,48 @@
         const data = await res.json()
         prototypes = data.prototypes || []
         flows = data.flows || []
+        partials = data.partials || []
       }
     } catch { /* defaults */ } finally { loading = false }
   })
 
+  $effect(() => {
+    if (!selectedPrototype) {
+      copyFrom = ''
+      startingPage = ''
+      newPagePath = ''
+      newPageTemplate = ''
+      return
+    }
+
+    const routes = selectedProtoEntry?.routes || []
+    if (!startingPage || (startingPage !== CREATE_NEW_PAGE_VALUE && !routes.includes(startingPage))) {
+      startingPage = routes[0] || ''
+    }
+
+    if (showNewPageFields) {
+      if (!newPagePath.startsWith(newPagePrefix)) {
+        newPagePath = `${newPagePrefix}new-page`
+      }
+    }
+
+    const activeSelectionStillValid = copyFrom && copyFromFlows.some((f) => f.path === copyFrom)
+    if (activeSelectionStillValid) return
+
+    const matchStartingPage = startingPage && startingPage !== CREATE_NEW_PAGE_VALUE
+      ? copyFromFlows.find((f) => f.route === startingPage)
+      : null
+    copyFrom = matchStartingPage?.path || ''
+  })
+
+  $effect(() => {
+    if (!newPageTemplate) return
+    const stillAvailable = templateChoices.some((choice) => choice.id === newPageTemplate)
+    if (!stillAvailable) {
+      newPageTemplate = ''
+    }
+  })
+
   function handleTitleInput(e: Event) { title = (e.target as HTMLInputElement).value; titleTouched = true }
   function handleTitleBlur() { if (!title.trim()) titleTouched = false }
 
@@ -80,11 +170,15 @@
         body: JSON.stringify({
           name: kebabName,
           title: displayTitle,
-          prototype: selectedPrototype || undefined,
+          prototype: selectedPrototype,
           folder: selectedProtoEntry?.folder || undefined,
-          author: author.trim() || undefined,
           description: description.trim() || undefined,
           copyFrom: copyFrom || undefined,
+          startingPage: showNewPageFields ? newPagePath.trim() : (startingPage || undefined),
+          createPage: showNewPageFields ? {
+            path: newPagePath.trim(),
+            template: newPageTemplate || undefined,
+          } : undefined,
         }),
       })
       const data = await res.json()
@@ -102,7 +196,7 @@
 </Panel.Header>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="p-4 pt-2 space-y-3" onkeydown={handleKeydown}>
+<div class="p-4 pt-2 space-y-5" onkeydown={handleKeydown}>
   <div class="space-y-1">
     <Label for="sb-flow-name">Name</Label>
     <Input id="sb-flow-name" placeholder="e.g. empty-state" autocomplete="off" spellcheck="false" bind:value={name} />
@@ -115,27 +209,95 @@
     <Input id="sb-flow-title" placeholder={autoTitle || 'Auto-derived from name'} value={displayTitle} oninput={handleTitleInput} onblur={handleTitleBlur} />
   </div>
 
-  <div class="grid grid-cols-2 gap-3">
-    <div class="space-y-1">
-      <Label for="sb-flow-prototype">Prototype</Label>
-      <select class="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" id="sb-flow-prototype" bind:value={selectedPrototype} disabled={loading}>
-        <option value="">Global</option>
-        {#each prototypes as p}<option value={p.name}>{p.folder ? `${p.folder} / ${p.name}` : p.name}</option>{/each}
-      </select>
-    </div>
-    <div class="space-y-1">
-      <Label for="sb-flow-copy">Copy from</Label>
-      <select class="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" id="sb-flow-copy" bind:value={copyFrom} disabled={loading}>
+  <div class="space-y-1">
+    <Label for="sb-flow-prototype">Prototype</Label>
+    <select class="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" id="sb-flow-prototype" bind:value={selectedPrototype} disabled={loading}>
+      <option value="">Select prototype</option>
+      {#each prototypes as p}<option value={p.name}>{p.folder ? `${p.folder} / ${p.name}` : p.name}</option>{/each}
+    </select>
+  </div>
+
+  <div class="space-y-1">
+    <Label for="sb-flow-copy">Copy from existing flow <span class="text-muted-foreground">(optional)</span></Label>
+    <select
+      class="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"
+      id="sb-flow-copy"
+      bind:value={copyFrom}
+      disabled={loading || !selectedPrototype}
+    >
+      {#if !selectedPrototype}
+        <option value="">Select a prototype first</option>
+      {:else}
         <option value="">None</option>
-        {#each flows as f}<option value={f.path}>{f.title} ({f.name})</option>{/each}
-      </select>
-    </div>
+        {#each copyFromFlows as f}<option value={f.path}>{f.title} ({f.name})</option>{/each}
+      {/if}
+    </select>
   </div>
 
   <div class="space-y-1">
-    <Label for="sb-flow-author">Author</Label>
-    <Input id="sb-flow-author" placeholder="GitHub handle(s), comma-separated" bind:value={author} />
+    <Label for="sb-flow-starting-page">Starting page <span class="text-muted-foreground">(optional)</span></Label>
+    <select
+      class="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"
+      id="sb-flow-starting-page"
+      bind:value={startingPage}
+      disabled={loading || !selectedPrototype}
+    >
+      {#if !selectedPrototype}
+      <option value="">Select a prototype first</option>
+      {:else}
+      <option value="">None</option>
+      {#each prototypeRoutes as route}
+      <option value={route}>{route}</option>
+      {/each}
+      <option value={CREATE_NEW_PAGE_VALUE}>Create new page</option>
+      {/if}
+    </select>
+    <p class="text-xs text-muted-foreground">Users will be redirected to this page</p>
   </div>
+  
+  {#if showNewPageFields}
+    <div class="space-y-1">
+      <Label for="sb-flow-new-page-path">New page path</Label>
+      <div class="flex items-center gap-2">
+        <span class="text-xs text-muted-foreground font-mono">{newPagePrefix}</span>
+        <Input
+          id="sb-flow-new-page-path"
+          placeholder="new-page"
+          value={newPagePath.startsWith(newPagePrefix) ? newPagePath.slice(newPagePrefix.length) : ''}
+          oninput={(e: Event) => {
+            const suffix = (e.target as HTMLInputElement).value.replace(/^\/+/, '')
+            newPagePath = `${newPagePrefix}${suffix}`
+          }}
+        />
+      </div>
+    </div>
+    <div class="space-y-1">
+        <Label for="sb-flow-new-page-template">Template / recipe</Label>
+        <select
+          class="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"
+          id="sb-flow-new-page-template"
+          bind:value={newPageTemplate}
+          disabled={!selectedPrototype}
+        >
+          <option value="">Blank page</option>
+          {#if globalTemplateChoices.length > 0}
+            <optgroup label="Global">
+              {#each globalTemplateChoices as partial}
+                <option value={partial.id}>{partial.name}</option>
+              {/each}
+            </optgroup>
+          {/if}
+          {#if localTemplateChoices.length > 0}
+            <optgroup label={localTemplateHeading}>
+              {#each localTemplateChoices as partial}
+                <option value={partial.id}>{partial.name}</option>
+              {/each}
+            </optgroup>
+          {/if}
+        </select>
+      </div>
+      {#if startingPageError}<p class="text-sm text-destructive">{startingPageError}</p>{/if}
+    {/if}
 
   <div class="space-y-1">
     <Label for="sb-flow-desc">Description</Label>