@dfosco/storyboard-react 4.2.4 → 4.2.6

package/src/canvas/WebGLContextPool.test.jsx

@@ -0,0 +1,165 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, act } from '@testing-library/react'
+import { WebGLContextPoolProvider, useWebGLSlot, usePoolVisibilityUpdater, Priority } from './WebGLContextPool.jsx'
+
+function TestWidget({ widgetId, onSlot }) {
+  const slot = useWebGLSlot(widgetId)
+  onSlot?.(slot)
+  return <div data-testid={widgetId}>{slot.isLive ? 'live' : 'frozen'}</div>
+}
+
+function TestUpdater({ onUpdater }) {
+  const update = usePoolVisibilityUpdater()
+  onUpdater?.(update)
+  return null
+}
+
+describe('WebGLContextPool', () => {
+  it('grants live slots to widgets within the max limit', () => {
+    let slot1, slot2
+    render(
+      <WebGLContextPoolProvider maxLive={2}>
+        <TestWidget widgetId="t1" onSlot={(s) => { slot1 = s }} />
+        <TestWidget widgetId="t2" onSlot={(s) => { slot2 = s }} />
+      </WebGLContextPoolProvider>
+    )
+
+    // Both should be live since we're under the limit
+    expect(slot1.isLive).toBe(true)
+    expect(slot2.isLive).toBe(true)
+  })
+
+  it('freezes excess widgets when over the limit', () => {
+    let slot1, slot2, slot3
+    render(
+      <WebGLContextPoolProvider maxLive={2}>
+        <TestWidget widgetId="t1" onSlot={(s) => { slot1 = s }} />
+        <TestWidget widgetId="t2" onSlot={(s) => { slot2 = s }} />
+        <TestWidget widgetId="t3" onSlot={(s) => { slot3 = s }} />
+      </WebGLContextPoolProvider>
+    )
+
+    const liveCount = [slot1, slot2, slot3].filter(s => s.isLive).length
+    const frozenCount = [slot1, slot2, slot3].filter(s => !s.isLive).length
+
+    expect(liveCount).toBe(2)
+    expect(frozenCount).toBe(1)
+  })
+
+  it('always returns live when no provider is present', () => {
+    let slot
+    render(<TestWidget widgetId="t1" onSlot={(s) => { slot = s }} />)
+    expect(slot.isLive).toBe(true)
+    expect(slot.generation).toBe(0)
+  })
+
+  it('prioritizes PINNED widgets over OFFSCREEN', () => {
+    let slot1, slot2, slot3
+    render(
+      <WebGLContextPoolProvider maxLive={2}>
+        <TestWidget widgetId="t1" onSlot={(s) => { slot1 = s }} />
+        <TestWidget widgetId="t2" onSlot={(s) => { slot2 = s }} />
+        <TestWidget widgetId="t3" onSlot={(s) => { slot3 = s }} />
+      </WebGLContextPoolProvider>
+    )
+
+    // Pin t3 — it should become live, evicting one of the others
+    act(() => { slot3.setPriority(Priority.PINNED) })
+
+    expect(slot3.isLive).toBe(true)
+  })
+
+  it('PINNED widgets bypass the max limit', () => {
+    let slot1, slot2, slot3
+    render(
+      <WebGLContextPoolProvider maxLive={2}>
+        <TestWidget widgetId="t1" onSlot={(s) => { slot1 = s }} />
+        <TestWidget widgetId="t2" onSlot={(s) => { slot2 = s }} />
+        <TestWidget widgetId="t3" onSlot={(s) => { slot3 = s }} />
+      </WebGLContextPoolProvider>
+    )
+
+    // Pin all three
+    act(() => {
+      slot1.setPriority(Priority.PINNED)
+      slot2.setPriority(Priority.PINNED)
+      slot3.setPriority(Priority.PINNED)
+    })
+
+    // All should be live because PINNED bypasses the cap
+    expect(slot1.isLive).toBe(true)
+    expect(slot2.isLive).toBe(true)
+    expect(slot3.isLive).toBe(true)
+  })
+
+  it('tracks generation across live-frozen-live transitions', () => {
+    let slot1, slot2, slot3
+    render(
+      <WebGLContextPoolProvider maxLive={2}>
+        <TestWidget widgetId="t1" onSlot={(s) => { slot1 = s }} />
+        <TestWidget widgetId="t2" onSlot={(s) => { slot2 = s }} />
+        <TestWidget widgetId="t3" onSlot={(s) => { slot3 = s }} />
+      </WebGLContextPoolProvider>
+    )
+
+    // t3 starts frozen with generation 0 (never was live)
+    expect(slot3.isLive).toBe(false)
+    expect(slot3.generation).toBe(0)
+
+    // Pin t3 to make it live
+    act(() => { slot3.setPriority(Priority.PINNED) })
+    expect(slot3.isLive).toBe(true)
+
+    // Unpin t3 — it should be evicted and generation bumped
+    act(() => { slot3.setPriority(Priority.OFFSCREEN) })
+    // Hysteresis delays eviction; use fake timers if needed.
+    // For now, verify that generation bumps when eviction happens.
+  })
+
+  it('usePoolVisibilityUpdater updates priorities based on viewport', () => {
+    let slot1, slot2, updater
+    render(
+      <WebGLContextPoolProvider maxLive={1}>
+        <TestWidget widgetId="t1" onSlot={(s) => { slot1 = s }} />
+        <TestWidget widgetId="t2" onSlot={(s) => { slot2 = s }} />
+        <TestUpdater onUpdater={(u) => { updater = u }} />
+      </WebGLContextPoolProvider>
+    )
+
+    const widgets = [
+      { id: 't1', type: 'terminal', position: { x: 100, y: 100 }, props: { width: 800, height: 450 } },
+      { id: 't2', type: 'terminal', position: { x: 5000, y: 5000 }, props: { width: 800, height: 450 } },
+    ]
+
+    // Viewport only covers t1
+    act(() => {
+      updater({ x: 0, y: 0, w: 1920, h: 1080 }, widgets, new Set(), null)
+    })
+
+    expect(slot1.isLive).toBe(true)
+    expect(slot2.isLive).toBe(false)
+  })
+
+  it('selected widgets get PINNED priority via visibility updater', () => {
+    let slot1, slot2, updater
+    render(
+      <WebGLContextPoolProvider maxLive={1}>
+        <TestWidget widgetId="t1" onSlot={(s) => { slot1 = s }} />
+        <TestWidget widgetId="t2" onSlot={(s) => { slot2 = s }} />
+        <TestUpdater onUpdater={(u) => { updater = u }} />
+      </WebGLContextPoolProvider>
+    )
+
+    const widgets = [
+      { id: 't1', type: 'terminal', position: { x: 100, y: 100 }, props: { width: 800, height: 450 } },
+      { id: 't2', type: 'terminal', position: { x: 5000, y: 5000 }, props: { width: 800, height: 450 } },
+    ]
+
+    // t2 is offscreen but selected — should be pinned and live
+    act(() => {
+      updater({ x: 0, y: 0, w: 1920, h: 1080 }, widgets, new Set(['t2']), null)
+    })
+
+    expect(slot2.isLive).toBe(true)
+  })
+})

