@dfosco/storyboard-core 4.2.2 → 4.2.4

package/src/svelte-plugin-ui/stores/modeStore.ts

@@ -1,91 +0,0 @@
-/**
- * Svelte store that wraps the core modes.js API.
- *
- * Provides a readable store whose value updates whenever the active mode
- * or the set of registered modes changes.  Uses subscribeToMode() from
- * @dfosco/storyboard-core so it stays in sync with any other consumer
- * (React hooks, vanilla JS, etc.).
- */
-
-import { writable, type Readable } from 'svelte/store'
-import {
-  getCurrentMode,
-  getRegisteredModes,
-  activateMode,
-  subscribeToMode,
-  isModeSwitcherVisible,
-} from './types.js'
-import type { ModeConfig } from './types.js'
-
-export interface ModeState {
-  /** Currently active mode name */
-  mode: string
-  /** All registered modes */
-  modes: ModeConfig[]
-  /** Config object for the active mode */
-  currentModeConfig: ModeConfig | undefined
-  /** Whether the mode switcher should be visible */
-  switcherVisible: boolean
-}
-
-function snapshot(): ModeState {
-  const mode = getCurrentMode()
-  const modes = getRegisteredModes()
-  return {
-    mode,
-    modes,
-    currentModeConfig: modes.find((m) => m.name === mode),
-    switcherVisible: isModeSwitcherVisible(),
-  }
-}
-
-/**
- * Create the mode state store.
- *
- * Uses a writable internally but exposes only a readable interface.
- * Subscribes to the core modes API whenever there are active subscribers,
- * and always provides a fresh snapshot on subscribe.
- */
-function createModeStore(): Readable<ModeState> {
-  const { subscribe: rawSubscribe, set } = writable<ModeState>(snapshot())
-
-  const subscribe: Readable<ModeState>['subscribe'] = (run, invalidate) => {
-    // Always give the subscriber the latest snapshot immediately
-    set(snapshot())
-
-    // Subscribe to core mode changes while there are Svelte subscribers
-    const unsubCore = subscribeToMode(() => set(snapshot()))
-
-    const unsubStore = rawSubscribe(run, invalidate)
-
-    return () => {
-      unsubStore()
-      unsubCore()
-    }
-  }
-
-  return { subscribe }
-}
-
-/**
- * Readable Svelte store for the design-mode system.
- *
- * ```svelte
- * <script>
- *   import { modeState, switchMode } from '@dfosco/storyboard-core/svelte-plugin-ui'
- * </script>
- *
- * {#each $modeState.modes as m}
- *   <button on:click={() => switchMode(m.name)}>{m.label}</button>
- * {/each}
- * ```
- */
-export const modeState: Readable<ModeState> = createModeStore()
-
-/**
- * Switch to a registered mode.  Thin wrapper around activateMode —
- * the store updates automatically via the subscription.
- */
-export function switchMode(name: string, options?: Record<string, unknown>): void {
-  activateMode(name, options)
-}

package/src/svelte-plugin-ui/stores/toolStore.ts

@@ -1,71 +0,0 @@
-/**
- * Svelte store that wraps the core tool registry API.
- *
- * Provides a readable store whose value updates whenever:
- * - The active mode changes (different tools for each mode)
- * - Tool state or actions change (setToolState, setToolAction)
- *
- * Groups tools into { tools, devTools } for the toolbar to consume.
- */
-
-import { writable, type Readable } from 'svelte/store'
-import {
-  getCurrentMode,
-  getToolsForMode,
-  subscribeToMode,
-  subscribeToTools,
-} from './types.js'
-import type { ResolvedTool } from './types.js'
-
-export interface ToolStoreState {
-  /** Tools in the 'tools' group for the current mode */
-  tools: ResolvedTool[]
-  /** Tools in the 'dev' group for the current mode */
-  devTools: ResolvedTool[]
-}
-
-function snapshot(): ToolStoreState {
-  const mode = getCurrentMode()
-  const allTools = getToolsForMode(mode)
-  return {
-    tools: allTools.filter((t) => t.group === 'tools'),
-    devTools: allTools.filter((t) => t.group === 'dev'),
-  }
-}
-
-function createToolStore(): Readable<ToolStoreState> {
-  const { subscribe: rawSubscribe, set } = writable<ToolStoreState>(snapshot())
-
-  const subscribe: Readable<ToolStoreState>['subscribe'] = (run, invalidate) => {
-    set(snapshot())
-
-    // Re-snapshot on mode changes OR tool state/action changes
-    const unsubMode = subscribeToMode(() => set(snapshot()))
-    const unsubTools = subscribeToTools(() => set(snapshot()))
-
-    const unsubStore = rawSubscribe(run, invalidate)
-
-    return () => {
-      unsubStore()
-      unsubMode()
-      unsubTools()
-    }
-  }
-
-  return { subscribe }
-}
-
-/**
- * Readable Svelte store for the tool registry.
- *
- * ```svelte
- * <script>
- *   import { toolState } from '../stores/toolStore.js'
- * </script>
- *
- * {#each $toolState.tools as tool}
- *   <button onclick={tool.action} disabled={!tool.state.enabled}>{tool.label}</button>
- * {/each}
- * ```
- */
-export const toolState: Readable<ToolStoreState> = createToolStore()

