@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/storyboard/shotboard/SketchItem.tsx

@@ -0,0 +1,240 @@
+// ONE ITEM ON THE SKETCH PAPER (Paper SB3), drawn in the DOM at any zoom.
+//
+// Placed in PERCENTAGES of the paper (MiniSketch's `boxStyle`) and sized in
+// `cqw` of it, so a zoom changes the paper's width and nothing here
+// re-renders for it. Back to front as stored: each item is its own element in
+// the sketch's order, an arrow included (one paper-sized SVG each), so the
+// paint order on screen is the order the Layers list and the stage show.
+//
+//   ref     an image card's picture (`useImageThumb`, the item's fit) with its
+//           file name under it; a video's first frame; a component's poster
+//           (posterCache.ts, the card preview's own key), else its name tile,
+//           tagged "component"; "Missing" for a card that is gone
+//   text    the words at their role's size, in the sketch ink
+//   box     light, dark or accent, its label in the corner
+//   arrow   a line with an open head and its label over the head; the line
+//           takes the pointer, the paper around it does not
+//
+// The item only draws and names itself (`data-item`, an aria label). What a
+// press does is the canvas's (SketchCanvas.tsx).
+import { useEffect, useRef } from "react";
+import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent } from "react";
+import { SKETCH_TEXT_MAX, SKETCH_TEXT_SIZE, sketchCardOf } from "@dailies-studio/shot/doc";
+import type { Doc3D, SketchArrow3D, SketchItem3D, SketchRef3D } from "@dailies-studio/shot/doc";
+import { COMPONENT_ICON, kindIcon } from "../../../icons.js";
+import { useShotEditor } from "../../../state/context.js";
+import { useImageThumb } from "../../../state/imageThumbs.js";
+import { closureFor } from "../ComponentStage.js";
+import { arrowPath, boxStyle } from "../MiniSketch.js";
+import { posterKey, usePoster } from "../posterCache.js";
+import { MediaPoster } from "../ReferencePreview.js";
+import { assetUrl } from "../ReferencePreview.js";
+import { componentNameOf, fileNameOf, itemKindOf, itemNameOf } from "./sketchModel.js";
+
+/** A box label's size, design px: the stage's (sketch.ts). */
+const LABEL_SIZE = 24;
+
+/** `px` design px as a share of the paper's width. */
+export const cqw = (doc: Doc3D, px: number): string => `${(px / doc.size.width) * 100}cqw`;
+
+/** What a screen reader hears for an item: its kind, then its name. */
+export function itemLabelOf(doc: Doc3D, item: SketchItem3D): string {
+  return `${itemKindOf(doc, item)}: ${itemNameOf(doc, item)}`;
+}
+
+export interface SketchItemViewProps {
+  doc: Doc3D;
+  item: SketchItem3D;
+  /** The paper's width in CSS px: the picture size a thumbnail asks for. */
+  paperPx: number;
+  selected: boolean;
+  /** Draw only: no focus, no pointer, no label (Play's overlay). */
+  inert?: boolean;
+  /** The text editor is open on this item. */
+  editing?: boolean;
+  onEditEnd?: (text: string) => void;
+}
+
+export function SketchItemView(props: SketchItemViewProps) {
+  const { doc, item } = props;
+  if (item.kind === "arrow") return <ArrowView {...props} item={item} />;
+  const own = props.inert === true ? {} : interactive(props);
+  const style = boxStyle(doc, item.position, item.size);
+  if (item.kind === "text") {
+    return (
+      <div {...own} className={`sketch-item is-text is-${item.role}`} data-align={item.align ?? "start"} style={{ ...style, fontSize: cqw(doc, SKETCH_TEXT_SIZE[item.role]) }}>
+        {props.editing === true ? <TextEditor text={item.text} onEnd={props.onEditEnd} /> : item.text}
+      </div>
+    );
+  }
+  if (item.kind === "box") {
+    return (
+      <div {...own} className="sketch-item is-box" data-tone={item.tone ?? "light"} style={style}>
+        {item.label === undefined ? null : (
+          <span className="sketch-item-label" style={{ fontSize: cqw(doc, LABEL_SIZE) }}>
+            {item.label}
+          </span>
+        )}
+      </div>
+    );
+  }
+  return <RefView {...props} item={item} own={own} style={style} />;
+}
+
+/** The attributes every pressable item carries. */
+function interactive(props: SketchItemViewProps) {
+  return {
+    "data-item": props.item.id,
+    "data-testid": `sketch-item-${props.item.id}`,
+    "data-selected": props.selected ? "" : undefined,
+    tabIndex: 0,
+    role: "button",
+    "aria-pressed": props.selected,
+    "aria-label": itemLabelOf(props.doc, props.item),
+  } as const;
+}
+
+function RefView(props: SketchItemViewProps & { item: SketchRef3D; own: object; style: CSSProperties }) {
+  const { doc, item } = props;
+  const card = sketchCardOf(doc, item);
+  const asset = card?.type === "asset" ? doc.assets[card.asset] : undefined;
+  const image = asset?.kind === "image" ? asset : undefined;
+  const px = (item.size[0] / doc.size.width) * props.paperPx;
+  const thumb = useImageThumb(image === undefined ? "" : assetUrl(image.path), image?.hash ?? "", px);
+  const fit = item.fit ?? "cover";
+  if (image !== undefined) {
+    return (
+      <div {...props.own} className="sketch-item is-image" style={props.style}>
+        {thumb === null ? null : <img src={thumb} alt="" draggable={false} style={{ objectFit: fit }} />}
+        {props.inert === true ? null : (
+          <span className="sketch-item-caption" aria-hidden="true">
+            {kindIcon("image")}
+            {fileNameOf(image.path)}
+          </span>
+        )}
+      </div>
+    );
+  }
+  if (asset?.kind === "video" && card?.type === "asset") {
+    const at = card.frame === undefined ? null : (card.frame * doc.fps.den) / doc.fps.num;
+    return (
+      <div {...props.own} className="sketch-item is-image" style={props.style}>
+        <MediaPoster className="sketch-item-media" src={assetUrl(asset.path)} atSeconds={at} />
+        {props.inert === true ? null : (
+          <span className="sketch-item-caption" aria-hidden="true">
+            {kindIcon("video")}
+            {fileNameOf(asset.path)}
+          </span>
+        )}
+      </div>
+    );
+  }
+  if (card?.type === "component") {
+    return (
+      <div {...props.own} className="sketch-item is-component" style={props.style}>
+        <ComponentPicture doc={doc} card={card} />
+        {props.inert === true ? null : (
+          <span className="sketch-item-tag" aria-hidden="true">
+            {COMPONENT_ICON}
+            component
+          </span>
+        )}
+      </div>
+    );
+  }
+  return (
+    <div {...props.own} className="sketch-item is-missing" style={props.style}>
+      <span className="sketch-item-label" style={{ fontSize: cqw(doc, LABEL_SIZE) }}>
+        Missing
+      </span>
+    </div>
+  );
+}
+
+type ComponentCard = Extract<NonNullable<ReturnType<typeof sketchCardOf>>, { type: "component" }>;
+
+/** The card preview's poster when one was captured (the same key
+ *  `ComponentStage` writes), else the component's name on a tile. */
+function ComponentPicture({ doc, card }: { doc: Doc3D; card: ComponentCard }) {
+  const contract = useShotEditor((s) => (card.component === undefined ? undefined : s.contracts[card.component]));
+  const studio = card.def !== undefined && doc.components?.[card.def] !== undefined;
+  const contentHash = studio ? closureFor(doc, card.def!).hash : (contract?.contractHash ?? card.contractHash ?? "none");
+  const poster = usePoster(posterKey(card.component ?? card.def ?? card.id, contentHash, card.props));
+  if (poster !== null) return <img className="sketch-item-poster" src={poster} alt="" draggable={false} />;
+  return <span className="sketch-item-tile">{componentNameOf(doc, card)}</span>;
+}
+
+function ArrowView(props: SketchItemViewProps & { item: SketchArrow3D }) {
+  const { doc, item } = props;
+  const { width: w, height: h } = doc.size;
+  const d = arrowPath(item.from, item.to);
+  const own = props.inert === true ? null : interactive(props);
+  return (
+    <>
+      <svg
+        className="sketch-item is-arrow"
+        data-selected={props.selected ? "" : undefined}
+        viewBox={`${-w / 2} ${-h / 2} ${w} ${h}`}
+        preserveAspectRatio="none"
+        aria-hidden={own === null ? true : undefined}
+      >
+        {/* THE WIDE STROKE TAKES THE POINTER: a 2px line is a 2px target. */}
+        {own === null ? null : <path className="sketch-arrow-hit" d={d} {...own} />}
+        <path className="sketch-arrow-line" d={d} />
+      </svg>
+      {item.label === undefined ? null : (
+        <span
+          className="sketch-item-label is-arrow"
+          aria-hidden="true"
+          style={{
+            left: `${(item.to[0] / w + 0.5) * 100}%`,
+            top: `${((item.to[1] - 40) / h + 0.5) * 100}%`,
+            fontSize: cqw(doc, LABEL_SIZE),
+          }}
+        >
+          {item.label}
+        </span>
+      )}
+    </>
+  );
+}
+
+/**
+ * The text editor over a text item: Enter, Escape or a click away keeps the
+ * words, as the Studio's inline editor does (`InlineTextEditor`) and as design
+ * tools do, so a new item's typed words are never thrown away. Shift+Enter
+ * breaks a line. Every key stays here, so none reaches the shot board's tool
+ * letters or the board's Escape.
+ */
+function TextEditor(props: { text: string; onEnd: ((text: string) => void) | undefined }) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const done = useRef(false);
+  useEffect(() => {
+    ref.current?.focus();
+    ref.current?.select();
+  }, []);
+  const end = (text: string): void => {
+    if (done.current) return;
+    done.current = true;
+    props.onEnd?.(text);
+  };
+  const onKeyDown = (event: ReactKeyboardEvent<HTMLTextAreaElement>): void => {
+    event.stopPropagation();
+    if (event.key === "Escape" || (event.key === "Enter" && !event.shiftKey)) {
+      event.preventDefault();
+      end(event.currentTarget.value);
+    }
+  };
+  return (
+    <textarea
+      ref={ref}
+      className="sketch-text-editor"
+      defaultValue={props.text}
+      maxLength={SKETCH_TEXT_MAX}
+      aria-label="Text"
+      onKeyDown={onKeyDown}
+      onPointerDown={(event) => event.stopPropagation()}
+      onBlur={(event) => end(event.currentTarget.value)}
+    />
+  );
+}

