@dfosco/storyboard-core 4.2.2 → 4.2.4

package/src/CommandMenu.jsx

@@ -11,10 +11,10 @@ import { useState, useEffect, useMemo, useCallback } from 'react'
 import * as DropdownMenu from './lib/components/ui/dropdown-menu/index.js'
 import * as Panel from './lib/components/ui/panel/index.js'
 import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
-import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import Icon from './Icon.jsx'
 import { getActionsForMode, executeAction, getActionChildren, subscribeToCommandActions } from './commandActions.js'
 import { getToolbarToolState, isToolbarToolLocalOnly, subscribeToToolbarToolStates } from './toolStateStore.js'
-import { getCurrentMode, subscribeToMode } from './svelte-plugin-ui/stores/types.js'
+import { getCurrentMode, subscribeToMode } from './modes.js'
 
 const localDotStyle = {
   display: 'inline-block',

package/src/CommandPalette.jsx

@@ -6,7 +6,7 @@
 
 import { useCallback } from 'react'
 import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
-import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import Icon from './Icon.jsx'
 
 export default function CommandPalette({
   tabindex,

package/src/CommandPaletteTrigger.jsx

@@ -5,7 +5,7 @@
 
 import { useCallback } from 'react'
 import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
-import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import Icon from './Icon.jsx'
 
 export default function CommandPaletteTrigger({ config = {}, tabindex }) {
   const openPalette = useCallback(() => {

package/src/CommentsMenuButton.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
-import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import Icon from './Icon.jsx'
 import { isAuthenticated } from './comments/auth.js'
 import { isCommentModeActive, toggleCommentMode, subscribeToCommentMode } from './comments/commentMode.js'
 import { openAuthModal } from './comments/ui/authModal.js'

package/src/CoreUIBar.jsx

@@ -16,8 +16,8 @@ import * as Panel from './lib/components/ui/panel/index.js'
 import PwaInstallBanner from './PwaInstallBanner.jsx'
 import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
 import * as Tooltip from './lib/components/ui/tooltip/index.js'
-import Icon from './svelte-plugin-ui/components/Icon.jsx'
-import { modeState } from './svelte-plugin-ui/stores/modeStore.js'
+import Icon from './Icon.jsx'
+import { getCurrentMode, getRegisteredModes, subscribeToMode, isModeSwitcherVisible } from './modes.js'
 import { sidePanelState, togglePanel } from './stores/sidePanelStore.js'
 import {
   initCommandActions, registerCommandAction, getActionChildren,
@@ -114,6 +114,22 @@ function menuVisibleInMode(menu, mode) {
   return menu.modes.includes('*') || menu.modes.includes(mode)
 }
 
+// Subscribable mode state for useExternalStore (replaces Svelte modeState)
+const modeState = {
+  get mode() { return getCurrentMode() },
+  get modes() { return getRegisteredModes() },
+  get switcherVisible() { return isModeSwitcherVisible() },
+  subscribe(fn) {
+    const snapshot = () => ({
+      mode: getCurrentMode(),
+      modes: getRegisteredModes(),
+      switcherVisible: isModeSwitcherVisible(),
+    })
+    fn(snapshot())
+    return subscribeToMode(() => fn(snapshot()))
+  },
+}
+
 // Hook to subscribe to an external store (modeState, sidePanelState)
 function useExternalStore(store) {
   const [value, setValue] = useState(() => ({ ...store }))

package/src/CreateMenuButton.jsx

@@ -2,7 +2,7 @@ import { useState, useMemo } from 'react'
 import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
 import * as DropdownMenu from './lib/components/ui/dropdown-menu/index.js'
 import * as Panel from './lib/components/ui/panel/index.js'
-import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import Icon from './Icon.jsx'
 import { isExcludedByRoute } from '@dfosco/storyboard-core'
 
 export default function CreateMenuButton({ features: featuresProp = [], data, config = { label: 'Create' }, localOnly: _localOnly, tabindex }) {

package/src/HideChromeTrigger.jsx

@@ -6,7 +6,7 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
-import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import Icon from './Icon.jsx'
 
 export default function HideChromeTrigger({ config = {}, tabindex }) {
   const [hidden, setHidden] = useState(

package/src/{svelte-plugin-ui/components/Icon.jsx → Icon.jsx}

@@ -50,14 +50,6 @@ const customIcons = {
       'M17.6103 6.5C18.2731 6.5 18.8104 7.03731 18.8104 7.70012C18.8104 8.36293 18.2731 8.90025 17.6103 8.90025H17.5986C16.9358 8.90025 16.3984 8.36293 16.3984 7.70012C16.3984 7.03731 16.9358 6.5 17.5986 6.5H17.6103Z',
     ],
   },
-  'flow': {
-    viewBox: '0 0 24 24',
-    strokeWidth: '2.5',
-    strokePaths: [
-      'M13 19L22 12L13 5L13 19Z',
-      'M2 19L11 12L2 5L2 19Z',
-    ],
-  },
   'sticky-note': {
     viewBox: '0 0 14 14',
     fillRule: 'evenodd',
@@ -76,6 +68,14 @@ const customIcons = {
     viewBox: '0 0 24 24',
     path: 'm4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z',
   },
+  'flow': {
+    viewBox: '0 0 24 24',
+    strokeWidth: '2.5',
+    strokePaths: [
+      'M13 19L22 12L13 5L13 19Z',
+      'M2 19L11 12L2 5L2 19Z',
+    ],
+  },
 }
 
 /* ─── Iconoir icons (stroke-based unless fill: true) ─── */
@@ -277,5 +277,3 @@ export default function Icon({
 
   return <span className={className} style={wrapperStyle}>{svgContent}</span>
 }
-
-export { Icon }

package/src/ThemeMenuButton.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
 import * as DropdownMenu from './lib/components/ui/dropdown-menu/index.js'
-import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import Icon from './Icon.jsx'
 import { themeState, setTheme, getTheme, THEMES, themeSyncState, getThemeSyncTargets, setThemeSyncTarget } from '@dfosco/storyboard-core'
 
 export default function ThemeMenuButton({ config = {}, data: _data, localOnly: _localOnly, tabindex = -1 }) {

package/src/comments/ui/authModal.js

@@ -1,7 +1,7 @@
 /**
  * Auth modal — delegates to the React PATDialog via a custom event.
  *
- * The Svelte AuthModal is no longer mounted directly. Instead, we dispatch
+ * The AuthModal is no longer mounted directly. Instead, we dispatch
  * a 'storyboard:open-auth-modal' event that the React ViewfinderNew listens for.
  */
 

package/src/configSchema.js

@@ -117,6 +117,7 @@
  * @typedef {object} StoryboardConfig
  * @property {string}   [customDomain]
  * @property {string}   [devDomain]
+ * @property {string}   [devDomainColor] — CSS color for the BranchBar in local dev (default: blue)
  * @property {{ owner: string, name: string }} [repository]
  * @property {{ enabled: boolean }} [modes]
  * @property {{ discussions: { category: string } }} [comments]
@@ -145,6 +146,7 @@ export const builtinPasteRules = [
 export const configDefaults = {
   customDomain: '',
   devDomain: '',
+  devDomainColor: '',
   repository: { owner: '', name: '' },
   modes: { enabled: false },
   comments: { discussions: { category: 'Comments' } },

package/src/configStore.js

@@ -104,7 +104,7 @@ export function clearAllOverrides() {
 // ---------------------------------------------------------------------------
 
 /**
- * Subscribe to config changes. Compatible with Svelte stores.
+ * Subscribe to config changes. Compatible with external stores.
  *
  * @param {Function} callback - Called with the full merged config
  * @returns {Function} Unsubscribe

package/src/devtools-consumer.js

@@ -2,8 +2,8 @@
  * Consumer-safe proxy for mountDevTools.
  *
  * Delegates to the compiled UI bundle (@dfosco/storyboard-core/ui-runtime)
- * so consumers don't need svelte installed. The real mountDevTools in
- * devtools.js imports svelte directly and is only usable in the source repo
+ * so consumers don't need internal dependencies. The real mountDevTools in
+ * devtools.js imports internal deps and is only usable in the source repo
  * or via the compiled UI bundle.
  */
 

package/src/index.js

@@ -2,7 +2,7 @@
  * storyboard-core — framework-agnostic data layer.
  *
  * This barrel exports all core utilities that have zero framework dependencies.
- * Any frontend (React, Vue, Svelte, Alpine, vanilla JS) can use these directly.
+ * Any frontend (React, Vue, Alpine, vanilla JS) can use these directly.
  */
 
 // Data index initialization
@@ -52,7 +52,7 @@ export { initTools, setToolAction, setToolState, getToolState, getToolsForMode,
 
 // Dev tools (vanilla JS, framework-agnostic)
 // mountDevTools delegates to the compiled UI bundle so consumers
-// don't need svelte installed — svelte is bundled into ui-runtime.
+
 export { mountDevTools } from './devtools-consumer.js'
 export { mountFlowDebug } from './sceneDebug.js'
 // Deprecated alias
@@ -118,7 +118,7 @@ export { trackRecent, getRecent, clearRecent } from './recentArtifacts.js'
 export { scoreMatch } from './fuzzySearch.js'
 
 // Icon component for UI rendering
-export { Icon, default as IconDefault } from './svelte-plugin-ui/components/Icon.jsx'
+export { default as Icon, default as IconDefault } from './Icon.jsx'
 
 // Shared UI components
 export { default as BranchSelect } from './BranchSelect.jsx'

package/src/mountStoryboardCore.js

@@ -2,7 +2,7 @@
  * mountStoryboardCore — single entry point for consumer apps.
  *
  * Initializes all storyboard systems (URL state, history, comments, devtools)
- * and mounts the compiled Svelte UI. Consumers call this once at app startup.
+ * Consumers call this once at app startup.
  *
  * Usage:
  *   import { mountStoryboardCore } from '@dfosco/storyboard-core'
@@ -74,7 +74,7 @@ function installChromeStatePersistence() {
 
 /**
  * Apply the saved theme to Primer CSS attributes immediately, before
- * React or Svelte mount. This prevents a flash of wrong-theme content.
+ * React mount. This prevents a flash of wrong-theme content.
  * Reads the same `sb-color-scheme` localStorage key used by themeStore.
  */
 function applyEarlyTheme() {
@@ -192,7 +192,7 @@ export async function mountStoryboardCore(config = {}, options = {}) {
   // Apply saved chrome-hidden state immediately — before React mount
   applyEarlyChromeState()
 
-  // Apply saved theme to DOM immediately — before Svelte/React mount
+  // Apply saved theme to DOM immediately — before React mount
   applyEarlyTheme()
 
   // Initialize framework-agnostic systems

package/src/sidepanel.css

@@ -87,7 +87,7 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
 }
 
 /* -----------------------------------------------------------------------
-   Panel element styles (migrated from Svelte scoped <style>)
+   Panel element styles (migrated from scoped styles)
    ----------------------------------------------------------------------- */
 
 .sb-sidepanel {

package/src/toolbarConfigStore.js

@@ -89,7 +89,7 @@ export function getToolbarConfig() {
 // ---------------------------------------------------------------------------
 
 /**
- * Subscribe to toolbar config changes. Compatible with Svelte stores.
+ * Subscribe to toolbar config changes. Compatible with external stores.
  *
  * @param {Function} callback
  * @returns {Function} Unsubscribe

package/src/ui/design-modes.ts

@@ -1,54 +1,7 @@
 /**
- * Design-modes UI mount entry point.
- *
- * Call mountDesignModesUI() once at app startup to render the ModeSwitch
- * and ToolbarShell components.  Framework-agnostic — works from any JS
- * context (React StoryboardProvider, vanilla JS, etc.).
- *
- * Usage:
- *   import { mountDesignModesUI } from '@dfosco/storyboard-core/ui/design-modes'
- *   mountDesignModesUI()  // mounts to document.body
- *   mountDesignModesUI(document.getElementById('my-container'))
+ * Design modes UI mount — stub (Svelte UI removed).
+ * These functions are no-ops. Mode switching is handled by React components.
  */
 
-import { mountSveltePlugin, type PluginHandle } from '../svelte-plugin-ui/mount.js'
-import ModeSwitch from '../svelte-plugin-ui/components/ModeSwitch.jsx'
-// TODO: Re-enable after migrating devtools features into tool registry
-// import ToolbarShell from '../svelte-plugin-ui/components/ToolbarShell.jsx'
-
-let handles: PluginHandle[] = []
-
-/**
- * Mount the design-modes UI (ModeSwitch + ToolbarShell).
- *
- * Idempotent — calling multiple times is a no-op.
- * Returns a teardown function that removes both components.
- *
- * @param container - DOM element to mount into (defaults to document.body)
- */
-export function mountDesignModesUI(
-  container?: HTMLElement,
-): () => void {
-  // Prevent double-mount
-  if (handles.length > 0) return unmountDesignModesUI
-
-  const target = container ?? document.body
-
-  handles.push(
-    mountSveltePlugin(target, ModeSwitch),
-    // TODO: Re-enable after migrating devtools features into tool registry
-    // mountSveltePlugin(target, ToolbarShell),
-  )
-
-  return unmountDesignModesUI
-}
-
-/**
- * Remove the design-modes UI from the DOM.
- */
-export function unmountDesignModesUI(): void {
-  for (const h of handles) {
-    h.destroy()
-  }
-  handles = []
-}
+export function mountDesignModesUI() {}
+export function unmountDesignModesUI() {}

package/src/ui/viewfinder.ts

@@ -1,58 +1,7 @@
 /**
- * Viewfinder UI mount entry point.
- *
- * Call mountViewfinder() to render the prototype index dashboard.
- * Framework-agnostic — works from any JS context (React wrapper,
- * vanilla JS, etc.).
- *
- * Usage:
- *   import { mountViewfinder } from '@dfosco/storyboard-core/ui/viewfinder'
- *   const handle = mountViewfinder(document.getElementById('root'), {
- *     title: 'My Storyboard',
- *     knownRoutes: ['Dashboard', 'Settings'],
- *   })
- *   // later: handle.destroy()
+ * Viewfinder mount — stub (Svelte UI removed).
+ * These functions are no-ops. The viewfinder is rendered by React.
  */
 
-import { mountSveltePlugin, type PluginHandle } from '../svelte-plugin-ui/mount.js'
-import Viewfinder from '../svelte-plugin-ui/components/Viewfinder.jsx'
-
-export interface ViewfinderProps {
-  title?: string
-  subtitle?: string
-  basePath?: string
-  knownRoutes?: string[]
-  showThumbnails?: boolean
-  hideDefaultFlow?: boolean
-}
-
-let handle: PluginHandle | null = null
-
-/**
- * Mount the Viewfinder dashboard into a DOM container.
- *
- * Idempotent — calling multiple times is a no-op.
- * Returns a handle with destroy() method.
- *
- * @param container - DOM element to mount into
- * @param props - Viewfinder configuration
- */
-export function mountViewfinder(
-  container: HTMLElement,
-  props?: ViewfinderProps,
-): PluginHandle {
-  if (handle) return handle
-
-  handle = mountSveltePlugin(container, Viewfinder as any, props as any)
-  return handle
-}
-
-/**
- * Remove the Viewfinder from the DOM.
- */
-export function unmountViewfinder(): void {
-  if (handle) {
-    handle.destroy()
-    handle = null
-  }
-}
+export function mountViewfinder() {}
+export function unmountViewfinder() {}

package/src/ui-entry.js

@@ -1,8 +1,8 @@
 /**
  * UI entry point — compiled into dist/storyboard-ui.js via Vite library build.
  *
- * This file is the entry for the pre-compiled Svelte UI bundle.
- * It re-exports all UI mount functions that depend on Svelte.
+ * This file is the entry for the pre-compiled UI bundle.
+ * It re-exports UI mount functions.
  * Consumers never import this directly — they use mountStoryboardCore()
  * or the package self-reference '@dfosco/storyboard-core/ui-runtime'.
  */
@@ -20,11 +20,11 @@ import './modes.css'
 // CoreUIBar (floating toolbar)
 export { mountDevTools, unmountDevTools } from './devtools.js'
 
-// Comments UI (Svelte-based comment pins, windows, drawers)
+// Comments UI
 export { mountComments } from './comments/ui/mount.js'
 
-// Viewfinder dashboard (Svelte component)
+// Viewfinder dashboard
 export { mountViewfinder, unmountViewfinder } from './ui/viewfinder.ts'
 
-// Design modes (Svelte component)
+// Design modes
 export { mountDesignModesUI as mountDesignModes } from './ui/design-modes.ts'

package/src/vite/server-plugin.js

@@ -567,6 +567,15 @@ export default function storyboardServer() {
           injectTo: 'head',
         })
 
+        // Inject per-domain branch bar color (configurable via devDomainColor)
+        if (config.devDomainColor) {
+          tags.push({
+            tag: 'script',
+            children: `window.__SB_DEV_DOMAIN_COLOR__=${JSON.stringify(config.devDomainColor)}`,
+            injectTo: 'head',
+          })
+        }
+
         // Browser error bridge — forwards console.error/warn and uncaught
         // exceptions to the dev server via HMR for structured o11y logging
         tags.push({

package/src/workshop/features/createFlow/index.js

@@ -6,7 +6,7 @@
  *   - label:         Display name for the menu item
  *   - icon:          Emoji or HTML for the menu icon
  *   - overlayId:     Unique ID for the overlay
- *   - overlay:       Svelte component rendered in the overlay
+ *   - overlay:       Component rendered in the overlay
  *   - serverSetup:   Called by the server plugin to register API routes
  */
 

package/src/workshop/features/createPrototype/index.js

@@ -6,7 +6,7 @@
  *   - label:         Display name for the menu item
  *   - icon:          Emoji or HTML for the menu icon
  *   - overlayId:     Unique ID for the overlay
- *   - overlay:       Svelte component rendered in the overlay
+ *   - overlay:       Component rendered in the overlay
  *   - serverSetup:   Called by the server plugin to register API routes
  */
 

package/src/workshop/features/registry-server.js

@@ -1,7 +1,7 @@
 /**
  * Workshop feature server registry.
  *
- * Server-safe registry that only imports server handlers (no Svelte/UI code).
+ * Server-safe registry that only imports server handlers (no UI code).
  * Used by the Vite server plugin to wire API routes.
  *
  * To add a new feature:

package/src/workshop/ui/mount.ts

@@ -1,68 +1,6 @@
 /**
- * Workshop Dev Panel — Svelte-based mount entry point.
- *
- * Replaces the Alpine.js-based mount.js. Uses mountSveltePlugin() to render
- * the WorkshopPanel component with enabled features from the registry.
- *
- * Injected into the page by the storyboard server plugin via transformIndexHtml.
+ * Workshop panel mount — stub (Svelte UI removed).
  */
 
-import { mountSveltePlugin, type PluginHandle } from '../../svelte-plugin-ui/mount.js'
-import WorkshopPanel from './WorkshopPanel.jsx'
-import { features as allFeatures } from '../features/registry.js'
-import '../../../dist/tailwind.css'
-
-let handle: PluginHandle | null = null
-
-/**
- * Resolve which features are enabled from a data attribute on the script tag,
- * injected by the server plugin. Falls back to all features enabled.
- */
-function getEnabledFeatures(): Record<string, boolean> {
-  const script = document.querySelector('script[data-workshop-features]')
-  if (script) {
-    try {
-      return JSON.parse((script as HTMLElement).dataset.workshopFeatures!)
-    } catch { /* ignore */ }
-  }
-  return Object.fromEntries(Object.keys(allFeatures).map((k) => [k, true]))
-}
-
-/**
- * Mount the Workshop panel into the page.
- *
- * Idempotent — calling multiple times is a no-op.
- */
-export function mountWorkshop(): void {
-  if (handle) return
-
-  const enabledConfig = getEnabledFeatures()
-
-  const features = Object.entries(allFeatures)
-    .filter(([name]) => enabledConfig[name] !== false)
-    .filter(([, f]) => f.label && f.overlayId && f.overlay)
-    .map(([, f]) => ({
-      name: f.name,
-      label: f.label,
-      icon: f.icon,
-      overlayId: f.overlayId,
-      overlay: f.overlay,
-    }))
-
-  handle = mountSveltePlugin(document.body, WorkshopPanel as any, { features } as any)
-}
-
-/**
- * Remove the Workshop panel from the DOM.
- */
-export function unmountWorkshop(): void {
-  if (handle) {
-    handle.destroy()
-    handle = null
-  }
-}
-
-// Auto-mount removed — CoreUIBar now owns the workshop UI.
-// This module is still loaded by the server plugin for the
-// data-workshop-features attribute, but does not self-mount.
-// mountWorkshop()
+export function mountWorkshopPanel() {}
+export function unmountWorkshopPanel() {}

package/scaffold/svelte.config.js

@@ -1 +0,0 @@
-export default {}

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

@@ -1,75 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { userEvent } from '@testing-library/user-event'
-import React from 'react'
-import {
-  registerMode,
-  activateMode,
-  initModesConfig,
-} from '@dfosco/storyboard-core'
-import { _resetModes } from '@test/modes'
-import ModeSwitch from '../components/ModeSwitch.jsx'
-
-afterEach(() => {
-  _resetModes()
-  const url = new URL(window.location.href)
-  url.searchParams.delete('mode')
-  window.history.replaceState(null, '', url.toString())
-})
-
-describe('ModeSwitch', () => {
-  it('renders nothing when fewer than 2 modes registered', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    const { container } = render(React.createElement(ModeSwitch))
-    expect(container.querySelector('[role="tablist"]')).toBeNull()
-  })
-
-  it('renders a tab for each registered mode', () => {
-    initModesConfig({ enabled: true })
-    registerMode('prototype', { label: 'Navigate' })
-    registerMode('inspect', { label: 'Develop' })
-    registerMode('present', { label: 'Collaborate' })
-
-    render(React.createElement(ModeSwitch))
-
-    expect(screen.getByRole('tab', { name: 'Navigate' })).toBeInTheDocument()
-    expect(screen.getByRole('tab', { name: 'Develop' })).toBeInTheDocument()
-    expect(screen.getByRole('tab', { name: 'Collaborate' })).toBeInTheDocument()
-  })
-
-  it('marks the active mode tab as selected', () => {
-    initModesConfig({ enabled: true })
-    registerMode('prototype', { label: 'Navigate' })
-    registerMode('inspect', { label: 'Develop' })
-
-    render(React.createElement(ModeSwitch))
-
-    const navigateTab = screen.getByRole('tab', { name: 'Navigate' })
-    const developTab = screen.getByRole('tab', { name: 'Develop' })
-
-    expect(navigateTab).toHaveAttribute('aria-selected', 'true')
-    expect(developTab).toHaveAttribute('aria-selected', 'false')
-  })
-
-  it('switches mode on button click', async () => {
-    initModesConfig({ enabled: true })
-    registerMode('prototype', { label: 'Navigate' })
-    registerMode('inspect', { label: 'Develop' })
-
-    render(React.createElement(ModeSwitch))
-    const user = userEvent.setup()
-    await user.click(screen.getByRole('tab', { name: 'Develop' }))
-
-    expect(screen.getByRole('tab', { name: 'Develop' })).toHaveAttribute('aria-selected', 'true')
-    expect(screen.getByRole('tab', { name: 'Navigate' })).toHaveAttribute('aria-selected', 'false')
-  })
-
-  it('renders nothing when modes are locked', () => {
-    registerMode('prototype', { label: 'Navigate' })
-    registerMode('inspect', { label: 'Develop' })
-    initModesConfig({ enabled: true, locked: 'prototype' })
-
-    const { container } = render(React.createElement(ModeSwitch))
-    expect(container.querySelector('[role="tablist"]')).toBeNull()
-  })
-})