@dfosco/storyboard-core 4.2.1 → 4.2.3

package/src/svelte-plugin-ui/__tests__/ToolbarShell.test.ts

@@ -1,126 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import React from 'react'
-import {
-  registerMode,
-  initTools,
-  setToolAction,
-  setToolState,
-} from '@dfosco/storyboard-core'
-import { _resetModes } from '@test/modes'
-import ToolbarShell from '../components/ToolbarShell.jsx'
-
-afterEach(() => {
-  _resetModes()
-  const url = new URL(window.location.href)
-  url.searchParams.delete('mode')
-  window.history.replaceState(null, '', url.toString())
-})
-
-describe('ToolbarShell', () => {
-  it('renders nothing when no tools are declared', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    const { container } = render(React.createElement(ToolbarShell))
-    expect(container.querySelector('[role="toolbar"]')).toBeNull()
-  })
-
-  it('renders tool buttons from the tool registry', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    initTools({
-      '*': [
-        { id: 'zoom', label: 'Zoom', group: 'tools' },
-        { id: 'pan', label: 'Pan', group: 'tools' },
-      ],
-    })
-    setToolAction('zoom', () => {})
-    setToolAction('pan', () => {})
-
-    render(React.createElement(ToolbarShell))
-
-    expect(screen.getByTitle('Zoom')).toBeInTheDocument()
-    expect(screen.getByTitle('Pan')).toBeInTheDocument()
-  })
-
-  it('renders dev tools section', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    initTools({
-      '*': [{ id: 'debug', label: 'Debug', group: 'dev' }],
-    })
-    setToolAction('debug', () => {})
-
-    render(React.createElement(ToolbarShell))
-
-    expect(screen.getByTitle('Debug')).toBeInTheDocument()
-    expect(screen.getByText('Dev')).toBeInTheDocument()
-  })
-
-  it('renders both tool groups', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    initTools({
-      '*': [
-        { id: 'zoom', label: 'Zoom', group: 'tools' },
-        { id: 'debug', label: 'Debug', group: 'dev' },
-      ],
-    })
-    setToolAction('zoom', () => {})
-    setToolAction('debug', () => {})
-
-    render(React.createElement(ToolbarShell))
-
-    const toolbars = screen.getAllByRole('toolbar')
-    expect(toolbars).toHaveLength(2)
-    expect(screen.getByText('Tools')).toBeInTheDocument()
-    expect(screen.getByText('Dev')).toBeInTheDocument()
-  })
-
-  it('disables tools without an action', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    initTools({
-      '*': [{ id: 'no-action', label: 'No Action', group: 'tools' }],
-    })
-
-    render(React.createElement(ToolbarShell))
-
-    const btn = screen.getByTitle('No Action')
-    expect(btn).toBeDisabled()
-  })
-
-  it('disables tools with enabled: false state', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    initTools({
-      '*': [{ id: 'disabled-tool', label: 'Disabled', group: 'tools' }],
-    })
-    setToolAction('disabled-tool', () => {})
-    setToolState('disabled-tool', { enabled: false })
-
-    render(React.createElement(ToolbarShell))
-
-    const btn = screen.getByTitle('Disabled')
-    expect(btn).toBeDisabled()
-  })
-
-  it('hides tools with hidden: true state', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    initTools({
-      '*': [{ id: 'hidden-tool', label: 'Hidden', group: 'tools' }],
-    })
-    setToolState('hidden-tool', { hidden: true })
-
-    const { container } = render(React.createElement(ToolbarShell))
-
-    expect(container.querySelector('[role="toolbar"]')).toBeNull()
-  })
-
-  it('renders badge when present', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    initTools({
-      '*': [{ id: 'badged', label: 'Badged', group: 'tools' }],
-    })
-    setToolAction('badged', () => {})
-    setToolState('badged', { badge: 5 })
-
-    render(React.createElement(ToolbarShell))
-
-    expect(screen.getByText('5')).toBeInTheDocument()
-  })
-})

package/src/svelte-plugin-ui/__tests__/designModes.test.ts

