@dfosco/storyboard 0.8.1 → 0.9.0

package/src/internals/canvas/WebGLContextPool.jsx

@@ -1,291 +0,0 @@
-import { createContext, useContext, useCallback, useEffect, useMemo, useSyncExternalStore } from 'react'
-
-/**
- * WebGL Context Pool — manages live WebGL slots for terminal widgets.
- *
- * Browsers cap WebGL contexts at ~8-16. This pool ensures only a subset
- * of terminal widgets hold live ghostty-web renderers at any time.
- * Offscreen terminals release their context and show a frozen snapshot.
- *
- * Architecture:
- * - Lease-based: widgets register and receive live/frozen status
- * - Priority: PINNED > VISIBLE > NEAR_VIEWPORT > OFFSCREEN
- * - Hysteresis: 3s grace before evicting recently-visible terminals
- * - Generation tokens prevent stale async opens after eviction
- */
-
-// Priority levels (higher = more important to keep live)
-export const Priority = {
-  OFFSCREEN: 0,
-  NEAR_VIEWPORT: 1,
-  VISIBLE: 2,
-  PINNED: 3, // expanded, focused, or actively interacting
-}
-
-const DEFAULT_MAX_LIVE = 6
-const HYSTERESIS_MS = 3000
-
-// ── Pool Engine (framework-agnostic) ─────────────────────────────────
-
-class ContextPool {
-  constructor(maxLive = DEFAULT_MAX_LIVE) {
-    this._maxLive = maxLive
-    /** @type {Map<string, { priority: number, generation: number, live: boolean, lastVisible: number }>} */
-    this._slots = new Map()
-    this._listeners = new Set()
-    this._hysteresisTimers = new Map()
-    // Monotonic version counter — bumped on every state change so
-    // useSyncExternalStore detects updates via a new snapshot value.
-    this._version = 0
-  }
-
-  /** Subscribe to pool state changes. Returns unsubscribe fn. */
-  subscribe(listener) {
-    this._listeners.add(listener)
-    return () => this._listeners.delete(listener)
-  }
-
-  _notify() {
-    this._version++
-    for (const fn of this._listeners) fn()
-  }
-
-  /** Register a widget. Returns its initial generation. */
-  register(widgetId, initialPriority = Priority.OFFSCREEN) {
-    if (this._slots.has(widgetId)) return this._slots.get(widgetId).generation
-    this._slots.set(widgetId, {
-      priority: initialPriority,
-      generation: 0,
-      live: false,
-      lastVisible: initialPriority >= Priority.VISIBLE ? Date.now() : 0,
-    })
-    this._recompute()
-    return 0
-  }
-
-  /** Unregister a widget (on unmount). */
-  unregister(widgetId) {
-    this._slots.delete(widgetId)
-    const timer = this._hysteresisTimers.get(widgetId)
-    if (timer) { clearTimeout(timer); this._hysteresisTimers.delete(widgetId) }
-    this._recompute()
-  }
-
-  /** Update a widget's priority. Triggers recomputation. */
-  setPriority(widgetId, priority) {
-    const slot = this._slots.get(widgetId)
-    if (!slot) return
-    const prev = slot.priority
-    slot.priority = priority
-
-    // Track when widget was last visible/pinned for hysteresis
-    if (priority >= Priority.VISIBLE) {
-      slot.lastVisible = Date.now()
-    }
-
-    // Immediate recompute when priority increases or widget is pinned
-    if (priority > prev || priority === Priority.PINNED) {
-      this._recompute()
-      return
-    }
-
-    // When priority drops (e.g. scrolled offscreen), use hysteresis
-    if (priority < prev && prev >= Priority.VISIBLE) {
-      const existing = this._hysteresisTimers.get(widgetId)
-      if (existing) clearTimeout(existing)
-      this._hysteresisTimers.set(widgetId, setTimeout(() => {
-        this._hysteresisTimers.delete(widgetId)
-        this._recompute()
-      }, HYSTERESIS_MS))
-      return
-    }
-
-    this._recompute()
-  }
-
-  /** Get current state for a widget. */
-  getSlot(widgetId) {
-    return this._slots.get(widgetId) || null
-  }
-
-  /**
-   * Recompute which widgets should be live.
-   * Sorts by priority (desc), then by lastVisible (desc).
-   * Top N get live status; rest are frozen.
-   */
-  _recompute() {
-    const entries = [...this._slots.entries()]
-
-    // Sort: pinned first, then by priority desc, then by recency
-    entries.sort(([, a], [, b]) => {
-      if (a.priority !== b.priority) return b.priority - a.priority
-      return b.lastVisible - a.lastVisible
-    })
-
-    let liveCount = 0
-    const changes = []
-
-    for (const [id, slot] of entries) {
-      // Pinned terminals always get a slot (they bypass the cap)
-      const shouldBeLive = slot.priority === Priority.PINNED || liveCount < this._maxLive
-      if (shouldBeLive) liveCount++
-
-      if (slot.live !== shouldBeLive) {
-        changes.push({ id, slot, shouldBeLive })
-      }
-    }
-
-    if (changes.length === 0) return
-
-    for (const { slot, shouldBeLive } of changes) {
-      slot.live = shouldBeLive
-      if (!shouldBeLive) {
-        // Bump generation so stale async opens abort
-        slot.generation++
-      }
-    }
-
-    this._notify()
-  }
-}
-
-// ── React Context ────────────────────────────────────────────────────
-
-const WebGLPoolContext = createContext(null)
-
-/**
- * Provider that creates and owns the context pool.
- * Place this around the canvas widget tree in CanvasPage.
- *
- * @param {{ maxLive?: number, children: React.ReactNode }} props
- */
-export function WebGLContextPoolProvider({ maxLive = DEFAULT_MAX_LIVE, children }) {
-  // useMemo is correct here: the pool is a stable singleton for this provider's lifetime.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const pool = useMemo(() => new ContextPool(maxLive), [])
-  return (
-    <WebGLPoolContext.Provider value={pool}>
-      {children}
-    </WebGLPoolContext.Provider>
-  )
-}
-
-/**
- * Hook that manages a terminal widget's WebGL slot lifecycle.
- *
- * Returns:
- * - `isLive`: whether this widget should create a live ghostty terminal
- * - `generation`: counter that increments on each live→frozen transition;
- *   use as an effect dep to detect when to re-create the terminal
- * - `setPriority(p)`: update this widget's priority
- *
- * @param {string} widgetId
- * @returns {{ isLive: boolean, generation: number, setPriority: (p: number) => void }}
- */
-export function useWebGLSlot(widgetId, initialPriority) {
-  const pool = useContext(WebGLPoolContext)
-
-  // Register on mount, unregister on unmount
-  useEffect(() => {
-    if (!pool) return
-    pool.register(widgetId, initialPriority)
-    return () => pool.unregister(widgetId)
-  }, [pool, widgetId]) // initialPriority intentionally excluded — only used on first register
-
-  // Subscribe to pool state for reactivity.
-  // getSnapshot returns the pool's version counter — a primitive that changes
-  // on every state mutation, satisfying useSyncExternalStore's identity check.
-  const subscribe = useCallback(
-    (cb) => pool ? pool.subscribe(cb) : () => {},
-    [pool],
-  )
-  const getSnapshot = useCallback(() => {
-    if (!pool) return -1
-    return pool._version
-  }, [pool])
-
-  // This triggers re-render whenever the pool version changes
-  useSyncExternalStore(subscribe, getSnapshot)
-
-  // Read the actual slot state (after subscription ensures freshness)
-  const slot = pool?.getSlot(widgetId)
-
-  const setPriority = useCallback(
-    (p) => pool?.setPriority(widgetId, p),
-    [pool, widgetId],
-  )
-
-  // Gating disabled — every widget is always live. The pool still tracks
-  // priority/registration for any future consumer (and so setPriority calls
-  // remain valid), but isLive ignores the cap and viewport demotion entirely.
-  void slot
-  return {
-    isLive: true,
-    generation: 0,
-    setPriority,
-  }
-}
-
-/**
- * Hook for CanvasPage to batch-update visibility for all terminal widgets.
- * Call this with the current viewport rect and widget positions.
- *
- * @returns {(viewportRect: {x:number,y:number,w:number,h:number}, widgets: Array<{id:string,type:string,position:{x:number,y:number},props?:object}>, selectedIds: Set<string>, expandedId: string|null) => void}
- */
-export function usePoolVisibilityUpdater() {
-  const pool = useContext(WebGLPoolContext)
-
-  return useCallback((viewportRect, widgets, selectedIds, expandedId) => {
-    if (!pool) return
-
-    const NEAR_MARGIN = 400 // canvas-space pixels for "near viewport" zone
-
-    const terminalTypes = new Set(['terminal', 'agent', 'prompt'])
-
-    for (const w of widgets) {
-      if (!terminalTypes.has(w.type)) continue
-
-      // Determine priority
-      if (w.id === expandedId) {
-        pool.setPriority(w.id, Priority.PINNED)
-        continue
-      }
-
-      if (selectedIds?.has(w.id)) {
-        pool.setPriority(w.id, Priority.PINNED)
-        continue
-      }
-
-      const wx = w.position?.x ?? 0
-      const wy = w.position?.y ?? 0
-      const ww = w.props?.width ?? 800
-      const wh = w.props?.height ?? 450
-
-      // Check overlap with viewport
-      const visible = rectsOverlap(
-        viewportRect.x, viewportRect.y, viewportRect.w, viewportRect.h,
-        wx, wy, ww, wh,
-      )
-
-      if (visible) {
-        pool.setPriority(w.id, Priority.VISIBLE)
-        continue
-      }
-
-      // Check overlap with expanded viewport (near margin)
-      const near = rectsOverlap(
-        viewportRect.x - NEAR_MARGIN,
-        viewportRect.y - NEAR_MARGIN,
-        viewportRect.w + NEAR_MARGIN * 2,
-        viewportRect.h + NEAR_MARGIN * 2,
-        wx, wy, ww, wh,
-      )
-
-      pool.setPriority(w.id, near ? Priority.NEAR_VIEWPORT : Priority.OFFSCREEN)
-    }
-  }, [pool])
-}
-
-function rectsOverlap(ax, ay, aw, ah, bx, by, bw, bh) {
-  return ax < bx + bw && ax + aw > bx && ay < by + bh && ay + ah > by
-}

