@dfosco/storyboard-core 4.2.0-beta.2 → 4.2.0-beta.21

package/src/sidepanel.css

@@ -85,3 +85,217 @@ html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
   bottom: calc(var(--sb--sidepanel-height) + 24px);
   transition: bottom 0.25s ease;
 }
+
+/* -----------------------------------------------------------------------
+   Panel element styles (migrated from Svelte scoped <style>)
+   ----------------------------------------------------------------------- */
+
+.sb-sidepanel {
+  position: fixed;
+  top: var(--sb-branch-bar-height, 0px);
+  right: 0;
+  bottom: 0;
+  width: var(--sb--sidepanel-width, 420px);
+  z-index: 9998;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bgColor-default, var(--sb--color-background, #ffffff));
+  border-left: 1px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
+  font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  color: var(--fgColor-default, var(--sb--color-foreground, #1f2328));
+  animation: sb-sidepanel-slide-in 0.25s ease;
+}
+
+.sb-sidepanel--bottom {
+  top: auto;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100% !important;
+  height: var(--sb--sidepanel-height, 300px);
+  border-left: none;
+  border-top: 1px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
+  animation: sb-sidepanel-slide-up 0.25s ease;
+}
+
+.sb-sidepanel-dragging {
+  user-select: none;
+}
+
+@keyframes sb-sidepanel-slide-in {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes sb-sidepanel-slide-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+/* Mode-aware top accent bar */
+.sb-sidepanel::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+}
+
+/* Drag handle — side mode (left edge, vertical) */
+.sb-sidepanel-drag-handle {
+  position: absolute;
+  top: 0;
+  left: -4px;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Drag handle — bottom mode (top edge, horizontal) */
+.sb-sidepanel--bottom .sb-sidepanel-drag-handle {
+  top: -4px;
+  left: 0;
+  right: 0;
+  bottom: auto;
+  width: 100%;
+  height: 8px;
+  cursor: row-resize;
+}
+
+.sb-sidepanel-grabber {
+  opacity: 0;
+  color: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.15s ease;
+  pointer-events: none;
+}
+
+.sb-sidepanel--bottom .sb-sidepanel-grabber {
+  transform: rotate(90deg);
+}
+
+.sb-sidepanel-drag-handle:hover .sb-sidepanel-grabber,
+.sb-sidepanel-dragging .sb-sidepanel-grabber {
+  opacity: 1;
+}
+
+/* Header */
+.sb-sidepanel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 8px 0;
+  flex-shrink: 0;
+}
+
+.sb-sidepanel-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
+  padding-left: 4px;
+}
+
+.sb-sidepanel-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.sb-sidepanel-action-btn {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.sb-sidepanel-action-btn:hover {
+  background: var(--bgColor-neutral-muted, rgba(110, 118, 129, 0.1));
+  color: var(--fgColor-default, var(--sb--color-foreground, #1f2328));
+}
+
+/* Body */
+.sb-sidepanel-body {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.sb-sidepanel-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+}
+
+.sb-sidepanel-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
+  border-top-color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
+  border-radius: 50%;
+  animation: sb-spin 0.6s linear infinite;
+}
+
+@keyframes sb-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Float the side panel inside the mode collar (present/plan/inspect) */
+html.storyboard-mode-present .sb-sidepanel:not(.sb-sidepanel--bottom),
+html.storyboard-mode-plan .sb-sidepanel:not(.sb-sidepanel--bottom),
+html.storyboard-mode-inspect .sb-sidepanel:not(.sb-sidepanel--bottom) {
+  top: 12px;
+  right: 12px;
+  bottom: 12px;
+  border-radius: var(--borderRadius-default);
+  border-left: none;
+}
+
+/* Float the bottom panel inside the mode collar */
+html.storyboard-mode-present .sb-sidepanel--bottom,
+html.storyboard-mode-plan .sb-sidepanel--bottom,
+html.storyboard-mode-inspect .sb-sidepanel--bottom {
+  left: 12px;
+  right: 12px;
+  bottom: 12px;
+  width: auto !important;
+  border-radius: var(--borderRadius-default);
+  border-top: none;
+}
+
+/* Remove accent bar when collar provides mode context */
+html.storyboard-mode-present .sb-sidepanel::before,
+html.storyboard-mode-plan .sb-sidepanel::before,
+html.storyboard-mode-inspect .sb-sidepanel::before {
+  display: none;
+}
+
+/* Mode-specific box-shadow matching #root treatment */
+html.storyboard-mode-present .sb-sidepanel {
+  box-shadow: 0 0 7px 2px rgb(42 157 143 / 60%);
+}
+
+html.storyboard-mode-plan .sb-sidepanel {
+  box-shadow: 0 0 7px 2px rgb(74 127 173 / 60%);
+}
+
+html.storyboard-mode-inspect .sb-sidepanel {
+  box-shadow: 0 0 7px 2px rgb(118 85 164 / 60%);
+}
+

package/src/styles/tailwind.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-@source "../**/*.{svelte,js,ts}";
+@source "../**/*.{jsx,js,ts}";
 
 @font-face {
   font-family: "Hubot Sans";

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

@@ -1,13 +1,14 @@
 import { describe, it, expect, afterEach } from 'vitest'
-import { render, screen } from '@testing-library/svelte'
+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.svelte'
+import ModeSwitch from '../components/ModeSwitch.jsx'
 
 afterEach(() => {
   _resetModes()
@@ -19,7 +20,7 @@ afterEach(() => {
 describe('ModeSwitch', () => {
   it('renders nothing when fewer than 2 modes registered', () => {
     registerMode('prototype', { label: 'Navigate' })
-    const { container } = render(ModeSwitch)
+    const { container } = render(React.createElement(ModeSwitch))
     expect(container.querySelector('[role="tablist"]')).toBeNull()
   })
 
@@ -29,7 +30,7 @@ describe('ModeSwitch', () => {
     registerMode('inspect', { label: 'Develop' })
     registerMode('present', { label: 'Collaborate' })
 
-    render(ModeSwitch)
+    render(React.createElement(ModeSwitch))
 
     expect(screen.getByRole('tab', { name: 'Navigate' })).toBeInTheDocument()
     expect(screen.getByRole('tab', { name: 'Develop' })).toBeInTheDocument()
@@ -41,7 +42,7 @@ describe('ModeSwitch', () => {
     registerMode('prototype', { label: 'Navigate' })
     registerMode('inspect', { label: 'Develop' })
 
-    render(ModeSwitch)
+    render(React.createElement(ModeSwitch))
 
     const navigateTab = screen.getByRole('tab', { name: 'Navigate' })
     const developTab = screen.getByRole('tab', { name: 'Develop' })
@@ -55,8 +56,7 @@ describe('ModeSwitch', () => {
     registerMode('prototype', { label: 'Navigate' })
     registerMode('inspect', { label: 'Develop' })
 
-    render(ModeSwitch)
-
+    render(React.createElement(ModeSwitch))
     const user = userEvent.setup()
     await user.click(screen.getByRole('tab', { name: 'Develop' }))
 
@@ -69,7 +69,7 @@ describe('ModeSwitch', () => {
     registerMode('inspect', { label: 'Develop' })
     initModesConfig({ enabled: true, locked: 'prototype' })
 
-    const { container } = render(ModeSwitch)
+    const { container } = render(React.createElement(ModeSwitch))
     expect(container.querySelector('[role="tablist"]')).toBeNull()
   })
 })

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

@@ -1,5 +1,6 @@
 import { describe, it, expect, afterEach } from 'vitest'
-import { render, screen } from '@testing-library/svelte'
+import { render, screen } from '@testing-library/react'
+import React from 'react'
 import {
   registerMode,
   initTools,
@@ -7,7 +8,7 @@ import {
   setToolState,
 } from '@dfosco/storyboard-core'
 import { _resetModes } from '@test/modes'
-import ToolbarShell from '../components/ToolbarShell.svelte'
+import ToolbarShell from '../components/ToolbarShell.jsx'
 
 afterEach(() => {
   _resetModes()
@@ -19,7 +20,7 @@ afterEach(() => {
 describe('ToolbarShell', () => {
   it('renders nothing when no tools are declared', () => {
     registerMode('prototype', { label: 'Navigate' })
-    const { container } = render(ToolbarShell)
+    const { container } = render(React.createElement(ToolbarShell))
     expect(container.querySelector('[role="toolbar"]')).toBeNull()
   })
 
@@ -34,7 +35,7 @@ describe('ToolbarShell', () => {
     setToolAction('zoom', () => {})
     setToolAction('pan', () => {})
 
-    render(ToolbarShell)
+    render(React.createElement(ToolbarShell))
 
     expect(screen.getByTitle('Zoom')).toBeInTheDocument()
     expect(screen.getByTitle('Pan')).toBeInTheDocument()
@@ -47,7 +48,7 @@ describe('ToolbarShell', () => {
     })
     setToolAction('debug', () => {})
 
-    render(ToolbarShell)
+    render(React.createElement(ToolbarShell))
 
     expect(screen.getByTitle('Debug')).toBeInTheDocument()
     expect(screen.getByText('Dev')).toBeInTheDocument()
@@ -64,7 +65,7 @@ describe('ToolbarShell', () => {
     setToolAction('zoom', () => {})
     setToolAction('debug', () => {})
 
-    render(ToolbarShell)
+    render(React.createElement(ToolbarShell))
 
     const toolbars = screen.getAllByRole('toolbar')
     expect(toolbars).toHaveLength(2)
@@ -78,7 +79,7 @@ describe('ToolbarShell', () => {
       '*': [{ id: 'no-action', label: 'No Action', group: 'tools' }],
     })
 
-    render(ToolbarShell)
+    render(React.createElement(ToolbarShell))
 
     const btn = screen.getByTitle('No Action')
     expect(btn).toBeDisabled()
@@ -92,7 +93,7 @@ describe('ToolbarShell', () => {
     setToolAction('disabled-tool', () => {})
     setToolState('disabled-tool', { enabled: false })
 
-    render(ToolbarShell)
+    render(React.createElement(ToolbarShell))
 
     const btn = screen.getByTitle('Disabled')
     expect(btn).toBeDisabled()
@@ -105,7 +106,7 @@ describe('ToolbarShell', () => {
     })
     setToolState('hidden-tool', { hidden: true })
 
-    const { container } = render(ToolbarShell)
+    const { container } = render(React.createElement(ToolbarShell))
 
     expect(container.querySelector('[role="toolbar"]')).toBeNull()
   })
@@ -118,7 +119,7 @@ describe('ToolbarShell', () => {
     setToolAction('badged', () => {})
     setToolState('badged', { badge: 5 })
 
-    render(ToolbarShell)
+    render(React.createElement(ToolbarShell))
 
     expect(screen.getByText('5')).toBeInTheDocument()
   })

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

@@ -0,0 +1,11 @@
+.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;
+}