@westopp/windo 0.1.0

package/src/client/App.tsx

@@ -0,0 +1,310 @@
+// Workbench shell — topbar, sidebar, canvas, inspector, tweaks. Owns all global
+// chrome state (persisted to localStorage), wires it to the iframe bridge, and
+// composes the three panes. Ports the markup/class names from the mock app.jsx;
+// the difference is that windo renders components in an IFRAME (driven through
+// the bridge) instead of in-document.
+
+import type { CSSProperties } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { WindoEnvState } from '../types'
+import { useWindoBridge } from './bridge'
+import { Canvas } from './Canvas'
+import { Inspector } from './Inspector'
+import { Icons } from './icons'
+import type { CanvasGridOpts, ChromeEnv, InspectorPosition, ThemeMode } from './internal-types'
+import { CANVAS_GRID_DEFAULTS } from './internal-types'
+import { loadJSON, loadString, saveJSON, saveString } from './persist'
+import { Sidebar } from './Sidebar'
+
+// The plugin injects this via `define` ('./__windo/iframe' in dev, where the
+// middleware serves it routelessly; './__windo/iframe.html' in a build, where
+// it's a real emitted document). Fall back to the dev path if it's absent.
+const IFRAME_SRC = typeof __WINDO_IFRAME_SRC__ === 'string' ? __WINDO_IFRAME_SRC__ : './__windo/iframe'
+
+const DEFAULT_ENV: ChromeEnv = {
+  colorScheme: 'light',
+  reducedMotion: false,
+  direction: 'ltr',
+  locale: 'en',
+  contexts: {},
+}
+
+function viewportName(width: number): 'mobile' | 'tablet' | 'desktop' {
+  return width < 640 ? 'mobile' : width < 1024 ? 'tablet' : 'desktop'
+}
+
+export function App() {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null)
+  const bridge = useWindoBridge(iframeRef)
+
+  const [theme, setTheme] = useState<ThemeMode>(() => loadString('windo:theme', 'light') as ThemeMode)
+  const [selected, setSelected] = useState<string | null>(() => loadJSON<string | null>('windo:selected', null))
+  const [query, setQuery] = useState('')
+  const [navCollapsed, setNavCollapsed] = useState(() => loadJSON<boolean>('windo:nav-collapsed', false))
+  const [inspCollapsed, setInspCollapsed] = useState(() => loadJSON<boolean>('windo:insp-collapsed', false))
+  const inspectorPosition: InspectorPosition = 'right'
+  const accent = '#161618'
+  const [width, setWidth] = useState(() => loadJSON<number>('windo:width', 900))
+  const [height, setHeight] = useState<number | null>(() => loadJSON<number | null>('windo:height', null))
+  const [zoom, setZoom] = useState(() => loadJSON<number>('windo:zoom', 1))
+  const [grid, setGridState] = useState<CanvasGridOpts>(() => loadJSON<CanvasGridOpts>('windo:grid', CANVAS_GRID_DEFAULTS))
+  const [env, setEnv] = useState<ChromeEnv>(() => ({ ...loadJSON<ChromeEnv>('windo:env', DEFAULT_ENV), colorScheme: loadString('windo:theme', 'light') as ThemeMode }))
+
+  const [draftById, setDraftById] = useState<Record<string, string>>({})
+  // Last JSON pushed to the preview, per id. `dirty` = draft differs from this.
+  // Every push (seed, save, reset, variant, reload re-sync) updates it, so the
+  // flag tracks "the preview is stale vs the editor" rather than flipping on
+  // each keystroke.
+  const [savedById, setSavedById] = useState<Record<string, string>>({})
+
+  // Mirror the current draft in a ref so the reload re-sync can re-apply edited
+  // props without re-firing on every keystroke.
+  const draftRef = useRef(draftById)
+  draftRef.current = draftById
+
+  // Single push path: send props to the preview and record them as the saved
+  // baseline for the dirty check.
+  const pushProps = useCallback(
+    (id: string, json: string) => {
+      bridge.setProps(id, json)
+      setSavedById(prev => (prev[id] === json ? prev : { ...prev, [id]: json }))
+    },
+    [bridge.setProps]
+  )
+
+  // ── persistence ─────────────────────────────────────────────────────────
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+    saveString('windo:theme', theme)
+  }, [theme])
+  useEffect(() => saveJSON('windo:selected', selected), [selected])
+  useEffect(() => saveJSON('windo:nav-collapsed', navCollapsed), [navCollapsed])
+  useEffect(() => saveJSON('windo:insp-collapsed', inspCollapsed), [inspCollapsed])
+  useEffect(() => saveJSON('windo:width', width), [width])
+  useEffect(() => saveJSON('windo:height', height), [height])
+  useEffect(() => saveJSON('windo:zoom', zoom), [zoom])
+  useEffect(() => saveJSON('windo:grid', grid), [grid])
+  useEffect(() => saveJSON('windo:env', env), [env])
+
+  // ── selection wiring ───────────────────────────────────────────────────
+  useEffect(() => {
+    if (bridge.manifest.length && selected === null) setSelected(bridge.manifest[0].id)
+  }, [bridge.manifest, selected])
+
+  // Send select on selection change AND whenever the iframe (re)signals ready —
+  // Vite reloads the preview iframe on dep-optimize and on every HMR update, so
+  // we must re-push the selection (and the edited props below) each time.
+  useEffect(() => {
+    if (!selected) return
+    bridge.select(selected)
+    const json = draftRef.current[selected]
+    if (json !== undefined) pushProps(selected, json)
+  }, [selected, bridge.select, pushProps, bridge.readyNonce])
+
+  // Seed the Controls draft from the describe defaults the first time it arrives.
+  useEffect(() => {
+    const d = bridge.describe
+    if (!d || d.id !== selected || !selected) return
+    if (draftById[selected] !== undefined) return
+    const json = JSON.stringify(d.defaults ?? {}, null, 2)
+    setDraftById(prev => ({ ...prev, [selected]: json }))
+    pushProps(selected, json)
+  }, [bridge.describe, selected, draftById, pushProps])
+
+  // ── env → preview ────────────────────────────────────────────────────────
+  useEffect(() => {
+    const next: WindoEnvState = {
+      colorScheme: theme,
+      viewport: { width, height: height ?? 0, name: viewportName(width) },
+      reducedMotion: env.reducedMotion,
+      direction: env.direction,
+      locale: env.locale,
+      contexts: env.contexts,
+    }
+    bridge.setEnv(next)
+  }, [env, width, height, theme, bridge.setEnv, bridge.readyNonce])
+
+  // ── draft commit / variant ─────────────────────────────────────────────
+  function setValuesJson(json: string) {
+    if (!selected) return
+    const id = selected
+    setDraftById(prev => ({ ...prev, [id]: json }))
+  }
+
+  function onSave() {
+    if (!selected) return
+    const json = draftById[selected]
+    if (json !== undefined) pushProps(selected, json)
+  }
+
+  function onReset() {
+    if (!selected || !bridge.describe) return
+    const json = JSON.stringify(bridge.describe.defaults ?? {}, null, 2)
+    const id = selected
+    setDraftById(prev => ({ ...prev, [id]: json }))
+    pushProps(id, json)
+  }
+
+  function onApplyVariant(patch: Record<string, unknown>) {
+    if (!selected) return
+    let base: Record<string, unknown> = {}
+    const draft = draftById[selected]
+    try {
+      const parsed = draft === undefined ? bridge.describe?.defaults : JSON.parse(draft)
+      if (parsed && typeof parsed === 'object') base = parsed as Record<string, unknown>
+    } catch {
+      const fallback = bridge.describe?.defaults
+      if (fallback && typeof fallback === 'object') base = fallback as Record<string, unknown>
+    }
+    const json = JSON.stringify({ ...base, ...patch }, null, 2)
+    const id = selected
+    setDraftById(prev => ({ ...prev, [id]: json }))
+    pushProps(id, json)
+  }
+
+  // ── env editing ─────────────────────────────────────────────────────────
+  function setEnvPatch(patch: Partial<ChromeEnv>) {
+    setEnv(prev => ({ ...prev, ...patch }))
+  }
+
+  function setContextValue(name: string, key: string, value: unknown) {
+    setEnv(prev => ({
+      ...prev,
+      contexts: {
+        ...prev.contexts,
+        [name]: { ...(prev.contexts[name] ?? {}), [key]: value },
+      },
+    }))
+  }
+
+  function setGrid(patch: Partial<CanvasGridOpts> | null) {
+    if (patch === null) {
+      setGridState(CANVAS_GRID_DEFAULTS)
+      return
+    }
+    setGridState(prev => ({ ...prev, ...patch }))
+  }
+
+  function toggleNav() {
+    setNavCollapsed(c => !c)
+  }
+  function toggleInsp() {
+    setInspCollapsed(c => !c)
+  }
+
+  // ── derived ─────────────────────────────────────────────────────────────
+  const entry = useMemo(() => bridge.manifest.find(e => e.id === selected) ?? null, [bridge.manifest, selected])
+  const clickActions = useMemo(() => (entry?.actions ?? []).filter(a => a.on === 'click'), [entry])
+  const actionDisabled = selected ? (bridge.actionDisabled[selected] ?? {}) : {}
+  const stateForEntry = selected ? (bridge.stateValues[selected] ?? {}) : {}
+
+  function onAction(actionId: string) {
+    if (!selected) return
+    bridge.invokeAction(selected, actionId)
+  }
+
+  const contextsForEntry = useMemo(() => {
+    const uses = entry?.uses ?? []
+    return bridge.contexts.filter(c => c.ambient || uses.includes(c.name))
+  }, [bridge.contexts, entry])
+
+  const valuesJson = (selected ? draftById[selected] : undefined) ?? ''
+  const savedJson = (selected ? savedById[selected] : undefined) ?? ''
+  const dirty = valuesJson !== savedJson
+
+  // ── accent variables (mirror app.jsx) ────────────────────────────────────
+  const accentUi = theme === 'dark' ? `color-mix(in oklab, ${accent} 35%, white)` : accent
+  const accentVars = {
+    '--accent': accent,
+    '--accent-ui': accentUi,
+    '--accent-soft': `color-mix(in srgb, ${accentUi}${theme === 'dark' ? ' 14%' : ' 8%'}, transparent)`,
+  } as CSSProperties
+
+  const title = bridge.title || 'windo'
+  const inspectorRight = inspectorPosition === 'right'
+
+  const canvasNode = (
+    <Canvas
+      iframeRef={iframeRef}
+      iframeSrc={IFRAME_SRC}
+      theme={theme}
+      width={width}
+      setWidth={setWidth}
+      height={height}
+      setHeight={setHeight}
+      zoom={zoom}
+      setZoom={setZoom}
+      grid={grid}
+      setGrid={setGrid}
+      actions={clickActions}
+      actionDisabled={actionDisabled}
+      onAction={onAction}
+    />
+  )
+
+  const inspectorNode = (
+    <Inspector
+      entry={entry}
+      describe={bridge.describe}
+      iframeSrc={IFRAME_SRC}
+      valuesJson={valuesJson}
+      setValuesJson={setValuesJson}
+      dirty={dirty}
+      onSave={onSave}
+      onReset={onReset}
+      parseErrors={bridge.parseErrors}
+      renderError={bridge.renderError}
+      logs={bridge.logs}
+      clearLogs={bridge.clearLogs}
+      state={stateForEntry}
+      contexts={contextsForEntry}
+      env={env}
+      setEnv={setEnvPatch}
+      setContextValue={setContextValue}
+      onApplyVariant={onApplyVariant}
+      position={inspectorPosition}
+      collapsed={inspCollapsed}
+      onToggle={toggleInsp}
+    />
+  )
+
+  return (
+    <div className="wb-app" style={accentVars} data-screen-label="Workbench">
+      <header className="wb-topbar">
+        <span className="wb-logo">
+          <span className="wb-logo-mark">{title.charAt(0).toUpperCase()}</span>
+          {title}
+          <span className="wb-logo-sub">/ Workbench</span>
+        </span>
+        {entry && (
+          <span className="wb-crumb">
+            <span>{entry.group}</span>
+            <span className="sep">›</span>
+            <b>{entry.title}</b>
+          </span>
+        )}
+        <div className="wb-topbar-spacer" />
+        <button className="wb-iconbtn" type="button" title={theme === 'light' ? 'Switch to dark' : 'Switch to light'} onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+          {theme === 'light' ? Icons.moon : Icons.sun}
+        </button>
+      </header>
+
+      <div className="wb-main">
+        <Sidebar groups={bridge.groups} manifest={bridge.manifest} selected={selected} onSelect={setSelected} query={query} setQuery={setQuery} collapsed={navCollapsed} onToggle={toggleNav} />
+        <div className="wb-center">
+          {inspectorRight ? (
+            <div className="wb-center-row">
+              {canvasNode}
+              {inspectorNode}
+            </div>
+          ) : (
+            <>
+              {canvasNode}
+              {inspectorNode}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/Canvas.tsx

@@ -0,0 +1,358 @@
+// Canvas — resizable surface (width + height), zoom, grid/background settings,
+// and the selected windo's `click` actions (out-of-band triggers for toasts,
+// modals, loading states). The render surface is a transparent <iframe>; the
+// cosmetic grid + background are painted on the wrapper behind it so they show
+// through.
+
+import type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import type { WindoActionMeta } from '../types'
+import { Icons } from './icons'
+import type { CanvasGridOpts, CanvasProps, ThemeMode } from './internal-types'
+
+const PRESETS = [
+  { id: 'mobile', label: 'Mobile', width: 375 },
+  { id: 'tablet', label: 'Tablet', width: 768 },
+  { id: 'desktop', label: 'Desktop', width: 1160 },
+]
+
+const MIN_WIDTH = 320
+const MIN_HEIGHT = 280
+const MAX_HEIGHT = 2400
+
+function breakpointFor(w: number) {
+  if (w < 640) return 'mobile'
+  if (w < 1024) return 'tablet'
+  return 'desktop'
+}
+
+/* ---------- Canvas appearance settings ---------- */
+
+function ColorField({ value, onPick, label }: { value: string; onPick: (c: string) => void; label: string }) {
+  return (
+    <label className="wb-colorinput" title="Pick a color">
+      <span className="well" style={{ background: value }} />
+      <span className="hex">{value}</span>
+      <input type="color" value={value} aria-label={label} onChange={e => onPick(e.target.value)} />
+    </label>
+  )
+}
+
+function CanvasSettings({ grid, setGrid, theme, onClose }: { grid: CanvasGridOpts; setGrid: CanvasProps['setGrid']; theme: ThemeMode; onClose: () => void }) {
+  useEffect(() => {
+    function onEsc(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onEsc)
+    return () => window.removeEventListener('keydown', onEsc)
+  }, [onClose])
+
+  function modeRows(mode: ThemeMode) {
+    return (
+      <>
+        <div className="wb-pop-sect">
+          {mode} mode{theme === mode && <span className="live">· active</span>}
+        </div>
+        <div className="wb-pop-row">
+          <span className="lbl">Background</span>
+          <ColorField label={`${mode} background color`} value={grid[mode].bg} onPick={c => setGrid({ [mode]: { ...grid[mode], bg: c } })} />
+        </div>
+        <div className="wb-pop-row">
+          <span className="lbl">Grid color</span>
+          <ColorField label={`${mode} grid color`} value={grid[mode].dot} onPick={c => setGrid({ [mode]: { ...grid[mode], dot: c } })} />
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: click-away backdrop, not a keyboard control */}
+      {/* biome-ignore lint/a11y/useKeyWithClickEvents: click-away backdrop, not a keyboard control */}
+      <div className="wb-pop-overlay" onClick={onClose} />
+      <div className="wb-pop" role="dialog" aria-label="Canvas settings">
+        <div className="wb-pop-title">Canvas settings</div>
+        <div className="wb-pop-row">
+          <span className="lbl">Grid style</span>
+          <div className="wb-seg" style={{ flex: '0 0 auto' }}>
+            {(['dots', 'lines'] as const).map(s => (
+              <button type="button" key={s} className={grid.style === s && grid.on ? 'on' : ''} onClick={() => setGrid({ style: s, on: true })}>
+                {s}
+              </button>
+            ))}
+            <button type="button" className={grid.on ? '' : 'on'} onClick={() => setGrid({ on: false })}>
+              off
+            </button>
+          </div>
+        </div>
+        <div className="wb-pop-row">
+          <span className="lbl">Density</span>
+          <input type="range" min="12" max="44" step="2" value={grid.dotSize} onChange={e => setGrid({ dotSize: parseInt(e.target.value, 10) })} />
+          <span className="val">{grid.dotSize}px</span>
+        </div>
+        <div className="wb-pop-row">
+          <span className="lbl">Opacity</span>
+          <input type="range" min="10" max="100" step="5" value={grid.gridOpacity} onChange={e => setGrid({ gridOpacity: parseInt(e.target.value, 10) })} />
+          <span className="val">{grid.gridOpacity}%</span>
+        </div>
+        {modeRows('light')}
+        {modeRows('dark')}
+        <div className="wb-pop-reset">
+          <button type="button" className="wb-reset" onClick={() => setGrid(null)}>
+            Reset canvas
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+/* ---------- Resize handles ---------- */
+
+function ResizeHandle({
+  side,
+  width,
+  setWidth,
+  maxWidth,
+  zoom,
+  onReset,
+}: {
+  side: 'left' | 'right'
+  width: number
+  setWidth: (w: number) => void
+  maxWidth: number
+  zoom: number
+  onReset: () => void
+}) {
+  const [dragging, setDragging] = useState(false)
+
+  function onPointerDown(e: ReactPointerEvent<HTMLDivElement>) {
+    e.preventDefault()
+    const el = e.currentTarget
+    const pointerId = e.pointerId
+    el.setPointerCapture(pointerId)
+    setDragging(true)
+    const startX = e.clientX
+    const startW = width
+
+    function onMove(ev: PointerEvent) {
+      const delta = (ev.clientX - startX) / zoom
+      const signed = side === 'right' ? delta : -delta
+      const next = Math.max(MIN_WIDTH, Math.min(maxWidth, startW + signed * 2))
+      setWidth(next)
+    }
+    function onUp() {
+      try {
+        el.releasePointerCapture(pointerId)
+      } catch {
+        /* already released */
+      }
+      setDragging(false)
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+    }
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }
+
+  // biome-ignore lint/a11y/noStaticElementInteractions: drag handle is pointer-only by design
+  return <div className={`wb-handle${dragging ? ' dragging' : ''}`} title="Drag to resize width — double-click to fill" onDoubleClick={onReset} onPointerDown={onPointerDown} />
+}
+
+function HeightHandle({ height, setHeight, zoom, onReset }: { height: number; setHeight: (h: number) => void; zoom: number; onReset: () => void }) {
+  const [dragging, setDragging] = useState(false)
+
+  function onPointerDown(e: ReactPointerEvent<HTMLDivElement>) {
+    e.preventDefault()
+    const el = e.currentTarget
+    const pointerId = e.pointerId
+    el.setPointerCapture(pointerId)
+    setDragging(true)
+    const startY = e.clientY
+    const startH = height
+
+    function onMove(ev: PointerEvent) {
+      const delta = (ev.clientY - startY) / zoom
+      setHeight(Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, startH + delta)))
+    }
+    function onUp() {
+      try {
+        el.releasePointerCapture(pointerId)
+      } catch {
+        /* already released */
+      }
+      setDragging(false)
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+    }
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }
+
+  // biome-ignore lint/a11y/noStaticElementInteractions: drag handle is pointer-only by design
+  return <div className={`wb-handle-h${dragging ? ' dragging' : ''}`} title="Drag to resize height — double-click to fit" onDoubleClick={onReset} onPointerDown={onPointerDown} />
+}
+
+/* ---------- Toolbar ---------- */
+
+function CanvasToolbar({
+  width,
+  setWidth,
+  maxWidth,
+  zoom,
+  setZoom,
+  grid,
+  setGrid,
+  theme,
+  settingsOpen,
+  setSettingsOpen,
+  actions,
+  actionDisabled,
+  onAction,
+}: {
+  width: number
+  setWidth: (w: number) => void
+  maxWidth: number
+  zoom: number
+  setZoom: (z: number) => void
+  grid: CanvasGridOpts
+  setGrid: CanvasProps['setGrid']
+  theme: ThemeMode
+  settingsOpen: boolean
+  setSettingsOpen: (open: boolean) => void
+  actions: WindoActionMeta[]
+  actionDisabled: Record<string, boolean>
+  onAction: (actionId: string) => void
+}) {
+  return (
+    <div className="wb-toolbar">
+      {/* biome-ignore lint/a11y/useSemanticElements: toolbar grouping div; semantic element not warranted here */}
+      <div className="wb-seg" role="group" aria-label="Width presets">
+        {PRESETS.map(p => (
+          <button type="button" key={p.id} className={Math.abs(width - p.width) < 2 ? 'on' : ''} onClick={() => setWidth(Math.min(p.width, maxWidth))}>
+            {p.label}
+          </button>
+        ))}
+        <button type="button" className={width >= maxWidth - 2 ? 'on' : ''} onClick={() => setWidth(maxWidth)}>
+          Fill
+        </button>
+      </div>
+      {actions.map(a => (
+        <button type="button" key={a.id} className="wb-action" disabled={actionDisabled[a.id] ?? false} onClick={() => onAction(a.id)}>
+          {a.label}
+        </button>
+      ))}
+      <div className="gap" />
+      <button type="button" className={`wb-iconbtn${grid.on ? ' active' : ''}`} title={grid.on ? 'Hide grid' : 'Show grid'} onClick={() => setGrid({ on: !grid.on })}>
+        {Icons.grid}
+      </button>
+      <div className="wb-zoom">
+        <button type="button" className="wb-iconbtn" title="Zoom out" onClick={() => setZoom(Math.max(0.5, Math.round((zoom - 0.1) * 10) / 10))}>
+          {Icons.zoomOut}
+        </button>
+        {/* biome-ignore lint/a11y/noStaticElementInteractions: pointer-only zoom-reset affordance */}
+        {/* biome-ignore lint/a11y/useKeyWithClickEvents: pointer-only zoom-reset affordance */}
+        <span className="pct" title="Reset zoom" onClick={() => setZoom(1)}>
+          {Math.round(zoom * 100)}%
+        </span>
+        <button type="button" className="wb-iconbtn" title="Zoom in" onClick={() => setZoom(Math.min(1.5, Math.round((zoom + 0.1) * 10) / 10))}>
+          {Icons.zoomIn}
+        </button>
+      </div>
+      <button type="button" className={`wb-iconbtn${settingsOpen ? ' active' : ''}`} title="Canvas settings" onClick={() => setSettingsOpen(!settingsOpen)}>
+        {Icons.settings}
+      </button>
+      {settingsOpen && <CanvasSettings grid={grid} setGrid={setGrid} theme={theme} onClose={() => setSettingsOpen(false)} />}
+    </div>
+  )
+}
+
+/* ---------- Canvas ---------- */
+
+export function Canvas(props: CanvasProps) {
+  const { iframeRef, iframeSrc, theme, width, setWidth, height, setHeight, zoom, setZoom, grid, setGrid, actions, actionDisabled, onAction } = props
+
+  const stageRef = useRef<HTMLDivElement>(null)
+  const [maxWidth, setMaxWidth] = useState(1160)
+  const [availH, setAvailH] = useState(620)
+  const [settingsOpen, setSettingsOpen] = useState(false)
+
+  useEffect(() => {
+    const stage = stageRef.current
+    if (!stage) return
+    function measure() {
+      if (!stage) return
+      setMaxWidth(Math.max(360, stage.clientWidth - 92))
+      setAvailH(Math.max(320, stage.clientHeight - 76))
+    }
+    measure()
+    const ro = new ResizeObserver(measure)
+    ro.observe(stage)
+    return () => ro.disconnect()
+  }, [])
+
+  const clamped = Math.min(width, maxWidth)
+  const frameH = height ? Math.max(MIN_HEIGHT, height) : availH
+  const mode = theme === 'dark' ? grid.dark : grid.light
+  const bp = breakpointFor(clamped)
+
+  const gridClass = grid.on ? (grid.style === 'lines' ? ' grid-lines' : ' grid-dots') : ''
+
+  const frameStyle = {
+    width: clamped,
+    height: frameH,
+    '--cv-bg': mode.bg,
+    '--cv-dot': `color-mix(in srgb, ${mode.dot} ${grid.gridOpacity}%, transparent)`,
+    '--dot-size': `${grid.dotSize}px`,
+  } as CSSProperties
+
+  return (
+    <div className="wb-canvas-col">
+      <CanvasToolbar
+        width={clamped}
+        setWidth={setWidth}
+        maxWidth={maxWidth}
+        zoom={zoom}
+        setZoom={setZoom}
+        grid={grid}
+        setGrid={setGrid}
+        theme={theme}
+        settingsOpen={settingsOpen}
+        setSettingsOpen={setSettingsOpen}
+        actions={actions}
+        actionDisabled={actionDisabled}
+        onAction={onAction}
+      />
+      <div className="wb-stage" ref={stageRef}>
+        <div className="wb-zoomwrap" style={{ transform: `scale(${zoom})` }}>
+          <div className="wb-frame-col">
+            <div className="wb-frame-row">
+              <ResizeHandle side="left" width={clamped} setWidth={setWidth} maxWidth={maxWidth} zoom={zoom} onReset={() => setWidth(maxWidth)} />
+              <div className="wb-framewrap">
+                <span className="wb-corner tl" />
+                <span className="wb-corner tr" />
+                <span className="wb-corner bl" />
+                <span className="wb-corner br" />
+                <div className={`wb-frame${gridClass}`} style={frameStyle}>
+                  <div className="wb-frame-inner">
+                    <iframe
+                      ref={iframeRef}
+                      src={iframeSrc}
+                      title="windo preview"
+                      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', background: 'transparent', border: 0, display: 'block' }}
+                    />
+                  </div>
+                </div>
+              </div>
+              <ResizeHandle side="right" width={clamped} setWidth={setWidth} maxWidth={maxWidth} zoom={zoom} onReset={() => setWidth(maxWidth)} />
+            </div>
+            <HeightHandle height={frameH} setHeight={setHeight} zoom={zoom} onReset={() => setHeight(null)} />
+            <div className="wb-dim-readout">
+              {Math.round(clamped)} × {Math.round(frameH)} px · <span className="bp">{bp}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}