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

package/src/canvas/widgets/expandUtils.js

@@ -4,7 +4,232 @@
  * Reads the canvas bridge state to find connected widgets eligible
  * for split-screen, and builds iframe URLs for secondary panes.
  */
-import { isSplitScreenCapable, getWidgetMeta } from './widgetConfig.js'
+import { createElement, useCallback, useState } from 'react'
+import { getStoryData } from '@dfosco/storyboard-core'
+import { isSplitScreenCapable, getWidgetMeta, getFeaturesForSurface } from './widgetConfig.js'
+import { ExpandedMarkdownEditor } from './MarkdownBlock.jsx'
+import { getImageUrl } from './ImageWidget.jsx'
+import linkStyles from './LinkPreview.module.css'
+import imageStyles from './ImageWidget.module.css'
+
+// Re-export for convenience
+export { isSplitScreenCapable }
+
+/**
+ * Stateful wrapper for markdown in secondary split-screen panes.
+ * Manages editing state and syncs it to the shared editingRef so
+ * the title bar features' getState stays in sync.
+ */
+function MarkdownSecondaryPane({ widget, editingRef, onUpdate }) {
+  const [editing, setEditing] = useState(false)
+  editingRef.current = editing
+  editingRef.setter = (v) => {
+    setEditing(v)
+    // Notify ExpandedPane to re-render so titlebar features resolve updated toggle state
+    document.dispatchEvent(new CustomEvent('storyboard:expanded-pane:refresh'))
+  }
+
+  const content = widget.props?.content || ''
+
+  return createElement(ExpandedMarkdownEditor, {
+    content,
+    onUpdate,
+    editing,
+    onToggleEdit: () => editingRef.setter(!editing),
+  })
+}
+
+/**
+ * Build a pane config for a connected widget to use with ExpandedPane.
+ * Returns a ReactPane or ExternalPane config depending on the widget type.
+ *
+ * @param {{ id: string, type: string, props: Object }} widget
+ * @param {'fullbar' | 'splitbar'} [surface='splitbar'] — surface for titlebar features
+ * @returns {import('./ExpandedPane.jsx').PaneConfig | null}
+ */
+export function buildPaneForWidget(widget, surface = 'splitbar') {
+  if (!widget) return null
+
+  const label = getSplitPaneLabel(widget)
+
+  // Terminal/agent: external pane with DOM reparenting
+  if (widget.type === 'terminal' || widget.type === 'terminal-read' || widget.type === 'agent') {
+    return {
+      id: widget.id,
+      label,
+      widgetType: widget.type,
+      kind: 'external',
+      attach: (container) => reparentTerminalInto(widget.id, container),
+      onResize: (rect) => {
+        // fitTerminalToElement is in TerminalWidget.jsx (module-level).
+        // We call it via the global registry if available.
+        if (typeof window !== 'undefined' && window.__storyboardTerminalRegistry) {
+          const entry = window.__storyboardTerminalRegistry.get(widget.id)
+          if (entry) {
+            const { term, ws } = entry
+            const cw = term.renderer?.charWidth
+            const ch = term.renderer?.charHeight
+            if (cw && ch && rect.width > 50 && rect.height > 50) {
+              const cols = Math.max(10, Math.floor(rect.width / cw))
+              const rows = Math.max(4, Math.floor(rect.height / ch))
+              term.resize?.(cols, rows)
+              if (ws?.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({ type: 'resize', cols, rows }))
+              }
+            }
+          }
+        }
+      },
+    }
+  }
+
+  // iframe-embeddable types: build iframe URL
+  const iframeUrl = buildSecondaryIframeUrl(widget)
+  if (iframeUrl) {
+    return {
+      id: widget.id,
+      label,
+      widgetType: widget.type,
+      kind: 'react',
+      render: () => createElement('iframe', {
+        src: iframeUrl,
+        style: { border: 'none', width: '100%', height: '100%', display: 'block' },
+        title: label,
+      }),
+    }
+  }
+
+  // Markdown: same editable pane as primary, updates via custom event
+  if (widget.type === 'markdown') {
+    // Shared mutable ref for editing state — lets getState and render stay in sync
+    const editingRef = { current: false, setter: null }
+    const toggleEdit = () => { editingRef.setter?.(!editingRef.current) }
+    const onUpdate = (updates) => {
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:update-widget', {
+        detail: { widgetId: widget.id, updates },
+      }))
+    }
+    const surfaceFeatures = getFeaturesForSurface('markdown', surface)
+    return {
+      id: widget.id,
+      label,
+      widgetType: widget.type,
+      kind: 'react',
+      features: surfaceFeatures,
+      getState: (key) => {
+        if (key === 'editing') return editingRef.current
+        return undefined
+      },
+      onAction: (actionId) => {
+        if (actionId === 'toggle-edit') toggleEdit()
+      },
+      render: () => createElement(MarkdownSecondaryPane, { widget, editingRef, onUpdate }),
+    }
+  }
+
+  // Link-preview
+  if (widget.type === 'link-preview') {
+    return {
+      id: widget.id,
+      label,
+      widgetType: widget.type,
+      kind: 'react',
+      render: () => createElement(LazyLinkPreviewPane, { widget }),
+    }
+  }
+
+  // Image: display at full size within the pane
+  if (widget.type === 'image') {
+    return {
+      id: widget.id,
+      label,
+      widgetType: widget.type,
+      kind: 'react',
+      render: () => createElement(LazyImagePane, { widget }),
+    }
+  }
+
+  return null
+}
+
+/**
+ * Link-preview renderer for expanded panes — matches the primary expanded
+ * rendering used when link-preview triggers its own expand/split-screen.
+ */
+function LazyLinkPreviewPane({ widget }) {
+  const { url, title, github, ogImage, description } = widget.props || {}
+
+  let hostname = ''
+  try { hostname = new URL(url).hostname } catch { /* */ }
+
+  if (github) {
+    const titleText = title || github.title || ''
+    const issueNumber = github.number ? `#${github.number}` : ''
+    const primaryAuthor = github.author || ''
+    const createdAgo = github.createdAgo || ''
+    const bodyHtml = github.bodyHtml || ''
+
+    return createElement('div', { className: linkStyles.expandedIssue },
+      createElement('header', { className: linkStyles.expandedIssueHeader },
+        createElement('h2', { className: linkStyles.expandedIssueTitle },
+          createElement('a', { href: url || '#', target: '_blank', rel: 'noopener noreferrer' },
+            titleText || url,
+            issueNumber && createElement('span', { className: linkStyles.expandedIssueNumber }, ` ${issueNumber}`),
+          ),
+        ),
+        createElement('div', { className: linkStyles.expandedByline },
+          primaryAuthor && createElement('a', {
+            href: `https://github.com/${primaryAuthor}`,
+            target: '_blank',
+            rel: 'noopener noreferrer',
+            className: linkStyles.expandedAuthor,
+          },
+            createElement('img', {
+              src: `https://github.com/${primaryAuthor}.png?size=40`,
+              alt: '', width: '20', height: '20',
+              className: linkStyles.avatar, loading: 'lazy',
+            }),
+            primaryAuthor,
+          ),
+          createdAgo && createElement('span', { className: linkStyles.expandedBylineText },
+            primaryAuthor ? ` opened ${createdAgo}` : `Opened ${createdAgo}`,
+          ),
+        ),
+      ),
+      bodyHtml && createElement(DangerousHtmlDiv, { html: bodyHtml, className: linkStyles.expandedIssueBody }),
+    )
+  }
+
+  return createElement('div', { className: linkStyles.expandedLink },
+    ogImage && createElement('img', { className: linkStyles.expandedOgImage, src: ogImage, alt: '', loading: 'lazy' }),
+    createElement('h2', { className: linkStyles.expandedTitle }, title || hostname || url || 'Untitled'),
+    description && createElement('p', { className: linkStyles.expandedDescription }, description),
+    url && createElement('a', {
+      href: url, target: '_blank', rel: 'noopener noreferrer',
+      className: linkStyles.expandedUrl,
+    }, url),
+  )
+}
+
+/** Renders raw HTML into a div via a callback ref (avoids ref-during-render lint). */
+function DangerousHtmlDiv({ html, className }) {
+  const setRef = useCallback((el) => { if (el) el.innerHTML = html }, [html])
+  return createElement('div', { ref: setRef, className })
+}
+
+/** Image renderer for secondary expanded/split-screen panes. */
+function LazyImagePane({ widget }) {
+  const src = widget.props?.src
+  if (!src) return null
+  return createElement('div', { className: imageStyles.expandedImageContainer },
+    createElement('img', {
+      src: getImageUrl(src),
+      alt: '',
+      className: imageStyles.expandedImage,
+      draggable: false,
+    }),
+  )
+}
 
 /**
  * Find a connected widget that is split-screen capable.
@@ -16,24 +241,160 @@ export function findConnectedSplitTarget(widgetId) {
   const bridge = window.__storyboardCanvasBridgeState
   if (!bridge?.connectors || !bridge?.widgets) return null
 
-  // Only allow split-screen when this widget has exactly one connection
-  const myConnections = bridge.connectors.filter(
-    (c) => c.start?.widgetId === widgetId || c.end?.widgetId === widgetId,
-  )
-  if (myConnections.length !== 1) return null
+  // Find all widgets connected to this one
+  const connectedIds = new Set()
+  for (const c of bridge.connectors) {
+    if (c.start?.widgetId === widgetId && c.end?.widgetId) connectedIds.add(c.end.widgetId)
+    if (c.end?.widgetId === widgetId && c.start?.widgetId) connectedIds.add(c.start.widgetId)
+  }
+  if (connectedIds.size === 0) return null
+
+  // Return the first connected widget that is split-screen capable
+  for (const w of bridge.widgets) {
+    if (connectedIds.has(w.id) && isSplitScreenCapable(w.type)) return w
+  }
+  return null
+}
+
+/**
+ * Find ALL connected widgets that are split-screen capable.
+ * If more than maxCount, picks the nearest by Euclidean distance from primary.
+ * @param {string} widgetId — the primary (expanded) widget's ID
+ * @param {number} [maxCount=3] — max connected widgets to return
+ * @returns {Array<{ id: string, type: string, position: { x: number, y: number }, props: Object }>}
+ */
+export function findAllConnectedSplitTargets(widgetId, maxCount = 3) {
+  const bridge = window.__storyboardCanvasBridgeState
+  if (!bridge?.connectors || !bridge?.widgets) return []
 
-  const conn = myConnections[0]
-  const otherId = conn.start?.widgetId === widgetId ? conn.end?.widgetId : conn.start?.widgetId
+  const connectedIds = new Set()
+  for (const c of bridge.connectors) {
+    if (c.start?.widgetId === widgetId && c.end?.widgetId) connectedIds.add(c.end.widgetId)
+    if (c.end?.widgetId === widgetId && c.start?.widgetId) connectedIds.add(c.start.widgetId)
+  }
+  if (connectedIds.size === 0) return []
 
-  // The other widget must also have exactly one connection
-  const otherConnections = bridge.connectors.filter(
-    (c) => c.start?.widgetId === otherId || c.end?.widgetId === otherId,
+  const candidates = bridge.widgets.filter(
+    (w) => connectedIds.has(w.id) && isSplitScreenCapable(w.type),
   )
-  if (otherConnections.length !== 1) return null
 
-  const other = bridge.widgets.find((w) => w.id === otherId)
-  if (other && isSplitScreenCapable(other.type)) return other
-  return null
+  if (candidates.length <= maxCount) return candidates
+
+  // Too many — pick the nearest by Euclidean distance from primary
+  const primary = bridge.widgets.find((w) => w.id === widgetId)
+  const px = primary?.position?.x ?? 0
+  const py = primary?.position?.y ?? 0
+  return candidates
+    .map((w) => {
+      const dx = (w.position?.x ?? 0) - px
+      const dy = (w.position?.y ?? 0) - py
+      return { widget: w, dist: dx * dx + dy * dy }
+    })
+    .sort((a, b) => a.dist - b.dist)
+    .slice(0, maxCount)
+    .map((e) => e.widget)
+}
+
+/**
+ * Build a 2D split layout (PaneConfig[][]) from a primary widget and connected widgets.
+ * Uses quadrant-based spatial assignment: compute centroid, assign each widget to
+ * TL/TR/BL/BR, then build columns (left = TL+BL, right = TR+BR).
+ *
+ * @param {{ id: string, type: string, position?: { x: number, y: number }, props: Object }} primaryWidget
+ * @param {Array<{ id: string, type: string, position?: { x: number, y: number }, props: Object }>} connectedWidgets
+ * @param {(widget: Object) => import('./ExpandedPane.jsx').PaneConfig | null} buildPaneFn — builds a PaneConfig for a widget
+ * @returns {import('./ExpandedPane.jsx').PaneConfig[][]} — 2D layout: outer = columns, inner = rows
+ */
+export function buildSplitLayout(primaryWidget, connectedWidgets, buildPaneFn) {
+  const allWidgets = [primaryWidget, ...connectedWidgets]
+
+  // Build panes, filter nulls, keep widget reference for positioning
+  const entries = allWidgets
+    .map((w) => ({ widget: w, pane: buildPaneFn(w) }))
+    .filter((e) => e.pane !== null)
+
+  if (entries.length === 0) return []
+  if (entries.length === 1) return [[entries[0].pane]]
+
+  // Assign to quadrants
+  const assigned = assignToQuadrants(entries.map((e) => ({
+    x: e.widget.position?.x ?? 0,
+    y: e.widget.position?.y ?? 0,
+    data: e.pane,
+  })))
+
+  // Build columns: left = TL + BL (top first), right = TR + BR (top first)
+  const leftCol = [assigned.tl, assigned.bl].filter(Boolean)
+  const rightCol = [assigned.tr, assigned.br].filter(Boolean)
+
+  const layout = []
+  if (leftCol.length > 0) layout.push(leftCol)
+  if (rightCol.length > 0) layout.push(rightCol)
+  return layout
+}
+
+/**
+ * Assign items to a 2×2 quadrant grid using centroid splitting.
+ * Falls back to TL→TR→BL→BR cycling when positions are degenerate (all same x or y).
+ *
+ * @template T
+ * @param {Array<{ x: number, y: number, data: T }>} items — 2-4 positioned items
+ * @returns {{ tl: T|null, tr: T|null, bl: T|null, br: T|null }}
+ */
+export function assignToQuadrants(items) {
+  const result = { tl: null, tr: null, bl: null, br: null }
+  if (items.length === 0) return result
+
+  // Centroid
+  const cx = items.reduce((s, i) => s + i.x, 0) / items.length
+  const cy = items.reduce((s, i) => s + i.y, 0) / items.length
+
+  // Check if all x or all y are identical (degenerate)
+  const allSameX = items.every((i) => i.x === items[0].x)
+  const allSameY = items.every((i) => i.y === items[0].y)
+
+  if (allSameX && allSameY) {
+    // All positions identical — cycle TL→TR→BL→BR
+    const slots = ['tl', 'tr', 'bl', 'br']
+    for (let i = 0; i < Math.min(items.length, 4); i++) {
+      result[slots[i]] = items[i].data
+    }
+    return result
+  }
+
+  // Assign to quadrants based on centroid
+  // Use buckets to handle collisions (multiple items in same quadrant)
+  const buckets = { tl: [], tr: [], bl: [], br: [] }
+  for (const item of items) {
+    const col = item.x < cx ? 'l' : 'r'
+    const row = item.y < cy ? 't' : 'b'
+    buckets[`${row}${col}`].push(item)
+  }
+
+  // If centroid splits are degenerate (e.g. 2 items with same x = centroid),
+  // we may have empty quadrants and overflow. Redistribute overflow.
+  const filled = []
+  const overflow = []
+  for (const [slot, bucket] of Object.entries(buckets)) {
+    if (bucket.length > 0) {
+      // Sort by position for deterministic order: top-left first
+      bucket.sort((a, b) => a.y - b.y || a.x - b.x)
+      result[slot] = bucket[0].data
+      filled.push(slot)
+      for (let i = 1; i < bucket.length; i++) overflow.push(bucket[i])
+    }
+  }
+
+  // Place overflow into empty quadrant slots
+  if (overflow.length > 0) {
+    const allSlots = ['tl', 'tr', 'bl', 'br']
+    const emptySlots = allSlots.filter((s) => result[s] === null)
+    for (let i = 0; i < Math.min(overflow.length, emptySlots.length); i++) {
+      result[emptySlots[i]] = overflow[i].data
+    }
+  }
+
+  return result
 }
 
 /**
@@ -105,7 +466,7 @@ export function buildSecondaryIframeUrl(widget) {
     const storyId = widget.props?.storyId
     const exportName = widget.props?.exportName
     if (!storyId) return null
-    const storyData = typeof window !== 'undefined' && window.__storyboardStoryIndex?.[storyId]
+    const storyData = getStoryData(storyId)
     if (storyData?._route) {
       const params = new URLSearchParams()
       if (exportName) params.set('export', exportName)
@@ -160,6 +521,9 @@ export function getSplitPaneLabel(widget) {
   if (widget.type === 'terminal' || widget.type === 'terminal-read') {
     return `Terminal · ${widget.props?.prettyName || '…'}`
   }
+  if (widget.type === 'agent') {
+    return `Agent · ${widget.props?.prettyName || '…'}`
+  }
   if (widget.type === 'prototype') {
     return `Prototype · ${widget.props?.src || '…'}`
   }
@@ -184,5 +548,10 @@ export function getSplitPaneLabel(widget) {
   if (widget.type === 'link-preview') {
     return `${widget.props?.github ? 'GitHub' : 'Link'} · ${widget.props?.title || widget.props?.url || '…'}`
   }
+  if (widget.type === 'image') {
+    const filename = widget.props?.src || ''
+    const name = filename.replace(/^~/, '').replace(/\.[^.]+$/, '') || '…'
+    return `Image · ${name}`
+  }
   return typeName
 }

package/src/canvas/widgets/expandUtils.test.js

@@ -0,0 +1,155 @@
+import { describe, it, expect } from 'vitest'
+import { assignToQuadrants, buildSplitLayout } from './expandUtils.js'
+
+describe('assignToQuadrants', () => {
+  it('assigns 2 items to left/right columns', () => {
+    const result = assignToQuadrants([
+      { x: 100, y: 200, data: 'A' },
+      { x: 500, y: 200, data: 'B' },
+    ])
+    // centroid.y = 200 = both y values, so both get 'b' row (>= centroid)
+    expect(result.bl).toBe('A')
+    expect(result.br).toBe('B')
+    expect(result.tl).toBeNull()
+    expect(result.tr).toBeNull()
+  })
+
+  it('assigns 2 items stacked vertically to top/bottom in same column', () => {
+    const result = assignToQuadrants([
+      { x: 100, y: 100, data: 'A' },
+      { x: 100, y: 500, data: 'B' },
+    ])
+    // Both same x → degenerate x, but different y
+    // centroid = (100, 300). A.y=100 < 300 → top, B.y=500 >= 300 → bottom
+    // A.x=100 is NOT < centroid.x=100, so both go to 'r'
+    // → tr='A', br='B'
+    expect(result.tr).toBe('A')
+    expect(result.br).toBe('B')
+  })
+
+  it('assigns 4 items to all quadrants', () => {
+    const result = assignToQuadrants([
+      { x: 100, y: 100, data: 'TL' },
+      { x: 500, y: 100, data: 'TR' },
+      { x: 100, y: 500, data: 'BL' },
+      { x: 500, y: 500, data: 'BR' },
+    ])
+    expect(result.tl).toBe('TL')
+    expect(result.tr).toBe('TR')
+    expect(result.bl).toBe('BL')
+    expect(result.br).toBe('BR')
+  })
+
+  it('assigns 3 items: 2 in left column, 1 in right', () => {
+    const result = assignToQuadrants([
+      { x: 100, y: 100, data: 'TL' },
+      { x: 100, y: 500, data: 'BL' },
+      { x: 500, y: 300, data: 'R' },
+    ])
+    // centroid x = (100+100+500)/3 ≈ 233, y = (100+500+300)/3 = 300
+    // TL: x=100 < 233 → l, y=100 < 300 → t → tl
+    // BL: x=100 < 233 → l, y=500 >= 300 → b → bl
+    // R: x=500 >= 233 → r, y=300 >= 300 → b → br
+    expect(result.tl).toBe('TL')
+    expect(result.bl).toBe('BL')
+    expect(result.br).toBe('R')
+  })
+
+  it('cycles TL→TR→BL→BR when all positions are identical', () => {
+    const result = assignToQuadrants([
+      { x: 0, y: 0, data: 'A' },
+      { x: 0, y: 0, data: 'B' },
+      { x: 0, y: 0, data: 'C' },
+    ])
+    expect(result.tl).toBe('A')
+    expect(result.tr).toBe('B')
+    expect(result.bl).toBe('C')
+    expect(result.br).toBeNull()
+  })
+
+  it('handles overflow: 2 items in same quadrant', () => {
+    // Two items very close, both land in same quadrant → overflow redistributes
+    const result = assignToQuadrants([
+      { x: 100, y: 100, data: 'A' },
+      { x: 110, y: 110, data: 'B' },
+      { x: 500, y: 500, data: 'C' },
+    ])
+    // centroid = (236, 236). A: x<236 y<236 → tl. B: x<236 y<236 → tl (overflow!)
+    // C: x>=236 y>=236 → br
+    // A wins tl, B overflows to first empty slot (tr)
+    expect(result.tl).toBe('A')
+    expect(result.br).toBe('C')
+    // B goes to overflow → first empty slot (tr)
+    expect(result.tr).toBe('B')
+  })
+
+  it('returns all nulls for empty input', () => {
+    const result = assignToQuadrants([])
+    expect(result.tl).toBeNull()
+    expect(result.tr).toBeNull()
+    expect(result.bl).toBeNull()
+    expect(result.br).toBeNull()
+  })
+})
+
+describe('buildSplitLayout', () => {
+  function mockPaneFn(widget) {
+    return { id: widget.id, label: widget.id, kind: 'react', render: () => null }
+  }
+
+  it('returns single column for 1 widget (no connected)', () => {
+    const primary = { id: 'a', type: 'terminal', position: { x: 0, y: 0 }, props: {} }
+    const layout = buildSplitLayout(primary, [], mockPaneFn)
+    expect(layout.length).toBe(1)
+    expect(layout[0].length).toBe(1)
+    expect(layout[0][0].id).toBe('a')
+  })
+
+  it('returns 2 columns for 2 horizontally-spaced widgets', () => {
+    const primary = { id: 'a', type: 'terminal', position: { x: 0, y: 100 }, props: {} }
+    const connected = [
+      { id: 'b', type: 'prototype', position: { x: 500, y: 100 }, props: {} },
+    ]
+    const layout = buildSplitLayout(primary, connected, mockPaneFn)
+    expect(layout.length).toBe(2)
+    expect(layout[0].length).toBe(1) // left column
+    expect(layout[1].length).toBe(1) // right column
+  })
+
+  it('returns 2 columns with row split for 3 widgets', () => {
+    const primary = { id: 'a', type: 'terminal', position: { x: 0, y: 0 }, props: {} }
+    const connected = [
+      { id: 'b', type: 'prototype', position: { x: 500, y: 0 }, props: {} },
+      { id: 'c', type: 'markdown', position: { x: 500, y: 500 }, props: {} },
+    ]
+    const layout = buildSplitLayout(primary, connected, mockPaneFn)
+    const totalPanes = layout.flat().length
+    expect(totalPanes).toBe(3)
+    // One column should have 2 panes (row split)
+    const hasRowSplit = layout.some((col) => col.length === 2)
+    expect(hasRowSplit).toBe(true)
+  })
+
+  it('returns 2×2 grid for 4 widgets', () => {
+    const primary = { id: 'a', type: 'terminal', position: { x: 0, y: 0 }, props: {} }
+    const connected = [
+      { id: 'b', type: 'prototype', position: { x: 500, y: 0 }, props: {} },
+      { id: 'c', type: 'markdown', position: { x: 0, y: 500 }, props: {} },
+      { id: 'd', type: 'agent', position: { x: 500, y: 500 }, props: {} },
+    ]
+    const layout = buildSplitLayout(primary, connected, mockPaneFn)
+    expect(layout.length).toBe(2)
+    expect(layout[0].length).toBe(2)
+    expect(layout[1].length).toBe(2)
+  })
+
+  it('skips widgets where buildPaneFn returns null', () => {
+    const primary = { id: 'a', type: 'terminal', position: { x: 0, y: 0 }, props: {} }
+    const connected = [
+      { id: 'b', type: 'unknown', position: { x: 500, y: 0 }, props: {} },
+    ]
+    const paneFn = (w) => w.id === 'a' ? mockPaneFn(w) : null
+    const layout = buildSplitLayout(primary, connected, paneFn)
+    expect(layout.flat().length).toBe(1)
+  })
+})

package/src/canvas/widgets/index.js

@@ -6,9 +6,11 @@ import ImageWidget from './ImageWidget.jsx'
 import FigmaEmbed from './FigmaEmbed.jsx'
 import CodePenEmbed from './CodePenEmbed.jsx'
 import StoryWidget from './StoryWidget.jsx'
+import ComponentSetWidget from './ComponentSetWidget.jsx'
 import TerminalWidget from './TerminalWidget.jsx'
 import TerminalReadWidget from './TerminalReadWidget.jsx'
-import ActionWidget from './ActionWidget.jsx'
+import PromptWidget from './PromptWidget.jsx'
+import TilesWidget from './TilesWidget.jsx'
 
 /**
  * Maps widget type strings to their React components.
@@ -23,10 +25,12 @@ export const widgetRegistry = {
   'figma-embed': FigmaEmbed,
   'codepen-embed': CodePenEmbed,
   'story': StoryWidget,
+  'component-set': ComponentSetWidget,
   'terminal': TerminalWidget,
   'terminal-read': TerminalReadWidget,
-  'action': ActionWidget,
   'agent': TerminalWidget,
+  'prompt': PromptWidget,
+  'tiles': TilesWidget,
 }
 
 /**

package/src/canvas/widgets/tilePool.js

@@ -0,0 +1,23 @@
+/**
+ * Static tile image pool.
+ * Each import resolves to a Vite asset URL at build time.
+ */
+import solidA from './tiles/solid-a.png'
+import solidB from './tiles/solid-b.png'
+import quarterTL from './tiles/quarter-tl.png'
+import quarterTR from './tiles/quarter-tr.png'
+import diagonalBR from './tiles/diagonal-br.png'
+import diagonalBL from './tiles/diagonal-bl.png'
+import diagonalTL from './tiles/diagonal-tl.png'
+import leaf from './tiles/leaf.png'
+
+export const TILE_POOL = [
+  solidA,
+  solidB,
+  quarterTL,
+  quarterTR,
+  diagonalBR,
+  diagonalBL,
+  diagonalTL,
+  leaf,
+]