@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/inspector/MarkerSection.tsx

@@ -5,28 +5,58 @@
 // would mean the panel could be showing the wrong tab for its own subject, and
 // the author would click a diamond and see nothing.
 //
-// The FRAME field is a master frame, like every other number about a marker, and
-// it is the only place in this chrome where one is typed rather than dragged.
-import { ColorPicker, InspectorRow, InspectorSection, NumberField, TextField } from "@dailies-studio/ui";
+// The FRAME field is a master frame, like every other number about a marker. It
+// is the only place in this chrome where one can be TYPED, and it drags through
+// the same scrub bracket the lane's pin does, so both routes are one undo entry
+// and both land the mark on the same integer.
+import { ColorField, InspectorRow, InspectorSection, NumberField, TextField, useLocked } from "@dailies-studio/ui";
+import { updateMarker } from "@dailies-studio/shot/doc";
+import type { MarkerRef } from "@dailies-studio/shot/doc";
 import { useShotEditor, useStore } from "../../state/context.js";
 import { timecode } from "../timeline/model.js";
-import { NO_SCRUB } from "./useDocWrite.js";
+import { useScrub } from "./useDocWrite.js";
 
 /** What a marker with no `color` is drawn in. The same value shotTokens.css
  *  gives `--marker-pin`, restated here because the swatch needs a concrete
  *  colour to show and a CSS variable is not one. */
 const DEFAULT_MARKER_COLOR = "#ffffff";
 
