@dfosco/storyboard-core 3.6.0 → 3.7.0

package/src/workshop/features/createPage/CreatePageForm.svelte

@@ -0,0 +1,249 @@
+<!--
+  CreatePageForm — workshop form for creating a new page inside a prototype.
+-->
+
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { Button } from '../../../lib/components/ui/button/index.js'
+  import { Input } from '../../../lib/components/ui/input/index.js'
+  import { Label } from '../../../lib/components/ui/label/index.js'
+  import * as Panel from '../../../lib/components/ui/panel/index.js'
+  import * as DropdownMenu from '../../../lib/components/ui/dropdown-menu/index.js'
+  import * as Alert from '../../../lib/components/ui/alert/index.js'
+
+  interface Props { onClose?: () => void }
+  let { onClose }: Props = $props()
+
+  interface PrototypeEntry { name: string; folder?: string }
+  interface PartialEntry {
+    id: string
+    name: string
+    kind: 'template' | 'recipe'
+    scope: 'global' | 'prototype'
+    prototype?: string
+    folder?: string
+  }
+
+  let selectedPrototype = $state('')
+  let pagePath = $state('')
+  let template = $state('')
+  let prototypes: PrototypeEntry[] = $state([])
+  let partials: PartialEntry[] = $state([])
+  let loading = $state(true)
+  let submitting = $state(false)
+  let error: string | null = $state(null)
+  let success: string | null = $state(null)
+  let templateMenuOpen = $state(false)
+
+  const selectedProtoEntry = $derived(
+    selectedPrototype ? prototypes.find((p) => p.name === selectedPrototype) : null
+  )
+  const pagePrefix = $derived(selectedPrototype ? `/${selectedPrototype}/` : '/prototype-name/')
+  const pageSuffix = $derived(
+    pagePath.startsWith(pagePrefix) ? pagePath.slice(pagePrefix.length) : pagePath
+  )
+  const canSubmit = $derived(!!selectedPrototype && !!pageSuffix.trim() && !submitting)
+  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 globalTemplates = $derived(globalTemplateChoices.filter((partial) => partial.kind === 'template'))
+  const globalRecipes = $derived(globalTemplateChoices.filter((partial) => partial.kind === 'recipe'))
+  const localTemplates = $derived(localTemplateChoices.filter((partial) => partial.kind === 'template'))
+  const localRecipes = $derived(localTemplateChoices.filter((partial) => partial.kind === 'recipe'))
+  const templateLabel = $derived(
+    template ? templateChoices.find((choice) => choice.id === template)?.name ?? template : 'Blank page'
+  )
+
+  function getApiUrl() {
+    const basePath = document.querySelector('base')?.getAttribute('href') || '/'
+    return basePath.replace(/\/$/, '') + '/_storyboard/workshop/pages'
+  }
+
+  onMount(async () => {
+    try {
+      const res = await fetch(getApiUrl())
+      if (res.ok) {
+        const data = await res.json()
+        prototypes = data.prototypes || []
+        partials = data.partials || []
+      }
+    } catch { /* defaults */ } finally { loading = false }
+  })
+
+  $effect(() => {
+    if (!selectedPrototype) {
+      pagePath = ''
+      return
+    }
+    if (!pagePath || !pagePath.startsWith(pagePrefix)) {
+      pagePath = `${pagePrefix}new-page`
+    }
+  })
+
+  $effect(() => {
+    if (!template) return
+    const stillAvailable = templateChoices.some((choice) => choice.id === template)
+    if (!stillAvailable) {
+      template = ''
+    }
+  })
+
+  async function submit() {
+    if (!canSubmit) return
+    submitting = true; error = null; success = null
+    try {
+      const res = await fetch(getApiUrl(), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          prototype: selectedPrototype,
+          folder: selectedProtoEntry?.folder || undefined,
+          path: pagePath.trim(),
+          template: template || undefined,
+        }),
+      })
+      const data = await res.json()
+      if (!res.ok) { error = data.error || 'Failed to create page'; return }
+      success = `Created ${data.path}`
+    } catch (err: any) {
+      error = err.message || 'Network error'
+    } finally {
+      submitting = false
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) { if (e.key === 'Enter' && canSubmit) submit() }
+</script>
+
+<Panel.Header>
+  <Panel.Title>Create page</Panel.Title>
+  <Panel.Close />
+</Panel.Header>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="p-4 pt-2 space-y-5" onkeydown={handleKeydown}>
+  <div class="space-y-1">
+    <Label for="sb-page-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-page-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-page-path">Page path</Label>
+    <div class="flex items-center gap-2">
+      <span class="text-xs text-muted-foreground font-mono whitespace-nowrap">{pagePrefix}</span>
+      <Input
+        id="sb-page-path"
+        placeholder="new-page"
+        value={pageSuffix}
+        oninput={(e: Event) => {
+          const suffix = (e.target as HTMLInputElement).value.replace(/^\/+/, '')
+          pagePath = `${pagePrefix}${suffix}`
+        }}
+        disabled={!selectedPrototype}
+      />
+    </div>
+  </div>
+
+  <div class="space-y-1">
+    <Label>Template / recipe</Label>
+    <DropdownMenu.Root bind:open={templateMenuOpen}>
+      <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+          <button
+            {...props}
+            class="flex h-9 w-full items-center justify-between 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"
+            disabled={!selectedPrototype}
+          >
+            <span class={template ? 'text-foreground' : 'text-muted-foreground'}>{templateLabel}</span>
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground"><path d="m6 9 6 6 6-6"/></svg>
+          </button>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content side="left" align="start" sideOffset={8} class="min-w-[220px]">
+        {#if template}
+          <DropdownMenu.Item onclick={() => { template = ''; templateMenuOpen = false }}>
+            <span class="text-muted-foreground">Blank page</span>
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator />
+        {/if}
+
+        {#if globalTemplates.length > 0}
+          <DropdownMenu.Group>
+            <DropdownMenu.GroupHeading>Templates</DropdownMenu.GroupHeading>
+            {#each globalTemplates as item (item.id)}
+              <DropdownMenu.Item onclick={() => { template = item.id; templateMenuOpen = false }}>
+                {item.name}
+              </DropdownMenu.Item>
+            {/each}
+          </DropdownMenu.Group>
+        {/if}
+
+        {#if localTemplates.length > 0}
+          <DropdownMenu.Separator />
+          <DropdownMenu.Group>
+            <DropdownMenu.GroupHeading>{localTemplateHeading} / Templates</DropdownMenu.GroupHeading>
+            {#each localTemplates as item (item.id)}
+              <DropdownMenu.Item onclick={() => { template = item.id; templateMenuOpen = false }}>
+                {item.name}
+              </DropdownMenu.Item>
+            {/each}
+          </DropdownMenu.Group>
+        {/if}
+
+        {#if globalRecipes.length > 0}
+          <DropdownMenu.Separator />
+          <DropdownMenu.Group>
+            <DropdownMenu.GroupHeading>Recipes</DropdownMenu.GroupHeading>
+            {#each globalRecipes as item (item.id)}
+              <DropdownMenu.Item onclick={() => { template = item.id; templateMenuOpen = false }}>
+                {item.name}
+              </DropdownMenu.Item>
+            {/each}
+          </DropdownMenu.Group>
+        {/if}
+
+        {#if localRecipes.length > 0}
+          <DropdownMenu.Separator />
+          <DropdownMenu.Group>
+            <DropdownMenu.GroupHeading>{localTemplateHeading} / Recipes</DropdownMenu.GroupHeading>
+            {#each localRecipes as item (item.id)}
+              <DropdownMenu.Item onclick={() => { template = item.id; templateMenuOpen = false }}>
+                {item.name}
+              </DropdownMenu.Item>
+            {/each}
+          </DropdownMenu.Group>
+        {/if}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  </div>
+
+  {#if error}<Alert.Root variant="destructive"><Alert.Description>{error}</Alert.Description></Alert.Root>{/if}
+  {#if success}<Alert.Root><Alert.Description class="text-success">{success}</Alert.Description></Alert.Root>{/if}
+</div>
+
+<Panel.Footer>
+  <Button variant="outline" onclick={onClose}>Cancel</Button>
+  <Button onclick={submit} disabled={!canSubmit}>{submitting ? 'Creating…' : 'Create page'}</Button>
+</Panel.Footer>

package/src/workshop/features/createPage/index.js

@@ -0,0 +1,11 @@
+/**
+ * Create Page feature — workshop form for creating pages inside a prototype.
+ */
+
+import CreatePageForm from './CreatePageForm.svelte'
+
+export const name = 'createPage'
+export const label = 'Create page'
+export const icon = '📄'
+export const overlayId = 'createPage'
+export const overlay = CreatePageForm

package/src/workshop/features/createPrototype/CreatePrototypeForm.svelte

@@ -27,7 +27,14 @@
   let isExternal = $state(false)
   let externalUrl = $state('')
 
-  interface Partial { directory: string; name: string; globals?: string[] }
+  interface Partial {
+    id: string
+    name: string
+    kind: 'template' | 'recipe'
+    scope: 'global' | 'prototype'
+    prototype?: string
+    folder?: string
+  }
 
   let folders: string[] = $state([])
   let partials: Partial[] = $state([])
@@ -61,9 +68,23 @@
   })
   const canSubmit = $derived(!!kebabName && !nameError && !submitting && (!isExternal || (!!externalUrl.trim() && !urlError)))
 
-  const templateLabel = $derived(partial ? partials.find(p => p.name === partial)?.name ?? partial : 'No template')
-  const templates = $derived(partials.filter(p => p.directory === 'template' || p.directory === 'templates'))
-  const recipes = $derived(partials.filter(p => p.directory === 'recipe' || p.directory === 'recipes'))
+  const selectedFolderLabel = $derived(folder ? `${folder}.folder` : '')
+  const scopedPartials = $derived(
+    partials.filter((p) => {
+      if (p.scope === 'global') return true
+      if (!folder) return false
+      return p.folder === folder
+    })
+  )
+  const templateLabel = $derived(
+    partial ? scopedPartials.find((p) => p.id === partial)?.name ?? partial : 'No template'
+  )
+  const templates = $derived(scopedPartials.filter((p) => p.kind === 'template'))
+  const recipes = $derived(scopedPartials.filter((p) => p.kind === 'recipe'))
+  const globalTemplates = $derived(templates.filter((p) => p.scope === 'global'))
+  const globalRecipes = $derived(recipes.filter((p) => p.scope === 'global'))
+  const localTemplates = $derived(templates.filter((p) => p.scope === 'prototype'))
+  const localRecipes = $derived(recipes.filter((p) => p.scope === 'prototype'))
   let templateMenuOpen = $state(false)
 
   function getApiUrl() {
@@ -82,6 +103,14 @@
     } catch { /* defaults */ } finally { loading = false }
   })
 
+  $effect(() => {
+    if (!partial) return
+    const stillAvailable = scopedPartials.some((p) => p.id === partial)
+    if (!stillAvailable) {
+      partial = ''
+    }
+  })
+
   function handleTitleInput(e: Event) { title = (e.target as HTMLInputElement).value; titleTouched = true }
   function handleTitleBlur() { if (!title.trim()) titleTouched = false }
 
@@ -182,27 +211,51 @@
             {#if templates.length > 0}
               <DropdownMenu.Group>
                 <DropdownMenu.GroupHeading>Templates</DropdownMenu.GroupHeading>
-                {#each templates as t (t.name)}
-                  <DropdownMenu.Item onclick={() => { partial = t.name; templateMenuOpen = false }}>
-                    {t.name}
-                  </DropdownMenu.Item>
-                {/each}
-              </DropdownMenu.Group>
-            {/if}
+                  {#each globalTemplates as t (t.id)}
+                    <DropdownMenu.Item onclick={() => { partial = t.id; templateMenuOpen = false }}>
+                      {t.name}
+                    </DropdownMenu.Item>
+                  {/each}
+                </DropdownMenu.Group>
+              {/if}
 
-            {#if recipes.length > 0}
-              <DropdownMenu.Separator />
-              <DropdownMenu.Group>
-                <DropdownMenu.GroupHeading>Recipes</DropdownMenu.GroupHeading>
-                {#each recipes as r (r.name)}
-                  <DropdownMenu.Item onclick={() => { partial = r.name; templateMenuOpen = false }}>
-                    {r.name}
-                  </DropdownMenu.Item>
-                {/each}
-              </DropdownMenu.Group>
-            {/if}
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
+              {#if localTemplates.length > 0}
+                <DropdownMenu.Separator />
+                <DropdownMenu.Group>
+                  <DropdownMenu.GroupHeading>{selectedFolderLabel || 'Prototype local'} / Templates</DropdownMenu.GroupHeading>
+                  {#each localTemplates as t (t.id)}
+                    <DropdownMenu.Item onclick={() => { partial = t.id; templateMenuOpen = false }}>
+                      {t.name}
+                    </DropdownMenu.Item>
+                  {/each}
+                </DropdownMenu.Group>
+              {/if}
+
+              {#if globalRecipes.length > 0}
+                <DropdownMenu.Separator />
+                <DropdownMenu.Group>
+                  <DropdownMenu.GroupHeading>Recipes</DropdownMenu.GroupHeading>
+                  {#each globalRecipes as r (r.id)}
+                    <DropdownMenu.Item onclick={() => { partial = r.id; templateMenuOpen = false }}>
+                      {r.name}
+                    </DropdownMenu.Item>
+                  {/each}
+                </DropdownMenu.Group>
+              {/if}
+
+              {#if localRecipes.length > 0}
+                <DropdownMenu.Separator />
+                <DropdownMenu.Group>
+                  <DropdownMenu.GroupHeading>{selectedFolderLabel || 'Prototype local'} / Recipes</DropdownMenu.GroupHeading>
+                  {#each localRecipes as r (r.id)}
+                    <DropdownMenu.Item onclick={() => { partial = r.id; templateMenuOpen = false }}>
+                      {r.name}
+                    </DropdownMenu.Item>
+                  {/each}
+                </DropdownMenu.Group>
+              {/if}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
       </div>
     {/if}
   </div>

package/src/workshop/features/createPrototype/server.js

@@ -17,17 +17,13 @@
 
 import fs from 'node:fs'
 import path from 'node:path'
+import {
+  buildTemplateRecipeIndex,
+  resolveTemplateRecipeEntry,
+} from '../templateIndex.js'
 
 const FLOW_SKELETON = JSON.stringify({ $global: [] }, null, 2) + '\n'
 
-/**
- * Check whether a partial entry is a template (vs recipe).
- * Accepts both singular and plural forms: "template" or "templates".
- */
-function isTemplate(partialEntry) {
-  return partialEntry.directory === 'template' || partialEntry.directory === 'templates'
-}
-
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -120,9 +116,9 @@ function generateBlankIndexJsx(componentName, title) {
  * @param {string} title - Human-readable title
  */
 function generateIndexJsx({ partialEntry, componentFile, componentName, title }) {
-  const importPath = `@/${partialEntry.directory}/${partialEntry.name}/${componentFile}`
+  const importPath = `@/${partialEntry.baseDir}/${partialEntry.name}/${componentFile}`
 
-  if (isTemplate(partialEntry)) {
+  if (partialEntry.kind === 'template') {
     return `import ${componentFile} from '${importPath}'
 
 export default function ${componentName}() {
@@ -182,12 +178,14 @@ function generatePrototypeJson({ title, author, description, partialEntry, url }
  */
 export function createPrototypesHandler(ctx) {
   const { root, sendJson, workshopConfig = {} } = ctx
-  const partials = workshopConfig.partials || []
+  const getTemplateRecipes = () => buildTemplateRecipeIndex(root, workshopConfig.partials)
 
   return async (req, res, { body, path: routePath, method }) => {
+    const templateRecipes = getTemplateRecipes()
+
     if (routePath === '/prototypes' && method === 'GET') {
       const folders = listFolders(root)
-      sendJson(res, 200, { folders, partials })
+      sendJson(res, 200, { folders, partials: templateRecipes })
       return
     }
 
@@ -282,11 +280,11 @@ export function createPrototypesHandler(ctx) {
 
       // Look up recipe in config (optional — blank prototype if none)
       const partialEntry = partialName
-        ? partials.find((r) => r.name === partialName)
+        ? resolveTemplateRecipeEntry(templateRecipes, partialName)
         : null
 
       if (partialName && !partialEntry) {
-        const validNames = partials.map((r) => r.name).join(', ')
+        const validNames = templateRecipes.map((r) => r.id).join(', ')
         sendJson(res, 400, { error: `Unknown recipe "${partialName}". Available: ${validNames}` })
         return
       }
@@ -304,10 +302,10 @@ export function createPrototypesHandler(ctx) {
       if (!partialEntry) {
         content = generateBlankIndexJsx(componentName, title)
       } else {
-        const partialDir = path.join(root, 'src', partialEntry.directory, partialEntry.name)
+        const partialDir = path.join(root, 'src', partialEntry.baseDir, partialEntry.name)
         const componentFile = findComponentFile(partialDir)
         if (!componentFile) {
-          sendJson(res, 400, { error: `No .jsx or .tsx file found in src/${partialEntry.directory}/${partialEntry.name}/` })
+          sendJson(res, 400, { error: `No .jsx or .tsx file found in src/${partialEntry.baseDir}/${partialEntry.name}/` })
           return
         }
 

package/src/workshop/features/registry-server.js

@@ -18,4 +18,5 @@ import { createFlowsHandler } from './createFlow/server.js'
 export const serverFeatures = {
   createPrototype: { serverSetup: createPrototypesHandler },
   createFlow: { serverSetup: createFlowsHandler },
+  createPage: { serverSetup: createFlowsHandler },
 }

package/src/workshop/features/registry.js

@@ -12,6 +12,7 @@
 
 import * as createPrototype from './createPrototype/index.js'
 import * as createFlow from './createFlow/index.js'
+import * as createPage from './createPage/index.js'
 import * as createCanvas from './createCanvas/index.js'
 
 /**
@@ -20,5 +21,6 @@ import * as createCanvas from './createCanvas/index.js'
 export const features = {
   createPrototype,
   createFlow,
+  createPage,
   createCanvas,
 }

package/src/workshop/features/templateIndex.js

@@ -0,0 +1,155 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { parse as parseJsonc } from 'jsonc-parser'
+
+const TEMPLATE_DIR_NAMES = new Set(['template', 'templates'])
+const RECIPE_DIR_NAMES = new Set(['recipe', 'recipes'])
+const PARTIAL_DIR_NAMES = new Set([...TEMPLATE_DIR_NAMES, ...RECIPE_DIR_NAMES])
+
+function normalizeSlashes(value) {
+  return value.replaceAll('\\', '/')
+}
+
+function isExternalPrototype(prototypePath) {
+  try {
+    const raw = fs.readFileSync(prototypePath, 'utf-8')
+    const parsed = parseJsonc(raw)
+    return typeof parsed?.url === 'string' && parsed.url.trim().length > 0
+  } catch {
+    return false
+  }
+}
+
+function isPartialDirName(directory) {
+  return PARTIAL_DIR_NAMES.has(directory)
+}
+
+function toPartialKind(directory) {
+  if (TEMPLATE_DIR_NAMES.has(directory)) return 'template'
+  if (RECIPE_DIR_NAMES.has(directory)) return 'recipe'
+  return null
+}
+
+function listPrototypeDirs(root) {
+  const prototypesDir = path.join(root, 'src', 'prototypes')
+  if (!fs.existsSync(prototypesDir)) return []
+
+  const results = []
+
+  function scanDir(dir, folder) {
+    if (!fs.existsSync(dir)) return
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      if (!entry.isDirectory()) continue
+      if (entry.name.endsWith('.folder')) {
+        scanDir(path.join(dir, entry.name), entry.name.replace(/\.folder$/, ''))
+        continue
+      }
+
+      const protoDir = path.join(dir, entry.name)
+      const prototypeFile = fs.readdirSync(protoDir).find((f) => f.endsWith('.prototype.json'))
+      if (!prototypeFile) continue
+      if (isExternalPrototype(path.join(protoDir, prototypeFile))) continue
+
+      results.push({
+        name: entry.name,
+        folder,
+        dir: protoDir,
+      })
+    }
+  }
+
+  scanDir(prototypesDir)
+  return results
+}
+
+function makeId(prefix, directory, name, prototype, folder) {
+  if (prefix === 'global') {
+    return `global:${directory}/${name}`
+  }
+  const folderPart = folder ? `${folder}/` : ''
+  return `prototype:${folderPart}${prototype}:${directory}/${name}`
+}
+
+export function buildTemplateRecipeIndex(root, configPartials = []) {
+  const srcRoot = path.join(root, 'src')
+  const results = []
+  const seenIds = new Set()
+
+  for (const partial of configPartials) {
+    if (!partial || !isPartialDirName(partial.directory) || !partial.name) continue
+    const kind = toPartialKind(partial.directory)
+    if (!kind) continue
+    const id = makeId('global', partial.directory, partial.name)
+    if (seenIds.has(id)) continue
+    seenIds.add(id)
+    results.push({
+      id,
+      name: partial.name,
+      directory: partial.directory,
+      kind,
+      scope: 'global',
+      baseDir: partial.directory,
+      globals: Array.isArray(partial.globals) ? partial.globals : undefined,
+    })
+  }
+
+  const prototypes = listPrototypeDirs(root)
+  for (const proto of prototypes) {
+    for (const directory of PARTIAL_DIR_NAMES) {
+      const localPartialsDir = path.join(proto.dir, directory)
+      if (!fs.existsSync(localPartialsDir)) continue
+
+      for (const entry of fs.readdirSync(localPartialsDir, { withFileTypes: true })) {
+        if (!entry.isDirectory()) continue
+        const kind = toPartialKind(directory)
+        if (!kind) continue
+
+        const baseDir = normalizeSlashes(path.relative(srcRoot, localPartialsDir))
+        const id = makeId('prototype', directory, entry.name, proto.name, proto.folder)
+        if (seenIds.has(id)) continue
+        seenIds.add(id)
+        results.push({
+          id,
+          name: entry.name,
+          directory,
+          kind,
+          scope: 'prototype',
+          prototype: proto.name,
+          ...(proto.folder ? { folder: proto.folder } : {}),
+          baseDir,
+        })
+      }
+    }
+  }
+
+  return results.sort((a, b) => {
+    if (a.scope !== b.scope) return a.scope.localeCompare(b.scope)
+    if ((a.prototype || '') !== (b.prototype || '')) return (a.prototype || '').localeCompare(b.prototype || '')
+    if ((a.folder || '') !== (b.folder || '')) return (a.folder || '').localeCompare(b.folder || '')
+    if (a.kind !== b.kind) return a.kind.localeCompare(b.kind)
+    return a.name.localeCompare(b.name)
+  })
+}
+
+export function resolveTemplateRecipeEntry(entries, templateValue, { prototype, folder } = {}) {
+  if (!templateValue || typeof templateValue !== 'string') return null
+
+  const trimmed = templateValue.trim()
+  if (!trimmed) return null
+
+  const byId = entries.find((entry) => entry.id === trimmed)
+  if (byId) return byId
+
+  const exactScoped = entries.find((entry) =>
+    entry.scope === 'prototype' &&
+    entry.name === trimmed &&
+    entry.prototype === prototype &&
+    (entry.folder || '') === (folder || '')
+  )
+  if (exactScoped) return exactScoped
+
+  const globalMatch = entries.find((entry) => entry.scope === 'global' && entry.name === trimmed)
+  if (globalMatch) return globalMatch
+
+  return entries.find((entry) => entry.name === trimmed) || null
+}

package/toolbar.config.json

@@ -78,6 +78,7 @@
         { "type": "header", "label": "Create" },
         { "id": "workshop/create-prototype", "label": "New prototype", "type": "default", "modes": ["*"], "feature": "createPrototype" },
         { "id": "workshop/create-flow", "label": "New flow", "type": "default", "modes": ["*"], "feature": "createFlow" },
+        { "id": "workshop/create-page", "label": "New page",  "type": "default", "modes": ["*"], "feature": "createPage" },
         { "id": "workshop/create-canvas", "label": "New canvas", "type": "default", "modes": ["*"], "feature": "createCanvas" },
         { "type": "footer", "label": "Only available in dev environment" }
       ]
@@ -101,7 +102,7 @@
       "modes": ["*"]
     },    
     "viewfinder": {
-      "label": "Index page",
+      "label": "Go to index page",
       "render": "link",
       "surface": "command-list",
       "modes": ["*"],