@dailies-studio/shot-editor 0.1.0

package/src/panels/timeline/snap.ts

@@ -0,0 +1,191 @@
+// Snapping on the master strip. PURE — no DOM, no store, no React.
+//
+// ── THE TWO RULES ────────────────────────────────────────────────────────────
+//
+// 1. IT IS ON BY DEFAULT, and a held modifier suppresses it by passing an EMPTY
+//    TARGET LIST rather than by branching around the call. One code path, so
+//    "what does a drag do" cannot have two answers, and the suppressed case is
+//    the same function with nothing to bite on.
+//
+// 2. THE RESULT IS ALWAYS AN INTEGER FRAME. Snapping to a sub-frame time would
+//    put a float back into a system whose whole invariant is integer frames over
+//    a rational fps — the same float that would then ride into a document, an
+//    export and a cache key.
+//
+// The threshold is a SCREEN distance divided by the live pixels-per-frame, so
+// the pull feels the same size at every zoom. A threshold in frames would get
+// stronger as the author zoomed out until a whole scene was one sticky point;
+// the store's layout snapping is divided by the view zoom for the same reason.
+import { sceneWindows } from "@dailies-studio/shot/doc";
+import type { Doc3D } from "@dailies-studio/shot/doc";
+import { lifespanOf } from "./model.js";
+
+/** How close a moving edge has to come, in SCREEN px. */
+export const TIMELINE_SNAP_PX = 6;
+
+export type SnapKind = "playhead" | "marker" | "scene" | "block" | "lifespan" | "audio";
+
+export interface SnapTarget {
+  /** MASTER frame. Every target in one space, because a gesture that crosses a
+   *  scene boundary has to compare a scene-2 block edge with a scene-1 one. */
+  frame: number;
+  kind: SnapKind;
+  /** What the guide would say if the UI ever labelled it. */
+  label: string;
+}
+
+export interface SnapHit {
+  /** The snapped frame, or the rounded input when nothing was near. ALWAYS an
+   *  integer. */
+  frame: number;
+  /** What it landed on, or null. Non-null is exactly the condition for drawing
+   *  a guide: a drag that merely rounded has nothing to point at. */
+  target: SnapTarget | null;
+}
+
+/** The pull distance in FRAMES at this zoom. */
+export function snapThresholdFrames(ppf: number): number {
+  return TIMELINE_SNAP_PX / Math.max(ppf, 1e-6);
+}
+
+export interface SnapScope {
+  /** The playhead, in master frames. */
+  playhead: number;
+  /**
+   * What the gesture is moving, whose own edges are NOT targets.
+   *
+   * Without it every drag is pinned at zero travel: the bar under the pointer
+   * is always exactly on its own edge, so it wins every comparison and the
+   * gesture never leaves the ground.
+   *
+   * `blockId` narrows that to the ONE bar. A lifespan drag moves the layer's bar
+   * and every block on it, so the whole layer really is in motion and none of its
+   * edges is a target. A block drag moves exactly one bar: its siblings and the
+   * layer's own lifespan stay put, and butting a During block against the In
+   * block's end — or onto the lifespan in, which is the pairing the lifespan row
+   * exists to make visible — is the most natural alignment in the lane. Excluding
+   * them buys nothing and disables it.
+   */
+  exclude?: {
+    sceneId?: string;
+    layerId?: string;
+    blockId?: string;
+    /** The audio clip a gesture is moving. Document-level, so it carries no
+     *  scene: `doc.audio` is timed on MASTER frames. */
+    audioClipId?: string;
+    /** The marker a gesture is moving. Same reason as `audioClipId`, and it is
+     *  not optional politeness: a marker sits exactly on its own target, so
+     *  without this a marker drag is pinned at zero travel. */
+    markerId?: string;
+  };
+}
+
+/**
+ * Everything a drag on the master strip may land on, in master frames.
+ *
+ * Collected ONCE at the press and held for the whole gesture — like every other
+ * value in this lane — because the document changes under a live drag and a
+ * target list that re-derived per move would include the thing being dragged.
+ *
+ * Deduped by frame, first writer wins, which makes the push order below a
+ * PRIORITY order: the playhead and the markers are what the author put there on
+ * purpose, so a guide at a frame that is also a scene boundary names the marker.
+ */
+export function collectSnapTargets(doc: Doc3D, opts: SnapScope): SnapTarget[] {
+  const out: SnapTarget[] = [];
+  const seen = new Set<number>();
+  const push = (frame: number, kind: SnapKind, label: string): void => {
+    const at = Math.round(frame);
+    if (at < 0 || seen.has(at)) return;
+    seen.add(at);
+    out.push({ frame: at, kind, label });
+  };
+
+  push(opts.playhead, "playhead", "playhead");
+  for (const marker of doc.markers ?? []) {
+    if (marker.id === opts.exclude?.markerId) continue;
+    push(marker.frame, "marker", marker.label ?? "marker");
+  }
+
+  // Audio edges are MASTER frames already, so they need no scene offset — and
+  // they come before the scene loop because landing a block on the start of the
+  // music is the alignment this lane is for.
+  for (const clip of Object.values(doc.audio)) {
+    if (clip.id === opts.exclude?.audioClipId) continue;
+    push(clip.frame, "audio", "audio in");
+    push(clip.frame + clip.durationFrames, "audio", "audio out");
+  }
+
+  for (const window of sceneWindows(doc)) {
+    const scene = doc.scenesById[window.id];
+    if (scene === undefined) continue;
+    push(window.start, "scene", `${scene.name} start`);
+    push(window.end, "scene", `${scene.name} end`);
+    for (const layer of Object.values(scene.layersById)) {
+      const moving =
+        opts.exclude?.sceneId === window.id && opts.exclude.layerId === layer.id ? opts.exclude : undefined;
+      // The whole layer only when the whole layer moves — see SnapScope.exclude.
+      if (moving !== undefined && moving.blockId === undefined) continue;
+      const life = lifespanOf(layer, scene);
+      push(window.start + life.in, "lifespan", `${layer.label} in`);
+      push(window.start + life.out, "lifespan", `${layer.label} out`);
+      for (const block of layer.blocks) {
+        if (block.id === moving?.blockId) continue;
+        push(window.start + block.frame, "block", `${layer.label} ${block.preset}`);
+        push(window.start + block.frame + block.durationFrames, "block", `${layer.label} ${block.preset} end`);
+      }
+    }
+  }
+  return out;
+}
+
+/** The nearest target within `thresholdFrames`, or the rounded input. Distance
+ *  is measured against the RAW frame, so a candidate 0.4 frames from a target
+ *  and 0.6 from another lands on the right one rather than on whichever the
+ *  rounding happened to favour. */
+export function snapFrame(
+  frame: number,
+  targets: readonly SnapTarget[],
+  thresholdFrames: number,
+): SnapHit {
+  const rounded = Math.round(frame);
+  if (!(thresholdFrames > 0)) return { frame: rounded, target: null };
+  let best: SnapTarget | null = null;
+  let bestDistance = Infinity;
+  for (const target of targets) {
+    const distance = Math.abs(target.frame - frame);
+    if (distance <= thresholdFrames && distance < bestDistance) {
+      best = target;
+      bestDistance = distance;
+    }
+  }
+  return best === null ? { frame: rounded, target: null } : { frame: best.frame, target: best };
+}
+
+/**
+ * What a row is handed at the press: give it the frame you want and it gives
+ * back the frame you get, having told the dock where to draw the guide.
+ *
+ * A closure rather than the three arguments, because the row has no business
+ * knowing the target list, the zoom or how a guide is drawn — it knows one
+ * candidate frame, which is the only part of snapping that differs per gesture.
+ */
+export type SnapPress = (
+  exclude: SnapScope["exclude"],
+  suppressed: boolean,
+) => (candidateMasterFrame: number) => number;
+
+/**
+ * Is snapping held off for this press?
+ *
+ * ⌘/ctrl, read AT THE PRESS. Every NLE defaults snapping on and gives it a
+ * hold-to-suppress rather than a toggle, and for a lane whose whole job is
+ * landing on other people's edges that polarity is the right one — the author
+ * asks for the exception, not for the rule.
+ *
+ * Structural rather than `PointerEvent`, so the pure lane stays free of the DOM
+ * and a test can hand it a literal.
+ */
+export function isSnapSuppressed(event: { metaKey: boolean; ctrlKey: boolean }): boolean {
+  return event.metaKey || event.ctrlKey;
+}

