@dailies-studio/shot-editor 0.1.0 → 0.2.0

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

@@ -0,0 +1,471 @@
+// THE SHOT BOARD'S ITEM INSPECTOR (Paper SB3, SB5): the right column while
+// items on the sketch are selected (`boardRightPanel` answers "sketch").
+//
+// THE STUDIO INSPECTOR'S LOOK: static sections (`InspectorSection`) of rows
+// (`InspectorRow`) with each label inside its pill, and Position as the
+// Transform section's grid of fields with their names inside (X, Y, W, H).
+//
+//   image      its picture, Fit and Replace, then its card (Use, Importance:
+//              the card-use block every board panel shares, and the note),
+//              then Position
+//   component  Open in Components, its props on the card (`ThisUsePanel`, so a
+//              tweak rides on `card.props`, live while it plays), its card
+//              (Frame, Use, Importance, the note), Position; while playing,
+//              what the stage holds
+//   text       its words, role and alignment; box: label and tone; arrow:
+//              label
+//   several    align and distribute (`ALIGN_MODES`' words, `alignPatches`)
+//
+// THE ITEM'S OWN FIELDS write through the store's sketch verbs, which lock
+// the layout while it plays (X/Y/W/H show it read-only then); the card's
+// fields through `updateReference`. Every write is one undo step, and a drag
+// on X, Y, W or H is one too, drawn on the paper as it moves
+// (`beginSketchDrag`). A viewer reads it all with the writes off
+// (`LockedControls`).
+import { useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { ALIGN_LABELS, MIN_DISTRIBUTE, DISTRIBUTE_MODES, SKETCH_LABEL_MAX, SKETCH_TEXT_MAX, addReference, findSketchItem, sketchCardOf, updateSketchItem } from "@dailies-studio/shot/doc";
+import type { AlignMode, Doc3D, ReferenceItem3D, SketchItem3D, SketchItemPatch, SketchRef3D } from "@dailies-studio/shot/doc";
+import { InspectorRow, InspectorSection, LockedControls, NumberField, PropertyGrid, SegmentedControl, TextField, useLocked } from "@dailies-studio/ui";
+import { COMPONENT_ICON, OPEN_ELSEWHERE_ICON, SPARKLES_ICON, kindIcon } from "../../../icons.js";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { useImageThumb } from "../../../state/imageThumbs.js";
+import { SKETCH_PLAYING } from "../../../state/store.js";
+import { BUILTIN_NO_MASTER, cardUseKey, isBuiltinComponent } from "../../../state/workspace.js";
+import { ThisUsePanel } from "../../studio/ThisUsePanel.js";
+import { CardNoteRow, CardUseRows } from "../boardRows.js";
+import { assetUrl } from "../ReferencePreview.js";
+import { ImagePicker } from "./ImagePicker.js";
+import type { ImagePick } from "./ImagePicker.js";
+import { alignPatches, componentNameOf, fileNameOf, itemKindOf, itemNameOf } from "./sketchModel.js";
+
+/** The align and distribute glyphs, AlignRow's own 24-grid strokes. */
+const ALIGN_PATHS = {
+  left: "M5 3V21M8 7H20V10H8M8 14H16V17H8",
+  hcenter: "M12 3V21M5 7H19V10H5M8 14H16V17H8",
+  right: "M19 3V21M4 7H16V10H4M8 14H16V17H8",
+  top: "M3 5H21M7 8V20H10V8M14 8V16H17V8",
+  vcenter: "M3 12H21M7 5V19H10V5M14 8V16H17V8",
+  bottom: "M3 19H21M7 4V16H10V4M14 8V16H17V8",
+  hdistribute: "M3 4V20M21 4V20M7 8V16M12 5V19M17 8V16",
+  vdistribute: "M4 3H20M4 21H20M8 7H16M5 12H19M8 17H16",
+} as const satisfies Record<AlignMode, string>;
+const ALIGN_ORDER: readonly AlignMode[] = ["left", "hcenter", "right", "hdistribute", "top", "vcenter", "bottom", "vdistribute"];
+
+export function SketchInspector() {
+  const doc = useShotEditor((s) => s.doc);
+  const selection = useShotEditor((s) => s.sketchSelection);
+  if (doc === null) return null;
+  const items = selection.flatMap((id) => {
+    const at = findSketchItem(doc, id);
+    return at === null ? [] : [at.item];
+  });
+  if (items.length === 0) return null;
+  if (items.length > 1) {
+    return (
+      <Shell icon={kindIcon("rect")} title={`${items.length} items`}>
+        <AlignSection doc={doc} items={items} />
+      </Shell>
+    );
+  }
+  const item = items[0]!;
+  switch (item.kind) {
+    case "text":
+      return <TextInspector doc={doc} item={item} />;
+    case "box":
+      return <BoxInspector doc={doc} item={item} />;
+    case "arrow":
+      return <ArrowInspector doc={doc} item={item} />;
+    case "ref": {
+      const card = sketchCardOf(doc, item);
+      if (card?.type === "component") return <ComponentInspector doc={doc} item={item} card={card} />;
+      return <PictureInspector doc={doc} item={item} card={card?.type === "asset" ? card : undefined} />;
+    }
+  }
+}
+
+// ── the frame of every inspector ─────────────────────────────────────────
+
+function Shell(props: { icon: ReactNode; title: string; badge?: string; children: ReactNode }) {
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const playing = useShotEditor((s) => s.sketchPlaying);
+  return (
+    <section className="sketch-inspector" aria-label={props.title} data-testid="sketch-inspector">
+      <header className="panel-head sketch-inspector-head">
+        <span className="sketch-inspector-icon" aria-hidden="true">
+          {props.icon}
+        </span>
+        <h3 className="sketch-inspector-title">{props.title}</h3>
+        {props.badge === undefined ? null : <span className="badge">{props.badge}</span>}
+      </header>
+      {playing ? (
+        <div className="sketch-inspector-playing" data-testid="sketch-inspector-playing">
+          <span className="sketch-live-dot" aria-hidden="true" />
+          <span className="sketch-inspector-playing-word">Playing in one stage</span>
+          <span className="sketch-inspector-meta">1 context</span>
+        </div>
+      ) : null}
+      <LockedControls value={readOnly}>
+        <div className="sketch-inspector-body">{props.children}</div>
+      </LockedControls>
+      <footer className="panel-foot is-note">
+        {SPARKLES_ICON}
+        The agent reads this item as layout text.
+      </footer>
+    </section>
+  );
+}
+
+/** One of the inspector's groups: a static section, the Studio's. */
+function Group(props: { title: string; children: ReactNode }) {
+  return (
+    <InspectorSection title={props.title} collapsible={false}>
+      {props.children}
+    </InspectorSection>
+  );
+}
+
+/**
+ * X, Y, W and H in layer units (design px), the Transform section's grid:
+ * each name inside its field. Read-only while it plays. A drag is the store's
+ * sketch drag, one undo step, the item moving on the paper as it goes; a
+ * typed value lands on the whole pixel.
+ *
+ * Each cell is a row (`InspectorRow`), as every Studio grid's is: the
+ * inspector's type scale (12px values, 11px names and units) is the row's,
+ * and a bare field in the grid kept the field's own 13px beside the panel's
+ * 12px rows.
+ */
+function Position({ item }: { item: Exclude<SketchItem3D, { kind: "arrow" }> }) {
+  const store = useStore();
+  const playing = useShotEditor((s) => s.sketchPlaying);
+  const [x, y] = item.position;
+  const [w, h] = item.size;
+  const field = (label: string, name: string, value: number, patchOf: (v: number) => SketchItemPatch, min?: number) => (
+    <InspectorRow>
+      <NumberField
+        label={label}
+        ariaLabel={name}
+        value={value}
+        unit="px"
+        readOnly={playing}
+        {...(min === undefined ? {} : { min })}
+        onCommit={(next) => store.updateSketchItem(item.id, patchOf(Math.round(next)))}
+        onScrubStart={() => store.beginSketchDrag()}
+        onScrub={(next) => store.dragSketchItems({ [item.id]: patchOf(Math.round(next)) })}
+        onScrubEnd={(commit) => store.endSketchDrag(commit)}
+      />
+    </InspectorRow>
+  );
+  return (
+    <Group title="Position">
+      <PropertyGrid>
+        {field("X", "Position X", x, (v) => ({ position: [v, y] }))}
+        {field("Y", "Position Y", y, (v) => ({ position: [x, v] }))}
+        {field("W", "Width", w, (v) => ({ size: [v, h] }), 1)}
+        {field("H", "Height", h, (v) => ({ size: [w, v] }), 1)}
+      </PropertyGrid>
+      {playing ? <p className="insp-note">{SKETCH_PLAYING}</p> : null}
+    </Group>
+  );
+}
+
+/** The card a ref item draws: what it is for, how hard it binds, and the
+ *  note, the rows every board panel shows for a card. */
+function CardGroup({ card }: { card: Extract<ReferenceItem3D, { type: "asset" | "component" }> }) {
+  return (
+    <Group title="Card">
+      <CardUseRows card={card} />
+      <CardNoteRow card={card} />
+    </Group>
+  );
+}
+
+// ── a picture ────────────────────────────────────────────────────────────
+
+function PictureInspector({ doc, item, card }: { doc: Doc3D; item: SketchRef3D; card: Extract<ReferenceItem3D, { type: "asset" }> | undefined }) {
+  const store = useStore();
+  const playing = useShotEditor((s) => s.sketchPlaying);
+  // Replace writes, so a viewer's panel takes it with the fields. Read off
+  // the store: this component renders the Shell, so the Shell's
+  // `LockedControls` sits below it.
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const [replacing, setReplacing] = useState(false);
+  const replaceButton = useRef<HTMLButtonElement>(null);
+  const asset = card === undefined ? undefined : doc.assets[card.asset];
+  const image = asset?.kind === "image" ? asset : undefined;
+  const thumb = useImageThumb(image === undefined ? "" : assetUrl(image.path), image?.hash ?? "", 272);
+  const kind = itemKindOf(doc, item);
+
+  // REPLACE points the item at another picture, in one edit: the plan's card
+  // for that file, made when it has none, or the Style card picked.
+  const replace = (pick: ImagePick): void => {
+    const plan = store.getState().storyboardPlan;
+    store.edit((base) => {
+      let next = base;
+      let ref = pick.kind === "card" ? pick.card : undefined;
+      if (pick.kind === "asset") {
+        const file = base.assets[pick.asset];
+        if (file === undefined || plan === null) return base;
+        ref = base.resources?.references?.find((r) => r.type === "asset" && r.asset === pick.asset && r.part === plan)?.id;
+        if (ref === undefined) {
+          const before = new Set((base.resources?.references ?? []).map((r) => r.id));
+          next = addReference(base, {}, { type: "asset", label: fileNameOf(file.path), asset: pick.asset, use: "asset", part: plan }, "pin");
+          ref = next.resources?.references?.find((r) => !before.has(r.id))?.id;
+        }
+      }
+      return ref === undefined ? base : updateSketchItem(next, item.id, { ref });
+    });
+  };
+
+  return (
+    <Shell icon={kindIcon(kind === "Video" ? "video" : "image")} title={itemNameOf(doc, item)} badge={kind.toLowerCase()}>
+      <Group title="Picture">
+        {image !== undefined ? (
+          <div className="sketch-preview" style={{ aspectRatio: `${item.size[0]} / ${item.size[1]}` }}>
+            {thumb === null ? null : <img src={thumb} alt="" draggable={false} style={{ objectFit: item.fit ?? "cover" }} />}
+          </div>
+        ) : card === undefined ? (
+          <p className="insp-note">This card is gone from the Project. Replace it, or delete the item.</p>
+        ) : null}
+        <InspectorRow label="Fit">
+          <SegmentedControl
+            ariaLabel="Fit"
+            value={item.fit ?? "cover"}
+            options={[
+              { value: "cover", label: "Fill" },
+              { value: "contain", label: "Fit" },
+            ]}
+            onChange={(value) => store.updateSketchItem(item.id, { fit: value === "contain" ? "contain" : null })}
+          />
+        </InspectorRow>
+        {/* The house row of buttons: one 28px house button across the row. */}
+        <div className="insp-buttons">
+          <button ref={replaceButton} type="button" className="btn" disabled={playing || readOnly} onClick={() => setReplacing(true)}>
+            Replace…
+          </button>
+        </div>
+      </Group>
+      {card === undefined ? null : <CardGroup card={card} />}
+      <Position item={item} />
+      <ImagePicker open={replacing} anchor={replaceButton} title="Replace the picture" onPick={replace} onClose={() => setReplacing(false)} />
+    </Shell>
+  );
+}
+
+// ── a component ──────────────────────────────────────────────────────────
+
+function ComponentInspector({ doc, item, card }: { doc: Doc3D; item: SketchRef3D; card: Extract<ReferenceItem3D, { type: "component" }> }) {
+  const store = useStore();
+  const playing = useShotEditor((s) => s.sketchPlaying);
+  const componentId = card.def !== undefined && doc.components?.[card.def] !== undefined ? null : (card.component ?? null);
+  // A built-in has no source to open in Components.
+  const builtin = useShotEditor((s) => isBuiltinComponent(s.library, componentId ?? undefined));
+  // The props rows read the contract.
+  useEffect(() => {
+    if (componentId !== null) void store.loadContract(componentId);
+  }, [componentId, store]);
+  const open = (): void => {
+    // Leaving for Components closes the board and keeps this shot board, so
+    // the way back lands here (`returnTarget`, `storyboardPlan`).
+    if (componentId === null && card.def !== undefined) void store.selectComponent({ kind: "studio", def: card.def });
+    else if (componentId !== null) void store.selectComponent({ kind: "code", module: componentId });
+  };
+  return (
+    <Shell icon={COMPONENT_ICON} title={componentNameOf(doc, card)} badge="component">
+      <Group title="Component">
+        {/* A door on the house row of buttons: one 28px house button across
+            the row, its words and glyph together. */}
+        <div className="insp-buttons">
+          <button
+            type="button"
+            className="btn sketch-door"
+            data-testid="sketch-open-component"
+            disabled={builtin}
+            title={builtin ? BUILTIN_NO_MASTER : undefined}
+            onClick={open}
+          >
+            Open in Components
+            {OPEN_ELSEWHERE_ICON}
+          </button>
+        </div>
+        {playing ? <p className="insp-note">Edits show live while playing.</p> : null}
+      </Group>
+      <ThisUsePanel useKey={cardUseKey(card.id)} propsLabel="Props" />
+      <CardGroup card={card} />
+      <Position item={item} />
+      {playing ? <InThisStage doc={doc} /> : null}
+    </Shell>
+  );
+}
+
+/** SB5's "In this stage": what moves, what holds, and what is overlay. */
+function InThisStage({ doc }: { doc: Doc3D }) {
+  const sketchId = useShotEditor((s) => s.storyboardSketch);
+  const items = doc.storyboard?.parts.flatMap((p) => p.sketches ?? []).find((s) => s.id === sketchId)?.items ?? [];
+  const components = items.flatMap((item) => {
+    if (item.kind !== "ref") return [];
+    const card = sketchCardOf(doc, item);
+    return card?.type === "component" ? [componentNameOf(doc, card)] : [];
+  });
+  const rows: { name: string; badge: string; moving: boolean }[] = [
+    ...[...new Set(components)].map((name) => ({ name, badge: "Moving", moving: true })),
+    { name: "Image, text, box", badge: "Holding", moving: false },
+    { name: "Arrow, box label", badge: "Overlay", moving: false },
+  ];
+  return (
+    <Group title="In this stage">
+      <ul className="sketch-stage-list">
+        {rows.map((row) => (
+          <li key={row.name} className={`sketch-stage-row${row.moving ? " is-moving" : ""}`}>
+            <span className="sketch-stage-dot" aria-hidden="true" />
+            <span className="sketch-stage-name">{row.name}</span>
+            <span className={`badge${row.moving ? " is-success" : ""}`}>{row.badge}</span>
+          </li>
+        ))}
+      </ul>
+    </Group>
+  );
+}
+
+// ── text, box, arrow ─────────────────────────────────────────────────────
+
+function TextInspector({ doc, item }: { doc: Doc3D; item: Extract<SketchItem3D, { kind: "text" }> }) {
+  const store = useStore();
+  return (
+    <Shell icon={kindIcon("text")} title={itemNameOf(doc, item)} badge="text">
+      <Group title="Text">
+        <InspectorRow label="Content" align="start">
+          <TextField
+            multiline
+            value={item.text}
+            ariaLabel="Content"
+            onCommit={(text) => {
+              // A text item is never stored empty: an emptied field keeps the words.
+              const next = text.trim().slice(0, SKETCH_TEXT_MAX).trim();
+              if (next !== "" && next !== item.text) store.updateSketchItem(item.id, { text: next });
+            }}
+          />
+        </InspectorRow>
+        <InspectorRow label="Role">
+          <SegmentedControl
+            ariaLabel="Role"
+            value={item.role}
+            options={[
+              { value: "title", label: "Title" },
+              { value: "body", label: "Body" },
+              { value: "caption", label: "Caption" },
+            ]}
+            onChange={(value) => {
+              if (value === "title" || value === "body" || value === "caption") store.updateSketchItem(item.id, { role: value });
+            }}
+          />
+        </InspectorRow>
+        <InspectorRow label="Align">
+          <SegmentedControl
+            ariaLabel="Align"
+            value={item.align ?? "start"}
+            options={[
+              { value: "start", label: "Start" },
+              { value: "center", label: "Centre" },
+              { value: "end", label: "End" },
+            ]}
+            onChange={(value) => store.updateSketchItem(item.id, { align: value === "center" || value === "end" ? value : null })}
+          />
+        </InspectorRow>
+      </Group>
+      <Position item={item} />
+    </Shell>
+  );
+}
+
+function LabelRow({ itemId, label }: { itemId: string; label: string | undefined }) {
+  const store = useStore();
+  return (
+    <InspectorRow label="Label">
+      <TextField
+        value={label ?? ""}
+        placeholder="What this stands for"
+        ariaLabel="Label"
+        onCommit={(text) => {
+          const next = text.trim().slice(0, SKETCH_LABEL_MAX).trim();
+          if (next !== (label ?? "")) store.updateSketchItem(itemId, { label: next === "" ? null : next });
+        }}
+      />
+    </InspectorRow>
+  );
+}
+
+function BoxInspector({ doc, item }: { doc: Doc3D; item: Extract<SketchItem3D, { kind: "box" }> }) {
+  const store = useStore();
+  return (
+    <Shell icon={kindIcon("rect")} title={itemNameOf(doc, item)} badge="box">
+      <Group title="Box">
+        <LabelRow itemId={item.id} label={item.label} />
+        <InspectorRow label="Tone">
+          <SegmentedControl
+            ariaLabel="Tone"
+            value={item.tone ?? "light"}
+            options={[
+              { value: "light", label: "Light" },
+              { value: "dark", label: "Dark" },
+              { value: "accent", label: "Accent" },
+            ]}
+            onChange={(value) => store.updateSketchItem(item.id, { tone: value === "dark" || value === "accent" ? value : null })}
+          />
+        </InspectorRow>
+      </Group>
+      <Position item={item} />
+    </Shell>
+  );
+}
+
+function ArrowInspector({ doc, item }: { doc: Doc3D; item: Extract<SketchItem3D, { kind: "arrow" }> }) {
+  return (
+    <Shell icon={kindIcon("arrow")} title={itemNameOf(doc, item)} badge="arrow">
+      <Group title="Arrow">
+        <LabelRow itemId={item.id} label={item.label} />
+        <p className="insp-note">An arrow stays a note: the Studio never makes it a layer.</p>
+      </Group>
+    </Shell>
+  );
+}
+
+// ── several ──────────────────────────────────────────────────────────────
+
+function AlignSection({ doc, items }: { doc: Doc3D; items: readonly SketchItem3D[] }) {
+  const store = useStore();
+  const playing = useShotEditor((s) => s.sketchPlaying);
+  // The buttons write, so a viewer's locked panel takes them with the fields.
+  const locked = useLocked();
+  const run = (mode: AlignMode): void => {
+    const patches = alignPatches(items, mode, doc.size);
+    if (Object.keys(patches).length === 0) return;
+    store.edit((base) => Object.entries(patches).reduce((next, [id, patch]) => updateSketchItem(next, id, patch), base));
+  };
+  return (
+    <Group title="Align">
+      <div className="sketch-align" role="group" aria-label="Align and distribute" data-testid="sketch-align">
+        {ALIGN_ORDER.map((mode) => {
+          const needsThree = DISTRIBUTE_MODES.has(mode) && items.length < MIN_DISTRIBUTE;
+          const label = ALIGN_LABELS[mode];
+          return (
+            <button
+              key={mode}
+              type="button"
+              className="align-button"
+              aria-label={label}
+              title={playing ? SKETCH_PLAYING : needsThree ? `${label}: needs ${MIN_DISTRIBUTE} or more items` : label}
+              disabled={needsThree || playing || locked}
+              onClick={() => run(mode)}
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <path d={ALIGN_PATHS[mode]} />
+              </svg>
+            </button>
+          );
+        })}
+      </div>
+    </Group>
+  );
+}