@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/toolbar/ViewModeBar.tsx

@@ -1,49 +1,258 @@
-// Which views the stage shows: working, split, or camera.
+// THE VIEW TRACK: 3D | Split | Camera, then the Clean view eye, in the tool
+// footer.
 //
-// A FLOATING SIBLING of the stage, never a wrapper. Every panel in this shell
-// is, and the reason is in App.tsx's header: the stage iframe must not remount
-// and no ancestor of it may create a containing block.
+// Mounted by ToolFooter as the right half of the docked footer under the
+// canvas, so it is on screen exactly where the stage is (no mode brings it)
+// and never floats over the picture. The footer's left half is the tools, or
+// the shot under the playhead in the Project context; this says what the
+// canvas is showing.
 //
-// The three modes are a table for the same reason the tool dock's are — the
-// glyph, the label and the key belong beside the mode they describe, so adding
-// a fourth is one row and forgetting its shortcut is a compile error.
+// ── TWO WORDS, AND THEY ARE NOT PANES ──────────────────────────────────────
+//
+// Edit | Video used to pick a stage layout: Edit meant the 3D viewport, Video
+// meant the camera pane. That was wrong about the stage, and the way it was
+// wrong is worth keeping written down, because the two-word control survived
+// the correction and the mapping under it did not.
+//
+// The rect, ellipse, line, text, image and pen tools draw in the CAMERA pane
+// and nowhere else, and so do the move, resize and rotate handles. The working
+// pane is the 3D viewport: orbit, gizmo, frustum, the modal G/R/S. So "Video
+// is the camera pane" made drawing impossible in the view that could not play
+// and possible in the one that could.
+//
+// So Video is a FLAG OVER THE PICTURE (`state.video`, "Clean view" on every
+// surface since the design review): the same frame with every piece of
+// authoring furniture taken off it; the transport runs with it on or off. WHICH EDITOR Edit shows (the 3D view, the split, or the
+// camera) is a separate setting on ⇧1 / ⇧2 / ⇧3 and in the View menu, and Video
+// never writes it. `state/viewMode.ts` owns every direction of that.
+//
+// ── ONE TRACK AND ONE TOGGLE ───────────────────────────────────────────────
+//
+// The 2026-10-13 design review (Paper) splits the old five-chip track. The
+// layouts stay a track, one `role="radiogroup"` with exactly one chip lit,
+// because they are three answers to one question. The flag becomes what it
+// is: an on/off, so a toggle button with `aria-pressed` (an eye, "Clean
+// view") beside the track. Edit had no meaning of its own beyond "the flag is
+// off", and a pressed-state button says that at rest without a chip for it.
+// Video over a split still lights Split in the track (the editor waiting
+// underneath) while the eye is pressed (what is on top), so nothing lies.
+//
+// ── NOTHING HERE IS THE ONLY WAY BACK ──────────────────────────────────────
+//
+// Pressing the eye again is one way out of Clean view and it is the least
+// used one. Every selection, every edit, every armed tool and every door into
+// a container calls the store's `enterEdit()`, so the ordinary way back is to
+// click the thing you wanted to work on. Escape and ⇧4 do it too.
+//
+// ── GLYPHS AND WORDS, AS PAPER DRAWS THEM ──────────────────────────────────
+//
+// 3D and Camera are a glyph and a word; Split is a word alone (a split glyph
+// is "◱ ▥ ▣" again, which nobody arrives knowing). The layouts keep their
+// words at every width. The eye is a glyph with an `aria-label`, and every
+// control has a `title` with its key, so nothing is taught by shape alone.
+import { useRef, useState } from "react";
+import type { ReactElement } from "react";
+import { Popover, SegmentedControl } from "@dailies-studio/ui";
+import { CAMERA_ICON, CUBE_ICON, EYE_ICON, EYE_OFF_ICON } from "../../icons.js";
 import { useShotEditor, useStore } from "../../state/context.js";
-import type { StageLayout } from "../../bridgeTypes.js";
+import { LAYOUT_MODES, layoutRefusal, layoutSpec } from "../../state/layouts.js";
+// The words, the keys and the order of the two modes, plus the reason their
+// keys are not a pair. This bar is a reader of that table, never a second
+// writer of it.
+import { VIEW_MODE_SPECS, inDefinition, shownLayoutMode, viewModeOf } from "../../state/viewMode.js";
+import type { StageLayout, StageLayoutMode } from "../../stage/panes.js";
+import { TOOL_FOOTER_H } from "../../state/panelSize.js";
+import { formatCombo } from "../../state/shortcuts.js";
+
+/** The folded picker's height (`.view-picker`, tool-footer.css). */
+const PICKER_H = 28;
 
