@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/inspector/scene/EffectsSection.tsx

@@ -1,17 +1,60 @@
-// The cinematic post stack, one toggle per effect.
+// The cinematic post stack, as a list of WHAT IS ON.
 //
 // ABSENT MEANS OFF — there is no `enabled` flag anywhere in `SceneEffects`,
-// because two ways to say "off" is one way to disagree. So a toggle here
-// DELETES the key rather than setting a boolean, and the shader chain rebuilds
-// from `postSignature`, which is derived from exactly which keys exist.
+// because two ways to say "off" is one way to disagree. So switching an effect
+// off DELETES the key rather than setting a boolean, and the shader chain
+// rebuilds from `postSignature`, which is derived from exactly which keys exist.
+//
+// THE SECTION USED TO RENDER ALL SIXTEEN, ALWAYS. Sixteen label-plus-toggle
+// rows made this ~630px tall in a 320px panel, so "which effects does this shot
+// have" was a reading task rather than a glance, and the answer was carried by
+// sixteen switch positions the eye has to scan one at a time. Absent means off
+// in the document; it now means absent on screen too, which is the same claim
+// stated once. The rest live behind the header's add menu.
+//
+// ── TWO SECTIONS OVER ONE STACK: BLUR AND POSTPROCESSING ─────────────────
+//
+// `Scene3D.effects` is still ONE object and nothing about the document moved.
+// The rail shows it as two sections because the three blurs are a different
+// kind of decision from the rest. Depth of field, tilt shift and motion blur
+// each say what is SHARP, which is a lens and shutter choice made with the
+// camera; a bloom, a grade or a grain says what the picture is made INTO after
+// it. One list made the author hunt for the defocus among seventeen passes, and
+// the board draws them apart. Each section's add menu offers only its own
+// group, and both run through the one `toggle` seam below, so a removed blur
+// still drops its keyframes exactly as a removed bloom does.
+import { Fragment, useRef, useState } from "react";
 import type { ReactNode } from "react";
-import { InspectorRow, InspectorSection, NumberField, Toggle } from "@dailies-studio/ui";
-import type { SceneEffects } from "@dailies-studio/shot/doc";
+import {
+  FieldLabels,
+  IconClose,
+  IconPlus,
+  InspectorRow,
+  InspectorSection,
+  NumberField,
+  Popover,
+  useCollapsed,
+  useLocked,
+} from "@dailies-studio/ui";
+// `sceneTrackablePath` for the numeric limits, so the pill and `set_keyframe`
+// cap at one number rather than two that drift apart.
+import { containerFrame, resolveSceneTracksAt, sceneTrackablePath } from "@dailies-studio/shot/doc";
+import type { Doc3D, SceneEffects } from "@dailies-studio/shot/doc";
+import { SceneKeyframeDot } from "../KeyframeDot.js";
+import { SECTION_ICONS } from "../../../icons.js";
+import { dailiesHost } from "../../../hostApi.js";
 import { useShotEditor, useStore } from "../../../state/context.js";
