@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/storyboard/BoardCanvas.tsx

@@ -0,0 +1,739 @@
+// THE BOARD (Paper SB1): you plan here; the Studio builds.
+//
+//   Bar         "Storyboard", the shot count and total length, "Shot" and
+//               the one primary, "Build planned shots".
+//   Style       on the desk, no box: the cards no planned shot holds
+//               (`styleItemsOf`), then the brand kit's pictures, fonts,
+//               palette and guidance, then the drop slot. What sits here
+//               guides the whole reel, and the agent reads it.
+//   Shots       a storyboard sheet: one panel per planned shot or Shot in
+//               playing order (`storyEntries`), wrapping, with the cut into
+//               the next in the gutter after each and "into 04" where a row
+//               wraps, then the add slot. A press selects and opens the Plan
+//               panel on the right (`boardRightPanel` "plan"); a double press
+//               opens the shot board; a drag moves the shot
+//               (`moveBoardEntry`), with an insertion line where it lands.
+//
+// ── EVERY WAY IN ────────────────────────────────────────────────────────
+//
+// The + menu (Upload, Note, Link, From Library) and the drop slot add to
+// Style. Files dropped or pasted anywhere on the board open the drop dialog
+// (`openBoardDrop`), which asks where they count. A board card or a Project
+// file dropped on the canvas lands in Style; dropped on a shot card it pins
+// to that shot (ShotCard). A single link or line of text lands in Style
+// directly. The paste half lives in `bindBoardClipboard`.
+//
+// ── LIVE COMPONENTS, ON DEMAND ──────────────────────────────────────────
+//
+// A component card shows its poster at rest and goes live on hover, focus or
+// selection (`ComponentStage`, `LIVE_CAP`), so a wall of cards costs
+// pictures, not documents. A shot card's sketch is the picture the tab's
+// offscreen still stage draws of it (state/stillThumbs.ts, the same picture
+// the agent's screenshot_shot `{sketch}` returns), drawn in the DOM
+// (`MiniSketch`) until it is ready, so the sheet itself holds no stage.
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { DragEvent as ReactDragEvent, MouseEvent as ReactMouseEvent, ReactNode } from "react";
+import { framesToSeconds } from "@dailies-studio/engine";
+import type { BrandAsset3D, BrandColor3D, BrandGuidance3D, Doc3D, ReferenceItem3D } from "@dailies-studio/shot/doc";
+import { useContextMenu, useToasts } from "@dailies-studio/ui";
+import type { MenuEntry } from "@dailies-studio/ui";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { cardCommentCounts, cardCountWords } from "../../state/comments.js";
+import { gateForViewer } from "../../state/menu.js";
+import { isPartId, isReferenceId, linkHost, shotLengthOf, storyEntries, styleItemsOf } from "../../state/storyboardModel.js";
+import type { StoryEntry } from "../../state/storyboardModel.js";
+import { ADD_ICON, LIBRARY_ICON, LINK_ICON, NOTE_ICON, SECTION_ICONS } from "../../icons.js";
+import { agentInEditor } from "../agent/agentGate.js";
+import { COMMENT_ICON, useComments } from "../comments/parts.js";
+import { ASSET_MIME, readAssetDrag } from "../files/assetDrag.js";
+import { formatDuration } from "../timeline/model.js";
+import { BoardCursors } from "./BoardCursors.js";
+import { moveBoardEntry } from "./boardOrder.js";
+import { pressSelection } from "./boardRows.js";
+import type { Press } from "./boardRows.js";
+import { ComponentStage } from "./ComponentStage.js";
+import { MediaPoster, ReferencePreview, referenceThumbOf } from "./ReferencePreview.js";
+import { SHOT_MIME, ShotCard, entryIdOf } from "./ShotCard.js";
+import { ACCEPT_ATTRIBUTE, STORYBOARD_MIME, readDragPayload, urlFromTransfer, writeDrag } from "./storyboardDrop.js";
+
+/** What a drop on the canvas can take. */
+const DROP_TYPES = [STORYBOARD_MIME, ASSET_MIME, "Files", "text/uri-list", "text/plain"];
+
+const assetUrl = (path: string): string => `/studio/assets/${encodeURIComponent(path)}`;
+
+/** "04": a shot's number in reading order, from its index. */
+const shotNumber = (at: number): string => String(at + 1).padStart(2, "0");
+
+/** How many card-and-gutter cells one row of the sheet holds, or null before
+ *  it is laid out (and in a suite, which lays nothing out). The sheet wraps
+ *  with the browser's own flex-wrap; this only reads where it did, for the
+ *  "into 04" hints. */
+function useCellsPerRow(grid: HTMLElement | null): number | null {
+  const [perRow, setPerRow] = useState<number | null>(null);
+  useEffect(() => {
+    if (grid === null || typeof ResizeObserver === "undefined") return;
+    const read = (): void => {
+      const cell = grid.querySelector<HTMLElement>(".shot-cell")?.offsetWidth ?? 0;
+      setPerRow(cell > 0 ? Math.max(1, Math.floor(grid.clientWidth / cell)) : null);
+    };
+    const observer = new ResizeObserver(read);
+    observer.observe(grid);
+    read();
+    return () => observer.disconnect();
+  }, [grid]);
+  return perRow;
+}
+
+export function BoardCanvas({ rootRef }: { rootRef?: (el: HTMLElement | null) => void }) {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const selection = useShotEditor((s) => s.storyboardSelection);
+  const building = useShotEditor((s) => s.boardBuilding);
+  const canComment = useShotEditor((s) => s.canComment);
+  const libraryLoaded = useShotEditor((s) => s.libraryLoaded);
+  const catalogLoaded = useShotEditor((s) => s.libraryCatalogLoaded);
+  const menu = useContextMenu();
+  const { toast, node: toasts } = useToasts();
+  const upload = useRef<HTMLInputElement | null>(null);
+  const [linking, setLinking] = useState(false);
+  const [over, setOver] = useState(false);
+  const [anchor, setAnchor] = useState<string | null>(null);
+  // A shot card being dragged, and the gap it would land in (`moveBoardEntry`).
+  const [dragging, setDragging] = useState<string | null>(null);
+  const [slot, setSlot] = useState<number | null>(null);
+  // The desk scrolls and carries the presence cursors; the grid wraps.
+  const [desk, setDesk] = useState<HTMLElement | null>(null);
+  const [grid, setGrid] = useState<HTMLElement | null>(null);
+  const perRow = useCellsPerRow(grid);
+
+  const style = useMemo(() => (doc === null ? [] : styleItemsOf(doc)), [doc]);
+  const entries = useMemo(() => (doc === null ? [] : storyEntries(doc)), [doc]);
+
+  // A component card's host and a library card's thumb come off the two
+  // registry reads; ask for each once, when a card needs it.
+  const needsRegistry = style.some((r) => r.type === "component" || r.type === "library");
+  useEffect(() => {
+    if (!needsRegistry) return;
+    if (!libraryLoaded) void store.refreshLibrary();
+    if (!catalogLoaded) void store.refreshLibraryCatalog();
+  }, [needsRegistry, libraryLoaded, catalogLoaded, store]);
+
+  const endDrag = useCallback(() => {
+    setDragging(null);
+    setSlot(null);
+  }, []);
+
+  if (doc === null) return null;
+
+  // ── THE DROP ON THE CANVAS ──────────────────────────────────────────────
+  const onDragOver = (event: ReactDragEvent): void => {
+    const types = Array.from(event.dataTransfer.types ?? []);
+    if (!types.some((type) => DROP_TYPES.includes(type))) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = types.includes(STORYBOARD_MIME) && !types.includes("Files") ? "move" : "copy";
+    setOver(true);
+  };
+  const onDrop = (event: ReactDragEvent): void => {
+    setOver(false);
+    const data = event.dataTransfer;
+    const take = (): void => event.preventDefault();
+    const payload = readDragPayload(data);
+    if (payload !== null) {
+      take();
+      if (payload.kind === "reference") {
+        const live = store.getState().storyboardSelection;
+        store.attachStoryboardItems(live.includes(payload.id) ? live.filter(isReferenceId) : [payload.id], null);
+      }
+      return;
+    }
+    const asset = readAssetDrag(data);
+    if (asset !== null) {
+      take();
+      store.addReferenceForAsset(asset.asset, null, { select: false });
+      return;
+    }
+    const files = Array.from(data.files ?? []);
+    if (files.length > 0) {
+      take();
+      store.openBoardDrop(files);
+      return;
+    }
+    const url = urlFromTransfer(data);
+    if (url !== null) {
+      take();
+      store.addLinkReference(url, null, { select: false });
+      return;
+    }
+    const text = Array.from(data.types ?? []).includes("text/plain") ? data.getData("text/plain").trim() : "";
+    if (text === "") return;
+    take();
+    store.addStoryboardNote(null, { select: false, text });
+  };
+
+  // ── THE REORDER ─────────────────────────────────────────────────────────
+  // Over a cell, the gap before or after its card by which half the pointer
+  // is in; over the add slot, the end. One edit writes the new order.
+  const onSheetDragOver = (event: ReactDragEvent): void => {
+    if (dragging === null || !Array.from(event.dataTransfer.types ?? []).includes(SHOT_MIME)) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+    const cell = event.target instanceof Element ? event.target.closest<HTMLElement>("[data-slot]") : null;
+    if (cell === null) return;
+    const at = Number(cell.dataset["slot"]);
+    const card = cell.querySelector(".shot-card")?.getBoundingClientRect();
+    setSlot(card === undefined || event.clientX <= card.left + card.width / 2 ? at : at + 1);
+  };
+  const onSheetDrop = (event: ReactDragEvent): void => {
+    const id = Array.from(event.dataTransfer.types ?? []).includes(SHOT_MIME) ? event.dataTransfer.getData(SHOT_MIME) : "";
+    const to = slot;
+    endDrag();
+    if (id === "" || to === null) return;
+    event.preventDefault();
+    store.edit((base) => moveBoardEntry(base, storyEntries(base), id, to));
+  };
+
+  // ── THE + MENU ──────────────────────────────────────────────────────────
+  const openAdd = (el: HTMLElement): void => {
+    const r = el.getBoundingClientRect();
+    menu.open({ x: r.left, y: r.bottom + 6 }, gateForViewer(store.getState(), [
+      { kind: "action", id: "board-upload", label: "Upload", icon: ADD_ICON, onSelect: () => upload.current?.click() },
+      { kind: "action", id: "board-note", label: "Note", icon: NOTE_ICON, onSelect: () => void store.addStoryboardNote(null) },
+      { kind: "action", id: "board-link", label: "Link", icon: LINK_ICON, onSelect: () => setLinking(true) },
+      { kind: "action", id: "board-library", label: "From Library", icon: LIBRARY_ICON, onSelect: () => store.setLibraryBrowserOpen(true) },
+      { kind: "separator" },
+      { kind: "action", id: "board-assets", label: "Project assets", icon: SECTION_ICONS.project, onSelect: () => store.setBoardAssetsOpen(true) },
+    ]));
+  };
+
+  // ── SELECTION AND THE CARD MENUS ────────────────────────────────────────
+  const styleOrder = style.map((item) => item.id);
+  const shotOrder = entries.map(entryIdOf);
+  const press = (order: readonly string[]) => (id: string, event: Press): void => {
+    const next = pressSelection(store.getState().storyboardSelection, order, anchor, id, event);
+    store.setStoryboardSelection(next.selection);
+    setAnchor(next.anchor);
+  };
+  // A double press, Enter and Open land on the shot's board, and never make
+  // or enter a Shot. Only "Open in Studio" goes to the Studio.
+  const openEntry = (entry: StoryEntry): void => {
+    if (entry.kind === "placeholder") store.openShotBoard(entry.part.id);
+    else store.openShotBoard(entry.shot.part?.id ?? entry.shot.sceneId);
+  };
+  // A DOUBLE PRESS OPENS THE SHOT ITS FIRST PRESS PICKED. That press selects
+  // the shot and brings up the Plan panel, and the narrower canvas rewraps
+  // the board under the pointer (measured in the storyboard e2e: a card moved
+  // from x 896 to x 24), so the second press can land on another card or on
+  // the ground. So the board owns the double press: it opens the first
+  // press's shot, else the card under the pointer, and the second press
+  // changes no selection.
+  const firstPress = useRef<string | null>(null);
+  const pressShot = (id: string, event: Press): void => {
+    if ((event.detail ?? 0) >= 2 && firstPress.current !== null) return;
+    firstPress.current = id;
+    press(shotOrder)(id, event);
+  };
+  const onDoublePress = (event: ReactMouseEvent): void => {
+    const under = event.target instanceof Element ? event.target.closest(".shot-card")?.getAttribute("data-comment-target") : null;
+    const id = firstPress.current ?? under ?? null;
+    firstPress.current = null;
+    const entry = entries.find((e) => entryIdOf(e) === id);
+    if (entry !== undefined) openEntry(entry);
+  };
+  const openInStudio = (entry: StoryEntry): void => {
+    if (entry.kind === "placeholder") store.openPlannedShot(entry.part.id);
+    else if (entry.shot.part !== null) store.openPlannedShot(entry.shot.part.id);
+    else store.openStoryboardShot(entry.shot.sceneId);
+  };
+  const commentEntry = (target: { partId: string } | { referenceId: string }): MenuEntry[] =>
+    canComment ? [{ kind: "action", id: "board-comment", label: "Comment", onSelect: () => store.commentOnCard(target) }] : [];
+  const openMenu = (event: ReactMouseEvent, select: string, entriesOf: MenuEntry[]): void => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!store.getState().storyboardSelection.includes(select)) store.setStoryboardSelection([select]);
+    menu.open({ x: event.clientX, y: event.clientY }, gateForViewer(store.getState(), entriesOf));
+  };
+  const onShotMenu = (entry: StoryEntry, event: ReactMouseEvent): void => {
+    const id = entryIdOf(entry);
+    openMenu(event, id, [
+      { kind: "action", id: "board-open-board", label: "Open", onSelect: () => openEntry(entry) },
+      { kind: "action", id: "board-open-shot", label: "Open in Studio", onSelect: () => openInStudio(entry) },
+      ...(isPartId(id) ? commentEntry({ partId: id }) : []),
+      ...(isPartId(id)
+        ? [{ kind: "action" as const, id: "board-delete-shot", label: "Delete", danger: true, onSelect: () => store.deleteStoryboardItems([id]) }]
+        : []),
+    ]);
+  };
+  const onCardMenu = (item: ReferenceItem3D, event: ReactMouseEvent): void => {
+    openMenu(event, item.id, [
+      ...commentEntry({ referenceId: item.id }),
+      {
+        kind: "action",
+        id: "board-delete-card",
+        label: "Delete",
+        danger: true,
+        onSelect: () => {
+          const live = store.getState().storyboardSelection.filter(isReferenceId);
+          store.deleteStoryboardItems(live.includes(item.id) ? live : [item.id]);
+        },
+      },
+    ]);
+  };
+
+  const build = (): void => {
+    const ids = store.buildPlannedShots();
+    const first = ids[0];
+    if (first === undefined) return;
+    toast({
+      message: "Being built in Studio by Agent",
+      action: { label: "Open in Studio", run: () => store.openPlannedShot(first) },
+    });
+  };
+  const buildable = (doc.storyboard?.parts ?? []).some((p) => p.built === undefined && !building.some((b) => b.part === p.id));
+
+  // ── THE STYLE WALL'S BRAND CARDS ────────────────────────────────────────
+  const branding = doc.resources?.branding ?? [];
+  const fonts = branding.filter((b): b is BrandAsset3D => b.type === "asset" && b.fontFamily !== undefined);
+  const pictures = branding.filter(
+    (b): b is BrandAsset3D => b.type === "asset" && b.fontFamily === undefined && doc.assets[b.asset]?.kind === "image",
+  );
+  const colors = branding.filter((b): b is BrandColor3D => b.type === "color");
+  const guidance = branding.filter((b): b is BrandGuidance3D => b.type === "guidance");
+  const styleCount = style.length + fonts.length + pictures.length + (colors.length > 0 ? 1 : 0) + guidance.length;
+
+  const totalFrames = entries.reduce(
+    (n, e) => n + shotLengthOf(doc, e.kind === "shot" ? e.shot.part : e.part, e.kind === "shot" ? e.shot.scene : null),
+    0,
+  );
+
+  const insert = (key: string, before = false): ReactNode => (
+    <span key={key} className={`shot-insert${before ? " is-before" : ""}`} data-testid="shot-insert" aria-hidden="true" />
+  );
+  const cells: ReactNode[] = entries.map((entry, at) => {
+    const id = entryIdOf(entry);
+    const last = at === entries.length - 1;
+    const cut = entry.kind === "shot" ? entry.cut : null;
+    const wraps = !last && perRow !== null && (at + 1) % perRow === 0;
+    return (
+      <div className="shot-cell" key={id} data-slot={at}>
+        {slot === 0 && at === 0 ? insert("before", true) : null}
+        <ShotCard
+          doc={doc}
+          entry={entry}
+          at={at}
+          selected={selection.includes(id)}
+          onPress={pressShot}
+          onOpen={openEntry}
+          onMenu={onShotMenu}
+          onDragMove={(moving) => (moving === null ? endDrag() : setDragging(moving))}
+        />
+        <div className={`shot-gutter${slot === at + 1 ? " is-insert" : ""}`}>
+          {slot === at + 1 ? insert("after") : null}
+          {last ? null : cut === null ? (
+            <span className="shot-transition-chip">Cut</span>
+          ) : (
+            <button
+              type="button"
+              className={`shot-transition-chip${selection.includes(cut.id) ? " is-selected" : ""}`}
+              data-testid={`shot-transition-${cut.id}`}
+              onClick={(event) => {
+                event.stopPropagation();
+                store.setStoryboardSelection([cut.id]);
+              }}
+            >
+              {cut.label}
+            </button>
+          )}
+          {wraps ? <span className="shot-gutter-wrap">{`into ${shotNumber(at + 1)}`}</span> : null}
+        </div>
+      </div>
+    );
+  });
+
+  return (
+    <div
+      ref={rootRef}
+      className={`board-canvas${over ? " is-drop" : ""}`}
+      data-testid="board-canvas"
+      tabIndex={-1}
+      onDragOver={onDragOver}
+      onDragLeave={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setOver(false);
+      }}
+      onDrop={onDrop}
+      // A FIRST PRESS ANYWHERE FORGETS the last shot pressed, in the capture
+      // phase, so a control that stops its press (a cut chip) cannot leave
+      // that shot for a double press on the control to open.
+      onClickCapture={(event) => {
+        if (event.detail < 2) firstPress.current = null;
+      }}
+      onClick={(event) => {
+        // A press on the ground clears the selection; a card stops nothing,
+        // so read whether the press landed on one. A press in a portal (the +
+        // menu, a card menu) bubbles here through React, not the DOM: a menu
+        // row that selects what it added must not be cleared by its own press.
+        if (!(event.target instanceof Element) || !event.currentTarget.contains(event.target)) return;
+        // The second press of a double press on a shot keeps what the first
+        // picked.
+        if (event.detail >= 2 && firstPress.current !== null) return;
+        if (event.target.closest(".style-card, .shot-card, button, input") !== null) return;
+        store.setStoryboardSelection([]);
+      }}
+      onDoubleClick={onDoublePress}
+    >
+      <header className="panel-head board-bar">
+        <h2 className="board-bar-title">Storyboard</h2>
+        <span className="board-bar-summary" data-testid="board-shots-summary">
+          {entries.length === 1 ? "1 shot" : `${entries.length} shots`} · {formatDuration(framesToSeconds(totalFrames, doc.fps))}
+        </span>
+        <span className="board-bar-spacer" />
+        <button type="button" className="btn" data-testid="board-add-shot" onClick={() => store.addPlannedShot()}>
+          {ADD_ICON}
+          Shot
+        </button>
+        {agentInEditor() ? (
+          <button
+            type="button"
+            className="btn is-primary"
+            data-testid="board-build"
+            disabled={!buildable}
+            title={buildable ? undefined : "Every planned shot is built or being built."}
+            onClick={build}
+          >
+            Build planned shots
+          </button>
+        ) : null}
+      </header>
+
+      <div className="board-desk" ref={setDesk}>
+        <section className="style-wall" data-testid="style-wall" aria-label="Style">
+          <header className="board-section-head">
+            <h3 className="caps">Style · whole reel</h3>
+            <span className="board-section-hint">The agent uses these wherever they fit.</span>
+            <span className="board-bar-spacer" />
+            <span className="board-section-count" data-testid="style-wall-count">
+              {styleCount === 1 ? "1 item" : `${styleCount} items`}
+            </span>
+            <button
+              type="button"
+              className="btn is-icon is-ghost board-section-add"
+              aria-label="Add to Style"
+              aria-haspopup="menu"
+              data-testid="board-add"
+              onClick={(event) => openAdd(event.currentTarget)}
+            >
+              {ADD_ICON}
+            </button>
+          </header>
+          <div className="style-wall-items" role="listbox" aria-label="Style cards" aria-multiselectable>
+            {style.map((item) => (
+              <StyleCard
+                key={item.id}
+                doc={doc}
+                item={item}
+                selected={selection.includes(item.id)}
+                onPress={press(styleOrder)}
+                onMenu={onCardMenu}
+              />
+            ))}
+            {pictures.map((b) => (
+              <div className="style-card" key={b.id} title={b.guidance ?? b.label} data-testid="style-brand-image">
+                <img src={assetUrl(doc.assets[b.asset]!.path)} alt={b.label} loading="lazy" draggable={false} />
+              </div>
+            ))}
+            {fonts.map((b) => (
+              <FontCard key={b.id} item={b} path={doc.assets[b.asset]?.kind === "font" ? doc.assets[b.asset]!.path : null} />
+            ))}
+            {colors.length === 0 ? null : (
+              <div className="style-card is-palette" data-testid="style-palette">
+                <span className="style-palette-swatches">
+                  {colors.map((c) => (
+                    <span key={c.id} className="style-palette-swatch" style={{ background: c.value }} title={`${c.label} ${c.value}`} />
+                  ))}
+                </span>
+                <span className="style-palette-name">Palette · {colors.length}</span>
+              </div>
+            )}
+            {guidance.map((g) => (
+              <div className="style-card is-note" key={g.id} data-testid="style-guidance">
+                <span className="style-note-text">{g.text}</span>
+                <span className="style-note-meta">Guidance · {g.label}</span>
+              </div>
+            ))}
+            {linking ? (
+              <input
+                className="style-drop is-link"
+                type="url"
+                autoFocus
+                placeholder="https://"
+                aria-label="Link address"
+                data-testid="board-link-field"
+                onKeyDown={(event) => {
+                  event.stopPropagation();
+                  if (event.key === "Escape") setLinking(false);
+                  if (event.key !== "Enter") return;
+                  const url = event.currentTarget.value.trim();
+                  if (url !== "" && store.addLinkReference(url, null, { select: false }) !== null) setLinking(false);
+                }}
+                onBlur={() => setLinking(false)}
+              />
+            ) : (
+              <button
+                type="button"
+                className={`drop style-drop${over ? " is-over" : ""}`}
+                data-testid="board-drop-slot"
+                aria-haspopup="menu"
+                onClick={(event) => openAdd(event.currentTarget)}
+              >
+                {ADD_ICON}
+                {over ? "Release to add" : "Drop, paste or link"}
+              </button>
+            )}
+          </div>
+        </section>
+
+        <section className="board-shots" aria-label="Shots">
+          <header className="board-section-head">
+            <h3 className="caps">Shots</h3>
+            <span className="board-section-hint">Double-click a shot to open its shot board.</span>
+          </header>
+          <div
+            ref={setGrid}
+            className={`board-shots-row${dragging === null ? "" : " is-moving"}`}
+            role="listbox"
+            aria-label="Shot cards"
+            aria-multiselectable
+            onDragOver={onSheetDragOver}
+            onDrop={onSheetDrop}
+            onDragLeave={(event) => {
+              if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setSlot(null);
+            }}
+          >
+            {cells}
+            <button
+              type="button"
+              className="shot-add-slot"
+              data-testid="board-add-shot-slot"
+              data-slot={entries.length}
+              onClick={() => store.addPlannedShot()}
+            >
+              {ADD_ICON}
+              <span className="shot-add-slot-title">Shot</span>
+              <span className="shot-add-slot-hint">{`Adds ${shotNumber(entries.length)} at the end. Drag to move it.`}</span>
+            </button>
+          </div>
+        </section>
+        <BoardCursors canvas={desk} />
+      </div>
+
+      <input
+        ref={upload}
+        type="file"
+        hidden
+        multiple
+        accept={ACCEPT_ATTRIBUTE}
+        data-testid="board-upload-input"
+        onChange={(event) => {
+          const all = Array.from(event.currentTarget.files ?? []);
+          event.currentTarget.value = "";
+          if (all.length > 0) store.openBoardDrop(all);
+        }}
+      />
+      {menu.menu}
+      {toasts}
+    </div>
+  );
+}
+
+/** A brand font's face loads under a private family, as the inspector's
+ *  FontField loads workspace fonts, so a brand font never takes over a name
+ *  the editor's own chrome uses. */
+const brandFamily = (path: string): string => `dailies-brand-${path.replace(/[^a-z0-9]+/gi, "-")}`;
+
+/** A brand font: "Aa" in its own face over the family's name. The browser
+ *  swaps the face in when the file lands; until then, or with no file, the
+ *  family as named, if this machine has it, then the UI sans. */
+function FontCard({ item, path }: { item: BrandAsset3D; path: string | null }) {
+  useEffect(() => {
+    if (path === null || typeof FontFace === "undefined") return;
+    // Every weight maps to the one file, so the semibold sample shows the
+    // face as drawn, never a synthesized bold.
+    const face = new FontFace(brandFamily(path), `url(${JSON.stringify(assetUrl(path))})`, { weight: "1 1000" });
+    document.fonts.add(face);
+    face.load().catch(() => {});
+    return () => {
+      document.fonts.delete(face);
+    };
+  }, [path]);
+  const named = `"${item.fontFamily}", var(--font-sans)`;
+  return (
+    <div className="style-card is-font" title={item.guidance ?? item.label} data-testid="style-font">
+      <span className="style-font-sample" style={{ fontFamily: path === null ? named : `"${brandFamily(path)}", ${named}` }}>
+        Aa
+      </span>
+      <span className="style-font-name">{item.fontFamily}</span>
+    </div>
+  );
+}
+
+/** One card on the Style wall. Drags like every board card, so it can pin to
+ *  a shot card. */
+function StyleCard(props: {
+  doc: Doc3D;
+  item: ReferenceItem3D;
+  selected: boolean;
+  onPress: (id: string, press: Press) => void;
+  onMenu: (item: ReferenceItem3D, event: ReactMouseEvent) => void;
+}) {
+  const { doc, item, selected } = props;
+  const store = useStore();
+  const canComment = useShotEditor((s) => s.canComment);
+  const { threads } = useComments();
+  const count = cardCommentCounts(doc, threads, { referenceId: item.id });
+  const open = count.board + count.studio;
+  const words = cardCountWords(count);
+  const [lit, setLit] = useState(false);
+  const kind =
+    item.type === "asset"
+      ? doc.assets[item.asset]?.kind === "video"
+        ? "video"
+        : "image"
+      : item.type === "note" || item.type === "component" || item.type === "link"
+        ? item.type
+        : "other";
+  return (
+    <div
+      className={`style-card${kind === "note" || kind === "component" || kind === "link" ? ` is-${kind}` : ""}${selected ? " is-selected" : ""}`}
+      data-testid={`style-card-${item.id}`}
+      data-kind={kind}
+      data-comment-target={item.id}
+      role="option"
+      aria-selected={selected}
+      aria-label={item.label}
+      tabIndex={0}
+      draggable
+      onDragStart={(event) => writeDrag(event.dataTransfer, { kind: "reference", id: item.id })}
+      onClick={(event) => props.onPress(item.id, event)}
+      onKeyDown={(event) => {
+        if (event.target !== event.currentTarget || event.key !== " ") return;
+        event.preventDefault();
+        props.onPress(item.id, event);
+      }}
+      onContextMenu={(event) => props.onMenu(item, event)}
+      onPointerEnter={() => setLit(true)}
+      onPointerLeave={() => setLit(false)}
+      onFocus={() => setLit(true)}
+      onBlur={() => setLit(false)}
+    >
+      <StyleCardBody doc={doc} item={item} live={lit || selected} />
+      {/* THE CARD'S COMMENTS (S5): one corner control, always shown. With
+          open threads it is the pin carrying their count; without, the
+          Comment icon. */}
+      {canComment ? (
+        <button
+          type="button"
+          className={`style-card-comment${open > 0 ? " is-pin" : ""}`}
+          aria-label={open > 0 ? `Comment on this card. ${words}` : "Comment on this card"}
+          title={open > 0 ? `${words}. Comment (C)` : "Comment (C)"}
+          data-testid="style-card-comment"
+          onClick={(event) => {
+            event.stopPropagation();
+            store.commentOnCard({ referenceId: item.id });
+          }}
+        >
+          {open > 0 ? open : COMMENT_ICON}
+        </button>
+      ) : open > 0 ? (
+        <span className="style-card-comment is-pin" aria-label={words} title={words}>
+          {open}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function StyleCardBody({ doc, item, live }: { doc: Doc3D; item: ReferenceItem3D; live: boolean }) {
+  if (item.type === "note") {
+    return (
+      <>
+        <span className="style-note-text">{item.text.trim() === "" ? "Empty note" : item.text}</span>
+        <span className="style-note-meta">Note</span>
+      </>
+    );
+  }
+  if (item.type === "component") return <StyleComponentBody doc={doc} item={item} live={live} />;
+  if (item.type === "asset") {
+    const asset = doc.assets[item.asset];
+    if (asset?.kind === "video") {
+      const at = item.frame === undefined ? null : (item.frame * doc.fps.den) / doc.fps.num;
+      return <MediaPoster className="style-card-media" src={assetUrl(asset.path)} atSeconds={at} />;
+    }
+    if (asset?.kind === "image") return <img className="style-card-media" src={assetUrl(asset.path)} alt="" loading="lazy" draggable={false} />;
+  }
+  if (item.type === "link") {
+    return (
+      <>
+        <span className="style-link-host">{linkHost(item.url)}</span>
+        <span className="style-link-title">{item.title ?? item.url}</span>
+      </>
+    );
+  }
+  return <StylePreview doc={doc} item={item} />;
+}
+
+/** Every other card: the shared preview, so the board and the inspector draw
+ *  one answer. */
+function StylePreview({ doc, item }: { doc: Doc3D; item: ReferenceItem3D }) {
+  const catalog = useShotEditor((s) => s.libraryCatalog);
+  const loaded = useShotEditor((s) => s.libraryCatalogLoaded);
+  const thumb = referenceThumbOf(item, catalog, loaded);
+  return (
+    <ReferencePreview
+      item={item}
+      asset={item.type === "asset" ? doc.assets[item.asset] : undefined}
+      fps={doc.fps}
+      libraryThumb={thumb.libraryThumb}
+      libraryKind={thumb.libraryKind}
+      libraryMissing={thumb.libraryMissing}
+    />
+  );
+}
+
+type ComponentCardItem = Extract<ReferenceItem3D, { type: "component" }>;
+
+/** A component card: a poster at rest, live on hover, focus or selection. */
+function StyleComponentBody({ doc, item, live }: { doc: Doc3D; item: ComponentCardItem; live: boolean }) {
+  const store = useStore();
+  const componentId = item.component ?? null;
+  const row = useShotEditor((s) => (componentId === null ? undefined : s.library.find((r) => r.id === componentId)));
+  const contract = useShotEditor((s) => (componentId === null ? undefined : s.contracts[componentId]));
+  const lengthFrames = useShotEditor((s) =>
+    componentId === null ? undefined : s.libraryCatalog.find((r) => r.installedAs === componentId)?.lengthFrames,
+  );
+  useEffect(() => {
+    if (live && componentId !== null) void store.loadContract(componentId);
+  }, [live, componentId, store]);
+  const def = item.def === undefined ? undefined : doc.components?.[item.def];
+  const stageable = def !== undefined || row?.host === "three";
+  return (
+    <>
+      <div className="style-component-preview">
+        {stageable ? (
+          <ComponentStage
+            doc={doc}
+            item={item}
+            contract={contract}
+            availability={row?.contractAvailability}
+            lengthFrames={lengthFrames}
+            live={live}
+            fallback={<StylePreview doc={doc} item={item} />}
+          />
+        ) : (
+          <StylePreview doc={doc} item={item} />
+        )}
+      </div>
+      <span className="style-component-foot">
+        <span className="style-component-name">{def?.name ?? item.label}</span>
+      </span>
+    </>
+  );
+}