-const MODES: ReadonlyArray<{
-  mode: StageLayout["mode"];
-  glyph: string;
-  label: string;
-  key: string;
-}> = [
-  // Left to right in the order the digits are, and in the order the panes
-  // themselves sit: the working pane is on the left of a split.
-  { mode: "working", glyph: "◱", label: "Working view", key: "1" },
-  { mode: "split", glyph: "▥", label: "Split", key: "2" },
-  { mode: "camera", glyph: "▣", label: "Camera view", key: "3" },
-];
+// THE LOCAL HALF, and the only half: `state/` is JSX-free on purpose, so the
+// glyphs cannot live beside the words they belong to. Everything else about
+// these rows comes out of `VIEW_MODE_SPECS` and `LAYOUT_SPECS`.
+const LAYOUT_ICONS: Record<StageLayoutMode, ReactElement | null> = {
+  working: CUBE_ICON,
+  split: null,
+  camera: CAMERA_ICON,
+};
+
+/**
+ * Whether this bar is on screen, ONE SPELLING.
+ *
+ * The bar is the right half of the tool footer, and that footer is drawn even
+ * when this half is not (a definition keeps its tools). Keeping the answer
+ * here, where the reason lives, means the bar and its tests read one rule
+ * rather than two copies of two conditions.
+ */
+export function useViewModeBarVisible(): boolean {
+  const open = useShotEditor((s) => s.name !== null);
+  // A DEFINITION HAS NO SHOT CAMERA, so Video would be a view of nothing and
+  // Edit is simply where the author already is. `StageApp` forces the
+  // working-only layout while one is open, so a bar here would be reporting a
+  // state nothing could enter. The 4 key still carries the sentence
+  // (`layoutRefusal`), so the rule is taught somewhere.
+  const inDef = useShotEditor(inDefinition);
+  return open && !inDef;
+}
+
+/** The chip's face: the glyph, then the word in its own box so the compact
+ *  track can hide it without touching the name. */
+function face(icon: ReactElement | null, word: string | null): ReactElement {
+  return (
+    <>
+      {icon === null ? null : (
+        <span className="view-chip-icon" aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      {word === null ? null : <span className="view-chip-word">{word}</span>}
+    </>
+  );
+}
 
 export function ViewModeBar() {
   const store = useStore();
-  const layout = useShotEditor((s) => s.stageLayout);
-  const open = useShotEditor((s) => s.name !== null);
-  if (!open) return null;
+  // THE FLAG, through the one selector that also answers for the menu's tick.
+  const shown = useShotEditor(viewModeOf);
+  const layout = useShotEditor(shownLayoutMode);
+  const inDef = useShotEditor(inDefinition);
+  // Over the canvas either way: down when the toolbar sits on top of it.
+  const toolbarTop = useShotEditor((s) => s.toolbarPosition === "top");
+  const visible = useViewModeBarVisible();
+  const anchor = useRef<HTMLButtonElement>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  if (!visible) {
+    // Returning null keeps this component's state, so a menu left open here
+    // would come back open with the bar (ShadingBar has the same gate).
+    if (menuOpen) setMenuOpen(false);
+    return null;
+  }
+  // THE ONE LAYOUT REFUSAL, the sentence the digits and the View menu refuse
+  // with. Only a definition refuses, and the bar is not drawn in one, so today
+  // this is always null; it is read anyway so a second refusal added to the
+  // rule greys these rows with no edit here.
+  const refusal = layoutRefusal(inDef);
+  const pick = (mode: StageLayout["mode"]): void => store.setViewLayout(mode);
+  const clean = shown === "video";
+  const CLEAN = VIEW_MODE_SPECS.video;
+  const cleanTitle = `${CLEAN.label} (${formatCombo(CLEAN.key)})`;
+  // THROUGH `setViewMode`, which is also what ⇧4, Escape's top rung and the
+  // View menu's row call. It is `setVideo` with the one refusal in front of
+  // it, and having that refusal in one place is why this goes through the
+  // verb rather than writing the flag.
+  const toggleClean = (): void => store.setViewMode(clean ? "edit" : "video");
   return (
-    <div className="view-mode-bar" role="group" aria-label="View mode" data-testid="view-mode-bar">
-      {MODES.map(({ mode, glyph, label, key }) => (
-        <button
-          key={mode}
-          type="button"
-          className={`tool-button${layout.mode === mode ? " is-armed" : ""}`}
-          aria-pressed={layout.mode === mode}
-          title={`${label} (${key})`}
-          // The RATIO is carried through, not reset: flipping to the camera and
-          // back must return the split the author sized, not a fresh half.
-          onClick={() => store.setStageLayout({ ...layout, mode })}
-        >
-          {glyph}
-        </button>
-      ))}
+    // The wrapper stays a `role="group"`: it is the footer's right half, and
+    // the testid on it is how the definition toolbars are proved absent.
+    <div className="view-mode-bar" role="group" aria-label="View" data-testid="view-mode-bar">
+      {/* WHICH EDITOR is under the picture. The rows are `state/layouts.ts` itself, which
+          is the table View ▸ Layout, the ⇧1 / ⇧2 / ⇧3 keys and every refusal
+          sentence read too, so the third layout cannot be called Camera here
+          and Frame two surfaces over.
+
+          Lit from `shownLayoutMode`, so Clean view lights Camera (that is
+          what is on screen), and any click here leaves Clean view through
+          `setViewLayout`, which is what the digits do too.
+
+          All three are live in BOTH contexts. Above a shot the working pane
+          draws the shot under the playhead, which is the scene the stage
+          resolves anyway; only a definition refuses. */}
+      <SegmentedControl
+        ariaLabel="Layout"
+        className="layout-switch"
+        value={layout}
+        onChange={(value) => pick(value as StageLayout["mode"])}
+        options={LAYOUT_MODES.map((mode) => {
+          const { label, key } = layoutSpec(mode);
+          return {
+            value: mode,
+            // No `ariaLabel`: the word is drawn at every width (the compact
+            // track takes these chips' glyphs, never their words), so the
+            // text is the name already.
+            label: face(LAYOUT_ICONS[mode], label),
+            title: refusal ?? `${label} (${formatCombo(key)})`,
+            disabled: refusal !== null,
+          };
+        })}
+      />
+      {/* THE TRACK, FOLDED, for a footer too narrow for three chips.
+          tool-footer.css shows exactly one of the two (a container query on
+          the footer), so the footer fits the narrowest canvas the shell makes
+          without losing a choice: one trigger naming the layout on screen,
+          and the three a press away in its menu. The eye is not folded into
+          it: it stays beside, one square that never gives. */}
+      <button
+        ref={anchor}
+        type="button"
+        className="tool-button has-caret is-labelled view-picker"
+        aria-haspopup="menu"
+        aria-expanded={menuOpen}
+        aria-label={`Layout: ${layoutSpec(layout).label}`}
+        title={`Layout: ${layoutSpec(layout).label}`}
+        data-testid="view-picker"
+        onClick={() => setMenuOpen((v) => !v)}
+      >
+        {layoutSpec(layout).label}
+        <span className="tool-caret" aria-hidden="true" />
+      </button>
+      {/* UPWARD, OVER THE CANVAS, like every menu the footer opens: below it
+          is the timeline, which has the room and is the wrong place. Right
+          aligned to the picker, which only the eye follows. The gap is
+          from the FOOTER's edge, as the tool flyouts' is (tool-footer.css):
+          the 28px picker is centred in the footer, so the menu ends 8px above
+          the footer and never over its hairline. A footer that widens while
+          the menu is open hides the picker, and the Popover closes on a
+          hidden anchor rather than drifting to the window's corner. With the
+          toolbar on top (Preferences) the canvas is BELOW, so it drops. */}
+      <Popover
+        open={menuOpen}
+        anchor={anchor}
+        onClose={() => setMenuOpen(false)}
+        side={toolbarTop ? "below" : "above"}
+        align="right"
+        gap={8 + (TOOL_FOOTER_H - PICKER_H) / 2}
+      >
+        <div className="shading-menu" role="menu" aria-label="Layout" data-testid="view-menu">
+          {LAYOUT_MODES.map((mode) => {
+            const { label, key } = layoutSpec(mode);
+            return (
+              <button
+                key={mode}
+                type="button"
+                role="menuitemradio"
+                aria-checked={layout === mode}
+                className={`tool-button${layout === mode ? " is-armed" : ""}`}
+                title={refusal ?? `${label} (${formatCombo(key)})`}
+                disabled={refusal !== null}
+                onClick={() => {
+                  setMenuOpen(false);
+                  pick(mode);
+                }}
+              >
+                {label}
+              </button>
+            );
+          })}
+        </div>
+      </Popover>
+      {/* CLEAN VIEW, the flag as the on/off it is: a toggle button, pressed
+          while the authoring furniture is off the frame. The eye says "look
+          at the picture"; pressed, it shuts, because the handles are hidden.
+          On screen at every footer width, folded or not: it is one 32px
+          square, and the flag is the footer's most used view control. */}
+      <button
+        type="button"
+        className="clean-view-toggle"
+        aria-pressed={clean}
+        aria-label={CLEAN.label}
+        title={cleanTitle}
+        data-testid="clean-view-toggle"
+        onClick={toggleClean}
+      >
+        <span className="view-chip-icon" aria-hidden="true">
+          {clean ? EYE_OFF_ICON : EYE_ICON}
+        </span>
+      </button>
     </div>
   );
 }

package/src/panels/toolbar/WorkPlaneBar.tsx

@@ -0,0 +1,94 @@
+import { useShotEditor, useStore } from "../../state/context.js";
+import { shownLayoutMode } from "../../state/viewMode.js";
+import type { WorkPlaneTarget } from "../../bridgeTypes.js";
+
+const OPTIONS = [
+  { value: "xy", label: "XY" },
+  { value: "xz", label: "XZ" },
+  { value: "yz", label: "YZ" },
+  { value: "view", label: "View" },
+  { value: "selection", label: "Selection" },
+] as const;
+const XY_TARGET = { kind: "xy" } as const;
+
+/**
+ * Editor-only construction plane for working-pane spline creation.
+ *
+ * ── THE WORDS CAME OFF, THE NAMES DID NOT ───────────────────────────────
+ *
+ * "Plane" and "Curve" used to be rendered beside their selects and cost more
+ * width than either select did, in a control strip that stopped wrapping and
+ * now has a real budget (see `.control-strip`). They were never the accessible
+ * name either: each select already carries its own `aria-label`, so a screen
+ * reader announced "Spline work plane", not the word beside it. The word moves
+ * into `title` instead, where it labels the control for a pointer the same way
+ * the `aria-label` labels it for a reader — one control, two audiences, no
+ * third copy of the word taking up the row.
+ *
+ * The selects are the house `.select`, the same 28px pill as every other
+ * control in the canvas bar, chevron lane included.
+ *
+ * ── ONLY WHILE THE SPLINE TOOL IS ARMED ─────────────────────────────────
+ *
+ * The plane is read by one gesture, so the bar shows it at that moment and
+ * gives the rest of the time back to the bar. Its permanent home is View ›
+ * Work plane (`state/menu.ts`), behind the same gate.
+ */
+export function WorkPlaneBar() {
+  const store = useStore();
+  const sceneId = useShotEditor((state) => state.sceneId);
+  const entered = useShotEditor((state) => state.enteredScene !== null);
+  const inDefinition = useShotEditor((state) => state.editingDef !== null);
+  // ON SCREEN, not chosen: see CameraViewBar.
+  const mode = useShotEditor(shownLayoutMode);
+  const tool = useShotEditor((state) => state.tool);
+  const basis = useShotEditor((state) => state.splineBasis);
+  const selected = useShotEditor((state) => state.selection);
+  const target = useShotEditor((state) =>
+    state.sceneId === null ? XY_TARGET : (state.workPlanes[state.sceneId] ?? XY_TARGET),
+  );
+  // A definition occupies the working pane even when the scene's stashed
+  // layout is camera-only, so its construction plane remains addressable.
+  if (tool !== "spline" || sceneId === null || !entered || (mode === "camera" && !inDefinition)) return null;
+
+  const set = (value: string): void => {
+    if (value === "selection") {
+      const layerId = selected.length === 1 ? selected[0] : undefined;
+      if (layerId !== undefined) store.setWorkPlane({ kind: "selection", layerId });
+      return;
+    }
+    store.setWorkPlane({ kind: value as Exclude<WorkPlaneTarget["kind"], "selection"> });
+  };
+
+  return (
+    <div className="work-plane-bar" data-testid="work-plane-bar">
+      <select
+        className="select"
+        aria-label="Spline work plane"
+        value={target.kind}
+        title="Plane: the plane Shift+P draws spline anchors on"
+        onChange={(event) => set(event.currentTarget.value)}
+      >
+        {OPTIONS.map((option) => (
+          <option
+            key={option.value}
+            value={option.value}
+            disabled={option.value === "selection" && selected.length !== 1 && target.kind !== "selection"}
+          >
+            {option.label}
+          </option>
+        ))}
+      </select>
+      <select
+        className="select"
+        aria-label="Spline basis for new curves"
+        value={basis}
+        title="Curve: the interpolation frozen when the first anchor is placed"
+        onChange={(event) => store.setSplineBasis(event.currentTarget.value as typeof basis)}
+      >
+        <option value="bezier">Bezier</option>
+        <option value="catmull-rom">Catmull</option>
+      </select>
+    </div>
+  );
+}