package/src/internals/canvas/WebGLContextPool.test.jsx

@@ -1,165 +0,0 @@
-import { describe, it, expect } 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 slot3
-    render(
-      <WebGLContextPoolProvider maxLive={2}>
-        <TestWidget widgetId="t1" onSlot={() => {}} />
-        <TestWidget widgetId="t2" onSlot={() => {}} />
-        <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 slot3
-    render(
-      <WebGLContextPoolProvider maxLive={2}>
-        <TestWidget widgetId="t1" onSlot={() => {}} />
-        <TestWidget widgetId="t2" onSlot={() => {}} />
-        <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 slot2, updater
-    render(
-      <WebGLContextPoolProvider maxLive={1}>
-        <TestWidget widgetId="t1" onSlot={() => {}} />
-        <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/internals/canvas/widgets/ComponentSetWidget.module.css

@@ -1,89 +0,0 @@
-/* ComponentSetWidget — canvas widget chrome */
-
-.container {
-  position: relative;
-  overflow: hidden;
-  min-width: 200px;
-  min-height: 120px;
-  background: var(--bgColor-default, #ffffff);
-  border: 3px solid var(--borderColor-default, #d0d7de);
-  border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  width: 100%;
-  height: 100%;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 10px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--fgColor-muted, #656d76);
-  background: var(--bgColor-muted, #f6f8fa);
-  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  user-select: none;
-}
-
-.headerIcon {
-  display: inline-flex;
-  flex-shrink: 0;
-}
-
-.headerTitle {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.headerSelected {
-  color: var(--fgColor-accent, #0969da);
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.headerLayout {
-  margin-left: auto;
-  font-size: 14px;
-  opacity: 0.5;
-  flex-shrink: 0;
-}
-
-.content {
-  position: relative;
-  width: 100%;
-  height: calc(100% - 37px);
-}
-
-.iframe {
-  position: absolute;
-  inset: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: none;
-  z-index: 1;
-}
-
-.error {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 16px;
-  color: var(--fgColor-danger, #cf222e);
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.errorIcon {
-  font-size: 20px;
-  flex-shrink: 0;
-}
-
-.errorText {
-  word-break: break-word;
-}

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

@@ -1,89 +0,0 @@
-/* StorySetWidget — canvas widget chrome */
-
-.container {
-  position: relative;
-  overflow: hidden;
-  min-width: 200px;
-  min-height: 120px;
-  background: var(--bgColor-default, #ffffff);
-  border: 3px solid var(--borderColor-default, #d0d7de);
-  border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  width: 100%;
-  height: 100%;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 10px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--fgColor-muted, #656d76);
-  background: var(--bgColor-muted, #f6f8fa);
-  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  user-select: none;
-}
-
-.headerIcon {
-  display: inline-flex;
-  flex-shrink: 0;
-}
-
-.headerTitle {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.headerSelected {
-  color: var(--fgColor-accent, #0969da);
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.headerLayout {
-  margin-left: auto;
-  font-size: 14px;
-  opacity: 0.5;
-  flex-shrink: 0;
-}
-
-.content {
-  position: relative;
-  width: 100%;
-  height: calc(100% - 37px);
-}
-
-.iframe {
-  position: absolute;
-  inset: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: none;
-  z-index: 1;
-}
-
-.error {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 16px;
-  color: var(--fgColor-danger, #cf222e);
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.errorIcon {
-  font-size: 20px;
-  flex-shrink: 0;
-}
-
-.errorText {
-  word-break: break-word;
-}