package/src/svelte-plugin-ui/stores/types.ts

@@ -1,55 +0,0 @@
-/**
- * Type declarations for the core modes API.
- *
- * Re-exports the core functions with proper TypeScript signatures
- * so Svelte components and stores get full type safety.
- */
-
-// Re-export from core modes (sibling module within @dfosco/storyboard-core)
-export {
-  getCurrentMode,
-  getRegisteredModes,
-  activateMode,
-  deactivateMode,
-  subscribeToMode,
-  getModeSnapshot,
-  registerMode,
-  unregisterMode,
-  syncModeClasses,
-  on,
-  off,
-  emit,
-  getToolsForMode,
-  subscribeToTools,
-  getToolsSnapshot,
-  getLockedMode,
-  isModeSwitcherVisible,
-} from '../../modes.js'
-
-export interface ModeConfig {
-  name: string
-  label: string
-  icon?: string
-  className?: string | string[]
-  onActivate?: (options?: Record<string, unknown>) => void
-  onDeactivate?: () => void
-}
-
-export interface ToolState {
-  enabled: boolean
-  active: boolean
-  busy: boolean
-  hidden: boolean
-  badge: string | number | null
-}
-
-export interface ResolvedTool {
-  id: string
-  label: string
-  group: 'tools' | 'dev'
-  icon: string | null
-  order: number
-  modes: string[]
-  state: ToolState
-  action: (() => void) | null
-}

package/src/svelte-plugin-ui/styles/base.css

@@ -1,69 +0,0 @@
-/**
- * Shared plugin UI styles.
- *
- * sb-* custom properties switch based on [data-sb-theme] on <html>.
- * Themes starting with "dark" get dark tokens; everything else gets light.
- *
- * These are consumed by all core plugin UIs (design-modes, comments, etc.)
- */
-
-/* --- Light theme (default) --- */
-:root {
-  --sb--bg: #ffffff;
-  --sb--bg-inset: #f6f8fa;
-  --sb--bg-muted: #f3f4f6;
-  --sb--border: #d1d5db;
-  --sb--border-muted: #e5e7eb;
-  --sb--fg: #1f2328;
-  --sb--fg-muted: #656d76;
-  --sb--fg-accent: #0969da;
-  --sb--fg-success: #1a7f37;
-  --sb--fg-danger: #d1242f;
-  --sb--btn-success: #1a7f37;
-}
-
-/* --- Dark theme (any dark-* variant) --- */
-[data-sb-theme^="dark"] {
-  --sb--bg: #161b22;
-  --sb--bg-inset: #0d1117;
-  --sb--bg-muted: #21262d;
-  --sb--border: #30363d;
-  --sb--border-muted: #21262d;
-  --sb--fg: #e6edf3;
-  --sb--fg-muted: #8b949e;
-  --sb--fg-accent: #58a6ff;
-  --sb--fg-success: #3fb950;
-  --sb--fg-danger: #f85149;
-  --sb--btn-success: #238636;
-}
-
-/* --- Semantic utility classes (supplement Tachyons) --- */
-.sb-bg         { background-color: var(--sb--bg); }
-.sb-bg-inset   { background-color: var(--sb--bg-inset); }
-.sb-bg-muted   { background-color: var(--sb--bg-muted); }
-.sb-b-default  { border-color: var(--sb--border); }
-.sb-b-muted    { border-color: var(--sb--border-muted); }
-.sb-fg         { color: var(--sb--fg); }
-.sb-fg-muted   { color: var(--sb--fg-muted); }
-.sb-fg-accent  { color: var(--sb--fg-accent); }
-.sb-fg-success { color: var(--sb--fg-success); }
-.sb-fg-danger  { color: var(--sb--fg-danger); }
-.sb-btn-success { background-color: var(--sb--btn-success); color: #fff; }
-.sb-btn-success:hover { filter: brightness(1.15); }
-.sb-btn-cancel { background-color: var(--sb--bg-muted); border: 1px solid var(--sb--border); color: var(--sb--fg); }
-.sb-btn-cancel:hover { background-color: var(--sb--border-muted); }
-
-.sb-input {
-  background: var(--sb--bg-inset);
-  border: 1px solid var(--sb--border);
-  color: var(--sb--fg);
-  outline: none;
-}
-.sb-input:focus {
-  border-color: var(--sb--fg-accent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb--fg-accent) 15%, transparent);
-}
-.sb-input::placeholder { color: var(--sb--fg-muted); }
-
-.sb-shadow { box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1); }
-[data-sb-theme^="dark"] .sb-shadow { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3); }