@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/icons.tsx

@@ -0,0 +1,770 @@
+// THE icon set — one module, every surface (basics overhaul, Part F).
+//
+// Hand-drawn 24-viewBox strokes at 1.5, tinted by the CSS `color` of whatever
+// wraps them; sized by CSS (`.layer-kind svg`, `.layer-flag svg`, the dock's
+// own rule), never by attributes, so one rule owns the scale everywhere the
+// set appears. Still no icon dependency.
+//
+// ── ONE OF A KIND, KEYED ON THE THING ────────────────────────────────────
+//
+// `iconFor(layer)` answers by what the layer IS to an author, not by its
+// schema kind alone: a Box shows a box (kind "mesh", primitive "box"), a
+// particle emitter shows its spark (kind "instance", a curated registry id),
+// and everything else shows its kind glyph. The maps underneath are TYPED
+// records over the schema's own unions, so a new kind or primitive without a
+// glyph is a compile error rather than a fallback nobody notices — the
+// guarantee the old `Record<string, …>` claimed and never had.
+import type { ReactElement, ReactNode } from "react";
+import type {
+  Layer3D,
+  Layer3DKind,
+  MeshPrimitiveKind,
+} from "@dailies-studio/shot/doc";
+import { meshPrimitiveOf } from "@dailies-studio/shot/doc";
+import type { ElementFamily, PromotedBuiltinId } from "./addFamilies.js";
+import type { CardKind } from "./state/storyboardModel.js";
+import type { DockTool, FlyoutTool } from "./tools.js";
+
+function icon(children: ReactNode): ReactElement {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {children}
+    </svg>
+  );
+}
+
+/** One icon per layer KIND. The Figma grammar for the component family: a
+ *  lone diamond is a code-component instance, a diamond holding a smaller one
+ *  is a placement of an AUTHORED definition, and the definition itself is the
+ *  four-diamond `COMPONENT_ICON` below. */
+const KIND_ICONS: Record<Layer3DKind, ReactElement> = {
+  text: icon(<path d="M6 6h12M12 6v13" />),
+  // ONE peak, not two, and a fatter sun: at 16px the second ridge and a 1.5
+  // radius closed into a smudge that read as "some rectangle".
+  image: icon(
+    <>
+      <rect x="3.5" y="5" width="17" height="14" rx="2" />
+      <circle cx="8.5" cy="9.5" r="2" />
+      <path d="m4.5 17.5 5.5-5.5 6.5 6.5" />
+    </>,
+  ),
+  video: icon(
+    <>
+      <rect x="3.5" y="5" width="17" height="14" rx="2" />
+      <path d="M10.5 9.5v5l4-2.5z" />
+    </>,
+  ),
+  rect: icon(<rect x="4.5" y="6.5" width="15" height="11" rx="1.5" />),
+  ellipse: icon(<circle cx="12" cy="12" r="7.5" />),
+  line: icon(<path d="M5.5 18.5 18.5 5.5" />),
+  arrow: icon(<path d="M6 18 18 6M9 6h9v9" />),
+  path: icon(<path d="M4.5 19.5c7 0 8-15 15-15" />),
+  // Angle brackets: the one glyph nobody has to be told means markup.
+  html: icon(<path d="m9 8-4 4 4 4M15 8l4 4-4 4" />),
+  group: icon(
+    <>
+      <rect x="4" y="4" width="12" height="12" rx="2" />
+      <path d="M20 9v9a2 2 0 0 1-2 2H9" />
+    </>,
+  ),
+  device: icon(
+    <>
+      <rect x="7" y="3.5" width="10" height="17" rx="2" />
+      {/* A 4-wide home bar. The 3-wide one was a dot at 16px, leaving a bare
+          rounded rectangle that could not be told from `rect`. */}
+      <path d="M10 17.5h4" />
+    </>,
+  ),
+  mesh: icon(<path d="M12 3.5 19.5 8v8L12 20.5 4.5 16V8z" />),
+  cloner: icon(
+    <>
+      <rect x="4.5" y="4.5" width="6" height="6" rx="1" />
+      <rect x="13.5" y="4.5" width="6" height="6" rx="1" />
+      <rect x="4.5" y="13.5" width="6" height="6" rx="1" />
+      <rect x="13.5" y="13.5" width="6" height="6" rx="1" />
+    </>,
+  ),
+  instance: icon(<path d="m12 4 8 8-8 8-8-8z" />),
+  // The glyph that DID NOT EXIST: a component layer wore the fallback lone
+  // diamond, visually the instance grammar. A diamond holding a diamond says
+  // "a placement of a definition" without a legend.
+  component: icon(
+    <>
+      <path d="m12 4 8 8-8 8-8-8z" />
+      {/* The inner diamond is 3.5 across, not 2.5: at a 1.5 stroke the two
+          outlines merged into one thick lozenge at small sizes, which is the
+          instance glyph with a heavier edge — the exact confusion it exists to
+          prevent. */}
+      <path d="m12 8.5 3.5 3.5-3.5 3.5-3.5-3.5z" />
+    </>,
+  ),
+};
+
+/** One icon per parametric shape (schema v11) — what the outliner shows in
+ *  place of the mesh polyhedron when a mesh is a primitive. */
+export const PRIMITIVE_ICONS: Record<MeshPrimitiveKind, ReactElement> = {
+  box: icon(
+    <>
+      <path d="M12 3.5 19.5 8v8L12 20.5 4.5 16V8z" />
+      <path d="M4.5 8 12 12.5 19.5 8M12 12.5V20.5" />
+    </>,
+  ),
+  sphere: icon(
+    <>
+      <circle cx="12" cy="12" r="8" />
+      <ellipse cx="12" cy="12" rx="8" ry="3" />
+    </>,
+  ),
+  cylinder: icon(
+    <>
+      <ellipse cx="12" cy="6.5" rx="6.5" ry="2.5" />
+      <path d="M5.5 6.5v11M18.5 6.5v11M5.5 17.5a6.5 2.5 0 0 0 13 0" />
+    </>,
+  ),
+  cone: icon(
+    <>
+      <path d="M12 4 18.5 17.5M12 4 5.5 17.5" />
+      <ellipse cx="12" cy="17.5" rx="6.5" ry="2.5" />
+    </>,
+  ),
+  capsule: icon(<rect x="7" y="3.5" width="10" height="17" rx="5" />),
+  torus: icon(
+    <>
+      <circle cx="12" cy="12" r="8" />
+      <circle cx="12" cy="12" r="3" />
+    </>,
+  ),
+  pyramid: icon(
+    <>
+      <path d="M12 4l7.5 13.5H4.5z" />
+      <path d="M12 4v13.5" />
+    </>,
+  ),
+  plane: icon(
+    <>
+      <path d="M4 15.5 14.5 5 20 10.5 9.5 21z" />
+      <path d="M4 15.5h5.5V21" />
+    </>,
+  ),
+  // Endpoint handles at r2: the curve is what names this glyph, and 1.5-radius
+  // dots on a 1.5 stroke stopped reading as handles at all.
+  spline: icon(
+    <>
+      <path d="M4 18c3-10 7-12 16-12" />
+      <circle cx="4" cy="18" r="2" />
+      <circle cx="20" cy="6" r="2" />
+    </>,
+  ),
+};
+
+/** The emitter's spark. */
+const PARTICLES_ICON = icon(
+  <path d="M12 4.5v3M12 16.5v3M4.5 12h3M16.5 12h3M6.7 6.7l2.1 2.1M15.2 15.2l2.1 2.1M17.3 6.7l-2.1 2.1M8.8 15.2l-2.1 2.1" />,
+);
+
+/** The balloon cluster. */
+const BALLOONS_ICON = icon(
+  <>
+    <circle cx="9.5" cy="8" r="4" />
+    <circle cx="16" cy="10.5" r="3" />
+    <path d="M9.5 12 11 20M16 13.5l-1 6.5" />
+  </>,
+);
+
+/**
+ * The curated Generate-shelf builtins, by registry id — the same ids the Add
+ * menu promotes, which is now a fact the compiler checks rather than a comment:
+ * the literal is `satisfies Record<PromotedBuiltinId, ReactElement>`, so a
+ * promotion nobody drew a glyph for, or a glyph for an id nothing promotes, is
+ * a build error here. Anything else keeps the instance diamond.
+ *
+ * Still a MAP over plain strings at the seam, because its readers hold a
+ * `layer.instance.component` that is any string at all (`isComponentGlyph` and
+ * `iconFor` below, and test/icons.test.tsx). A `PromotedBuiltinId`-keyed Record
+ * would refuse every one of those lookups.
+ */
+export const PARTICLE_ICONS: ReadonlyMap<string, ReactElement> = new Map(
+  Object.entries({
+    "@dailies-studio/particles#ParticleEmitter": PARTICLES_ICON,
+    "@dailies-studio/particles#FoilBalloons": BALLOONS_ICON,
+  } satisfies Record<PromotedBuiltinId, ReactElement>),
+);
+
+const FALLBACK = icon(<path d="m12 6 6 6-6 6-6-6z" />);
+
+/** The kind glyph alone, for callers that hold only a kind string. Total over
+ *  garbage (an unknown kind is a fallback diamond, never a crash). */
+export function kindIcon(kind: string): ReactElement {
+  return (KIND_ICONS as Record<string, ReactElement>)[kind] ?? FALLBACK;
+}
+
+/**
+ * Does this layer wear a COMPONENT glyph — one of the diamonds?
+ *
+ * The outliner paints kind icons in neutral ink and reserves the accent for the
+ * component family, so a tree of shapes reads as shapes and the components pop
+ * out of it. This is the predicate that decides which, and it keys on the same
+ * thing `iconFor` does: a promoted particle emitter draws its spark, not a
+ * diamond, so it is NOT in the family however much its layer kind says
+ * "instance". A bare instance falls through to the lone diamond and is.
+ */
+export function isComponentGlyph(layer: Layer3D): boolean {
+  if (layer.kind === "component") return true;
+  return (
+    layer.kind === "instance" && !PARTICLE_ICONS.has(layer.instance.component)
+  );
+}
+
+/**
+ * The one-of-a-kind glyph for a LAYER: its primitive's for a shape mesh, its
+ * curated builtin's for a promoted instance, its kind's otherwise.
+ */
+export function iconFor(layer: Layer3D): ReactElement {
+  if (layer.kind === "mesh") {
+    const primitive = meshPrimitiveOf(layer.mesh);
+    if (primitive !== null)
+      return PRIMITIVE_ICONS[primitive.kind] ?? KIND_ICONS.mesh;
+  }
+  if (layer.kind === "instance") {
+    return PARTICLE_ICONS.get(layer.instance.component) ?? KIND_ICONS.instance;
+  }
+  return kindIcon(layer.kind);
+}
+
+/** The Studio workspace: a video camera, Paper's switcher glyph. */
+export const STUDIO_ICON = icon(
+  <>
+    <rect x="3" y="6" width="13" height="12" rx="2" />
+    <path d="m16 10 5-3v10l-5-3" />
+  </>,
+);
+
+/** The storyboard: a board with two dividers, the bar's three parts. */
+export const STORYBOARD_ICON = icon(
+  <>
+    <rect x="3.5" y="5" width="17" height="14" rx="2" />
+    <path d="M9 5v14M15 5v14" />
+  </>,
+);
+
+/** A note card: a page with two lines. */
+export const NOTE_ICON = icon(
+  <>
+    <path d="M6.5 4h8l4 4v12h-12z" />
+    <path d="M14.5 4v4h4M9 12h6M9 15.5h6" />
+  </>,
+);
+
+/** The board rail's Motion note: a curved path ending in an arrowhead, the
+ *  "this moves like so" mark a storyboard artist draws over a frame. */
+export const MOTION_NOTE_ICON = icon(<path d="M4 17c3-8 9-11 15-9m0 0-3.5-3M19 8l-3.5 3" />);
+
+/** The shipped library: three spines on a shelf, the third leaning, which is
+ *  what tells a shelf of books from the storyboard's board-with-dividers. */
+export const LIBRARY_ICON = icon(
+  <>
+    <path d="M4 4.5h3v15H4zM9.5 4.5h3v15h-3z" />
+    <path d="m14.6 5.6 2.9-.8 3.9 14.4-2.9.8z" />
+  </>,
+);
+
+/** A sound card: a speaker with its wave. */
+export const SOUND_ICON = icon(
+  <>
+    <path d="M4.5 9.5h3l4.5-4v13l-4.5-4h-3z" />
+    <path d="M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11" />
+  </>,
+);
+
+/** Sound mode's tempo chip: a metronome, its arm off centre. */
+export const METRONOME_ICON = icon(
+  <>
+    <path d="M9 3.5h6l4 17H5z" />
+    <path d="m12 15 5-8" />
+  </>,
+);
+
+/** A transition card: one frame sliding over the next. */
+export const TRANSITION_ICON = icon(
+  <>
+    <rect x="3.5" y="6.5" width="11" height="11" rx="1.5" />
+    <path d="M14.5 8.5h4.5a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-1.5 1.5h-9" />
+  </>,
+);
+
+/** The camera bar's other two verbs, once the words came off them (they were
+ *  three sentences costing 310px of a strip that stopped wrapping). The chain
+ *  is "keep the shot camera tied to this view while I orbit"; the four corners
+ *  are "frame the selection".
+ *
+ *  Drawn here rather than reached for from @dailies-studio/ui's `IconLink` and
+ *  `IconExpand`, which are the same two shapes: that set is a 12-unit grid at a
+ *  1.2 stroke, and beside this set's 24-unit 1.5-stroke glyphs in the SAME BAR
+ *  the two families read as two families. Same geometry, this grid. */
+export const LINK_ICON = icon(
+  <path d="M10 14 14 10M8.8 12.4 6.4 14.8a3.4 3.4 0 0 0 4.8 4.8l2.4-2.4M15.2 11.6l2.4-2.4a3.4 3.4 0 0 0-4.8-4.8L10.4 6.8" />,
+);
+
+/** The card kinds a reference draws as, reusing the layer glyphs where the
+ *  thing is the same thing: an image is an image, a video a video, a text card
+ *  the text tool, a native card the shape it names. TYPED over `CardKind`, so a
+ *  new kind without a glyph is a compile error. */
+export const REFERENCE_ICONS: Record<CardKind, ReactElement> = {
+  image: KIND_ICONS.image,
+  video: KIND_ICONS.video,
+  note: NOTE_ICON,
+  component: KIND_ICONS.instance,
+  library: LIBRARY_ICON,
+  text: KIND_ICONS.text,
+  transition: TRANSITION_ICON,
+  sound: SOUND_ICON,
+  native: KIND_ICONS.rect,
+  link: LINK_ICON,
+};
+
+/** A shot row: a clapperboard. */
+export const SCENE_ICON = icon(
+  <>
+    <rect x="3.5" y="5" width="17" height="14" rx="2" />
+    <path d="M3.5 9.5h17M9 5.5l1.5 4M14 5.5l1.5 4" />
+  </>,
+);
+
+/** The board's seven element families, TYPED over `ElementFamily` so a new
+ *  family without a glyph is a compile error. Each reuses the glyph its cards
+ *  wear, so a button and the rows it adds read as one thing. */
+export const ELEMENT_FAMILY_ICONS: Record<ElementFamily, ReactElement> = {
+  Text: KIND_ICONS.text,
+  Component: KIND_ICONS.instance,
+  Native: KIND_ICONS.rect,
+  Sound: SOUND_ICON,
+  Transition: TRANSITION_ICON,
+  Reference: KIND_ICONS.image,
+  Shot: SCENE_ICON,
+};
+
+/** A component DEFINITION: the four-diamond glyph (Figma's grammar). The gaps
+ *  carry it — four diamonds that touch are one blob — so they are spaced a
+ *  half-unit wider than the geometric packing at 3 units each. */
+export const COMPONENT_ICON = icon(
+  <path d="M12 3 15 6 12 9 9 6zM18 9l3 3-3 3-3-3zM12 15l3 3-3 3-3-3zM6 9l3 3-3 3-3-3z" />,
+);
+
+/** The camera row in the dock, and the camera subject in the inspector head.
+ *  NOT in `KIND_ICONS`: the camera is not a layer kind, it is the shot's own
+ *  eye, so a typed record over `Layer3DKind` has no slot for it. */
+export const CAMERA_ICON = icon(
+  <>
+    <path d="M3.5 8.5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2z" />
+    <path d="m13.5 12 5-3v6z" />
+  </>,
+);
+
+/**
+ * THE INSPECTOR'S SECTION GLYPHS, the leading 16px mark `InspectorSection`
+ * takes through its `icon` prop. Sized by `.insp-section-icon`, never here.
+ *
+ * Keyed on the section and not on the thing, because a section is a set of
+ * controls: "Shot & transition" holds the cut, so it wears the transition card
+ * the board's cards already wear for a cut. The camera is Paper's section
+ * glyph (a body and an open lens), redrawn on this 24 grid; it stays apart
+ * from `CAMERA_ICON`, the dock row's eye, because the section is the camera's
+ * settings and not the row. Blur is a drop, the image-editor mark for a blur
+ * tool; Postprocessing is the sparkle of an effect applied over the
+ * picture; the Project is a film strip, the whole cut.
+ */
+export const SECTION_ICONS = {
+  camera: icon(
+    <>
+      <rect x="3" y="6" width="13.5" height="12" rx="3" />
+      <path d="M16.5 9.75 21 7.5v9l-4.5-2.25" />
+    </>,
+  ),
+  project: icon(
+    <>
+      <rect x="4" y="3.5" width="16" height="17" rx="2" />
+      <path d="M8 3.5v17M16 3.5v17M4 8h4M4 12h4M4 16h4M16 8h4M16 12h4M16 16h4" />
+    </>,
+  ),
+  shot: TRANSITION_ICON,
+  blur: icon(
+    <>
+      <path d="M12 3.5c3.5 4.2 6 7.4 6 10.5a6 6 0 0 1-12 0c0-3.1 2.5-6.3 6-10.5z" />
+      <path d="M9.5 14.5A2.5 2.5 0 0 0 12 17" />
+    </>,
+  ),
+  postprocessing: icon(
+    <>
+      <path d="m11 4 1.8 4.7 4.7 1.8-4.7 1.8L11 17l-1.8-4.7-4.7-1.8 4.7-1.8z" />
+      <path d="M18.5 15.5v5M16 18h5" />
+    </>,
+  ),
+} as const satisfies Record<string, ReactElement>;
+
+/** THE OTHER HALF OF Edit | Video, and `CAMERA_ICON` above is the Video
+ *  half. The shot's own eye is already the glyph for "what the export sees".
+ *
+ *  A PENCIL AND NOT A HAND. mo1 draws its pair as hand-versus-camera because
+ *  its left mode is pan: the hand is literally what the pointer becomes. Ours
+ *  is not a navigation mode (it is select, transform, arrange and draw, with
+ *  panning available in both views), so a hand would name a gesture the mode
+ *  does not own. The pencil is the one glyph for "making the thing" that needs
+ *  no explaining.
+ *
+ *  Same 24-unit grid and 1.5 stroke as the rest of this set, which is why it is
+ *  drawn here rather than reached for from @dailies-studio/ui: that set is a
+ *  12-unit grid at 1.2, and the two families read as two families in one bar. */
+export const EDIT_ICON = icon(
+  <>
+    <path d="M4.5 19.5h4l9.5-9.5-4-4L4.5 15.5z" />
+    <path d="m14 6 4 4" />
+  </>,
+);
+
+export const FIT_ICON = icon(
+  <path d="M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5" />,
+);
+
+/** The way back, one level. Every back affordance in the chrome draws this:
+ *  the rail's head, the dock's label-column corner, the header's crumbs. */
+export const CHEVRON_LEFT_ICON = icon(<path d="M14.5 5.5 8 12l6.5 6.5" />);
+
+/** The Add verb. A glyph on the same 18px grid as the tools it sits among,
+ *  drawn here rather than left as a `+` character whose weight and baseline
+ *  came from the font.
+ *
+ *  IT IS A BARE GLYPH, which is what this comment used to deny. Its one call
+ *  site is `AddMenu`'s dock trigger: this icon, a corner caret, and no word at
+ *  all. The dock is ruled into groups now, so the rules and the caret say what
+ *  "Add" would have, and a label there costs ~30px of a strip that must not
+ *  wrap. The name is not lost — the trigger carries `aria-label="Add"` and a
+ *  `title`, which is what a glyph in this set owes a reader either way. */
+export const ADD_ICON = icon(<path d="M12 5.5v13M5.5 12h13" />);
+
+/** More: the frame header's menu of the board's verbs. Three filled dots on
+ *  the line. */
+export const MORE_ICON = icon(
+  <>
+    <circle cx="6" cy="12" r="1.4" fill="currentColor" stroke="none" />
+    <circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none" />
+    <circle cx="18" cy="12" r="1.4" fill="currentColor" stroke="none" />
+  </>,
+);
+
+/** The side panel's fold: a column and an arrow towards it. The board rail's
+ *  head draws it, and the folded rail's head flips it. */
+export const FOLD_ICON = icon(<path d="M4 4.5v15M15 7l-5 5 5 5M10 12h10" />);
+
+/** The search field's leading magnifier (the left column's outline filter).
+ *  In this family rather than the ui package's 11-grid `IconSearch`, so the
+ *  stroke matches the shot and layer glyphs in the rows under it. */
+export const SEARCH_ICON = icon(
+  <>
+    <circle cx="10.5" cy="10.5" r="6" />
+    <path d="m15 15 4.5 4.5" />
+  </>,
+);
+
+/** Animate mode: a dot in a ring, the transport grammar for "this is being
+ *  recorded". Deliberately NOT the accent — animate is a mode, not an armed
+ *  tool, and the warm colour is what says so. */
+export const RECORD_ICON = icon(
+  <>
+    <circle cx="12" cy="12" r="7.5" />
+    <circle cx="12" cy="12" r="3.5" fill="currentColor" stroke="none" />
+  </>,
+);
+
+export const EYE_ICON = icon(
+  <>
+    <path d="M3.5 12S6.5 6 12 6s8.5 6 8.5 6-3 6-8.5 6S3.5 12 3.5 12z" />
+    <circle cx="12" cy="12" r="2.5" />
+  </>,
+);
+
+export const EYE_OFF_ICON = icon(
+  <>
+    <path d="M3.5 12S6.5 6 12 6s8.5 6 8.5 6-3 6-8.5 6S3.5 12 3.5 12z" />
+    <path d="m5 4.5 14 15" />
+  </>,
+);
+
+/** A mask (gap 7, Paper page 25): a frame with the solid disc it cuts by.
+ *  The outline tints it accent on the mask's own row and ink on its group. */
+export const MASK_ICON = icon(
+  <>
+    <rect x="3" y="3" width="18" height="18" rx="3" />
+    <circle cx="12" cy="12" r="5" fill="currentColor" stroke="none" />
+  </>,
+);
+
+/** "Use as mask"'s two modes as what they read (Paper page 25): opacity
+ *  fading out, and brightness running white to black. */
+export const MASK_ALPHA_SWATCH = <span className="mask-swatch is-alpha" />;
+export const MASK_LUMA_SWATCH = <span className="mask-swatch is-luma" />;
+
+export const LOCK_ICON = icon(
+  <>
+    <rect x="5.5" y="10.5" width="13" height="9" rx="2" />
+    <path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5" />
+  </>,
+);
+
+export const UNLOCK_ICON = icon(
+  <>
+    <rect x="5.5" y="10.5" width="13" height="9" rx="2" />
+    <path d="M8.5 10.5V8a3.5 3.5 0 0 1 6.8-1.2" />
+  </>,
+);
+
+// ── the Paper redesign (2026-10-04) ──────────────────────────────────────────
+// Geometry copied from the Paper boards, drawn at this set's 1.5 stroke (some
+// boards say 1.6; one family, one weight). A Paper glyph that only redraws a
+// role this set already covers (select, image, camera, eye, lock) did not
+// replace the tuned one above; these are the roles the set lacked.
+
+/** The header's history pair, replacing the 12-grid `IconUndo`/`IconRedo`. */
+export const UNDO_ICON = icon(<path d="M9 5 4 10l5 5M4 10h9a6 6 0 0 1 0 12" />);
+export const REDO_ICON = icon(<path d="m15 5 5 5-5 5m5-5h-9a6 6 0 0 0 0 12" />);
+
+/** Export: an arrow down into a tray. */
+export const DOWNLOAD_ICON = icon(<path d="M12 3v12m-5-5 5 5 5-5M4 17v4h16v-4" />);
+
+/** Saved, and a confirmed row. */
+export const CHECK_ICON = icon(<path d="m5 12 4 4L19 6" />);
+
+export const CHEVRON_DOWN_ICON = icon(<path d="m6 9 6 6 6-6" />);
+export const CHEVRON_RIGHT_ICON = icon(<path d="m9 6 6 6-6 6" />);
+
+/** The Library's audition and preview play. The dock's transport draws the
+ *  filled `IconPlay` from @dailies-studio/ui instead. */
+export const PLAY_ICON = icon(<path d="m8 4 12 8-12 8z" />);
+export const CUBE_ICON = icon(<path d="m12 3 9 5v9l-9 5-9-5V8zm0 10v9M3 8l9 5 9-5M7 5l10 6" />);
+
+/** The transport's loop toggle. */
+export const LOOP_ICON = icon(<path d="m18 3 3 4-3 4M3 7h18m-15 6-3 4 3 4m15-4H3" />);
+/** An audition's other face (the Library's sound rows): a sound plays to its
+ *  end or is stopped, it does not hold a place to resume from. */
+export const STOP_ICON = icon(<rect x="6.5" y="6.5" width="11" height="11" rx="1.5" />);
+/** `FIT_ICON`'s corners turned inward: leave the Library's expanded preview. */
+export const COLLAPSE_ICON = icon(<path d="M3 8h5V3M16 3v5h5M8 21v-5H3M21 16h-5v5" />);
+/** The zoom track's two ends. */
+export const MINUS_ICON = icon(<path d="M5 12h14" />);
+
+/** The tool footer's Shapes trigger. NOT the last-used shape's glyph, and not
+ *  Paper's lone circle (the founder: "what is this icon for"): a circle, a
+ *  triangle and a square say "the shapes" without naming one. The bottom-right
+ *  quarter is left empty for the trigger's corner caret. */
+export const SHAPES_ICON = icon(
+  <>
+    <circle cx="7.5" cy="7.5" r="4" />
+    <path d="M7.5 13.5 12 20.5H3z" />
+    <rect x="13.5" y="3.5" width="7" height="7" rx="1" />
+  </>,
+);
+
+/** The Library rail's categories, one per catalog kind plus "all". */
+export const LIBRARY_CATEGORY_ICONS: Record<
+  "all" | "component" | "blueprint" | "material" | "shot" | "images" | "sounds" | "stock" | "generated",
+  ReactElement
+> = {
+  all: icon(
+    <>
+      <rect x="3" y="3" width="7" height="7" rx="1" />
+      <rect x="14" y="3" width="7" height="7" rx="1" />
+      <rect x="3" y="14" width="7" height="7" rx="1" />
+      <rect x="14" y="14" width="7" height="7" rx="1" />
+    </>,
+  ),
+  component: icon(<path d="m12 3 9 9-9 9-9-9zm0 5 4 4-4 4-4-4z" />),
+  blueprint: icon(
+    <>
+      <rect x="3" y="3" width="5" height="5" rx="1" />
+      <rect x="16" y="16" width="5" height="5" rx="1" />
+      <path d="M8 5h9v11M5 8v9h11" />
+    </>,
+  ),
+  material: icon(
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 3v18M4 8h8M3 12h9M4 16h8" />
+    </>,
+  ),
+  shot: icon(
+    <>
+      <rect x="3" y="5" width="18" height="15" rx="2" />
+      <path d="M3 9h18M7 5l3 4M14 5l3 4m-7 3 5 3-5 3z" />
+    </>,
+  ),
+  images: icon(
+    <>
+      <rect x="3" y="4" width="18" height="16" rx="2" />
+      <circle cx="8" cy="9" r="1.5" />
+      <path d="m4 18 5-5 4 3 3-5 4 7" />
+    </>,
+  ),
+  sounds: icon(<path d="M3 10v4M7 6v12M12 3v18M17 7v10M21 10v4" />),
+  // The sound history: what this workspace generated, a sparkle over a wave.
+  generated: icon(
+    <>
+      <path d="M3 14v3M7 11v9M11 13v5" />
+      <path d="M17 3l1.2 2.8L21 7l-2.8 1.2L17 11l-1.2-2.8L13 7l2.8-1.2z" />
+    </>,
+  ),
+  // Openverse's sounds, from the open web: a globe.
+  stock: icon(
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M3 12h18M12 3c2.4 2.5 3.6 5.5 3.6 9s-1.2 6.5-3.6 9c-2.4-2.5-3.6-5.5-3.6-9S9.6 5.5 12 3Z" />
+    </>,
+  ),
+};
+
+// ── the tool dock ────────────────────────────────────────────────────────────
+// SVGs where text glyphs used to be, keeping the typed-map compile guarantee:
+// a dock tool added to tools.ts without a glyph here does not build.
+
+const SELECT_ICON = icon(
+  <path d="M6.5 4.5 18 11.5l-5 .8 2.8 5.5-2.6 1.3-2.8-5.5-3.4 3.4z" />,
+);
+
+const PEN_ICON = icon(
+  <>
+    <path d="m4.5 19.5 2-6L15 5l4 4-8.5 8.5z" />
+    <path d="m13 7 4 4" />
+  </>,
+);
+
+const SPLINE_ICON = icon(
+  <>
+    <path d="M3.5 17.5C8 17.5 8 6.5 13 6.5s4 8 7.5 8" />
+    <circle cx="3.5" cy="17.5" r="1.5" />
+    <circle cx="13" cy="6.5" r="1.5" />
+    <circle cx="20.5" cy="14.5" r="1.5" />
+  </>,
+);
+
+export const DOCK_TOOL_ICONS: Record<DockTool, ReactElement> = {
+  select: SELECT_ICON,
+  text: KIND_ICONS.text,
+  image: KIND_ICONS.image,
+  rect: KIND_ICONS.rect,
+  path: PEN_ICON,
+  spline: SPLINE_ICON,
+};
+
+export const FLYOUT_TOOL_ICONS: Record<FlyoutTool, ReactElement> = {
+  ellipse: KIND_ICONS.ellipse,
+  line: KIND_ICONS.line,
+  arrow: KIND_ICONS.arrow,
+};
+
+/** An Add row's glyph, keyed on what the row makes (`AddRow.key`). Shared by
+ *  the board's tool rail and the Insert drawer's Basics tiles. */
+export function addRowIcon(key: string): ReactElement {
+  if (key === "media") return KIND_ICONS.image;
+  if (key.startsWith("shape:")) return PRIMITIVE_ICONS[key.slice(6) as MeshPrimitiveKind] ?? CUBE_ICON;
+  if (key === "mesh") return MODEL_FILE_ICON;
+  if (key === "device:browser") return BROWSER_ICON;
+  if (key.startsWith("device:")) return kindIcon("device");
+  if (key.startsWith("instance:")) return PARTICLE_ICONS.get(key.slice(9)) ?? kindIcon("instance");
+  if (key.startsWith("def:")) return COMPONENT_ICON;
+  return kindIcon(key);
+}
+
+// ── the Insert drawer ────────────────────────────────────────────────────────
+
+export const CLOSE_ICON = icon(<path d="M18 6 6 18M6 6l12 12" />);
+
+/** Lucide's `sparkles` (ISC), the inspector's "Shader background…" button. */
+export const SPARKLES_ICON = icon(
+  <>
+    <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" />
+    <path d="M20 2v4M22 4h-4" />
+    <circle cx="4" cy="20" r="2" />
+  </>,
+);
+
+/** Lucide's `file-box` (ISC): the Insert drawer's "3D model…", a file that
+ *  holds a solid. */
+const MODEL_FILE_ICON = icon(
+  <>
+    <path d="M14.5 22H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
+    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+    <path d="M3 13.1a2 2 0 0 0-1 1.76v3.24a2 2 0 0 0 .97 1.78L6 21.7a2 2 0 0 0 2.03.01L11 19.9a2 2 0 0 0 1-1.76V14.9a2 2 0 0 0-.97-1.78L8 11.3a2 2 0 0 0-2.03-.01Z" />
+    <path d="M7 17v5M11.7 14.2 7 17l-4.7-2.8" />
+  </>,
+);
+
+/** Lucide's `app-window` (ISC): the browser device preset. */
+const BROWSER_ICON = icon(
+  <>
+    <rect x="2" y="4" width="20" height="16" rx="2" />
+    <path d="M10 4v4M2 8h20M6 4v4" />
+  </>,
+);
+
+/** Lucide's `image-up` (ISC): "Use as background", a picture sent behind. */
+export const IMAGE_UP_ICON = icon(
+  <>
+    <path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21" />
+    <path d="m14 19 3 3v-5.5M17 22l3-3" />
+    <circle cx="9" cy="9" r="2" />
+  </>,
+);
+
+/** A shader category's glyph, the tile a thumb-less effect shows. Keyed on
+ *  the catalog's `EffectCategory`; an unknown one draws sparkles. */
+const EFFECT_CATEGORY_ICONS: Readonly<Record<string, ReactElement>> = {
+  gradients: icon(
+    <>
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M3 15 21 7M3 21 21 13" />
+    </>,
+  ),
+  noise: icon(<path d="M4 6h.01M9 4h.01M15 6h.01M20 4h.01M6 11h.01M12 10h.01M18 12h.01M4 17h.01M10 16h.01M15 19h.01M20 17h.01" />),
+  patterns: LIBRARY_CATEGORY_ICONS.all,
+  organic: icon(<path d="M12 21c-5-3-8-7-8-11a8 8 0 0 1 16 0c0 4-3 8-8 11Zm0-15v15" />),
+  space: icon(
+    <>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M3.5 15.5C2 18 3 19.5 6 19c3.5-.6 8.2-3.4 11.6-6.8C21 8.8 22.3 5.8 20.2 5c-1.1-.4-2.8 0-4.7.8" />
+    </>,
+  ),
+  material: LIBRARY_CATEGORY_ICONS.material,
+  decor: SPARKLES_ICON,
+};
+
+export function effectCategoryIcon(category: string): ReactElement {
+  return EFFECT_CATEGORY_ICONS[category] ?? SPARKLES_ICON;
+}
+
+/** The canvas bar's Panels menu (Lucide `panels-top-left`): the window's
+ *  three docked regions in one glyph, for the one trigger that shows them. */
+export const PANELS_ICON = icon(
+  <>
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+    <path d="M3 9h18M9 21V9" />
+  </>,
+);
+
+/** The Brief's "Open shot board" (Lucide `arrow-up-right`): it goes elsewhere. */
+export const OPEN_ELSEWHERE_ICON = icon(<path d="M7 17 17 7M8 7h9v9" />);
+
+/** The Brief's "Lay out Sketch N" (Paper SB6): two squares over a wide block,
+ *  a sketch turned into layers. */
+export const LAY_OUT_ICON = icon(
+  <>
+    <rect width="7" height="7" x="3" y="3" rx="1" />
+    <rect width="7" height="7" x="14" y="3" rx="1" />
+    <rect width="18" height="7" x="3" y="14" rx="1" />
+  </>,
+);