+import { useInspectorScene, useScrub, writeScene } from "../useDocWrite.js";
 
 /** What each effect looks like when first switched on. Values that read as the
  *  effect rather than as nothing — a bloom at strength 0 is a toggle that
- *  appears not to work, and the author blames the renderer. */
+ *  appears not to work, and the author blames the renderer.
+ *
+ *  ALSO WHAT THE FIELDS BELOW DISPLAY for a param the document has not stored,
+ *  which is the same number by definition: `toggle` writes this whole object on
+ *  the way in, so a field showing anything else would be showing a value the
+ *  shot does not have. The fields restated these as literal `?? 0.6` fallbacks,
+ *  which is two writers for one number and drifts the day one moves. */
 const DEFAULTS = {
   dof: { fStop: 2.8, bokehScale: 2, quality: "mip" },
   bloom: { strength: 0.6, radius: 0.5, threshold: 0.7 },
@@ -21,103 +64,711 @@ const DEFAULTS = {
   ghost: { amount: 0.25, offset: [0.004, 0.002], count: 3 },
   grade: { slope: [1, 1, 1], offset: [0, 0, 0], power: [1, 1, 1], saturation: 1 },
   edgeFade: { size: 0.12, softness: 0.08 },
+  sharpen: { amount: 0.5 },
+  tiltShift: { amount: 1, center: 0.5, width: 0.3, softness: 0.15 },
+  bleach: { amount: 0.6 },
+  glitch: { strength: 0.3, density: 0.3, split: 2 },
+  pixelate: { size: 8 },
+  crt: { curvature: 0.15, scanlines: 0.35, lineHeight: 3 },
+  rays: { strength: 0.6, threshold: 0.6, center: [0.5, 0.35] },
   motionBlur: { shutterDeg: 180, samples: 8 },
+  fisheye: { strength: 1, vignette: 0.6 },
 } as const satisfies Record<keyof SceneEffects, unknown>;
 
 type EffectKey = keyof typeof DEFAULTS;
 
-export function EffectsSection() {
+/** A vector param's component prefixes, in box order: a vec2's axes, and
+ *  Grade's channels. Its one diamond's tooltip names them as keying together. */
+const XY = ["X", "Y"] as const;
+const RGB = ["R", "G", "B"] as const;
+
+/** The add menus' headings, in menu order, and the only place the names exist.
+ *  The type is read back off the array so another group is one edit. */
+const GROUPS = ["Blur", "Look", "Lens", "Damage"] as const;
+type EffectGroup = (typeof GROUPS)[number];
+
+/**
+ * The two sections, and which groups each one owns. Every group belongs to
+ * exactly one stack, so every effect has exactly one home and one add item.
+ */
+const STACKS = {
+  blur: {
+    title: "Blur",
+    groups: ["Blur"],
+    persistKey: "shot:blur",
+    className: "effects-section blur-section",
+    addTestId: "blur-add",
+    addLabel: "Add blur",
+    addTitle: "Add a blur: depth of field, tilt shift or motion blur",
+    empty: "No blur yet.",
+  },
+  // The post stack keeps every name the old single section had (its testid,
+  // its aria name, its collapse bit, its empty line), because tests, agents
+  // and stored collapse state all address it by them.
+  postprocessing: {
+    title: "Postprocessing",
+    groups: ["Look", "Lens", "Damage"],
+    persistKey: "shot:effects",
+    className: "effects-section",
+    addTestId: "effect-add",
+    addLabel: "Add effect",
+    addTitle: "Add an effect to the post stack",
+    empty: "No effects yet.",
+  },
+} as const satisfies Record<
+  string,
+  {
+    title: string;
+    groups: readonly EffectGroup[];
+    persistKey: string;
+    className: string;
+    addTestId: string;
+    addLabel: string;
+    addTitle: string;
+    empty: string;
+  }
+>;
+type StackId = keyof typeof STACKS;
+
+/**
+ * Every effect's on-screen name and which drawer of the add menu it sits in.
+ *
+ * `satisfies Record<keyof SceneEffects, …>` IS THE POINT: an effect added to
+ * `SceneEffects` without an entry here fails to compile, rather than shipping as
+ * a post pass with no way to switch it on. The same guard `DEFAULTS` carries,
+ * for the same reason.
+ *
+ * THE LABELS ARE LOAD-BEARING, character for character: they are the accessible
+ * name of both the add item and its remove button, and the inspector tests
+ * locate effects by them.
+ *
+ * THIS ORDER IS THE RENDER ORDER of the enabled list, not document order.
+ * Document order is insertion order, so a list sorted by it would reshuffle
+ * itself every time an effect is switched on: the row an author just added
+ * would land at the bottom and the rows they were reading would move. A fixed
+ * table means adding an effect inserts one row and nothing else travels.
+ * Grouped in menu order too, so the panel and the menu read the same way down.
+ */
+const EFFECTS = {
+  // Blur: what is sharp. Its own section (see the header).
+  dof: { label: "Depth of field", group: "Blur" },
+  tiltShift: { label: "Tilt shift", group: "Blur" },
+  motionBlur: { label: "Motion blur", group: "Blur" },
+  // Look: what the picture is graded and glowed into.
+  bloom: { label: "Bloom", group: "Look" },
+  vignette: { label: "Vignette", group: "Look" },
+  grade: { label: "Grade", group: "Look" },
+  bleach: { label: "Bleach", group: "Look" },
+  sharpen: { label: "Sharpen", group: "Look" },
+  // Lens: what a piece of glass in front of the sensor would have done,
+  // other than blur it.
+  rays: { label: "Light rays", group: "Lens" },
+  colorSplit: { label: "Color split", group: "Lens" },
+  ghost: { label: "Ghost", group: "Lens" },
+  edgeFade: { label: "Edge fade", group: "Lens" },
+  fisheye: { label: "Fisheye", group: "Lens" },
+  // Damage: the artefacts of a medium, film or signal or screen.
+  grain: { label: "Grain", group: "Damage" },
+  glitch: { label: "Glitch", group: "Damage" },
+  crt: { label: "CRT", group: "Damage" },
+  pixelate: { label: "Pixelate", group: "Damage" },
+} satisfies Record<keyof SceneEffects, { label: string; group: EffectGroup }>;
+
+const EFFECT_KEYS = Object.keys(EFFECTS) as EffectKey[];
+
+/**
+ * The HARD limits a param accepts, read from the table that also refuses an
+ * agent's `set_keyframe` on the same path.
+ *
+ * These used to be literals in the fields below, so the two could disagree: the
+ * pill capped CRT curvature at 0.49 and `set_keyframe` took 3, which is the
+ * picture inverted through itself with the inspector still reading 0.49. Worse
+ * on a param that already carries a track, because `routeTrackedEdit` DROPS an
+ * edit `trackValueRefusal` rejects, so a field wider than the table is a drag
+ * that silently commits nothing.
+ *
+ * Only the bounds the RENDERER enforces are in that table. A path with none
+ * gets nothing from here and keeps the taste ceiling written beside it: bloom
+ * stops at 5 because 8 is a look, not because the document refuses it. `step`
+ * is local either way. It is the nudge quantum, not a limit.
+ */
+const hardOf = (path: string): { min?: number; max?: number } => {
+  const range = sceneTrackablePath(path)?.numberRange;
+  if (range === undefined) return {};
+  return {
+    ...(range.min === undefined ? {} : { min: range.min }),
+    ...(range.max === undefined ? {} : { max: range.max }),
+  };
+};
+
+/** Which param a drag is moving. `move` takes `unknown`, so the shape is named
+ *  once here and the call sites are type-checked against it. A mistyped field
+ *  would otherwise ride a drag into the document as a key nothing reads. */
+interface ParamEdit {
+  key: EffectKey;
+  field: string;
+  value: number;
+  /** One element of a vector field (Grade's R, G or B, a centre's X or Y).
+   *  Absent for a scalar. */
+  index?: number;
+}
+
+/**
+ * One effect param, written over the document it is HANDED.
+ *
+ * Both write paths run it: a typed value through `edit`, and a drag through
+ * `scrubCapture`, which re-derives from the gesture's BASE. Reading the effect
+ * out of the handed document rather than out of the render is what stops a drag
+ * compounding: a builder closing over this render's `effects` would re-apply
+ * the whole gesture on top of itself and run away from the cursor.
+ *
+ * IDENTITY WHEN NOTHING CHANGED: `edit` records no history entry for a document
+ * it gets back unchanged, and a drag that ends on the value it started from
+ * commits nothing.
+ */
+function patchEffect(doc: Doc3D, sceneId: string, edit: ParamEdit, sceneFrame: number): Doc3D {
+  // Through `writeScene`, so a param the shot ANIMATES takes a keyframe at the
+  // playhead instead of a constant the track is already overriding (P5). Fifteen
+  // fields, one seam — this section never learns what a track is.
+  return writeScene(
+    doc,
+    sceneId,
+    (scene) => {
+      const current = ((scene.effects as Record<string, Record<string, unknown>>)[edit.key] ??
+        DEFAULTS[edit.key]) as Record<string, unknown>;
+      let value: unknown = edit.value;
+      if (edit.index === undefined) {
+        if (current[edit.field] === edit.value) return scene;
+      } else {
+        // ONE ELEMENT OF A VECTOR. The others come from the vector AS PAINTED:
+        // a vec track keys the whole value, and the constant under a track is
+        // stale, so copying it would snap G and B back while R moves.
+        const painted = (resolveSceneTracksAt(scene, sceneFrame, doc.fps).effects as Record<string, Record<string, unknown> | undefined>)[edit.key]?.[edit.field];
+        const vec = [...((painted ?? current[edit.field]) as readonly number[])];
+        if (vec[edit.index] === edit.value) return scene;
+        vec[edit.index] = edit.value;
+        value = vec;
+      }
+      const effects = {
+        ...scene.effects,
+        [edit.key]: { ...current, [edit.field]: value },
+      } as SceneEffects;
+      return { ...scene, effects };
+    },
+    sceneFrame,
+  );
+}
+
+/** The three blurs of `Scene3D.effects`. */
+export function BlurSection() {
+  return <EffectsSection stack="blur" />;
+}
+
+/** Every other pass of `Scene3D.effects`. */
+export function PostprocessingSection() {
+  return <EffectsSection stack="postprocessing" />;
+}
+
+function EffectsSection({ stack }: { stack: StackId }) {
   const store = useStore();
   const doc = useShotEditor((s) => s.doc);
   const sceneId = useShotEditor((s) => s.sceneId);
+
+  // ── THE DRAG HALF ─────────────────────────────────────────────────────
+  //
+  // DECLARED BEFORE THE EARLY RETURNS, because a hook after a conditional
+  // return changes the hook count between renders. ONE bracket for fifteen
+  // fields: the widget names the param it is moving, so a new effect costs a
+  // `dragOn(...)` spread rather than another hook.
+  //
+  // Without it these fields commit ONLY on release, so the author drags, sees
+  // nothing move on the stage, and concludes the control is dead. The scene is read from the
+  // store per capture, the same live read `useSelectionScrub` makes.
+  const drag = useScrub((d, raw) => {
+    const id = store.getState().sceneId;
+    // The frame LIVE at the capture and against the document BEING WRITTEN — a
+    // scrub re-derives from its base, so the shot starts here are the base's.
+    return id === null
+      ? d
+      : patchEffect(d, id, raw as ParamEdit, containerFrame(d, id, store.getState().frame));
+  });
+  /** The three props a draggable param needs, bound to one field. */
+  const dragOn = (key: EffectKey, field: string, index?: number) => ({
+    onScrubStart: drag.start,
+    onScrub: (value: number) =>
+      drag.move((index === undefined ? { key, field, value } : { key, field, value, index }) satisfies ParamEdit),
+    onScrubEnd: drag.end,
+  });
+  // Same rule as the drag: above the early returns, or the hook count moves
+  // when the panel has no shot to describe.
+  const addAnchor = useRef<HTMLButtonElement>(null);
+  const [addOpen, setAddOpen] = useState(false);
+  // The add and remove buttons are this section's own, so they read a
+  // viewer's lock themselves: every field below reads it on its own.
+  const locked = useLocked();
+  // THE STACK AS PAINTED. Most of these params are keyframable, and the constant
+  // this used to read is pinned by `routeTrackedEdit` the moment one carries a
+  // track — so every animated effect field froze on the value it held when the
+  // first diamond was pressed, and dragging it appeared to do nothing at all.
+  // Display only: `patchEffect` still writes over the handed document.
+  const scene = useInspectorScene();
+  // A QUIET FIRST SCREEN (Paper 27, "8 · Empty inspector"): a stack with
+  // nothing in it opens collapsed, its header reading "None", so the empty
+  // inspector leads with the context's own section. Read once, on mount, and
+  // only when the author has never toggled this section (`persistKey`), so a
+  // choice they made is kept. Held here rather than inside `InspectorSection`
+  // so the add menu can open the section on the row it just created.
+  const [collapsed, flipCollapsed] = useCollapsed({
+    persistKey: STACKS[stack].persistKey,
+    defaultCollapsed: !EFFECT_KEYS.some(
+      (key) =>
+        (STACKS[stack].groups as readonly EffectGroup[]).includes(EFFECTS[key].group) &&
+        scene?.effects?.[key] !== undefined,
+    ),
+  });
+
   if (doc === null || sceneId === null) return null;
-  const effects = doc.scenesById[sceneId]?.effects;
+  const effects = scene?.effects;
   if (effects === undefined) return null;
 
   // Block body: `edit` now answers whether it ran, and this caller has no use
   // for the answer — see SceneSection.
-  const patch = (next: SceneEffects): void => {
-    store.edit((d) => ({
-      ...d,
-      scenesById: { ...d.scenesById, [sceneId]: { ...d.scenesById[sceneId]!, effects: next } },
-    }));
-  };
-
+  //
+  // THE TOGGLE GOES THROUGH `writeScene` TOO, and that is not symmetry for its
+  // own sake: switching an effect OFF deletes its key, and a track still
+  // pointing at `effects.bloom.strength` is one `sceneTrackRefusal` refuses —
+  // so the chrome would autosave a document its own gate rejects. The router's
+  // removed-property branch drops those tracks with the effect.
+  //
+  // THE ONE ON/OFF SEAM, and both new controls are it: the menu item calls it
+  // with `true`, the row's remove button with `false`. Neither knows about
+  // tracks, which is exactly what stops the remove button growing its own,
+  // subtly different, teardown. It edits the HANDED scene's effects: the
+  // painted stack above holds sampled values, and writing it back would key
+  // every other animated effect field at the playhead.
   const toggle = (key: EffectKey, on: boolean): void => {
-    const next: Record<string, unknown> = { ...effects };
-    if (on) next[key] = DEFAULTS[key];
-    else delete next[key];
-    patch(next as SceneEffects);
+    store.edit((d) =>
+      writeScene(
+        d,
+        sceneId,
+        (scene) => {
+          const next: Record<string, unknown> = { ...scene.effects };
+          if (on) next[key] = DEFAULTS[key];
+          else delete next[key];
+          return { ...scene, effects: next as SceneEffects };
+        },
+        containerFrame(d, sceneId, store.getState().frame),
+      ),
+    );
   };
 
-  const set = (key: EffectKey, field: string, value: number): void => {
-    const current = (effects as Record<string, Record<string, unknown>>)[key] ?? DEFAULTS[key];
-    patch({ ...effects, [key]: { ...current, [field]: value } } as SceneEffects);
+  // Through the SAME pure op the drag captures with, so typing 0.4 and dragging
+  // to 0.4 cannot land different documents.
+  const set = (key: EffectKey, field: string, value: number, index?: number): void => {
+    const edit: ParamEdit = index === undefined ? { key, field, value } : { key, field, value, index };
+    store.edit((d) => patchEffect(d, sceneId, edit, containerFrame(d, sceneId, store.getState().frame)));
   };
 
-  return (
-    <InspectorSection title="Effects" persistKey="shot:effects">
-      <Row label="Depth of field" on={effects.dof !== undefined} onToggle={(v) => toggle("dof", v)}>
-        <NumberField value={effects.dof?.fStop ?? 2.8} label="f/" ariaLabel="Aperture" min={0.7} max={32} step={0.1} onCommit={(v) => set("dof", "fStop", v)} />
-        <NumberField value={effects.dof?.bokehScale ?? 2} label="Amount" ariaLabel="Bokeh scale" min={0} max={20} step={0.5} onCommit={(v) => set("dof", "bokehScale", v)} />
-      </Row>
-      <Row label="Bloom" on={effects.bloom !== undefined} onToggle={(v) => toggle("bloom", v)}>
-        <NumberField value={effects.bloom?.strength ?? 0.6} label="Amount" ariaLabel="Bloom strength" min={0} max={5} step={0.05} onCommit={(v) => set("bloom", "strength", v)} />
-        <NumberField value={effects.bloom?.threshold ?? 0.7} label="Cut" ariaLabel="Bloom threshold" min={0} max={2} step={0.05} onCommit={(v) => set("bloom", "threshold", v)} />
-      </Row>
-      <Row label="Vignette" on={effects.vignette !== undefined} onToggle={(v) => toggle("vignette", v)}>
-        <NumberField value={effects.vignette?.amount ?? 0.5} label="Amount" ariaLabel="Vignette amount" min={0} max={1} step={0.05} onCommit={(v) => set("vignette", "amount", v)} />
-        <NumberField value={effects.vignette?.radius ?? 0.55} label="Size" ariaLabel="Vignette radius" min={0} max={1.5} step={0.05} onCommit={(v) => set("vignette", "radius", v)} />
-      </Row>
-      <Row label="Grain" on={effects.grain !== undefined} onToggle={(v) => toggle("grain", v)}>
-        <NumberField value={effects.grain?.amount ?? 0.08} label="Amount" ariaLabel="Grain amount" min={0} max={1} step={0.01} onCommit={(v) => set("grain", "amount", v)} />
-        <NumberField value={effects.grain?.size ?? 1.5} label="Size" ariaLabel="Grain size" min={1} max={16} step={0.5} onCommit={(v) => set("grain", "size", v)} />
-      </Row>
-      <Row label="Color split" on={effects.colorSplit !== undefined} onToggle={(v) => toggle("colorSplit", v)}>
-        <NumberField value={effects.colorSplit?.strength ?? 1.5} label="Amount" ariaLabel="Colour split strength" min={0} max={20} step={0.1} onCommit={(v) => set("colorSplit", "strength", v)} />
-      </Row>
-      <Row label="Ghost" on={effects.ghost !== undefined} onToggle={(v) => toggle("ghost", v)}>
-        <NumberField value={effects.ghost?.amount ?? 0.25} label="Amount" ariaLabel="Ghost amount" min={0} max={1} step={0.05} onCommit={(v) => set("ghost", "amount", v)} />
+  /** A vec2 field as ONE labelled box holding X and Y, with the one diamond
+   *  its vec2 track row (`effects.<key>.<field>`) has: one track keys both
+   *  axes, so the box that shows both carries it once, and its tooltip says
+   *  X and Y key together. */
+  const xy = (key: EffectKey, field: string, vec: readonly number[], name: string, what: string, range: { min: number; max: number; step: number }) => (
+    <VectorParam name={name} path={`effects.${key}.${field}`} parts={XY}>
+      {XY.map((axis, i) => (
+        <NumberField key={axis} value={vec[i]!} label={axis} ariaLabel={`${name} ${axis}, ${what}`} {...range} {...dragOn(key, field, i)} onCommit={(v) => set(key, field, v, i)} />
+      ))}
+    </VectorParam>
+  );
+
+  /** One CDL triple of Grade as ONE labelled box holding R, G and B, with the
+   *  one diamond its vec3 track row (`effects.grade.<field>`) has, whose
+   *  tooltip says R, G and B key together. */
+  const rgb = (field: "offset" | "power" | "slope", name: string, range: { min: number; max: number; step: number }) => (
+    <VectorParam name={name} path={`effects.grade.${field}`} keyLabel={name} parts={RGB}>
+      {RGB.map((channel, i) => (
+        <NumberField key={channel} value={(effects.grade?.[field] ?? DEFAULTS.grade[field])[i]!} label={channel} ariaLabel={`${name} ${channel}, grade ${name.toLowerCase()}`} {...range} {...dragOn("grade", field, i)} onCommit={(v) => set("grade", field, v, i)} />
+      ))}
+    </VectorParam>
+  );
+
+  /**
+   * The params of every effect, keyed the same way the rest of this file is.
+   *
+   * A record and not seventeen components: each entry closes over `effects`,
+   * `dragOn` and `set`, so a component per effect would be seventeen prop lists
+   * carrying the same three things. Building all seventeen fragments per render
+   * is strictly less work than the sixteen mounted rows this replaced, and only
+   * the enabled ones are ever handed to React.
+   */
+  const params: Record<EffectKey, ReactNode> = {
+    dof: (
+      <>
+        {/* An f-number keeps its fine step: the range is wide but the values
+            authors reach for are a third of a stop apart, and Shift (×10) is
+            the gear that crosses the whole scale.
+
+            BOTH DOF FLOORS STAY LOCAL AND STRICTER THAN THE TABLE'S. Its rule
+            is `> 0` exclusive and `NumberField` has no exclusive bound, so a
+            field taking `min` from it could reach the one value the track
+            refuses, which `routeTrackedEdit` would then drop in silence. */}
+        <Param><NumberField value={effects.dof?.fStop ?? DEFAULTS.dof.fStop} label="f/" ariaLabel="f/, aperture" title="Animating this costs one uniform write per LAYER per frame: depth of field is a per-layer circle of confusion, not a post pass." min={0.7} max={32} step={0.1} {...dragOn("dof", "fStop")} onCommit={(v) => set("dof", "fStop", v)} trailing={<SceneKeyframeDot path="effects.dof.fStop" />} /></Param>
+        {/* ── THE FLOOR IS 0.1, AND 0 IS NOT "NO BLUR" ────────────────────
+            `layerLod` reads a non-positive `bokehScale` (and a non-positive
+            `fStop`) as 1, so typing 0 here did not remove the blur — it set
+            the amount to 1, which is MORE blur than 0.5. The control said
+            otherwise, and once this field is keyframable the same lie becomes
+            "animate it to zero", which reads as a defocus pull that lands on
+            the wrong value. The minimum now matches the renderer's, and the
+            title says what to reach for instead. */}
+        <Param><NumberField value={effects.dof?.bokehScale ?? DEFAULTS.dof.bokehScale} label="Amount" ariaLabel="Amount, bokeh scale" title="0 is not “no blur”: the renderer reads any value at or below zero as 1. Switch depth of field off instead." min={0.1} max={20} step={0.5} {...dragOn("dof", "bokehScale")} onCommit={(v) => set("dof", "bokehScale", v)} trailing={<SceneKeyframeDot path="effects.dof.bokehScale" />} /></Param>
+      </>
+    ),
+    bloom: (
+      <>
+        <Param><NumberField value={effects.bloom?.strength ?? DEFAULTS.bloom.strength} label="Amount" ariaLabel="Amount, bloom strength" min={0} max={5} step={0.1} {...dragOn("bloom", "strength")} onCommit={(v) => set("bloom", "strength", v)} trailing={<SceneKeyframeDot path="effects.bloom.strength" />} /></Param>
+        <Param><NumberField value={effects.bloom?.threshold ?? DEFAULTS.bloom.threshold} label="Cut" ariaLabel="Cut, bloom threshold" min={0} max={2} step={0.05} {...dragOn("bloom", "threshold")} onCommit={(v) => set("bloom", "threshold", v)} trailing={<SceneKeyframeDot path="effects.bloom.threshold" />} /></Param>
+        <Param><NumberField value={effects.bloom?.radius ?? DEFAULTS.bloom.radius} label="Radius" ariaLabel="Radius, bloom radius" min={0} max={1} step={0.05} {...dragOn("bloom", "radius")} onCommit={(v) => set("bloom", "radius", v)} trailing={<SceneKeyframeDot path="effects.bloom.radius" />} /></Param>
+      </>
+    ),
+    vignette: (
+      <>
+        <Param><NumberField value={effects.vignette?.amount ?? DEFAULTS.vignette.amount} label="Amount" ariaLabel="Amount, vignette amount" min={0} max={1} step={0.05} {...dragOn("vignette", "amount")} onCommit={(v) => set("vignette", "amount", v)} trailing={<SceneKeyframeDot path="effects.vignette.amount" />} /></Param>
+        <Param><NumberField value={effects.vignette?.radius ?? DEFAULTS.vignette.radius} label="Size" ariaLabel="Size, vignette radius" min={0} max={1.5} step={0.05} {...dragOn("vignette", "radius")} onCommit={(v) => set("vignette", "radius", v)} trailing={<SceneKeyframeDot path="effects.vignette.radius" />} /></Param>
+        <Param><NumberField value={effects.vignette?.softness ?? DEFAULTS.vignette.softness} label="Soft" ariaLabel="Soft, vignette softness" {...hardOf("effects.vignette.softness")} max={1} step={0.05} {...dragOn("vignette", "softness")} onCommit={(v) => set("vignette", "softness", v)} trailing={<SceneKeyframeDot path="effects.vignette.softness" />} /></Param>
+      </>
+    ),
+    grain: (
+      <>
+        <Param><NumberField value={effects.grain?.amount ?? DEFAULTS.grain.amount} label="Amount" ariaLabel="Amount, grain amount" min={0} max={1} step={0.05} {...dragOn("grain", "amount")} onCommit={(v) => set("grain", "amount", v)} trailing={<SceneKeyframeDot path="effects.grain.amount" />} /></Param>
+        {/* The 1px floor is the renderer's and comes from the table; 16 is this
+            section's own ceiling on a scale with no upper limit. */}
+        <Param><NumberField value={effects.grain?.size ?? DEFAULTS.grain.size} label="Size" ariaLabel="Size, grain size" {...hardOf("effects.grain.size")} max={16} step={0.5} {...dragOn("grain", "size")} onCommit={(v) => set("grain", "size", v)} trailing={<SceneKeyframeDot path="effects.grain.size" />} /></Param>
+      </>
+    ),
+    colorSplit: (
+      <>
+        <Param><NumberField value={effects.colorSplit?.strength ?? DEFAULTS.colorSplit.strength} label="Amount" ariaLabel="Amount, colour split strength" min={0} max={20} step={0.5} {...dragOn("colorSplit", "strength")} onCommit={(v) => set("colorSplit", "strength", v)} trailing={<SceneKeyframeDot path="effects.colorSplit.strength" />} /></Param>
+        <Param><NumberField value={effects.colorSplit?.scale ?? DEFAULTS.colorSplit.scale} label="Scale" ariaLabel="Scale, colour split scale" min={0.5} max={2} step={0.01} {...dragOn("colorSplit", "scale")} onCommit={(v) => set("colorSplit", "scale", v)} trailing={<SceneKeyframeDot path="effects.colorSplit.scale" />} /></Param>
+      </>
+    ),
+    ghost: (
+      <>
+        <Param><NumberField value={effects.ghost?.amount ?? DEFAULTS.ghost.amount} label="Amount" ariaLabel="Amount, ghost amount" min={0} max={1} step={0.05} {...dragOn("ghost", "amount")} onCommit={(v) => set("ghost", "amount", v)} trailing={<SceneKeyframeDot path="effects.ghost.amount" />} /></Param>
         {/* A LOOP BOUND, not a uniform — changing it recompiles the chain, which
             is exactly why `postSignature` carries it and the other params do
-            not. */}
-        <NumberField value={effects.ghost?.count ?? 3} label="Copies" ariaLabel="Ghost count" min={1} max={8} step={1} onCommit={(v) => set("ghost", "count", v)} />
-      </Row>
-      <Row label="Edge fade" on={effects.edgeFade !== undefined} onToggle={(v) => toggle("edgeFade", v)}>
-        <NumberField value={effects.edgeFade?.size ?? 0.12} label="Size" ariaLabel="Edge fade size" min={0} max={0.5} step={0.01} onCommit={(v) => set("edgeFade", "size", v)} />
-      </Row>
-      <Row label="Grade" on={effects.grade !== undefined} onToggle={(v) => toggle("grade", v)}>
-        <NumberField value={effects.grade?.saturation ?? 1} label="Sat" ariaLabel="Saturation" min={0} max={3} step={0.05} onCommit={(v) => set("grade", "saturation", v)} />
-      </Row>
-      <Row label="Motion blur" on={effects.motionBlur !== undefined} onToggle={(v) => toggle("motionBlur", v)}>
+            not. Not trackable, so there is no table row to read limits from:
+            `ghostCount` clamps to 1..8 and these repeat it. */}
+        <Param><NumberField value={effects.ghost?.count ?? DEFAULTS.ghost.count} label="Copies" ariaLabel="Copies, ghost count" min={1} max={8} step={1} {...dragOn("ghost", "count")} onCommit={(v) => set("ghost", "count", v)} /></Param>
+        {/* The march between copies, in uv. */}
+        {xy("ghost", "offset", effects.ghost?.offset ?? DEFAULTS.ghost.offset, "Shift", "ghost offset", { min: -0.1, max: 0.1, step: 0.001 })}
+      </>
+    ),
+    edgeFade: (
+      <>
+        <Param><NumberField value={effects.edgeFade?.size ?? DEFAULTS.edgeFade.size} label="Size" ariaLabel="Size, edge fade size" min={0} max={0.5} step={0.02} {...dragOn("edgeFade", "size")} onCommit={(v) => set("edgeFade", "size", v)} trailing={<SceneKeyframeDot path="effects.edgeFade.size" />} /></Param>
+        <Param><NumberField value={effects.edgeFade?.softness ?? DEFAULTS.edgeFade.softness} label="Soft" ariaLabel="Soft, edge fade softness" {...hardOf("effects.edgeFade.softness")} max={0.5} step={0.02} {...dragOn("edgeFade", "softness")} onCommit={(v) => set("edgeFade", "softness", v)} trailing={<SceneKeyframeDot path="effects.edgeFade.softness" />} /></Param>
+      </>
+    ),
+    grade: (
+      // ASC CDL: offset is Lift, power is Gamma, slope is Gain.
+      <>
+        <Param><NumberField value={effects.grade?.saturation ?? DEFAULTS.grade.saturation} label="Sat" ariaLabel="Sat, grade saturation" min={0} max={3} step={0.05} {...dragOn("grade", "saturation")} onCommit={(v) => set("grade", "saturation", v)} trailing={<SceneKeyframeDot path="effects.grade.saturation" />} /></Param>
+        {rgb("offset", "Lift", { min: -1, max: 1, step: 0.01 })}
+        {rgb("power", "Gamma", { min: 0.1, max: 4, step: 0.05 })}
+        {rgb("slope", "Gain", { min: 0, max: 4, step: 0.05 })}
+      </>
+    ),
+    sharpen: (
+      // 0..1 the right way round, and both ends are the renderer's `clamp01`
+      // rather than a taste range, so they come from the table. The node
+      // underneath reads 0 as MAXIMUM sharpening and 2 as none; post.ts's
+      // `write` inverts it, so this control is the only place the author's
+      // direction is stated.
+      <Param><NumberField value={effects.sharpen?.amount ?? DEFAULTS.sharpen.amount} label="Amount" ariaLabel="Amount, sharpen amount" {...hardOf("effects.sharpen.amount")} step={0.05} {...dragOn("sharpen", "amount")} onCommit={(v) => set("sharpen", "amount", v)} trailing={<SceneKeyframeDot path="effects.sharpen.amount" />} /></Param>
+    ),
+    bleach: (
+      <Param><NumberField value={effects.bleach?.amount ?? DEFAULTS.bleach.amount} label="Amount" ariaLabel="Amount, bleach amount" min={0} max={1} step={0.05} {...dragOn("bleach", "amount")} onCommit={(v) => set("bleach", "amount", v)} trailing={<SceneKeyframeDot path="effects.bleach.amount" />} /></Param>
+    ),
+    tiltShift: (
+      <>
+        <Param><NumberField value={effects.tiltShift?.amount ?? DEFAULTS.tiltShift.amount} label="Amount" ariaLabel="Amount, tilt shift amount" min={0} max={1} step={0.05} {...dragOn("tiltShift", "amount")} onCommit={(v) => set("tiltShift", "amount", v)} trailing={<SceneKeyframeDot path="effects.tiltShift.amount" />} /></Param>
+        {/* Fractions of the frame HEIGHT — 0 is the top edge, 1 the bottom —
+            so a focus band means the same thing at any export resolution. */}
+        <Param><NumberField value={effects.tiltShift?.center ?? DEFAULTS.tiltShift.center} label="Focus" ariaLabel="Focus, focus band centre" min={0} max={1} step={0.02} {...dragOn("tiltShift", "center")} onCommit={(v) => set("tiltShift", "center", v)} trailing={<SceneKeyframeDot path="effects.tiltShift.center" />} /></Param>
+        {/* The 0 floor is the renderer's; a band wider than the frame still
+            draws, so the 1 stays this section's. */}
+        <Param><NumberField value={effects.tiltShift?.width ?? DEFAULTS.tiltShift.width} label="Width" ariaLabel="Width, focus band width" {...hardOf("effects.tiltShift.width")} max={1} step={0.02} {...dragOn("tiltShift", "width")} onCommit={(v) => set("tiltShift", "width", v)} trailing={<SceneKeyframeDot path="effects.tiltShift.width" />} /></Param>
+        <Param><NumberField value={effects.tiltShift?.softness ?? DEFAULTS.tiltShift.softness} label="Soft" ariaLabel="Soft, focus band softness" {...hardOf("effects.tiltShift.softness")} max={1} step={0.02} {...dragOn("tiltShift", "softness")} onCommit={(v) => set("tiltShift", "softness", v)} trailing={<SceneKeyframeDot path="effects.tiltShift.softness" />} /></Param>
+      </>
+    ),
+    rays: (
+      <>
+        <Param><NumberField value={effects.rays?.strength ?? DEFAULTS.rays.strength} label="Amount" ariaLabel="Amount, light ray strength" min={0} max={3} step={0.1} {...dragOn("rays", "strength")} onCommit={(v) => set("rays", "strength", v)} trailing={<SceneKeyframeDot path="effects.rays.strength" />} /></Param>
+        {/* Only light ABOVE this streaks. At 0 the whole frame smears toward
+            the centre, which reads as a zoom blur rather than as shafts. */}
+        <Param><NumberField value={effects.rays?.threshold ?? DEFAULTS.rays.threshold} label="Cut" ariaLabel="Cut, light ray threshold" min={0} max={2} step={0.05} {...dragOn("rays", "threshold")} onCommit={(v) => set("rays", "threshold", v)} trailing={<SceneKeyframeDot path="effects.rays.threshold" />} /></Param>
+        {/* Where the shafts radiate from, in screen uv: 0,0 is the top left. */}
+        {xy("rays", "center", effects.rays?.center ?? DEFAULTS.rays.center, "Centre", "light ray centre", { min: 0, max: 1, step: 0.02 })}
+      </>
+    ),
+    pixelate: (
+      // SCREEN pixels per cell, like `grain.size`, so the mosaic does not get
+      // four times finer when the export goes from 1080p to 4K. Same split as
+      // grain: the 1px floor is the renderer's, the 64 is this section's.
+      <Param><NumberField value={effects.pixelate?.size ?? DEFAULTS.pixelate.size} label="Cell" ariaLabel="Cell, pixelate cell size" {...hardOf("effects.pixelate.size")} max={64} step={1} {...dragOn("pixelate", "size")} onCommit={(v) => set("pixelate", "size", v)} trailing={<SceneKeyframeDot path="effects.pixelate.size" />} /></Param>
+    ),
+    glitch: (
+      <>
+        <Param><NumberField value={effects.glitch?.strength ?? DEFAULTS.glitch.strength} label="Tear" ariaLabel="Tear, glitch strength" min={0} max={1} step={0.02} {...dragOn("glitch", "strength")} onCommit={(v) => set("glitch", "strength", v)} trailing={<SceneKeyframeDot path="effects.glitch.strength" />} /></Param>
+        {/* The fraction of bands that tear on any given frame, so `clamp01` in
+            `write` is the real limit and the table carries it. */}
+        <Param><NumberField value={effects.glitch?.density ?? DEFAULTS.glitch.density} label="Bands" ariaLabel="Bands, glitch density" {...hardOf("effects.glitch.density")} step={0.05} {...dragOn("glitch", "density")} onCommit={(v) => set("glitch", "density", v)} trailing={<SceneKeyframeDot path="effects.glitch.density" />} /></Param>
+        <Param><NumberField value={effects.glitch?.split ?? DEFAULTS.glitch.split} label="Split" ariaLabel="Split, glitch channel split" min={0} max={32} step={1} {...dragOn("glitch", "split")} onCommit={(v) => set("glitch", "split", v)} /></Param>
+      </>
+    ),
+    crt: (
+      <>
+        {/* Capped below 0.5 in `write`: past that the barrel's own corner
+            compensation goes non-positive and the picture inverts through
+            itself. The table says 0.49 so neither this control nor a
+            `set_keyframe` can reach it. */}
+        <Param><NumberField value={effects.crt?.curvature ?? DEFAULTS.crt.curvature} label="Curve" ariaLabel="Curve, CRT curvature" {...hardOf("effects.crt.curvature")} step={0.01} {...dragOn("crt", "curvature")} onCommit={(v) => set("crt", "curvature", v)} trailing={<SceneKeyframeDot path="effects.crt.curvature" />} /></Param>
+        <Param><NumberField value={effects.crt?.scanlines ?? DEFAULTS.crt.scanlines} label="Lines" ariaLabel="Lines, CRT scanline intensity" {...hardOf("effects.crt.scanlines")} step={0.05} {...dragOn("crt", "scanlines")} onCommit={(v) => set("crt", "scanlines", v)} trailing={<SceneKeyframeDot path="effects.crt.scanlines" />} /></Param>
+        <Param><NumberField value={effects.crt?.lineHeight ?? DEFAULTS.crt.lineHeight} label="Pitch" ariaLabel="Pitch, CRT scanline pitch" min={1} max={16} step={0.5} {...dragOn("crt", "lineHeight")} onCommit={(v) => set("crt", "lineHeight", v)} /></Param>
+      </>
+    ),
+    fisheye: (
+      <>
+        {/* Both 0..1 from the table. Strength is the lens's curvature (1 is the
+            strong measured lens), so keying it 0 -> 1 -> 0 is a punch-through;
+            the vignette is scaled by strength, so it arrives with the lens. */}
+        <Param><NumberField value={effects.fisheye?.strength ?? DEFAULTS.fisheye.strength} label="Amount" ariaLabel="Amount, fisheye strength" {...hardOf("effects.fisheye.strength")} step={0.05} {...dragOn("fisheye", "strength")} onCommit={(v) => set("fisheye", "strength", v)} trailing={<SceneKeyframeDot path="effects.fisheye.strength" />} /></Param>
+        <Param><NumberField value={effects.fisheye?.vignette ?? DEFAULTS.fisheye.vignette} label="Shade" ariaLabel="Shade, fisheye vignette" {...hardOf("effects.fisheye.vignette")} step={0.05} {...dragOn("fisheye", "vignette")} onCommit={(v) => set("fisheye", "vignette", v)} trailing={<SceneKeyframeDot path="effects.fisheye.vignette" />} /></Param>
+      </>
+    ),
+    motionBlur: (
+      <>
         {/* NOT A SHADER PASS. This feeds the export layer's sub-frame
             accumulation, which is the only formulation compatible with
             out-of-order rendering — see SceneEffects in types.ts. It therefore
-            shows in an EXPORT and not in the preview. */}
-        <NumberField value={effects.motionBlur?.shutterDeg ?? 180} label="Shutter" ariaLabel="Shutter angle" unit="deg" min={0} max={360} step={10} onCommit={(v) => set("motionBlur", "shutterDeg", v)} />
-        <NumberField value={effects.motionBlur?.samples ?? 8} label="Samples" ariaLabel="Motion blur samples" min={2} max={32} step={1} onCommit={(v) => set("motionBlur", "samples", v)} />
-      </Row>
+            shows in an EXPORT and not in the preview. Not trackable either, so
+            these limits are the section's alone. */}
+        <Param><NumberField value={effects.motionBlur?.shutterDeg ?? DEFAULTS.motionBlur.shutterDeg} label="Shutter" ariaLabel="Shutter, shutter angle" unit="°" min={0} max={360} step={10} {...dragOn("motionBlur", "shutterDeg")} onCommit={(v) => set("motionBlur", "shutterDeg", v)} /></Param>
+        <Param><NumberField value={effects.motionBlur?.samples ?? DEFAULTS.motionBlur.samples} label="Samples" ariaLabel="Samples, motion blur samples" min={2} max={32} step={1} {...dragOn("motionBlur", "samples")} onCommit={(v) => set("motionBlur", "samples", v)} /></Param>
+      </>
+    ),
+  };
+
+  const own = STACKS[stack];
+  const groups: readonly EffectGroup[] = own.groups;
+  // Motion blur renders only in a studio server export, and the hosted editor
+  // has no server, so there it is not offered at all.
+  const hosted = dailiesHost() !== undefined;
+  const mine = EFFECT_KEYS.filter(
+    (key) => groups.includes(EFFECTS[key].group) && !(hosted && key === "motionBlur"),
+  );
+  const on = mine.filter((key) => effects[key] !== undefined);
+  const off = mine.filter((key) => effects[key] === undefined);
+
+  /**
+   * THE ADD BUTTON IS PASSED AS `action`, NOT AS `onAdd`.
+   *
+   * `onAdd` renders its own button, and the Popover needs a ref to the element
+   * it anchors to. Passing the node is the only way to hold one. It wears the
+   * same classes `onAdd` would, so every section's action looks alike, and it
+   * keeps `onAdd`'s lock rule by hand: a viewer's panel adds nothing.
+   */
+  const addButton = (
+    <button
+      ref={addAnchor}
+      type="button"
+      className="btn is-icon insp-section-action"
+      data-testid={own.addTestId}
+      aria-haspopup="true"
+      aria-expanded={addOpen}
+      aria-label={own.addLabel}
+      title={own.addTitle}
+      disabled={locked}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (!locked) setAddOpen((was) => !was);
+      }}
+    >
+      <IconPlus />
+    </button>
+  );
+
+  /* Popover and not an inline block: the panel scrolls and clips, and a menu
+     that has to fit inside the section is a menu that scrolls the author away
+     from the row they opened it from.
+
+     IT RIDES IN THE `action` SLOT, BESIDE THE BUTTON, NOT IN THE CHILDREN.
+     `InspectorSection` renders its children only while expanded, and the
+     collapse bit persists to localStorage. As a child the menu was therefore
+     unreachable for anyone who had ever collapsed the section, while the
+     button that opens it kept rendering in the always-live headrow: a "+" that
+     flipped `aria-expanded` and showed nothing. Since the sixteen toggles are
+     gone, that is the only way to add an effect. The Popover portals to the document
+     body either way, so nothing about where it lands changes. */
+  const addMenu = (
+    <Popover open={addOpen} anchor={addAnchor} onClose={() => setAddOpen(false)} align="right">
+      <div className="effect-add-menu">
+        {groups.map((group) => {
+          const items = off.filter((key) => EFFECTS[key].group === group);
+          // A heading with nothing under it is a group the author has already
+          // used up, and it reads as a menu that lost its items.
+          if (items.length === 0) return null;
+          return (
+            <Fragment key={group}>
+              {/* A lone group's heading only repeats the section title the
+                  menu was opened from ("Blur" under Blur), so it is dropped. */}
+              {groups.length > 1 ? <div className="effect-add-group">{group}</div> : null}
+              {items.map((key) => (
+                <button
+                  key={key}
+                  type="button"
+                  className="effect-add-item"
+                  // EXACTLY THE LABEL. This is the accessible name the
+                  // inspector tests switch an effect on by, and the name a
+                  // screen reader reads is the name on the row it creates.
+                  aria-label={EFFECTS[key].label}
+                  onClick={() => {
+                    setAddOpen(false);
+                    toggle(key, true);
+                    // The row it adds is drawn only while the section is open.
+                    if (collapsed) flipCollapsed();
+                  }}
+                >
+                  {EFFECTS[key].label}
+                </button>
+              ))}
+            </Fragment>
+          );
+        })}
+      </div>
+    </Popover>
+  );
+
+  return (
+    <InspectorSection
+      title={own.title}
+      icon={SECTION_ICONS[stack]}
+      collapsed={collapsed}
+      onCollapsedChange={flipCollapsed}
+      // Shown only while collapsed. An empty stack says so in one word; a
+      // stack with passes in it names them ("Bloom, Cut").
+      summary={on.length === 0 ? "None" : on.map((id) => EFFECTS[id].label).join(", ")}
+      // The stack's own classes, which tests and the add menu address it by.
+      // No section scope: its rows are the house's (widgets.css).
+      className={own.className}
+      action={
+        <>
+          {addButton}
+          {addMenu}
+        </>
+      }
+    >
+      {on.length === 0 ? (
+        <p className="insp-empty">{own.empty}</p>
+      ) : (
+        on.map((key) => (
+          <div key={key} className="effect-row" data-effect={EFFECTS[key].label}>
+            <div className="effect-head">
+              <span className="effect-head-label">{EFFECTS[key].label}</span>
+              {/* The SAME seam the old toggle's "off" position ran through, so
+                  the tracks that point into this effect are still dropped with
+                  it. A remove button with its own delete would be a second
+                  teardown to keep in step with `sceneTrackRefusal`.
+
+                  The house in-row verb (`.insp-key`): a 16px icon button at full
+                  strength in the third ink, turning `--danger` only under the
+                  pointer. It rested at 0.28 opacity, and removing an effect is
+                  reachable nowhere else, so a quiet control there was nearly a
+                  missing one. */}
+              <button
+                type="button"
+                className="insp-key is-danger"
+                aria-label={`Remove ${EFFECTS[key].label}`}
+                title="Switch off and drop any keyframes on its params"
+                disabled={locked}
+                onClick={() => toggle(key, false)}
+              >
+                <IconClose />
+              </button>
+            </div>
+            {/* Every param keeps its word INSIDE its box whatever the panel's
+                field-label preference. The words are words already ("Amount",
+                "Cut", "Soft"), the slots are half a row wide, and a vector box
+                holds two or three fields with no room for a name above each.
+                Named mode prints a field's accessible name above it, and these
+                names start with the visible word ("Amount, bloom strength"),
+                so it would print that whole phrase over every box. */}
+            <FieldLabels value="compact">
+              <div className="effect-params">{params[key]}</div>
+            </FieldLabels>
+          </div>
+        ))
+      )}
     </InspectorSection>
   );
 }
 
-function Row({
-  label,
-  on,
-  onToggle,
+/**
+ * One scalar param's slot in the two-up wrap.
+ *
+ * Its keyframe diamond (P5) is INSIDE the field, as the field's `trailing`, so
+ * a param the scene table refuses (`ghost.count`, a loop bound the compiled
+ * chain is keyed on, and the two motion-blur fields, an export-time
+ * accumulation and not a uniform at all) is exactly as wide as one it keys:
+ * `.effect-params` wraps two per line, and a field narrowed by a diamond beside
+ * it would stop its column lining up with the pairs below.
+ *
+ * `SceneKeyframeDot` hides itself when the effect is off, which is also when
+ * this whole row is unmounted, so the two agree without either asking the
+ * other.
+ *
+ * The slot is a property row (`.insp-row`), half the width of one, so its
+ * field takes the inspector's type scale (ui widgets.css sets it inside rows
+ * only) like every other field in the panel.
+ */
+function Param({ children }: { children: ReactNode }) {
+  return <div className="effect-param insp-row">{children}</div>;
+}
+
+/**
+ * A vector param (a ghost's shift, a ray centre, Grade's Lift, Gamma and Gain)
+ * as ONE labelled box across the whole line: its name, then the components,
+ * then the one diamond for the vector, because one track keys every
+ * component, and its tooltip names the components that key together. The
+ * components carry their one-letter prefixes inside the box, under the
+ * params' compact field labels (see the effect rows).
+ */
+function VectorParam({
+  name,
+  path,
+  keyLabel,
+  parts,
   children,
 }: {
-  label: string;
-  on: boolean;
-  onToggle(on: boolean): void;
+  name: string;
+  path: string;
+  /** The diamond's word, where the table's differs from the row's (Grade's
+   *  table says the CDL's Offset, Power and Slope; the row says Lift, Gamma
+   *  and Gain). */
+  keyLabel?: string;
+  /** The components' prefixes, in box order: what keys together. */
+  parts: readonly string[];
   children: ReactNode;
 }) {
   return (
-    <div className="effect-row" data-effect={label}>
-      <InspectorRow label={label}>
-        <Toggle checked={on} ariaLabel={label} onChange={onToggle} />
+    <div className="effect-param is-vec">
+      <InspectorRow
+        label={name}
+        trailing={<SceneKeyframeDot path={path} parts={parts} {...(keyLabel === undefined ? {} : { label: keyLabel })} />}
+      >
+        <div className="insp-vec">{children}</div>
       </InspectorRow>
-      {on ? <div className="effect-params">{children}</div> : null}
     </div>
   );
 }