@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/storyboard/ReferencePreview.tsx

@@ -0,0 +1,217 @@
+// WHAT A REFERENCE LOOKS LIKE, in one component so the library tile and the
+// inspector's lead cannot drift into two answers about the same card.
+//
+// FOUR KINDS, FOUR ANSWERS, and each one is the most useful thing that kind
+// has:
+//
+//   An image is the image, lazily.
+//
+//   A video is a `<video preload="metadata">` at a `#t=` media fragment, which
+//   is how you get a poster frame with no seek dance: the browser decodes to
+//   the fragment on its own and never plays. `muted` because a rail of six
+//   autoloading videos that could make sound is a rail nobody opens twice.
+//
+//   A note is ITS OWN TEXT, clamped to three lines. A generic "N" glyph is the
+//   least informative thing a note can show, and the text is the whole card.
+//
+//   A component is an icon over its export name, NEVER AN IFRAME. The board's
+//   cards mount live harnesses because a card is a card; a rail of twenty-nine
+//   harnesses is not a rail, it is twenty-nine bundles and twenty-nine module
+//   graphs behind a scroll bar.
+//
+//   A library item is its shipped thumb (a shot's poster, a material's
+//   sphere, a pack's contact sheet) when the catalog row carries one, and its
+//   kind over its id when it does not (a blueprint ships no picture).
+//
+// A MISSING ASSET IS A STATE, not an empty box: an author who moved a file
+// needs the card to say so where they are looking at it. A library item this
+// build does not ship is the same state, for the same reason.
+import type { ReferenceItem3D, ShotAsset } from "@dailies-studio/shot/doc";
+import type { LibraryItem } from "../../api.js";
+import { elementSummary, linkHost } from "../../state/storyboardModel.js";
+
+/** A stored asset's URL. Here, with the card previews, because Studio's
+ *  Brief draws cards too and loads with the shell, while ShotCard is the
+ *  board's. */
+export const assetUrl = (path: string): string => `/studio/assets/${encodeURIComponent(path)}`;
+
+/** A card's kind as one glyph, for a thumb with no picture. A component card
+ *  reads as Components shows it: a Studio-made definition is "3D", code is
+ *  "</>". */
+export function pinGlyph(item: ReferenceItem3D): string {
+  if (item.type === "component") return item.def !== undefined ? "3D" : "</>";
+  return item.type === "note" ? "N" : item.type === "link" ? "↗" : item.type.charAt(0).toUpperCase();
+}
+
+/** What the CATALOG says a card should draw (`referenceThumbOf`). */
+export interface ReferenceThumb {
+  libraryThumb: string | undefined;
+  libraryKind: string | undefined;
+  libraryMissing: boolean;
+}
+
+/**
+ * What the CATALOG says a card should draw: a library card's thumb, kind and
+ * whether this build ships it at all, and a shipped component's thumb (the
+ * row whose `installedAs` is this card's component). One reader, so the lane
+ * thumbnails, the inspector lead and the board's cards cannot disagree.
+ * Pure, for a caller that draws many cards from one catalog read.
+ */
+export function referenceThumbOf(item: ReferenceItem3D, catalog: readonly LibraryItem[], loaded: boolean): ReferenceThumb {
+  if (item.type === "library") {
+    const row = catalog.find((r) => r.id === item.library);
+    return { libraryThumb: row?.thumb, libraryKind: row?.kind, libraryMissing: loaded && row === undefined };
+  }
+  if (item.type === "component") {
+    return { libraryThumb: catalog.find((r) => r.installedAs === item.component)?.thumb, libraryKind: undefined, libraryMissing: false };
+  }
+  return { libraryThumb: undefined, libraryKind: undefined, libraryMissing: false };
+}
+
+export function ReferencePreview({
+  item,
+  asset,
+  fps,
+  libraryThumb,
+  libraryKind,
+  libraryMissing,
+}: {
+  item: ReferenceItem3D;
+  asset?: ShotAsset | undefined;
+  /** Frames per second, so a stored still frame becomes the seconds a media
+   *  fragment takes. Absent leaves the poster at the video's own first frame,
+   *  which is the honest fallback rather than a guessed rate. */
+  fps?: { num: number; den: number } | undefined;
+  /** A `library` card's thumb URL, from its CATALOG row and never guessed
+   *  from the id: the thumb route answers 404 for an item that ships none. */
+  libraryThumb?: string | undefined;
+  /** What the CATALOG row says the item is, when the caller holds one. A
+   *  card's own `kind` is validated against the enum and never against the id
+   *  it names, so it can be wrong; the glyph draws the item, not the claim.
+   *  Absent, the document's kind is all there is to draw. */
+  libraryKind?: string | undefined;
+  /** The loaded catalog has no row at this card's id. */
+  libraryMissing?: boolean | undefined;
+}) {
+  if (item.type === "library") {
+    if (libraryMissing === true) {
+      return (
+        <span className="reference-preview is-missing" title={`${item.library} v${item.version} is not in this build's library`}>
+          Not in this build's library
+        </span>
+      );
+    }
+    if (libraryThumb !== undefined) {
+      return <img className="reference-preview" src={libraryThumb} alt="" loading="lazy" />;
+    }
+    const kind = libraryKind ?? item.kind;
+    return (
+      <span
+        className="reference-preview is-component"
+        title={
+          kind === item.kind
+            ? `${kind} ${item.library} v${item.version}`
+            : `${item.library} v${item.version} is a ${kind}; this card says ${item.kind}`
+        }
+      >
+        <span className="reference-preview-glyph" aria-hidden="true">
+          {kind}
+        </span>
+        <span className="reference-preview-name">{item.library}</span>
+      </span>
+    );
+  }
+  if (item.type === "note") {
+    return (
+      <span className="reference-preview is-note" title={item.text}>
+        {item.text.trim() === "" ? "Empty note" : item.text}
+      </span>
+    );
+  }
+  if (item.type === "component") {
+    // A SHIPPED component draws its shipped thumb: the component on the real
+    // stage, where a live harness would frame it through `DefaultRig` and
+    // show a crop (measured 2026-09-25).
+    if (libraryThumb !== undefined) {
+      return <img className="reference-preview" src={libraryThumb} alt="" loading="lazy" />;
+    }
+    return (
+      <span className="reference-preview is-component" title={item.component}>
+        <span className="reference-preview-glyph" aria-hidden="true">
+          {pinGlyph(item)}
+        </span>
+        <span className="reference-preview-name">{item.component === undefined ? item.label : exportNameOf(item.component)}</span>
+      </span>
+    );
+  }
+  if (item.type === "link") {
+    return (
+      <span className="reference-preview is-component" title={item.url}>
+        <span className="reference-preview-name">{item.title ?? linkHost(item.url)}</span>
+      </span>
+    );
+  }
+  if (item.type !== "asset") {
+    return (
+      <span className="reference-preview is-component" title={item.label}>
+        <span className="reference-preview-name">{elementSummary(item)}</span>
+      </span>
+    );
+  }
+  if (asset === undefined) {
+    return (
+      <span className="reference-preview is-missing" title="The file this card points at is not in the Project">
+        File missing
+      </span>
+    );
+  }
+  const src = `/studio/assets/${encodeURIComponent(asset.path)}`;
+  if (asset.kind === "image") {
+    return <img className="reference-preview" src={src} alt="" loading="lazy" />;
+  }
+  if (asset.kind === "video") {
+    const at = item.frame === undefined || fps === undefined ? null : (item.frame * fps.den) / fps.num;
+    return <MediaPoster className="reference-preview" src={src} atSeconds={at} />;
+  }
+  const glyph = asset.kind === "font" ? "Aa" : asset.kind === "audio" ? "♪" : asset.kind === "model" ? "3D" : "·";
+  return (
+    <span className="reference-preview is-kind" aria-hidden="true">
+      {glyph}
+    </span>
+  );
+}
+
+/**
+ * A video's poster frame, shared by the board's cards and the rail's Assets
+ * grid. `#t=` is a MEDIA FRAGMENT and not a query: the browser seeks to it while
+ * loading metadata, so the poster is that still with no `seeked` listener, no
+ * canvas draw and no second network trip. Null leaves the video's own first
+ * frame.
+ */
+export function MediaPoster({
+  src,
+  atSeconds,
+  className,
+}: {
+  src: string;
+  atSeconds: number | null;
+  className: string;
+}) {
+  return (
+    <video
+      className={className}
+      src={atSeconds === null ? src : `${src}#t=${atSeconds.toFixed(3)}`}
+      preload="metadata"
+      muted
+      playsInline
+      aria-hidden="true"
+    />
+  );
+}
+
+/** "src/Card.tsx#Card" -> "Card". The registry id is the title; the export is
+ *  what fits on a tile. */
+function exportNameOf(componentId: string): string {
+  const at = componentId.lastIndexOf("#");
+  return at === -1 ? componentId : componentId.slice(at + 1);
+}

