@marver-design/marver 0.14.0 → 0.16.0

package/src/client/content/video.tsx

@@ -1,31 +1,85 @@
 /**
- * Video (v1.5) - poster-first, glass-controlled.
+ * Video - poster-first, glass-controlled, in EVERY kind of frame.
  *
  * At rest there is NO <video> element and no media fetch: the poster <img>
- * plus a play glyph IS the slide (lean-DOM safe - a <video> element would
- * pin the frame live). In slides mode (useSlidePlay) the real element
- * mounts with the glass control strip: play/pause, seekable progress, mute,
- * fullscreen, auto-hiding. Leaving the slide (play flips off / unmount)
- * pauses everything.
+ * plus a play glyph IS the frame (lean-DOM safe - a <video> element would
+ * pin the frame live). The real element mounts with the glass control strip
+ * (play/pause, seekable progress, mute, fullscreen, auto-hiding) in two ways:
+ *   - anywhere a frame is live (interact mode, play/present, focus, a
+ *     published prototype): the poster is the play button - one click mounts
+ *     the player and starts it, inside that gesture, so sound is allowed;
+ *   - in slides mode (useSlidePlay): the player mounts on its own, the deck's
+ *     entrance contract.
+ * `autoplay` is the third shape - an ambient loop (muted, no strip) for a hero
+ * or a product mockup; it mounts the element as soon as the frame is live,
+ * which keeps that frame live on the canvas (the serializer marks <video>
+ * degraded) - an explicit, per-video choice.
+ * Leaving (play flips off / unmount) pauses everything.
  *
- * Sources: a design-asset path (poster REQUIRED - it is the canvas
- * rendering) or a public https direct-file URL (mp4/webm; HLS where the
- * browser supports it natively).
+ * Sources: a design-asset path or a public https direct-file URL (mp4/webm;
+ * HLS where the browser supports it natively). The poster is the frame at
+ * rest: authored, or - omitted on a local clip - the generated
+ * `<clip>.poster.png` beside it (server/poster.ts renders it; the primitive
+ * asks the dev server once when the file is missing). `ratio` is the CSS aspect-ratio of the box
+ * (default 16 / 9; "9 / 16" for a vertical clip inside a phone screen).
  */
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, useSyncExternalStore, type CSSProperties } from 'react'
+import { ROUTE } from '../const.ts'
 import { assetUrl } from './md.ts'
 import { useSlidePlay } from './slide.tsx'
 
 const isRemote = (s: string) => /^https:\/\//.test(s)
 const resolve = (s: string): string | null => (isRemote(s) ? s : assetUrl(s))
+/** The generated poster's conventional name (server/poster.ts owns the rule). */
+const posterNameFor = (src: string) => `${src}.poster.png`
+
+// One generation request per clip per document: the dev server renders the poster from
+// the clip's own first moments (server/poster.ts) and the <img> reloads. A published canvas
+// has no such API (build already generated the file); a failed request just keeps the card.
+const requested = new Map<string, Promise<boolean>>()
+const csrf = () => /(?:^|;\s*)mv_c=([\w-]+)/.exec(document.cookie)?.[1] ?? ''
+// in-flight probes + generations, for the shot renderer's settle (like __mvLodBusy): a
+// screenshot taken while a poster is still being rendered would show the empty box
+let busy = 0
+if (typeof window !== 'undefined') (window as { __mvPosterBusy?: () => number }).__mvPosterBusy = () => busy
+const requestPoster = (src: string): Promise<boolean> => {
+  let p = requested.get(src)
+  if (!p) {
+    p = (async () => {
+      // the owner gate wants the double-submit cookie echoed; a frame host opened cold has not
+      // made an API GET yet, so prime it with the cheapest one first
+      if (!csrf()) await fetch(`${ROUTE}/api/policy`).catch(() => null)
+      const r = await fetch(`${ROUTE}/api/poster?src=${encodeURIComponent(src)}`, { headers: { 'x-mv-c': csrf() } }).catch(() => null)
+      return !!r?.ok
+    })()
+    requested.set(src, p)
+    // a failure is not forever: the next mount (a fix, Chrome installed) may ask again
+    void p.then((ok) => { if (!ok) requested.delete(src) })
+  }
+  return p
+}
+
+/** Is the human in the canvas's interact mode on this frame? The bridge mirrors sh:interactive
+ *  on the document. Absent everywhere else (play, focus, published) - only the true->false
+ *  transition matters: it disarms a playing clip when the mode is left. */
+const subscribeInteractive = (cb: () => void) => {
+  if (typeof document === 'undefined') return () => {}
+  const mo = new MutationObserver(cb)
+  mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-sh-interactive'] })
+  return () => mo.disconnect()
+}
+const readInteractive = () => typeof document !== 'undefined' && document.documentElement.hasAttribute('data-sh-interactive')
+const useInteractive = (): boolean => useSyncExternalStore(subscribeInteractive, readInteractive, () => false)
 
 const VIDEO_CSS = `
-.mv-video { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9 }
+.mv-video { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: var(--mv-video-ratio, 16 / 9) }
+.mv-video.armed { cursor: pointer }
+.mv-video.armed:hover .glyph span { background: rgba(16, 16, 20, .75) }
 .mv-video > img, .mv-video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
 .mv-video .glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none }
 .mv-video .glyph span { width: 72px; height: 72px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
   background: rgba(16, 16, 20, .55); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .28) }
-.mv-video .glyph svg { margin-left: 4px }
+.mv-video .glyph svg { margin-left: 2px }
 .mv-video .strip { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px;
   padding: 8px 12px; border-radius: 999px; background: rgba(16, 16, 20, .55); backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, .22); color: #fff; opacity: 1; transition: opacity .25s }
@@ -46,42 +100,88 @@ const ensureCss = () => {
 
 const fmt = (s: number) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`
 
