@dfosco/storyboard 0.5.0-alpha.0

package/src/core/stores/toolbarConfigStore.js

@@ -0,0 +1,165 @@
+/**
+ * Toolbar Config Store — reactive toolbar configuration with layered overrides.
+ *
+ * Override priority (highest wins):
+ *   core (toolbar.config.json) → custom (client repo) → prototype → user (future)
+ *
+ * Framework-agnostic (zero npm dependencies).
+ */
+
+import { deepMerge } from '../data/loader.js'
+
+// ---------------------------------------------------------------------------
+// Internal state
+// ---------------------------------------------------------------------------
+
+/** @type {object} Merged core + custom config (set once at startup) */
+let _baseConfig = {}
+
+/** @type {object|null} Active prototype toolbar overrides */
+let _prototypeConfig = null
+
+/** @type {object} Final merged config (base + prototype) */
+let _mergedConfig = {}
+
+/** @type {Set<Function>} */
+const _listeners = new Set()
+
+/** @type {object|null} Client-repo toolbar overrides (set by virtual module before mount) */
+let _clientOverrides = null
+
+let _snapshotVersion = 0
+
+// ---------------------------------------------------------------------------
+// Initialization
+// ---------------------------------------------------------------------------
+
+/**
+ * Set the base toolbar config (core defaults merged with client overrides).
+ * Called once at app startup by mountStoryboardCore.
+ *
+ * @param {object} config - Already-merged core + custom toolbar config
+ */
+export function initToolbarConfig(config) {
+  _baseConfig = config
+  _prototypeConfig = null
+  _recompute()
+}
+
+// ---------------------------------------------------------------------------
+// Prototype overrides
+// ---------------------------------------------------------------------------
+
+/**
+ * Set toolbar overrides for the active prototype.
+ * Called on route change when entering a prototype that has a toolbar.config.json.
+ *
+ * @param {object|null} config - Prototype-level overrides, or null to clear
+ */
+export function setPrototypeToolbarConfig(config) {
+  _prototypeConfig = config || null
+  _recompute()
+}
+
+/**
+ * Clear prototype overrides (e.g. when navigating to viewfinder or a
+ * prototype without its own toolbar.config.json).
+ */
+export function clearPrototypeToolbarConfig() {
+  if (_prototypeConfig === null) return
+  _prototypeConfig = null
+  _recompute()
+}
+
+// ---------------------------------------------------------------------------
+// Access
+// ---------------------------------------------------------------------------
+
+/**
+ * Get the current merged toolbar config.
+ *
+ * @returns {object}
+ */
+export function getToolbarConfig() {
+  return _mergedConfig
+}
+
+// ---------------------------------------------------------------------------
+// Reactivity
+// ---------------------------------------------------------------------------
+
+/**
+ * Subscribe to toolbar config changes. Compatible with external stores.
+ *
+ * @param {Function} callback
+ * @returns {Function} Unsubscribe
+ */
+export function subscribeToToolbarConfig(callback) {
+  _listeners.add(callback)
+  callback(_mergedConfig)
+  return () => _listeners.delete(callback)
+}
+
+/**
+ * Snapshot for useSyncExternalStore.
+ *
+ * @returns {string}
+ */
+export function getToolbarConfigSnapshot() {
+  return String(_snapshotVersion)
+}
+
+// ---------------------------------------------------------------------------
+// Internal
+// ---------------------------------------------------------------------------
+
+function _recompute() {
+  _mergedConfig = _prototypeConfig
+    ? deepMerge(_baseConfig, _prototypeConfig)
+    : _baseConfig
+  _snapshotVersion++
+  for (const cb of _listeners) {
+    try { cb(_mergedConfig) } catch (err) {
+      console.error('[storyboard] Error in toolbar config subscriber:', err)
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Client overrides (set by Vite data plugin before mountStoryboardCore runs)
+// ---------------------------------------------------------------------------
+
+/**
+ * Store client-repo toolbar overrides from a root toolbar.config.json.
+ * Called from the generated virtual module at import time.
+ *
+ * @param {object} config - Client toolbar config (tools, surfaces, etc.)
+ */
+export function setClientToolbarOverrides(config) {
+  _clientOverrides = config
+}
+
+/**
+ * Consume and clear pending client overrides.
+ * Called once by mountStoryboardCore during toolbar config init.
+ *
+ * @returns {object|null}
+ */
+export function consumeClientToolbarOverrides() {
+  const overrides = _clientOverrides
+  _clientOverrides = null
+  return overrides
+}
+
+// ---------------------------------------------------------------------------
+// Test helpers
+// ---------------------------------------------------------------------------
+
+export function _resetToolbarConfig() {
+  _baseConfig = {}
+  _prototypeConfig = null
+  _clientOverrides = null
+  _mergedConfig = {}
+  _listeners.clear()
+  _snapshotVersion = 0
+}

package/src/core/stores/uiConfig.js

@@ -0,0 +1,64 @@
+/**
+ * UI Config — project-level overrides for storyboard chrome visibility.
+ *
+ * Client repos use the "ui" key in storyboard.config.json to hide
+ * specific menus or UI elements from the CoreUIBar.
+ *
+ *   {
+ *     "ui": {
+ *       "hide": ["docs", "comments"]
+ *     }
+ *   }
+ *
+ * Framework-agnostic (zero npm dependencies).
+ */
+
+// ---------------------------------------------------------------------------
+// Internal state
+// ---------------------------------------------------------------------------
+
+let _hiddenItems = new Set()
+
+// ---------------------------------------------------------------------------
+// Configuration
+// ---------------------------------------------------------------------------
+
+/**
+ * Initialize UI config from storyboard.config.json's "ui" key.
+ * Called by the Vite data plugin's generated virtual module.
+ *
+ * @param {{ hide?: string[] }} [config]
+ */
+export function initUIConfig(config = {}) {
+  _hiddenItems = new Set(Array.isArray(config.hide) ? config.hide : [])
+}
+
+/**
+ * Check whether a specific menu is hidden by project config.
+ *
+ * @param {string} key  Menu key (e.g. 'docs', 'inspector', 'create', 'comments', 'command')
+ * @returns {boolean}
+ */
+export function isMenuHidden(key) {
+  return _hiddenItems.has(key)
+}
+
+/**
+ * Get the full set of hidden item keys.
+ *
+ * @returns {string[]}
+ */
+export function getHiddenItems() {
+  return Array.from(_hiddenItems)
+}
+
+// ---------------------------------------------------------------------------
+// Test helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Reset all internal state. Only for use in tests.
+ */
+export function _resetUIConfig() {
+  _hiddenItems = new Set()
+}

package/src/core/stores/uiConfig.test.js

@@ -0,0 +1,63 @@
+import { initUIConfig, isMenuHidden, getHiddenItems, _resetUIConfig } from './uiConfig.js'
+
+afterEach(() => {
+  _resetUIConfig()
+})
+
+describe('initUIConfig', () => {
+  it('starts with no hidden items', () => {
+    expect(getHiddenItems()).toEqual([])
+  })
+
+  it('accepts a hide array', () => {
+    initUIConfig({ hide: ['docs', 'comments'] })
+    expect(getHiddenItems()).toEqual(['docs', 'comments'])
+  })
+
+  it('handles empty config', () => {
+    initUIConfig({})
+    expect(getHiddenItems()).toEqual([])
+  })
+
+  it('handles no args', () => {
+    initUIConfig()
+    expect(getHiddenItems()).toEqual([])
+  })
+
+  it('replaces previous config on re-init', () => {
+    initUIConfig({ hide: ['docs'] })
+    initUIConfig({ hide: ['inspector'] })
+    expect(getHiddenItems()).toEqual(['inspector'])
+  })
+})
+
+describe('isMenuHidden', () => {
+  it('returns false for non-hidden menus', () => {
+    initUIConfig({ hide: ['docs'] })
+    expect(isMenuHidden('inspector')).toBe(false)
+  })
+
+  it('returns true for hidden menus', () => {
+    initUIConfig({ hide: ['docs', 'comments'] })
+    expect(isMenuHidden('docs')).toBe(true)
+    expect(isMenuHidden('comments')).toBe(true)
+  })
+
+  it('returns false when no config is set', () => {
+    expect(isMenuHidden('docs')).toBe(false)
+  })
+
+  it('can hide the command menu', () => {
+    initUIConfig({ hide: ['command'] })
+    expect(isMenuHidden('command')).toBe(true)
+  })
+})
+
+describe('_resetUIConfig', () => {
+  it('clears all hidden items', () => {
+    initUIConfig({ hide: ['docs', 'inspector', 'create'] })
+    _resetUIConfig()
+    expect(getHiddenItems()).toEqual([])
+    expect(isMenuHidden('docs')).toBe(false)
+  })
+})

package/src/core/styles/tailwind.css

@@ -0,0 +1,204 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@source "../**/*.{jsx,js,ts}";
+
+@font-face {
+  font-family: "Hubot Sans";
+  src:
+    url("../../../../assets/fonts/HubotSans/Hubot-Sans.woff2") format("woff2 supports variations"),
+    url("../../../../assets/fonts/HubotSans/Hubot-Sans.woff2") format("woff2-variations");
+  font-weight: 200 900;
+  font-stretch: 75% 125%;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Mona Sans";
+  src:
+    url("../../../../assets/fonts/MonaSans/MonaSans.woff2") format("woff2 supports variations"),
+    url("../../../../assets/fonts/MonaSans/MonaSans.woff2") format("woff2-variations");
+  font-weight: 200 900;
+  font-stretch: 75% 125%;
+  font-display: swap;
+}
+
+@custom-variant dark (&:where([data-sb-theme^="dark"], [data-sb-theme^="dark"] *));
+
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 84% 4.9%);
+  --color-card: hsl(0 0% 100%);
+  --color-card-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-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+  --color-border: hsl(214.3 31.8% 91.4%);
+  --color-input: hsl(214.3 31.8% 91.4%);
+  --color-ring: hsl(222.2 84% 4.9%);
+  --color-success: hsl(142 71% 36%);
+  --color-success-foreground: hsl(0 0% 100%);
+  --radius: 0.5rem;
+  --font-sans: "Hubot Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+
+  --sb--color-background: hsl(0 0% 100%);
+  --sb--color-foreground: hsl(222.2 84% 4.9%);
+  --sb--color-card: hsl(0 0% 100%);
+  --sb--color-card-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-destructive: hsl(0 84.2% 60.2%);
+  --sb--color-destructive-foreground: hsl(210 40% 98%);
+  --sb--color-border: hsl(214.3 31.8% 91.4%);
+  --sb--color-input: hsl(214.3 31.8% 91.4%);
+  --sb--color-ring: hsl(222.2 84% 4.9%);
+  --sb--color-success: hsl(142 71% 36%);
+  --sb--color-success-foreground: hsl(0 0% 100%);
+  --sb--radius: var(--radius);
+  --sb--font-sans: var(--font-sans);
+  --sb--font-mono: var(--font-mono);
+}
+
+@layer base {
+  [data-sb-theme^="dark"] {
+    --color-background: hsl(222.2 84% 4.9%);
+    --color-foreground: hsl(210 40% 98%);
+    --color-card: hsl(222.2 84% 4.9%);
+    --color-card-foreground: hsl(210 40% 98%);
+    --color-popover: hsl(222.2 84% 4.9%);
+    --color-popover-foreground: hsl(210 40% 98%);
+    --color-primary: hsl(210 40% 98%);
+    --color-primary-foreground: hsl(222.2 47.4% 11.2%);
+    --color-secondary: hsl(217.2 32.6% 17.5%);
+    --color-secondary-foreground: hsl(210 40% 98%);
+    --color-muted: hsl(217.2 32.6% 17.5%);
+    --color-muted-foreground: hsl(215 20.2% 65.1%);
+    --color-accent: hsl(217.2 32.6% 17.5%);
+    --color-accent-foreground: hsl(210 40% 98%);
+    --color-destructive: hsl(0 62.8% 30.6%);
+    --color-destructive-foreground: hsl(210 40% 98%);
+    --color-border: hsl(217.2 32.6% 17.5%);
+    --color-input: hsl(217.2 32.6% 17.5%);
+    --color-ring: hsl(212.7 26.8% 83.9%);
+    --color-success: hsl(142 71% 45%);
+    --color-success-foreground: hsl(0 0% 100%);
+
+    --sb--color-background: hsl(222.2 84% 4.9%);
+    --sb--color-foreground: hsl(210 40% 98%);
+    --sb--color-card: hsl(222.2 84% 4.9%);
+    --sb--color-card-foreground: hsl(210 40% 98%);
+    --sb--color-popover: hsl(222.2 84% 4.9%);
+    --sb--color-popover-foreground: hsl(210 40% 98%);
+    --sb--color-primary: hsl(210 40% 98%);
+    --sb--color-primary-foreground: hsl(222.2 47.4% 11.2%);
+    --sb--color-secondary: hsl(217.2 32.6% 17.5%);
+    --sb--color-secondary-foreground: hsl(210 40% 98%);
+    --sb--color-muted: hsl(217.2 32.6% 17.5%);
+    --sb--color-muted-foreground: hsl(215 20.2% 65.1%);
+    --sb--color-accent: hsl(217.2 32.6% 17.5%);
+    --sb--color-accent-foreground: hsl(210 40% 98%);
+    --sb--color-destructive: hsl(0 62.8% 30.6%);
+    --sb--color-destructive-foreground: hsl(210 40% 98%);
+    --sb--color-border: hsl(217.2 32.6% 17.5%);
+    --sb--color-input: hsl(217.2 32.6% 17.5%);
+    --sb--color-ring: hsl(212.7 26.8% 83.9%);
+    --sb--color-success: hsl(142 71% 45%);
+    --sb--color-success-foreground: hsl(0 0% 100%);
+  }
+}
+@custom-variant data-open {
+	&:where([data-state="open"]), &:where([data-open]:not([data-open="false"])) {
+		@slot;
+  }
+}
+@custom-variant data-closed {
+	&:where([data-state="closed"]), &:where([data-closed]:not([data-closed="false"])) {
+		@slot;
+  }
+}
+@custom-variant data-checked {
+	&:where([data-state="checked"]), &:where([data-checked]:not([data-checked="false"])) {
+		@slot;
+  }
+}
+@custom-variant data-unchecked {
+	&:where([data-state="unchecked"]), &:where([data-unchecked]:not([data-unchecked="false"])) {
+		@slot;
+  }
+}
+@custom-variant data-selected {
+	&:where([data-selected]) {
+		@slot;
+  }
+}
+@custom-variant data-disabled {
+	&:where([data-disabled="true"]), &:where([data-disabled]:not([data-disabled="false"])) {
+		@slot;
+  }
+}
+@custom-variant data-active {
+	&:where([data-state="active"]), &:where([data-active]:not([data-active="false"])) {
+		@slot;
+  }
+}
+@custom-variant data-horizontal {
+	&:where([data-orientation="horizontal"]) {
+		@slot;
+  }
+}
+@custom-variant data-vertical {
+	&:where([data-orientation="vertical"]) {
+		@slot;
+  }
+}
+@utility no-scrollbar {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	&::-webkit-scrollbar {
+		display: none;
+  }
+}
+
+@utility smooth-corners {
+  mask-image: paint(smooth-corners);
+  -webkit-mask-image: paint(smooth-corners);
+}
+
+@layer base {
+  :root {
+    --sb--smooth-corners: 4;
+    --sb--radius-md: var(--radius-md);
+  }
+}
+
+/*
+ * 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/core/tools/handlers/autosync.js

@@ -0,0 +1,12 @@
+/**
+ * Autosync tool handler.
+ *
+ * Dev-only tool (localOnly) that auto-commits and pushes changes
+ * to a selected branch every 30 seconds.
+ */
+export const id = 'autosync'
+
+export async function component() {
+  const mod = await import('../../ui/AutosyncMenuButton.jsx')
+  return mod.default
+}

package/src/core/tools/handlers/canvasAddWidget.js

@@ -0,0 +1,11 @@
+/**
+ * Canvas add-widget tool module — dropdown menu for adding widgets to canvas.
+ *
+ * Wraps the CanvasCreateMenu component. Only active on canvas pages.
+ */
+export const id = 'canvas-add-widget'
+
+export async function component() {
+  const mod = await import('../../ui/CanvasCreateMenu.jsx')
+  return mod.default
+}

package/src/core/tools/handlers/canvasAgents.js

@@ -0,0 +1,20 @@
+/**
+ * Canvas agents tool module — dropdown menu for adding agent widgets to canvas.
+ *
+ * Renders agent options from canvas.agents config. Only active on canvas pages
+ * when agents are configured.
+ */
+export const id = 'canvas-agents'
+
+export async function guard(_ctx) {
+  void _ctx
+  const { getConfig } = await import('../../index.js')
+  const canvasConfig = getConfig('canvas')
+  const agents = canvasConfig?.agents
+  return agents && typeof agents === 'object' && Object.keys(agents).length > 0
+}
+
+export async function component() {
+  const mod = await import('../../ui/CanvasAgentsMenu.jsx')
+  return mod.default
+}

package/src/core/tools/handlers/canvasToolbar.js

@@ -0,0 +1,56 @@
+/**
+ * Canvas toolbar tool module — shared actions for all canvas toolbar tools.
+ *
+ * Each canvas tool (zoom, zoom-to-fit, undo-redo, snap) references this
+ * handler. The component() export returns the component matching the tool's
+ * render type, resolved at load time via the toolConfig passed to component().
+ */
+import { getCanvasZoom } from '../../index.js'
+
+export const id = 'canvas-toolbar'
+
+export async function handler() {
+  const { min: ZOOM_MIN, max: ZOOM_MAX, step: ZOOM_STEP } = getCanvasZoom()
+
+  return {
+    zoomIn(currentZoom) {
+      const next = Math.min(ZOOM_MAX, currentZoom + ZOOM_STEP)
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:set-zoom', { detail: { zoom: next } }))
+    },
+    zoomOut(currentZoom) {
+      const next = Math.max(ZOOM_MIN, currentZoom - ZOOM_STEP)
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:set-zoom', { detail: { zoom: next } }))
+    },
+    zoomReset() {
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:set-zoom', { detail: { zoom: 100 } }))
+    },
+    zoomToFit() {
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:zoom-to-fit'))
+    },
+    undo() {
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:undo'))
+    },
+    redo() {
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:redo'))
+    },
+    toggleSnap() {
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:toggle-snap'))
+    },
+    ZOOM_MIN,
+    ZOOM_MAX,
+  }
+}
+
+const componentMap = {
+  'canvas-zoom':        () => import('../../ui/CanvasZoomControl.jsx'),
+  'canvas-zoom-to-fit': () => import('../../ui/CanvasZoomToFit.jsx'),
+  'canvas-undo-redo':   () => import('../../ui/CanvasUndoRedo.jsx'),
+  'canvas-snap':        () => import('../../ui/CanvasSnap.jsx'),
+}
+
+export async function component(renderType) {
+  const loader = componentMap[renderType]
+  if (!loader) return null
+  const mod = await loader()
+  return mod.default
+}

package/src/core/tools/handlers/commandPalette.js

@@ -0,0 +1,9 @@
+/**
+ * Command Palette tool — toolbar button that opens the ⌘K command palette.
+ */
+export const id = 'command-palette'
+
+export async function component() {
+  const mod = await import('../../ui/CommandPaletteTrigger.jsx')
+  return mod.default
+}

package/src/core/tools/handlers/comments.js

@@ -0,0 +1,16 @@
+/**
+ * Comments tool module — comment pins and annotation system.
+ *
+ * Guard: only mounts if comments are enabled in storyboard.config.json.
+ */
+export const id = 'comments'
+
+export async function guard() {
+  const { isCommentsEnabled } = await import('../../index.js')
+  return isCommentsEnabled()
+}
+
+export async function component() {
+  const mod = await import('../../ui/CommentsMenuButton.jsx')
+  return mod.default
+}

package/src/core/tools/handlers/create.js

@@ -0,0 +1,39 @@
+/**
+ * Create tool module — workshop prototype/flow/canvas creation.
+ *
+ * Loads the workshop feature registry and CreateMenuButton component.
+ * Guard: only mounts if at least one create feature has an overlay.
+ */
+export const id = 'create'
+
+export async function setup(ctx) {
+  const { config } = ctx
+  const { features } = await import('../../workshop/features/registry.js')
+
+  const createActions = Array.isArray(config.actions) ? config.actions : []
+  const createFeatures = createActions
+    .filter(a => a.feature)
+    .map(a => {
+      const feat = features[a.feature]
+      if (!feat || !feat.overlayId || !feat.overlay) return null
+      return {
+        name: feat.name,
+        label: a.label || feat.label,
+        overlayId: feat.overlayId,
+        overlay: feat.overlay,
+      }
+    })
+    .filter(Boolean)
+
+  return { features: createFeatures }
+}
+
+export async function guard(ctx) {
+  const result = await setup(ctx)
+  return result.features.length > 0
+}
+
+export async function component() {
+  const mod = await import('../../ui/CreateMenuButton.jsx')
+  return mod.default
+}