+type MarkerPatch = Partial<Omit<MarkerRef, "id">>;
+
 export function MarkerSection() {
   const store = useStore();
   const doc = useShotEditor((s) => s.doc);
   const selected = useShotEditor((s) => s.selectedMarker);
+
+  // ONE bracket for both dragged fields, DECLARED BEFORE THE EARLY RETURNS,
+  // because a hook after a conditional return changes the hook count between
+  // renders.
+  // The widget sends the patch it is pointing at; the mark is re-read from the
+  // store at capture time rather than closed over from this render, which is
+  // the live read `useSelectionScrub` makes for the same reason.
+  const drag = useScrub((d, raw) => {
+    const id = store.getState().selectedMarker;
+    const patch = raw as MarkerPatch;
+    const at = id === null ? undefined : d.markers?.find((m) => m.id === id);
+    if (id === null || at === undefined) return d;
+    // `updateMarker` rebuilds the array unconditionally, so a capture landing
+    // where the mark already is would leave an undo entry for a drag that
+    // travelled nowhere, and the colour picker emits one on press, before the
+    // pointer has moved at all. Same guard `dragMarker` keeps in the store.
+    const same = Object.entries(patch).every(([k, v]) => (at as unknown as Record<string, unknown>)[k] === v);
+    return same ? d : updateMarker(d, id, patch);
+  });
+  const move = (patch: MarkerPatch): void => drag.move(patch);
+  // Delete is a plain button, so it reads a viewer's lock itself; the fields
+  // read it on their own.
+  const locked = useLocked();
+
   if (doc === null || selected === null) return null;
   const marker = (doc.markers ?? []).find((m) => m.id === selected);
   if (marker === undefined) return null;
 
   return (
-    <InspectorSection title="Marker" persistKey="shot:marker" collapsible={false}>
+    <InspectorSection className="insp-object" title="Marker" persistKey="shot:marker" collapsible={false}>
       <InspectorRow label="Label">
         <TextField
           value={marker.label ?? ""}
@@ -41,22 +71,36 @@ export function MarkerSection() {
           ariaLabel="Marker frame"
           min={0}
           step={1}
+          onScrubStart={drag.start}
+          onScrub={(frame) => move({ frame: Math.max(0, Math.round(frame)) })}
+          onScrubEnd={drag.end}
           onCommit={(frame) => store.setMarker(marker.id, { frame: Math.max(0, Math.round(frame)) })}
         />
-        <span className="insp-dim">{timecode(marker.frame, doc.fps)}</span>
+      </InspectorRow>
+      {/* THE SAME FRAME ON THE CLOCK, as its own readout row (`insp-readout`),
+          the Time section's shape: frames are what a marker is stored in, the
+          clock is what an author reads a cut against. It sat beside the field
+          as a 10px note, which narrowed the field and set a number in the
+          wrong face. */}
+      <InspectorRow label="Timecode" className="insp-readout">
+        <span className="insp-dim" data-testid="marker-timecode">
+          {timecode(marker.frame, doc.fps)}
+        </span>
       </InspectorRow>
       <InspectorRow label="Colour">
-        <ColorPicker
+        <ColorField
           value={marker.color ?? DEFAULT_MARKER_COLOR}
           ariaLabel="Marker colour"
-          scrub={NO_SCRUB}
+          scrub={{ start: drag.start, move: (color) => move({ color: String(color) }), end: drag.end }}
           commit={(color) => store.setMarker(marker.id, { color })}
         />
       </InspectorRow>
       <InspectorRow>
-        <button type="button" className="btn" onClick={() => store.removeMarker(marker.id)}>
-          Delete marker
-        </button>
+        <div className="insp-buttons">
+          <button type="button" className="btn" disabled={locked} onClick={() => store.removeMarker(marker.id)}>
+            Delete marker
+          </button>
+        </div>
       </InspectorRow>
     </InspectorSection>
   );

package/src/panels/inspector/ParamRow.tsx

@@ -1,69 +1,100 @@
-// One preset param, spec-driven. Shared by the motion-block panel and the
-// transition panel — both drive a `TransitionParamSpec`, and two copies of a
-// widget that turns a spec into a control is two places for "vec2 means two
-// fields" to be decided differently.
+// One transition param, spec-driven: a `TransitionParamSpec` turned into the
+// `PropRow` every ControlSpec surface draws (a component's props, code
+// defaults, material parameters), so a transition's knobs look and behave like
+// every other contract's: the name in the label column, the control across the
+// rest, a bounded number as a field plus its slider.
 //
-// Written here rather than through `PropControl`, because that widget
-// dispatches a `ControlSpec` from @dailies-studio/contract and these are
-// `TransitionParamSpec`s — a deliberately smaller vocabulary of exactly three
-// kinds. Adapting the one into the other would be more code than the three
-// arms, and would put a lossy translation between the author and the value.
-import { InspectorRow, NumberField, Toggle } from "@dailies-studio/ui";
+// ── WHY IT ADAPTS ONTO `PropControl` INSTEAD OF DISPATCHING ITSELF ─────
+//
+// It used to switch on the spec kind right here, on the argument that three
+// arms cost less than a translation into `ControlSpec`. The argument was
+// cheap and the bill was invisible: `PropControl` is where the drag-to-scrub
+// route, the range slider and the searchable enum live, so a second dispatcher
+// beside it does not stay merely smaller, it leaves every transition param
+// permanently the poorer control.
+//
+// The adapter is total and lossless in the direction it runs: every
+// `TransitionParamSpec` kind is a `ControlSpec` kind, carrying the same field
+// names. Values come back through `resolveParams`, which is the lane's ONE
+// param coercion path, for a commit and for every move of a drag alike: the
+// inspector cannot invent a shape the stage, the exporter and the player would
+// read differently.
+import { PropRow } from "@dailies-studio/ui";
+import type { ScrubHandlers } from "@dailies-studio/ui";
+import { resolveParams } from "@dailies-studio/transitions";
 import type { TransitionParamSpec } from "@dailies-studio/transitions";
+import { humanizeKey } from "@dailies-studio/contract";
+import type { ControlSpec } from "@dailies-studio/contract";
 import type { Value, Vec2 } from "@dailies-studio/engine";
 
 export function ParamRow(props: {
   spec: TransitionParamSpec;
   value: Value;
   onCommit(next: Value): void;
+  /** The document scrub bracket for this param, so a drag previews on the
+   *  stage under the pointer and is one undo entry. Its `move` is handed the
+   *  COERCED value, as `onCommit` is. */
+  scrub: ScrubHandlers;
 }) {
-  const { spec } = props;
-  const label = spec.label ?? spec.name;
-  const limits: { min?: number; max?: number } = {};
-  if (spec.min !== undefined) limits.min = spec.min;
-  if (spec.max !== undefined) limits.max = spec.max;
-
-  if (spec.kind === "boolean") {
-    return (
-      <InspectorRow label={label}>
-        <Toggle
-          checked={props.value === true}
-          ariaLabel={label}
-          onChange={(next) => props.onCommit(next)}
-        />
-      </InspectorRow>
-    );
-  }
-  if (spec.kind === "vec2") {
-    const v = asVec2(props.value);
-    return (
-      <InspectorRow label={label}>
-        {([0, 1] as const).map((i) => (
-          <NumberField
-            key={i}
-            value={v[i]}
-            ariaLabel={`${label} ${i === 0 ? "X" : "Y"}`}
-            {...limits}
-            step={spec.step ?? 0.01}
-            onCommit={(next) => props.onCommit(i === 0 ? [next, v[1]] : [v[0], next])}
-          />
-        ))}
-      </InspectorRow>
-    );
-  }
+  const { spec, onCommit, scrub } = props;
+  const coerce = (raw: unknown): Value => resolveParams([spec], () => raw as Value)[spec.name]!;
   return (
-    <InspectorRow label={label}>
-      <NumberField
-        value={typeof props.value === "number" ? props.value : 0}
-        ariaLabel={label}
-        {...limits}
-        step={spec.step ?? 0.01}
-        onCommit={(next) => props.onCommit(next)}
-      />
-    </InspectorRow>
+    <PropRow
+      spec={toControlSpec(spec)}
+      value={props.value}
+      commit={(raw) => onCommit(coerce(raw))}
+      scrub={{ start: scrub.start, move: (raw) => scrub.move(coerce(raw)), end: scrub.end }}
+      // The param's name, which is its whole identity: a key in
+      // `transition.params`. A hook for tests and automation that does not
+      // depend on the words the row shows.
+      rowProps={{ "data-param": spec.name }}
+      // The one colour spelling this lane stores is `#rrggbb`, so the picker
+      // offers no alpha it would throw away: `resolveParams` refuses an
+      // 8-digit hex and puts the preset's default back.
+      {...(spec.kind === "color" ? { opaqueColor: true } : {})}
+    />
   );
 }
 
+/**
+ * `TransitionParamSpec` -> the `ControlSpec` `PropControl` speaks.
+ *
+ * `key` and `propName` are both the param NAME because that is the only
+ * identity a transition param has: it is a key in `transition.params`, never a
+ * prop on a component. The label is the preset's own when it gives one, and
+ * otherwise the name humanized ("smoothness" reads "Smoothness"), never the
+ * raw key. Humanized HERE rather than left to `controlLabel`, because
+ * `humanizeKey` splits camelCase only, and a GL preset's names keep the
+ * shader's snake_case: "zoom_quickness" read "Zoom_quickness".
+ *
+ * `animatable: false` is the truth in this lane rather than a shrug. No track
+ * path reaches `transition.params`, so a param is a static field on the
+ * transition; and `Animatable` is only ever read by the contract hasher, which
+ * nothing on this path goes through.
+ */
+function toControlSpec(spec: TransitionParamSpec): ControlSpec {
+  const base = {
+    key: spec.name,
+    propName: spec.name,
+    animatable: false as const,
+    label: spec.label ?? humanizeKey(spec.name.replace(/_/g, " ")),
+  };
+  if (spec.kind === "boolean") return { ...base, kind: "boolean", default: spec.default === true };
+  if (spec.kind === "color") {
+    return { ...base, kind: "color", default: typeof spec.default === "string" ? spec.default : "#ffffff" };
+  }
+  // A step only where the preset names one: absent, `PropControl` takes the
+  // range's own quantum for a bounded number and 0.01 for an open one.
+  const limits = {
+    ...(spec.step === undefined ? {} : { step: spec.step }),
+    ...(spec.min === undefined ? {} : { min: spec.min }),
+    ...(spec.max === undefined ? {} : { max: spec.max }),
+  };
+  return spec.kind === "vec2"
+    ? { ...base, kind: "vec2", default: asVec2(spec.default), ...limits }
+    : { ...base, kind: "number", default: typeof spec.default === "number" ? spec.default : 0, ...limits };
+}
+
 function asVec2(v: Value): Vec2 {
   return Array.isArray(v) && typeof v[0] === "number" && typeof v[1] === "number"
     ? [v[0], v[1]]

package/src/panels/inspector/RightColumn.tsx

@@ -0,0 +1,152 @@
+// The right column of the docked shell: the inspector, or the agent in its
+// place. The column is the grid cell and paints the ground; its occupant fills
+// it. The cell stands even with no document open, so the stage never shows
+// through an empty right column.
+//
+// The head is the column's, not an occupant's: it names which one is showing
+// and switches between them, at the bar height, so its bottom edge is the
+// canvas bar's and the left column's. The inspector's status footer
+// (InspectorFooter) pins under it at the same height.
+//
+// ON THE BOARD, ONE LADDER (`boardRightPanel`): the agent, then comments, then
+// the component sheet (S3) while one component card is
+// selected, then the inspector when the selection names a task (a card, a
+// gap, a cut), then Project assets while the author has them open (the +
+// menu), or the Plan panel while one shot card is selected (Paper SB1).
+// Otherwise the board has no right cell at all: App draws the column at 0 and
+// the canvas runs to the window's edge. On a shot board the Plan panel is the
+// panel at rest and the item inspector (`"sketch"`) the panel for a pick. The
+// component sheet, the Plan panel and the item inspector bring their own 40
+// head, so the column head steps aside for them.
+//
+// IN COMPONENTS, the same ladder: the agent, comments, then the open
+// component's inspector. The home (no component open) has nothing to
+// inspect, so the column is empty there too, and App draws it at 0.
+//
+// THE TABS: Brief | Inspector | Comments | Agent (S4, Paper page 20). Brief is
+// the Studio's only (ShotBrief): what the board planned for the Shot under the
+// playhead, and "Mark shot built". The board's own column is task-led and
+// Components inspects a component, not a Shot, so neither has a Brief.
+// Comments is the Project's threads (CommentsPanel), on the board or off it,
+// gated by `can.comment`; its badge counts the open threads.
+//
+// THE VERSION HISTORY TAKES THE WHOLE COLUMN while it is open, head and all
+// (File > Version history, Cmd+S). The agent stays mounted under it, hidden.
+//
+// ON DEMAND (app/lazySurfaces.tsx): the agent, Comments, the Version history
+// and the board's three panels are chunks fetched the first time they show.
+// The agent mounts at its first open and stays mounted from then on.
+import { Activity } from "react";
+import { LockedControls, SegmentedControl } from "@dailies-studio/ui";
+import { agentGate, agentInEditor } from "../agent/agentGate.js";
+import { InspectorFooter } from "./InspectorFooter.js";
+import { InspectorPanel } from "./InspectorPanel.js";
+import { BoardAssets } from "../files/AssetsTab.js";
+import { useOpenHere } from "../comments/parts.js";
+import { ShotBrief } from "../storyboard/ShotBrief.js";
+import { useLatch } from "../../app/lazyPanel.js";
+import {
+  AgentPanel,
+  CommentsPanel,
+  ComponentSheet,
+  PlanOccupant,
+  SketchInspector,
+  VersionHistoryPanel,
+} from "../../app/lazySurfaces.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { NO_COMMENT, boardRightPanel, workspaceOf } from "../../state/workspace.js";
+
+export function RightColumn() {
+  const store = useStore();
+  const agentOpen = useShotEditor((s) => s.agentOpen);
+  const credentials = useShotEditor((s) => s.agentCredentials);
+  const probeError = useShotEditor((s) => s.agentCredentialsError);
+  const gate = agentGate(credentials, probeError);
+  const panel = useShotEditor(boardRightPanel);
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const canComment = useShotEditor((s) => s.canComment);
+  const open = useOpenHere();
+  const onBoard = useShotEditor((s) => s.storyboardOpen);
+  const inComponents = useShotEditor((s) => workspaceOf(s) === "components");
+  const tab = agentOpen ? "agent" : panel === "comments" ? "comments" : panel === "brief" ? "brief" : "inspector";
+  const versionsOpen = useShotEditor((s) => s.versionsOpen);
+  // Never opened, never fetched: the agent's chunk waits for its first open.
+  const agentMounted = useLatch(agentOpen);
+  // Under the Version history the column's own occupants step aside.
+  const occupant = versionsOpen ? null : panel;
+  // These bring their own head (`.panel-head`), in place of the tabs.
+  const ownHead = occupant === "component" || occupant === "plan" || occupant === "sketch";
+  return (
+    // EMPTY only with no occupant (the board with nothing picked, the
+    // Components home): the canvas takes the width (S1), and the 0 wide
+    // column must not draw its seam.
+    <section className="inspector-column" data-empty={!versionsOpen && panel === null ? "" : undefined}>
+      {/* One slot, so the agent below keeps its place (and its state). */}
+      {versionsOpen ? (
+        <VersionHistoryPanel />
+      ) : ownHead ? null : (
+        <div className="panel-head column-head">
+          <SegmentedControl
+            ariaLabel="Right panel"
+            className="is-bar"
+            value={tab}
+            options={[
+              ...(onBoard || inComponents ? [] : [{ value: "brief", label: "Brief", testId: "right-tab-brief" }]),
+              { value: "inspector", label: "Inspector", testId: "right-tab-inspector" },
+              {
+                value: "comments",
+                label: (
+                  <>
+                    Comments
+                    {open > 0 ? <span className="column-tab-count">{open}</span> : null}
+                  </>
+                ),
+                title: canComment ? "Comments" : NO_COMMENT,
+                disabled: !canComment && tab !== "comments",
+                testId: "right-tab-comments",
+              },
+              ...(agentInEditor()
+                ? [
+                    {
+                      value: "agent",
+                      label: "Agent",
+                      title: gate.title,
+                      // Never disabled while it is the open tab: a selected segment
+                      // that cannot take focus leaves the group unreachable by keyboard.
+                      disabled: !gate.ready && !agentOpen,
+                      testId: "right-tab-agent",
+                    },
+                  ]
+                : []),
+            ]}
+            onChange={(next) => store.setRightTab(next as typeof tab)}
+          />
+        </div>
+      )}
+      {/* The agent stays mounted while the inspector shows, hidden with its
+          effects stopped, so a trip to the other tab keeps the unsent prompt.
+          The inspector remounts: its sections play no entrance on a mount. */}
+      {agentMounted ? (
+        <Activity mode={agentOpen && !versionsOpen ? "visible" : "hidden"}>
+          <AgentPanel />
+        </Activity>
+      ) : null}
+      {occupant === "comments" ? <CommentsPanel /> : null}
+      {occupant === "brief" ? <ShotBrief /> : null}
+      {/* A VIEWER reads every row: each field shows its own locked state.
+          Section folds and the head's navigation stay live. */}
+      {occupant === "inspector" ? (
+        <LockedControls value={readOnly}>
+          <InspectorPanel />
+        </LockedControls>
+      ) : null}
+      {/* The inspector's footer, not the column's: the agent pins its own
+          composer to the bottom and has no container to report. */}
+      {occupant === "inspector" ? <InspectorFooter /> : null}
+      {occupant === "component" ? <ComponentSheet /> : null}
+      {occupant === "plan" ? <PlanOccupant /> : null}
+      {occupant === "sketch" ? <SketchInspector /> : null}
+      {occupant === "assets" ? <BoardAssets /> : null}
+    </section>
+  );
+}