@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/storyboard/BoardCursors.tsx

@@ -0,0 +1,158 @@
+// OTHER PEOPLE'S CURSORS ON THE BOARD (lane R7, Paper page 21): an arrow in
+// each person's colour with their name beside it. Studio has no cursors.
+//
+// A cursor travels as `u,v` across the board canvas's whole scrolled content
+// (`scrollWidth` by `scrollHeight`), tagged `space: "canvas"`, so it lands on
+// the same card wherever each person has scrolled. A cursor in any other space
+// (an older build's frame-space "board") is not drawn: its `u,v` measure
+// something else. Only a tab on the board sends one: leaving the
+// canvas, or the board, clears it at once; on it, the presence store sends at
+// most 15 a second.
+//
+// ON A SHOT BOARD the same layer sits on the sketch paper (`where`, the
+// sketch id): `u,v` across the paper, tagged `space: "sketch"` with that id, so
+// a cursor shows only to people on the same sketch, and the board's cursors
+// never show there.
+import { useEffect, useState } from "react";
+import type { SyncCursor } from "@dailies-studio/shot/doc";
+import { useStore } from "../../state/context.js";
+import { usePresence } from "../header/PresenceStack.js";
+
+/** The canvas as the mapping reads it: its client box, scroll offset and
+ *  scrolled content size. */
+export type BoardBox = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  scrollLeft: number;
+  scrollTop: number;
+  scrollWidth: number;
+  scrollHeight: number;
+};
+
+const boxOf = (el: HTMLElement, paper: boolean): BoardBox => {
+  const r = el.getBoundingClientRect();
+  // The paper does not scroll, and an item hanging off its edge must not
+  // stretch what `u,v` measure.
+  if (paper) return { left: r.left, top: r.top, width: r.width, height: r.height, scrollLeft: 0, scrollTop: 0, scrollWidth: r.width, scrollHeight: r.height };
+  return {
+    left: r.left,
+    top: r.top,
+    width: r.width,
+    height: r.height,
+    scrollLeft: el.scrollLeft,
+    scrollTop: el.scrollTop,
+    scrollWidth: el.scrollWidth,
+    scrollHeight: el.scrollHeight,
+  };
+};
+
+/** A client point as `u,v` across the canvas content, or null off the canvas. */
+export function boardPoint(box: BoardBox, x: number, y: number): { x: number; y: number } | null {
+  if (box.scrollWidth <= 0 || box.scrollHeight <= 0) return null;
+  if (x < box.left || x > box.left + box.width || y < box.top || y > box.top + box.height) return null;
+  return {
+    x: (x - box.left + box.scrollLeft) / box.scrollWidth,
+    y: (y - box.top + box.scrollTop) / box.scrollHeight,
+  };
+}
+
+/** Where `u,v` is in the canvas content, in px from its top left. */
+export function boardSpot(box: Pick<BoardBox, "scrollWidth" | "scrollHeight">, u: number, v: number): { left: number; top: number } {
+  return { left: u * box.scrollWidth, top: v * box.scrollHeight };
+}
+
+/** Is this cursor on the surface `where` names (null: the board canvas)? */
+export function cursorHere(cursor: SyncCursor | null | undefined, where: string | null): boolean {
+  return where === null ? cursor?.space === "canvas" : cursor?.space === "sketch" && cursor.where === where;
+}
+
+export function BoardCursors({ canvas, where = null }: { canvas: HTMLElement | null; where?: string | null }) {
+  const store = useStore();
+  const { live, people } = usePresence();
+  const paper = where !== null;
+
+  // SEND: this tab's pointer over the canvas, while the session is live. A
+  // scroll under a still pointer moves it across the content too.
+  useEffect(() => {
+    if (!live || canvas === null) return;
+    const aborter = new AbortController();
+    let last: { x: number; y: number } | null = null;
+    const send = (): void => {
+      const at = last === null ? null : boardPoint(boxOf(canvas, where !== null), last.x, last.y);
+      const space = where === null ? ({ space: "canvas" } as const) : ({ space: "sketch", where } as const);
+      store.presence.update({ cursor: at === null ? null : { ...at, ...space } });
+    };
+    const off = (): void => {
+      last = null;
+      store.presence.update({ cursor: null });
+    };
+    canvas.addEventListener(
+      "pointermove",
+      (event) => {
+        last = { x: event.clientX, y: event.clientY };
+        send();
+      },
+      { signal: aborter.signal },
+    );
+    canvas.addEventListener("scroll", () => last !== null && send(), { signal: aborter.signal });
+    canvas.addEventListener("pointerleave", off, { signal: aborter.signal });
+    return () => {
+      aborter.abort();
+      off();
+    };
+  }, [live, canvas, store, where]);
+
+  // DRAW: in content px, so a cursor scrolls with the cards. A resize of the
+  // canvas re-reads its content size.
+  const [, remeasure] = useState(0);
+  useEffect(() => {
+    if (canvas === null || typeof ResizeObserver === "undefined") return;
+    const sized = new ResizeObserver(() => remeasure((n) => n + 1));
+    sized.observe(canvas);
+    return () => sized.disconnect();
+  }, [canvas]);
+
+  if (!live || canvas === null) return null;
+  const here = people.filter((p) => cursorHere(p.cursor, where));
+  if (here.length === 0) return null;
+  const box = boxOf(canvas, paper);
+  const size = paper ? { scrollWidth: box.width, scrollHeight: box.height } : { scrollWidth: canvas.scrollWidth, scrollHeight: canvas.scrollHeight };
+  return (
+    // Sized to the content and clipped, so a cursor at the edge never grows
+    // the scroll area it is placed across.
+    <div
+      className="board-cursors"
+      aria-hidden="true"
+      data-testid="board-cursors"
+      style={{ width: size.scrollWidth, height: size.scrollHeight }}
+    >
+      {here.map((person) => {
+        const at = boardSpot(size, person.cursor!.x, person.cursor!.y);
+        return (
+          <div
+            key={person.user}
+            className="board-cursor"
+            data-testid="board-cursor"
+            data-user={person.user}
+            style={{ left: at.left, top: at.top }}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16">
+              <path
+                d="M1 1 L1 13 L4.5 9.8 L7 15 L9.2 14 L6.8 8.9 L11.5 8.9 Z"
+                fill={person.color}
+                stroke="#0B0B0B"
+                strokeWidth="1"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <span className="board-cursor-tag" style={{ background: person.color }}>
+              {person.name}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/panels/storyboard/BoardDropDialog.tsx

@@ -0,0 +1,161 @@
+// THE DROP DIALOG (S2): files dropped or pasted on the board, and where they
+// count. Pick the scope once:
+//
+//   Style      the whole reel; cards on no planned shot.
+//   One shot   cards pinned to the shot picked here (`reference.part`).
+//   Keep       saved to the Project's Assets, no card (the plan wins over the
+//              mock's `use: "inspiration"`).
+//
+// "Why these?" is copied onto each card's note, and the green box says what
+// the agent will read, in the brief's own words (`dropBriefLine`).
+//
+// A `Dialog` (z 1100, its own focus trap and Escape), opened by
+// `openBoardDrop` and closed by `commitBoardDrop` or `closeBoardDrop`.
+import { useEffect, useMemo, useState } from "react";
+import { Dialog } from "@dailies-studio/ui";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { dropBriefLine, partTitleOf } from "../../state/storyboardModel.js";
+import type { DropScope } from "../../state/storyboardModel.js";
+import { PartPicker } from "./PartPicker.js";
+
+/** The thumbs drawn before the rest are counted. */
+const THUMBS_MAX = 10;
+
+export function BoardDropDialog() {
+  const store = useStore();
+  const drop = useShotEditor((s) => s.boardDrop);
+  const doc = useShotEditor((s) => s.doc);
+  const [scope, setScope] = useState<DropScope>("style");
+  const [partId, setPartId] = useState<string | null>(null);
+  const [note, setNote] = useState("");
+
+  // A FRESH DROP STARTS FRESH: Style, no note, and the selected shot (or the
+  // first) as the pick for One shot.
+  const files = drop?.files ?? null;
+  useEffect(() => {
+    if (files === null) return;
+    const parts = store.getState().doc?.storyboard?.parts ?? [];
+    const chosen = store.getState().storyboardSelection.find((id) => parts.some((p) => p.id === id));
+    setScope("style");
+    setNote("");
+    setPartId(chosen ?? parts[0]?.id ?? null);
+  }, [files, store]);
+
+  // One object URL per image, revoked when the drop goes.
+  const thumbs = useMemo(
+    () =>
+      (files ?? []).slice(0, THUMBS_MAX).map((file) => ({
+        name: file.name,
+        url: file.type.startsWith("image/") ? URL.createObjectURL(file) : null,
+      })),
+    [files],
+  );
+  useEffect(
+    () => () => {
+      for (const thumb of thumbs) if (thumb.url !== null) URL.revokeObjectURL(thumb.url);
+    },
+    [thumbs],
+  );
+
+  if (drop === null || doc === null) return null;
+  const parts = doc.storyboard?.parts ?? [];
+  const count = drop.files.length;
+  const images = drop.files.every((f) => f.type.startsWith("image/"));
+  const noun = images ? (count === 1 ? "image" : "images") : count === 1 ? "file" : "files";
+  const pick = partId !== null && parts.some((p) => p.id === partId) ? partId : null;
+  const pickTitle = pick === null ? null : partTitleOf(doc, pick);
+  const primary = scope === "style" ? "Add to Style" : scope === "keep" ? "Keep in Assets" : `Pin to ${pickTitle ?? "a shot"}`;
+
+  const commit = (): void => {
+    void store.commitBoardDrop(scope === "shot" ? { scope, partId: pick ?? "", note } : { scope, note });
+  };
+
+  const option = (value: DropScope, title: string, desc: string) => (
+    <button
+      type="button"
+      className={`board-drop-scope${scope === value ? " is-selected" : ""}`}
+      data-testid={`board-drop-scope-${value}`}
+      aria-pressed={scope === value}
+      disabled={value === "shot" && parts.length === 0}
+      title={value === "shot" && parts.length === 0 ? "Add a shot first" : undefined}
+      onClick={() => setScope(value)}
+    >
+      <span className="board-drop-scope-title">{title}</span>
+      <span className="board-drop-scope-desc">{desc}</span>
+    </button>
+  );
+
+  return (
+    <Dialog
+      open
+      className="board-drop"
+      title={
+        <>
+          <span className="board-drop-title" data-testid="board-drop-title">
+            {count} {noun} dropped
+          </span>
+          <span className="board-drop-esc" aria-hidden="true">
+            Esc
+          </span>
+        </>
+      }
+      onClose={() => store.closeBoardDrop()}
+      actions={
+        <>
+          <button type="button" className="btn board-drop-cancel" data-testid="board-drop-cancel" onClick={() => store.closeBoardDrop()}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="btn is-primary"
+            data-testid="board-drop-commit"
+            disabled={scope === "shot" && pick === null}
+            onClick={commit}
+          >
+            {primary}
+          </button>
+        </>
+      }
+    >
+      <div className="board-drop-thumbs" data-testid="board-drop-thumbs">
+        {thumbs.map((thumb, at) =>
+          thumb.url === null ? (
+            <span key={at} className="board-drop-thumb is-file" title={thumb.name}>
+              {thumb.name}
+            </span>
+          ) : (
+            <img key={at} className="board-drop-thumb" src={thumb.url} alt={thumb.name} />
+          ),
+        )}
+        {count > THUMBS_MAX ? <span className="board-drop-thumb is-more">+{count - THUMBS_MAX}</span> : null}
+      </div>
+      <label className="board-drop-field">
+        <span className="board-drop-label">Why these?</span>
+        <textarea
+          className="board-drop-note"
+          data-testid="board-drop-note"
+          rows={2}
+          value={note}
+          placeholder="Say what to take from them."
+          onChange={(event) => setNote(event.currentTarget.value)}
+          onKeyDown={(event) => event.stopPropagation()}
+        />
+      </label>
+      <div className="board-drop-field">
+        <span className="board-drop-label">Where does it count?</span>
+        <div className="board-drop-scopes">
+          {option("style", "Style", "Whole reel. The agent uses it where it fits.")}
+          {option("shot", "One shot", pickTitle === null ? "Pin to one shot. Only that shot." : `Pin to ${pickTitle}. Only that shot.`)}
+          {option("keep", "Keep", "Save to Assets. Not used yet.")}
+        </div>
+        {scope === "shot" ? (
+          <PartPicker parts={parts} value={pick} noneLabel="Pick a shot" ariaLabel="Shot to pin to" onChange={setPartId} />
+        ) : null}
+      </div>
+      <p className="board-drop-agent" data-testid="board-drop-agent">
+        <span className="board-drop-agent-dot" aria-hidden="true" />
+        {dropBriefLine(count, note, scope, pickTitle)}
+      </p>
+    </Dialog>
+  );
+}

package/src/panels/storyboard/BoardPlan.tsx

@@ -0,0 +1,42 @@
+// THE BOARD'S RIGHT PANEL FOR ONE SELECTED SHOT (Paper SB1): its plan, with
+// the board's head (number, name, status) and the two ways on: Open in Studio
+// and the one primary, Open shot board. The shot board shows the same plan
+// with its own head and footer (`PlanOccupant`, RightColumn).
+import { useShotEditor, useStore } from "../../state/context.js";
+import { shotBoardOf } from "../../state/workspace.js";
+import { PlanPanel } from "./PlanPanel.js";
+
+export function BoardPlan({ partId }: { partId: string }) {
+  const store = useStore();
+  return (
+    <PlanPanel
+      partId={partId}
+      variant="board"
+      footer={
+        <>
+          <button type="button" className="btn board-plan-action" data-testid="board-open-studio" onClick={() => store.openPlannedShot(partId)}>
+            Open in Studio
+          </button>
+          <button
+            type="button"
+            className="btn is-primary board-plan-action"
+            data-testid="board-open-board"
+            onClick={() => store.openShotBoard(partId)}
+          >
+            Open shot board
+          </button>
+        </>
+      }
+    />
+  );
+}
+
+/** The right column's "plan" occupant (`boardRightPanel`): the open shot
+ *  board's plan, following its sketch, else the selected shot card's. */
+export function PlanOccupant() {
+  const plan = useShotEditor(shotBoardOf);
+  const sketch = useShotEditor((s) => s.storyboardSketch);
+  const picked = useShotEditor((s) => (s.storyboardSelection.length === 1 ? s.storyboardSelection[0]! : null));
+  if (plan !== null) return <PlanPanel partId={plan} variant="shot" {...(sketch === null ? {} : { sketchId: sketch })} />;
+  return picked === null ? null : <BoardPlan partId={picked} />;
+}

package/src/panels/storyboard/ComponentSheet.tsx

@@ -0,0 +1,187 @@
+// THE COMPONENT SHEET (S3): a component card on the board, playing, tuned and
+// scoped without leaving the board.
+//
+// THE DOCKED RIGHT CELL, 400 wide, and only while exactly one component card
+// is selected (`boardRightPanel` answers "component"). The mock floats it; the
+// docked shell has no overlays, so it docks (values file, resolved conflicts).
+//
+//   bar      the name, a code or 3D badge, and who made it.
+//   stage    the component live (`ComponentStage`), on the Components
+//            workspace's own look (`componentPreview`, bridge v45), with a
+//            chip that says whether it loops or holds the card's frame.
+//   props    THIS USE (`ThisUsePanel`, keyed `cardUseKey`): every prop of
+//            the master, a blue dot on the ones this card changed. Tweaks ride
+//            on the reference (`reference.props`); the master is never copied.
+//   board    where the card counts (Style, or one shot through
+//            `reference.part`), whether the video has it (a component card
+//            is a requirement), its Frame, Use and Importance (the card-use
+//            block every board panel shares), a vendored component's library,
+//            and the note the agent reads with it.
+//   footer   how many tweaks the card holds, and the door to the master.
+//
+// It is the ONLY panel a component card has on the board, so everything the
+// inspector shows for any other card is here too. A VIEWER reads it all with
+// the writes off (`LockedControls`); the bar, the stage and the doors stay
+// live. The head and the foot stay put while the body scrolls.
+import { useEffect } from "react";
+import type { ReferenceItem3D } from "@dailies-studio/shot/doc";
+import { framesToSeconds } from "@dailies-studio/engine";
+import { defDurationFrames } from "@dailies-studio/shot/doc";
+import { InspectorRow, InspectorSection, LockedControls, SegmentedControl } from "@dailies-studio/ui";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { isReferenceId } from "../../state/storyboardModel.js";
+import { cardUseKey } from "../../state/workspace.js";
+import { ThisUsePanel } from "../studio/ThisUsePanel.js";
+import { formatDuration } from "../timeline/model.js";
+import { CardNoteRow, CardUseRows, ReadoutRow, RequirementRows } from "./boardRows.js";
+import { ComponentStage, DEFAULT_LOOP_SECONDS } from "./ComponentStage.js";
+import { PartPicker } from "./PartPicker.js";
+
+type ComponentCard = Extract<ReferenceItem3D, { type: "component" }>;
+
+export function ComponentSheet() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const selection = useShotEditor((s) => s.storyboardSelection);
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const contracts = useShotEditor((s) => s.contracts);
+  const library = useShotEditor((s) => s.library);
+  const libraryLoaded = useShotEditor((s) => s.libraryLoaded);
+  const look = useShotEditor((s) => s.componentPreview);
+  const id = selection.length === 1 && isReferenceId(selection[0]!) ? selection[0]! : null;
+  const found = id === null ? undefined : doc?.resources?.references?.find((r) => r.id === id);
+  const item: ComponentCard | undefined = found?.type === "component" ? found : undefined;
+  const componentId = item?.component ?? null;
+  const catalogRow = useShotEditor((s) =>
+    componentId === null ? undefined : s.libraryCatalog.find((row) => row.installedAs === componentId),
+  );
+
+  // HOOKS BEFORE THE EARLY RETURN. The contract feeds the props rows and the
+  // stage's binding; the registry row names the host and the author.
+  useEffect(() => {
+    if (componentId !== null) void store.loadContract(componentId);
+  }, [componentId, store]);
+  useEffect(() => {
+    if (componentId !== null && !libraryLoaded) void store.refreshLibrary();
+  }, [componentId, libraryLoaded, store]);
+
+  if (doc === null || id === null || item === undefined) return null;
+  const parts = doc.storyboard?.parts ?? [];
+  const def = item.def === undefined ? undefined : doc.components?.[item.def];
+  const row = componentId === null ? undefined : library.find((r) => r.id === componentId);
+  const contract = componentId === null ? undefined : contracts[componentId];
+  const name = def?.name ?? item.label;
+  const author = row?.library?.publisher ?? "This project";
+  const fps = doc.fps;
+  const ownLength = def !== undefined ? defDurationFrames(def) : catalogRow?.lengthFrames;
+  const loopFrames = look.loopFrames ?? ownLength ?? Math.round(DEFAULT_LOOP_SECONDS * (fps.num / fps.den));
+  const tweaks = Object.keys(item.props).length;
+  const pinned = item.part !== undefined && parts.some((p) => p.id === item.part) ? item.part : null;
+  // PROVENANCE, for a component the Project vendored from the library: read
+  // off the registry row, which is why the card carries no such field.
+  // `modified` means the installed files no longer hash to what was installed.
+  const vendored = row?.library?.scope === "shared" ? row.library : undefined;
+
+  const openComponent = (): void => {
+    if (item.def !== undefined) void store.selectComponent({ kind: "studio", def: item.def });
+    else if (componentId !== null) void store.selectComponent({ kind: "code", module: componentId });
+  };
+
+  return (
+    <aside className="component-sheet" data-testid="component-sheet" aria-label={`${name} component`}>
+      <header className="panel-head component-sheet-bar">
+        <span className="component-sheet-name">{name}</span>
+        <span className="badge">{def !== undefined ? "3D" : "code"}</span>
+        <span className="component-sheet-author">{author}</span>
+      </header>
+      <div className="component-sheet-body">
+        <div className="component-sheet-stage">
+          {def !== undefined || row?.host === "three" ? (
+            <ComponentStage
+              doc={doc}
+              item={item}
+              contract={contract}
+              availability={row?.contractAvailability}
+              lengthFrames={ownLength}
+              {...(look.background === null ? {} : { background: look.background })}
+              loopFrames={loopFrames}
+            />
+          ) : (
+            <span className="component-stage-status" role="status">
+              {row === undefined && !libraryLoaded ? "Loading the preview…" : "This component has no live preview here."}
+            </span>
+          )}
+          {/* A card that names a frame shows that frame and holds it
+              (ComponentStage), so the chip says which of the two it does. */}
+          <span className="component-sheet-loop" data-testid="component-sheet-loop">
+            {item.frame === undefined ? (
+              <>
+                <span className="component-sheet-loop-play" aria-hidden="true" />
+                Looping · {formatDuration(framesToSeconds(loopFrames, fps))}
+              </>
+            ) : (
+              `Holding frame ${item.frame}`
+            )}
+          </span>
+        </div>
+        <LockedControls value={readOnly}>
+          <ThisUsePanel useKey={cardUseKey(item.id)} />
+          <InspectorSection title="On the board" collapsible={false}>
+            {/* WHERE IT COUNTS, the drop dialog's words: the whole reel, or the
+                one shot named in the row under it. The row is "Counts in",
+                not "Use": Use is what the card is for, two rows down. */}
+            <InspectorRow label="Counts in">
+              <SegmentedControl
+                ariaLabel="Counts in"
+                value={pinned === null ? "style" : "shot"}
+                options={[
+                  { value: "style", label: "Style", title: "The whole reel: the agent uses it where it fits", testId: "component-sheet-style" },
+                  {
+                    value: "shot",
+                    label: "One shot",
+                    disabled: parts.length === 0,
+                    title: parts.length === 0 ? "Add a shot first" : "Pin it to one shot: only that shot uses it",
+                    testId: "component-sheet-pin",
+                  },
+                ]}
+                onChange={(value) => {
+                  if (value === "style" && pinned !== null) store.attachStoryboardItems([id], null);
+                  else if (value === "shot" && pinned === null && parts[0] !== undefined) store.attachStoryboardItems([id], parts[0].id);
+                }}
+              />
+            </InspectorRow>
+            {pinned === null ? null : (
+              <InspectorRow label="Pinned shot">
+                <PartPicker
+                  parts={parts}
+                  value={pinned}
+                  noneLabel="Style"
+                  ariaLabel="Pinned shot"
+                  onChange={(part) => store.attachStoryboardItems([id], part)}
+                />
+              </InspectorRow>
+            )}
+            <RequirementRows doc={doc} item={item} />
+            <CardUseRows card={item} />
+            {vendored === undefined ? null : (
+              <ReadoutRow label="Library" {...(vendored.libraryId === undefined ? {} : { title: vendored.libraryId })}>
+                {vendored.publisher ?? "dailies"}/{vendored.libraryId ?? componentId}
+                {vendored.libraryVersion === undefined ? "" : ` v${vendored.libraryVersion}`}
+                {vendored.modified === true ? " · modified" : ""}
+              </ReadoutRow>
+            )}
+            <CardNoteRow card={item} />
+          </InspectorSection>
+        </LockedControls>
+      </div>
+      <footer className="panel-foot component-sheet-foot">
+        <span className="component-sheet-tweaks" data-testid="component-sheet-tweaks">
+          {tweaks === 1 ? "1 tweak" : `${tweaks} tweaks`} · linked to master
+        </span>
+        <button type="button" className="btn is-primary" data-testid="component-sheet-open" onClick={openComponent}>
+          Open component
+        </button>
+      </footer>
+    </aside>
+  );
+}