@dailies-studio/shot-editor 0.1.0

package/src/panels/help/HelpSection.tsx

@@ -0,0 +1,190 @@
+// The left rail's Manual: how the editor works, the tool table and the keymap,
+// rendered where a first-time author actually looks.
+//
+// ── ONE LIST, PINNED BY A TEST ──────────────────────────────────────────
+//
+// The tool rows render straight from TOOL_SPECS, so that half cannot drift.
+// The shortcut rows cannot be derived — `resolveKey` is a function, not a
+// table — so each row carries the EXACT EVENT it claims to describe plus the
+// action kind the keymap must answer for it, and test/helpSection.test.tsx
+// walks every row through `resolveKey`. A binding change without a manual
+// edit is a red test, not a stale manual.
+//
+// No store, no context: this section is static prose over static tables,
+// which is what lets the test mount it bare. The agent connect steps moved to
+// the File tab's MCP section (McpSection.tsx), where an author actually looks.
+import { SHOT_TOOLS, specOf } from "../../tools.js";
+import type { KeyAction, KeyEventLike } from "../../state/keymap.js";
+
+export interface ShortcutRow {
+  /** What the manual shows, house glyph style (⌘ ⇧ ⌥ — ⌘ is Ctrl on Windows). */
+  combo: string;
+  does: string;
+  group: "View" | "Working view" | "Edit" | "Animate & camera";
+  /** The event this combo produces, so the test can ask the keymap itself. */
+  probe: KeyEventLike;
+  /** Arrows answer differently with a selection; everything else omits it. */
+  hasSelection?: boolean;
+  /** The pen's two rows answer differently with a path open, and ONLY with one
+   *  open — Escape means deselect the rest of the time, which is why the
+   *  context carries "holds points" and not "the pen tool is armed". */
+  penActive?: boolean;
+  /** Escape's third meaning: leave one level of isolation. It only answers
+   *  that with NOTHING selected, so the row carries the bit and the test
+   *  probes with `hasSelection` false. */
+  isolation?: boolean;
+  /** The modal starters (G/R/S) answer only with the cursor over the working
+   *  pane — the same letters arm tools everywhere else, and both readings
+   *  have rows. */
+  workingPane?: boolean;
+  /** The axis and terminator rows answer only while a transform is LIVE. */
+  transformModal?: boolean;
+  /** The action `resolveKey(probe)` must return. */
+  action: KeyAction["kind"];
+}
+
+const probe = (
+  key: string,
+  m: { shift?: boolean; ctrl?: boolean; alt?: boolean; code?: string } = {},
+): KeyEventLike => ({
+  key,
+  shiftKey: m.shift === true,
+  altKey: m.alt === true,
+  ctrlKey: m.ctrl === true,
+  metaKey: false,
+  ...(m.code === undefined ? {} : { code: m.code }),
+});
+
+export const SHORTCUTS: readonly ShortcutRow[] = [
+  { group: "View", combo: "Space", does: "Play / pause", probe: probe(" "), action: "playToggle" },
+  { group: "View", combo: "← →", does: "Step one frame (nothing selected)", probe: probe("ArrowRight"), action: "step" },
+  { group: "View", combo: "1 / 2 / 3", does: "Working / split / camera view", probe: probe("1"), action: "stageLayout" },
+  { group: "View", combo: "[", does: "Hide / show the left panel", probe: probe("["), action: "togglePanel" },
+  { group: "View", combo: "]", does: "Hide / show the right panel", probe: probe("]"), action: "togglePanel" },
+  { group: "View", combo: ".", does: "Hide every panel", probe: probe("."), action: "togglePanel" },
+  { group: "View", combo: "\\", does: "Fit the timeline", probe: probe("\\"), action: "fitTimeline" },
+  { group: "View", combo: "⌘+ / ⌘−", does: "Zoom in / out", probe: probe("=", { ctrl: true }), action: "zoom" },
+  { group: "View", combo: "⌘0", does: "Zoom to 100%", probe: probe("0", { ctrl: true }), action: "zoomReset" },
+  { group: "View", combo: "Home", does: "Fit the active pane", probe: probe("Home"), action: "fit" },
+  { group: "View", combo: "⇧C", does: "Fit the active pane (Blender's frame all)", probe: probe("c", { shift: true }), action: "fit" },
+  { group: "View", combo: "Z", does: "Cycle working-pane shading (solid / wire / material / rendered)", probe: probe("z"), action: "shadingCycle" },
+  { group: "View", combo: "⇧Z", does: "Wireframe on / off", probe: probe("z", { shift: true }), action: "wireframeToggle" },
+
+  { group: "Working view", combo: "G", does: "Grab the selection — move it with the mouse, click to place", probe: probe("g"), workingPane: true, hasSelection: true, action: "modalStart" },
+  { group: "Working view", combo: "R", does: "Rotate the selection (roll)", probe: probe("r"), workingPane: true, hasSelection: true, action: "modalStart" },
+  { group: "Working view", combo: "S", does: "Scale the selection", probe: probe("s"), workingPane: true, hasSelection: true, action: "modalStart" },
+  { group: "Working view", combo: "G / S", does: "Nothing selected: move / zoom the camera", probe: probe("g"), workingPane: true, action: "modalStart" },
+  { group: "Working view", combo: "X / Y / Z", does: "Constrain the transform to an axis (again clears; G+Z = depth)", probe: probe("x"), transformModal: true, action: "modalAxis" },
+  { group: "Working view", combo: "0-9", does: "Type an exact value: G X 200 Enter", probe: probe("2"), transformModal: true, action: "modalNumber" },
+  // `hasSelection` because R is the one that needs it: the CAMERA has no modal
+  // roll, so switching to rotate on a camera transform would arm one that could
+  // never emit.
+  { group: "Working view", combo: "G / R / S", does: "Switch transform without leaving the gesture", probe: probe("r"), transformModal: true, hasSelection: true, action: "modalStart" },
+  { group: "Working view", combo: "Enter", does: "Confirm the transform (or click)", probe: probe("Enter"), transformModal: true, action: "modalConfirm" },
+  { group: "Working view", combo: "Esc", does: "Cancel the transform (or right-click)", probe: probe("Escape"), transformModal: true, action: "modalCancel" },
+  { group: "Working view", combo: "Num1 / 3 / 7", does: "Front / right / top view (⌘ = the opposite)", probe: probe("1", { code: "Numpad1" }), action: "workingViewPreset" },
+  { group: "Working view", combo: "Num0", does: "Camera view, and back again", probe: probe("0", { code: "Numpad0" }), action: "stageLayout" },
+  { group: "Working view", combo: "Num.", does: "Frame the selection", probe: probe(".", { code: "NumpadDecimal" }), action: "fitSelection" },
+  { group: "Working view", combo: "Num2 / 4 / 6 / 8", does: "Orbit 15°; Num9 looks from the opposite side", probe: probe("4", { code: "Numpad4" }), action: "orbitStep" },
+  { group: "Working view", combo: "Num5", does: "Orthographic / perspective", probe: probe("5", { code: "Numpad5" }), action: "toggleWorkingOrtho" },
+  { group: "Working view", combo: "Num/", does: "Go inside the selection, and back out", probe: probe("/", { code: "NumpadDivide" }), action: "toggleIsolation" },
+  { group: "Working view", combo: "Num+ / Num−", does: "Zoom the active pane", probe: probe("+", { code: "NumpadAdd" }), action: "zoom" },
+
+  { group: "Edit", combo: "Arrows", does: "Nudge selection 1 px (⇧ = 10)", probe: probe("ArrowRight"), hasSelection: true, action: "nudge" },
+  { group: "Edit", combo: "⌘Z", does: "Undo", probe: probe("z", { ctrl: true }), action: "undo" },
+  { group: "Edit", combo: "⌘⇧Z", does: "Redo", probe: probe("z", { ctrl: true, shift: true }), action: "redo" },
+  { group: "Edit", combo: "⌘S", does: "Save", probe: probe("s", { ctrl: true }), action: "save" },
+  { group: "Edit", combo: "⌘D", does: "Duplicate", probe: probe("d", { ctrl: true }), action: "duplicate" },
+  { group: "Edit", combo: "⌘A / A", does: "Select all, in the scope you are in", probe: probe("a", { ctrl: true }), action: "selectAll" },
+  { group: "Edit", combo: "⌥A", does: "Deselect all", probe: probe("a", { alt: true }), action: "deselect" },
+  { group: "Edit", combo: "B", does: "Box select with the next drag", probe: probe("b"), action: "boxSelect" },
+  { group: "Edit", combo: "⇧D", does: "Duplicate", probe: probe("d", { shift: true }), action: "duplicate" },
+  { group: "Edit", combo: "Esc", does: "Deselect", probe: probe("Escape"), action: "deselect" },
+  { group: "Edit", combo: "Del", does: "Delete selection", probe: probe("Delete"), action: "deleteSelection" },
+  { group: "Edit", combo: "⌘G", does: "Group", probe: probe("g", { ctrl: true }), action: "group" },
+  { group: "Edit", combo: "⌘⇧G", does: "Ungroup", probe: probe("g", { ctrl: true, shift: true }), action: "ungroup" },
+  { group: "Edit", combo: "⌥L", does: "Lock / unlock", probe: probe("l", { alt: true }), action: "toggleLock" },
+  { group: "Edit", combo: "H", does: "Hide the selection", probe: probe("h"), action: "setHidden" },
+  { group: "Edit", combo: "⇧H", does: "Hide everything else", probe: probe("h", { shift: true }), action: "setHidden" },
+  { group: "Edit", combo: "⌥H", does: "Show everything again", probe: probe("h", { alt: true }), action: "setHidden" },
+  { group: "Edit", combo: "⌥G / ⌥R", does: "Clear the position / the rotation", probe: probe("g", { alt: true }), action: "clearTransform" },
+  { group: "Edit", combo: "Enter", does: "Edit inside the selection", probe: probe("Enter"), hasSelection: true, action: "enterIsolation" },
+  { group: "Edit", combo: "Esc", does: "Come back out one level", probe: probe("Escape"), isolation: true, action: "exitIsolation" },
+  { group: "Edit", combo: "Enter", does: "Finish the path you are drawing", probe: probe("Enter"), penActive: true, action: "penCommit" },
+  { group: "Edit", combo: "Esc", does: "Throw away the path you are drawing", probe: probe("Escape"), penActive: true, action: "penAbandon" },
+
+  { group: "Animate & camera", combo: "⇧A", does: "Animate mode — edits become blocks", probe: probe("a", { shift: true }), action: "animateToggle" },
+  { group: "Animate & camera", combo: "M", does: "Drop a marker at the playhead", probe: probe("m"), action: "addMarker" },
+  { group: "Animate & camera", combo: "⌥C", does: "Point the camera at the working view", probe: probe("c", { alt: true }), action: "alignCameraToView" },
+  { group: "Animate & camera", combo: "⌘B", does: "Split layer at the playhead", probe: probe("b", { ctrl: true }), action: "splitAtPlayhead" },
+  { group: "Animate & camera", combo: "⌘E", does: "Export video", probe: probe("e", { ctrl: true }), action: "openExport" },
+];
+
+const GROUPS = ["View", "Working view", "Edit", "Animate & camera"] as const;
+
+/** The sentences a first session needs, in the order a session meets them.
+ *  Mouse gestures live HERE and not in the shortcut table below, because every
+ *  row of that table is walked through the real keymap by its test — a row for
+ *  a gesture no key produces would have to carry a fake event to pass. */
+const BASICS: readonly string[] = [
+  "Camera view: scroll to pan, ctrl+scroll to zoom at the pointer, space-drag to pan.",
+  "Working view (1 / 2): drag empty space or middle-drag to orbit, scroll to dolly, space-drag or ⇧middle-drag to pan. Click a layer to select it, then G / R / S transform it Blender-style; the panels tuck away while you work.",
+  "Working view aids: a ground grid under the frame that coarsens as you pull back, three coloured world axes (X red, Y green, Z blue) through the canvas centre, and an axis ball top-right — click an end to look down that axis.",
+  "Right-click a layer, on the stage or in the outline, for duplicate, hide, lock, isolate, delete — and on a model, a material.",
+  "Models: the outline shows each one's triangle count, and tints it once the scene gets heavy enough to feel it. Give a model a surface with right-click → Apply material; a toon model also grows a sun handle you can drag to aim its key.",
+  "Double-click a layer to go INSIDE it: the working pane frames that subtree flat and head-on and everything else dims. Orbit, pan or dolly and the camera is yours; Home puts it back head-on. A blue bar over the pane says you are inside; Esc backs out one level, or click a crumb in the left panel.",
+  "Drag arms (red/green/blue) sit on the selection, or on the CAMERA when nothing is selected — the same subject G and S pick. Z moves a layer in depth; on the camera it dollies.",
+  "Header zoom, ⌘+ / ⌘− and ⇧C all act on the pane you last clicked. ⇧Z is the wireframe toggle.",
+  "Draw: arm a tool in the top bar, then drag on the stage. Text takes a click.",
+  "Animate: toggle ⇧A, then edit — the change becomes a block ending at the playhead.",
+  "Camera: use the timeline's + shot button for a move, or in the working view (1) drag the yellow frustum's edge to pan, its apex to zoom, or its arms for one axis at a time.",
+  "Audio: drop a file on the timeline's audio lane. Markers ride their clip.",
+  "Everything exports exactly as previewed — same engine, same frames.",
+];
+
+export function HelpSection() {
+  return (
+    <details className="help-section" data-testid="help-section">
+      <summary className="file-section-label help-summary">Manual</summary>
+
+      <ul className="help-basics">
+        {BASICS.map((line) => (
+          <li key={line}>{line}</li>
+        ))}
+      </ul>
+
+      <div className="file-section-label">Tools</div>
+      <ul className="help-rows">
+        {SHOT_TOOLS.map((tool) => {
+          const spec = specOf(tool);
+          return (
+            <li key={tool} className="help-row">
+              <span>{spec.label}</span>
+              {spec.key !== null && (
+                <kbd>{`${spec.shift === true ? "⇧" : ""}${spec.key.toUpperCase()}`}</kbd>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+
+      {GROUPS.map((group) => (
+        <div key={group}>
+          <div className="file-section-label">{group}</div>
+          <ul className="help-rows">
+            {SHORTCUTS.filter((row) => row.group === group).map((row) => (
+              // Keyed on the combo AND what it does: Esc and Enter each mean
+              // three things now, depending on what is open, and every one of
+              // them is a row.
+              <li key={`${row.combo}:${row.does}`} className="help-row">
+                <span>{row.does}</span>
+                <kbd>{row.combo}</kbd>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+      <p className="help-note">⌘ is Ctrl on Windows and Linux.</p>
+    </details>
+  );
+}

package/src/panels/inspector/FramingRows.tsx

@@ -0,0 +1,69 @@
+// A `Framing` as two rows of fields. ONE definition, three subjects: the
+// scene's own camera, and a move's `from` and `to`.
+//
+// It is shared rather than copied because the list IS the schema. A sixth
+// framing field would otherwise have to be remembered in two files, and the one
+// that got forgotten would silently keep an authored value the author could
+// never see or reach.
+//
+// The write is a PATCH and not a whole framing, so a caller can route it
+// straight at whichever seam owns its subject: `setSceneCamera` goes through
+// the refusal fork, `setShotFraming` does not, and this component knows about
+// neither.
+import { InspectorRow, NumberField } from "@dailies-studio/ui";
+import { MAX_FRAMING_ZOOM, MIN_FRAMING_ZOOM } from "@dailies-studio/shot/doc";
+import type { Framing } from "@dailies-studio/shot/doc";
+
+/** The five fields, in the order an author thinks about them: where it looks,
+ *  how much it sees, how it is held, what is sharp. */
+const FIELDS: ReadonlyArray<{
+  key: keyof Framing;
+  label: string;
+  unit?: string;
+  step: number;
+  min?: number;
+  max?: number;
+}> = [
+  { key: "x", label: "X", step: 1 },
+  { key: "y", label: "Y", step: 1 },
+  // Clamped at the widget as well as in the store: the store's clamp is the
+  // boundary that must hold, and this one is what stops the author typing a
+  // value that silently becomes a different one.
+  { key: "zoom", label: "Zoom", step: 0.01, min: MIN_FRAMING_ZOOM, max: MAX_FRAMING_ZOOM },
+  { key: "rollDeg", label: "Roll", unit: "deg", step: 0.5 },
+  { key: "focusZ", label: "Focus", step: 1 },
+];
+
+export function FramingRows(props: {
+  framing: Framing;
+  /** Prefixes every field's accessible name ("Camera x", "From x"). Three
+   *  framings can be on screen at once, so the label alone is not a name. */
+  name: string;
+  onCommit(patch: Partial<Framing>): void;
+}) {
+  return (
+    <>
+      {[FIELDS.slice(0, 2), FIELDS.slice(2)].map((group, i) => (
+        <InspectorRow key={i}>
+          {group.map((f) => {
+            const limits: { min?: number; max?: number } = {};
+            if (f.min !== undefined) limits.min = f.min;
+            if (f.max !== undefined) limits.max = f.max;
+            return (
+              <NumberField
+                key={f.key}
+                value={props.framing[f.key]}
+                label={f.label}
+                ariaLabel={`${props.name} ${f.label.toLowerCase()}`}
+                {...(f.unit === undefined ? {} : { unit: f.unit })}
+                {...limits}
+                step={f.step}
+                onCommit={(next) => props.onCommit({ [f.key]: next })}
+              />
+            );
+          })}
+        </InspectorRow>
+      ))}
+    </>
+  );
+}

package/src/panels/inspector/InspectorPanel.tsx

@@ -0,0 +1,178 @@
+// The right rail: Design when a layer is selected, Scene when nothing is.
+//
+// ── TWO MODE BITS, AND THE TAB ONLY MOVES ONE ───────────────────────────
+//
+// Clicking these tabs sets `inspectorMode`, which is a VIEW choice. It does NOT
+// set `animateMode`, which is a BEHAVIOUR choice and belongs to ⇧A alone.
+// Collapsing them would mean that looking at the blocks silently armed block
+// authoring on the next canvas drag — a data-corrupting surprise dressed as a
+// convenience.
+//
+// The reverse dependency DOES exist and is deliberate: turning animate ON moves
+// the tab to Animate, because the author is about to author blocks and wants to
+// see them. One way only.
+import { SegmentedControl } from "@dailies-studio/ui";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { useSelectedLayers } from "./useDocWrite.js";
+import { TransformSection } from "./design/TransformSection.js";
+import { AppearanceSection } from "./design/AppearanceSection.js";
+import { FillSection } from "./design/FillSection.js";
+import { StrokeSection } from "./design/StrokeSection.js";
+import { ShadowSection } from "./design/ShadowSection.js";
+import { CornerSection } from "./design/CornerSection.js";
+import { HtmlSection } from "./design/HtmlSection.js";
+import { TextStaggerSection, TypographySection } from "./design/TypographySection.js";
+import { MeshSection } from "./design/MeshSection.js";
+import { ClonerSection } from "./design/ClonerSection.js";
+import { MediaSection } from "./design/MediaSection.js";
+import { InstanceSection } from "./design/InstanceSection.js";
+import { ComponentSection } from "./design/ComponentSection.js";
+import { SceneSection } from "./scene/SceneSection.js";
+import { CameraSection } from "./scene/CameraSection.js";
+import { EffectsSection } from "./scene/EffectsSection.js";
+import { TransitionSection } from "./scene/TransitionSection.js";
+import { InOutPresets } from "./animate/InOutPresets.js";
+import { DuringBlocks } from "./animate/DuringBlocks.js";
+import { BlockTiming } from "./animate/BlockTiming.js";
+import { ResolvedChannels } from "./animate/ResolvedChannels.js";
+import { ShotSection } from "./animate/ShotSection.js";
+import { MarkerSection } from "./MarkerSection.js";
+import { CAMERA_ROW_ID } from "../timeline/model.js";
+
+export function InspectorPanel() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const mode = useShotEditor((s) => s.inspectorMode);
+  // The camera's row holds SHOTS, not blocks, and a shot belongs to the scene
+  // rather than to any layer. So it is the one Animate subject that does not
+  // come from the selection, and it wins: a bar the author just clicked is what
+  // they are looking at.
+  //
+  // It RESOLVES THE SHOT rather than testing the row id, because this branch
+  // replaces the whole tab: a focus that ShotSection cannot resolve would render
+  // the Animate tab as literally nothing, no placeholder and no layer sections.
+  // Two ways to get there, both reachable — focusing a bar in one scene and
+  // scrubbing into another (the panel reads the PLAYHEAD's scene), and undoing
+  // the ⇧C that created the shot the focus points at.
+  const cameraShot = useShotEditor((s) => {
+    const focused = s.selectedBlock;
+    if (focused === null || focused.layerId !== CAMERA_ROW_ID || focused.sceneId !== s.sceneId) return false;
+    return s.doc?.scenesById[focused.sceneId]?.shots.some((shot) => shot.id === focused.blockId) ?? false;
+  });
+  const layers = useSelectedLayers();
+  // THE FIRST SUBJECT, above the mode fork and above the selection. It matches
+  // `deleteSelection`'s order — marker, then block, then layers — so the panel
+  // and the Delete key can never be looking at two different things. A marker
+  // is neither a design property nor an animation, so it replaces the body
+  // rather than living in one of the tabs.
+  //
+  // It RESOLVES THE MARKER rather than testing the id for null, for the reason
+  // the camera branch below does: this replaces the whole panel, so a selection
+  // pointing at a marker that is gone would render the rail as literally
+  // nothing. Undoing the `M` that created it is the one-keystroke way there.
+  const markerSelected = useShotEditor(
+    (s) => s.selectedMarker !== null && (s.doc?.markers ?? []).some((m) => m.id === s.selectedMarker),
+  );
+  if (doc === null) return null;
+  if (markerSelected) {
+    return (
+      <aside className="inspector" data-testid="inspector">
+        <MarkerSection />
+      </aside>
+    );
+  }
+
+  return (
+    <aside className="inspector" data-testid="inspector">
+      <SegmentedControl
+        ariaLabel="Inspector mode"
+        value={mode}
+        options={[
+          { value: "design", label: "Design" },
+          { value: "animate", label: "Animate" },
+        ]}
+        onChange={(next) => store.setInspectorMode(next as "design" | "animate")}
+      />
+
+      {mode === "animate" ? (
+        cameraShot ? (
+          <ShotSection />
+        ) : layers.length === 0 ? (
+          // Nothing selected: the tab has no subject. Saying what to do beats an
+          // empty panel that reads as broken.
+          <p className="inspector-empty" data-testid="animate-placeholder">
+            Select a layer to add an entrance, an exit, or a During block.
+          </p>
+        ) : (
+          <>
+            {/* First, because it is the only thing here that describes the
+                layer rather than proposing an edit to it: what the stack adds
+                up to at this frame is the context every choice below is made
+                against. */}
+            <ResolvedChannels />
+            <InOutPresets slot="in" title="In" />
+            <DuringBlocks />
+            <InOutPresets slot="out" title="Out" />
+            {/* Last, because it is about ONE block and everything above chooses
+                which. A timing editor above the list it belongs to would read as
+                the panel's subject rather than the focused row's. */}
+            <BlockTiming />
+          </>
+        )
+      ) : layers.length === 0 ? (
+        <>
+          <SceneSection />
+          {/* Between the scene and its post stack, which is the order the
+              picture is made in: the scene, the camera looking at it, then what
+              happens to the frame after. */}
+          <CameraSection />
+          <EffectsSection />
+          {/* …and last, what happens when the frame stops being this shot's. */}
+          <TransitionSection />
+        </>
+      ) : (
+        <>
+          <TransformSection />
+          <AppearanceSection />
+          {/* Above the paint sections: a mesh's look comes from its material,
+              and `paint` is inert on it (types.ts), so the model IS the
+              subject the fills below have nothing to say about. */}
+          <MeshSection />
+          {/* Beside the model section for the same reason it sits above the
+              paint ones: an instance paints itself, so its contract IS the
+              subject and the fills below have nothing to say about it. */}
+          <InstanceSection />
+          {/* …and a component placement, for the same reason again: what it
+              draws comes from its definition, so the fills below are inert. */}
+          <ComponentSection />
+          {/* Beside the model section and above the paint ones for the same
+              reason: a cloner paints nothing of its own, so what it DOES is the
+              subject the fills below have nothing to say about. */}
+          <ClonerSection />
+          {/* Above the paint sections for the same reason the three geometry
+              sections are: a media layer PAINTS ITSELF from its asset, and
+              `paint.fill` never reaches it (the runtime asks the rasterizer
+              only for a "mask" and a "plate", and the fill branch lives in
+              neither) — so the source IS the subject the fill below has
+              nothing to say about. Corner, stroke and shadow still apply,
+              through exactly those two rasters. */}
+          <MediaSection />
+          <FillSection />
+          <StrokeSection />
+          <CornerSection />
+          <ShadowSection />
+          <TypographySection />
+          {/* Beside Typography, because it is the other kind whose content is
+              authored here rather than dragged on the stage. Below it because a
+              snippet's two fields are taller than everything above them. */}
+          <HtmlSection />
+          {/* Directly under Typography, because it says how that type moves —
+              and it is the one Design-tab section that only matters once a
+              `stagger` block exists, so it sits last and collapsed. */}
+          <TextStaggerSection />
+        </>
+      )}
+    </aside>
+  );
+}
+

package/src/panels/inspector/MarkerSection.tsx

@@ -0,0 +1,63 @@
+// The selected marker: where it is, what it says, what colour it is drawn in.
+//
+// It sits OUTSIDE the Design/Animate fork rather than inside one of the tabs. A
+// marker is neither a design property nor an animation: putting it in a tab
+// would mean the panel could be showing the wrong tab for its own subject, and
+// the author would click a diamond and see nothing.
+//
+// The FRAME field is a master frame, like every other number about a marker, and
+// it is the only place in this chrome where one is typed rather than dragged.
+import { ColorPicker, InspectorRow, InspectorSection, NumberField, TextField } from "@dailies-studio/ui";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { timecode } from "../timeline/model.js";
+import { NO_SCRUB } from "./useDocWrite.js";
+
+/** What a marker with no `color` is drawn in. The same value shotTokens.css
+ *  gives `--marker-pin`, restated here because the swatch needs a concrete
+ *  colour to show and a CSS variable is not one. */
+const DEFAULT_MARKER_COLOR = "#ffffff";
+
+export function MarkerSection() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const selected = useShotEditor((s) => s.selectedMarker);
+  if (doc === null || selected === null) return null;
+  const marker = (doc.markers ?? []).find((m) => m.id === selected);
+  if (marker === undefined) return null;
+
+  return (
+    <InspectorSection title="Marker" persistKey="shot:marker" collapsible={false}>
+      <InspectorRow label="Label">
+        <TextField
+          value={marker.label ?? ""}
+          ariaLabel="Marker label"
+          onCommit={(label) => store.setMarker(marker.id, { label })}
+        />
+      </InspectorRow>
+      <InspectorRow>
+        <NumberField
+          value={marker.frame}
+          label="Frame"
+          ariaLabel="Marker frame"
+          min={0}
+          step={1}
+          onCommit={(frame) => store.setMarker(marker.id, { frame: Math.max(0, Math.round(frame)) })}
+        />
+        <span className="insp-dim">{timecode(marker.frame, doc.fps)}</span>
+      </InspectorRow>
+      <InspectorRow label="Colour">
+        <ColorPicker
+          value={marker.color ?? DEFAULT_MARKER_COLOR}
+          ariaLabel="Marker colour"
+          scrub={NO_SCRUB}
+          commit={(color) => store.setMarker(marker.id, { color })}
+        />
+      </InspectorRow>
+      <InspectorRow>
+        <button type="button" className="btn" onClick={() => store.removeMarker(marker.id)}>
+          Delete marker
+        </button>
+      </InspectorRow>
+    </InspectorSection>
+  );
+}

package/src/panels/inspector/ParamRow.tsx

@@ -0,0 +1,71 @@
+// One preset param, spec-driven. Shared by the motion-block panel and the
+// transition panel — both drive a `TransitionParamSpec`, and two copies of a
+// widget that turns a spec into a control is two places for "vec2 means two
+// fields" to be decided differently.
+//
+// Written here rather than through `PropControl`, because that widget
+// dispatches a `ControlSpec` from @dailies-studio/contract and these are
+// `TransitionParamSpec`s — a deliberately smaller vocabulary of exactly three
+// kinds. Adapting the one into the other would be more code than the three
+// arms, and would put a lossy translation between the author and the value.
+import { InspectorRow, NumberField, Toggle } from "@dailies-studio/ui";
+import type { TransitionParamSpec } from "@dailies-studio/transitions";
+import type { Value, Vec2 } from "@dailies-studio/engine";
+
+export function ParamRow(props: {
+  spec: TransitionParamSpec;
+  value: Value;
+  onCommit(next: Value): void;
+}) {
+  const { spec } = props;
+  const label = spec.label ?? spec.name;
+  const limits: { min?: number; max?: number } = {};
+  if (spec.min !== undefined) limits.min = spec.min;
+  if (spec.max !== undefined) limits.max = spec.max;
+
+  if (spec.kind === "boolean") {
+    return (
+      <InspectorRow label={label}>
+        <Toggle
+          checked={props.value === true}
+          ariaLabel={label}
+          onChange={(next) => props.onCommit(next)}
+        />
+      </InspectorRow>
+    );
+  }
+  if (spec.kind === "vec2") {
+    const v = asVec2(props.value);
+    return (
+      <InspectorRow label={label}>
+        {([0, 1] as const).map((i) => (
+          <NumberField
+            key={i}
+            value={v[i]}
+            ariaLabel={`${label} ${i === 0 ? "X" : "Y"}`}
+            {...limits}
+            step={spec.step ?? 0.01}
+            onCommit={(next) => props.onCommit(i === 0 ? [next, v[1]] : [v[0], next])}
+          />
+        ))}
+      </InspectorRow>
+    );
+  }
+  return (
+    <InspectorRow label={label}>
+      <NumberField
+        value={typeof props.value === "number" ? props.value : 0}
+        ariaLabel={label}
+        {...limits}
+        step={spec.step ?? 0.01}
+        onCommit={(next) => props.onCommit(next)}
+      />
+    </InspectorRow>
+  );
+}
+
+function asVec2(v: Value): Vec2 {
+  return Array.isArray(v) && typeof v[0] === "number" && typeof v[1] === "number"
+    ? [v[0], v[1]]
+    : [0, 0];
+}