@@ -1,58 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest'
-import {
-  registerMode,
-} from '@dfosco/storyboard-core'
-import { _resetModes } from '@test/modes'
-import { mountDesignModesUI, unmountDesignModesUI } from '../../ui/design-modes.js'
-
-afterEach(() => {
-  unmountDesignModesUI()
-  _resetModes()
-  document.body.innerHTML = ''
-  const url = new URL(window.location.href)
-  url.searchParams.delete('mode')
-  window.history.replaceState(null, '', url.toString())
-})
-
-describe('mountDesignModesUI', () => {
-  it('mounts ModeSwitch and ToolbarShell into the target', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    registerMode('inspect', { label: 'Develop' })
-
-    mountDesignModesUI(document.body)
-
-    const roots = document.querySelectorAll('.sb-plugin-root')
-    expect(roots.length).toBe(2)
-  })
-
-  it('is idempotent — calling twice does not double-mount', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    registerMode('inspect', { label: 'Develop' })
-
-    mountDesignModesUI(document.body)
-    mountDesignModesUI(document.body)
-
-    const roots = document.querySelectorAll('.sb-plugin-root')
-    expect(roots.length).toBe(2)
-  })
-
-  it('unmount removes all mounted components', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    registerMode('inspect', { label: 'Develop' })
-
-    const teardown = mountDesignModesUI(document.body)
-    expect(document.querySelectorAll('.sb-plugin-root').length).toBe(2)
-
-    teardown()
-    expect(document.querySelectorAll('.sb-plugin-root').length).toBe(0)
-  })
-
-  it('defaults to document.body when no container given', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    registerMode('inspect', { label: 'Develop' })
-
-    mountDesignModesUI()
-
-    expect(document.body.querySelectorAll('.sb-plugin-root').length).toBe(2)
-  })
-})

package/src/svelte-plugin-ui/__tests__/modeStore.test.ts

@@ -1,53 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest'
-import { get } from 'svelte/store'
-import {
-  registerMode,
-  activateMode,
-} from '@dfosco/storyboard-core'
-import { _resetModes } from '@test/modes'
-import { modeState, switchMode } from '../stores/modeStore.js'
-
-afterEach(() => {
-  _resetModes()
-  const url = new URL(window.location.href)
-  url.searchParams.delete('mode')
-  window.history.replaceState(null, '', url.toString())
-})
-
-describe('modeState store', () => {
-  it('returns default mode when no modes are registered', () => {
-    const state = get(modeState)
-    expect(state.mode).toBe('prototype')
-    expect(state.modes).toEqual([])
-    expect(state.currentModeConfig).toBeUndefined()
-  })
-
-  it('reflects registered modes', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    registerMode('inspect', { label: 'Develop' })
-
-    const state = get(modeState)
-    expect(state.modes).toHaveLength(2)
-    expect(state.modes[0]).toMatchObject({ name: 'prototype', label: 'Navigate' })
-    expect(state.modes[1]).toMatchObject({ name: 'inspect', label: 'Develop' })
-  })
-
-  it('tracks the active mode', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    registerMode('inspect', { label: 'Develop' })
-
-    expect(get(modeState).mode).toBe('prototype')
-
-    activateMode('inspect')
-    expect(get(modeState).mode).toBe('inspect')
-    expect(get(modeState).currentModeConfig?.name).toBe('inspect')
-  })
-
-  it('updates via switchMode helper', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    registerMode('present', { label: 'Collaborate' })
-
-    switchMode('present')
-    expect(get(modeState).mode).toBe('present')
-  })
-})

package/src/svelte-plugin-ui/__tests__/mount.test.ts

@@ -1,29 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest'
-import { mountSveltePlugin, _resetStyles } from '../mount.js'
-
-afterEach(() => {
-  _resetStyles()
-  document.body.innerHTML = ''
-})
-
-describe('mountSveltePlugin', () => {
-  it('creates a wrapper element inside the target', () => {
-    // We can't easily test with real Svelte components in unit tests
-    // without the Svelte compiler, but we can test the mount utility
-    // mechanics using a minimal mock.
-
-    // Test style injection
-    _resetStyles()
-    expect(document.getElementById('sb-svelte-ui-styles')).toBeNull()
-  })
-
-  it('_resetStyles removes injected styles', () => {
-    const link = document.createElement('link')
-    link.id = 'sb-svelte-ui-styles'
-    document.head.appendChild(link)
-
-    expect(document.getElementById('sb-svelte-ui-styles')).not.toBeNull()
-    _resetStyles()
-    expect(document.getElementById('sb-svelte-ui-styles')).toBeNull()
-  })
-})

package/src/svelte-plugin-ui/components/Icon.css

@@ -1,11 +0,0 @@
-.storyboard-icon {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-}
-.storyboard-icon:not(.stroke-icon) svg {
-  fill: currentColor;
-}
-.storyboard-icon.stroke-icon svg {
-  fill: none;
-}

package/src/svelte-plugin-ui/components/ModeSwitch.css