package/src/panels/toolbar/AddMenu.tsx

@@ -0,0 +1,230 @@
+// The ADD menu: the layer kinds a DRAG CANNOT EXPRESS.
+//
+// A rectangle is a box, so the rect tool is a drag. A model is a FILE, a device
+// is a CHOICE FROM A REGISTRY, and a cloner is an operation on what is already
+// selected — none of those is a rubber band, and giving each of them a tool
+// would put three buttons in the dock that all do the same thing when dragged
+// (nothing) and something else entirely when clicked.
+//
+// ── THE ROWS ARE GATED ON THE SCHEMA AT RUNTIME ─────────────────────────
+//
+// `hasLayerKind` reads `LAYER_KINDS`, so a kind removed from the document model
+// removes its row here instead of leaving a button that mints a layer nothing
+// can render. It has to be a runtime test and not `LAYER_KINDS.includes("mesh")`
+// inline: against the literal tuple that call is a TYPE error the day the kind
+// goes, which is a build nobody can ship — the menu could not degrade, only
+// fail to compile.
+//
+// ── ONE FILE INPUT, TWO PICKERS ─────────────────────────────────────────
+//
+// The model row needs one, and so does the FRAME TOOL (`image`, labelled
+// "Frame" because the file it takes may be an image or a video) — which draws
+// its box on the canvas and only then needs a file, so its geometry parks in
+// the store (`imagePick`) and is claimed here. A dialog can only be opened by a
+// click on a real `<input>`, and the store is not one.
+import { useEffect, useRef, useState } from "react";
+import { DEVICE_PRESET_IDS } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { hasLayerKind } from "../../state/insert.js";
+
+/**
+ * What the hidden input is being asked for, or null when idle.
+ *
+ * An OBJECT and not a bare string, so asking for the same kind twice is a new
+ * value: a dialog the author cancelled fires no event at all, and with a string
+ * the second "image" would be `===` the stale first one, the effect would not
+ * re-run, and the picker would silently never open again.
+ */
+type Pick = { kind: "image" | "model" };
+
+export function AddMenu() {
+  const store = useStore();
+  const imagePick = useShotEditor((s) => s.imagePick);
+  const hasSelection = useShotEditor((s) => s.selection.length > 0);
+  const canGroup = useShotEditor((s) => s.selection.length >= 2);
+  const library = useShotEditor((s) => s.library);
+  const libraryLoaded = useShotEditor((s) => s.libraryLoaded);
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [want, setWant] = useState<Pick | null>(null);
+  const fileRef = useRef<HTMLInputElement | null>(null);
+
+  // A drawn image box is waiting on a file: open the dialog for it. An EFFECT
+  // is the seam because the draw happened in the STAGE's document, so there is
+  // no click of ours to hang it off. User activation propagates from a
+  // same-origin iframe, so the dialog is still allowed to open; if a browser
+  // ever stops propagating it, the ceiling is that the image tool needs a
+  // second click here rather than anything breaking.
+  useEffect(() => {
+    if (imagePick === null) return;
+    setWant({ kind: "image" });
+  }, [imagePick]);
+
+  useEffect(() => {
+    if (want !== null) fileRef.current?.click();
+  }, [want]);
+
+  // The registry, once, when the menu first opens rather than at mount: it is
+  // an HTTP call, and a chrome that never adds a component should never make
+  // it. A failure leaves the instance rows absent (the error surfaces in the
+  // inspector, which is the surface that can say what it means for a layer).
+  useEffect(() => {
+    if (open && !libraryLoaded) void store.refreshLibrary();
+  }, [open, libraryLoaded, store]);
+
+  const report = (e: unknown): void =>
+    store.reportError(e instanceof Error ? e.message : String(e));
+
+  const chose = (file: File | null): void => {
+    const asked = want;
+    setWant(null);
+    if (asked === null) return;
+    setBusy(true);
+    const done =
+      asked.kind === "image"
+        ? store.completeImageDraw(file)
+        : file === null
+          ? Promise.resolve()
+          : store.addMeshLayer(file);
+    void done.catch(report).finally(() => setBusy(false));
+  };
+
+  // Every row is gated, so a menu with nothing left in it is not an empty
+  // popover — it is no button at all.
+  const rows: { key: string; label: string; disabled?: boolean; title?: string; run: () => void }[] = [];
+  if (hasLayerKind("mesh")) {
+    rows.push({ key: "mesh", label: "3D model…", run: () => setWant({ kind: "model" }) });
+  }
+  if (hasLayerKind("device")) {
+    // FROM THE REGISTRY, never a list written here: a hardcoded one is a second
+    // place that knows what a device is, and `validateShotDoc` refuses a preset
+    // the registry does not have — so the two disagreeing means a menu row that
+    // can only produce a document the author cannot save.
+    for (const preset of DEVICE_PRESET_IDS) {
+      rows.push({
+        key: `device:${preset}`,
+        label: preset.charAt(0).toUpperCase() + preset.slice(1),
+        run: () => store.addDeviceLayer(preset),
+      });
+    }
+  }
+  if (hasLayerKind("html")) {
+    rows.push({ key: "html", label: "Html snippet", run: () => store.addHtmlLayer() });
+  }
+  if (hasLayerKind("instance")) {
+    // FROM THE LIVE REGISTRY, filtered to the only host that can mount inside
+    // the shot's 3D canvas. Same reason the device rows come from
+    // DEVICE_PRESET_IDS: a hardcoded list would be a second place that knows
+    // what a component is, and the save gate refuses anything else — so a row
+    // offering a "dom" component could only ever produce a document the author
+    // cannot save.
+    for (const row of library.filter((r) => r.host === "three")) {
+      rows.push({
+        key: `instance:${row.id}`,
+        label: row.name,
+        title: row.id,
+        run: () => void store.addInstanceLayer(row.id).catch(report),
+      });
+    }
+  }
+  if (hasLayerKind("group")) {
+    rows.push({
+      key: "group",
+      label: "Group",
+      // The pointer twin of Ctrl/Cmd+G. Two members minimum, same floor
+      // `groupSelection` itself enforces: a one-layer group is just a layer
+      // with an extra transform nobody asked for.
+      disabled: !canGroup,
+      title: canGroup ? "Group the selection (Ctrl/Cmd+G)" : "Select two or more layers to group",
+      run: () => store.groupSelection(),
+    });
+  }
+  if (hasLayerKind("cloner")) {
+    rows.push({
+      key: "cloner",
+      label: "Cloner",
+      // No empty cloner, ever: `validateShotDoc` refuses one with no children,
+      // so the row that inserted it would be a row that breaks saving.
+      disabled: !hasSelection,
+      title: hasSelection ? "Wrap the selection in a cloner" : "Select a layer to clone first",
+      run: () => store.addClonerLayer(),
+    });
+  }
+  if (hasLayerKind("component")) {
+    rows.push({
+      key: "component",
+      label: "Component",
+      // A definition is MADE from something, exactly like a cloner: there is no
+      // empty one, because a definition with no roots is refused at the gate.
+      disabled: !hasSelection,
+      title: hasSelection
+        ? "Make the selection reusable, and leave one placement here"
+        : "Select the layers to turn into a component first",
+      run: () => store.createComponentFromSelection(),
+    });
+  }
+  if (rows.length === 0) return null;
+
+  return (
+    <div className="tool-flyout-anchor">
+      <button
+        type="button"
+        className="tool-button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        title="Add a layer at the playhead"
+        data-testid="add-menu-button"
+        disabled={busy}
+        onClick={() => setOpen((v) => !v)}
+      >
+        {busy ? "…" : "+"}
+      </button>
+      {open ? (
+        <div className="tool-flyout" role="menu" data-testid="add-menu">
+          {rows.map((row) => (
+            <button
+              key={row.key}
+              type="button"
+              role="menuitem"
+              className="tool-button"
+              disabled={row.disabled === true}
+              title={row.title ?? row.label}
+              onClick={() => {
+                setOpen(false);
+                row.run();
+              }}
+            >
+              {row.label}
+            </button>
+          ))}
+        </div>
+      ) : null}
+      <input
+        ref={fileRef}
+        className="audio-file-input"
+        type="file"
+        // EXTENSIONS, NOT `image/*` OR `video/*`. The "sniff" on the far end
+        // is a filename extension map (`KIND_BY_EXT` in cli/src/assetStore.ts),
+        // and `storeAsset` writes the bytes BEFORE the kind is consulted — so a
+        // file the picker offered and the map does not know (.mkv, .svg, .heic)
+        // is stored, then refused, leaving an orphan blob in the
+        // content-addressed store that nothing ever collects. The list is
+        // exactly what the map answers "image" or "video" for.
+        accept={
+          want?.kind === "model"
+            ? ".glb,.gltf,model/gltf-binary"
+            : ".png,.jpg,.jpeg,.webp,.avif,.gif,.mp4,.webm,.mov,.m4v," +
+              "image/png,image/jpeg,image/webp,image/avif,image/gif," +
+              "video/mp4,video/webm,video/quicktime"
+        }
+        hidden
+        data-testid="add-file-input"
+        onChange={(e) => {
+          chose(e.currentTarget.files?.[0] ?? null);
+          // Cleared so re-picking the SAME file fires change again.
+          e.currentTarget.value = "";
+        }}
+      />
+    </div>
+  );
+}