package/src/panels/storyboard/shotboard/SketchLayers.tsx

@@ -0,0 +1,130 @@
+// THE SHOT BOARD'S LAYERS (Paper SB3, SB4): the open sketch's items, FRONT
+// FIRST, in 28px rows of icon, name and kind. The left column, 224 wide.
+//
+// A press selects (Shift adds or takes away), the selection is the sketch's
+// own (`sketchSelection`), and a row drags to restack (`restackSketchItem`).
+// The list is a listbox: the arrows walk it and select, Alt+arrow restacks
+// the focused row one step, and Delete reaches the board's own key.
+import { useEffect, useRef } from "react";
+import type { DragEvent as ReactDragEvent, KeyboardEvent as ReactKeyboardEvent, ReactElement } from "react";
+import type { Doc3D, SketchItem3D, StoryboardSketch3D } from "@dailies-studio/shot/doc";
+import { COMPONENT_ICON, kindIcon } from "../../../icons.js";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { itemKindOf, itemNameOf } from "./sketchModel.js";
+import type { SketchItemKind } from "./sketchModel.js";
+
+/** A layer row's own drag type: a restack inside this list only. */
+const LAYER_ROW_MIME = "application/x-dailies-sketch-layer";
+
+const KIND_ICON: Record<SketchItemKind, ReactElement> = {
+  Title: kindIcon("text"),
+  Body: kindIcon("text"),
+  Caption: kindIcon("text"),
+  Image: kindIcon("image"),
+  Video: kindIcon("video"),
+  Component: COMPONENT_ICON,
+  Box: kindIcon("rect"),
+  Arrow: kindIcon("arrow"),
+  Missing: kindIcon("rect"),
+};
+
+export function SketchLayers({ doc, sketch }: { doc: Doc3D; sketch: StoryboardSketch3D | undefined }) {
+  const store = useStore();
+  const selection = useShotEditor((s) => s.sketchSelection);
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const list = useRef<HTMLUListElement>(null);
+  const focusId = useRef<string | null>(null);
+  const items = sketch?.items ?? [];
+  // FRONT FIRST: the stored list is back to front.
+  const rows = [...items].reverse();
+  const selected = new Set(selection);
+
+  // THE FOCUS FOLLOWS A WALKED OR RESTACKED ROW.
+  useEffect(() => {
+    const id = focusId.current;
+    if (id === null) return;
+    focusId.current = null;
+    list.current?.querySelector<HTMLElement>(`[data-row="${id}"]`)?.focus();
+  });
+
+  /** A row's back-to-front index, which the store's restack takes. */
+  const stackIndex = (row: number): number => items.length - 1 - row;
+
+  const onKeyDown = (event: ReactKeyboardEvent, item: SketchItem3D, row: number): void => {
+    if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+    // Here, and not on the paper: the arrows move items there.
+    event.preventDefault();
+    event.stopPropagation();
+    const to = row + (event.key === "ArrowUp" ? -1 : 1);
+    if (to < 0 || to >= rows.length) return;
+    if (event.altKey) {
+      if (readOnly) return;
+      focusId.current = item.id;
+      store.restackSketchItem(item.id, stackIndex(to));
+      return;
+    }
+    const next = rows[to]!;
+    focusId.current = next.id;
+    store.setSketchSelection(event.shiftKey ? [...selection, next.id] : [next.id]);
+  };
+
+  const onDrop = (event: ReactDragEvent, row: number): void => {
+    const id = event.dataTransfer.getData(LAYER_ROW_MIME);
+    if (id === "") return;
+    event.preventDefault();
+    store.restackSketchItem(id, stackIndex(row));
+  };
+
+  return (
+    <aside className="sketch-layers" aria-label="Layers" data-testid="sketch-layers">
+      <header className="panel-head sketch-layers-head">
+        <h3 className="caps">Layers</h3>
+        <span className="sketch-count">{items.length}</span>
+      </header>
+      {rows.length === 0 ? (
+        <p className="sketch-layers-empty">Nothing on this sketch yet.</p>
+      ) : (
+        <ul ref={list} className="sketch-layer-list" role="listbox" aria-label="Layers" aria-multiselectable="true">
+          {rows.map((item, row) => {
+            const kind = itemKindOf(doc, item);
+            const on = selected.has(item.id);
+            return (
+              <li
+                key={item.id}
+                className="sketch-layer"
+                role="option"
+                aria-selected={on}
+                tabIndex={0}
+                data-row={item.id}
+                data-testid={`sketch-layer-${item.id}`}
+                draggable={!readOnly}
+                title={readOnly ? undefined : "Drag to restack, or Alt+arrow"}
+                onClick={(event) => {
+                  if (event.shiftKey) store.setSketchSelection(on ? selection.filter((id) => id !== item.id) : [...selection, item.id]);
+                  else store.setSketchSelection([item.id]);
+                }}
+                onKeyDown={(event) => onKeyDown(event, item, row)}
+                onDragStart={(event) => {
+                  event.dataTransfer.setData(LAYER_ROW_MIME, item.id);
+                  event.dataTransfer.effectAllowed = "move";
+                }}
+                onDragOver={(event) => {
+                  if (!event.dataTransfer.types.includes(LAYER_ROW_MIME)) return;
+                  event.preventDefault();
+                  event.dataTransfer.dropEffect = "move";
+                }}
+                onDrop={(event) => onDrop(event, row)}
+              >
+                <span className="sketch-layer-icon" aria-hidden="true">
+                  {KIND_ICON[kind]}
+                </span>
+                <span className="sketch-layer-name">{itemNameOf(doc, item)}</span>
+                <span className="sketch-layer-kind">{kind}</span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </aside>
+  );
+}

package/src/panels/storyboard/shotboard/SketchPlay.tsx

@@ -0,0 +1,108 @@
+// PLAY (Paper SB5): the open sketch live in ONE stage, the paper's size.
+//
+// `sketchStageDoc` turns the sketch into a throwaway one-Shot document (the
+// converter Lay out and the agent's picture share), and `StagePreview` draws
+// it on a second `/shot-stage.html`, looping over the shot's planned length:
+// one WebGL context for the whole sketch, and none until Play is pressed. The
+// stage unmounts on Stop. Components animate; pictures, text and boxes hold.
+//
+// A code component's instance takes the binding a placed one would carry
+// (`contractBinding`, the registry's import-or-snapshot verdict), so its props
+// reach it as the contract names them. Every document change reloads the
+// stage, which is how a prop edit in the inspector shows live.
+//
+// THE OVERLAY is DOM at half strength: the arrows with their labels, and a
+// dashed outline round each box with "<label> · <tone>". A preview fits the
+// frame edge to edge (stage/view.ts `fitView` with no margin), so the overlay
+// covers the whole paper, exactly over the drawn frame.
+// Under it, the progress line and the time chip, read from this preview's own
+// clock.
+import { useEffect, useMemo, useState } from "react";
+import { sketchCodeComponents, sketchStageDoc } from "@dailies-studio/shot/doc";
+import type { Doc3D, StoryboardSketch3D } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { clock } from "../../timeline/model.js";
+import { contractBinding } from "../ComponentStage.js";
+import { boxStyle } from "../MiniSketch.js";
+import { StagePreview, loopFrameAt } from "../StagePreview.js";
+import { SketchItemView } from "./SketchItem.js";
+
+const TONE_WORD = { light: "light", dark: "dark", accent: "accent" } as const;
+
+export function SketchPlay(props: { doc: Doc3D; partId: string; sketch: StoryboardSketch3D; width: number }) {
+  const { doc, sketch } = props;
+  const store = useStore();
+  const contracts = useShotEditor((s) => s.contracts);
+  const library = useShotEditor((s) => s.library);
+  const libraryLoaded = useShotEditor((s) => s.libraryLoaded);
+  const codeKey = sketchCodeComponents(doc, sketch).join("\n");
+
+  // THE CONTRACTS FIRST, so an instance binds as a placed one would.
+  useEffect(() => {
+    for (const id of codeKey === "" ? [] : codeKey.split("\n")) void store.loadContract(id);
+    if (codeKey !== "" && !libraryLoaded) void store.refreshLibrary();
+  }, [codeKey, libraryLoaded, store]);
+
+  const part = doc.storyboard?.parts.find((p) => p.id === props.partId);
+  const length = Math.max(1, part?.durationFrames ?? 1);
+  const stageDoc = useMemo(
+    () =>
+      sketchStageDoc(doc, props.partId, sketch.id, (id) =>
+        contractBinding(contracts[id], library.find((row) => row.id === id)?.contractAvailability),
+      ),
+    [doc, props.partId, sketch.id, contracts, library],
+  );
+  const size = useMemo(() => ({ width: doc.size.width, height: doc.size.height }), [doc.size.width, doc.size.height]);
+
+  // THE READOUT'S CLOCK, from the moment the stage said it drew: a chrome
+  // readout, never the stage's time.
+  const [since, setSince] = useState<number | null>(null);
+  const [frame, setFrame] = useState(0);
+  const fps = doc.fps.num / doc.fps.den;
+  useEffect(() => {
+    if (since === null) return;
+    let raf = 0;
+    const tick = (now: number): void => {
+      setFrame(loopFrameAt(now - since, fps, length));
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [since, fps, length]);
+
+  return (
+    <div className="sketch-paper is-playing" data-ground={sketch.ground ?? "paper"} data-testid="sketch-play" style={{ width: props.width, aspectRatio: `${size.width} / ${size.height}` }}>
+      <StagePreview
+        doc={stageDoc}
+        size={size}
+        lengthFrames={length}
+        slotKey="sketch-play"
+        posterKey={null}
+        title={`${sketch.label ?? "Sketch"} playing`}
+        className="sketch-play-stage"
+        onReady={() => setSince((was) => was ?? performance.now())}
+      />
+      <div className="sketch-play-overlay" aria-hidden="true">
+        {sketch.items.map((item) => {
+          if (item.kind === "arrow") return <SketchItemView key={item.id} doc={doc} item={item} paperPx={props.width} selected={false} inert />;
+          if (item.kind !== "box") return null;
+          return (
+            <span key={item.id} className="sketch-play-box" style={boxStyle(doc, item.position, item.size)}>
+              {item.label === undefined ? null : (
+                <span className="sketch-play-chip">{`${item.label} · ${TONE_WORD[item.tone ?? "light"]}`}</span>
+              )}
+            </span>
+          );
+        })}
+      </div>
+      <span className="sketch-play-progress" aria-hidden="true">
+        <span style={{ width: `${(frame / length) * 100}%` }} />
+      </span>
+      <span className="sketch-play-time" data-testid="sketch-play-time">
+        <span className="sketch-play-dot" aria-hidden="true" />
+        {clock(frame, doc.fps)}
+        <span className="sketch-play-total">{`/ ${clock(length, doc.fps)}`}</span>
+      </span>
+    </div>
+  );
+}

package/src/panels/storyboard/shotboard/SketchStrip.tsx

@@ -0,0 +1,178 @@
+// THE SKETCH STRIP (Paper SB2, SB3): a shot's sketches under the paper, each
+// a thumbnail (`MiniSketch`: the still stage's picture once drawn, the DOM
+// drawing until then) with "1 · Start" and its time, then
+// "+ Sketch", which copies the open one so the next key moment starts from
+// it (the first one is "Start" at 0.00s). Hidden at `SKETCHES_MAX`.
+//
+// A press shows that sketch; a thumb drags to reorder (`moveSketch`); its
+// menu (right press, or the context-menu key) is Rename, Set time, Duplicate
+// and Delete. Rename and Set time edit in place under the thumb, and close on
+// Enter, Escape or any blur: a field that commits only a change used to stay
+// open under an Escape or a click away, with nothing else to close it.
+import { useState } from "react";
+import type { MouseEvent as ReactMouseEvent } from "react";
+import { SKETCHES_MAX, SKETCH_LABEL_MAX } from "@dailies-studio/shot/doc";
+import type { Doc3D, StoryboardSketch3D } from "@dailies-studio/shot/doc";
+import { TextField, useContextMenu } from "@dailies-studio/ui";
+import { ADD_ICON } from "../../../icons.js";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { gateForViewer } from "../../../state/menu.js";
+import { formatDuration } from "../../timeline/model.js";
+import { MiniSketch } from "../MiniSketch.js";
+import { useSketchThumbs } from "../StillThumbs.js";
+
+/** A thumb's own drag type: a reorder inside one strip. */
+const SKETCH_THUMB_MIME = "application/x-dailies-sketch-thumb";
+/** The thumb's width, CSS px (SB2). */
+export const SKETCH_THUMB_PX = 128;
+
+/** What the Set time field takes, said when it takes nothing. */
+export const SKETCH_TIME_REFUSAL = "Type a time in seconds (1.6) or in frames (48f).";
+
+/** "0.00s" for a timed sketch, nothing for an untimed one. */
+export function sketchTimeOf(doc: Doc3D, sketch: StoryboardSketch3D): string {
+  return sketch.frame === undefined ? "" : formatDuration((sketch.frame * doc.fps.den) / doc.fps.num);
+}
+
+/**
+ * A sketch's typed time back to a frame of its shot: seconds ("1.6", "1.60s")
+ * or frames ("48f"), zero included in either (the first sketch is Start, at
+ * 0), on the whole frame. Null for anything else: a bare unit, a sign, a word.
+ * A sketch is a moment, so unlike a length nothing here has to be above zero.
+ */
+export function parseSketchFrame(text: string, fps: number): number | null {
+  const m = /^\s*(\d+(?:\.\d*)?|\.\d+)\s*(s|f)?\s*$/i.exec(text);
+  if (m === null) return null;
+  const n = Number(m[1]);
+  const frames = m[2]?.toLowerCase() === "f" ? n : n * fps;
+  return Number.isFinite(frames) ? Math.round(frames) : null;
+}
+
+export function SketchStrip(props: { doc: Doc3D; partId: string; sketches: readonly StoryboardSketch3D[]; current: string | null }) {
+  const { doc, sketches } = props;
+  const store = useStore();
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const menu = useContextMenu();
+  const [editing, setEditing] = useState<{ id: string; field: "label" | "time" } | null>(null);
+  const fps = doc.fps.num / doc.fps.den;
+  // Each thumb as the still stage draws it, once ready.
+  const pictures = useSketchThumbs(props.partId, sketches.map((sketch) => sketch.id));
+
+  const openMenu = (event: ReactMouseEvent, sketch: StoryboardSketch3D): void => {
+    event.preventDefault();
+    store.selectSketch(sketch.id);
+    const full = sketches.length >= SKETCHES_MAX;
+    menu.open(
+      { x: event.clientX, y: event.clientY },
+      gateForViewer(store.getState(), [
+        { kind: "action", id: "sketch-rename", label: "Rename", onSelect: () => setEditing({ id: sketch.id, field: "label" }) },
+        { kind: "action", id: "sketch-time", label: "Set time", onSelect: () => setEditing({ id: sketch.id, field: "time" }) },
+        {
+          kind: "action",
+          id: "sketch-duplicate",
+          label: "Duplicate",
+          disabled: full,
+          title: full ? `A shot holds at most ${SKETCHES_MAX} sketches.` : undefined,
+          onSelect: () => store.duplicateSketch(sketch.id),
+        },
+        { kind: "action", id: "sketch-delete", label: "Delete", danger: true, onSelect: () => store.removeSketch(sketch.id) },
+      ]),
+    );
+  };
+
+  const add = (): void => {
+    if (props.current !== null) store.duplicateSketch(props.current);
+    else store.addSketch(props.partId);
+  };
+
+  return (
+    <div className="sketch-strip" role="group" aria-label="Sketches" data-testid="sketch-strip">
+      {sketches.map((sketch, at) => {
+        const current = sketch.id === props.current;
+        const name = `${at + 1} · ${sketch.label ?? `Sketch ${at + 1}`}`;
+        const time = sketchTimeOf(doc, sketch);
+        return (
+          <div
+            key={sketch.id}
+            className="sketch-thumb-cell"
+            data-testid={`sketch-thumb-${sketch.id}`}
+            draggable={!readOnly && editing === null}
+            onDragStart={(event) => {
+              event.dataTransfer.setData(SKETCH_THUMB_MIME, sketch.id);
+              event.dataTransfer.effectAllowed = "move";
+            }}
+            onDragOver={(event) => {
+              if (!event.dataTransfer.types.includes(SKETCH_THUMB_MIME)) return;
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "move";
+            }}
+            onDrop={(event) => {
+              const id = event.dataTransfer.getData(SKETCH_THUMB_MIME);
+              if (id === "") return;
+              event.preventDefault();
+              store.moveSketch(id, at);
+            }}
+          >
+            <button
+              type="button"
+              className="sketch-thumb"
+              aria-pressed={current}
+              aria-label={`${name}${time === "" ? "" : ` at ${time}`}`}
+              title="Press to show it. Right press for more."
+              onClick={() => store.selectSketch(sketch.id)}
+              onContextMenu={(event) => openMenu(event, sketch)}
+            >
+              <MiniSketch doc={doc} sketch={sketch} width={SKETCH_THUMB_PX} picture={pictures.get(sketch.id) ?? null} />
+            </button>
+            {/* The editors close on ANY blur, Escape's included (TextField
+                cancels by blurring); their own blur commits a change first. */}
+            <div className="sketch-thumb-label" {...(editing?.id === sketch.id ? { onBlur: () => setEditing(null) } : {})}>
+              {editing?.id === sketch.id && editing.field === "label" ? (
+                <TextField
+                  autoFocus
+                  value={sketch.label ?? ""}
+                  ariaLabel="Sketch name"
+                  onCommit={(text) => {
+                    const label = text.trim().slice(0, SKETCH_LABEL_MAX).trim();
+                    if (label !== (sketch.label ?? "")) store.updateSketch(sketch.id, { label: label === "" ? null : label });
+                  }}
+                />
+              ) : editing?.id === sketch.id && editing.field === "time" ? (
+                <TextField
+                  autoFocus
+                  value={time}
+                  placeholder="0.00s"
+                  ariaLabel="Sketch time"
+                  onCommit={(text) => {
+                    // Emptied: the sketch is untimed again.
+                    if (text.trim() === "") {
+                      if (sketch.frame !== undefined) store.updateSketch(sketch.id, { frame: null });
+                      return;
+                    }
+                    const frame = parseSketchFrame(text, fps);
+                    if (frame === null) store.reportError(SKETCH_TIME_REFUSAL);
+                    else if (frame !== sketch.frame) store.updateSketch(sketch.id, { frame });
+                  }}
+                />
+              ) : (
+                <>
+                  <span className={`sketch-thumb-name${current ? " is-current" : ""}`}>{name}</span>
+                  <span className="sketch-thumb-time">{time}</span>
+                </>
+              )}
+            </div>
+          </div>
+        );
+      })}
+      {sketches.length >= SKETCHES_MAX ? null : (
+        <button type="button" className="sketch-add" data-testid="sketch-add" disabled={readOnly} onClick={add}>
+          <span className="sketch-add-icon" aria-hidden="true">
+            {ADD_ICON}
+          </span>
+          Sketch
+        </button>
+      )}
+      {menu.menu}
+    </div>
+  );
+}