@dfosco/storyboard-core 3.2.0 → 3.3.0

package/src/mountStoryboardCore.js

@@ -0,0 +1,223 @@
+/**
+ * mountStoryboardCore — single entry point for consumer apps.
+ *
+ * Initializes all storyboard systems (URL state, history, comments, devtools)
+ * and mounts the compiled Svelte UI. Consumers call this once at app startup.
+ *
+ * Usage:
+ *   import { mountStoryboardCore } from '@dfosco/storyboard-core'
+ *   import storyboardConfig from '../storyboard.config.json'
+ *   mountStoryboardCore(storyboardConfig, { basePath: import.meta.env.BASE_URL })
+ */
+
+import { installHideParamListener } from './interceptHideParams.js'
+import { installHistorySync } from './hideMode.js'
+import { installBodyClassSync } from './bodyClasses.js'
+import { initCommentsConfig, isCommentsEnabled } from './comments/config.js'
+import { initFeatureFlags } from './featureFlags.js'
+import { initPlugins } from './plugins.js'
+import { initUIConfig } from './uiConfig.js'
+
+let _mounted = false
+
+/**
+ * Apply the saved theme to Primer CSS attributes immediately, before
+ * React or Svelte mount. This prevents a flash of wrong-theme content.
+ * Reads the same `sb-color-scheme` localStorage key used by themeStore.
+ */
+function applyEarlyTheme() {
+  if (typeof document === 'undefined') return
+
+  const stored =
+    typeof localStorage !== 'undefined'
+      ? localStorage.getItem('sb-color-scheme')
+      : null
+  const theme = stored || 'system'
+  const el = document.documentElement
+
+  // Resolve "system" to an actual theme for data-sb-theme
+  let resolved = theme
+  if (theme === 'system') {
+    resolved =
+      typeof window !== 'undefined' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+  }
+
+  el.setAttribute('data-sb-theme', resolved)
+
+  if (theme === 'system') {
+    el.setAttribute('data-color-mode', 'auto')
+    el.setAttribute('data-light-theme', 'light')
+    el.setAttribute('data-dark-theme', 'dark')
+  } else if (resolved.startsWith('dark')) {
+    el.setAttribute('data-color-mode', 'dark')
+    el.setAttribute('data-dark-theme', resolved)
+    el.setAttribute('data-light-theme', 'light')
+  } else {
+    el.setAttribute('data-color-mode', 'light')
+    el.setAttribute('data-light-theme', resolved)
+    el.setAttribute('data-dark-theme', 'dark')
+  }
+}
+
+/**
+ * Inject the compiled UI stylesheet if not already present.
+ */
+async function injectUIStyles() {
+  if (document.querySelector('[data-storyboard-ui-css]')) return
+
+  try {
+    // Dynamic import of CSS — Vite handles this as a side-effect import.
+    // In consumer repos: loads dist/storyboard-ui.css
+    // In source repo: Vite injects component styles via HMR
+    await import('@dfosco/storyboard-core/ui-runtime/style.css')
+  } catch {
+    // Graceful fallback — CSS may already be loaded by other means
+  }
+}
+
+/**
+ * Mount the full storyboard core system.
+ *
+ * @param {object} [config={}] - Contents of storyboard.config.json
+ * @param {object} [options={}]
+ * @param {string} [options.basePath='/'] - Base URL path (e.g. import.meta.env.BASE_URL)
+ * @param {HTMLElement} [options.container=document.body] - Where to mount devtools
+ */
+export async function mountStoryboardCore(config = {}, options = {}) {
+  if (_mounted) return
+  _mounted = true
+
+  const basePath = options.basePath || '/'
+
+  // Apply saved theme to DOM immediately — before Svelte/React mount
+  applyEarlyTheme()
+
+  // Initialize framework-agnostic systems
+  installHideParamListener()
+  installHistorySync()
+  installBodyClassSync()
+
+  // Initialize config-driven systems
+  if (config.featureFlags) {
+    initFeatureFlags(config.featureFlags)
+  }
+
+  if (config.plugins) {
+    initPlugins(config.plugins)
+  }
+
+  if (config.ui) {
+    initUIConfig(config.ui)
+  }
+
+  // Initialize comments config (framework-agnostic)
+  if (config.comments) {
+    initCommentsConfig(config, { basePath })
+  }
+
+  // Inject compiled UI styles
+  injectUIStyles()
+
+  // Load and merge toolbar config.
+  // Core defaults come from toolbar.config.json (bundled).
+  // Client can provide overrides via config.toolbar or a toolbar.config.json at repo root.
+  const { deepMerge } = await import('./loader.js')
+  const defaultConfig = (await import('../toolbar.config.json')).default
+  let toolbarConfig = config.toolbar
+    ? deepMerge(defaultConfig, config.toolbar)
+    : { ...defaultConfig }
+
+  // Inject repository URL from storyboard.config.json into the command menu
+  if (config.repository?.owner && config.repository?.name) {
+    const repoUrl = `https://github.com/${config.repository.owner}/${config.repository.name}`
+    const commandMenu = toolbarConfig.menus?.command
+    if (commandMenu?.actions) {
+      const repoAction = commandMenu.actions.find(a => a.id === 'core/repository')
+      if (repoAction) repoAction.url = repoUrl
+    }
+  }
+
+  // Skip all UI mounting when loaded inside a prototype embed iframe
+  const isEmbed = typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('_sb_embed')
+  if (isEmbed) return
+
+  // Dynamically import the compiled UI bundle.
+  // Uses the package self-reference so resolution differs by context:
+  //   Source repo: Vite alias overrides to src/ui-entry.js (source, HMR)
+  //   Consumer repos: package.json exports resolve to dist/storyboard-ui.js (compiled)
+  const ui = await import('@dfosco/storyboard-core/ui-runtime')
+
+  // Mount devtools (CoreUIBar)
+  await ui.mountDevTools({
+    container: options.container,
+    basePath,
+    toolbarConfig,
+  })
+
+  // Mount comments system if configured
+  if (isCommentsEnabled()) {
+    ui.mountComments()
+  }
+
+  // Show pending workshop notifications (e.g. canvas created before Vite reload)
+  showPendingNotification(basePath)
+}
+
+/**
+ * Check sessionStorage for a pending workshop creation notification.
+ * Vite does a full-reload when new files are created, so the create form's
+ * success message is lost. This shows a temporary toast with the link.
+ */
+function showPendingNotification(basePath) {
+  const KEYS = ['sb-canvas-created', 'sb-prototype-created', 'sb-flow-created']
+  for (const key of KEYS) {
+    try {
+      const raw = sessionStorage.getItem(key)
+      if (!raw) continue
+      sessionStorage.removeItem(key)
+      const { success: message, route } = JSON.parse(raw)
+      if (!message) continue
+      showToast(message, route, basePath)
+      return
+    } catch { /* ignore malformed session entry */ }
+  }
+}
+
+function showToast(message, route, basePath) {
+  const toast = document.createElement('div')
+  Object.assign(toast.style, {
+    position: 'fixed',
+    bottom: '7rem',
+    right: '1.5rem',
+    zIndex: '10000',
+    padding: '0.75rem 1rem',
+    borderRadius: '0.75rem',
+    background: 'var(--color-popover, #fff)',
+    color: 'var(--color-foreground, #1e293b)',
+    fontSize: '0.8125rem',
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif",
+    boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
+    border: '1px solid var(--color-border, #cbd5e1)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.25rem',
+    opacity: '0',
+    transition: 'opacity 0.15s ease',
+    maxWidth: '280px',
+  })
+
+  const href = route?.startsWith('/') ? (basePath.replace(/\/$/, '') + route) : route
+  toast.innerHTML = `<span style="font-weight:500">✓ ${message.replace(/</g, '&lt;')}</span>`
+    + (href ? `<a href="${href}" style="color:var(--color-primary, #0969da);text-decoration:underline;font-size:0.8125rem">Open canvas</a>` : '')
+
+  document.body.appendChild(toast)
+  requestAnimationFrame(() => { toast.style.opacity = '1' })
+
+  setTimeout(() => {
+    toast.style.opacity = '0'
+    setTimeout(() => toast.remove(), 300)
+  }, 8000)
+}

