@dfosco/storyboard-react 4.2.0-beta.3 → 4.2.0

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,7 +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 PromptWidget from './PromptWidget.jsx'
+import TilesWidget from './TilesWidget.jsx'
 
 /**
  * Maps widget type strings to their React components.
@@ -21,7 +25,12 @@ export const widgetRegistry = {
   'figma-embed': FigmaEmbed,
   'codepen-embed': CodePenEmbed,
   'story': StoryWidget,
+  'component-set': ComponentSetWidget,
   'terminal': TerminalWidget,
+  'terminal-read': TerminalReadWidget,
+  'agent': TerminalWidget,
+  'prompt': PromptWidget,
+  'tiles': TilesWidget,
 }
 
 /**

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

@@ -1,8 +1,8 @@
 /**
  * Tests for iframe snapshot display — single snapshot prop.
  */
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { render, fireEvent, waitFor, act } from '@testing-library/react'
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render } from '@testing-library/react'
 import PrototypeEmbed from './PrototypeEmbed.jsx'
 import StoryWidget from './StoryWidget.jsx'
 
@@ -54,9 +54,9 @@ afterEach(() => {
   document.querySelectorAll('[data-sb-canvas-theme]').forEach(el => el.remove())
 })
 
-describe('Snapshot display', () => {
+describe('Snapshot display (snapshots removed — iframes always render)', () => {
   describe('PrototypeEmbed', () => {
-    it('shows snapshot image when valid snapshot prop exists', () => {
+    it('renders iframe even when snapshot prop is provided', () => {
       const { wrapper } = renderInCanvas(
         <PrototypeEmbed
           id="proto-abc123"
@@ -72,13 +72,11 @@ describe('Snapshot display', () => {
         />
       )
 
-      const img = wrapper.querySelector('img')
-      expect(img).toBeInTheDocument()
-      expect(img.src).toContain('snapshot-proto-abc123.webp')
-      expect(wrapper.querySelector('iframe')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('iframe')).toBeInTheDocument()
     })
 
-    it('falls back to snapshotLight for backward compat', () => {
+    it('renders iframe when snapshotLight prop is provided', () => {
       const { wrapper } = renderInCanvas(
         <PrototypeEmbed
           id="proto-abc123"
@@ -94,12 +92,11 @@ describe('Snapshot display', () => {
         />
       )
 
-      const img = wrapper.querySelector('img')
-      expect(img).toBeInTheDocument()
-      expect(img.src).toContain('snapshot-proto-abc123--light.webp')
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('iframe')).toBeInTheDocument()
     })
 
-    it('shows placeholder when no snapshot exists', () => {
+    it('renders iframe when no snapshot exists', () => {
       const { wrapper } = renderInCanvas(
         <PrototypeEmbed
           id="proto-xyz"
@@ -110,32 +107,10 @@ describe('Snapshot display', () => {
       )
 
       expect(wrapper.querySelector('img')).not.toBeInTheDocument()
-      expect(wrapper.querySelector('iframe')).not.toBeInTheDocument()
-    })
-
-    it('falls back to placeholder when snapshot image fails to load', () => {
-      const { wrapper } = renderInCanvas(
-        <PrototypeEmbed
-          id="proto-abc123"
-          props={{
-            src: '/test',
-            width: 400,
-            height: 300,
-            zoom: 100,
-            snapshot: '/_storyboard/canvas/images/snapshot-proto-abc123.webp?v=123',
-          }}
-          onUpdate={vi.fn()}
-          resizable={false}
-        />
-      )
-
-      const img = wrapper.querySelector('img')
-      expect(img).toBeInTheDocument()
-      fireEvent.error(img)
-      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('iframe')).toBeInTheDocument()
     })
 
-    it('ignores snapshot that does not match widget ID', () => {
+    it('ignores snapshot prop that does not match widget ID', () => {
       const { wrapper } = renderInCanvas(
         <PrototypeEmbed
           id="proto-abc123"
@@ -152,9 +127,10 @@ describe('Snapshot display', () => {
       )
 
       expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('iframe')).toBeInTheDocument()
     })
 
-    it('does not show snapshot for external URLs', () => {
+    it('renders iframe for external URLs regardless of snapshot', () => {
       const { wrapper } = renderInCanvas(
         <PrototypeEmbed
           id="proto-ext"
@@ -171,11 +147,12 @@ describe('Snapshot display', () => {
       )
 
       expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('iframe')).toBeInTheDocument()
     })
   })
 
   describe('StoryWidget', () => {
-    it('shows snapshot image when valid snapshot prop exists', () => {
+    it('renders iframe even when snapshot prop is provided', () => {
       const { wrapper } = renderInCanvas(
         <StoryWidget
           id="story-abc123"
@@ -191,13 +168,11 @@ describe('Snapshot display', () => {
         />
       )
 
-      const img = wrapper.querySelector('img')
-      expect(img).toBeInTheDocument()
-      expect(img.src).toContain('snapshot-story-abc123.webp')
-      expect(wrapper.querySelector('iframe')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('iframe')).toBeInTheDocument()
     })
 
-    it('falls back to snapshotDark for backward compat', () => {
+    it('renders iframe when snapshotDark prop is provided', () => {
       const { wrapper } = renderInCanvas(
         <StoryWidget
           id="story-abc123"
@@ -210,50 +185,27 @@ describe('Snapshot display', () => {
         />
       )
 
-      const img = wrapper.querySelector('img')
-      expect(img).toBeInTheDocument()
-      expect(img.src).toContain('snapshot-story-abc123--dark.webp')
-    })
-
-    it('shows placeholder when no snapshot exists', () => {
-      const { wrapper } = renderInCanvas(
-        <StoryWidget
-          id="story-xyz"
-          props={{
-            storyId: 'button-patterns',
-            exportName: 'Primary',
-            width: 400,
-            height: 300,
-          }}
-          onUpdate={vi.fn()}
-          resizable={false}
-        />
-      )
-
       expect(wrapper.querySelector('img')).not.toBeInTheDocument()
-      expect(wrapper.querySelector('iframe')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('iframe')).toBeInTheDocument()
     })
 
-    it('falls back to placeholder when snapshot image fails to load', () => {
+    it('renders iframe when no snapshot exists', () => {
       const { wrapper } = renderInCanvas(
         <StoryWidget
-          id="story-abc123"
+          id="story-xyz"
           props={{
             storyId: 'button-patterns',
             exportName: 'Primary',
             width: 400,
             height: 300,
-            snapshot: '/_storyboard/canvas/images/snapshot-story-abc123.webp?v=456',
           }}
           onUpdate={vi.fn()}
           resizable={false}
         />
       )
 
-      const img = wrapper.querySelector('img')
-      expect(img).toBeInTheDocument()
-      fireEvent.error(img)
       expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('iframe')).toBeInTheDocument()
     })
   })
 })

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,
+]

package/src/canvas/widgets/widgetConfig.js

@@ -50,6 +50,11 @@ function resolveFeature(feature) {
       const r = {}
       for (const [k, v] of Object.entries(val)) r[k] = resolveVar(v)
       resolved[key] = r
+    } else if (key === 'toggle' && val && typeof val === 'object') {
+      // Pass toggle config through as-is (stateKey, activeIcon, activeLabel)
+      resolved[key] = { ...val }
+    } else if (key === 'surfaces' && Array.isArray(val)) {
+      resolved[key] = val
     } else {
       resolved[key] = resolveVar(val)
     }
@@ -115,16 +120,44 @@ export const widgetTypes = buildWidgetTypes()
  * In production (or when isLocalDev is false, e.g. ?prodMode simulation),
  * only features with `prod: true` are returned.
  * In dev, all features are returned.
+ *
+ * Features with an explicit `surfaces` array that does NOT include `"toolbar"`
+ * are excluded — they only render on their declared surfaces (fullbar/splitbar).
+ * Features without a `surfaces` array default to toolbar-only.
+ *
  * @param {string} type — widget type string
  * @param {{ isLocalDev?: boolean }} [options]
  * @returns {Array} features array from config (variables resolved), or empty array
  */
 export function getFeatures(type, { isLocalDev = true } = {}) {
   const features = widgetTypes[type]?.features ?? []
+  let filtered = features.filter(f => {
+    const surfaces = f.surfaces || ['toolbar']
+    return surfaces.includes('toolbar')
+  })
   if (import.meta.env?.PROD || !isLocalDev) {
-    return features.filter(f => f.prod)
+    filtered = filtered.filter(f => f.prod)
   }
-  return features
+  return filtered
+}
+
+/**
+ * Get features for a specific rendering surface.
+ * Features without a `surfaces` array default to `["toolbar"]`.
+ * @param {string} type — widget type string
+ * @param {'toolbar' | 'fullbar' | 'splitbar'} surface — target surface
+ * @param {{ isLocalDev?: boolean }} [options]
+ * @returns {Array} filtered features for the given surface
+ */
+export function getFeaturesForSurface(type, surface, { isLocalDev = true } = {}) {
+  let features = widgetTypes[type]?.features ?? []
+  if (import.meta.env?.PROD || !isLocalDev) {
+    features = features.filter(f => f.prod)
+  }
+  return features.filter(f => {
+    const surfaces = f.surfaces || ['toolbar']
+    return surfaces.includes(surface)
+  })
 }
 
 /**
@@ -151,6 +184,24 @@ export function getWidgetMeta(type) {
   return { label: def.label, icon: def.icon }
 }
 
+/**
+ * Check if a widget type supports expanding to a full-screen modal.
+ * @param {string} type — widget type string
+ * @returns {boolean}
+ */
+export function isExpandable(type) {
+  return widgetTypes[type]?.expandable === true
+}
+
+/**
+ * Check if a widget type can appear in a split-screen pane.
+ * @param {string} type — widget type string
+ * @returns {boolean}
+ */
+export function isSplitScreenCapable(type) {
+  return widgetTypes[type]?.splitScreen === true
+}
+
 /**
  * Get the interact gate config for a widget type.
  * @returns {{ enabled: boolean, label: string }} 
@@ -170,7 +221,7 @@ export function getInteractGate(type) {
  */
 export function getMenuWidgetTypes() {
   return Object.entries(widgetTypes)
-    .filter(([type]) => type !== 'link-preview' && type !== 'image' && type !== 'figma-embed' && type !== 'codepen-embed' && type !== 'story')
+    .filter(([type, def]) => type !== 'link-preview' && type !== 'image' && type !== 'figma-embed' && type !== 'codepen-embed' && type !== 'story' && type !== 'terminal-read' && !def.unlisted)
     .map(([type, def]) => ({ type, label: def.label, icon: def.icon }))
 }
 
@@ -216,7 +267,7 @@ export function getConnectorDefaults() {
     endpointFill: defaults.endpointFill ?? 'var(--fgColor-accent, #0969da)',
     endpointStroke: defaults.endpointStroke ?? 'var(--bgColor-default, #ffffff)',
     endpointStrokeWidth: defaults.endpointStrokeWidth ?? 3,
-    hitAreaStrokeWidth: defaults.hitAreaStrokeWidth ?? 16,
+    hitAreaStrokeWidth: defaults.hitAreaStrokeWidth ?? 24,
     dragStroke: defaults.dragStroke ?? 'var(--fgColor-accent, #0969da)',
     dragStrokeWidth: defaults.dragStrokeWidth ?? 2,
     dragDasharray: defaults.dragDasharray ?? '6 4',