package/src/panels/storyboard/ShotBrief.tsx

@@ -0,0 +1,360 @@
+// THE STUDIO'S BRIEF TAB (S4, Paper SB6): what the board says about the Shot
+// under the playhead, read here while it is built, the sketches handed over as
+// layers or as a guide, and the one write that sends the result back: "Mark
+// shot built".
+//
+//   head      "From the board" and "Open shot board" (this shot's board).
+//   shot      the number and name, the planned length, and the linked Shot's
+//             when it differs: the length the card shows, built or not.
+//   sketches  each sketch drawn small with its label and time, as the still
+//             stage draws it once that is ready (`useSketchThumbs`). A press picks
+//             the sketch "Lay out Sketch N" copies into real layers in one
+//             undo step (`layOutSketch`). Lay out is the Brief's one
+//             primary while there is a sketch (Paper SB6).
+//   guide     "Guide: Off | Sketch N" (`sketchGuide`): the stage draws that
+//             sketch as dashed outlines over the camera frame. A view. Its
+//             label sits in its row like every inspector row's, and past four
+//             words (Off and four sketches) the row is a Combobox, the house
+//             rule for a segmented row.
+//   words     What we see (`part.notes`) and the voice line.
+//   pinned    the cards pinned to this shot as a checklist. A tick comes from
+//             the data (D4): `requirementStatus` says the Shot uses it, or the
+//             author ticked it by hand (`done`). Only the hand tick is written
+//             here; the agent writes no ticks. A card that is no requirement
+//             (a note, a link, inspiration) lists with no box.
+//   style     the Style row's count, linked, never copied.
+//   footer    Mark shot built: `part.built.frame` = the playhead's frame in
+//             this Shot, one undo step (`markShotBuilt`). Built, it offers the
+//             playhead's frame again and Unmark.
+//
+// THE PART is the one LINKED to the Shot (`part.scene`): a Shot no plan links
+// has no brief, and says so. A VIEWER reads it all with the writes off.
+import { useState } from "react";
+import { framesToSeconds } from "@dailies-studio/engine";
+import { Combobox, InspectorRow, LockedControls, SegmentedControl } from "@dailies-studio/ui";
+import { isRequirement, partFramesOf, referenceImportanceOf, requirementStatus, sceneStart } from "@dailies-studio/shot/doc";
+import type { Doc3D, ReferenceItem3D, StoryboardPart3D, StoryboardSketch3D } from "@dailies-studio/shot/doc";
+import { LAY_OUT_ICON, OPEN_ELSEWHERE_ICON } from "../../icons.js";
+import { useShotEditor, useShotEditorHot, useStore } from "../../state/context.js";
+import { storyEntries, styleItemsOf } from "../../state/storyboardModel.js";
+import { formatDuration } from "../timeline/model.js";
+import { MiniSketch } from "./MiniSketch.js";
+import { assetUrl, pinGlyph } from "./ReferencePreview.js";
+import { useSketchThumbs } from "./StillThumbs.js";
+
+/** A thumb's picture width, CSS px (Paper SB6: 132x74). */
+const THUMB_W = 132;
+
+/** The most words a segmented row holds (docs/design-system.md): past it the
+ *  Guide is a Combobox. */
+const GUIDE_SEGMENTS_MAX = 4;
+
+/** The part linked to `sceneId`, or null. */
+export function briefPartOf(doc: Doc3D, sceneId: string | null): StoryboardPart3D | null {
+  if (sceneId === null) return null;
+  return doc.storyboard?.parts.find((p) => p.scene === sceneId) ?? null;
+}
+
+/** One pinned row's tick (D4): "data" when the Shot uses it, "hand" when the
+ *  author ticked it, "open" when neither, null when it is no requirement. */
+export function briefTick(doc: Doc3D, item: ReferenceItem3D): "data" | "hand" | "open" | null {
+  if (!isRequirement(item)) return null;
+  if (item.done === true) return "hand";
+  return requirementStatus(doc, item)?.state === "satisfied" ? "data" : "open";
+}
+
+/** "1 · Start": a sketch's number, then its label when it has one. */
+export function sketchName(sketch: StoryboardSketch3D, index: number): string {
+  return sketch.label === undefined ? String(index + 1) : `${index + 1} · ${sketch.label}`;
+}
+
+export function ShotBrief() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const sceneId = useShotEditor((s) => s.enteredScene ?? s.sceneId);
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const guide = useShotEditor((s) => s.sketchGuide);
+  // The sketch Lay out copies: the one picked, else the first.
+  const [picked, setPicked] = useState<string | null>(null);
+  // The playhead is clock-bearing, so this reads it HOT, but as one boolean:
+  // a playing clock re-renders the Brief only when it crosses the built frame.
+  // Its Shot from the same hot read: a cut the transport plays leaves the cold
+  // `sceneId` above on the Shot it left until Pause, and that Shot's clamp
+  // read the new Shot's frames as its own last one.
+  const onBuilt = useShotEditorHot(
+    (s) => (s.enteredScene ?? s.sceneId) === sceneId && playheadOnBuilt(s.doc, sceneId, s.frame),
+  );
+  const part = doc === null ? null : briefPartOf(doc, sceneId);
+  // The sketches as the still stage draws them: the still queue runs while
+  // the Brief shows (`stillThumbsActive`). The DOM drawing until then.
+  const pictures = useSketchThumbs(part?.id ?? "", (part?.sketches ?? []).map((sketch) => sketch.id));
+  if (doc === null) return null;
+
+  if (part === null || sceneId === null) {
+    return (
+      <div className="shot-brief" data-testid="shot-brief">
+        <BriefHead partId={null} />
+        <p className="shot-brief-empty" data-testid="shot-brief-empty">
+          No planned shot on the board links this Shot. Plan it on the board to see its brief here.
+        </p>
+      </div>
+    );
+  }
+
+  const fps = doc.fps;
+  const at = storyEntries(doc).findIndex((e) => (e.kind === "shot" ? e.shot.part?.id : e.part.id) === part.id);
+  const number = at < 0 ? null : String(at + 1).padStart(2, "0");
+  const pins = (doc.resources?.references ?? []).filter((r) => r.part === part.id);
+  const style = styleItemsOf(doc).length;
+  // The length the card shows (decision 1): the linked Shot's, built or not.
+  const shotFrames = partFramesOf(doc, part);
+  const built = part.built;
+  const sketches = part.sketches ?? [];
+  const chosen = sketches.findIndex((k) => k.id === picked);
+  const layIndex = chosen < 0 ? 0 : chosen;
+  const laySketch = sketches[layIndex];
+  // One primary per surface, as Paper SB6 draws it: Lay out holds it while
+  // there is a sketch to lay out, else the footer's button does.
+  const footPrimary = laySketch === undefined ? " is-primary" : "";
+  const guided = guide !== null && guide.partId === part.id && sketches.some((k) => k.id === guide.sketchId) ? guide.sketchId : null;
+  const guideTo = (value: string): void => store.setSketchGuide(value === "off" ? null : { partId: part.id, sketchId: value });
+
+  const layOut =
+    laySketch === undefined ? null : (
+      <section className="shot-brief-layout">
+        <button
+          type="button"
+          className="btn is-primary shot-brief-layout-run"
+          data-testid="shot-brief-layout"
+          disabled={readOnly}
+          onClick={() => void store.layOutSketch(part.id, laySketch.id)}
+        >
+          {LAY_OUT_ICON}
+          {`Lay out Sketch ${layIndex + 1}`}
+        </button>
+        <p className="shot-brief-help">Places images, components and text as layers. Boxes become placeholders.</p>
+      </section>
+    );
+
+  return (
+    <LockedControls value={readOnly}>
+      <div className="shot-brief" data-testid="shot-brief">
+        <div className="shot-brief-body">
+          <div className="shot-brief-origin">
+            <BriefHead partId={part.id} />
+            <header className="shot-brief-shot">
+              <span className="shot-brief-name" data-testid="shot-brief-name">
+                {number === null ? part.label : `${number} ${part.label}`}
+              </span>
+              <span className="shot-brief-length" data-testid="shot-brief-length">
+                {`· planned ${formatDuration(framesToSeconds(part.durationFrames, fps))}`}
+                {shotFrames === part.durationFrames ? null : ` · its Shot runs ${formatDuration(framesToSeconds(shotFrames, fps))}`}
+              </span>
+            </header>
+          </div>
+          <section className="shot-brief-section">
+            <h4 className="shot-brief-caps">Sketches</h4>
+            {sketches.length === 0 ? (
+              <p className="shot-brief-none" data-testid="shot-brief-no-sketches">
+                No sketches yet. Sketch this shot on its shot board.
+              </p>
+            ) : (
+              <ul className="shot-brief-sketches" aria-label="Sketches">
+                {sketches.map((sketch, i) => (
+                  <li key={sketch.id} className="shot-brief-sketch-item">
+                    <button
+                      type="button"
+                      className="shot-brief-thumb"
+                      data-testid={`shot-brief-sketch-${sketch.id}`}
+                      data-guide={guided === sketch.id ? "" : undefined}
+                      aria-pressed={i === layIndex}
+                      title={`Lay out Sketch ${i + 1}`}
+                      onClick={() => setPicked(sketch.id)}
+                    >
+                      <MiniSketch doc={doc} sketch={sketch} width={THUMB_W} picture={pictures.get(sketch.id) ?? null} />
+                    </button>
+                    <span className="shot-brief-sketch-label">
+                      <span className="shot-brief-sketch-name">{sketchName(sketch, i)}</span>
+                      {sketch.frame === undefined ? null : (
+                        <span className="shot-brief-sketch-time">{formatDuration(framesToSeconds(sketch.frame, fps))}</span>
+                      )}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </section>
+          {layOut}
+          {/* The guide is a view, never a write: a viewer may use it too. */}
+          {sketches.length === 0 ? null : (
+            <LockedControls value={false}>
+              <InspectorRow label="Guide">
+                {sketches.length + 1 <= GUIDE_SEGMENTS_MAX ? (
+                  <SegmentedControl
+                    ariaLabel="Guide"
+                    value={guided ?? "off"}
+                    options={[
+                      { value: "off", label: "Off", testId: "shot-brief-guide-off" },
+                      ...sketches.map((sketch, i) => ({
+                        value: sketch.id,
+                        label: `Sketch ${i + 1}`,
+                        title: `Draw Sketch ${i + 1} over the stage`,
+                        testId: `shot-brief-guide-${sketch.id}`,
+                      })),
+                    ]}
+                    onChange={guideTo}
+                  />
+                ) : (
+                  <Combobox
+                    ariaLabel="Guide"
+                    value={guided ?? "off"}
+                    options={[{ value: "off", label: "Off" }, ...sketches.map((sketch, i) => ({ value: sketch.id, label: `Sketch ${i + 1}` }))]}
+                    onChange={guideTo}
+                  />
+                )}
+              </InspectorRow>
+            </LockedControls>
+          )}
+          {part.notes === undefined ? null : (
+            <section className="shot-brief-section is-words">
+              <h4 className="shot-brief-caps">What we see</h4>
+              <p className="shot-brief-text" data-testid="shot-brief-notes">{part.notes}</p>
+            </section>
+          )}
+          {part.voice === undefined ? null : (
+            <section className="shot-brief-section">
+              <h4 className="shot-brief-caps">Voice</h4>
+              <p className="shot-brief-voice" data-testid="shot-brief-voice">{`“${part.voice}”`}</p>
+            </section>
+          )}
+          <section className="shot-brief-section is-pinned">
+            <h4 className="shot-brief-caps">Pinned to this shot</h4>
+            {pins.length === 0 ? (
+              <p className="shot-brief-none">Nothing pinned. Drop cards on this shot on the board.</p>
+            ) : (
+              <ul className="shot-brief-pins" aria-label="Pinned to this shot">
+                {pins.map((item) => (
+                  <BriefPin key={item.id} doc={doc} item={item} />
+                ))}
+              </ul>
+            )}
+          </section>
+          <div className="shot-brief-style" data-testid="shot-brief-style">
+            <span className="shot-brief-style-name">Style</span>
+            <span className="shot-brief-style-text">
+              {style === 0 ? "No Style cards yet" : `${style} ${style === 1 ? "item" : "items"}, whole reel`}
+            </span>
+            <button type="button" className="shot-brief-link" onClick={() => openBoard(store, null)}>
+              View
+            </button>
+          </div>
+        </div>
+        <footer className="shot-brief-foot">
+          <p className="shot-brief-foot-text" data-testid="shot-brief-foot-text">
+            {built === undefined
+              ? "Sends the playhead's frame back to the card as its picture. The sketches stay."
+              : `On the card: frame ${built.frame}. The sketches stay.`}
+          </p>
+          {built === undefined ? (
+            <button
+              type="button"
+              className={`btn${footPrimary} shot-brief-mark`}
+              data-testid="shot-brief-mark"
+              disabled={readOnly}
+              onClick={() => store.markShotBuilt(part.id, true)}
+            >
+              Mark shot built
+            </button>
+          ) : (
+            <div className="shot-brief-actions">
+              <button
+                type="button"
+                className="btn is-outline"
+                data-testid="shot-brief-unmark"
+                disabled={readOnly}
+                onClick={() => store.markShotBuilt(part.id, false)}
+              >
+                Unmark
+              </button>
+              <button
+                type="button"
+                className={`btn${footPrimary}`}
+                data-testid="shot-brief-remark"
+                disabled={readOnly || onBuilt}
+                title={onBuilt ? "The card already shows this frame." : "Show the frame under the playhead on the card"}
+                onClick={() => store.markShotBuilt(part.id, true)}
+              >
+                Use this frame
+              </button>
+            </div>
+          )}
+        </footer>
+      </div>
+    </LockedControls>
+  );
+}
+
+/** The playhead's frame in the linked Shot, clamped to it, is the frame the
+ *  linked part is marked built at. */
+function playheadOnBuilt(doc: Doc3D | null, sceneId: string | null, frame: number): boolean {
+  if (doc === null || sceneId === null) return false;
+  const built = briefPartOf(doc, sceneId)?.built;
+  if (built === undefined) return false;
+  const start = sceneStart(doc, sceneId) ?? 0;
+  const span = doc.scenesById[sceneId]?.durationFrames ?? 1;
+  return Math.min(Math.max(0, frame - start), Math.max(0, span - 1)) === built.frame;
+}
+
+type Store = ReturnType<typeof useStore>;
+
+/** This shot's board when it has a plan, else the board. */
+function openBoard(store: Store, partId: string | null): void {
+  if (partId !== null) store.openShotBoard(partId);
+  else store.setStoryboardOpen(true);
+}
+
+function BriefHead({ partId }: { partId: string | null }) {
+  const store = useStore();
+  return (
+    <div className="shot-brief-head">
+      <span className="shot-brief-from">From the board</span>
+      <button type="button" className="shot-brief-link" data-testid="shot-brief-open-board" onClick={() => openBoard(store, partId)}>
+        {partId === null ? "Open board" : "Open shot board"}
+        {OPEN_ELSEWHERE_ICON}
+      </button>
+    </div>
+  );
+}
+
+function BriefPin({ doc, item }: { doc: Doc3D; item: ReferenceItem3D }) {
+  const store = useStore();
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const tick = briefTick(doc, item);
+  const asset = item.type === "asset" ? doc.assets[item.asset] : undefined;
+  const must = referenceImportanceOf(item) === "must";
+  const name = item.label.trim() || "Untitled card";
+  return (
+    <li className="shot-brief-pin" data-testid={`shot-brief-pin-${item.id}`} data-tick={tick ?? "none"}>
+      <span className="shot-brief-pin-thumb" aria-hidden="true">
+        {asset?.kind === "image" ? <img src={assetUrl(asset.path)} alt="" draggable={false} loading="lazy" /> : pinGlyph(item)}
+      </span>
+      <span className="shot-brief-pin-name">{name}</span>
+      {tick === null ? null : (
+        <>
+          <span className={`shot-brief-pin-tag${must ? " is-must" : ""}`}>{must ? "Must" : "Optional"}</span>
+          <input
+            type="checkbox"
+            className="checkbox shot-brief-pin-check"
+            data-testid="shot-brief-pin-check"
+            aria-label={`${name}: in this shot`}
+            checked={tick !== "open"}
+            // The data's tick is not the author's to take back: the Shot uses it.
+            disabled={tick === "data" || readOnly}
+            title={tick === "data" ? "Used in this Shot" : tick === "hand" ? "Ticked by hand. Untick" : "Tick by hand"}
+            onChange={(event) => store.updateReference(item.id, { done: event.currentTarget.checked ? true : null })}
+          />
+        </>
+      )}
+    </li>
+  );
+}