package/src/scaffold.js

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+/**
+ * storyboard-scaffold — sync scaffold files from @dfosco/storyboard-core.
+ *
+ * Reads scaffold/manifest.json and copies files to the consumer repo:
+ * - "scaffold" mode: only if target doesn't exist (never overwrites config)
+ * - "updateable" mode: always overwrites with latest (skills, scripts)
+ *
+ * Usage:
+ *   npx storyboard-scaffold
+ */
+
+import fs from 'node:fs'
+import path from 'node:path'
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname)
+const scaffoldRoot = path.resolve(__dirname, '..', 'scaffold')
+const consumerRoot = process.cwd()
+
+const manifestPath = path.join(scaffoldRoot, 'manifest.json')
+if (!fs.existsSync(manifestPath)) {
+  console.error('❌ Could not find scaffold/manifest.json in @dfosco/storyboard-core')
+  process.exit(1)
+}
+
+const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'))
+
+function copyFileSync(src, dest) {
+  const dir = path.dirname(dest)
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true })
+  }
+  fs.copyFileSync(src, dest)
+}
+
+function copyDirSync(src, dest) {
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true })
+  }
+  const entries = fs.readdirSync(src, { withFileTypes: true })
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name)
+    const destPath = path.join(dest, entry.name)
+    if (entry.isDirectory()) {
+      copyDirSync(srcPath, destPath)
+    } else {
+      copyFileSync(srcPath, destPath)
+    }
+  }
+}
+
+let created = 0
+let updated = 0
+let skipped = 0
+
+for (const file of manifest.files) {
+  const srcPath = path.join(scaffoldRoot, path.relative('scaffold', file.source))
+  const destPath = path.join(consumerRoot, file.target)
+
+  if (file.directory) {
+    if (file.mode === 'updateable') {
+      copyDirSync(srcPath, destPath)
+      updated++
+      console.log(`  ✔ Updated ${file.target} (sync)`)
+    } else {
+      if (!fs.existsSync(destPath)) {
+        copyDirSync(srcPath, destPath)
+        created++
+        console.log(`  ✔ Created ${file.target} (scaffold)`)
+      } else {
+        skipped++
+        console.log(`  ⏭ Skipped ${file.target} (already exists)`)
+      }
+    }
+    continue
+  }
+
+  if (file.mode === 'scaffold') {
+    if (fs.existsSync(destPath)) {
+      skipped++
+      console.log(`  ⏭ Skipped ${file.target} (already exists)`)
+    } else {
+      copyFileSync(srcPath, destPath)
+      created++
+      console.log(`  ✔ Created ${file.target} (scaffold)`)
+    }
+  } else if (file.mode === 'updateable') {
+    copyFileSync(srcPath, destPath)
+    updated++
+    console.log(`  ✔ Updated ${file.target} (sync)`)
+  }
+
+  // Make shell scripts executable
+  if (file.target.endsWith('.sh')) {
+    fs.chmodSync(destPath, 0o755)
+  }
+}
+
+console.log('')
+console.log(`✔ Scaffold complete: ${created} created, ${updated} updated, ${skipped} skipped.`)

