@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/toolbar/ToolDockBar.tsx

@@ -1,110 +1,359 @@
-// The tool dock: one button per DOCK_TOOLS row, plus the shape flyout.
+// The tool dock: one button per DOCK_TOOLS row, plus the shape flyout, the
+// Insert drawer's +, the Comment tool and the Animate mode. Eleven controls:
+// one run of ten (two `.tool-group`s, the menu and Comment), one rule, then
+// the mode.
 //
 // Everything here is derived from `TOOL_SPECS`. The icon map is keyed on
 // `DockTool` and `FlyoutTool`, so a tool added to the table without a glyph is
 // a COMPILE ERROR rather than an empty button — which is the whole reason the
 // table's surfaces are types rather than strings.
-import { useState } from "react";
-import { DOCK_TOOLS, FLYOUT_TOOLS, specOf } from "../../tools.js";
+//
+// ── THE ROW IS GROUPED, AND THE GROUPING IS THE TABLE'S ──────────────────
+//
+// A flat run of ten controls said all ten were the same kind of thing. Two of
+// them say what a press MEANS, six make something, one is a menu and the last
+// is a mode. The groups are SEMANTIC (`role="group"`, named for a screen
+// reader) and the row draws ONE rule, before the mode, which is Paper's footer:
+// Pick, Draw and Add read as one run of aimed controls, and only the mode is
+// a different kind of thing at a glance. The two tool groups come from
+// `DOCK_GROUPS`, which is derived from `ToolSpec.group`: this file never asks
+// which group a tool is in, so a new tool cannot land in the dock ungrouped
+// and it cannot land in a group the table disagrees with.
+import { Fragment, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { DOCK_GROUPS, FLYOUT_TOOLS, specOf } from "../../tools.js";
 import type { DockTool, FlyoutTool, ShotTool } from "../../tools.js";
 import { useShotEditor, useStore } from "../../state/context.js";
-import { AddMenu } from "./AddMenu.js";
-
-/** Text glyphs rather than an icon set: one fewer dependency, and every one of
- *  these is a shape the font already draws. */
-const DOCK_GLYPHS: Record<DockTool, string> = {
-  select: "▹",
-  move: "✥",
-  text: "T",
-  image: "▤",
-  rect: "▭",
-  path: "✎",
-};
-
-const FLYOUT_GLYPHS: Record<FlyoutTool, string> = {
-  ellipse: "◯",
-  line: "╱",
-  arrow: "↗",
-};
+import { isSceneContext, toolLayoutMode } from "../../state/viewMode.js";
+import { toolRefusal } from "../../state/keymap.js";
+import { isolationInsertRefusal } from "../../state/isolationTrail.js";
+import { toolKey } from "../../state/shortcuts.js";
+import { NO_COMMENT, readOnlyReason } from "../../state/workspace.js";
+import { COMMENT_ICON } from "../comments/parts.js";
+import { toolFooterShown } from "../../state/panelSize.js";
+import { InsertButton } from "./InsertButton.js";
+import { useDismiss } from "./useDismiss.js";
+// The shared set (basics overhaul): the text glyphs became SVGs with the same
+// typed-map guarantee — a dock tool added to tools.ts without a glyph in
+// icons.tsx does not build.
+import { DOCK_TOOL_ICONS, FLYOUT_TOOL_ICONS, RECORD_ICON, SHAPES_ICON } from "../../icons.js";
 
 export function ToolDockBar() {
   const store = useStore();
   const tool = useShotEditor((s) => s.tool);
   const animateMode = useShotEditor((s) => s.animateMode);
-  const open = useShotEditor((s) => s.name !== null);
+  // WHAT IS ON SCREEN. In Video the frame is, whatever layout waits
+  // underneath, and `setTool` brings that layout to the frame when a
+  // camera-pane tool is armed from there. So a dock that read the chosen
+  // layout would grey out the rect tool while the author looked straight at
+  // the surface it draws on. Inside a definition every tool's pane is
+  // (`toolLayoutMode`).
+  const layoutMode = useShotEditor(toolLayoutMode);
+  const readOnly = useShotEditor((s) => s.readOnly && readOnlyReason(s));
+  const leafIsolation = useShotEditor(isolationInsertRefusal);
+  // The footer is shown at every level of the stage (`toolFooterShown`), and
+  // this bar is the narrower answer inside it: the footer's row AND a shot or
+  // a definition. It reads both rather than trusting ToolFooter's branch, so
+  // the bar is correct wherever it is rendered (the tests render it bare).
+  const shown = useShotEditor((s) => toolFooterShown(s) && !isSceneContext(s));
+  const commenting = useShotEditor((s) => s.boardTool === "comment");
+  const canComment = useShotEditor((s) => s.canComment);
   const [flyoutOpen, setFlyoutOpen] = useState(false);
-  if (!open) return null;
+  const shapesAnchor = useRef<HTMLDivElement>(null);
+  useDismiss(flyoutOpen, shapesAnchor, () => setFlyoutOpen(false));
+  // ── THE WHOLE DOCK IS ABSENT OUTSIDE A SHOT, AND IN THE MODES ────────────
+  //
+  // Every control it holds is an insert, and `insertContext` refuses every
+  // insert in the Project context, so this used to render ten buttons of which
+  // ten were dead there: seven tools, the shape flyout, Add, and an Animate
+  // toggle whose only subject is a layer that cannot be selected without
+  // opening a shot first. The modes own the canvas cell outright, so a dock
+  // under it would address a picture that is not on screen. In the modes the
+  // footer's row closes (`toolFooterShown`). In the Project context the row
+  // stays, for the view track on its right, and ToolFooter puts the shot under
+  // the playhead where these tools would be.
+  //
+  // That reverses the disabled-not-absent argument below FOR THESE CASES, and
+  // deliberately. The argument is right about the LAYOUT refusal, where the
+  // author is one digit away and the tool is genuinely a capability they are
+  // about to use again. The context refusal is a different shape: the Project
+  // context has its own complete verb set (add, reorder, trim, split, delete,
+  // open) in the scene strip, and a dock of greyed-out element tools over it
+  // teaches a map of the editor that is wrong at this level. Nobody is stranded:
+  // the shots list and the strip both carry a `›` that opens one, and the keys
+  // still answer with `toolRefusal`'s sentence, which is now the only place that
+  // sentence is needed.
+  if (!shown) return null;
+
+  /**
+   * DISABLED, NOT ABSENT — which is the one place this bar parts company with
+   * the bars in the top strip. ShadingBar and CameraViewBar unmount in the
+   * layout that has no working pane, because what they address is a pane that
+   * is not on screen. A creating tool is not addressed to a pane, it is a
+   * CAPABILITY of the editor, and an author who cannot find the rect tool
+   * concludes the shot lane has none — so the button stays, and its title is
+   * where the layout answer is taught. `toolRefusal` writes that sentence, and
+   * the keystroke's refusal says exactly the same thing.
+   *
+   * SPLIT KEEPS THEM ENABLED: the camera pane is the right half, and every
+   * insert lane it feeds works there.
+   *
+   * ISOLATED IN A LEAF DISABLES THEM TOO: an insert joins the isolated layer,
+   * and a rectangle cannot hold one (`isolationInsertRefusal`).
+   *
+   * The Project context never reaches this function: the whole bar is
+   * unmounted there, for the reason argued at the early return above.
+   */
+  const refusalFor = (t: ShotTool): string | null => toolRefusal(t, layoutMode, false, readOnly, leafIsolation);
+
+  const toolButton = (t: DockTool) => (
+    <ToolButton
+      key={t}
+      armed={tool === t}
+      refusal={refusalFor(t)}
+      title={toolTitle(t)}
+      icon={DOCK_TOOL_ICONS[t]}
+      onClick={() => store.setTool(t)}
+    />
+  );
+
+  const shapes = (
+    <div className="tool-flyout-anchor" ref={shapesAnchor}>
+      {/* ONE FIXED GLYPH, the Shapes mark, whatever is armed. The trigger used
+          to wear the armed or last-used shape, which made it look like a fourth
+          kind of tool; it is a MENU of three, and the wash is what says one of
+          the three is in play. The flyout's rows wear the shapes themselves.
 
-  const label = (t: ShotTool): string => {
-    const spec = specOf(t);
-    const key = spec.key === null ? "" : ` (${spec.shift === true ? "⇧" : ""}${spec.key.toUpperCase()})`;
-    return `${spec.label}${key}`;
-  };
+          THE TITLE STAYS "Shapes", and must never become the armed tool's
+          label: the dock's tests find each tool's button by a title that
+          STARTS WITH its label, so "Ellipse…" here would make one button
+          answer for two tools and the flyout's own row would go unchecked.
+
+          Armed from `state.tool`, not from the row's click, because the row is
+          not the only way in: `O`, `L` and `⇧L` arm these three too. */}
+      <button
+        type="button"
+        className={`tool-button has-caret${FLYOUT_TOOLS.includes(tool as FlyoutTool) ? " is-armed" : ""}`}
+        aria-haspopup="menu"
+        aria-expanded={flyoutOpen}
+        // The glyph is fixed, so the NAME carries which shape is armed: a
+        // screen reader hears "Shapes: Ellipse" where a sighted author sees the
+        // wash. The title stays "Shapes" (see above).
+        aria-label={FLYOUT_TOOLS.includes(tool as FlyoutTool) ? `Shapes: ${specOf(tool).label}` : "Shapes"}
+        title="Shapes"
+        onClick={() => setFlyoutOpen((v) => !v)}
+      >
+        <span className="tool-icon" aria-hidden="true">
+          {SHAPES_ICON}
+        </span>
+        <span className="tool-caret" aria-hidden />
+      </button>
+      {flyoutOpen ? (
+        <div className="tool-flyout" role="menu">
+          {FLYOUT_TOOLS.map((t) => (
+            <ToolFlyoutRow
+              key={t}
+              // A RADIO row: one of the three is armed at a time, and the
+              // armed one says so to a screen reader, not only by its wash.
+              checked={tool === t}
+              refusal={refusalFor(t)}
+              title={toolTitle(t)}
+              icon={FLYOUT_TOOL_ICONS[t]}
+              label={specOf(t).label}
+              onClick={() => {
+                store.setTool(t);
+                setFlyoutOpen(false);
+              }}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
 
   return (
     <div className="tool-dock" role="toolbar" aria-label="Tools" data-testid="tool-dock">
-      {DOCK_TOOLS.map((t) => (
-        <button
-          key={t}
-          type="button"
-          className={`tool-button${tool === t ? " is-armed" : ""}`}
-          aria-pressed={tool === t}
-          title={label(t)}
-          onClick={() => store.setTool(t)}
-        >
-          {DOCK_GLYPHS[t]}
-        </button>
+      {DOCK_GROUPS.map(({ label: group, tools }) => (
+        <Fragment key={group}>
+          <div className="tool-group" role="group" aria-label={group}>
+            {tools.map((t) =>
+              // THE SHAPES TRIGGER LIVES INSIDE THE DRAW GROUP, beside the
+              // rect it flies out of — it is one of the six that make
+              // something, and putting it after the group's rule would say it
+              // is a fourth kind of control. It rides `rect` rather than being
+              // appended to the group, because "beside rect" is the placement
+              // and the group's order is the table's.
+              t === "rect" ? (
+                <Fragment key={t}>
+                  {toolButton(t)}
+                  {shapes}
+                </Fragment>
+              ) : (
+                toolButton(t)
+              ),
+            )}
+          </div>
+        </Fragment>
       ))}
 
-      <div className="tool-flyout-anchor">
-        <button
-          type="button"
-          className={`tool-button${FLYOUT_TOOLS.includes(tool as FlyoutTool) ? " is-armed" : ""}`}
-          aria-haspopup="menu"
-          aria-expanded={flyoutOpen}
-          title="Shapes"
-          onClick={() => setFlyoutOpen((v) => !v)}
-        >
-          ◇
-        </button>
-        {flyoutOpen ? (
-          <div className="tool-flyout" role="menu">
-            {FLYOUT_TOOLS.map((t) => (
-              <button
-                key={t}
-                type="button"
-                role="menuitem"
-                className={`tool-button${tool === t ? " is-armed" : ""}`}
-                title={label(t)}
-                onClick={() => {
-                  store.setTool(t);
-                  setFlyoutOpen(false);
-                }}
-              >
-                {FLYOUT_GLYPHS[t]} {specOf(t).label}
-              </button>
-            ))}
-          </div>
-        ) : null}
-      </div>
+      {/* NOT a tool either: it opens the Insert drawer, the kinds a DRAG
+          CANNOT EXPRESS (a file, a registry choice, an operation on the
+          selection) beside icons, shaders and backgrounds. See InsertButton.
+          It rides the run unruled, because it is still something the author
+          aims at and presses, and its wash says the drawer is open. */}
+      <InsertButton />
+      {/* THE COMMENT TOOL (S5), the board's own: armed, the next click on
+          the camera pane leaves a Studio comment at the playhead. A Viewer
+          who may comment keeps it while the tools above are read-only. */}
+      <ToolButton
+        armed={commenting}
+        refusal={canComment ? null : NO_COMMENT}
+        title="Comment on the picture at the playhead (C)"
+        icon={COMMENT_ICON}
+        onClick={() => store.setBoardTool(commenting ? null : "comment")}
+      />
 
-      {/* NOT a tool either, and beside the shapes for the same reason: it is
-          the kinds a DRAG CANNOT EXPRESS — a file, a registry choice, an
-          operation on the selection. See AddMenu. */}
-      <AddMenu />
+      {/* NOT a tool, and the row's one rule says so. Animate changes what an
+          edit MEANS while any tool is held, see tools.ts. */}
+      <span className="tool-separator" aria-hidden />
+      {/* IT GETS A WORD, and it is the only control here that has one. Until
+          now it was a bare `⏺` at the end of seven tool icons — a glyph in the
+          transport vocabulary sitting in a drawing dock, with the tooltip as
+          the only thing that said "Animate". The tools stay iconic because
+          they are a mutually-exclusive set an author learns once and then aims
+          at, and Add stays iconic because its caret says what
+          it is; a MODE is neither — it is either on or off, it changes what
+          every one of those tools MEANS while it is on, and a state has to say
+          at rest that it is on.
 
-      {/* NOT a tool, and the separator says so. Animate changes what an edit
-          MEANS while any tool is held — see tools.ts. */}
-      <span className="tool-separator" aria-hidden="true" />
+          ── AND THE WORD IS AFFORDABLE ─────────────────────────────────────
+
+          Measured off the stylesheet rather than eyeballed. The footer's
+          buttons are the house 28px control (`.tool-footer .tool-button`), the
+          gaps are --space-2 (4px). Six direct children of `.tool-dock`:
+
+            Pick group    2 × 28 + 1 gap × 4                          =  60
+            Draw group    6 × 28 (5 tools + the shapes trigger)
+                          + 5 gaps × 4                                = 188
+            Add           one 28px trigger                            =  28
+            Comment       one 28px tool                               =  28
+            separator     1 + margin 1 + 1                            =   3
+            Animate       8 + 14 icon + 6 gap + ~47 label + 8         =  83
+            ──────────────────────────────────────────────────────────────
+            children 390, + 5 dock gaps × 4                           = 410
+
+          The dock has no padding or border of its own: the footer owns both,
+          16px a side, so the row alone is about 442. It shares the footer
+          with the view track on the right, and the TRACK is what gives way
+          when the two do not fit: it goes compact and then folds to one
+          picker (tool-footer.css has the measured thresholds), and these
+          tools never fold. dockedShellE2e measures the footer at three
+          widths, so a change to this row that breaks the fit fails there.
+
+          So the "is the word worth its width" argument is settled by having
+          the space, and the word was the right answer anyway, because a mode
+          has to say at rest that it is on. */}
       <button
         type="button"
-        className={`tool-button tool-animate${animateMode ? " is-armed" : ""}`}
+        className={`tool-button tool-animate is-labelled${animateMode ? " is-armed" : ""}`}
         aria-pressed={animateMode}
-        title="Animate (⇧A) — a canvas edit becomes a block ending at the playhead"
+        // The accessible name is the word alone, not the word plus the glyph.
+        aria-label="Animate"
+        title="Animate (⇧A): edits write keyframes at the playhead"
         onClick={() => store.setAnimateMode(!animateMode)}
       >
-        ⏺
+        <span className="tool-icon" aria-hidden="true">
+          {RECORD_ICON}
+        </span>
+        <span className="tool-label">Animate</span>
       </button>
     </div>
   );
 }
+
+/** A tool button's title: its label, then its key ("Rect (R)"). */
+export function toolTitle(t: ShotTool): string {
+  const key = toolKey(t);
+  return `${specOf(t).label}${key === null ? "" : ` (${key})`}`;
+}
+
+/**
+ * ONE TOOL BUTTON, shared by this dock and the Insert button
+ * (InsertButton.tsx), so both draw the same armed wash and disable the same way.
+ * `refusal` is the sentence a disabled button says in its title, and null
+ * means the button works and its title is `title`.
+ *
+ * `label` is a labelled button's (no caller passes one since the board's
+ * tool rail went): the button's name, kept
+ * whatever the title says, and drawn under the glyph as `caption` (the label
+ * itself unless a shorter word is given). The Studio dock passes neither.
+ */
+export function ToolButton(props: {
+  armed: boolean;
+  refusal: string | null;
+  title: string;
+  icon: ReactNode;
+  label?: string;
+  caption?: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={`tool-button${props.armed ? " is-armed" : ""}`}
+      aria-pressed={props.armed}
+      aria-label={props.label}
+      disabled={props.refusal !== null}
+      title={props.refusal ?? props.title}
+      onClick={props.onClick}
+    >
+      <span className="tool-icon" aria-hidden="true">
+        {props.icon}
+      </span>
+      {props.label === undefined ? null : (
+        <span className="tool-caption" aria-hidden="true">
+          {props.caption ?? props.label}
+        </span>
+      )}
+    </button>
+  );
+}
+
+/**
+ * ONE ROW OF A TOOL FLYOUT. With `checked` it is a radio row (one tool of the
+ * set is armed); without it a plain menu item (an insert that arms nothing).
+ * `chip` is the key that arms the tool, which only the board rail shows: the
+ * Studio footer stays as it is.
+ */
+export function ToolFlyoutRow(props: {
+  checked?: boolean;
+  refusal: string | null;
+  title: string;
+  icon: ReactNode;
+  label: string;
+  chip?: string;
+  onClick: () => void;
+}) {
+  const radio = props.checked !== undefined;
+  return (
+    <button
+      type="button"
+      role={radio ? "menuitemradio" : "menuitem"}
+      {...(radio ? { "aria-checked": props.checked } : {})}
+      className={`tool-button${props.checked === true ? " is-armed" : ""}`}
+      disabled={props.refusal !== null}
+      title={props.refusal ?? props.title}
+      onClick={props.onClick}
+    >
+      <span className="tool-icon" aria-hidden="true">
+        {props.icon}
+      </span>{" "}
+      {props.label}
+      {props.chip === undefined ? null : (
+        <kbd className="tool-key-chip" aria-hidden="true">
+          {props.chip}
+        </kbd>
+      )}
+    </button>
+  );
+}

package/src/panels/toolbar/ToolFooter.tsx

@@ -0,0 +1,102 @@
+// THE TOOL FOOTER'S ROW: what is on the left, then the view track on the right.
+//
+// App mounts this inside the `.tool-footer` PanelBoundary wherever the footer
+// is shown (`toolFooterShown`): every level of the stage workspace, and never
+// in a mode. The two halves are pushed apart (`justify-content:
+// space-between`, tool-footer.css), so the track sits at the right edge in
+// every context and the left half changes under it.
+//
+// ── THE LEFT HALF IS THE TOOLS, OR THE SHOT THEY WOULD DRAW INTO ───────────
+//
+// Inside a shot or a definition the left half is ToolDockBar. In the Project
+// context every tool there would be dead (ToolDockBar has the argument), so the
+// left half names the shot under the playhead instead: what the picture above
+// is showing, at the level where the picture is a sequence of shots. With no
+// shot under the playhead it shows nothing, rather than a placeholder that
+// would describe a picture that is not there.
+//
+// ── THE RIGHT HALF IS THE VIEW TRACK ───────────────────────────────────────
+//
+// ViewModeBar, which applies at every level and gates itself (it is absent
+// inside a definition, which has no shot camera). It gives way before the
+// tools do: it compacts, then folds to one picker, on a container query on
+// this row (tool-footer.css has the measured widths). The tools never fold.
+import { FPS_OPTIONS } from "@dailies-studio/timeline";
+import { framesToSeconds } from "@dailies-studio/engine";
+import type { Rational } from "@dailies-studio/engine";
+import { masterToSceneCached } from "@dailies-studio/shot/doc";
+import { useShotEditor, useShotEditorHot } from "../../state/context.js";
+import type { ShotEditorState } from "../../state/types.js";
+import { isSceneContext } from "../../state/viewMode.js";
+import { formatDuration } from "../timeline/model.js";
+import { ToolDockBar } from "./ToolDockBar.js";
+import { ViewModeBar } from "./ViewModeBar.js";
+
+/** The rate as the Project's own picker words it: an `FPS_OPTIONS` label when
+ *  the rational is one of them (so 30000/1001 reads "29.97", never "29.970"),
+ *  else three decimals with the trailing zeros dropped. */
+export function fpsLabel(fps: Rational): string {
+  const known = FPS_OPTIONS.find((o) => o.fps.num * fps.den === fps.num * o.fps.den);
+  return known?.label ?? String(Number((fps.num / fps.den).toFixed(3)));
+}
+
+/**
+ * The shot under the playhead, as two strings, or null with none.
+ *
+ * STRINGS, NEVER AN OBJECT: the footer survives playback, and `useShotEditor`
+ * compares with `Object.is`, so each line is resolved inside its own selector
+ * and only a change of words re-renders the row.
+ *
+ * THE PLAYHEAD'S SHOT, NEVER THE PIN. `state.sceneId` is a pin that a bare
+ * `setScene` moves without seeking, and a zero-length shot hands the frame to
+ * its neighbour while the pin stays on it, so it can name a shot the stage is
+ * not drawing. The footer describes the picture above it, so it resolves the
+ * frame first, as `insertContext` and the bridge do, and falls back to the pin
+ * only where the frame lands in no shot.
+ *
+ * The NUMBER is the shot's place in `doc.scenes`, the order the left column's
+ * Shots list and the timeline draw. The DURATION is `formatDuration`, the
+ * same string the left column's shot rows print, so one length is never spelled
+ * two ways on one screen.
+ */
+export function shotMeta(
+  s: Pick<ShotEditorState, "doc" | "sceneId" | "frame">,
+): { name: string; line: string } | null {
+  const { doc } = s;
+  if (doc === null) return null;
+  const sceneId = masterToSceneCached(doc, s.frame)?.sceneId ?? s.sceneId;
+  if (sceneId === null) return null;
+  const scene = doc.scenesById[sceneId];
+  const index = doc.scenes.indexOf(sceneId);
+  if (scene === undefined || index === -1) return null;
+  const number = String(index + 1).padStart(2, "0");
+  return {
+    name: scene.name,
+    line: `Shot ${number} · ${formatDuration(framesToSeconds(scene.durationFrames, doc.fps))} · ${fpsLabel(doc.fps)} fps`,
+  };
+}
+
+function ShotMeta() {
+  // Hot: the Shot under the playhead moves at every cut the transport plays,
+  // which the cold lane sleeps through (store `set`). Strings, so the row
+  // renders at a cut and not per frame.
+  const name = useShotEditorHot((s) => shotMeta(s)?.name ?? null);
+  const line = useShotEditorHot((s) => shotMeta(s)?.line ?? null);
+  if (name === null || line === null) return null;
+  return (
+    <div className="shot-meta" data-testid="shot-meta">
+      <span className="shot-meta-name">{name}</span>
+      <span className="shot-meta-line">{line}</span>
+    </div>
+  );
+}
+
+export function ToolFooter() {
+  const project = useShotEditor(isSceneContext);
+  return (
+    <>
+      {project ? <ShotMeta /> : <ToolDockBar />}
+      <ViewModeBar />
+    </>
+  );
+}