@dfosco/storyboard 0.7.1 → 0.9.0

package/src/core/ui/PwaInstallBanner.jsx

@@ -33,9 +33,9 @@ const bannerStyle = {
   alignItems: 'center',
   gap: '0.5rem',
   padding: '0.75rem 1rem',
-  background: 'var(--bgColor-default, #0d1117)',
-  color: 'var(--fgColor-default, #e6edf3)',
-  border: '1px solid var(--borderColor-default, #30363d)',
+  background: 'var(--color-background, #0d1117)',
+  color: 'var(--color-foreground, #e6edf3)',
+  border: '1px solid var(--color-border, #30363d)',
   borderRadius: '0.75rem',
   fontFamily: '"Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
   fontSize: '0.8125rem',
@@ -53,14 +53,14 @@ const btnBase = {
 
 const installBtnStyle = {
   ...btnBase,
-  background: 'var(--button-primary-bgColor-rest, #238636)',
+  background: 'var(--color-background-success-emphasis, #238636)',
   color: '#fff',
 }
 
 const dismissBtnStyle = {
   ...btnBase,
   background: 'transparent',
-  color: 'var(--fgColor-muted, #8d96a0)',
+  color: 'var(--color-foreground-muted, #8d96a0)',
   padding: '0.375rem',
 }
 

package/src/core/ui/ThemeMenuButton.jsx

@@ -2,7 +2,11 @@ import { useState, useEffect } from 'react'
 import { TriggerButton } from '../lib/components/ui/trigger-button/index.js'
 import * as DropdownMenu from '../lib/components/ui/dropdown-menu/index.js'
 import Icon from './Icon.jsx'
-import { themeState, setTheme, getTheme, THEMES, themeSyncState, getThemeSyncTargets, setThemeSyncTarget } from '../index.js'
+import {
+  themeState, setTheme, getTheme,
+  surfaceSyncState, getSurfaceSync, setSurfaceSync,
+} from '../index.js'
+import { getConfig, subscribeToConfig } from '../stores/configStore.js'
 
 export default function ThemeMenuButton({ config = {}, data: _data, localOnly: _localOnly, tabindex = -1 }) {
   void _data
@@ -11,7 +15,8 @@ export default function ThemeMenuButton({ config = {}, data: _data, localOnly: _
   const [settingsOpen, setSettingsOpen] = useState(false)
   const [canvasActive, setCanvasActive] = useState(false)
   const [theme, setThemeState] = useState(getTheme)
-  const [syncState, setSyncState] = useState(getThemeSyncTargets)
+  const [syncState, setSyncState] = useState(getSurfaceSync)
+  const [themesCfg, setThemesCfg] = useState(() => getConfig('theming') || {})
 
   useEffect(() => {
     const unsub = themeState.subscribe(s => setThemeState(s.theme))
@@ -19,7 +24,13 @@ export default function ThemeMenuButton({ config = {}, data: _data, localOnly: _
   }, [])
 
   useEffect(() => {
-    const unsub = themeSyncState.subscribe(s => setSyncState({ ...s }))
+    const unsub = surfaceSyncState.subscribe(s => setSyncState({ ...s }))
+    return unsub
+  }, [])
+
+  useEffect(() => {
+    // Re-derive registry on config HMR (e.g. user edits storyboard.config.json)
+    const unsub = subscribeToConfig(() => setThemesCfg(getConfig('theming') || {}))
     return unsub
   }, [])
 
@@ -61,9 +72,30 @@ export default function ThemeMenuButton({ config = {}, data: _data, localOnly: _
 
   function handleSyncToggle(e, target) {
     e.preventDefault()
-    setThemeSyncTarget(target, !syncState[target])
+    setSurfaceSync(target, !syncState[target])
   }
 
+  // Theme list — config-driven. "system" is a synthetic top entry not in
+  // the registry; surface it explicitly above the configured themes.
+  const themeEntries = Object.entries(themesCfg.themes || {})
+  const themeOptions = [
+    { value: 'system', label: 'System' },
+    ...themeEntries.map(([value, def]) => ({ value, label: def?.label || value })),
+  ]
+
+  // Surface list — config-driven. The "Apply theme to" sub-menu renders one
+  // checkbox per configured surface. The Canvas↔Prototype swap stays —
+  // when a canvas is mounted we show Canvas instead of Prototype so the
+  // user only sees the surface they're currently looking at.
+  const surfaces = themesCfg.surfaces || {}
+  const surfaceIds = Object.keys(surfaces)
+  const canvasShown = canvasActive && surfaceIds.includes('canvas')
+  const visibleSurfaces = surfaceIds.filter((id) => {
+    if (id === 'canvas') return canvasShown
+    if (id === 'prototype') return !canvasShown
+    return true
+  })
+
   return (
     <DropdownMenu.Root open={menuOpen} onOpenChange={handleMenuOpenChange}>
       <DropdownMenu.Trigger>
@@ -87,13 +119,13 @@ export default function ThemeMenuButton({ config = {}, data: _data, localOnly: _
         {config.label && <DropdownMenu.Label>{config.label}</DropdownMenu.Label>}
 
         <DropdownMenu.RadioGroup value={theme}>
-          {THEMES.map((option) => (
+          {themeOptions.map((option) => (
             <DropdownMenu.RadioItem
               key={option.value}
               value={option.value}
               onClick={() => handleSelect(option.value)}
             >
-              {option.name}
+              {option.label}
             </DropdownMenu.RadioItem>
           ))}
         </DropdownMenu.RadioGroup>
@@ -104,36 +136,19 @@ export default function ThemeMenuButton({ config = {}, data: _data, localOnly: _
           <DropdownMenu.SubTrigger>Theme settings</DropdownMenu.SubTrigger>
           <DropdownMenu.SubContent className="min-w-[180px]">
             <DropdownMenu.Label>Apply theme to</DropdownMenu.Label>
-            {canvasActive ? (
+            {visibleSurfaces.map((id) => (
               <DropdownMenu.CheckboxItem
-                checked={syncState.canvas}
-                onSelect={(e) => handleSyncToggle(e, 'canvas')}
+                key={id}
+                checked={!!syncState[id]}
+                onSelect={(e) => handleSyncToggle(e, id)}
               >
-                Canvas
+                {surfaces[id]?.label || id}
               </DropdownMenu.CheckboxItem>
-            ) : (
-              <DropdownMenu.CheckboxItem
-                checked={syncState.prototype}
-                onSelect={(e) => handleSyncToggle(e, 'prototype')}
-              >
-                Prototype
-              </DropdownMenu.CheckboxItem>
-            )}
-            <DropdownMenu.CheckboxItem
-              checked={syncState.toolbar}
-              onSelect={(e) => handleSyncToggle(e, 'toolbar')}
-            >
-              Tools
-            </DropdownMenu.CheckboxItem>
-            <DropdownMenu.CheckboxItem
-              checked={syncState.codeBoxes}
-              onSelect={(e) => handleSyncToggle(e, 'codeBoxes')}
-            >
-              Code boxes
-            </DropdownMenu.CheckboxItem>
+            ))}
           </DropdownMenu.SubContent>
         </DropdownMenu.Sub>
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   )
 }
+

package/src/core/ui/core-ui-colors.css

@@ -16,6 +16,10 @@
  *
  * TriggerButton uses the `trigger` button variant (no Tailwind dark:
  * classes) so its scoped CSS has full control over background/color.
+ *
+ * Concrete color values are pinned (not aliased) so toolbar styling
+ * stays locked to its own scheme regardless of the global theme cascade
+ * defined in `core/styles/tailwind.css`.
  */
 
 /* Default: light tokens */
@@ -27,43 +31,23 @@
 [data-slot="dialog-overlay"] {
   color-scheme: light;
 
-  /* shadcn / Tailwind semantic tokens — pinned to light values */
-  --color-background: hsl(0 0% 100%);
-  --color-foreground: hsl(222.2 84% 4.9%);
-  --color-popover: hsl(0 0% 100%);
-  --color-popover-foreground: hsl(222.2 84% 4.9%);
-  --color-primary: hsl(222.2 47.4% 11.2%);
-  --color-primary-foreground: hsl(210 40% 98%);
-  --color-secondary: hsl(210 40% 96.1%);
-  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
-  --color-muted: hsl(210 40% 96.1%);
-  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
-  --color-accent: hsl(210 40% 96.1%);
-  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
-  --color-border: hsl(214.3 31.8% 91.4%);
-  --color-input: hsl(214.3 31.8% 91.4%);
-
-  --sb--color-background: hsl(0 0% 100%);
-  --sb--color-foreground: hsl(222.2 84% 4.9%);
-  --sb--color-popover: hsl(0 0% 100%);
-  --sb--color-popover-foreground: hsl(222.2 84% 4.9%);
-  --sb--color-primary: hsl(222.2 47.4% 11.2%);
-  --sb--color-primary-foreground: hsl(210 40% 98%);
-  --sb--color-secondary: hsl(210 40% 96.1%);
-  --sb--color-secondary-foreground: hsl(222.2 47.4% 11.2%);
-  --sb--color-muted: hsl(210 40% 96.1%);
-  --sb--color-muted-foreground: hsl(215.4 16.3% 46.9%);
-  --sb--color-accent: hsl(210 40% 96.1%);
-  --sb--color-accent-foreground: hsl(222.2 47.4% 11.2%);
-  --sb--color-border: hsl(214.3 31.8% 91.4%);
-  --sb--color-input: hsl(214.3 31.8% 91.4%);
-
-  /* Primer token aliases used in side panel + inspector chrome */
-  --bgColor-default: #ffffff;
-  --fgColor-default: #1f2328;
-  --fgColor-muted: #656d76;
-  --borderColor-default: #d1d9e0;
-  --bgColor-neutral-muted: rgba(175, 184, 193, 0.2);
+  --color-background: #ffffff;
+  --color-foreground: #1f2328;
+  --color-foreground-muted: #59636e;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #1f2328;
+  --color-primary: #1f2328;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #f6f8fa;
+  --color-secondary-foreground: #1f2328;
+  --color-muted: #f6f8fa;
+  --color-muted-foreground: #59636e;
+  --color-accent: #ddf4ff;
+  --color-accent-foreground: #0969da;
+  --color-border: #d1d9e0;
+  --color-border-muted: #d1d9e0b3;
+  --color-background-neutral-muted: rgba(175, 184, 193, 0.2);
+  --color-input: #d1d9e0;
 
   /* Slate palette tokens — used by trigger buttons and canvas toolbar */
   --color-slate-100: oklch(96.8% .007 247.896);
@@ -72,10 +56,7 @@
   --color-slate-600: oklch(44.6% .043 257.281);
 }
 
-/* Dark tokens — applied when toolbar syncs with a dark theme.
- * Uses Primer-aligned colors (matching base.css --sb-* dark tokens)
- * instead of generic shadcn dark values.
- */
+/* Dark tokens — applied when toolbar syncs with a dark theme. */
 :root[data-sb-toolbar-theme^="dark"] [data-core-ui-bar],
 :root[data-sb-toolbar-theme^="dark"] [data-sidepanel],
 :root[data-sb-toolbar-theme^="dark"] [data-slot="dropdown-menu-content"],
@@ -86,6 +67,7 @@
 
   --color-background: #161b22;
   --color-foreground: #e6edf3;
+  --color-foreground-muted: #8b949e;
   --color-popover: #161b22;
   --color-popover-foreground: #e6edf3;
   --color-primary: #e6edf3;
@@ -94,36 +76,16 @@
   --color-secondary-foreground: #e6edf3;
   --color-muted: #21262d;
   --color-muted-foreground: #8b949e;
-  --color-accent: #21262d;
-  --color-accent-foreground: #e6edf3;
+  --color-accent: #388bfd1a;
+  --color-accent-foreground: #4493f8;
   --color-border: #30363d;
+  --color-border-muted: #30363db3;
+  --color-background-neutral-muted: rgba(110, 118, 129, 0.2);
   --color-input: #30363d;
 
-  --sb--color-background: #161b22;
-  --sb--color-foreground: #e6edf3;
-  --sb--color-popover: #161b22;
-  --sb--color-popover-foreground: #e6edf3;
-  --sb--color-primary: #e6edf3;
-  --sb--color-primary-foreground: #161b22;
-  --sb--color-secondary: #21262d;
-  --sb--color-secondary-foreground: #e6edf3;
-  --sb--color-muted: #21262d;
-  --sb--color-muted-foreground: #8b949e;
-  --sb--color-accent: #21262d;
-  --sb--color-accent-foreground: #e6edf3;
-  --sb--color-border: #30363d;
-  --sb--color-input: #30363d;
-
-  /* Primer token aliases used in side panel + inspector chrome */
-  --bgColor-default: #161b22;
-  --fgColor-default: #e6edf3;
-  --fgColor-muted: #8b949e;
-  --borderColor-default: #30363d;
-  --bgColor-neutral-muted: rgba(110, 118, 129, 0.2);
-
   /* Slate palette tokens — dark equivalents */
   --color-slate-100: oklch(20.8% .042 265.755);
   --color-slate-300: oklch(29.3% .042 264.531);
   --color-slate-400: oklch(44.6% .043 257.281);
-  --color-slate-600: oklch(70.4% .04 256.788);
+  --color-slate-600: oklch(44.6% .043 257.281);
 }

package/src/core/ui/sidepanel.css

@@ -99,11 +99,11 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
   z-index: 9998;
   display: flex;
   flex-direction: column;
-  background-color: var(--bgColor-default, var(--sb--color-background, #ffffff));
-  border-left: 1px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
+  background-color: var(--color-background, #ffffff);
+  border-left: 1px solid var(--color-border, #d0d7de);
   box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
   font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-  color: var(--fgColor-default, var(--sb--color-foreground, #1f2328));
+  color: var(--color-foreground, #1f2328);
   animation: sb-sidepanel-slide-in 0.25s ease;
 }
 
@@ -115,7 +115,7 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
   width: 100% !important;
   height: var(--sb--sidepanel-height, 300px);
   border-left: none;
-  border-top: 1px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
+  border-top: 1px solid var(--color-border, #d0d7de);
   box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
   animation: sb-sidepanel-slide-up 0.25s ease;
 }
@@ -199,7 +199,7 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
+  color: var(--color-foreground-muted, #656d76);
   padding-left: 4px;
 }
 
@@ -213,7 +213,7 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
   appearance: none;
   border: none;
   background: transparent;
-  color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
+  color: var(--color-foreground-muted, #656d76);
   cursor: pointer;
   padding: 6px;
   border-radius: 6px;
@@ -224,8 +224,8 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
 }
 
 .sb-sidepanel-action-btn:hover {
-  background: var(--bgColor-neutral-muted, rgba(110, 118, 129, 0.1));
-  color: var(--fgColor-default, var(--sb--color-foreground, #1f2328));
+  background: var(--color-background-neutral-muted, rgba(110, 118, 129, 0.1));
+  color: var(--color-foreground, #1f2328);
 }
 
 /* Body */
@@ -246,8 +246,8 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
 .sb-sidepanel-spinner {
   width: 20px;
   height: 20px;
-  border: 2px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
-  border-top-color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
+  border: 2px solid var(--color-border, #d0d7de);
+  border-top-color: var(--color-foreground-muted, #656d76);
   border-radius: 50%;
   animation: sb-spin 0.6s linear infinite;
 }
@@ -263,7 +263,7 @@ html.storyboard-mode-inspect .sb-sidepanel:not(.sb-sidepanel--bottom) {
   top: 12px;
   right: 12px;
   bottom: 12px;
-  border-radius: var(--borderRadius-default);
+  border-radius: var(--radius);
   border-left: none;
 }
 
@@ -275,7 +275,7 @@ html.storyboard-mode-inspect .sb-sidepanel--bottom {
   right: 12px;
   bottom: 12px;
   width: auto !important;
-  border-radius: var(--borderRadius-default);
+  border-radius: var(--radius);
   border-top: none;
 }
 

package/src/core/vite/server-plugin.js

@@ -35,6 +35,8 @@ import { initDeliveryBridge } from '../messaging/delivery.js'
 import { getHubsMap } from '../messaging/hub-manager.js'
 import { startMaintenance, stopMaintenance } from '../messaging/hub-maintenance.js'
 import { createArtifactRoutes } from '../artifact/routes.js'
+import { buildArtifactManifest, resolveManifestEnv } from '../data/artifactManifest.js'
+import { buildDataDiscovery } from '../../internals/vite/data-plugin.js'
 
 const API_PREFIX = '/_storyboard/'
 
@@ -647,6 +649,17 @@ export default function storyboardServer() {
         } catch { sendJsonLogged(res, 200, { branch: null }) }
       })
 
+      // Per-branch artifact manifest parity route for local dev.
+      routeHandlers.set('artifacts.json', async (req, res) => {
+        try {
+          const discovery = buildDataDiscovery(root, { includeDraft: true })
+          const env = resolveManifestEnv({ env: { ...process.env, basePath: base || '/' }, cwd: root })
+          sendJsonLogged(res, 200, buildArtifactManifest({ discovery, env }))
+        } catch (err) {
+          sendJsonLogged(res, 500, { error: err.message || 'Failed to build artifacts manifest' })
+        }
+      })
+
       // Watch toolbar.config.json for changes — trigger full reload so
       // CoreUIBar.jsx picks up menu/mode config changes during dev
       const toolbarConfigPath = path.resolve(

package/src/core/workleaf/cleanup.js

@@ -0,0 +1,102 @@
+/**
+ * Shared cleanup primitives for `workleaf merge` and `workleaf delete`.
+ *
+ * The two commands diverge only in whether they squash-merge first;
+ * everything below (stop server, remove worktree, delete branch,
+ * release port) is identical.
+ */
+
+import * as p from '@clack/prompts'
+import { execFileSync } from 'node:child_process'
+import { existsSync, rmdirSync } from 'node:fs'
+import { dirname } from 'node:path'
+import { releasePort } from '../worktree/port.js'
+import { findByWorktree, unregister } from '../worktree/serverRegistry.js'
+import { dim } from '../cli/intro.js'
+
+/**
+ * Send SIGTERM to every dev server registered for this workleaf branch,
+ * then unregister them. Best-effort — never throws.
+ */
+export function stopDevServer(branch) {
+  const servers = findByWorktree(branch)
+  for (const s of servers) {
+    try {
+      process.kill(s.pid, 'SIGTERM')
+    } catch (err) {
+      if (err.code !== 'ESRCH') {
+        p.log.warn(`Could not stop pid ${s.pid}: ${err.message}`)
+      }
+    }
+    unregister(s.id)
+  }
+  return servers.length
+}
+
+/**
+ * Remove the git worktree directory. Uses --force so uncommitted state
+ * in the workleaf doesn't block delete (callers should validate dirty
+ * state first). Also tries to remove the now-empty parent group dir
+ * (workleafs/<parent>/) for cosmetic cleanliness.
+ */
+export function removeWorktree(dir, root) {
+  if (!existsSync(dir)) return
+  try {
+    execFileSync('git', ['worktree', 'remove', '--force', dir], { cwd: root, stdio: 'pipe' })
+  } catch (err) {
+    p.log.warn(`git worktree remove failed: ${err.message}`)
+    p.log.info(dim(`  Try: rm -rf ${dir} && git worktree prune`))
+  }
+  // Try to remove the empty parent group dir (workleafs/<parent>/) — best
+  // effort, silently no-ops if the dir still has siblings.
+  try {
+    rmdirSync(dirname(dir))
+  } catch { /* still has siblings or already gone */ }
+}
+
+/**
+ * Delete the workleaf branch. Uses -D to allow deleting unmerged branches
+ * (delete subcommand) — merge subcommand callers may want to verify
+ * merge-state first.
+ */
+export function deleteBranch(branch, root) {
+  try {
+    execFileSync('git', ['branch', '-D', branch], { cwd: root, stdio: 'pipe' })
+  } catch (err) {
+    p.log.warn(`git branch -D ${branch} failed: ${err.message}`)
+  }
+}
+
+/**
+ * Full cleanup sequence shared by merge + delete:
+ *   1. Stop & unregister dev server(s)
+ *   2. Remove the git worktree
+ *   3. Delete the branch
+ *   4. Release the port assignment
+ */
+export function cleanupWorkleaf({ branch, dir, root }) {
+  const stopped = stopDevServer(branch)
+  removeWorktree(dir, root)
+  deleteBranch(branch, root)
+  releasePort(branch)
+  return { stopped }
+}
+
+/** Read the current branch of a directory. */
+export function currentBranch(cwd) {
+  try {
+    return execFileSync('git', ['branch', '--show-current'], { cwd, encoding: 'utf8' }).trim()
+  } catch {
+    return null
+  }
+}
+
+/** Check for uncommitted state in a worktree. */
+export function hasDirtyWorkingTree(cwd) {
+  try {
+    const out = execFileSync('git', ['status', '--porcelain'], { cwd, encoding: 'utf8' }).trim()
+    return out.length > 0
+  } catch {
+    return false
+  }
+}