@dfosco/storyboard 0.5.0-alpha.0

package/src/internals/canvas/widgets/ExpandedPane.test.jsx

@@ -0,0 +1,240 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import ExpandedPane from './ExpandedPane.jsx'
+
+// Mock createPortal to render inline for testing
+vi.mock('react-dom', async () => {
+  const actual = await vi.importActual('react-dom')
+  return {
+    ...actual,
+    createPortal: (children) => children,
+  }
+})
+
+// Polyfill ResizeObserver for jsdom
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class {
+    constructor(cb) { this._cb = cb }
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+}
+
+function makeReactPane(id, label = `Pane ${id}`) {
+  return {
+    id,
+    label,
+    kind: 'react',
+    render: () => <div data-testid={`content-${id}`}>{label} content</div>,
+  }
+}
+
+function makeExternalPane(id, label = `External ${id}`) {
+  const detach = vi.fn()
+  const attach = vi.fn(() => detach)
+  const onResize = vi.fn()
+  return {
+    pane: { id, label, kind: 'external', attach, onResize },
+    attach,
+    detach,
+    onResize,
+  }
+}
+
+describe('ExpandedPane', () => {
+  describe('single-pane modal variant', () => {
+    it('renders modal container with title and content', () => {
+      const pane = makeReactPane('md-1', 'Markdown · Notes')
+      render(<ExpandedPane initialPanes={[pane]} variant="modal" onClose={vi.fn()} />)
+      expect(screen.getByText('Markdown · Notes')).toBeTruthy()
+      expect(screen.getByText('Markdown · Notes content')).toBeTruthy()
+      expect(screen.getByLabelText('Close expanded view')).toBeTruthy()
+    })
+
+    it('calls onClose when close button is clicked', () => {
+      const onClose = vi.fn()
+      render(<ExpandedPane initialPanes={[makeReactPane('md-1')]} variant="modal" onClose={onClose} />)
+      fireEvent.click(screen.getByLabelText('Close expanded view'))
+      expect(onClose).toHaveBeenCalledOnce()
+    })
+
+    it('calls onClose on Escape key', () => {
+      const onClose = vi.fn()
+      render(<ExpandedPane initialPanes={[makeReactPane('md-1')]} variant="modal" onClose={onClose} />)
+      fireEvent.keyDown(document, { key: 'Escape' })
+      expect(onClose).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('single-pane full variant', () => {
+    it('renders full-screen container with top bar', () => {
+      const pane = makeReactPane('term-1', 'Terminal · wren')
+      render(<ExpandedPane initialPanes={[pane]} variant="full" onClose={vi.fn()} />)
+      expect(screen.getByText('Terminal · wren')).toBeTruthy()
+      expect(screen.getByText('Terminal · wren content')).toBeTruthy()
+      expect(screen.getByLabelText('Close expanded view')).toBeTruthy()
+    })
+  })
+
+  describe('multi-pane (split) layout', () => {
+    it('renders both panes with grid layout', () => {
+      const paneA = makeReactPane('term-1', 'Terminal · wren')
+      const paneB = makeReactPane('proto-1', 'Prototype · /Signup')
+      const { container } = render(
+        <ExpandedPane initialPanes={[paneA, paneB]} variant="full" onClose={vi.fn()} />
+      )
+      expect(screen.getByText('Terminal · wren content')).toBeTruthy()
+      expect(screen.getByText('Prototype · /Signup content')).toBeTruthy()
+      // Check grid exists
+      const grid = container.querySelector('[class*="grid"]')
+      expect(grid).toBeTruthy()
+    })
+
+    it('renders 3 panes', () => {
+      const panes = [
+        makeReactPane('a', 'Pane A'),
+        makeReactPane('b', 'Pane B'),
+        makeReactPane('c', 'Pane C'),
+      ]
+      render(<ExpandedPane initialPanes={panes} variant="full" onClose={vi.fn()} />)
+      expect(screen.getByText('Pane A content')).toBeTruthy()
+      expect(screen.getByText('Pane B content')).toBeTruthy()
+      expect(screen.getByText('Pane C content')).toBeTruthy()
+    })
+
+    it('renders both pane labels in their respective panes', () => {
+      const paneA = makeReactPane('term-1', 'Terminal · wren')
+      const paneB = makeReactPane('proto-1', 'Prototype · /Signup')
+      render(
+        <ExpandedPane initialPanes={[paneA, paneB]} variant="full" onClose={vi.fn()} />
+      )
+      // Each pane has its own title bar with left-aligned label
+      expect(screen.getByText('Terminal · wren')).toBeTruthy()
+      expect(screen.getByText('Prototype · /Signup')).toBeTruthy()
+    })
+
+    it('renders divider between panes', () => {
+      const panes = [makeReactPane('a'), makeReactPane('b')]
+      const { container } = render(
+        <ExpandedPane initialPanes={panes} variant="full" onClose={vi.fn()} />
+      )
+      const dividers = container.querySelectorAll('[role="separator"]')
+      expect(dividers.length).toBe(1)
+    })
+
+    it('renders N-1 dividers for N panes', () => {
+      const panes = [makeReactPane('a'), makeReactPane('b'), makeReactPane('c')]
+      const { container } = render(
+        <ExpandedPane initialPanes={panes} variant="full" onClose={vi.fn()} />
+      )
+      const dividers = container.querySelectorAll('[role="separator"]')
+      expect(dividers.length).toBe(2)
+    })
+  })
+
+  describe('external pane attach/detach', () => {
+    it('calls attach with container element on mount', async () => {
+      const { pane, attach } = makeExternalPane('term-1')
+      render(<ExpandedPane initialPanes={[pane]} variant="full" onClose={vi.fn()} />)
+      // useLayoutEffect runs synchronously in test
+      expect(attach).toHaveBeenCalledOnce()
+      expect(attach.mock.calls[0][0]).toBeInstanceOf(HTMLElement)
+    })
+
+    it('calls detach on unmount', () => {
+      const { pane, detach } = makeExternalPane('term-1')
+      const { unmount } = render(
+        <ExpandedPane initialPanes={[pane]} variant="full" onClose={vi.fn()} />
+      )
+      unmount()
+      expect(detach).toHaveBeenCalled()
+    })
+  })
+
+  describe('returns null for empty panes', () => {
+    it('returns null when no panes provided', () => {
+      const { container } = render(
+        <ExpandedPane initialPanes={[]} variant="modal" onClose={vi.fn()} />
+      )
+      // Modal variant with no panes returns null
+      expect(container.innerHTML).toBe('')
+    })
+  })
+
+  describe('initialLayout (2D layout)', () => {
+    it('renders 2 columns from initialLayout', () => {
+      const layout = [
+        [makeReactPane('a', 'Left')],
+        [makeReactPane('b', 'Right')],
+      ]
+      const { container } = render(
+        <ExpandedPane initialLayout={layout} variant="full" onClose={vi.fn()} />
+      )
+      expect(screen.getByText('Left content')).toBeTruthy()
+      expect(screen.getByText('Right content')).toBeTruthy()
+      const grid = container.querySelector('[class*="grid"]')
+      expect(grid).toBeTruthy()
+    })
+
+    it('renders 3 panes: 1 column + 2-row column', () => {
+      const layout = [
+        [makeReactPane('a', 'Left')],
+        [makeReactPane('b', 'Top Right'), makeReactPane('c', 'Bottom Right')],
+      ]
+      render(
+        <ExpandedPane initialLayout={layout} variant="full" onClose={vi.fn()} />
+      )
+      expect(screen.getByText('Left content')).toBeTruthy()
+      expect(screen.getByText('Top Right content')).toBeTruthy()
+      expect(screen.getByText('Bottom Right content')).toBeTruthy()
+    })
+
+    it('renders 4 panes in 2×2 grid', () => {
+      const layout = [
+        [makeReactPane('a', 'TL'), makeReactPane('b', 'BL')],
+        [makeReactPane('c', 'TR'), makeReactPane('d', 'BR')],
+      ]
+      render(
+        <ExpandedPane initialLayout={layout} variant="full" onClose={vi.fn()} />
+      )
+      expect(screen.getByText('TL content')).toBeTruthy()
+      expect(screen.getByText('BL content')).toBeTruthy()
+      expect(screen.getByText('TR content')).toBeTruthy()
+      expect(screen.getByText('BR content')).toBeTruthy()
+    })
+
+    it('renders column divider between columns', () => {
+      const layout = [
+        [makeReactPane('a')],
+        [makeReactPane('b')],
+      ]
+      const { container } = render(
+        <ExpandedPane initialLayout={layout} variant="full" onClose={vi.fn()} />
+      )
+      const vSeparators = container.querySelectorAll('[role="separator"][aria-orientation="vertical"]')
+      expect(vSeparators.length).toBe(1)
+    })
+
+    it('renders row dividers within 2-row columns', () => {
+      const layout = [
+        [makeReactPane('a'), makeReactPane('b')],
+        [makeReactPane('c'), makeReactPane('d')],
+      ]
+      const { container } = render(
+        <ExpandedPane initialLayout={layout} variant="full" onClose={vi.fn()} />
+      )
+      const hSeparators = container.querySelectorAll('[role="separator"][aria-orientation="horizontal"]')
+      expect(hSeparators.length).toBe(2) // one per 2-row column
+    })
+
+    it('renders single-pane modal from 1-element layout', () => {
+      const layout = [[makeReactPane('a', 'Only Pane')]]
+      render(
+        <ExpandedPane initialLayout={layout} variant="modal" onClose={vi.fn()} />
+      )
+      expect(screen.getByText('Only Pane')).toBeTruthy()
+      expect(screen.getByLabelText('Close expanded view')).toBeTruthy()
+    })
+  })
+})

package/src/internals/canvas/widgets/ExpandedPaneTopBar.jsx

@@ -0,0 +1,111 @@
+/**
+ * ExpandedPaneTopBar — dark per-pane title bar for expanded/split-screen views.
+ *
+ * Each pane gets its own bar with a left-aligned label.
+ * The rightmost (or only) pane shows the close button.
+ *
+ * Actions render as toolbar-style buttons (same as WidgetChrome) forced to dark mode.
+ * Tooltips show labels on hover (Primer <Tooltip>, not title attr).
+ *
+ * Supports two action sources:
+ *   1. `actions` array/function — legacy inline actions ({ icon, label, ariaLabel, onClick })
+ *   2. `features` array — config-driven features resolved via ICON_REGISTRY
+ *      Combined with `getState` for toggle resolution and `onAction` for dispatch.
+ */
+import { ScreenNormalIcon } from '@primer/octicons-react'
+import { Tooltip } from '@primer/react'
+import { ICON_REGISTRY } from './widgetIcons.jsx'
+import { getWidgetMeta } from './widgetConfig.js'
+import Icon from '../../Icon.jsx'
+import styles from './ExpandedPaneTopBar.module.css'
+
+/** Named icons use only lowercase alphanumeric, hyphens, and slashes. */
+function isNamedIcon(str) {
+  return str && /^[a-z0-9/-]+$/i.test(str)
+}
+
+/**
+ * Resolve a feature's icon and label, applying toggle state if configured.
+ * @param {Object} feature — config feature object
+ * @param {((key: string) => any) | undefined} getState — state accessor
+ * @returns {{ Icon: Function|null, label: string }}
+ */
+function resolveFeatureDisplay(feature, getState) {
+  let Icon = ICON_REGISTRY[feature.icon]
+  let label = feature.label || feature.action
+
+  if (feature.toggle && getState) {
+    const isActive = getState(feature.toggle.stateKey)
+    if (isActive) {
+      if (feature.toggle.activeIcon) Icon = ICON_REGISTRY[feature.toggle.activeIcon] || Icon
+      if (feature.toggle.activeLabel) label = feature.toggle.activeLabel
+    }
+  }
+
+  return { Icon, label }
+}
+
+/**
+ * @param {Object} props
+ * @param {string} props.label — pane display label
+ * @param {string} [props.widgetType] — widget type string for icon resolution
+ * @param {boolean} [props.showClose] — show close button (rightmost pane)
+ * @param {() => void} [props.onClose] — close entire ExpandedPane
+ * @param {Array<{ label: string, onClick: () => void }>} [props.actions] — legacy action buttons
+ * @param {Array} [props.features] — config-driven features for this surface
+ * @param {(key: string) => any} [props.getState] — state accessor for toggle resolution
+ * @param {(actionId: string) => void} [props.onAction] — action dispatch callback
+ */
+export default function ExpandedPaneTopBar({ label, widgetType, showClose, onClose, actions, features, getState, onAction }) {
+  const resolvedActions = typeof actions === 'function' ? actions() : actions
+  const meta = widgetType ? getWidgetMeta(widgetType) : null
+  const iconName = meta?.icon || null
+
+  return (
+    <div className={styles.bar}>
+      {iconName && (
+        <span className={styles.widgetIcon} aria-hidden="true">
+          {isNamedIcon(iconName) ? <Icon name={iconName} size={12} /> : iconName}
+        </span>
+      )}
+      <span className={styles.label}>{label}</span>
+
+      {/* Config-driven feature actions */}
+      {features?.map((feature) => {
+        const { Icon, label: featureLabel } = resolveFeatureDisplay(feature, getState)
+        return (
+          <Tooltip key={feature.id} text={featureLabel} direction="s">
+            <button
+              className={styles.actionBtn}
+              onClick={() => onAction?.(feature.action)}
+              aria-label={featureLabel}
+            >
+              {Icon ? <Icon /> : featureLabel}
+            </button>
+          </Tooltip>
+        )
+      })}
+
+      {/* Legacy inline actions (backward compat) */}
+      {resolvedActions?.map((action, i) => (
+        <Tooltip key={i} text={action.label || action.ariaLabel || 'Action'} direction="s">
+          <button
+            className={styles.actionBtn}
+            onClick={action.onClick}
+            aria-label={action.ariaLabel || action.label}
+          >
+            {action.icon || action.label}
+          </button>
+        </Tooltip>
+      ))}
+
+      {showClose && (
+        <Tooltip text="Close fullscreen" direction="s">
+          <button className={styles.actionBtn} onClick={onClose} aria-label="Close expanded view" autoFocus>
+            <ScreenNormalIcon size={12} />
+          </button>
+        </Tooltip>
+      )}
+    </div>
+  )
+}

package/src/internals/canvas/widgets/ExpandedPaneTopBar.module.css

@@ -0,0 +1,59 @@
+/* ── ExpandedPaneTopBar — dark per-pane title bar ─────────────────── */
+
+.bar {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 12px;
+  gap: 6px;
+  background: #21262d;
+  border-bottom: 1px solid #30363d;
+  flex-shrink: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  user-select: none;
+}
+
+.widgetIcon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8b949e;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  color: #8b949e;
+  margin-right: auto;
+}
+
+/* Action buttons — same shape/size as widget toolbar, forced dark mode */
+.actionBtn {
+  all: unset;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  border: 1.6px solid #373e47;
+  background: #161b22;
+  color: #8b949e;
+  font-size: 12px;
+  transition: background 100ms, color 100ms, border-color 100ms;
+}
+
+.actionBtn:hover {
+  background: #272c33;
+  color: #e6edf3;
+  border-color: #484f58;
+}

package/src/internals/canvas/widgets/ExpandedPaneTopBar.test.jsx

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import ExpandedPaneTopBar from './ExpandedPaneTopBar.jsx'
+
+describe('ExpandedPaneTopBar', () => {
+  it('renders pane label left-aligned', () => {
+    render(
+      <ExpandedPaneTopBar label="Terminal · pearl-wren" onClose={vi.fn()} />
+    )
+    expect(screen.getByText('Terminal · pearl-wren')).toBeTruthy()
+  })
+
+  it('renders close button when showClose is true', () => {
+    render(
+      <ExpandedPaneTopBar label="Terminal · pearl-wren" showClose onClose={vi.fn()} />
+    )
+    expect(screen.getByLabelText('Close expanded view')).toBeTruthy()
+  })
+
+  it('does not render close button when showClose is false', () => {
+    render(
+      <ExpandedPaneTopBar label="Terminal · pearl-wren" onClose={vi.fn()} />
+    )
+    expect(screen.queryByLabelText('Close expanded view')).toBeNull()
+  })
+
+  it('calls onClose when close button is clicked', () => {
+    const onClose = vi.fn()
+    render(
+      <ExpandedPaneTopBar label="Terminal · pearl-wren" showClose onClose={onClose} />
+    )
+    fireEvent.click(screen.getByLabelText('Close expanded view'))
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+
+  it('has dark background styling', () => {
+    const { container } = render(
+      <ExpandedPaneTopBar label="Agent · wren" showClose onClose={vi.fn()} />
+    )
+    const bar = container.firstChild
+    expect(bar).toBeTruthy()
+    // Bar should have the dark background class
+    expect(bar.className).toMatch(/bar/)
+  })
+})