package/src/panels/toolbar/CameraViewBar.tsx

@@ -0,0 +1,70 @@
+// The camera verbs that belong to the WORKING PANE, floating over it.
+//
+// ── WHY THESE THREE ARE TOGETHER, AND WHY THEY ARE HERE ─────────────────
+//
+// A frustum you can look at but not act on is decoration. What makes a free
+// view worth having is the ROUND TRIP between it and the camera, and the round
+// trip is exactly these: point the camera at what I am looking at, keep
+// pointing it there while I move, and frame this selection. They sit over the
+// pane they act on rather than in the inspector, because the pane is where the
+// author's eyes and pointer already are.
+//
+// Mounted only while the working pane is on screen: in camera mode there is no
+// "this view" to align to, and a control that is present but meaningless is
+// worse than one that is absent.
+//
+// ── THE FOLLOW TOGGLE IS NOT CALLED A LOCK ──────────────────────────────
+//
+// Blender's long-running complaint about the equivalent toggle is that its name
+// says the opposite of what it does — nothing is locked, the camera is being
+// moved by every orbit — and that it is easy to forget it is on. So it is named
+// for what happens, it is `aria-pressed`, and the affordance that stops it
+// being forgotten is drawn INSIDE the pane (see Overlays' FollowBadge). A
+// checkbox in a panel nobody is looking at while they orbit is how the Blender
+// version gets forgotten.
+//
+// A FLOATING SIBLING of the stage, never a wrapper. See App.tsx's header.
+import { useShotEditor, useStore } from "../../state/context.js";
+
+export function CameraViewBar() {
+  const store = useStore();
+  const mode = useShotEditor((s) => s.stageLayout.mode);
+  const follows = useShotEditor((s) => s.cameraFollowsView);
+  const hasSelection = useShotEditor((s) => s.selection.length > 0);
+  const open = useShotEditor((s) => s.name !== null);
+  if (!open || mode === "camera") return null;
+
+  return (
+    <div className="camera-view-bar" role="group" aria-label="Camera" data-testid="camera-view-bar">
+      <button
+        type="button"
+        className="btn"
+        title="Point the shot camera where this view is looking (⌥C)"
+        onClick={() => store.alignCameraToWorkingView()}
+      >
+        Align camera
+      </button>
+      <button
+        type="button"
+        className={`btn${follows ? " is-armed" : ""}`}
+        aria-pressed={follows}
+        title="Keep the shot camera pointed where this view looks, while you orbit"
+        onClick={() => store.setCameraFollowsView(!follows)}
+      >
+        Follow view
+      </button>
+      <button
+        type="button"
+        className="btn"
+        // Disabled rather than refusing, because "nothing is selected" is
+        // visible on screen — a refusal message is for the cases the author
+        // cannot see, like a shot painting over the value they just wrote.
+        disabled={!hasSelection}
+        title="Frame the selected layers"
+        onClick={() => store.fitCameraToSelection()}
+      >
+        Fit to selection
+      </button>
+    </div>
+  );
+}

