@dfosco/storyboard-react 4.2.0-beta.26 → 4.2.0-beta.28

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.2.0-beta.26",
+  "version": "4.2.0-beta.28",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.2.0-beta.26",
-    "@dfosco/tiny-canvas": "4.2.0-beta.26",
+    "@dfosco/storyboard-core": "4.2.0-beta.28",
+    "@dfosco/tiny-canvas": "4.2.0-beta.28",
     "@neodrag/react": "^2.3.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-visually-hidden": "^1.2.4",

package/src/AuthModal/AuthModal.jsx

@@ -30,11 +30,6 @@ export default function AuthModal() {
     return () => document.removeEventListener('storyboard:open-auth-modal', handleOpen)
   }, [])
 
-  const _handleClose = useCallback(() => {
-    setOpen(false)
-    setTokenValue('')
-  }, [])
-
   const handleSignIn = useCallback(() => {
     const trimmed = tokenValue.trim()
     if (!trimmed) return

package/src/CommandPalette/CommandPalette.jsx

@@ -1198,7 +1198,7 @@ export default function StoryboardCommandPalette({ basePath }) {
                 !search && <Command.Separator key={list.id} />
               ) : (
                 <Command.Group key={list.id} heading={list.heading}>
-                  {list.items.map(({ id, children, keywords, onClick, itemType, toolIcon, toolMeta, closeOnSelect, hideFromSearch, url, ..._rest }) => {
+                  {list.items.map(({ id, children, keywords, onClick, itemType, toolIcon, toolMeta, closeOnSelect, hideFromSearch, url }) => {
                     if (search && hideFromSearch) return null
                     if (hiddenFromSearchIds.size > 0) {
                       for (const toolId of hiddenFromSearchIds) {

package/src/Viewfinder.jsx

@@ -56,7 +56,7 @@ const COMMENTS_TOKEN_KEY = 'sb-comments-token'
  * Resolve the current GitHub user for display in the sidebar.
  * Priority: 1) PAT-cached user (from comments auth), 2) gh CLI login via git-user endpoint.
  */
-function useGitHubUser(_basePath) {
+function useGitHubUser() {
   const [user, setUser] = useState(() => {
     try {
       const raw = localStorage.getItem(COMMENTS_USER_KEY)
@@ -154,16 +154,6 @@ function withBase(basePath, route) {
   return `${normalizedBase}${normalizedRoute}`.replace(/\/+/g, '/')
 }
 
-/* ─── Thumbnail color from name hash ─── */
-
-const THUMB_CLASSES = ['thumbBlue', 'thumbAmber', 'thumbGreen', 'thumbPurple', 'thumbRose', 'thumbSlate']
-
-function _thumbClass(name) {
-  let h = 0
-  for (let i = 0; i < name.length; i++) h = ((h << 5) - h + name.charCodeAt(i)) | 0
-  return css[THUMB_CLASSES[Math.abs(h) % THUMB_CLASSES.length]]
-}
-
 /* ─── Type helpers ─── */
 
 function getTypeLabel(type) {
@@ -1078,10 +1068,7 @@ export default function Workspace({
   basePath,
   title = 'Storyboard',
   subtitle,
-  hideDefaultFlow,
-  hideDefaultScene = false,
 }) {
-  const _shouldHideDefault = hideDefaultFlow ?? hideDefaultScene
   const themeAttrs = useToolbarTheme()
   const ghUser = useGitHubUser(basePath)
   const [settingsOpen, setSettingsOpen] = useState(false)
@@ -1291,8 +1278,6 @@ export default function Workspace({
   // Starred items for sidebar
   const starredItems = useMemo(() => visibleItems.filter(i => starred.has(i.id)), [visibleItems, starred])
 
-  const _pageTitle = NAV_ITEMS.find(n => n.id === activeNav)?.label || 'All artifacts'
-
   return (
     <div className={css.layout} {...themeAttrs}>
       {/* ─── Full-width Header ─── */}

package/src/canvas/CanvasPage.dragdrop.test.jsx

@@ -5,7 +5,7 @@
  * onto the canvas, including coordinate conversion and file filtering.
  */
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { fireEvent, render, act, waitFor } from '@testing-library/react'
+import { render, act } from '@testing-library/react'
 import CanvasPage from './CanvasPage.jsx'
 import { addWidget, uploadImage } from './canvasApi.js'
 

package/src/canvas/CanvasPage.jsx

@@ -57,9 +57,6 @@ const GH_INSTALL_URL = 'https://github.com/cli/cli'
 registerSmoothCorners()
 registerHotPoolDevLogs()
 
-/** Matches branch-deploy base path prefixes like /branch--my-feature/ */
-const _BRANCH_PREFIX_RE = /^\/branch--[^/]+/
-
 // Build a reverse map from story route paths → { storyId, route }
 const storyRouteIndex = new Map()
 for (const [storyId, data] of Object.entries(storyIndex || {})) {
@@ -415,6 +412,7 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
     return adjusted
   }, [rawFeatures, widget.props?.github, widget.props?.collapsed, widget.type, widget.id, connectorCount, allWidgets])
 
+  // eslint-disable-next-line react-hooks/preserve-manual-memoization
   const handleAction = useCallback((actionId, opts) => {
     if (actionId === 'delete') {
       onRemove?.(widget.id)

package/src/canvas/ConnectorLayer.jsx

@@ -19,18 +19,6 @@ function getEndpointStyle(widgetType, side) {
   return connectorConfig[key]
 }
 
-const DOT_OUTSET = 8
-
-function _getDotOffset(anchor) {
-  switch (anchor) {
-    case 'top':    return { dx: 0, dy: -DOT_OUTSET }
-    case 'bottom': return { dx: 0, dy: DOT_OUTSET }
-    case 'left':   return { dx: -DOT_OUTSET, dy: 0 }
-    case 'right':  return { dx: DOT_OUTSET, dy: 0 }
-    default:       return { dx: 0, dy: 0 }
-  }
-}
-
 /**
  * Render an endpoint shape (circle, arrow-start, arrow-end, or none) at the given point.
  * - "circle" (default): filled dot

package/src/canvas/canvasReloadGuard.test.js

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, expect, beforeEach } from 'vitest'
 import { enableCanvasGuard, disableCanvasGuard, isCanvasGuardActive } from './canvasReloadGuard.js'
 
 describe('canvasReloadGuard', () => {

package/src/canvas/widgets/ExpandedPane.jsx

@@ -56,7 +56,7 @@ const MIN_PANE_HEIGHT_PX = 80
  * @param {() => void} props.onClose — close callback
  * @param {((panes: PaneConfig[]) => void)} [props.onPanesChange] — notify parent of pane changes
  */
-export default function ExpandedPane({ initialPanes, initialLayout, variant = 'modal', onClose, onPanesChange }) {
+export default function ExpandedPane({ initialPanes, initialLayout, variant = 'modal', onClose }) {
   // Normalize to 2D layout: outer = columns, inner = rows
   const [layout, setLayout] = useState(() => {
     if (initialLayout) return initialLayout
@@ -85,7 +85,7 @@ export default function ExpandedPane({ initialPanes, initialLayout, variant = 'm
   const [rowRatios, setRowRatios] = useState(() =>
     layout.map((col) => col.map(() => 1)),
   )
-  const [activePaneId, setActivePaneId] = useState(null)
+  const [, setActivePaneId] = useState(null)
 
   // Ref map: paneId → container DOM element (callback refs)
   const containerRefs = useRef(new Map())
@@ -96,7 +96,6 @@ export default function ExpandedPane({ initialPanes, initialLayout, variant = 'm
 
   const totalPanes = allPanes.length
   const isSplit = totalPanes >= 2
-  const useFullLayout = isSplit || variant === 'full'
 
   // ── External pane attach/detach via useLayoutEffect ──
   useLayoutEffect(() => {
@@ -109,7 +108,7 @@ export default function ExpandedPane({ initialPanes, initialLayout, variant = 'm
       detachRefs.current.set(pane.id, detach)
     }
     return () => {
-      for (const [id, detach] of detachRefs.current) {
+      for (const [, detach] of detachRefs.current) {
         detach?.()
       }
       detachRefs.current.clear()
@@ -456,7 +455,7 @@ function ColumnWithDivider({ colIndex, isLast, onDividerPointerDown, children })
 /**
  * Renders a pane within a row-split column, optionally followed by a horizontal row divider.
  */
-function PaneWithRowDivider({ pane, flex, isLast, colIndex, onRowDividerPointerDown, children }) {
+function PaneWithRowDivider({ flex, isLast, colIndex, onRowDividerPointerDown, children }) {
   return (
     <>
       <div className={styles.pane} style={{ flex }}>

package/src/canvas/widgets/ExpandedPane.test.jsx

@@ -1,5 +1,5 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { render, screen, fireEvent, act } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
 import ExpandedPane from './ExpandedPane.jsx'
 
 // Mock createPortal to render inline for testing
@@ -135,7 +135,7 @@ describe('ExpandedPane', () => {
 
   describe('external pane attach/detach', () => {
     it('calls attach with container element on mount', async () => {
-      const { pane, attach, detach } = makeExternalPane('term-1')
+      const { pane, attach } = makeExternalPane('term-1')
       render(<ExpandedPane initialPanes={[pane]} variant="full" onClose={vi.fn()} />)
       // useLayoutEffect runs synchronously in test
       expect(attach).toHaveBeenCalledOnce()

package/src/canvas/widgets/LinkPreview.jsx

@@ -7,10 +7,9 @@ import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
 import { readProp, linkPreviewSchema } from './widgetProps.js'
 import ExpandedPane from './ExpandedPane.jsx'
-import { findAllConnectedSplitTargets, getSplitPaneLabel, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
+import { findAllConnectedSplitTargets, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
 import styles from './LinkPreview.module.css'
 
-const VIDEO_EXT_RE = /\.(mp4|mov|webm|ogg)(\?[^)]*)?$/i
 const VIDEO_URL_LINE_RE = /^<p>\s*(https?:\/\/[^\s<]+\.(mp4|mov|webm|ogg)(?:\?[^\s<]*)?)\s*<\/p>$/gim
 
 /**
@@ -119,6 +118,7 @@ function GitHubIssueCard({ id, url, title, github, width, collapsed, expanded, e
   const kindLabel = getCommentKindLabel(github)
 
   // Prefer pre-rendered bodyHtml (has signed image URLs), fall back to remark for discussions
+  // eslint-disable-next-line react-hooks/preserve-manual-memoization
   const bodyHtml = useMemo(() => {
     if (github?.bodyHtml) return postProcessHtml(github.bodyHtml)
     return renderMarkdown(github?.body || '')

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -310,6 +310,7 @@ export function ExpandedMarkdownEditor({ content, onUpdate, editing, onToggleEdi
   const [renderedHtml, setRenderedHtml] = useState(rawHtml)
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRenderedHtml(rawHtml)
     if (!rawHtml.includes('<code class="language-')) return
     let cancelled = false

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -61,7 +61,6 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
   }, [src, basePath, baseSegment])
 
   const scale = zoom / 100
-  const isExternal = /^https?:\/\//.test(src || '')
 
   const [editing, setEditing] = useState(false)
   const [interactive, setInteractive] = useState(false)

package/src/canvas/widgets/StoryWidget.jsx

@@ -105,6 +105,7 @@ export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate,
     if (!showCode || sourceCode !== null) return
     const story = getStoryData(storyId)
     if (!story?._storyModule) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setSourceCode('// Source not available')
       return
     }
@@ -313,7 +314,7 @@ function StoryExpandPane({ widgetId, storyId, exportName, splitMode, onClose })
         kind: 'react',
         render: () => url
           ? <iframe src={url} style={{ border: 'none', width: '100%', height: '100%', display: 'block' }} title={storyId} onLoad={(e) => e.target.blur()} />
-          : <div style={{ padding: 32, color: 'var(--fgColor-muted)' }}>Story "{storyId}" not found</div>,
+          : <div style={{ padding: 32, color: 'var(--fgColor-muted)' }}>Story &quot;{storyId}&quot; not found</div>,
       }
     }
     return buildPaneForWidget(widget)

package/src/canvas/widgets/TerminalWidget.jsx

@@ -1,7 +1,7 @@
 import { useRef, useEffect, useCallback, useState, useMemo, forwardRef, useImperativeHandle } from 'react'
 import { readProp } from './widgetProps.js'
 import { schemas } from './widgetProps.js'
-import { getTerminalConfig, getTerminalDimensions, getStoryData } from '@dfosco/storyboard-core'
+import { getTerminalConfig, getTerminalDimensions } from '@dfosco/storyboard-core'
 import { useOverride } from '../../hooks/useOverride.js'
 import { getSplitPaneLabel, findAllConnectedSplitTargets, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
 import ExpandedPane from './ExpandedPane.jsx'
@@ -79,46 +79,6 @@ function fitTerminalToElement(widgetId, containerEl) {
   }
 }
 
-const EMBED_TYPES = new Set(['prototype', 'story'])
-
-function findConnectedEmbed(widgetId) {
-  const bridge = window.__storyboardCanvasBridgeState
-  if (!bridge?.connectors || !bridge?.widgets) return null
-  const connectedIds = new Set()
-  for (const c of bridge.connectors) {
-    if (c.start?.widgetId === widgetId) connectedIds.add(c.end?.widgetId)
-    if (c.end?.widgetId === widgetId) connectedIds.add(c.start?.widgetId)
-  }
-  for (const w of bridge.widgets) {
-    if (connectedIds.has(w.id) && EMBED_TYPES.has(w.type)) return w
-  }
-  return null
-}
-
-function buildEmbedUrl(widget) {
-  if (!widget) return null
-  const base = (typeof import.meta !== 'undefined' && import.meta.env?.BASE_URL) || '/'
-  const baseClean = base.endsWith('/') ? base.slice(0, -1) : base
-  if (widget.type === 'prototype') {
-    const src = widget.props?.src
-    if (!src) return null
-    if (/^https?:\/\//.test(src)) return src
-    return `${baseClean}${src.startsWith('/') ? '' : '/'}${src}?_sb_embed&_sb_hide_branch_bar`
-  }
-  if (widget.type === 'story') {
-    const storyId = widget.props?.storyId
-    const exportName = widget.props?.exportName
-    if (!storyId) return null
-    const storyData = getStoryData(storyId)
-    if (storyData?._route) {
-      const route = exportName ? `${storyData._route}?export=${exportName}` : storyData._route
-      return `${baseClean}${route}`
-    }
-    return null
-  }
-  return null
-}
-
 const DEFAULT_THEME = {
   background: '#0d1117',
   foreground: '#e6edf3',
@@ -142,7 +102,7 @@ const DEFAULT_THEME = {
   brightWhite: '#f0f6fc',
 }
 
-export default forwardRef(function TerminalWidget({ id, props, onUpdate, resizable, multiSelected }, ref) {
+export default forwardRef(function TerminalWidget({ id, props, onUpdate, multiSelected }, ref) {
   const cfg = getTerminalConfig()
   const fontSize = cfg.fontSize ?? 13
   const agentId = props?.agentId || null
@@ -155,11 +115,6 @@ export default forwardRef(function TerminalWidget({ id, props, onUpdate, resizab
   const prettyName = props?.prettyName || null
   const startupCommand = props?.startupCommand || null
 
-  // Snap dimensions to cell grid so the terminal fills its container exactly
-  const { cols, rows } = useMemo(
-    () => calcDimensions(rawWidth, rawHeight, fontSize),
-    [rawWidth, rawHeight, fontSize],
-  )
   const width = rawWidth
   const height = rawHeight
   // Snapped dimensions computed from ghostty's actual cell metrics (set after open)
@@ -220,6 +175,7 @@ export default forwardRef(function TerminalWidget({ id, props, onUpdate, resizab
 
   // Exit interactive when terminal becomes part of a multi-selection
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (multiSelected && interactive) setInteractive(false)
   }, [multiSelected])
 
@@ -385,6 +341,7 @@ export default forwardRef(function TerminalWidget({ id, props, onUpdate, resizab
   // Reveal mask — hide terminal for 750ms after ready to mask startup flash
   useEffect(() => {
     if (!ready) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setRevealed(false)
       return
     }

package/src/canvas/widgets/TilesWidget.jsx

@@ -47,8 +47,6 @@ const TilesWidget = forwardRef(function TilesWidget({ id, props, onUpdate, resiz
   const columns = (isProd ? localState?.columns : null) ?? (readProp(props, 'columns', tilesSchema) || 3)
   const rows = (isProd ? localState?.rows : null) ?? (readProp(props, 'rows', tilesSchema) || 3)
   const tileSize = readProp(props, 'tileSize', tilesSchema) || 80
-  const width = readProp(props, 'width', tilesSchema)
-  const height = readProp(props, 'height', tilesSchema)
   const savedTiles = (isProd ? localState?.tiles : null) ?? readProp(props, 'tiles', tilesSchema)
 
   // Local state for interactions

package/src/context.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo, Suspense, lazy } from 'react'
 import { useParams, useLocation } from 'react-router-dom'
 // Named import seeds the core data index via init() AND provides canvas/story route data
-import { canvases, canvasAliases, stories } from 'virtual:storyboard-data-index'
+import { canvases, stories } from 'virtual:storyboard-data-index'
 import { loadFlow, flowExists, findRecord, deepMerge, setFlowClass, installBodyClassSync, resolveFlowName, resolveRecordName, isModesEnabled } from '@dfosco/storyboard-core'
 import { StoryboardContext } from './StoryboardContext.js'
 import usePrototypeReloadGuard from './hooks/usePrototypeReloadGuard.js'

package/src/hooks/useSceneData.js

@@ -36,6 +36,7 @@ export function useFlowData(path, opts) {
   const storageString = useSyncExternalStore(subscribeToStorage, getStorageSnapshot)
 
   // Collect overrides relevant to this path
+  // eslint-disable-next-line react-hooks/preserve-manual-memoization
   const result = useMemo(() => {
     if (loading || error || data == null) return undefined
 

package/src/hooks/useThemeState.test.js

@@ -1,5 +1,5 @@
 import { renderHook, act } from '@testing-library/react'
-import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { describe, it, expect, beforeEach } from 'vitest'
 import { setTheme, setThemeSyncTarget } from '@dfosco/storyboard-core'
 import { useThemeState, useThemeSyncTargets } from './useThemeState.js'
 

package/src/vite/data-plugin.js

@@ -49,10 +49,6 @@ function parseDataFile(filePath) {
     const canvasCheck = normalized.match(/(?:^|\/)src\/canvas\//)
     if (canvasCheck) {
       const dirPath = normalized.substring(0, normalized.lastIndexOf('/'))
-      const routeBase = (dirPath + '/')
-        .replace(/^.*?src\/canvas\//, '')
-        .replace(/[^/]*\.folder\/?/g, '')
-        .replace(/\/$/, '')
       // Path-based ID: include folder context for uniqueness.
       // .folder dirs contribute their name (sans .folder suffix) to the ID.
       const idBase = (dirPath + '/')
@@ -192,39 +188,6 @@ function parseDataFile(filePath) {
   return { name, suffix, ext: match[3], inferredRoute }
 }
 
-/**
- * Look up the git author who first created a file.
- * Used to auto-fill the author field in .prototype.json when missing.
- */
-function getGitAuthor(root, filePath) {
-  try {
-    const result = execSync(
-      `git log --follow --diff-filter=A --format="%aN" -- "${filePath}"`,
-      { cwd: root, encoding: 'utf-8', timeout: 5000 },
-    ).trim()
-    const lines = result.split('\n').filter(Boolean)
-    return lines.length > 0 ? lines[lines.length - 1] : null
-  } catch {
-    return null
-  }
-}
-
-/**
- * Look up the most recent commit date for any file in a directory.
- * Returns an ISO 8601 timestamp, or null if unavailable.
- */
-function getLastModified(root, dirPath) {
-  try {
-    const result = execSync(
-      `git log -1 --format="%aI" -- "${dirPath}"`,
-      { cwd: root, encoding: 'utf-8', timeout: 5000 },
-    ).trim()
-    return result || null
-  } catch {
-    return null
-  }
-}
-
 /**
  * Batch-fetch git metadata (author + lastModified) for multiple files in a
  * single subprocess, avoiding per-file git overhead during startup.
@@ -570,6 +533,15 @@ function deepMergeBuild(target, source) {
     const tv = target[key]
     if (sv && typeof sv === 'object' && !Array.isArray(sv) && tv && typeof tv === 'object' && !Array.isArray(tv)) {
       result[key] = deepMergeBuild(tv, sv)
+    } else if (Array.isArray(sv) && Array.isArray(tv) && sv.length > 0 && tv.length > 0 && sv[0]?.id && tv[0]?.id) {
+      // Id-based array merge: override matching entries by id, keep the rest, append new ones
+      const targetMap = new Map(tv.map(item => [item.id, item]))
+      for (const item of sv) {
+        targetMap.set(item.id, item.id && targetMap.has(item.id)
+          ? deepMergeBuild(targetMap.get(item.id), item)
+          : item)
+      }
+      result[key] = [...targetMap.values()]
     } else {
       result[key] = sv
     }
@@ -581,84 +553,104 @@ function deepMergeBuild(target, source) {
  * Build the unified config object by reading and merging all config sources.
  *
  * Priority (lowest → highest):
- *   core defaults → user widgets → user paste → user toolbar → user commandpalette → storyboard.config.json
+ *   configSchema defaults → core domain configs → storyboard.config.json → user domain configs
+ *
+ * Domain-specific config files (toolbar.config.json, commandpalette.config.json, etc.)
+ * always win over storyboard.config.json — specificity beats generality.
+ * Deep merge is used at every layer: objects are recursively merged (keys append),
+ * arrays and scalars are replaced.
  *
  * Returns { unified, warnings } where warnings is an array of overlap messages.
  */
 function buildUnifiedConfig(root) {
   const warnings = []
 
-  // 1. Read core defaults
+  // 1. Read core defaults (lowest priority domain configs)
   const coreToolbar = readCoreConfigFile(root, 'toolbar.config.json') || {}
   const coreCommandPalette = readCoreConfigFile(root, 'commandpalette.config.json') || {}
   const corePaste = readCoreConfigFile(root, 'paste.config.json') || {}
   const coreWidgets = readCoreConfigFile(root, 'widgets.config.json') || {}
 
-  // 2. Read user config files (priority order)
-  const userFiles = [
-    { domain: 'widgets', filename: 'widgets.config.json', priority: 1 },
-    { domain: 'paste', filename: 'paste.config.json', priority: 2 },
-    { domain: 'toolbar', filename: 'toolbar.config.json', priority: 3 },
-    { domain: 'commandPalette', filename: 'commandpalette.config.json', priority: 4 },
-  ]
-
-  const userConfigs = {}
-  for (const { domain, filename } of userFiles) {
-    const filePath = path.resolve(root, filename)
-    const parsed = readJsonFile(filePath)
-    if (parsed) userConfigs[domain] = { data: parsed, filename }
-  }
-
-  // 3. Read storyboard.config.json (highest priority)
+  // 2. Read storyboard.config.json (middle priority)
   // Use the schema-defaulted config for most things, but also read
   // the raw file to know which keys were explicitly set by the user.
   const { config: sbConfig } = readConfig(root)
   const rawSbConfig = readJsonFile(path.resolve(root, 'storyboard.config.json')) || {}
 
-  // 4. Merge core defaults with user overrides per domain
-  const toolbar = userConfigs.toolbar
-    ? deepMergeBuild(coreToolbar, userConfigs.toolbar.data)
+  // 3. Apply storyboard.config.json overrides on top of core domain configs.
+  // Only merge when the user explicitly defined the key in storyboard.config.json
+  // (not from configSchema defaults, which would overwrite core config with empty arrays).
+  const afterSbToolbar = rawSbConfig.toolbar
+    ? deepMergeBuild(coreToolbar, sbConfig.toolbar)
     : coreToolbar
-  const commandPalette = userConfigs.commandPalette
-    ? deepMergeBuild(coreCommandPalette, userConfigs.commandPalette.data)
+  const afterSbCommandPalette = rawSbConfig.commandPalette
+    ? deepMergeBuild(coreCommandPalette, sbConfig.commandPalette)
     : coreCommandPalette
-  const paste = userConfigs.paste
-    ? deepMergeBuild(corePaste, userConfigs.paste.data)
+  const afterSbPaste = rawSbConfig.paste
+    ? deepMergeBuild(corePaste, sbConfig.paste || {})
     : corePaste
-  const widgets = userConfigs.widgets
-    ? deepMergeBuild(coreWidgets, userConfigs.widgets.data)
+  const afterSbWidgets = rawSbConfig.widgets
+    ? deepMergeBuild(coreWidgets, sbConfig.widgets || {})
     : coreWidgets
 
-  // 5. Apply storyboard.config.json overrides (highest priority for all domains)
-  // Only merge when the user explicitly defined the key in storyboard.config.json
-  // (not from configSchema defaults, which would overwrite core config with empty arrays).
-  const finalToolbar = rawSbConfig.toolbar
-    ? deepMergeBuild(toolbar, sbConfig.toolbar)
-    : toolbar
-  const finalCommandPalette = rawSbConfig.commandPalette
-    ? deepMergeBuild(commandPalette, sbConfig.commandPalette)
-    : commandPalette
-
-  // 6. Detect overlaps between user config files and storyboard.config.json
-  if (rawSbConfig.toolbar && userConfigs.toolbar) {
-    const overlaps = findOverlappingKeys(userConfigs.toolbar.data, rawSbConfig.toolbar)
-    for (const key of overlaps) {
-      warnings.push(`Config overlap: "${key}" is defined in both toolbar.config.json and storyboard.config.json.toolbar — storyboard.config.json wins.`)
-    }
+  // 4. Read user domain config files (highest priority)
+  const userFiles = [
+    { domain: 'widgets', filename: 'widgets.config.json' },
+    { domain: 'paste', filename: 'paste.config.json' },
+    { domain: 'toolbar', filename: 'toolbar.config.json' },
+    { domain: 'commandPalette', filename: 'commandpalette.config.json' },
+  ]
+
+  const userConfigs = {}
+  for (const { domain, filename } of userFiles) {
+    const filePath = path.resolve(root, filename)
+    const parsed = readJsonFile(filePath)
+    if (parsed) userConfigs[domain] = { data: parsed, filename }
   }
-  if (rawSbConfig.commandPalette && userConfigs.commandPalette) {
-    const overlaps = findOverlappingKeys(userConfigs.commandPalette.data, rawSbConfig.commandPalette)
-    for (const key of overlaps) {
-      warnings.push(`Config overlap: "${key}" is defined in both commandpalette.config.json and storyboard.config.json.commandPalette — storyboard.config.json wins.`)
+
+  // 5. Apply user domain configs on top of everything (highest priority)
+  const finalToolbar = userConfigs.toolbar
+    ? deepMergeBuild(afterSbToolbar, userConfigs.toolbar.data)
+    : afterSbToolbar
+  const finalCommandPalette = userConfigs.commandPalette
+    ? deepMergeBuild(afterSbCommandPalette, userConfigs.commandPalette.data)
+    : afterSbCommandPalette
+  const finalPaste = userConfigs.paste
+    ? deepMergeBuild(afterSbPaste, userConfigs.paste.data)
+    : afterSbPaste
+  const finalWidgets = userConfigs.widgets
+    ? deepMergeBuild(afterSbWidgets, userConfigs.widgets.data)
+    : afterSbWidgets
+
+  // 6. Detect overlaps between storyboard.config.json and user domain configs
+  const domainOverlapChecks = [
+    { sbKey: 'toolbar', domain: 'toolbar', label: 'toolbar.config.json' },
+    { sbKey: 'commandPalette', domain: 'commandPalette', label: 'commandpalette.config.json' },
+    { sbKey: 'paste', domain: 'paste', label: 'paste.config.json' },
+    { sbKey: 'widgets', domain: 'widgets', label: 'widgets.config.json' },
+  ]
+  for (const { sbKey, domain, label } of domainOverlapChecks) {
+    if (rawSbConfig[sbKey] && userConfigs[domain]) {
+      const overlaps = findOverlappingKeys(rawSbConfig[sbKey], userConfigs[domain].data)
+      for (const key of overlaps) {
+        warnings.push(`Config overlap: "${key}" is defined in both storyboard.config.json.${sbKey} and ${label} — ${label} wins.`)
+      }
     }
   }
 
   // 7. Build the unified config object
+  console.log('[storyboard] [devlog] buildUnifiedConfig:', {
+    coreCPSections: coreCommandPalette?.sections?.length,
+    afterSbCPSections: afterSbCommandPalette?.sections?.length,
+    finalCPSections: finalCommandPalette?.sections?.length,
+    rawSbHasCP: !!rawSbConfig.commandPalette,
+    userHasCP: !!userConfigs.commandPalette,
+  })
   const unified = {
     toolbar: finalToolbar,
     commandPalette: finalCommandPalette,
-    paste,
-    widgets,
+    paste: finalPaste,
+    widgets: finalWidgets,
     featureFlags: sbConfig?.featureFlags || {},
     modes: sbConfig?.modes || {},
     ui: sbConfig?.ui || {},
@@ -1328,13 +1320,19 @@ export default function storyboardDataPlugin() {
       const { configPath } = readConfig(root)
       watcher.add(configPath)
 
-      // Watch root toolbar.config.json for changes
-      const clientToolbarConfigPath = path.resolve(root, 'toolbar.config.json')
-      watcher.add(clientToolbarConfigPath)
+      // Watch all root domain config files for changes
+      const domainConfigFiles = [
+        'toolbar.config.json',
+        'commandpalette.config.json',
+        'paste.config.json',
+        'widgets.config.json',
+      ].map(f => path.resolve(root, f))
+      const watchedConfigPaths = new Set([configPath, ...domainConfigFiles])
+      for (const p of domainConfigFiles) watcher.add(p)
 
       const invalidateConfig = (filePath) => {
         const resolved = path.resolve(filePath)
-        if (resolved === configPath || resolved === clientToolbarConfigPath) {
+        if (watchedConfigPaths.has(resolved)) {
           buildResult = null
           const mod = server.moduleGraph.getModuleById(RESOLVED_ID)
           if (mod) {

package/src/vite/data-plugin.test.js

@@ -1,4 +1,4 @@
-import { mkdtempSync, writeFileSync, mkdirSync, rmSync, readFileSync } from 'node:fs'
+import { mkdtempSync, writeFileSync, mkdirSync, rmSync } from 'node:fs'
 import { tmpdir } from 'node:os'
 import path from 'node:path'
 import storyboardDataPlugin, { resolveTemplateVars, computeTemplateVars, parseDataFile } from './data-plugin.js'