-const PlayGlyph = ({ size = 26 }: { size?: number }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="#fff"><path d="M8 5.5 19 12 8 18.5 Z" /></svg>
-)
-const PauseGlyph = () => (
-  <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><rect x="6" y="5" width="4" height="14" rx="1" /><rect x="14" y="5" width="4" height="14" rx="1" /></svg>
+// Phosphor icons (play/pause in the fill weight, speaker and corners regular), path data
+// inlined from @phosphor-icons/core - MIT (c) Phosphor Icons - the same way the shell's
+// icons.tsx does it: no icon dependency reaches the host.
+const P = ({ d, size }: { d: string; size: number }) => (
+  <svg width={size} height={size} viewBox="0 0 256 256" fill="#fff" aria-hidden><path d={d} /></svg>
 )
+const PLAY = 'M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z'
+const PAUSE = 'M216,48V208a16,16,0,0,1-16,16H160a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h40A16,16,0,0,1,216,48ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Z'
+const SPEAKER = 'M155.51,24.81a8,8,0,0,0-8.42.88L77.25,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H77.25l69.84,54.31A8,8,0,0,0,160,224V32A8,8,0,0,0,155.51,24.81ZM32,96H72v64H32ZM144,207.64,88,164.09V91.91l56-43.55Zm54-106.08a40,40,0,0,1,0,52.88,8,8,0,0,1-12-10.58,24,24,0,0,0,0-31.72,8,8,0,0,1,12-10.58ZM248,128a79.9,79.9,0,0,1-20.37,53.34,8,8,0,0,1-11.92-10.67,64,64,0,0,0,0-85.33,8,8,0,1,1,11.92-10.67A79.83,79.83,0,0,1,248,128Z'
+const SPEAKER_SLASH = 'M53.92,34.62A8,8,0,1,0,42.08,45.38L73.55,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H77.25l69.84,54.31A8,8,0,0,0,160,224V175.09l42.08,46.29a8,8,0,1,0,11.84-10.76ZM32,96H72v64H32ZM144,207.64,88,164.09V95.89l56,61.6Zm42-63.77a24,24,0,0,0,0-31.72,8,8,0,1,1,12-10.57,40,40,0,0,1,0,52.88,8,8,0,0,1-12-10.59Zm-80.16-76a8,8,0,0,1,1.4-11.23l39.85-31A8,8,0,0,1,160,32v74.83a8,8,0,0,1-16,0V48.36l-26.94,21A8,8,0,0,1,105.84,67.91ZM248,128a79.9,79.9,0,0,1-20.37,53.34,8,8,0,0,1-11.92-10.67,64,64,0,0,0,0-85.33,8,8,0,1,1,11.92-10.67A79.83,79.83,0,0,1,248,128Z'
+const CORNERS = 'M216,48V88a8,8,0,0,1-16,0V56H168a8,8,0,0,1,0-16h40A8,8,0,0,1,216,48ZM88,200H56V168a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H88a8,8,0,0,0,0-16Zm120-40a8,8,0,0,0-8,8v32H168a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V168A8,8,0,0,0,208,160ZM88,40H48a8,8,0,0,0-8,8V88a8,8,0,0,0,16,0V56H88a8,8,0,0,0,0-16Z'
+const PlayGlyph = ({ size = 30 }: { size?: number }) => <P d={PLAY} size={size} />
+const PauseGlyph = ({ size = 18 }: { size?: number }) => <P d={PAUSE} size={size} />
 
-export function Video({ src, poster }: { src: string; poster?: string }) {
+export function Video({ src, poster, ratio, autoplay = false }: { src: string; poster?: string; ratio?: string; autoplay?: boolean }) {
   ensureCss()
   const play = useSlidePlay()
-  const posterUrl = poster ? resolve(poster) : null
+  const interactive = useInteractive()
+  const [armed, setArmed] = useState(false)      // the poster was clicked in a live frame
+  // leaving interact mode disarms: the clip pauses (Player unmounts) and the frame returns to
+  // its poster, so the canvas can serialize it lean again
+  useEffect(() => { if (!interactive) setArmed(false) }, [interactive])
+  // poster omitted on a local clip: the generated one, by convention. `gen` walks
+  // probing -> ready (the file exists, or was just rendered - reloaded with a cache-buster)
+  // or failed (the card). The <img> mounts only once ready: no broken-image glyph while the
+  // dev server renders the poster, and a shot taken meanwhile waits on __mvPosterBusy.
+  const generated = !poster && !isRemote(src) ? posterNameFor(src) : null
+  const [gen, setGen] = useState<'probing' | 'ready' | 'failed'>(generated ? 'probing' : 'ready')
+  const [bust, setBust] = useState(0)
+  const posterUrl = poster ? resolve(poster) : generated ? resolve(generated) : null
+  const posterSrc = posterUrl && bust ? `${posterUrl}?v=${bust}` : posterUrl
   const srcUrl = resolve(src)
-  const bad = !srcUrl || (!isRemote(src) && !posterUrl)
+  const style = ratio ? ({ '--mv-video-ratio': ratio } as CSSProperties) : undefined
+  useEffect(() => {
+    if (!generated || !posterUrl) { setGen('ready'); return }
+    let alive = true, pending = true
+    setGen('probing'); setBust(0)
+    busy++
+    const done = () => { if (pending) { pending = false; busy-- } }
+    const probe = new Image()
+    const settle = (state: 'ready' | 'failed', rebust = false) => { done(); if (!alive) return; if (rebust) setBust(Date.now()); setGen(state) }
+    probe.onload = () => settle('ready')
+    probe.onerror = () => {
+      // not there yet: ask the dev server to render it (once per clip per document)
+      void requestPoster(src).then((ok) => settle(ok ? 'ready' : 'failed', ok))
+    }
+    probe.src = posterUrl
+    return () => { alive = false; probe.onload = probe.onerror = null; done() }
+  }, [generated, posterUrl, src])
+  const bad = !srcUrl || (!isRemote(src) && !posterUrl) || gen === 'failed'
   if (bad) {
     return (
       <div className="mv-block mv-imgerr">
         <b>video unavailable</b>
         <span>{src}</span>
-        <span className="dim">{!srcUrl ? 'must be a design/assets/ path or an https file URL' : 'a local video needs a poster - it IS the slide at rest'}</span>
+        <span className="dim">{!srcUrl ? 'must be a design/assets/ path or an https file URL' : `no poster - add poster="…", or put ${generated} beside the clip (the dev server renders it when Chrome is installed)`}</span>
+      </div>
+    )
+  }
+  // Ambient: a muted loop, no chrome - the author accepted that this frame stays live.
+  if (autoplay) {
+    return (
+      <div className="mv-block mv-video" style={style}>
+        <video src={srcUrl!} poster={gen === 'ready' ? posterSrc ?? undefined : undefined} autoPlay muted loop playsInline preload="auto" />
       </div>
     )
   }
-  // AT REST: the poster and nothing else - no <video>, no fetch, still.
-  if (!play) {
+  // AT REST: the poster and nothing else - no <video>, no fetch, still. In a lean cover the
+  // click never fires (no script); in a live frame it arms the player inside the gesture.
+  if (!play && !armed) {
     return (
-      <div className="mv-block mv-video">
-        {posterUrl ? <img src={posterUrl} alt="" loading="lazy" /> : null}
+      <div className="mv-block mv-video armed" style={style} role="button" aria-label="Play video" onClick={() => setArmed(true)}>
+        {posterSrc && gen === 'ready' ? <img src={posterSrc} alt="" loading="lazy" /> : null}
         <div className="glyph"><span><PlayGlyph /></span></div>
       </div>
     )
   }
-  return <Player src={srcUrl!} poster={posterUrl ?? undefined} />
+  return <Player src={srcUrl!} poster={gen === 'ready' ? posterSrc ?? undefined : undefined} style={style} autoStart={armed} />
 }
 
 /** The glass strip - deliberately four controls and a clock, nothing more. */
-function Player({ src, poster }: { src: string; poster?: string }) {
+function Player({ src, poster, style, autoStart = false }: { src: string; poster?: string; style?: CSSProperties; autoStart?: boolean }) {
   const ref = useRef<HTMLVideoElement>(null)
   const [playing, setPlaying] = useState(false)
   const [muted, setMuted] = useState(false)
@@ -95,9 +195,11 @@ function Player({ src, poster }: { src: string; poster?: string }) {
     idleTimer.current = setTimeout(() => setIdle(true), 2200)
   }
   useEffect(() => () => { if (idleTimer.current) clearTimeout(idleTimer.current); ref.current?.pause() }, [])
+  // armed by a click on the poster: start now - still inside that gesture's activation
+  useEffect(() => { if (autoStart) { void ref.current?.play().catch(() => {}); poke() } }, [autoStart])
   const toggle = () => { const v = ref.current; if (!v) return; if (v.paused) { void v.play(); poke() } else v.pause() }
   return (
-    <div className="mv-block mv-video" onPointerMove={poke} onClick={(e) => { if (e.target === ref.current) toggle() }}>
+    <div className="mv-block mv-video" style={style} onPointerMove={poke} onClick={(e) => { if (e.target === ref.current) toggle() }}>
       <video ref={ref} src={src} poster={poster} preload="metadata" muted={muted} playsInline
         onPlay={() => { setPlaying(true); poke() }} onPause={() => { setPlaying(false); setIdle(false) }}
         onTimeUpdate={(e) => setT(e.currentTarget.currentTime)}
@@ -110,15 +212,10 @@ function Player({ src, poster }: { src: string; poster?: string }) {
           onChange={(e) => { const v = ref.current; if (v) { v.currentTime = Number(e.target.value); setT(v.currentTime) } }} />
         <span className="t">{fmt(dur)}</span>
         <button aria-label={muted ? 'Unmute' : 'Mute'} onClick={() => setMuted((m) => !m)}>
-          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M11 5 6 9 H3 v6 h3 l5 4 Z" fill="#fff" stroke="none" />
-            {muted ? <path d="m16 9 6 6 M22 9 l-6 6" /> : <path d="M15.5 8.5 a5 5 0 0 1 0 7 M18.5 6 a9 9 0 0 1 0 12" />}
-          </svg>
+          <P d={muted ? SPEAKER_SLASH : SPEAKER} size={18} />
         </button>
         <button aria-label="Fullscreen" onClick={(e) => void (e.currentTarget.closest('.mv-video') as HTMLElement | null)?.requestFullscreen?.()}>
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M8 3 H4 a1 1 0 0 0 -1 1 v4 M16 3 h4 a1 1 0 0 1 1 1 v4 M8 21 H4 a1 1 0 0 1 -1 -1 v-4 M16 21 h4 a1 1 0 0 0 1 -1 v-4" />
-          </svg>
+          <P d={CORNERS} size={18} />
         </button>
       </div>
     </div>

package/src/client/frame-host/bridge.js

@@ -69,7 +69,12 @@ window.addEventListener('message', (e) => {
   if (e.origin && e.origin !== location.origin) return   // a navigated frame must not spoof commands
   if (e?.data?.type === 'sh:set-theme') setTheme(e.data.theme)
   // B0.2: interact/play target owns its own wheel; passive frames forward it to the canvas
-  if (e?.data?.type === 'sh:interactive') { interactiveOn = !!e.data.on }
+  if (e?.data?.type === 'sh:interactive') {
+    interactiveOn = !!e.data.on
+    // mirrored on the document so content primitives can observe it (Video disarms its
+    // player when the human leaves interact mode - a playing clip must not outlive the mode)
+    document.documentElement.toggleAttribute('data-sh-interactive', interactiveOn)
+  }
 })
 
 if (isHtmlFrame) {

package/src/client/shell/App.tsx

@@ -1,13 +1,14 @@
-import { Component, useEffect, useRef, useState, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'
-import { createPortal } from 'react-dom'
+import { Component, useEffect, useRef, useState, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react'
 import { useStore, CONFIG, LOCKED_SHELL, PUBLISHED, SOURCE_REVEALED, boardLabel, boardFrames, cap, humanize, fetchBoardNames, hydrateBoardPolicy, landingMode, playsAsSlides, type FrameEntry } from './store.ts'
+import { BoardList } from './BoardList.tsx'
+import { ContextMenu, copyToClipboard, framePath, useContextMenu, type MenuItem } from './ContextMenu.tsx'
 import { Tip } from './Tip.tsx'
 import { PKG, ROUTE } from '../const.ts'
 import { animateLayout, Canvas, canvasCtl } from './canvas/Canvas.tsx'
 import { frameByWindow } from './canvas/frame-registry.ts'
 import { enterFocus, enterPlay, enterSlides, playCtl, PlayOverlay } from './Play.tsx'
 import { bootHash, parseHash, writeHash } from './hash.ts'
-import { CardsIcon, CardsThreeIcon, CaretIcon, CheckIcon, ColumnsIcon, FrameRectIcon, IntentGlyph, MoonIcon, PanelFilledIcon, PanelHollowIcon, ParallelogramDuoIcon, ParallelogramFillIcon, PencilSimpleIcon, PlayIcon, SignpostIcon, SlideFrameIcon, SunIcon, VariantsIcon, XIcon, deviceIcon } from './icons.tsx'
+import { CaretIcon, CheckIcon, ColumnsIcon, FrameRectIcon, ImagesSquareIcon, IntentGlyph, MoonIcon, PanelFilledIcon, PanelHollowIcon, ParallelogramDuoIcon, ParallelogramFillIcon, PlayIcon, SignpostIcon, SlideFrameIcon, SunIcon, VariantsIcon, XIcon, deviceIcon } from './icons.tsx'
 import { CommentsController, revealThread } from './Comments.tsx'
 import { poweredByUrl } from '../../shared/utm.ts'
 import { avatarFallback, useComments } from './comments-store.ts'
@@ -17,60 +18,6 @@ const commentsStore = () => useComments.getState()
 
 let booted = false                             // survives Fast Refresh; see the boot effect
 
-/** Copy text to the clipboard, toasting the outcome. Success is confirmed out loud; a
- *  blocked clipboard (no user gesture / permission) says so instead of failing silently. */
-function copyToClipboard(text: string, okMsg: string) {
-  const { toast } = useStore.getState()
-  navigator.clipboard.writeText(text).then(() => toast(okMsg), () => toast('copy blocked - click the canvas first'))
-}
-
-/** The address a frame copies - the same string from the sidebar right-click, the floating
- *  toolbar, and ⇧P: the board it sits on, the frame id, and its file. */
-// stripped build: the file column would only show the opaque token, so the
-// copy keeps what is still honest - the board and the frame id
-const framePath = (board: string, f: { id: string; file: string }) =>
-  SOURCE_REVEALED ? `board: ${board} · frame: ${f.id}  (${f.file})` : `board: ${board} · frame: ${f.id}`
-
-type MenuItem = { label: string; icon: ReactNode; onClick: () => void }
-type MenuState = { x: number; y: number; items: MenuItem[] }
-
-/** A right-click menu for the sidebar. One instance lives in App; `open(e, items)` positions
- *  it at the cursor, CLAMPED into the viewport. It closes on outside pointerdown, on pick, and
- *  on Escape - the Escape listener runs in CAPTURE phase so it does not also trip App's global
- *  keydown (which would clear the selection/laser underneath the menu). */
-function useContextMenu() {
-  const [menu, setMenu] = useState<MenuState | null>(null)
-  const open = (e: { preventDefault(): void; clientX: number; clientY: number }, items: MenuItem[]) => {
-    e.preventDefault()
-    const MENU_W = 184
-    const h = items.length * 32 + 12
-    setMenu({ x: Math.min(e.clientX, window.innerWidth - MENU_W - 8), y: Math.min(e.clientY, window.innerHeight - h - 8), items })
-  }
-  return { menu, open, close: () => setMenu(null) }
-}
-
-function ContextMenu({ menu, close }: { menu: MenuState | null; close: () => void }) {
-  const ref = useRef<HTMLDivElement>(null)
-  useEffect(() => {
-    if (!menu) return
-    const onDown = (e: PointerEvent) => { if (!ref.current?.contains(e.target as globalThis.Node)) close() }
-    const onEsc = (e: KeyboardEvent) => { if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); close() } }
-    window.addEventListener('pointerdown', onDown)
-    window.addEventListener('keydown', onEsc, true)   // capture: beat App's bubble-phase Escape
-    return () => { window.removeEventListener('pointerdown', onDown); window.removeEventListener('keydown', onEsc, true) }
-  }, [menu])
-  const app = document.querySelector('.sh-app')
-  if (!menu || !app) return null
-  return createPortal(
-    <div className="sh-menu sh-ctxmenu" ref={ref} style={{ left: menu.x, top: menu.y }}>
-      {menu.items.map((it) => (
-        <button key={it.label} onClick={() => { it.onClick(); close() }}>{it.icon}<span>{it.label}</span></button>
-      ))}
-    </div>,
-    app,
-  )
-}
-
 /** One collapsible scene group in the sidebar. `held` marks a scene that contains a
  *  selected frame - a quiet secondary wash so ancestry survives collapsing the group. */
 function SceneGroup({ name, count, held, onPick, onContextMenu, children }: { name: string; count: number; held: boolean; onPick?: () => void; onContextMenu?: (e: ReactMouseEvent) => void; children: ReactNode }) {
@@ -104,194 +51,6 @@ export class ShellBoundary extends Component<{ children: ReactNode }, { err: Err
   }
 }
 
-/** Boards live flat in the sidebar - always visible, one click to switch. The list
- *  refreshes on mount, window focus, and a slow poll so agent-created board files
- *  appear without a reload. Active board = accent icon + wash, same language as scenes. */
-const BOARD_NAME_RE = /^[a-z0-9][a-z0-9-]*$/
-
-function BoardList({ onMenu }: { onMenu: (e: { preventDefault(): void; clientX: number; clientY: number }, items: MenuItem[]) => void }) {
-  const board = useStore((s) => s.board)
-  const [names, setNames] = useState<string[]>(['all-scenes'])
-  const [editing, setEditing] = useState<string | null>(null)
-  const [drag, setDrag] = useState<string | null>(null)               // board being dragged
-  // insertion index in the CURATED list (0..len): one value per gap, so the divider lands
-  // once between two boards - not twice (A's bottom-half and B's top-half were separate spots)
-  const [dropIndex, setDropIndex] = useState<number | null>(null)
-  // genRef invalidates every async setNames: a mutation bumps it, so a poll/fetch that
-  // STARTED earlier can never clobber a fresh optimistic reorder or a just-renamed list.
-  const genRef = useRef(0)
-  const busyRef = useRef(0)                                            // reorders in flight; while >0 polls hold off
-  const commitBusy = useRef(false)                                    // guards Enter+blur firing two renames
-  const chainRef = useRef<Promise<unknown>>(Promise.resolve())         // serializes reorder POSTs
-  // reorder runs on pointer events, NOT native drag-and-drop: native DnD hands the cursor to
-  // the OS (arrow/move), so a grabbing hand can't persist. Owning the gesture lets us hold
-  // the grabbing cursor for the whole drag via a body class.
-  const gestureRef = useRef<{ pointerId: number; startX: number; startY: number; name: string; dragging: boolean; el: HTMLElement } | null>(null)
-  const refresh = () => {
-    if (busyRef.current > 0) return   // a reorder is mid-flight; its optimistic order stands until it settles
-    const gen = genRef.current
-    fetchBoardNames().then((list) => { if (gen === genRef.current) setNames(list) }).catch(() => { /* keep last known */ })
-  }
-  useEffect(() => {
-    refresh()
-    const t = setInterval(refresh, 8000)
-    window.addEventListener('focus', refresh)
-    return () => { clearInterval(t); window.removeEventListener('focus', refresh) }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-  const pick = async (name: string) => {
-    if (name === useStore.getState().board) return
-    await useStore.getState().switchBoard(name)
-    setTimeout(() => canvasCtl.fitAll(), 60)
-  }
-  const commit = async (old: string, raw: string) => {
-    if (commitBusy.current) return                          // Enter already fired this; ignore the follow-up blur
-    const next = raw.trim()
-    if (!next || next === old) { setEditing(null); return }
-    if (!BOARD_NAME_RE.test(next) || next.length > 64 || next === 'all-scenes' || names.includes(next)) {
-      useStore.getState().toast('use a free name - lowercase letters, numbers and dashes'); return   // stay editing
-    }
-    commitBusy.current = true
-    try {
-      const r = await useStore.getState().renameBoard(old, next)
-      if (r.ok) { setEditing(null); genRef.current++; refresh() }
-      else useStore.getState().toast(r.error ?? 'rename failed')                                      // stay editing
-    } finally { commitBusy.current = false }
-  }
-  // the INSERTION INDEX (in the curated list, 0..len) nearest the pointer - one value per
-  // gap, so a single divider lands between two boards instead of one per row-half
-  const indexAt = (x: number, y: number): number | null => {
-    const el = (document.elementFromPoint(x, y) as HTMLElement | null)?.closest('[data-board-row]') as HTMLElement | null
-    const name = el?.dataset.board
-    if (!name) return null
-    const curated = names.filter((n) => n !== 'all-scenes')
-    if (name === 'all-scenes') return curated.length            // over the pinned last row = end slot
-    const ci = curated.indexOf(name)
-    if (ci < 0) return null
-    const r = el!.getBoundingClientRect()
-    return y > r.top + r.height / 2 ? ci + 1 : ci
-  }
-  const resetPointer = () => {
-    const g = gestureRef.current
-    gestureRef.current = null
-    if (g) { try { g.el.releasePointerCapture(g.pointerId) } catch { /* already released */ } }
-    document.body.classList.remove('sh-board-dragging')
-    setDrag(null)
-    setDropIndex(null)
-  }
-  // move the dragged board to the insertion index and persist the new order optimistically
-  const applyReorder = (dragName: string, dropIndex: number) => {
-    if (dragName === 'all-scenes') return
-    const curated = names.filter((n) => n !== 'all-scenes')
-    const from = curated.indexOf(dragName)
-    if (from < 0) return
-    const to = dropIndex > from ? dropIndex - 1 : dropIndex      // removing `from` shifts later indices left
-    if (to === from) return                                      // dropped in its own slot - no move
-    curated.splice(from, 1)
-    curated.splice(to, 0, dragName)
-    const prev = names
-    genRef.current++
-    const gen = genRef.current
-    busyRef.current++                                             // hold polls off until this settles
-    setNames(names.includes('all-scenes') ? [...curated, 'all-scenes'] : curated)
-    chainRef.current = chainRef.current.then(async () => {
-      try {
-        const ok = await useStore.getState().reorderBoards(curated)
-        if (gen !== genRef.current) return                        // a newer drop superseded this one
-        if (!ok) { setNames(prev); useStore.getState().toast('could not save order') }
-      } catch { if (gen === genRef.current) { setNames(prev); useStore.getState().toast('could not save order') } }
-      finally { busyRef.current-- }
-    })
-  }
-  const onBoardPointerDown = (e: ReactPointerEvent<HTMLButtonElement>, n: string) => {
-    if (e.button !== 0) return                                    // left button only; right-click opens the menu
-    const el = e.currentTarget
-    try { el.setPointerCapture(e.pointerId) } catch { /* capture can fail on rapid input */ }
-    gestureRef.current = { pointerId: e.pointerId, startX: e.clientX, startY: e.clientY, name: n, dragging: false, el }
-  }
-  const onBoardPointerMove = (e: ReactPointerEvent<HTMLButtonElement>) => {
-    const g = gestureRef.current
-    if (!g || g.pointerId !== e.pointerId) return
-    if (!g.dragging) {
-      if (Math.hypot(e.clientX - g.startX, e.clientY - g.startY) < 5) return   // click vs drag threshold
-      g.dragging = true
-      setDrag(g.name)
-      document.body.classList.add('sh-board-dragging')            // holds the grabbing cursor for the whole drag
-    }
-    const idx = indexAt(e.clientX, e.clientY)
-    // hide the seam at the dragged board's OWN slot (index from or from+1 = no move)
-    const from = names.filter((nm) => nm !== 'all-scenes').indexOf(g.name)
-    setDropIndex(idx === null || idx === from || idx === from + 1 ? null : idx)
-  }
-  const onBoardPointerUp = (e: ReactPointerEvent<HTMLButtonElement>, n: string) => {
-    const g = gestureRef.current
-    if (!g || g.pointerId !== e.pointerId) return
-    const dragged = g.dragging
-    const idx = dragged ? indexAt(e.clientX, e.clientY) : null
-    resetPointer()
-    if (dragged) { if (idx !== null) applyReorder(n, idx) }
-    else void pick(n)                                             // a tap switches boards (the trailing mouse click is ignored)
-  }
-  // cancel a drag on Escape (capture phase, so the app's global Escape never sees it) or focus loss
-  useEffect(() => {
-    const onEsc = (e: KeyboardEvent) => { if (e.key === 'Escape' && gestureRef.current?.dragging) { e.preventDefault(); e.stopPropagation(); resetPointer() } }
-    const onBlur = () => { if (gestureRef.current) resetPointer() }
-    window.addEventListener('keydown', onEsc, true)
-    window.addEventListener('blur', onBlur)
-    return () => { window.removeEventListener('keydown', onEsc, true); window.removeEventListener('blur', onBlur); resetPointer() }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-  const menuFor = (n: string): MenuItem[] => [
-    { label: 'Copy path', icon: <SignpostIcon size={15} />, onClick: () => copyToClipboard(`board: ${n}`, 'path copied') },
-    ...(!PUBLISHED && n !== 'all-scenes' ? [{ label: 'Rename', icon: <PencilSimpleIcon size={15} />, onClick: () => setEditing(n) }] : []),
-  ]
-  const curated = names.filter((nm) => nm !== 'all-scenes')
-  return (
-    <>
-      {names.map((n) => {
-        if (editing === n) return (
-          <div key={n} className="it board editing">
-            {n === 'all-scenes' ? <CardsThreeIcon size={14} /> : <CardsIcon size={14} />}
-            <input autoFocus defaultValue={n} spellCheck={false}
-              onFocus={(e) => e.currentTarget.select()}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') { e.preventDefault(); void commit(n, e.currentTarget.value) }
-                else if (e.key === 'Escape') { e.preventDefault(); setEditing(null) }
-              }}
-              onBlur={(e) => { if (editing === n) void commit(n, e.currentTarget.value) }} />
-          </div>
-        )
-        const canDrag = !PUBLISHED && n !== 'all-scenes'
-        // ONE seam per gap, from the insertion index: drop-before the row AT that index, or
-        // drop-after the last curated row when the index is the end. Overlay (::after), so no
-        // layout shift. Never on the row being dragged.
-        const ci = curated.indexOf(n)
-        const dropCls = drag == null || dropIndex == null || n === drag ? ''
-          : ci === dropIndex ? ' drop-before'
-          : dropIndex === curated.length && ci === curated.length - 1 ? ' drop-after'
-          : ''
-        return (
-          <button key={n} data-board-row data-board={n} data-reorderable={canDrag || undefined}
-            className={`it board${n === board ? ' cur' : ''}${drag === n ? ' dragging' : ''}${dropCls}`}
-            // draggable rows switch on the pointer tap (onPointerUp), so their trailing mouse
-            // click (detail >= 1) must be ignored to avoid a double switch; keyboard clicks
-            // (detail === 0) and non-draggable rows (all-scenes) switch here as normal
-            onClick={(e) => { if (!canDrag || e.detail === 0) void pick(n) }}
-            onContextMenu={(e) => onMenu(e, menuFor(n))}
-            onPointerDown={canDrag ? (e) => onBoardPointerDown(e, n) : undefined}
-            onPointerMove={canDrag ? onBoardPointerMove : undefined}
-            onPointerUp={canDrag ? (e) => onBoardPointerUp(e, n) : undefined}
-            onPointerCancel={canDrag ? () => resetPointer() : undefined}
-            onLostPointerCapture={canDrag ? (e) => { if (gestureRef.current?.pointerId === e.pointerId) resetPointer() } : undefined}>
-            {n === 'all-scenes' ? <CardsThreeIcon size={14} /> : <CardsIcon size={14} />}
-            <span>{boardLabel(n)}</span>
-          </button>
-        )
-      })}
-    </>
-  )
-}
-
 /** Selection toolbar: screen-space overlay above the selected frame - constant size at any
  *  zoom. Position derives from --sh-s/tx/ty (written per transform frame in Canvas), so
  *  pan/zoom tracking is pure CSS with zero React re-renders. */
@@ -323,6 +82,17 @@ function SelectionBar() {
     const t = setTimeout(() => setCopied(false), 1400)
     return () => clearTimeout(t)
   }, [pathPulse])
+  // copy-as-image: same flash contract (imagePulse bumps only on a real clipboard write),
+  // plus a busy state for the 1-4s headless render - the icon dims and the button locks
+  const imagePulse = useStore((s) => s.imagePulse)
+  const imageBusy = useStore((s) => s.imageBusy)
+  const [copiedImage, setCopiedImage] = useState(false)
+  useEffect(() => {
+    if (!imagePulse) return
+    setCopiedImage(true)
+    const t = setTimeout(() => setCopiedImage(false), 1400)
+    return () => clearTimeout(t)
+  }, [imagePulse])
   if (!node || !frame || node.missing) return null
   // anchor: centered over the bounding box of ALL selected frames, above the topmost
   const selNodes = nodes.filter((n) => selection.includes(n.key))
@@ -401,6 +171,17 @@ function SelectionBar() {
               () => toast('copy blocked - click the canvas first'))
           }}>{copied ? <CheckIcon size={15} /> : <SignpostIcon size={15} />}</button>
       </Tip>
+      {/* copy as image: dev only (the renderer is the dev server's headless Chrome) and one
+          frame at a time (a clipboard holds one image). I = 2x, Shift+I = 4x. */}
+      {!PUBLISHED && (
+        <Tip label={multi ? 'Select one frame to copy as image' : <><b>Copy as image</b><span className="k">⇧i</span></>}>
+          <button className={`icon${imageBusy ? ' busy' : ''}`} disabled={multi || imageBusy} aria-label="Copy as image"
+            data-state={copiedImage ? 'copied' : imageBusy ? 'busy' : 'idle'}
+            onClick={(e) => useStore.getState().copyFrameImage(e.shiftKey ? 4 : 2)}>
+            {copiedImage ? <CheckIcon size={15} /> : <ImagesSquareIcon size={15} />}
+          </button>
+        </Tip>
+      )}
     </div>
   )
 }
@@ -835,7 +616,11 @@ export function App() {
   // keyboard: t tidy · d theme · ⌘\ panel · Escape exit · shift+0/1/2 zoom
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return
+      // anything that edits text owns its keys: inputs, textareas, selects, contenteditable (the
+      // comment composer), and an IME mid-composition
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement) return
+      if (e.target instanceof HTMLElement && e.target.isContentEditable) return
+      if (e.isComposing) return
       const s = useStore.getState()
       if (s.play) return                       // play mode owns the keyboard (Play.tsx)
       if ((e.metaKey || e.ctrlKey) && e.key === '\\') { e.preventDefault(); togglePanel(); return }
@@ -878,6 +663,8 @@ export function App() {
         c.setShowAnchor(!c.showAnchor)
         toast(c.showAnchor ? 'laser comment off' : 'laser comment on')
       }
+      // I = copy the selected frame as a 2x PNG · Shift+I = 4x (dev only; one frame at a time)
+      if ((e.key === 'i' || e.key === 'I') && !PUBLISHED && !e.altKey && !e.repeat) { s.copyFrameImage(e.shiftKey ? 4 : 2); return }
       if (e.key === 'P' && e.shiftKey && s.selection.length) {
         const paths = s.selection
           .map((k) => { const n = s.nodes.find((x) => x.key === k); const f = n && s.frameFor(n); return f ? framePath(s.board, f) : undefined })
@@ -989,7 +776,6 @@ export function App() {
             <Tip side="bottom" label={<><b>Collapse panel</b><span>⌘\</span></>}><button className="sh-ibtn" onClick={togglePanel} tabIndex={panelOpen ? 0 : -1}><PanelFilledIcon size={17} /></button></Tip>
           </div>
           <div className="sh-panel-scroll">
-            <div className="hd">Boards</div>
             <BoardList onMenu={cm.open} />
             <div className="hd" style={{ marginTop: 10 }}>Scenes</div>
             {scenes.map((sc) => (