package/src/panels/toolbar/ShadingBar.tsx

@@ -0,0 +1,42 @@
+// How the WORKING pane draws: solid clay, wireframe, real materials, or the
+// graded render from the working camera.
+//
+// A floating sibling like ViewModeBar, and its structural twin: a table of
+// modes so glyph, label and cycle order live beside each other. It renders
+// NOTHING when the layout is camera-only — the camera pane is always the
+// graded render, so with no working pane on screen there is nothing this bar
+// addresses and an armed button over an invisible pane would be a lie.
+import { useShotEditor, useStore } from "../../state/context.js";
+import { SHADING_MODES } from "../../stage/shading.js";
+import type { ShadingMode } from "../../bridgeTypes.js";
+
+const SHADING_GLYPHS: Readonly<Record<ShadingMode, { glyph: string; label: string }>> = {
+  solid: { glyph: "◯", label: "Solid" },
+  wireframe: { glyph: "◇", label: "Wireframe" },
+  material: { glyph: "◑", label: "Material" },
+  rendered: { glyph: "✦", label: "Rendered" },
+};
+
+export function ShadingBar() {
+  const store = useStore();
+  const shading = useShotEditor((s) => s.shadingMode);
+  const layoutMode = useShotEditor((s) => s.stageLayout.mode);
+  const open = useShotEditor((s) => s.name !== null);
+  if (!open || layoutMode === "camera") return null;
+  return (
+    <div className="view-mode-bar" role="group" aria-label="Working-pane shading" data-testid="shading-bar">
+      {SHADING_MODES.map((mode) => (
+        <button
+          key={mode}
+          type="button"
+          className={`tool-button${shading === mode ? " is-armed" : ""}`}
+          aria-pressed={shading === mode}
+          title={`${SHADING_GLYPHS[mode].label} — working pane (Z cycles)`}
+          onClick={() => store.setShadingMode(mode)}
+        >
+          {SHADING_GLYPHS[mode].glyph}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/panels/toolbar/ToolDockBar.tsx

@@ -0,0 +1,110 @@
+// The tool dock: one button per DOCK_TOOLS row, plus the shape flyout.
+//
+// Everything here is derived from `TOOL_SPECS`. The icon map is keyed on
+// `DockTool` and `FlyoutTool`, so a tool added to the table without a glyph is
+// a COMPILE ERROR rather than an empty button — which is the whole reason the
+// table's surfaces are types rather than strings.
+import { useState } from "react";
+import { DOCK_TOOLS, FLYOUT_TOOLS, specOf } from "../../tools.js";
+import type { DockTool, FlyoutTool, ShotTool } from "../../tools.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { AddMenu } from "./AddMenu.js";
+
+/** Text glyphs rather than an icon set: one fewer dependency, and every one of
+ *  these is a shape the font already draws. */
+const DOCK_GLYPHS: Record<DockTool, string> = {
+  select: "▹",
+  move: "✥",
+  text: "T",
+  image: "▤",
+  rect: "▭",
+  path: "✎",
+};
+
+const FLYOUT_GLYPHS: Record<FlyoutTool, string> = {
+  ellipse: "◯",
+  line: "╱",
+  arrow: "↗",
+};
+
+export function ToolDockBar() {
+  const store = useStore();
+  const tool = useShotEditor((s) => s.tool);
+  const animateMode = useShotEditor((s) => s.animateMode);
+  const open = useShotEditor((s) => s.name !== null);
+  const [flyoutOpen, setFlyoutOpen] = useState(false);
+  if (!open) return null;
+
+  const label = (t: ShotTool): string => {
+    const spec = specOf(t);
+    const key = spec.key === null ? "" : ` (${spec.shift === true ? "⇧" : ""}${spec.key.toUpperCase()})`;
+    return `${spec.label}${key}`;
+  };
+
+  return (
+    <div className="tool-dock" role="toolbar" aria-label="Tools" data-testid="tool-dock">
+      {DOCK_TOOLS.map((t) => (
+        <button
+          key={t}
+          type="button"
+          className={`tool-button${tool === t ? " is-armed" : ""}`}
+          aria-pressed={tool === t}
+          title={label(t)}
+          onClick={() => store.setTool(t)}
+        >
+          {DOCK_GLYPHS[t]}
+        </button>
+      ))}
+
+      <div className="tool-flyout-anchor">
+        <button
+          type="button"
+          className={`tool-button${FLYOUT_TOOLS.includes(tool as FlyoutTool) ? " is-armed" : ""}`}
+          aria-haspopup="menu"
+          aria-expanded={flyoutOpen}
+          title="Shapes"
+          onClick={() => setFlyoutOpen((v) => !v)}
+        >
+          ◇
+        </button>
+        {flyoutOpen ? (
+          <div className="tool-flyout" role="menu">
+            {FLYOUT_TOOLS.map((t) => (
+              <button
+                key={t}
+                type="button"
+                role="menuitem"
+                className={`tool-button${tool === t ? " is-armed" : ""}`}
+                title={label(t)}
+                onClick={() => {
+                  store.setTool(t);
+                  setFlyoutOpen(false);
+                }}
+              >
+                {FLYOUT_GLYPHS[t]} {specOf(t).label}
+              </button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      {/* NOT a tool either, and beside the shapes for the same reason: it is
+          the kinds a DRAG CANNOT EXPRESS — a file, a registry choice, an
+          operation on the selection. See AddMenu. */}
+      <AddMenu />
+
+      {/* NOT a tool, and the separator says so. Animate changes what an edit
+          MEANS while any tool is held — see tools.ts. */}
+      <span className="tool-separator" aria-hidden="true" />
+      <button
+        type="button"
+        className={`tool-button tool-animate${animateMode ? " is-armed" : ""}`}
+        aria-pressed={animateMode}
+        title="Animate (⇧A) — a canvas edit becomes a block ending at the playhead"
+        onClick={() => store.setAnimateMode(!animateMode)}
+      >
+        ⏺
+      </button>
+    </div>
+  );
+}