@dfosco/storyboard-react 4.2.0-beta.17 → 4.2.0-beta.18

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

@@ -0,0 +1,240 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, act } 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, detach } = 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/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/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/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/)
+  })
+})

package/src/canvas/widgets/FigmaEmbed.jsx

@@ -1,12 +1,11 @@
 import { forwardRef, useImperativeHandle, useMemo, useCallback, useState, useEffect, useRef } from 'react'
-import { createPortal } from 'react-dom'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import { readProp } from './widgetProps.js'
 import { schemas } from './widgetConfig.js'
 import { toFigmaEmbedUrl, getFigmaTitle, getFigmaType, isFigmaUrl } from './figmaUrl.js'
 import { useIframeDevLogs } from './iframeDevLogs.js'
-import { findConnectedSplitTarget, getPaneOrder, buildSecondaryIframeUrl, reparentTerminalInto, getSplitPaneLabel } from './expandUtils.js'
-import SplitScreenTopBar from './SplitScreenTopBar.jsx'
+import { findAllConnectedSplitTargets, getSplitPaneLabel, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
+import ExpandedPane from './ExpandedPane.jsx'
 import styles from './FigmaEmbed.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
@@ -58,7 +57,8 @@ export default forwardRef(function FigmaEmbed({ id: widgetId, props, onUpdate, r
 
   const [interactive, setInteractive] = useState(false)
   const [showIframe, setShowIframe] = useState(true)
-  const [expanded, setExpanded] = useState(false)
+  const [expandMode, setExpandMode] = useState(null)
+  const expanded = expandMode !== null
 
   const iframeRef = useRef(null)
   const embedRef = useRef(null)
@@ -107,19 +107,6 @@ export default forwardRef(function FigmaEmbed({ id: widgetId, props, onUpdate, r
 
   useEffect(() => () => clearTimeout(teardownTimerRef.current), [])
 
-  // Close expanded modal on Escape
-  useEffect(() => {
-    if (!expanded) return
-    function handleKeyDown(e) {
-      if (e.key === 'Escape') {
-        e.stopPropagation()
-        setExpanded(false)
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown, true)
-    return () => document.removeEventListener('keydown', handleKeyDown, true)
-  }, [expanded])
-
   // Reparent iframe DOM node between inline container and modal.
   // Uses moveBefore() (Chrome 133+) which preserves the iframe's
   // browsing context — no reload. Falls back to appendChild.
@@ -158,9 +145,12 @@ export default forwardRef(function FigmaEmbed({ id: widgetId, props, onUpdate, r
     handleAction(actionId) {
       if (actionId === 'open-external') {
         if (url) window.open(url, '_blank', 'noopener')
-      } else if (actionId === 'expand' || actionId === 'split-screen') {
+      } else if (actionId === 'expand' || actionId === 'expand-single') {
+        setShowIframe(true)
+        setExpandMode('single')
+      } else if (actionId === 'split-screen') {
         setShowIframe(true)
-        setExpanded(true)
+        setExpandMode('split')
       }
     },
   }), [url])
@@ -187,6 +177,7 @@ export default forwardRef(function FigmaEmbed({ id: widgetId, props, onUpdate, r
                   className={styles.iframe}
                   title={`Figma ${typeLabel}: ${title}`}
                   allowFullScreen
+                  onLoad={(e) => e.target.blur()}
                 />
               </div>
             ) : (
@@ -248,102 +239,58 @@ export default forwardRef(function FigmaEmbed({ id: widgetId, props, onUpdate, r
         />
       )}
     </WidgetWrapper>
-    {createPortal(
-      <FigmaExpandModal
-        expanded={expanded && !!embedUrl}
-        onClose={() => setExpanded(false)}
-        modalContainerRef={modalContainerRef}
+    {expanded && !!embedUrl && (
+      <FigmaExpandPane
         widgetId={widgetId}
-      />,
-      document.body
+        modalContainerRef={modalContainerRef}
+        splitMode={expandMode === 'split'}
+        onClose={() => setExpandMode(null)}
+      />
     )}
     </>
   )
 })
 
-function FigmaExpandModal({ expanded, onClose, modalContainerRef, widgetId }) {
-  const connectedWidget = useMemo(
-    () => (expanded ? findConnectedSplitTarget(widgetId) : null),
-    [expanded, widgetId],
-  )
-  const hasSplit = Boolean(connectedWidget)
-  const paneOrder = useMemo(
-    () => (hasSplit ? getPaneOrder(widgetId, connectedWidget) : { primaryIsLeft: true }),
-    [hasSplit, widgetId, connectedWidget],
+/**
+ * Builds pane configs and renders ExpandedPane for an expanded Figma widget.
+ * The primary pane is an external pane that receives the iframe via reparenting.
+ */
+function FigmaExpandPane({ widgetId, modalContainerRef, splitMode, onClose }) {
+  const connectedWidgets = useMemo(
+    () => splitMode ? findAllConnectedSplitTargets(widgetId) : [],
+    [widgetId, splitMode],
   )
-  const secondaryUrl = useMemo(() => buildSecondaryIframeUrl(connectedWidget), [connectedWidget])
-  const isTerminalSecondary = connectedWidget?.type === 'terminal' || connectedWidget?.type === 'terminal-read' || connectedWidget?.type === 'agent'
-  const terminalRef = useRef(null)
-  const cleanupRef = useRef(null)
-  const [activePane, setActivePane] = useState('left')
-
   const primaryWidget = useMemo(() => {
     const bridge = window.__storyboardCanvasBridgeState
-    return bridge?.widgets?.find((w) => w.id === widgetId) || { type: 'figma-embed', props: {} }
-  }, [widgetId, expanded])
-
-  const primaryLabel = useMemo(() => getSplitPaneLabel(primaryWidget), [primaryWidget])
-  const secondaryLabel = useMemo(() => getSplitPaneLabel(connectedWidget), [connectedWidget])
-  const leftLabel = paneOrder.primaryIsLeft ? primaryLabel : secondaryLabel
-  const rightLabel = paneOrder.primaryIsLeft ? secondaryLabel : primaryLabel
+    return bridge?.widgets?.find((w) => w.id === widgetId) || { id: widgetId, type: 'figma-embed', position: { x: 0, y: 0 }, props: {} }
+  }, [widgetId])
 
-  useEffect(() => {
-    if (!isTerminalSecondary || !expanded || !terminalRef.current) return
-    cleanupRef.current = reparentTerminalInto(connectedWidget.id, terminalRef.current)
-    return () => { cleanupRef.current?.(); cleanupRef.current = null }
-  }, [isTerminalSecondary, expanded, connectedWidget?.id])
-
-  const primaryPane = (
-    <div
-      ref={modalContainerRef}
-      className={hasSplit ? styles.expandContainerSplit : styles.expandContainer}
-      onClick={(e) => e.stopPropagation()}
-      onPointerDown={() => setActivePane(paneOrder.primaryIsLeft ? 'left' : 'right')}
-    >
-      {!hasSplit && <button className={styles.expandClose} onClick={onClose} aria-label="Close expanded view" autoFocus>✕</button>}
-    </div>
-  )
-
-  let secondaryPane = null
-  const secondarySide = paneOrder.primaryIsLeft ? 'right' : 'left'
-  if (hasSplit) {
-    if (secondaryUrl) {
-      secondaryPane = <div className={styles.expandSecondary} onClick={(e) => e.stopPropagation()} onPointerDown={() => setActivePane(secondarySide)}><iframe src={secondaryUrl} className={styles.expandSecondaryIframe} title="Connected widget" /></div>
-    } else if (isTerminalSecondary) {
-      secondaryPane = <div className={styles.expandSecondary} onClick={(e) => e.stopPropagation()} onPointerDown={() => setActivePane(secondarySide)}><div ref={terminalRef} className={styles.expandTerminal} /></div>
+  const buildPaneFn = useCallback((widget) => {
+    if (widget.id === widgetId) {
+      return {
+        id: widgetId,
+        label: getSplitPaneLabel(primaryWidget),
+        widgetType: 'figma-embed',
+        kind: 'external',
+        attach: (container) => {
+          modalContainerRef.current = container
+          return () => { modalContainerRef.current = null }
+        },
+      }
     }
-  }
+    return buildPaneForWidget(widget)
+  }, [widgetId, primaryWidget, modalContainerRef])
 
-  const leftPane = paneOrder.primaryIsLeft ? primaryPane : secondaryPane
-  const rightPane = paneOrder.primaryIsLeft ? secondaryPane : primaryPane
+  const layout = useMemo(
+    () => buildSplitLayout(primaryWidget, connectedWidgets, buildPaneFn),
+    [primaryWidget, connectedWidgets, buildPaneFn],
+  )
 
   return (
-    <div
-      className={styles.expandBackdrop}
-      style={expanded ? undefined : { display: 'none' }}
-      onClick={onClose}
-      onPointerDown={(e) => e.stopPropagation()}
-      onKeyDown={(e) => { e.stopPropagation(); if (e.key === 'Escape') onClose() }}
-      onWheel={(e) => e.stopPropagation()}
-      tabIndex={-1}
-      ref={(el) => { if (el && expanded) el.focus() }}
-    >
-      {hasSplit ? (
-        <div className={styles.expandSplitBody}>
-          <SplitScreenTopBar
-            leftLabel={leftLabel}
-            rightLabel={rightLabel}
-            activePane={activePane}
-            onClose={onClose}
-          />
-          <div className={styles.expandSplitPanes}>
-            <div className={styles.expandSplitLeft}>{leftPane}</div>
-            <div className={styles.expandSplitRight}>{rightPane}</div>
-          </div>
-        </div>
-      ) : (
-        primaryPane
-      )}
-    </div>
+    <ExpandedPane
+      initialLayout={layout}
+      variant={layout.flat().length <= 1 ? 'modal' : 'full'}
+      onClose={onClose}
+    />
   )
 }