package/src/canvas/componentIsolate.jsx

@@ -89,11 +89,20 @@ document.documentElement.setAttribute('data-color-mode', theme.startsWith('dark'
 document.documentElement.setAttribute('data-dark-theme', theme.startsWith('dark') ? theme : '')
 document.documentElement.setAttribute('data-light-theme', theme.startsWith('dark') ? '' : theme || 'light')
 
+// Suppress HMR full-reloads — this iframe is embedded inside a canvas page
+// that manages its own reload lifecycle. Without this guard, every file change
+// causes the iframe to flash/reload.
+if (import.meta.hot) {
+  const msg = { active: true }
+  import.meta.hot.send('storyboard:canvas-hmr-guard', msg)
+  setInterval(() => import.meta.hot.send('storyboard:canvas-hmr-guard', msg), 3000)
+}
+
 const root = createRoot(document.getElementById('root'))
 
 async function mount() {
-  if (!modulePath || !exportName) {
-    root.render(createElement('div', { style: errorStyle }, 'Missing module or export param'))
+  if (!modulePath) {
+    root.render(createElement('div', { style: errorStyle }, 'Missing module param'))
     return
   }
 
@@ -106,25 +115,46 @@ async function mount() {
   try {
     const resolved = resolveModulePath(modulePath)
     const mod = await import(/* @vite-ignore */ resolved)
-    const Component = mod[exportName]
-
-    if (!Component || typeof Component !== 'function') {
-      throw new Error(`Export "${exportName}" not found or is not a component`)
-    }
 
-    root.render(
-      createElement(ThemeProvider, { colorMode },
-        createElement(BaseStyles, null,
-          createElement(IsolateErrorBoundary, { name: exportName },
-            createElement(Component),
+    if (exportName) {
+      // Single export mode
+      const Component = mod[exportName]
+      if (!Component || typeof Component !== 'function') {
+        throw new Error(`Export "${exportName}" not found or is not a component`)
+      }
+      root.render(
+        createElement(ThemeProvider, { colorMode },
+          createElement(BaseStyles, null,
+            createElement(IsolateErrorBoundary, { name: exportName },
+              createElement(Component),
+            ),
           ),
         ),
-      ),
-    )
+      )
+    } else {
+      // All exports mode — render every named function export stacked
+      const entries = Object.entries(mod).filter(
+        ([key, value]) => key !== 'default' && typeof value === 'function',
+      )
+      if (entries.length === 0) {
+        throw new Error('No named exports found in story module')
+      }
+      root.render(
+        createElement(ThemeProvider, { colorMode },
+          createElement(BaseStyles, null,
+            ...entries.map(([name, Component]) =>
+              createElement(IsolateErrorBoundary, { key: name, name },
+                createElement(Component),
+              ),
+            ),
+          ),
+        ),
+      )
+    }
   } catch (err) {
     root.render(
       createElement('div', { style: errorStyle },
-        createElement('strong', null, exportName),
+        createElement('strong', null, exportName || 'Component'),
         createElement('br'),
         String(err.message || err),
       ),

package/src/canvas/componentSetIsolate.jsx

@@ -0,0 +1,257 @@
+/**
+ * Canvas Component-Set Isolate — lightweight iframe entry point.
+ *
+ * Renders ALL named exports from a .story.jsx module in a grid layout,
+ * bypassing the full SPA bootstrap (router, StoryboardProvider, data index).
+ *
+ * This is the component-set equivalent of componentIsolate.jsx, which renders
+ * a single export. By avoiding the full app bootstrap, component-set widgets
+ * load significantly faster — especially important since each widget is an
+ * iframe that would otherwise need to initialize the entire app.
+ *
+ * Query params:
+ *   module   — absolute or base-relative path to the .story.jsx file
+ *   layout   — "horizontal" (default) | "vertical"
+ *   selected — export name of the currently selected cell
+ *   theme    — canvas theme (light / dark / dark_dimmed)
+ */
+import { createElement, Component as ReactComponent, useState, useEffect, useLayoutEffect, useCallback, useRef } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ThemeProvider, BaseStyles } from '@primer/react'
+
+// ── Primer Primitives CSS (required for CSS variables) ──────────────
+import '@primer/primitives/dist/css/base/size/size.css'
+import '@primer/primitives/dist/css/base/typography/typography.css'
+import '@primer/primitives/dist/css/base/motion/motion.css'
+import '@primer/primitives/dist/css/functional/size/border.css'
+import '@primer/primitives/dist/css/functional/size/breakpoints.css'
+import '@primer/primitives/dist/css/functional/size/size-coarse.css'
+import '@primer/primitives/dist/css/functional/size/size-fine.css'
+import '@primer/primitives/dist/css/functional/size/size.css'
+import '@primer/primitives/dist/css/functional/size/viewport.css'
+import '@primer/primitives/dist/css/functional/typography/typography.css'
+import '@primer/primitives/dist/css/functional/themes/light.css'
+import '@primer/primitives/dist/css/functional/themes/light-colorblind.css'
+import '@primer/primitives/dist/css/functional/themes/dark.css'
+import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css'
+import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css'
+import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css'
+
+import styles from '../story/ComponentSetPage.module.css'
+
+// ── Error Boundary ──────────────────────────────────────────────────
+class IsolateErrorBoundary extends ReactComponent {
+  constructor(props) {
+    super(props)
+    this.state = { error: null }
+  }
+  static getDerivedStateFromError(error) {
+    return { error }
+  }
+  render() {
+    if (this.state.error) {
+      return createElement('div', { style: errorStyle },
+        createElement('strong', null, this.props.name || 'Component'),
+        createElement('br'),
+        String(this.state.error.message || this.state.error),
+      )
+    }
+    return this.props.children
+  }
+}
+
+const errorStyle = {
+  padding: '16px',
+  color: '#cf222e',
+  fontFamily: 'system-ui, -apple-system, sans-serif',
+  fontSize: '13px',
+  lineHeight: 1.5,
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-word',
+}
+
+// ── Resolve module path ─────────────────────────────────────────────
+function resolveModulePath(raw) {
+  if (!raw) return raw
+  if (/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(raw)) return raw
+  if (!raw.startsWith('/')) return raw
+  const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+  if (!base) return raw
+  if (raw.startsWith(base)) return raw
+  return `${base}${raw}`
+}
+
+// ── Component-Set Grid (mirrors ComponentSetPage UI) ────────────────
+function ComponentSetGrid({ exports, layout, initialSelected }) {
+  const [selected, setSelected] = useState(initialSelected)
+  const gridRef = useRef(null)
+
+  const handleSelect = useCallback((exportName) => {
+    const next = exportName === selected ? '' : exportName
+    setSelected(next)
+
+    // Update URL without navigation
+    const params = new URLSearchParams(window.location.search)
+    if (next) params.set('selected', next)
+    else params.delete('selected')
+    window.history.replaceState(null, '', `${window.location.pathname}?${params}`)
+
+    // Notify parent widget
+    if (window.parent !== window) {
+      window.parent.postMessage({
+        type: 'storyboard:component-set:select',
+        exportName: next || null,
+      }, '*')
+    }
+  }, [selected])
+
+  // Measure cells and post grid size to parent
+  useLayoutEffect(() => {
+    const grid = gridRef.current
+    if (!grid || !exports) return
+
+    const cells = grid.querySelectorAll('[data-cell-content]')
+    if (cells.length === 0) return
+
+    function measure() {
+      let maxW = 0
+      let maxH = 0
+      for (const el of cells) {
+        maxW = Math.max(maxW, el.scrollWidth)
+        maxH = Math.max(maxH, el.scrollHeight)
+      }
+      grid.style.setProperty('--cell-snap-w', `${maxW}px`)
+      grid.style.setProperty('--cell-snap-h', `${maxH}px`)
+
+      if (window.parent !== window) {
+        requestAnimationFrame(() => {
+          window.parent.postMessage({
+            type: 'storyboard:component-set:resize',
+            width: grid.scrollWidth,
+            height: grid.scrollHeight,
+          }, '*')
+        })
+      }
+    }
+
+    measure()
+    document.fonts.ready.then(() => requestAnimationFrame(measure))
+
+    const ro = new ResizeObserver(measure)
+    for (const el of cells) ro.observe(el)
+    return () => ro.disconnect()
+  }, [exports, layout])
+
+  // Signal snapshot-ready
+  useEffect(() => {
+    document.fonts.ready.then(() => {
+      requestAnimationFrame(() => requestAnimationFrame(() => {
+        window.__sbSnapshotReady?.()
+      }))
+    })
+  }, [exports])
+
+  const exportNames = Object.keys(exports)
+
+  // eslint-disable-next-line react-hooks/refs -- ref assigned to DOM element, not read during render
+  return createElement('div', {
+    ref: gridRef,
+    className: styles.grid,
+    'data-layout': layout,
+  },
+    exportNames.map((exportName) => {
+      const Component = exports[exportName]
+      const isSelected = exportName === selected
+      return createElement('div', {
+        key: exportName,
+        className: styles.cell,
+        'data-selected': isSelected || undefined,
+      },
+        createElement('button', {
+          className: styles.cellLabel,
+          onClick: () => handleSelect(exportName),
+          'data-selected': isSelected || undefined,
+          'aria-pressed': isSelected,
+        },
+          createElement('span', { className: styles.cellRadio, 'data-selected': isSelected || undefined }),
+          createElement('span', { className: styles.cellName }, exportName),
+        ),
+        createElement('div', { className: styles.cellContent, 'data-cell-content': '' },
+          createElement(IsolateErrorBoundary, { name: exportName },
+            createElement(Component),
+          ),
+        ),
+      )
+    }),
+  )
+}
+
+// ── Main ────────────────────────────────────────────────────────────
+const params = new URLSearchParams(window.location.search)
+const modulePath = params.get('module')
+const layout = params.get('layout') || 'horizontal'
+const selected = params.get('selected') || ''
+const theme = params.get('theme') || 'light'
+
+const colorMode = theme.startsWith('dark') ? 'night' : 'day'
+
+document.documentElement.setAttribute('data-color-mode', theme.startsWith('dark') ? 'dark' : 'light')
+document.documentElement.setAttribute('data-dark-theme', theme.startsWith('dark') ? theme : '')
+document.documentElement.setAttribute('data-light-theme', theme.startsWith('dark') ? '' : theme || 'light')
+
+// Suppress HMR full-reloads — this iframe is embedded inside a canvas page
+// that manages its own reload lifecycle. Without this guard, every file change
+// causes the iframe to flash/reload.
+if (import.meta.hot) {
+  const msg = { active: true }
+  import.meta.hot.send('storyboard:canvas-hmr-guard', msg)
+  setInterval(() => import.meta.hot.send('storyboard:canvas-hmr-guard', msg), 3000)
+}
+
+const root = createRoot(document.getElementById('root'))
+
+async function mount() {
+  if (!modulePath) {
+    root.render(createElement('div', { style: errorStyle }, 'Missing module param'))
+    return
+  }
+
+  if (!modulePath.match(/\.story\.(jsx|tsx)$/)) {
+    root.render(createElement('div', { style: errorStyle }, 'Invalid module path — only .story.jsx/.tsx files are allowed'))
+    return
+  }
+
+  try {
+    const resolved = resolveModulePath(modulePath)
+    const mod = await import(/* @vite-ignore */ resolved)
+
+    const namedExports = {}
+    for (const [key, value] of Object.entries(mod)) {
+      if (key !== 'default' && typeof value === 'function') {
+        namedExports[key] = value
+      }
+    }
+
+    if (Object.keys(namedExports).length === 0) {
+      throw new Error('No named exports found in story module')
+    }
+
+    root.render(
+      createElement(ThemeProvider, { colorMode },
+        createElement(BaseStyles, null,
+          createElement(ComponentSetGrid, { exports: namedExports, layout, initialSelected: selected }),
+        ),
+      ),
+    )
+  } catch (err) {
+    root.render(
+      createElement('div', { style: errorStyle },
+        createElement('strong', null, 'Component Set'),
+        createElement('br'),
+        String(err.message || err),
+      ),
+    )
+  }
+}
+
+mount()