@@ -1,90 +0,0 @@
-.sb-mode-switch {
-  position: fixed;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  gap: 0;
-  background: var(--bgColor-muted, #161b22);
-  border: 1px solid var(--borderColor-default, #30363d);
-  border-radius: 999px;
-  padding: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-  font-family: "Hubot Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-}
-
-html.storyboard-mode-present .sb-mode-switch,
-html.storyboard-mode-plan .sb-mode-switch,
-html.storyboard-mode-inspect .sb-mode-switch {
-  background: color-mix(in srgb, var(--sb--mode-color) 40%, black);
-  transition: background 0.2s ease;
-}
-
-.sb-mode-btn {
-  appearance: none;
-  border: none;
-  background: transparent;
-  color: var(--fgColor-muted, #848d97);
-  font-size: 13px;
-  font-weight: 500;
-  padding: 6px 14px;
-  border-radius: 999px;
-  cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
-  white-space: nowrap;
-  line-height: 1;
-}
-
-.sb-mode-btn:hover {
-  color: var(--fgColor-default, #e6edf3);
-  background: var(--bgColor-neutral-muted, rgba(110, 118, 129, 0.1));
-}
-
-.sb-mode-btn-active {
-  background: var(--bgColor-accent-muted, rgba(56, 139, 253, 0.15));
-  color: var(--fgColor-accent, #58a6ff);
-}
-
-.sb-mode-btn-active:hover {
-  background: var(--bgColor-accent-muted, rgba(56, 139, 253, 0.2));
-  color: var(--fgColor-accent, #58a6ff);
-}
-
-/* Mode-aware button colors */
-html.storyboard-mode-prototype .sb-mode-btn,
-html.storyboard-mode-present .sb-mode-btn,
-html.storyboard-mode-plan .sb-mode-btn,
-html.storyboard-mode-inspect .sb-mode-btn {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-html.storyboard-mode-prototype .sb-mode-btn:hover,
-html.storyboard-mode-present .sb-mode-btn:hover,
-html.storyboard-mode-plan .sb-mode-btn:hover,
-html.storyboard-mode-inspect .sb-mode-btn:hover {
-  color: #fff;
-  background: rgba(255, 255, 255, 0.1);
-}
-
-html.storyboard-mode-prototype .sb-mode-btn-active,
-html.storyboard-mode-present .sb-mode-btn-active,
-html.storyboard-mode-plan .sb-mode-btn-active,
-html.storyboard-mode-inspect .sb-mode-btn-active {
-  background: rgba(255, 255, 255, 0.85);
-  color: color-mix(in srgb, var(--sb--mode-color) 70%, black);
-}
-
-html.storyboard-mode-prototype .sb-mode-btn-active:hover,
-html.storyboard-mode-present .sb-mode-btn-active:hover,
-html.storyboard-mode-plan .sb-mode-btn-active:hover,
-html.storyboard-mode-inspect .sb-mode-btn-active:hover {
-  background: rgba(255, 255, 255, 0.85);
-  color: color-mix(in srgb, var(--sb--mode-color) 70%, black);
-}
-
-/* Hide when chrome is toggled off via ⌘ + . */
-html.storyboard-chrome-hidden .sb-mode-switch {
-  display: none;
-}

package/src/svelte-plugin-ui/components/ModeSwitch.jsx

@@ -1,47 +0,0 @@
-/**
- * ModeSwitch — segmented toggle for switching between design modes.
- *
- * Renders as a fixed pill at the bottom-center of the viewport.
- * Only visible when two or more modes are registered.
- */
-
-import { useSyncExternalStore } from 'react'
-import './ModeSwitch.css'
-import { modeState, switchMode } from '../stores/modeStore.js'
-
-function subscribeModeState(callback) {
-  return modeState.subscribe(callback)
-}
-
-function getSnapshotModeState() {
-  let current
-  const unsub = modeState.subscribe((v) => { current = v })
-  unsub()
-  return current
-}
-
-export function ModeSwitch() {
-  const state = useSyncExternalStore(subscribeModeState, getSnapshotModeState)
-
-  if (!state?.switcherVisible || !state?.modes || state.modes.length < 2) {
-    return null
-  }
-
-  return (
-    <div className="sb-mode-switch" role="tablist" aria-label="Design mode">
-      {state.modes.map((m) => (
-        <button
-          key={m.name}
-          role="tab"
-          aria-selected={state.mode === m.name}
-          className={`sb-mode-btn${state.mode === m.name ? ' sb-mode-btn-active' : ''}`}
-          onClick={() => switchMode(m.name)}
-        >
-          {m.label}
-        </button>
-      ))}
-    </div>
-  )
-}
-
-export default ModeSwitch

package/src/svelte-plugin-ui/components/ToolbarShell.css

@@ -1,80 +0,0 @@
-.sb-toolbar-shell {
-  position: fixed;
-  right: 20px;
-  bottom: 80px;
-  z-index: 9998;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: flex-end;
-  font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-}
-
-.sb-toolbar {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  background: var(--bgColor-muted, #161b22);
-  border: 1px solid var(--borderColor-default, #30363d);
-  border-radius: 12px;
-  padding: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-}
-
-.sb-tool-btn {
-  appearance: none;
-  border: none;
-  background: transparent;
-  color: var(--fgColor-muted, #848d97);
-  font-size: 12px;
-  font-weight: 500;
-  padding: 6px 10px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
-  white-space: nowrap;
-  text-align: left;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.sb-tool-btn:hover:not(:disabled) {
-  color: var(--fgColor-default, #e6edf3);
-  background: var(--bgColor-neutral-muted, rgba(110, 118, 129, 0.1));
-}
-
-.sb-tool-btn:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
-.sb-tool-btn-active {
-  color: var(--fgColor-default, #e6edf3);
-  background: var(--bgColor-neutral-muted, rgba(110, 118, 129, 0.15));
-}
-
-.sb-tool-btn-busy {
-  opacity: 0.6;
-}
-
-.sb-tool-badge {
-  font-size: 10px;
-  font-weight: 600;
-  background: var(--bgColor-accent-muted, rgba(56, 139, 253, 0.15));
-  color: var(--fgColor-accent, #58a6ff);
-  padding: 1px 5px;
-  border-radius: 10px;
-  line-height: 1.2;
-}
-
-.sb-toolbar-label {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--fgColor-muted, #848d97);
-  padding: 4px 10px 2px;
-  opacity: 0.6;
-}

package/src/svelte-plugin-ui/components/ToolbarShell.jsx

@@ -1,84 +0,0 @@
-/**
- * ToolbarShell — right-side toolbar container with two stacked groups:
- *   1. Mode-specific tools (group: 'tools')
- *   2. Developer tools (group: 'dev')
- *
- * Reads from the tool store, which sources from the declarative tool
- * registry (modes.config.json) + runtime state (setToolState/setToolAction).
- *
- * Fixed to the right side of the viewport, above the ModeSwitch.
- * Only renders when the current mode has visible tools.
- */
-
-import { useSyncExternalStore } from 'react'
-import './ToolbarShell.css'
-import { toolState } from '../stores/toolStore.js'
-
-function subscribeToolState(callback) {
-  return toolState.subscribe(callback)
-}
-
-function getSnapshotToolState() {
-  let current
-  const unsub = toolState.subscribe((v) => { current = v })
-  unsub()
-  return current
-}
-
-function handleClick(tool) {
-  if (tool.action && tool.state.enabled && !tool.state.busy) {
-    tool.action()
-  }
-}
-
-function ToolButton({ tool }) {
-  return (
-    <button
-      className={
-        'sb-tool-btn' +
-        (tool.state.active ? ' sb-tool-btn-active' : '') +
-        (tool.state.busy ? ' sb-tool-btn-busy' : '')
-      }
-      onClick={() => handleClick(tool)}
-      disabled={!tool.state.enabled || tool.state.busy || !tool.action}
-      title={tool.label}
-    >
-      {tool.label}
-      {tool.state.badge != null && (
-        <span className="sb-tool-badge">{tool.state.badge}</span>
-      )}
-    </button>
-  )
-}
-
-export function ToolbarShell() {
-  const state = useSyncExternalStore(subscribeToolState, getSnapshotToolState)
-
-  if (!state || (state.tools.length === 0 && state.devTools.length === 0)) {
-    return null
-  }
-
-  return (
-    <div className="sb-toolbar-shell">
-      {state.tools.length > 0 && (
-        <div className="sb-toolbar" role="toolbar" aria-label="Mode tools">
-          <span className="sb-toolbar-label">Tools</span>
-          {state.tools.map((tool) => (
-            <ToolButton key={tool.id} tool={tool} />
-          ))}
-        </div>
-      )}
-
-      {state.devTools.length > 0 && (
-        <div className="sb-toolbar" role="toolbar" aria-label="Developer tools">
-          <span className="sb-toolbar-label">Dev</span>
-          {state.devTools.map((tool) => (
-            <ToolButton key={tool.id} tool={tool} />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default ToolbarShell