package/src/stores/themeStore.ts

@@ -1,9 +1,11 @@
 /**
  * Theme Store — manages the active color scheme for the entire app.
  *
- * Reads/writes `sb-color-scheme` in localStorage, sets the `data-sb-theme`
- * attribute on `<html>`, and dispatches a `storyboard:theme:changed` custom
- * event so that non-Svelte consumers (React ThemeProvider, etc.) can react.
+ * Reads/writes `sb-color-scheme` in localStorage, sets Primer CSS attributes
+ * (`data-color-mode`, `data-light-theme`, `data-dark-theme`) and the internal
+ * `data-sb-theme` attribute on `<html>`, and dispatches a
+ * `storyboard:theme:changed` custom event so that non-Svelte consumers
+ * (React ThemeProvider, etc.) can react.
  *
  * Supports a "system" value that follows the OS preference via
  * `prefers-color-scheme`, updating automatically when the user changes
@@ -86,9 +88,28 @@ function snapshot(theme: ThemeValue): ThemeState {
 let _current: ThemeValue = readStoredTheme()
 const _store = writable<ThemeState>(snapshot(_current))
 
-function _applyToDOM(resolved: string): void {
+function _applyToDOM(theme: ThemeValue, resolved: string): void {
   if (typeof document === 'undefined') return
-  document.documentElement.setAttribute('data-sb-theme', resolved)
+  const el = document.documentElement
+
+  // Internal attribute
+  el.setAttribute('data-sb-theme', resolved)
+
+  // Primer CSS attributes — these drive @primer/react ThemeProvider and
+  // Primer CSS custom-property layers without needing React state updates.
+  if (theme === 'system') {
+    el.setAttribute('data-color-mode', 'auto')
+    el.setAttribute('data-light-theme', 'light')
+    el.setAttribute('data-dark-theme', 'dark')
+  } else if (resolved.startsWith('dark')) {
+    el.setAttribute('data-color-mode', 'dark')
+    el.setAttribute('data-dark-theme', resolved)
+    el.setAttribute('data-light-theme', 'light')
+  } else {
+    el.setAttribute('data-color-mode', 'light')
+    el.setAttribute('data-light-theme', resolved)
+    el.setAttribute('data-dark-theme', 'dark')
+  }
 }
 
 function _dispatchEvent(theme: ThemeValue, resolved: string): void {
@@ -117,7 +138,7 @@ export function setTheme(value: ThemeValue): void {
 
   const state = snapshot(value)
   _store.set(state)
-  _applyToDOM(state.resolved)
+  _applyToDOM(value, state.resolved)
   _dispatchEvent(value, state.resolved)
 }
 
@@ -137,7 +158,7 @@ if (typeof window !== 'undefined') {
       if (_current !== 'system') return
       const state = snapshot('system')
       _store.set(state)
-      _applyToDOM(state.resolved)
+      _applyToDOM('system', state.resolved)
       _dispatchEvent('system', state.resolved)
     })
 }
@@ -146,4 +167,4 @@ if (typeof window !== 'undefined') {
 // Boot — apply the stored theme immediately on import
 // ---------------------------------------------------------------------------
 
-_applyToDOM(resolveTheme(_current))
+_applyToDOM(_current, resolveTheme(_current))

package/src/styles/tailwind.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 @source "../**/*.{svelte,js,ts}";
 
 @custom-variant dark (&:where([data-sb-theme^="dark"], [data-sb-theme^="dark"] *));
