@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/storyboard/ShotCard.tsx

@@ -0,0 +1,251 @@
+// ONE SHOT CARD on the board (Paper SB1): one planned shot, or one Shot no
+// plan links, read in playing order (`storyEntries`). A storyboard panel:
+//
+//   picture   the built frame once "Mark shot built" ran (with a Built
+//             badge), else Sketch 1 as the still stage draws it (`MiniSketch`
+//             with `useSketchThumbs`, drawn in the DOM until that is ready)
+//             with one dot per sketch to peek at the others, else the Shot's
+//             first still, else empty paper.
+//   body      the number, the name and the status badge (`shotStatusOf`:
+//             Built, Building while this session's agent run is out for it,
+//             else Planned; never stored), then one line: the voice in curly
+//             quotes, else What we see.
+//   footer    how many sketches and pinned cards, and the length.
+//
+// A PRESS SELECTS (the Plan panel opens on the right), A DOUBLE PRESS OR
+// ENTER OPENS THE SHOT BOARD, never the Studio. The board owns the double
+// press (BoardCanvas), because the first press can rewrap the board under the
+// pointer. A DRAG MOVES IT (`SHOT_MIME`):
+// the board draws the insertion line and writes the order (`moveBoardEntry`).
+// Its open comment counts show while it is selected (S5: the plan never
+// hides work).
+//
+// A DROP PINS STRAIGHT TO THIS SHOT (S2 note 3): a board card moves onto it,
+// files upload onto it, no dialog. A Shot no plan links gets its planned shot
+// in the same edit (`scene`, `pinPartFor`).
+//
+// `data-comment-target` names the card for the comment tools (lane M).
+import { useState } from "react";
+import type { DragEvent as ReactDragEvent, MouseEvent as ReactMouseEvent } from "react";
+import { framesToSeconds } from "@dailies-studio/engine";
+import type { Doc3D } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { SHOT_STATUS_LABEL, isReferenceId, shotLengthOf, shotStatusOf } from "../../state/storyboardModel.js";
+import type { ShotStatus, StoryEntry } from "../../state/storyboardModel.js";
+import { CHECK_ICON } from "../../icons.js";
+import { ASSET_MIME, readAssetDrag } from "../files/assetDrag.js";
+import { CardCommentCounts } from "../comments/parts.js";
+import { formatDuration } from "../timeline/model.js";
+import type { Press } from "./boardRows.js";
+import { entryIdOf } from "./boardOrder.js";
+import { MiniSketch } from "./MiniSketch.js";
+import { useSketchThumbs, useStillThumb } from "./StillThumbs.js";
+import { STORYBOARD_MIME, acceptedFiles, readDragPayload, refusedFilesMessage } from "./storyboardDrop.js";
+import { useBuildingParts } from "../agent/AgentDots.js";
+
+export { entryIdOf } from "./boardOrder.js";
+
+/** A shot card dragged to a new place on the board: its entry id. Its own
+ *  type, so a card drop (`STORYBOARD_MIME`) never takes it. */
+export const SHOT_MIME = "application/x-dailies-shot";
+/** What a drop on a card can take. */
+const CARD_DROP_TYPES = [STORYBOARD_MIME, ASSET_MIME, "Files"];
+/** The card's picture width, CSS px (Paper 346): what its images fetch for. */
+const PICTURE_PX = 346;
+
+/** The badge tone each status reads in (G1 `.badge`). */
+const STATUS_TONE: Record<ShotStatus, string> = { planned: "", building: " is-building", built: " is-success" };
+
+/** "2 sketches · 1 pinned". */
+function sketchPinWords(sketches: number, pinned: number): string {
+  return `${sketches} ${sketches === 1 ? "sketch" : "sketches"} · ${pinned} pinned`;
+}
+
+/** Six dots: the drag grip (Paper SB1, on hover). */
+const GRIP_ICON = (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <circle cx="6" cy="4" r="1.25" />
+    <circle cx="10" cy="4" r="1.25" />
+    <circle cx="6" cy="8" r="1.25" />
+    <circle cx="10" cy="8" r="1.25" />
+    <circle cx="6" cy="12" r="1.25" />
+    <circle cx="10" cy="12" r="1.25" />
+  </svg>
+);
+
+export function ShotCard(props: {
+  doc: Doc3D;
+  entry: StoryEntry;
+  /** Its place in `storyEntries`, from 0. */
+  at: number;
+  selected: boolean;
+  onPress: (id: string, press: Press) => void;
+  onOpen: (entry: StoryEntry) => void;
+  onMenu: (entry: StoryEntry, event: ReactMouseEvent) => void;
+  /** A drag of this card began or ended; the board draws the insertion line. */
+  onDragMove?: (id: string | null) => void;
+}) {
+  const { doc, entry, at, selected } = props;
+  const store = useStore();
+  const building = useBuildingParts();
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const part = entry.kind === "shot" ? entry.shot.part : entry.part;
+  const shot = entry.kind === "shot" ? entry.shot : null;
+  const id = entryIdOf(entry);
+  const name = entry.kind === "shot" ? entry.name : entry.part.label;
+  const status = shotStatusOf(part, building);
+  const length = shotLengthOf(doc, part, shot?.scene ?? null);
+  const pins = part === null ? 0 : (doc.resources?.references ?? []).filter((r) => r.part === part.id).length;
+  const number = String(at + 1).padStart(2, "0");
+  const line = part?.voice !== undefined ? `“${part.voice}”` : part?.notes;
+
+  const onDragOver = (event: ReactDragEvent): void => {
+    const types = Array.from(event.dataTransfer.types ?? []);
+    if (!types.some((type) => CARD_DROP_TYPES.includes(type))) return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer.dropEffect = types.includes("Files") ? "copy" : "move";
+    event.currentTarget.classList.add("is-drop");
+  };
+  const onDragLeave = (event: ReactDragEvent<HTMLElement>): void => {
+    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) event.currentTarget.classList.remove("is-drop");
+  };
+  const onDrop = (event: ReactDragEvent<HTMLElement>): void => {
+    event.currentTarget.classList.remove("is-drop");
+    const data = event.dataTransfer;
+    const lane = part?.id ?? null;
+    const opts = part === null && shot !== null ? { scene: shot.sceneId } : {};
+    const payload = readDragPayload(data);
+    const asset = payload === null ? readAssetDrag(data) : null;
+    const files = Array.from(data.files ?? []);
+    if (payload === null && asset === null && files.length === 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (payload?.kind === "reference") {
+      const live = store.getState().storyboardSelection;
+      const ids = live.includes(payload.id) ? live.filter(isReferenceId) : [payload.id];
+      store.attachStoryboardItems(ids, lane, opts);
+    } else if (asset !== null) {
+      store.addReferenceForAsset(asset.asset, lane, { ...opts, select: false });
+    } else if (files.length > 0) {
+      const taken = acceptedFiles(files);
+      if (taken.length > 0) void store.addStoryboardFiles(taken, lane, { ...opts, select: false });
+      const refused = refusedFilesMessage(files);
+      if (refused !== null) store.reportError(refused);
+    }
+  };
+
+  return (
+    <article
+      className={`shot-card${selected ? " is-selected" : ""}`}
+      data-testid={`shot-card-${id}`}
+      data-comment-target={id}
+      data-status={status}
+      role="option"
+      aria-selected={selected}
+      aria-label={`${number} ${name}, ${SHOT_STATUS_LABEL[status]}`}
+      tabIndex={0}
+      draggable={!readOnly}
+      onDragStart={(event) => {
+        if (event.target !== event.currentTarget) return;
+        event.dataTransfer.setData(SHOT_MIME, id);
+        event.dataTransfer.effectAllowed = "move";
+        props.onDragMove?.(id);
+      }}
+      onDragEnd={() => props.onDragMove?.(null)}
+      onClick={(event) => props.onPress(id, event)}
+      onKeyDown={(event) => {
+        if (event.target !== event.currentTarget) return;
+        if (event.key === "Enter") props.onOpen(entry);
+        else if (event.key === " ") {
+          event.preventDefault();
+          props.onPress(id, event);
+        }
+      }}
+      onContextMenu={(event) => props.onMenu(entry, event)}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+    >
+      <ShotPicture doc={doc} entry={entry} />
+      {readOnly ? null : (
+        <span className="shot-card-grip" aria-hidden="true" title="Drag to move">
+          {GRIP_ICON}
+        </span>
+      )}
+      <div className="shot-card-body">
+        <div className="shot-card-title">
+          <span className="shot-card-number">{number}</span>
+          <span className="shot-card-name">{name}</span>
+          <span className={`badge${STATUS_TONE[status]}`} data-status={status} data-testid="shot-status">
+            {SHOT_STATUS_LABEL[status]}
+          </span>
+        </div>
+        {line === undefined ? null : (
+          <p className={part?.voice !== undefined ? "shot-card-voice" : "shot-card-notes"} title={line}>
+            {line}
+          </p>
+        )}
+      </div>
+      <footer className="shot-card-foot">
+        <span className="shot-card-counts">{sketchPinWords(part?.sketches?.length ?? 0, pins)}</span>
+        {/* The counts show on the selected card only (S5). */}
+        {part === null || !selected ? null : <CardCommentCounts target={{ partId: part.id }} />}
+        <span className="shot-card-length">{formatDuration(framesToSeconds(length, doc.fps))}</span>
+      </footer>
+    </article>
+  );
+}
+
+/** The card's picture: the built frame, Sketch 1 (and a peek at the others),
+ *  the Shot's first still, or empty paper. */
+function ShotPicture({ doc, entry }: { doc: Doc3D; entry: StoryEntry }) {
+  const part = entry.kind === "shot" ? entry.shot.part : entry.part;
+  const shot = entry.kind === "shot" ? entry.shot : null;
+  const sketches = part?.sketches ?? [];
+  const [peek, setPeek] = useState(0);
+  const built = shot !== null && part?.built !== undefined;
+  // Both stills draw through the board's still queue, so a picture shown here
+  // and in the Studio is drawn once.
+  const frame = shot === null ? null : built ? part!.built!.frame : sketches.length > 0 ? null : (shot.stills[0]?.frame ?? null);
+  const thumb = useStillThumb(shot?.sceneId ?? "", frame ?? 0);
+  const shown = sketches[Math.min(peek, sketches.length - 1)];
+  // The shown sketch as the still stage draws it, asked for only when the
+  // card shows a sketch.
+  const sketchPicture = useSketchThumbs(part?.id ?? "", (shot !== null && frame !== null) || shown === undefined ? [] : [shown.id]);
+  if (shot !== null && frame !== null) {
+    return (
+      <div className="shot-card-picture" data-picture={built ? "built" : "frame"} data-status={thumb?.status ?? "pending"}>
+        {thumb?.url === undefined ? null : <img src={thumb.url} alt="" draggable={false} />}
+        {built ? (
+          <span className="shot-card-built">
+            {CHECK_ICON}
+            Built
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+  if (shown === undefined) {
+    return (
+      <div className="shot-card-picture is-paper" data-picture="empty">
+        <span className="shot-card-sketch-empty">No sketch yet</span>
+      </div>
+    );
+  }
+  return (
+    <div className="shot-card-picture is-paper" data-picture="sketch" onPointerLeave={() => setPeek(0)}>
+      <MiniSketch doc={doc} sketch={shown} width={PICTURE_PX} picture={sketchPicture.get(shown.id) ?? null} />
+      <span className="shot-card-dots">
+        {sketches.map((sketch, index) => (
+          <span
+            key={sketch.id}
+            className={`shot-card-dot${sketch === shown ? " is-shown" : ""}`}
+            title={sketch.label ?? `Sketch ${index + 1}`}
+            onPointerEnter={() => setPeek(index)}
+          />
+        ))}
+      </span>
+    </div>
+  );
+}

package/src/panels/storyboard/StagePreview.tsx

@@ -0,0 +1,348 @@
+// THE ONE LIVE PREVIEW STAGE: any in-memory `Doc3D`, drawn by a second
+// `/shot-stage.html`, looped or held on one frame. The component card's
+// preview (`ComponentStage`, which builds its one-instance document) and the
+// shot board's Play (`sketchStageDoc`) both mount it.
+//
+// WHY A SECOND STAGE AND NOT THE HARNESS. `/preview.html?component=<id>`
+// frames a three host through `DefaultRig` (a generic fov-50 camera at z 5),
+// while a shot-lane component is authored in stage pixels on the Project's
+// frame box, so the harness showed a CROP of the middle of the design (9 of
+// the 20 shipped components one flat colour, measured 2026-09-25). The stage
+// takes any in-memory `Doc3D` through `loadDoc` (it never fetches one), so
+// this mounts `/shot-stage.html` a second time and hands it the caller's
+// document. Nothing is saved, and no bridge message is new.
+//
+// LOOPING, OR ONE FRAME. The stage owns no clock (the chrome drives every
+// seek), so the preview plays by seeking its own stage from a rAF loop, at the
+// document's fps, over `lengthFrames`. A caller that names a `frame` shows
+// that frame and holds it.
+//
+// HOSTED, StagePanel's rule: no src until `__dailiesHost.ready` settles. But
+// NOT `host.stageLoaded`: the host tracks ONE stage (the main one, which it
+// reloads when the Service Worker refuses it a module), so this preview does
+// that call's two jobs itself: a document the Service Worker does not control
+// is reloaded once, and the current epoch is posted again on every load,
+// because the epoch channel does not replay. Locally there is no host and none
+// of this runs.
+//
+// IN VIEW AND IN BUDGET. The stage mounts only while it is on screen and holds
+// a slot of the shared budget (liveCap.ts), keyed by the caller's `slotKey`,
+// so a card that already holds that slot shares it rather than taking a
+// second. A caller may hold it back (`live`): the board's cards go live only
+// on hover, focus or selection, and show their POSTER at rest (posterCache.ts),
+// which a live stage captures under the caller's `posterKey` once it is ready.
+//
+// NEVER `.stage-frame` or `.stage-window`: the first is pinned full-window by
+// shell.css, and `measureInset` reads the second as the main stage's hole.
+// The classes stay `component-stage*`, where storyboard.css styles them.
+import { useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import type { Doc3D } from "@dailies-studio/shot/doc";
+import { readStudioThemePreference, resolveStudioTheme } from "@dailies-studio/ui/theme";
+import { connectStage } from "../../bridge.js";
+import { MODULE_EPOCH_CHANNEL, dailiesHost } from "../../hostApi.js";
+import type { ShotBridgeHandlers, ShotStageBridge } from "../../bridgeTypes.js";
+import { stageSrc } from "../stage/StagePanel.js";
+import { useInView, useLiveSlot } from "./liveCap.js";
+import { usePoster, writePoster } from "./posterCache.js";
+
+/** The poster's width in px: twice the widest card that shows it. */
+export const POSTER_WIDTH = 480;
+
+/** The poster's size for a frame box: `POSTER_WIDTH` wide, the box's aspect. */
+export function posterSize(size: { width: number; height: number }): { width: number; height: number } {
+  return { width: POSTER_WIDTH, height: Math.max(1, Math.round((POSTER_WIDTH * size.height) / size.width)) };
+}
+
+/** The frame a loop that started `elapsedMs` ago shows: the document's fps,
+ *  wrapped over `lengthFrames` (at least one). */
+export function loopFrameAt(elapsedMs: number, fps: number, lengthFrames: number): number {
+  return Math.floor((Math.max(0, elapsedMs) / 1000) * fps) % Math.max(1, Math.round(lengthFrames));
+}
+
+export interface StagePreviewProps {
+  /** What the stage draws. Null holds it on its loading line. A new identity
+   *  reloads the stage document, so a caller memoizes it on what it reads. */
+  doc: Doc3D | null;
+  /** The frame box: the aspect ratio and the poster's. */
+  size: { width: number; height: number };
+  /** How many frames the loop runs over. */
+  lengthFrames: number;
+  /** Shows this frame and holds it: no loop runs. */
+  frame?: number;
+  /** Whether the stage may go live. False shows the poster (default true). */
+  live?: boolean;
+  /** The live budget slot this preview takes (liveCap.ts). */
+  slotKey: string;
+  /** The poster cache key (posterCache.ts). Null captures and shows none. */
+  posterKey: string | null;
+  /** The iframe's accessible name. */
+  title: string;
+  className?: string;
+  /** What shows while the stage is not live and no poster is cached yet. */
+  fallback?: ReactNode;
+  /** The stage said it drew the document. */
+  onReady?: () => void;
+}
+
+export function StagePreview(props: StagePreviewProps) {
+  const { doc, size, lengthFrames, frame } = props;
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const [wrapper, setWrapper] = useState<HTMLDivElement | null>(null);
+  const inView = useInView(wrapper);
+  const wantLive = props.live ?? true;
+  const live = useLiveSlot(props.slotKey, inView && wantLive);
+  // THE SRC IS FIXED AT MOUNT, StagePanel's rule: a src that followed the
+  // theme would reboot the stage on every appearance change. Read from the
+  // provider's own source, not its context, so a preview mounted outside the
+  // provider (a suite) draws rather than taking the inspector down with it.
+  const src = useRef(stageSrc(resolveStudioTheme(readStudioThemePreference()))).current;
+  // Read once: the boot script installs it before the chrome runs, or never.
+  const [host] = useState(dailiesHost);
+  const [hostSettled, setHostSettled] = useState(host === undefined);
+  const reloaded = useRef(false);
+  const [bridge, setBridge] = useState<ShotStageBridge | null>(null);
+  const [status, setStatus] = useState<"loading" | "ready" | string>("loading");
+  // A ref, so a caller's fresh callback never reconnects the stage.
+  const onReady = useRef(props.onReady);
+  onReady.current = props.onReady;
+  const fps = doc === null ? 0 : doc.fps.num / doc.fps.den;
+  const poster = usePoster(props.posterKey);
+  // TRUE WHILE A POSTER CAPTURE IS OUT: the loop holds its seeks, which would
+  // move the stage under the capture.
+  const capturing = useRef(false);
+
+  // ── CONNECT, AND AGAIN ON EVERY LOAD ────────────────────────────────────
+  //
+  // Saving a component's source reloads every stage iframe, this one too, and
+  // a bridge from the old document is dead. So every load event reconnects.
+  useEffect(() => {
+    if (host === undefined) return;
+    let alive = true;
+    // A host that failed says so on the main stage; this one still loads.
+    const settle = (): void => {
+      if (alive) setHostSettled(true);
+    };
+    host.ready.then(settle, settle);
+    return () => {
+      alive = false;
+    };
+  }, [host]);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (iframe === null || !hostSettled || !live) return;
+    const aborter = new AbortController();
+    const handlers = previewHandlers({
+      onReady: () => {
+        setStatus("ready");
+        onReady.current?.();
+      },
+      onError: (message) => setStatus(message),
+    });
+    const connect = (): void => {
+      setBridge(null);
+      setStatus("loading");
+      void connectStage(iframe, handlers, { signal: aborter.signal })
+        .then((next) => {
+          if (aborter.signal.aborted) return;
+          // THE CAMERA ONLY, no furniture: the storyboard preview's own mode.
+          next.setStoryboardPreview(true);
+          setBridge(next);
+        })
+        .catch((e: unknown) => {
+          if (!aborter.signal.aborted) setStatus(e instanceof Error ? e.message : String(e));
+        });
+    };
+    const onLoad = (): void => {
+      const stage = iframe.contentWindow;
+      if (host !== undefined && stage !== null) {
+        if (stage.navigator.serviceWorker?.controller == null && !reloaded.current) {
+          reloaded.current = true;
+          stage.location.reload();
+          return;
+        }
+        const version = host.compileVersion();
+        if (version !== null) {
+          const channel = new BroadcastChannel(MODULE_EPOCH_CHANNEL);
+          channel.postMessage(version);
+          channel.close();
+        }
+      }
+      connect();
+    };
+    iframe.addEventListener("load", onLoad);
+    // Hosted, the src was set in the commit this effect follows, so the load
+    // is still ahead.
+    if (host === undefined) connect();
+    return () => {
+      aborter.abort();
+      iframe.removeEventListener("load", onLoad);
+      // A slot handed on unmounts the iframe, and its bridge with it: drop
+      // it, or the loop below keeps seeking a dead document.
+      setBridge(null);
+      setStatus("loading");
+    };
+  }, [host, hostSettled, live]);
+
+  // ── THE DOCUMENT, then the frame ────────────────────────────────────────
+  useEffect(() => {
+    if (bridge === null || doc === null) return;
+    bridge.loadDoc(doc);
+    bridge.seek(frame ?? 0);
+  }, [bridge, doc, frame]);
+
+  // ── THE POSTER, once the stage is ready ─────────────────────────────────
+  //
+  // Each live session captures again, so a poster made before a code change
+  // the key does not see is replaced the next time the card goes live.
+  const posterKey = props.posterKey;
+  const { width, height } = size;
+  useEffect(() => {
+    if (bridge === null || status !== "ready" || posterKey === null) return;
+    const aborter = new AbortController();
+    capturing.current = true;
+    const out = posterSize({ width, height });
+    void bridge
+      .captureFrame({ frame: frame ?? 0, width: out.width, height: out.height, format: "webp", signal: aborter.signal })
+      .then((blob) => {
+        if (!aborter.signal.aborted) writePoster(posterKey, blob);
+      })
+      // A failed poster leaves the caller's fallback; the live stage still plays.
+      .catch(() => {})
+      .finally(() => {
+        capturing.current = false;
+      });
+    return () => {
+      aborter.abort();
+      capturing.current = false;
+    };
+  }, [bridge, status, posterKey, frame, width, height]);
+
+  // ── THE LOOP, when no frame is named ────────────────────────────────────
+  //
+  // One seek per NEW frame, at the document's fps: a rAF that seeked every
+  // tick would ask the stage for the same picture twice at 60 Hz.
+  useEffect(() => {
+    if (bridge === null || frame !== undefined || fps <= 0) return;
+    let raf = 0;
+    let last = -1;
+    const start = performance.now();
+    const tick = (now: number): void => {
+      const next = loopFrameAt(now - start, fps, lengthFrames);
+      if (next !== last && !capturing.current) {
+        last = next;
+        bridge.seek(next);
+      }
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [bridge, frame, fps, lengthFrames]);
+
+  const ready = live && status === "ready";
+  const aspectRatio = `${width} / ${height}`;
+  return (
+    <div
+      ref={setWrapper}
+      className={props.className === undefined ? "component-stage" : `component-stage ${props.className}`}
+      data-live={ready ? "true" : undefined}
+      style={{ aspectRatio }}
+    >
+      {/* THE POSTER UNDER A STAGE THAT IS NOT READY, so going live never
+          flashes an empty ground. */}
+      {!ready && poster !== null ? <img className="component-stage-poster" src={poster} alt="" draggable={false} /> : null}
+      {!live && poster === null ? props.fallback : null}
+      {live ? (
+        <iframe
+          ref={iframeRef}
+          className="component-stage-frame"
+          src={hostSettled ? src : undefined}
+          title={props.title}
+          tabIndex={-1}
+          style={{ aspectRatio, opacity: ready || poster === null ? 1 : 0 }}
+        />
+      ) : null}
+      {!live ? (
+        inView && wantLive && poster === null ? (
+          <span className="component-stage-status" role="status">
+            Preview paused
+          </span>
+        ) : null
+      ) : status === "ready" || poster !== null ? null : (
+        <span className="component-stage-status" role="status">
+          {status === "loading" ? "Loading the preview…" : status}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Every bridge handler, as a no-op except the two this preview reads. An
+ * EXPLICIT object, so a handler the bridge grows later is a compile error
+ * here rather than a silent `undefined` the stage calls. The boolean ones
+ * answer false: the preview takes no gesture, no key and no key light.
+ */
+function previewHandlers(on: { onReady(): void; onError(message: string): void }): ShotBridgeHandlers {
+  const none = (): void => {};
+  const refuse = (): boolean => false;
+  return {
+    onReady: () => on.onReady(),
+    onError: (message) => on.onError(message),
+    onStageBusy: none,
+    onPerformance: none,
+    onMaterialCompile: none,
+    onPick: none,
+    onEnterLayer: none,
+    onTextEdit: none,
+    onContextMenu: none,
+    onMeshStats: none,
+    onMeshMaterialSlots: none,
+    onInstanceNaturalSize: none,
+    onTextAutoSize: none,
+    onCommentPin: none,
+    onStudioCommentAt: none,
+    onKeyLightStart: refuse,
+    onKeyLight: none,
+    onKeyLightEnd: none,
+    onIsolationOrbitTaken: none,
+    onFitRequest: none,
+    onViewChange: none,
+    onWorkingViewChange: none,
+    onActivePane: none,
+    onGestureStart: refuse,
+    onGesture: none,
+    onGestureEnd: none,
+    onFramingGestureStart: refuse,
+    onFramingGesture: refuse,
+    onFramingGestureEnd: none,
+    onLeavePilot: none,
+    onCameraDriver: none,
+    onWaypointGesture: none,
+    onDraw: none,
+    onPenCommit: none,
+    onSplineCreateCommit: none,
+    onSplinePointPick: none,
+    onSplinePointGestureStart: refuse,
+    onSplinePointGesture: none,
+    onSplinePointGestureEnd: none,
+    onSplineSegmentInsert: none,
+    onSplinePointDelete: none,
+    onSplinePointModeEnd: none,
+    onGuideGestureStart: refuse,
+    onGuideGesture: none,
+    onGuideGestureEnd: none,
+    onGuideSet: none,
+    onGuideRemove: none,
+    onPathKeyGestureStart: refuse,
+    onPathKeyGesture: none,
+    onPathKeyGestureEnd: none,
+    onPathKeyDoubleClick: none,
+    onKey: refuse,
+    // The preview's own failures show in its status line. Stage health is
+    // the main stage's report to an agent, never this one's.
+    onPieceFailures: none,
+    onStageHealth: none,
+  };
+}