@dfosco/storyboard 0.8.1 → 0.9.0

package/src/core/canvas/server.js

@@ -141,7 +141,7 @@ function writeFolderMeta(folderDir, meta) {
  */
 function findCanvasFiles(root) {
   const results = []
-  const ignore = new Set(['node_modules', 'dist', '.git', '.worktrees'])
+  const ignore = new Set(['node_modules', 'dist', '.git', '.worktrees', 'worktrees', 'workleafs'])
 
   function walk(dir, rel) {
     let entries
@@ -168,7 +168,7 @@ function findCanvasFiles(root) {
  */
 function findStoryFiles(root) {
   const results = []
-  const ignore = new Set(['node_modules', 'dist', '.git', '.worktrees'])
+  const ignore = new Set(['node_modules', 'dist', '.git', '.worktrees', 'worktrees', 'workleafs'])
   const ROUTABLE_DIRS = ['src/canvas', 'src/components']
 
   function walk(dir, rel) {
@@ -846,18 +846,18 @@ export function createCanvasHandler(ctx) {
   }
 
   /**
-   * Non-mutating probe of a hot pool — returns webgl-readiness without
-   * claiming a slot. Use this when the canvas API just needs to tell the
-   * client whether to render in webgl-ready mode; the actual session claim
-   * happens later in terminal-server when the WebSocket connects.
+   * Non-mutating probe of a hot pool — returns readiness without claiming
+   * a slot. Use this when the canvas API just needs to tell the client
+   * whether a hot session is available; the actual session claim happens
+   * later in terminal-server when the WebSocket connects.
    * @param {Object|null} hotPool — HotPoolManager instance
    * @param {string} poolId — pool to peek at
    * @param {string} [mode] — 'auto' (default), 'hot', or 'cold'
-   * @returns {{ ready: boolean, webglReady: boolean }}
+   * @returns {{ ready: boolean }}
    */
   function peekPool(hotPool, poolId, mode) {
-    if (!hotPool || mode === 'cold') return { ready: false, webglReady: false }
-    if (!hotPool.has(poolId)) return { ready: false, webglReady: false }
+    if (!hotPool || mode === 'cold') return { ready: false }
+    if (!hotPool.has(poolId)) return { ready: false }
     return hotPool.peek(poolId)
   }
 
@@ -942,15 +942,20 @@ export function createCanvasHandler(ctx) {
     if (routePath === '/folders' && method === 'GET') {
       const canvasDir = path.join(root, 'src', 'canvas')
       let folders = []
+      let entries = []
       try {
         if (fs.existsSync(canvasDir)) {
-          const entries = fs.readdirSync(canvasDir, { withFileTypes: true })
-          // .folder directories (existing behavior)
-          const folderDirs = entries
+          const dirEntries = fs.readdirSync(canvasDir, { withFileTypes: true })
+          // .folder directories — workspace grouping (sibling canvases shown
+          // under a folder header in the workspace, each addressable on its
+          // own /canvas/<folder>/<name> route).
+          const folderDirs = dirEntries
             .filter((d) => d.isDirectory() && d.name.endsWith('.folder'))
             .map((d) => d.name.replace('.folder', ''))
-          // Plain directories containing .canvas.jsonl files
-          const plainDirs = entries
+          // Plain directories containing .canvas.jsonl files — multi-page
+          // canvas grouping (each .canvas.jsonl is a "page" of the parent
+          // group, surfaced via PageSelector inside the canvas).
+          const plainDirs = dirEntries
             .filter((d) => {
               if (!d.isDirectory() || d.name.endsWith('.folder') || d.name.startsWith('_')) return false
               const files = fs.readdirSync(path.join(canvasDir, d.name))
@@ -958,9 +963,16 @@ export function createCanvasHandler(ctx) {
             })
             .map((d) => d.name)
           folders = [...folderDirs, ...plainDirs]
+          entries = [
+            ...folderDirs.map((name) => ({ name, kind: 'workspace' })),
+            ...plainDirs.map((name) => ({ name, kind: 'pages' })),
+          ]
         }
       } catch { /* empty */ }
-      sendJson(res, 200, { folders })
+      // `folders` is the legacy flat name list; `entries` is the new tagged
+      // list. Clients can prefer `entries` when they need to know whether a
+      // folder is a `.folder/` (workspace) or plain (multi-page) dir.
+      sendJson(res, 200, { folders, entries })
       return
     }
 
@@ -1273,11 +1285,11 @@ export function createCanvasHandler(ctx) {
 
         // Hot pool readiness probe for terminal/agent widgets — non-mutating.
         // The actual session claim happens later in terminal-server when the
-        // WS connects. Probing here only tells the client whether to render
-        // in webgl-ready mode immediately. (Previously this called
-        // acquireFromPool, which leaked a #acquired slot per widget creation
-        // because no consume/release ever fired against this acquisition.)
-        let hotProbe = { ready: false, webglReady: false }
+        // WS connects. Probing here only tells the client whether a hot
+        // session is available. (Previously this called acquireFromPool,
+        // which leaked a #acquired slot per widget creation because no
+        // consume/release ever fired against this acquisition.)
+        let hotProbe = { ready: false }
         if ((type === 'terminal' || type === 'agent') && pool !== 'cold') {
           const poolId = resolvePoolId(type, props)
           hotProbe = peekPool(hotPool, poolId, pool)
@@ -1296,7 +1308,7 @@ export function createCanvasHandler(ctx) {
         })
 
         const response = { success: true, widget, eventId }
-        if (hotProbe.ready) response.hotSession = { id: null, tmuxName: null, webglReady: hotProbe.webglReady }
+        if (hotProbe.ready) response.hotSession = { id: null, tmuxName: null }
         sendJson(res, 201, response)
         pushCanvasUpdate(name, filePath, __viteWs)
       } catch (err) {
@@ -2064,7 +2076,7 @@ export function createCanvasHandler(ctx) {
                 const widgetId = generateWidgetId(type)
                 await prepareTerminalWidget({ type, props, widgetId, canvasName: name, req })
 
-                let hotProbe = { ready: false, webglReady: false }
+                let hotProbe = { ready: false }
                 if ((type === 'terminal' || type === 'agent') && pool !== 'cold') {
                   const poolId = resolvePoolId(type, props)
                   hotProbe = peekPool(hotPool, poolId, pool)
@@ -2081,7 +2093,7 @@ export function createCanvasHandler(ctx) {
                 if (ref) refs[ref] = widgetId
 
                 const result = { index: i, op: 'create-widget', ref: ref || undefined, widgetId, widget, eventId }
-                if (hotProbe.ready) result.hotSession = { id: null, tmuxName: null, webglReady: hotProbe.webglReady }
+                if (hotProbe.ready) result.hotSession = { id: null, tmuxName: null }
                 results.push(result)
                 break
               }
@@ -2596,6 +2608,7 @@ export function createCanvasHandler(ctx) {
         name,
         title,
         folder,
+        folderKind,
         convertFrom,
         author,
         description,
@@ -2730,7 +2743,12 @@ export function createCanvasHandler(ctx) {
       }
 
       // ── Standard canvas creation ─────────────────────────────────────
-      // Determine target directory
+      // Determine target directory. When `folder` is set:
+      //   - existing `<folder>.folder/` wins → workspace grouping
+      //   - existing `<folder>/` wins → multi-page canvas grouping
+      //   - otherwise: create a new dir; `folderKind` controls which kind.
+      //     Default kind is "pages" for backward compatibility (the legacy
+      //     behavior). Pass `"workspace"` to create `<folder>.folder/`.
       const canvasDir = path.join(root, 'src', 'canvas')
       let targetDir = canvasDir
 
@@ -2739,25 +2757,28 @@ export function createCanvasHandler(ctx) {
         const plainDir = path.join(canvasDir, folder)
 
         if (fs.existsSync(dotFolderDir)) {
-          // Existing .folder/ directory
+          // Existing .folder/ directory (workspace grouping)
           targetDir = dotFolderDir
         } else if (fs.existsSync(plainDir) && fs.statSync(plainDir).isDirectory()) {
-          // Existing plain directory
+          // Existing plain directory (multi-page grouping)
           targetDir = plainDir
         } else {
-          // Create new plain directory
+          // Create a new directory according to the requested kind.
+          const useWorkspace = folderKind === 'workspace'
+          const newDir = useWorkspace ? dotFolderDir : plainDir
           try {
-            fs.mkdirSync(plainDir, { recursive: true })
-            // Write .meta.json if meta was provided
+            fs.mkdirSync(newDir, { recursive: true })
+            // Write .meta.json if meta was provided (only meaningful for
+            // multi-page groups today; harmless inside a .folder/).
             if (meta && typeof meta === 'object') {
-              const metaPath = path.join(plainDir, `${folder}.meta.json`)
+              const metaPath = path.join(newDir, `${folder}.meta.json`)
               fs.writeFileSync(metaPath, JSON.stringify(meta, null, 2) + '\n', 'utf-8')
             }
           } catch (err) {
             sendJson(res, 500, { error: `Failed to create directory: ${err.message}` })
             return
           }
-          targetDir = plainDir
+          targetDir = newDir
         }
       }
 

package/src/core/canvas/server.test.js

@@ -740,3 +740,110 @@ describe('image routes — drafts/ subdirectory privacy layer', () => {
     expect(lastResponse.body.filename).toMatch(/^drafts\/storyboarding--/)
   })
 })
+
+describe('GET /folders and POST /create with folderKind', () => {
+  let root, canvasDir, invoke, lastResponse
+
+  beforeEach(() => {
+    ({ invoke, root, canvasDir, lastResponse } = setup())
+  })
+
+  afterEach(() => {
+    fs.rmSync(root, { recursive: true, force: true })
+  })
+
+  it('GET /folders returns tagged entries distinguishing workspace from pages', async () => {
+    // Workspace folder (`.folder/` suffix) containing one canvas
+    fs.mkdirSync(path.join(canvasDir, 'marketing.folder'), { recursive: true })
+    writeCanvas(path.join(canvasDir, 'marketing.folder'), 'landing')
+    // Plain dir (multi-page canvas group) containing two canvases
+    fs.mkdirSync(path.join(canvasDir, 'tour'), { recursive: true })
+    writeCanvas(path.join(canvasDir, 'tour'), 'overview')
+    writeCanvas(path.join(canvasDir, 'tour'), 'detail')
+
+    await invoke('/folders', 'GET')
+
+    expect(lastResponse.status).toBe(200)
+    // Legacy flat list still present for back-compat
+    expect(lastResponse.body.folders).toContain('marketing')
+    expect(lastResponse.body.folders).toContain('tour')
+    // New tagged entries carry the kind
+    const entries = lastResponse.body.entries
+    expect(entries).toEqual(expect.arrayContaining([
+      { name: 'marketing', kind: 'workspace' },
+      { name: 'tour',      kind: 'pages' },
+    ]))
+  })
+
+  it('POST /create with folderKind:"workspace" creates a new .folder/ dir', async () => {
+    await invoke('/create', 'POST', {
+      name: 'landing',
+      folder: 'marketing',
+      folderKind: 'workspace',
+      title: 'Landing',
+    })
+
+    expect(lastResponse.status).toBe(201)
+    expect(fs.existsSync(path.join(canvasDir, 'marketing.folder', 'landing.canvas.jsonl'))).toBe(true)
+    // Plain dir must NOT have been created
+    expect(fs.existsSync(path.join(canvasDir, 'marketing'))).toBe(false)
+  })
+
+  it('POST /create with folderKind:"pages" (or omitted) creates a plain dir', async () => {
+    await invoke('/create', 'POST', {
+      name: 'overview',
+      folder: 'tour',
+      folderKind: 'pages',
+      title: 'Overview',
+    })
+
+    expect(lastResponse.status).toBe(201)
+    expect(fs.existsSync(path.join(canvasDir, 'tour', 'overview.canvas.jsonl'))).toBe(true)
+    // .folder/ variant must NOT have been created
+    expect(fs.existsSync(path.join(canvasDir, 'tour.folder'))).toBe(false)
+  })
+
+  it('POST /create defaults to plain dir when folderKind is omitted (backward compat)', async () => {
+    await invoke('/create', 'POST', {
+      name: 'overview',
+      folder: 'tour',
+      title: 'Overview',
+    })
+
+    expect(lastResponse.status).toBe(201)
+    expect(fs.existsSync(path.join(canvasDir, 'tour', 'overview.canvas.jsonl'))).toBe(true)
+    expect(fs.existsSync(path.join(canvasDir, 'tour.folder'))).toBe(false)
+  })
+
+  it('POST /create reuses existing .folder/ regardless of folderKind', async () => {
+    fs.mkdirSync(path.join(canvasDir, 'marketing.folder'), { recursive: true })
+
+    // Even with folderKind:"pages", the existing .folder/ wins (filesystem
+    // truth beats a hint).
+    await invoke('/create', 'POST', {
+      name: 'landing',
+      folder: 'marketing',
+      folderKind: 'pages',
+      title: 'Landing',
+    })
+
+    expect(lastResponse.status).toBe(201)
+    expect(fs.existsSync(path.join(canvasDir, 'marketing.folder', 'landing.canvas.jsonl'))).toBe(true)
+    expect(fs.existsSync(path.join(canvasDir, 'marketing'))).toBe(false)
+  })
+
+  it('POST /create reuses existing plain dir regardless of folderKind', async () => {
+    fs.mkdirSync(path.join(canvasDir, 'tour'), { recursive: true })
+
+    await invoke('/create', 'POST', {
+      name: 'overview',
+      folder: 'tour',
+      folderKind: 'workspace',
+      title: 'Overview',
+    })
+
+    expect(lastResponse.status).toBe(201)
+    expect(fs.existsSync(path.join(canvasDir, 'tour', 'overview.canvas.jsonl'))).toBe(true)
+    expect(fs.existsSync(path.join(canvasDir, 'tour.folder'))).toBe(false)
+  })
+})

package/src/core/cli/artifact.js

@@ -296,6 +296,8 @@ function buildValues(flags) {
     d: 'description',
     a: 'author',
     p: 'prototype',
+    // kebab-case CLI flag → camelCase schema field
+    'folder-kind': 'folderKind',
   }
 
   for (const [key, val] of Object.entries(flags)) {

package/src/core/cli/create.js

@@ -362,11 +362,16 @@ async function createCanvas() {
   p.intro('storyboard create canvas')
   await ensureDevServer()
 
-  // Fetch available folders
-  let folders = []
+  // Fetch available folders (tagged when the server supports it)
+  let folderEntries = []
   try {
     const data = await serverGet('/_storyboard/canvas/folders')
-    folders = data.folders || data || []
+    if (Array.isArray(data.entries)) {
+      folderEntries = data.entries
+    } else {
+      const legacy = data.folders || data || []
+      folderEntries = legacy.map((name) => ({ name, kind: 'pages' }))
+    }
   } catch {
     // Continue without folders
   }
@@ -388,14 +393,38 @@ async function createCanvas() {
   })))
 
   let folder = flags.folder || ''
-  if (!folder && !flagMode && Array.isArray(folders) && folders.length > 0) {
+  let folderKind = flags['folder-kind'] || undefined
+  if (!folder && !flagMode && Array.isArray(folderEntries) && folderEntries.length > 0) {
+    const NEW = '__new__'
     folder = await promptOrCancel(p.select({
       message: 'Folder',
       options: [
         { value: '', label: 'None (root)' },
-        ...folders.map((f) => ({ value: f, label: f })),
+        ...folderEntries.map((f) => ({
+          value: f.name,
+          label: `${f.name}${f.kind === 'workspace' ? ' — workspace folder' : ' — canvas pages'}`,
+        })),
+        { value: NEW, label: '+ Create new folder…' },
       ],
     }))
+    if (folder === NEW) {
+      folder = await promptOrCancel(p.text({
+        message: 'New folder name (kebab-case)',
+        placeholder: 'my-folder',
+        validate: (v) => {
+          if (!v) return 'Folder name is required'
+          if (/[A-Z\s]/.test(v)) return 'Use kebab-case'
+        },
+      }))
+      folderKind = await promptOrCancel(p.select({
+        message: 'Folder type',
+        options: [
+          { value: 'workspace', label: 'Workspace folder (sibling canvases grouped in workspace)' },
+          { value: 'pages',     label: 'Canvas pages (multi-page canvas; sibling files become pages)' },
+        ],
+        initialValue: 'workspace',
+      }))
+    }
   }
 
   const grid = flags.grid ?? (flagMode ? true : await promptOrCancel(p.confirm({
@@ -422,6 +451,7 @@ async function createCanvas() {
       name,
       title: title || name,
       folder: folder || undefined,
+      folderKind: folder && folderKind ? folderKind : undefined,
       grid,
       includeJsx,
       description: description || undefined,

package/src/core/cli/schemas.js

@@ -65,9 +65,14 @@ export const canvasSchema = {
   },
   folder: {
     type: 'string',
-    description: 'Parent .folder directory',
+    description: 'Parent folder directory (name only, no .folder suffix)',
     aliases: ['f'],
   },
+  'folder-kind': {
+    type: 'string',
+    description: 'When creating a new folder: "workspace" → <folder>.folder/ (workspace grouping), "pages" → <folder>/ (multi-page canvas). Ignored when the folder already exists.',
+    default: 'pages',
+  },
   grid: {
     type: 'boolean',
     default: true,

package/src/core/comments/ui/comment-layout.css

@@ -38,21 +38,21 @@
   pointer-events: auto;
   overflow: hidden;
   box-shadow: 0 2px 6px rgba(0,0,0,0.2);
-  background: var(--sb--color-popover, #fff);
+  background: var(--color-popover, #fff);
 }
 .sb-comment-pin:active { cursor: grabbing; }
 .sb-pin-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
 .sb-comment-pin[data-resolved="true"] {
-  border-color: var(--sb--color-muted-foreground, #848d97);
+  border-color: var(--color-foreground-muted, #848d97);
   opacity: 0.5;
 }
 .sb-comment-pin-pending {
-  border-color: var(--sb--color-muted-foreground, #848d97) !important;
+  border-color: var(--color-foreground-muted, #848d97) !important;
   opacity: 0.6;
   animation: sb-pin-pulse 1.2s ease-in-out infinite;
 }
 .sb-comment-pin-failed {
-  border-color: var(--sb--color-destructive, #d1242f) !important;
+  border-color: var(--color-destructive, #d1242f) !important;
   cursor: pointer;
   animation: sb-pin-shake 0.4s ease-in-out;
 }
@@ -71,9 +71,9 @@
   position: absolute;
   width: 280px;
   z-index: 100001;
-  background: var(--sb--color-popover, #fff);
-  color: var(--sb--color-popover-foreground, #1f2328);
-  border: 1px solid var(--sb--color-border, #d1d5db);
+  background: var(--color-popover, #fff);
+  color: var(--color-popover-foreground, #1f2328);
+  border: 1px solid var(--color-border, #d1d5db);
   border-radius: 0.5rem;
   box-shadow: 0 8px 24px rgba(0,0,0,0.15);
   overflow: hidden;
@@ -86,9 +86,9 @@
   max-height: 480px;
   z-index: 100001;
   scrollbar-width: none;
-  background: var(--sb--color-popover, #fff);
-  color: var(--sb--color-popover-foreground, #1f2328);
-  border: 1px solid var(--sb--color-border, #d1d5db);
+  background: var(--color-popover, #fff);
+  color: var(--color-popover-foreground, #1f2328);
+  border: 1px solid var(--color-border, #d1d5db);
   border-radius: 0.5rem;
   box-shadow: 0 8px 24px rgba(0,0,0,0.15);
   overflow: hidden;
@@ -110,8 +110,8 @@
   z-index: 99998;
   width: 420px;
   max-width: 90vw;
-  background: var(--sb--color-background, #fff);
-  color: var(--sb--color-foreground, #1f2328);
+  background: var(--color-background, #fff);
+  color: var(--color-foreground, #1f2328);
 }
 
 /* Drawer animation */
@@ -126,8 +126,8 @@
   position: fixed;
   bottom: 12px; left: 50%; transform: translateX(-50%);
   z-index: 99999;
-  background: var(--sb--color-popover, #fff);
-  color: var(--sb--color-popover-foreground, #1f2328);
+  background: var(--color-popover, #fff);
+  color: var(--color-popover-foreground, #1f2328);
   padding: 6px 16px; border-radius: 8px; font-size: 13px;
   line-height: 1.4; backdrop-filter: blur(12px);
   pointer-events: none;

package/src/core/index.js

@@ -100,6 +100,24 @@ export { initConfig, getConfig, setOverrides, clearOverrides, clearAllOverrides,
 // Customer mode config
 export { initCustomerModeConfig, getCustomerModeConfig, isCustomerMode } from './stores/customerModeConfig.js'
 
+// Presentation overrides (advanced, undocumented power-user API)
+export {
+  initPresentation,
+  setPresentation,
+  getPresentation,
+  subscribeToPresentation,
+  getPresentationSnapshot,
+} from './stores/presentationStore.js'
+
+// Canvas interaction (advanced, undocumented — scroll axis + zoom gesture gates)
+export {
+  initCanvasInteraction,
+  setCanvasInteraction,
+  getCanvasInteraction,
+  subscribeToCanvasInteraction,
+  getCanvasInteractionSnapshot,
+} from './stores/canvasInteractionStore.js'
+
 // Theme
 export {
   setTheme,

package/src/core/inspector/highlighter.js

@@ -270,7 +270,7 @@ export async function createInspectorHighlighter() {
         return `<span class="${classes.join(' ')}">${numSpan}${line}</span>`
       }).join('\n')
 
-      return `<pre style="background:${colors.bg};color:${colors.fg};margin:0;padding:var(--base-size-8);overflow-x:auto"><code>${wrappedLines}</code></pre>`
+      return `<pre style="background:${colors.bg};color:${colors.fg};margin:0;padding:8px;overflow-x:auto"><code>${wrappedLines}</code></pre>`
     },
   }
 }

package/src/core/inspector/mouseMode.js

@@ -57,7 +57,7 @@ export function createMouseMode(options = {}) {
       position: 'fixed',
       pointerEvents: 'none',
       zIndex: '9997',
-      border: '2px solid var(--sb--color-purple, #7655a4)',
+      border: '2px solid var(--color-foreground-accent, #7655a4)',
       backgroundColor: 'rgba(118, 85, 164, 0.08)',
       borderRadius: '3px',
       transition: 'top 0.06s ease, left 0.06s ease, width 0.06s ease, height 0.06s ease',
@@ -73,7 +73,7 @@ export function createMouseMode(options = {}) {
       position: 'fixed',
       pointerEvents: 'none',
       zIndex: '9997',
-      backgroundColor: 'var(--sb--color-purple, #7655a4)',
+      backgroundColor: 'var(--color-foreground-accent, #7655a4)',
       color: '#fff',
       fontSize: '11px',
       fontFamily: '"Hubot Sans", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',

package/src/core/lib/components/ui/dialog/dialog.module.css

@@ -15,9 +15,9 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: var(--bgColor-default, #fff);
-  color: var(--fgColor-default, #1f2328);
-  border: 1px solid var(--borderColor-default, #d0d7de);
+  background: var(--color-background, #fff);
+  color: var(--color-foreground, #1f2328);
+  border: 1px solid var(--color-border, #d0d7de);
   border-radius: 12px;
   box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
   display: flex;
@@ -49,7 +49,7 @@
   justify-content: space-between;
   gap: 12px;
   padding: 16px 20px 12px;
-  border-bottom: 1px solid var(--borderColor-muted, #d0d7de40);
+  border-bottom: 1px solid var(--color-border-muted, #d0d7de40);
 }
 
 .titleGroup {
@@ -68,7 +68,7 @@
 
 .subtitle {
   font-size: 13px;
-  color: var(--fgColor-muted, #59636e);
+  color: var(--color-foreground-muted, #59636e);
   margin: 0;
   line-height: 1.4;
 }
@@ -77,7 +77,7 @@
   appearance: none;
   background: transparent;
   border: 0;
-  color: var(--fgColor-muted, #59636e);
+  color: var(--color-foreground-muted, #59636e);
   cursor: pointer;
   padding: 4px;
   margin: -4px -4px 0 0;
@@ -89,8 +89,8 @@
 }
 
 .closeBtn:hover {
-  background: var(--bgColor-muted, #f6f8fa);
-  color: var(--fgColor-default, #1f2328);
+  background: var(--color-background-muted, #f6f8fa);
+  color: var(--color-foreground, #1f2328);
 }
 
 .body {

package/src/core/modes/modes.css

@@ -14,10 +14,10 @@
   --sb--color-dark: #2a2a2a;
 }
 
-html.storyboard-mode-present   { --sb--mode-color: var(--sb--color-green); }
+html.storyboard-mode-present   { --sb--mode-color: var(--color-foreground-success); }
 html.storyboard-mode-plan      { --sb--mode-color: var(--sb--color-blue); }
-html.storyboard-mode-inspect   { --sb--mode-color: var(--sb--color-purple); }
-html.storyboard-mode-prototype { --sb--mode-color: var(--sb--color-dark); }
+html.storyboard-mode-inspect   { --sb--mode-color: var(--color-foreground-accent); }
+html.storyboard-mode-prototype { --sb--mode-color: var(--color-background-inverse); }
 
 html.storyboard-mode-present,
 html.storyboard-mode-plan,
@@ -51,7 +51,7 @@ html.storyboard-mode-plan > body > #root,
 html.storyboard-mode-inspect > body > #root {
   overflow-x: hidden;
   overflow-y: hidden;
-  border-radius: var(--borderRadius-default);
+  border-radius: var(--radius);
   /* box-shadow: 0 0 80px 40px var(--sb--mode-color); */
 }