@@ -118,3 +119,18 @@
     --smooth-corners: 4;
   }
 }
+
+/*
+ * Prevent unlayered CSS framework resets (e.g. Primer's `button { border-radius: 0 }`)
+ * from overriding layered Tailwind utilities on storyboard UI elements.
+ * `revert-layer` falls back to the value from the cascade layers (Tailwind utilities).
+ */
+[data-slot="button"] {
+  border-radius: revert-layer;
+  font-weight: revert-layer;
+}
+
+[data-slot="panel-content"] select,
+[data-slot="panel-content"] input {
+  border-radius: revert-layer;
+}

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

@@ -502,6 +502,10 @@
         {/if}
       {:else}
         <!-- Canvas view -->
+        <div class="canvasWarning">
+          <Icon size={14} name="primer/alert" color="#9a6700" offsetY={-1} />
+          <span>Canvas is an experimental feature. Use with caution.</span>
+        </div>
         {#each canvasFolders as folder (folder.dirName)}
           <section class="folderGroup" class:folderGroupOpen={isExpanded(`folder:${folder.dirName}`)}>
             <button
@@ -958,4 +962,18 @@
     max-width: 720px;
     margin: 0 auto;
   }
+
+  .canvasWarning {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    margin-bottom: 16px;
+    border-radius: 8px;
+    border: 1px solid var(--borderColor-default, var(--color-border, #d0d7de));
+    background: var(--bgColor-attention-muted, #3d2e00);
+    color: var(--fgColor-attention, #9a6700);
+    font-size: 13px;
+    line-height: 1.4;
+  }
 </style>

package/src/ui-entry.js

@@ -0,0 +1,30 @@
+/**
+ * UI entry point — compiled into dist/storyboard-ui.js via Vite library build.
+ *
+ * This file is the entry for the pre-compiled Svelte UI bundle.
+ * It re-exports all UI mount functions that depend on Svelte.
+ * Consumers never import this directly — they use mountStoryboardCore()
+ * or the package self-reference '@dfosco/storyboard-core/ui-runtime'.
+ */
+
+// Tailwind utility + component CSS — bundled into storyboard-ui.css
+import './styles/tailwind.css'
+
+// Comments CSS
+import './comments/ui/comment-layout.css'
+import './comments/ui/comments.css'
+
+// Modes CSS (design mode body classes)
+import './modes.css'
+
+// CoreUIBar (floating toolbar)
+export { mountDevTools, unmountDevTools } from './devtools.js'
+
+// Comments UI (Svelte-based comment pins, windows, drawers)
+export { mountComments } from './comments/ui/mount.js'
+
+// Viewfinder dashboard (Svelte component)
+export { mountViewfinder, unmountViewfinder } from './ui/viewfinder.ts'
+
+// Design modes (Svelte component)
+export { mountDesignModesUI as mountDesignModes } from './ui/design-modes.ts'

package/src/vite/server-plugin.js

@@ -57,14 +57,6 @@ function readConfig(root) {
   }
 }
 
-/**
- * Check if any workshop feature is enabled.
- */
-function hasAnyWorkshopFeature(workshopConfig) {
-  if (!workshopConfig?.features) return false
-  return Object.values(workshopConfig.features).some(Boolean)
-}
-
 /**
  * Core storyboard server Vite plugin.
  */
@@ -114,17 +106,17 @@ export default function storyboardServer() {
       // Wire canvas API routes (always enabled — CRUD for .canvas.jsonl files)
       routeHandlers.set('canvas', createCanvasHandler({ root, sendJson }))
 
-      // Watch core-ui.config.json for changes — trigger full reload so
+      // Watch toolbar.config.json for changes — trigger full reload so
       // CoreUIBar.svelte picks up menu/mode config changes during dev
-      const coreUIConfigPath = path.resolve(
+      const toolbarConfigPath = path.resolve(
         path.dirname(new URL(import.meta.url).pathname),
-        '../../core-ui.config.json'
+        '../../toolbar.config.json'
       )
-      server.watcher.add(coreUIConfigPath)
+      server.watcher.add(toolbarConfigPath)
       server.watcher.on('change', (filePath) => {
-        if (path.resolve(filePath) === coreUIConfigPath) {
+        if (path.resolve(filePath) === toolbarConfigPath) {
           // Invalidate the cached JSON module so Vite re-reads from disk
-          const mods = server.moduleGraph.getModulesByFile(coreUIConfigPath)
+          const mods = server.moduleGraph.getModulesByFile(toolbarConfigPath)
           if (mods) {
             for (const mod of mods) {
               server.moduleGraph.invalidateModule(mod)
@@ -134,16 +126,8 @@ export default function storyboardServer() {
         }
       })
 
-      // Inject workshop client UI when any feature is enabled
-      if (hasAnyWorkshopFeature(workshopConfig)) {
-        // Resolve the actual filesystem path for the mount script.
-        // Use /@fs/ prefix so Vite serves it through its module pipeline.
-        const mountPath = path.resolve(
-          path.dirname(new URL(import.meta.url).pathname),
-          '../workshop/ui/mount.ts'
-        )
-        clientScripts.push('/@fs' + mountPath)
-      }
+      // Workshop client UI is now mounted by mountStoryboardCore() via the
+      // compiled UI bundle. No script injection needed.
 
       // Plugin registry for external plugins (future use).
       // Plugins call registerRoutes/registerClientScript in their setup().

package/src/workshop/features/createCanvas/CreateCanvasForm.svelte

@@ -26,6 +26,8 @@
   let loading = $state(true)
   let submitting = $state(false)
   let error: string | null = $state(null)
+  let success: string | null = $state(null)
+  let createdRoute: string | null = $state(null)
 
   const kebabName = $derived(
     name.replace(/[^a-zA-Z0-9\s_-]/g, '').trim().replace(/[\s_]+/g, '-').toLowerCase().replace(/-+/g, '-').replace(/^-|-$/g, '')
@@ -47,7 +49,20 @@
     return basePath.replace(/\/$/, '') + '/_storyboard/canvas'
   }
 
+  const CANVAS_SUCCESS_KEY = 'sb-canvas-created'
+
   onMount(async () => {
+    // Restore success state after Vite's full-reload on file creation
+    try {
+      const saved = sessionStorage.getItem(CANVAS_SUCCESS_KEY)
+      if (saved) {
+        const parsed = JSON.parse(saved)
+        success = parsed.success
+        createdRoute = parsed.route
+        sessionStorage.removeItem(CANVAS_SUCCESS_KEY)
+      }
+    } catch {}
+
     try {
       const res = await fetch(getApiUrl() + '/folders')
       if (res.ok) {
@@ -62,7 +77,7 @@
 
   async function submit() {
     if (!canSubmit) return
-    submitting = true; error = null
+    submitting = true; error = null; success = null; createdRoute = null
     try {
       const res = await fetch(getApiUrl() + '/create', {
         method: 'POST', headers: { 'Content-Type': 'application/json' },
@@ -70,10 +85,12 @@
       })
       const data = await res.json()
       if (!res.ok) { error = data.error || 'Failed to create canvas'; return }
-      // Add redirect param to current URL — survives Vite's full-reload
-      const url = new URL(window.location.href)
-      url.searchParams.set('redirect', data.route)
-      window.history.replaceState(null, '', url.toString())
+      success = `Created ${data.path}`
+      createdRoute = data.route
+      // Persist success state — Vite does a full-reload when new files are created
+      try {
+        sessionStorage.setItem(CANVAS_SUCCESS_KEY, JSON.stringify({ success, route: createdRoute }))
+      } catch {}
     } catch (err: any) { error = err.message || 'Network error' } finally { submitting = false }
   }
 
@@ -86,7 +103,7 @@
 </Panel.Header>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="p-4 space-y-3" onkeydown={handleKeydown}>
+<div class="p-4 pt-2 space-y-3" onkeydown={handleKeydown}>
   <div class="space-y-1">
     <Label for="sb-canvas-name">Name</Label>
     <Input id="sb-canvas-name" placeholder="e.g. design-overview" autocomplete="off" spellcheck="false" bind:value={name} />
@@ -118,6 +135,7 @@
   </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}{#if createdRoute} — <a href={createdRoute} class="underline font-medium">Go to canvas</a>{/if}</Alert.Description></Alert.Root>{/if}
 </div>
 
 <Panel.Footer>

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

@@ -102,7 +102,7 @@
 </Panel.Header>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="p-4 space-y-3" onkeydown={handleKeydown}>
+<div class="p-4 pt-2 space-y-3" 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} />

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

@@ -10,7 +10,6 @@
  *   - serverSetup:   Called by the server plugin to register API routes
  */
 
-export { createFlowsHandler as serverSetup } from './server.js'
 import CreateFlowForm from './CreateFlowForm.svelte'
 
 export const name = 'createFlow'

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

@@ -121,7 +121,7 @@
 </Panel.Header>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="p-4 space-y-3" onkeydown={handleKeydown}>
+<div class="p-4 pt-2 space-y-3" onkeydown={handleKeydown}>
   <div class="space-y-1">
     <Label for="sb-proto-name">Name</Label>
     <Input id="sb-proto-name" placeholder="e.g. my-prototype" autocomplete="off" spellcheck="false" bind:value={name} />

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

@@ -10,7 +10,6 @@
  *   - serverSetup:   Called by the server plugin to register API routes
  */
 
-export { createPrototypesHandler as serverSetup } from './server.js'
 import CreatePrototypeForm from './CreatePrototypeForm.svelte'
 
 export const name = 'createPrototype'