@pixerate/editor-react 0.44.0 → 0.46.0

package/dist/animation-editor/index.js

@@ -48,22 +48,28 @@ function useAnimationEditorTools(registry, controller, options = {}) {
 
 // src/animation-editor/AnimationStage.tsx
 import { useMemo as useMemo2 } from "react";
+import { highlightMotionSvg, motionNodeAtElement } from "@pixerate/editor/animation-editor";
 import { jsx } from "react/jsx-runtime";
-function AnimationStage({ controller, values, onionSkin, motionPaths, className = "" }) {
+function AnimationStage({ controller, values, onionSkin, motionPaths, onPick, highlight, className = "" }) {
   const state = useAnimationEditorState(controller);
   const { scene, time } = state;
+  const key = highlight?.join("\0") ?? "";
   const svg = useMemo2(
-    () => controller.toSvg(time, { pretty: false, idPrefix: "ae-", values, onionSkin, motionPaths }).replace(/<svg ([^>]*?)width="[^"]*" height="[^"]*"/, '<svg $1width="100%" height="100%"'),
-    [controller, scene, time, values, onionSkin, motionPaths]
+    () => highlightMotionSvg(
+      controller.toSvg(time, { pretty: false, idPrefix: "ae-", values, onionSkin, motionPaths }).replace(/<svg ([^>]*?)width="[^"]*" height="[^"]*"/, '<svg $1width="100%" height="100%"'),
+      highlight ?? []
+    ),
+    [controller, scene, time, values, onionSkin, motionPaths, key]
   );
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `relative overflow-hidden ${className}`,
+      className: `relative overflow-hidden ${onPick ? "cursor-crosshair" : ""} ${className}`,
       style: { aspectRatio: `${scene.artwork.width} / ${scene.artwork.height}` },
       "data-animation-stage": "",
       role: "img",
       "aria-label": `${scene.name} at ${(time / 1e3).toFixed(2)} s`,
+      onClick: onPick ? (e) => onPick(motionNodeAtElement(scene, e.target, e.currentTarget), e) : void 0,
       dangerouslySetInnerHTML: { __html: svg }
     }
   );
@@ -140,19 +146,866 @@ function ShotTimeline({ controller, className = "" }) {
 }
 
 // src/animation-editor/AnimationEditor.tsx
-import { motionIssueLine } from "@pixerate/editor/animation-editor";
+import { useMemo as useMemo6, useState as useState6 } from "react";
+import { indexMotionNodes, motionIssueLine } from "@pixerate/editor/animation-editor";
+
+// src/animation-editor/CommandInspector.tsx
+import React3, { useMemo as useMemo4, useState } from "react";
+import {
+  describeMotionElements,
+  motionCommandFields,
+  motionFieldEdit,
+  motionFlairPrimitive
+} from "@pixerate/editor/animation-editor";
+
+// src/animation-editor/EasePicker.tsx
+import { useMemo as useMemo3 } from "react";
+import { MOTION_EASE_CHOICES, motionEaseKey, motionEasingCurve, motionEasingGuides, motionEasingPath } from "@pixerate/editor/animation-editor";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function AnimationEditor({ controller, values, onionSkin, motionPaths, showIssues = true, className = "" }) {
-  const { issues } = useAnimationEditorState(controller);
-  return /* @__PURE__ */ jsxs2("div", { className: `flex flex-col gap-2 ${className}`, "data-animation-editor": "", children: [
-    /* @__PURE__ */ jsx3(AnimationStage, { controller, values, onionSkin, motionPaths, className: "rounded-md border border-border bg-muted/40" }),
-    /* @__PURE__ */ jsx3(ShotTimeline, { controller }),
-    showIssues && issues.length > 0 && /* @__PURE__ */ jsx3("ul", { className: "space-y-0.5 text-xs", "aria-label": "Animation issues", children: issues.map((issue, i) => /* @__PURE__ */ jsx3("li", { className: issue.severity === "error" ? "text-red-500" : issue.severity === "warning" ? "text-amber-500" : "text-muted-foreground", children: motionIssueLine(issue) }, i)) })
+var W = 72;
+var H = 44;
+function EasePicker({ value, onChange, disabled, className = "" }) {
+  const key = motionEaseKey(value);
+  const curve = useMemo3(() => motionEasingCurve(value ?? "ease-out"), [value]);
+  const guides = motionEasingGuides(curve, H);
+  const spring = typeof value === "string" ? value.startsWith("spring") : value?.type === "spring";
+  return /* @__PURE__ */ jsxs2("div", { className: `flex items-center gap-2 ${className}`, "data-ease-picker": "", children: [
+    /* @__PURE__ */ jsxs2(
+      "select",
+      {
+        className: "min-w-0 flex-1 rounded border border-border bg-transparent px-1 py-0.5 text-xs",
+        "aria-label": "Ease",
+        value: key,
+        disabled,
+        onChange: (e) => {
+          if (e.target.value === "custom") return;
+          onChange(e.target.value ? e.target.value : void 0);
+        },
+        children: [
+          MOTION_EASE_CHOICES.map((c) => /* @__PURE__ */ jsx3("option", { value: c.value, children: c.label }, c.value)),
+          key === "custom" && /* @__PURE__ */ jsx3("option", { value: "custom", children: "Custom" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs2("svg", { width: W, height: H, viewBox: `0 0 ${W} ${H}`, className: "shrink-0 rounded border border-border", "data-ease-curve": key || "default", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx3("line", { x1: 0, x2: W, y1: guides.zero, y2: guides.zero, stroke: "currentColor", strokeOpacity: 0.2 }),
+      /* @__PURE__ */ jsx3("line", { x1: 0, x2: W, y1: guides.one, y2: guides.one, stroke: "currentColor", strokeOpacity: 0.2, strokeDasharray: "2 2" }),
+      /* @__PURE__ */ jsx3("path", { d: motionEasingPath(curve, W, H), fill: "none", stroke: "#f43f5e", strokeWidth: 1.5 })
+    ] }),
+    spring && /* @__PURE__ */ jsxs2("span", { className: "text-[10px] tabular-nums text-muted-foreground", children: [
+      Math.round(curve.durationMs),
+      " ms"
+    ] })
+  ] });
+}
+
+// src/animation-editor/CommitInput.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function CommitInput({ value, onCommit, ...rest }) {
+  return /* @__PURE__ */ jsx4(
+    "input",
+    {
+      ...rest,
+      defaultValue: value,
+      onKeyDown: (e) => e.key === "Enter" && e.currentTarget.blur(),
+      onBlur: (e) => {
+        if (e.currentTarget.value !== value) onCommit(e.currentTarget.value);
+      }
+    },
+    value
+  );
+}
+
+// src/animation-editor/CommandInspector.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var input = "w-full min-w-0 rounded border border-border bg-transparent px-1 py-0.5 text-xs";
+function CommandInspector({ controller, picked, className = "" }) {
+  const state = useAnimationEditorState(controller);
+  const { scene, selection, readOnly, error } = state;
+  const [local, setLocalState] = useState(null);
+  const setLocal = (text) => setLocalState(text ? { text, revision: state.revision } : null);
+  const elements = useMemo4(() => describeMotionElements(scene), [scene.artwork]);
+  const shot = selection ? scene.shots.find((s) => s.id === selection.shot) : void 0;
+  const index = selection?.command;
+  const command = shot && index !== void 0 ? shot.run[index] : void 0;
+  if (!shot || index === void 0 || !command) {
+    return /* @__PURE__ */ jsx5("div", { className: `text-xs text-muted-foreground ${className}`, "data-command-inspector": "", children: "Select a command to edit it." });
+  }
+  const values = command;
+  const fields = motionCommandFields(command.type);
+  const primitive = motionFlairPrimitive(command);
+  const commit = (field, raw) => {
+    const edit = motionFieldEdit(shot.id, index, field, raw);
+    if ("error" in edit) return setLocal(edit.error);
+    setLocal(null);
+    controller.apply(edit, `Set ${field.label.toLowerCase()}`);
+  };
+  const name = (id) => elements.find((e) => e.id === id)?.name ?? id;
+  const targets = values.targets ?? [];
+  const message = (local && local.revision === state.revision ? local.text : null) ?? error;
+  const control = (field) => {
+    const v = values[field.name];
+    const common = { disabled: readOnly, "aria-label": field.label, title: field.description };
+    switch (field.kind) {
+      case "targets":
+        return /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-1", "data-targets": "", children: [
+          targets.map((id) => /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-0.5 rounded bg-muted px-1 text-[11px]", "data-target": id, children: [
+            name(id),
+            !readOnly && targets.length > 1 && /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": `Remove ${id}`, onClick: () => commit(field, targets.filter((t) => t !== id)), children: "\xD7" })
+          ] }, id)),
+          !readOnly && picked && !targets.includes(picked) && /* @__PURE__ */ jsxs3("button", { type: "button", className: "rounded border border-rose-500 px-1 text-[11px] text-rose-500", onClick: () => commit(field, [...targets, picked]), "data-add-picked": "", children: [
+            "+ ",
+            name(picked)
+          ] }),
+          !readOnly && /* @__PURE__ */ jsxs3("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-[11px]", "aria-label": "Add target", value: "", onChange: (e) => e.target.value && commit(field, [...targets, e.target.value]), children: [
+            /* @__PURE__ */ jsx5("option", { value: "", children: "+ target\u2026" }),
+            elements.filter((e) => !targets.includes(e.id)).map((e) => /* @__PURE__ */ jsx5("option", { value: e.id, children: e.name ? `${e.name} (${e.id})` : e.id }, e.id))
+          ] })
+        ] });
+      case "node":
+        return /* @__PURE__ */ jsxs3("select", { className: input, ...common, value: typeof v === "string" ? v : "", onChange: (e) => commit(field, e.target.value), children: [
+          !field.required && /* @__PURE__ */ jsx5("option", { value: "", children: "\u2014" }),
+          elements.filter((e) => field.name !== "path" || e.type === "path").map((e) => /* @__PURE__ */ jsxs3("option", { value: e.id, children: [
+            e.name ? `${e.name} (${e.id})` : e.id,
+            e.hidden ? " \xB7 hidden" : ""
+          ] }, e.id))
+        ] });
+      case "enum":
+        return /* @__PURE__ */ jsxs3("select", { className: input, ...common, value: typeof v === "string" ? v : "", onChange: (e) => commit(field, e.target.value), children: [
+          !field.required && /* @__PURE__ */ jsx5("option", { value: "", children: "default" }),
+          field.options.map((o) => /* @__PURE__ */ jsx5("option", { value: o, children: o }, o))
+        ] });
+      case "boolean":
+        return /* @__PURE__ */ jsx5("input", { type: "checkbox", ...common, checked: v === true, onChange: (e) => commit(field, e.target.checked) });
+      case "ease":
+        return /* @__PURE__ */ jsx5(EasePicker, { value: v, disabled: readOnly, onChange: (ease) => commit(field, ease === void 0 ? "" : ease) });
+      case "color":
+        return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx5("input", { type: "color", disabled: readOnly, "aria-label": `${field.label} swatch`, value: typeof v === "string" && /^#[0-9a-f]{6}$/i.test(v) ? v : "#000000", onChange: (e) => commit(field, e.target.value) }),
+          /* @__PURE__ */ jsx5(CommitInput, { className: input, ...common, value: typeof v === "string" ? v : "", placeholder: "unchanged", onCommit: (raw) => commit(field, raw) })
+        ] });
+      case "point": {
+        const p = v ?? void 0;
+        return /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-1", children: ["x", "y"].map((axis) => /* @__PURE__ */ jsx5(
+          CommitInput,
+          {
+            className: input,
+            type: "number",
+            disabled: readOnly,
+            "aria-label": `${field.label} ${axis}`,
+            placeholder: axis,
+            value: p ? String(p[axis]) : "",
+            onCommit: (raw) => commit(field, axis === "x" ? { x: raw, y: p ? String(p.y) : raw ? "0" : "" } : { x: p ? String(p.x) : raw ? "0" : "", y: raw })
+          },
+          axis
+        )) });
+      }
+      case "scale":
+      case "number":
+      case "integer":
+        return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx5(
+            CommitInput,
+            {
+              className: input,
+              type: "number",
+              ...common,
+              min: field.min,
+              max: field.max,
+              step: field.kind === "integer" ? 1 : field.unit === "ms" ? 50 : field.unit === "0\u20131" ? 0.05 : "any",
+              placeholder: "default",
+              value: typeof v === "number" ? String(v) : "",
+              onCommit: (raw) => commit(field, raw)
+            }
+          ),
+          field.unit && /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: field.unit })
+        ] });
+      default:
+        return /* @__PURE__ */ jsx5(CommitInput, { className: input, ...common, value: typeof v === "string" ? v : "", onCommit: (raw) => commit(field, raw) });
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: `flex flex-col gap-1.5 text-xs ${className}`, "data-command-inspector": "", "data-command-type": command.type, children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs3("span", { className: "font-medium", children: [
+        index + 1,
+        ". ",
+        command.type
+      ] }),
+      primitive ? /* @__PURE__ */ jsx5("code", { className: "rounded bg-muted px-1 text-[10px]", "data-flair-primitive": primitive, title: "The Flair motion primitive this command plays", children: primitive }) : /* @__PURE__ */ jsx5("span", { className: "text-[10px] text-muted-foreground", children: "editor-only (no Flair primitive)" })
+    ] }),
+    ["main", "timing"].map((group) => /* @__PURE__ */ jsxs3("fieldset", { className: "grid grid-cols-[6.5rem_1fr] items-center gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ jsx5("legend", { className: "mb-1 text-[10px] uppercase tracking-wide text-muted-foreground", children: group === "main" ? "Command" : "Timing" }),
+      fields.filter((f) => f.group === group).map((field) => /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
+        /* @__PURE__ */ jsxs3("label", { className: "truncate text-muted-foreground", title: field.description, children: [
+          field.label,
+          field.required ? " *" : ""
+        ] }),
+        /* @__PURE__ */ jsx5("div", { "data-field": field.name, children: control(field) })
+      ] }, field.name))
+    ] }, group)),
+    message && /* @__PURE__ */ jsx5("p", { className: "text-red-500", role: "alert", "data-edit-error": "", children: message })
+  ] });
+}
+
+// src/animation-editor/CommandList.tsx
+import { useState as useState2 } from "react";
+import {
+  MOTION_COMMAND_TYPES,
+  defaultMotionCommand,
+  duplicateMotionCommandEdit,
+  motionCommandRows
+} from "@pixerate/editor/animation-editor";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var btn = "rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40";
+function CommandList({ controller, shot, targets, className = "" }) {
+  const state = useAnimationEditorState(controller);
+  const { scene, selection, readOnly, error } = state;
+  const shotId = shot ?? selection?.shot ?? scene.shots[0]?.id;
+  const current = scene.shots.find((s) => s.id === shotId);
+  const [type, setType] = useState2("enter");
+  const [local, setLocalState] = useState2(null);
+  const setLocal = (text) => setLocalState(text ? { text, revision: state.revision } : null);
+  if (!current) return /* @__PURE__ */ jsx6("div", { className: `text-xs text-muted-foreground ${className}`, "data-command-list": "", children: "Add a shot to start." });
+  const rows = motionCommandRows(scene, current.id);
+  const selected = selection?.shot === current.id ? selection.command : void 0;
+  const run = (edit, label) => {
+    setLocal(null);
+    return controller.apply(edit, label);
+  };
+  const add = () => {
+    const from = targets?.length ? targets : selected !== void 0 ? current.run[selected].targets ?? [] : [];
+    const command = defaultMotionCommand(type, from, scene);
+    if ("error" in command) return setLocal(command.error);
+    const at = selected !== void 0 ? selected + 1 : current.run.length;
+    const result = run({ op: "add_commands", shot: current.id, commands: [command], at }, `Add ${type}`);
+    if (result.ok) controller.select({ shot: current.id, command: at });
+  };
+  const message = (local && local.revision === state.revision ? local.text : null) ?? error;
+  return /* @__PURE__ */ jsxs4("div", { className: `flex flex-col gap-1 text-xs ${className}`, "data-command-list": "", "data-for-shot": current.id, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "font-medium", children: [
+      "Commands in ",
+      /* @__PURE__ */ jsx6("span", { className: "text-rose-500", children: current.label ?? current.id })
+    ] }),
+    /* @__PURE__ */ jsx6("ol", { className: "flex flex-col gap-1", "aria-label": "Commands", children: rows.map((row) => {
+      const c = row.command;
+      const isSelected = row.index === selected;
+      return /* @__PURE__ */ jsxs4(
+        "li",
+        {
+          className: `flex flex-wrap items-center gap-1 rounded border px-1.5 py-1 ${isSelected ? "border-rose-500 bg-rose-500/10" : "border-border"}`,
+          "data-command": row.index,
+          "data-selected": isSelected || void 0,
+          onClick: () => controller.select({ shot: current.id, command: row.index }),
+          children: [
+            /* @__PURE__ */ jsxs4("span", { className: "min-w-0 flex-1 truncate", title: row.summary, children: [
+              row.index + 1,
+              ". ",
+              row.summary
+            ] }),
+            row.flairPrimitive && /* @__PURE__ */ jsx6("code", { className: "rounded bg-muted px-1 text-[10px] text-muted-foreground", "data-flair-primitive": row.flairPrimitive, children: row.flairPrimitive }),
+            /* @__PURE__ */ jsxs4("span", { className: "tabular-nums text-[10px] text-muted-foreground", children: [
+              ((row.end - row.start) / 1e3).toFixed(2),
+              " s"
+            ] }),
+            /* @__PURE__ */ jsxs4("div", { className: "flex w-full items-center gap-1", onClick: (e) => e.stopPropagation(), children: [
+              /* @__PURE__ */ jsxs4(
+                "select",
+                {
+                  className: "rounded border border-border bg-transparent px-1 py-0.5 text-[11px]",
+                  "aria-label": "Starts",
+                  value: c.with ?? "after",
+                  disabled: readOnly || row.index === 0,
+                  onChange: (e) => run(
+                    e.target.value === "after" ? { op: "update_command", shot: current.id, command: row.index, remove: ["with"] } : { op: "update_command", shot: current.id, command: row.index, set: { with: e.target.value } },
+                    "Change start"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx6("option", { value: "after", children: "after previous" }),
+                    /* @__PURE__ */ jsx6("option", { value: "previous", children: "with previous" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-0.5 text-muted-foreground", children: [
+                "+",
+                /* @__PURE__ */ jsx6(
+                  "input",
+                  {
+                    className: "w-14 rounded border border-border bg-transparent px-1 py-0.5 text-[11px] tabular-nums",
+                    type: "number",
+                    min: 0,
+                    step: 50,
+                    "aria-label": "Delay",
+                    placeholder: "0",
+                    defaultValue: c.delay ?? "",
+                    disabled: readOnly,
+                    onKeyDown: (e) => e.key === "Enter" && e.currentTarget.blur(),
+                    onBlur: (e) => {
+                      const raw = e.currentTarget.value.trim();
+                      if (raw === String(c.delay ?? "")) return;
+                      const n = Number(raw);
+                      if (raw && !(Number.isFinite(n) && n >= 0)) return setLocal("Delay must be a number of ms, 0 or more.");
+                      run(raw && n > 0 ? { op: "update_command", shot: current.id, command: row.index, set: { delay: n } } : { op: "update_command", shot: current.id, command: row.index, remove: ["delay"] }, "Change delay");
+                    }
+                  },
+                  String(c.delay ?? "")
+                ),
+                "ms"
+              ] }),
+              /* @__PURE__ */ jsxs4("span", { className: "ml-auto flex gap-0.5", children: [
+                /* @__PURE__ */ jsx6("button", { type: "button", className: btn, "aria-label": "Move up", disabled: readOnly || row.index === 0, onClick: () => run({ op: "move_command", shot: current.id, command: row.index, to: row.index - 1 }, "Move command").ok && controller.select({ shot: current.id, command: row.index - 1 }), children: "\u2191" }),
+                /* @__PURE__ */ jsx6("button", { type: "button", className: btn, "aria-label": "Move down", disabled: readOnly || row.index === rows.length - 1, onClick: () => run({ op: "move_command", shot: current.id, command: row.index, to: row.index + 1 }, "Move command").ok && controller.select({ shot: current.id, command: row.index + 1 }), children: "\u2193" }),
+                /* @__PURE__ */ jsx6("button", { type: "button", className: btn, "aria-label": "Duplicate", disabled: readOnly, onClick: () => run(duplicateMotionCommandEdit(scene, current.id, row.index), "Duplicate command").ok && controller.select({ shot: current.id, command: row.index + 1 }), children: "\u29C9" }),
+                /* @__PURE__ */ jsx6("button", { type: "button", className: btn, "aria-label": "Delete", disabled: readOnly, onClick: () => run({ op: "delete_commands", shot: current.id, commands: [row.index] }, "Delete command"), children: "\u2715" })
+              ] })
+            ] })
+          ]
+        },
+        `${row.index}:${row.summary}`
+      );
+    }) }),
+    !readOnly && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx6("select", { className: "flex-1 rounded border border-border bg-transparent px-1 py-0.5", "aria-label": "New command type", value: type, onChange: (e) => setType(e.target.value), children: MOTION_COMMAND_TYPES.map((t) => /* @__PURE__ */ jsx6("option", { value: t, children: t }, t)) }),
+      /* @__PURE__ */ jsx6("button", { type: "button", className: btn, onClick: add, "data-add-command": "", children: "Add command" })
+    ] }),
+    message && /* @__PURE__ */ jsx6("p", { className: "text-red-500", role: "alert", "data-edit-error": "", children: message })
+  ] });
+}
+
+// src/animation-editor/PlayheadScrubber.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { motionBeatTime, motionCueTime, motionRulerTicks } from "@pixerate/editor/animation-editor";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var seconds2 = (ms) => `${(ms / 1e3).toFixed(2)} s`;
+function worst2(issues) {
+  if (issues.some((i) => i.severity === "error")) return "error";
+  if (issues.some((i) => i.severity === "warning")) return "warning";
+  return null;
+}
+function PlayheadScrubber({ controller, className = "" }) {
+  const state = useAnimationEditorState(controller);
+  const { duration, shots, time, playing, selection, issues, scene, readOnly } = state;
+  const span = Math.max(1, duration);
+  const track = useRef2(null);
+  const [width, setWidth] = useState3(600);
+  useEffect2(() => {
+    const el = track.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => setWidth(el.clientWidth || 600));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const ticks = motionRulerTicks(duration, width);
+  const pct = (ms) => `${Math.min(span, Math.max(0, ms)) / span * 100}%`;
+  const seekAt = (clientX) => {
+    const box = track.current.getBoundingClientRect();
+    controller.seek(Math.min(1, Math.max(0, (clientX - box.left) / Math.max(1, box.width))) * span);
+  };
+  const beats = [];
+  if (scene.beat && scene.beat.bpm > 0) {
+    for (let b = 0, t = motionBeatTime(scene.beat, 0); t <= span && beats.length < 400; t = motionBeatTime(scene.beat, ++b)) if (t >= 0) beats.push(t);
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: `flex flex-col gap-1 ${className}`, "data-playhead-scrubber": "", "data-shot-timeline": "", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx7("button", { type: "button", className: "rounded border border-border px-2 py-0.5", onClick: () => controller.toggle(), "aria-label": playing ? "Pause" : "Play", disabled: !shots.length, children: playing ? "Pause" : "Play" }),
+      /* @__PURE__ */ jsx7("button", { type: "button", className: "rounded border border-border px-2 py-0.5", onClick: () => {
+        controller.pause();
+        controller.seek(0);
+      }, "aria-label": "Back to start", children: "\u23EE" }),
+      /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1 text-muted-foreground", children: [
+        "Loop",
+        /* @__PURE__ */ jsxs5(
+          "select",
+          {
+            className: "rounded border border-border bg-transparent px-1 py-0.5",
+            value: scene.loop ?? "none",
+            disabled: readOnly,
+            "aria-label": "Loop",
+            onChange: (e) => controller.apply({ op: "set_settings", loop: e.target.value }, "Change loop"),
+            children: [
+              /* @__PURE__ */ jsx7("option", { value: "none", children: "Off" }),
+              /* @__PURE__ */ jsx7("option", { value: "loop", children: "Loop" }),
+              /* @__PURE__ */ jsx7("option", { value: "ping-pong", children: "Ping-pong" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs5("span", { className: "ml-auto tabular-nums text-muted-foreground", "data-time": "", children: [
+        seconds2(time),
+        " / ",
+        seconds2(duration)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: track,
+        className: "relative cursor-ew-resize select-none touch-none",
+        role: "slider",
+        "aria-label": "Playhead",
+        "aria-valuemin": 0,
+        "aria-valuemax": duration,
+        "aria-valuenow": Math.round(time),
+        tabIndex: 0,
+        "data-scrub-track": "",
+        onPointerDown: (e) => {
+          e.currentTarget.setPointerCapture?.(e.pointerId);
+          seekAt(e.clientX);
+        },
+        onPointerMove: (e) => {
+          if (e.buttons & 1) seekAt(e.clientX);
+        },
+        onKeyDown: (e) => {
+          const step = e.shiftKey ? 1e3 : 100;
+          if (e.key === "ArrowRight") controller.seek(time + step);
+          else if (e.key === "ArrowLeft") controller.seek(time - step);
+          else if (e.key === "Home") controller.seek(0);
+          else if (e.key === "End") controller.seek(duration);
+          else if (e.key === " ") controller.toggle();
+          else return;
+          e.preventDefault();
+        },
+        children: [
+          /* @__PURE__ */ jsxs5("div", { className: "relative h-5 border-b border-border text-[10px] text-muted-foreground", "data-ruler": "", children: [
+            beats.map((t, i) => /* @__PURE__ */ jsx7("div", { className: "absolute bottom-0 h-1.5 w-px bg-sky-500/60", style: { left: pct(t) }, "data-beat": i }, `b${i}`)),
+            scene.narration?.words.map((w, i) => /* @__PURE__ */ jsx7("div", { className: "absolute top-0 h-1.5 w-px bg-emerald-500/70", style: { left: pct(w.start) }, title: `\u201C${w.text}\u201D at ${seconds2(w.start)}`, "data-word": i }, `w${i}`)),
+            ticks.map((t) => /* @__PURE__ */ jsx7("div", { className: `absolute bottom-0 w-px ${t.major ? "h-2.5 bg-muted-foreground/70" : "h-1 bg-muted-foreground/40"}`, style: { left: pct(t.time) }, children: t.label && /* @__PURE__ */ jsx7("span", { className: "absolute -top-0.5 left-1 whitespace-nowrap tabular-nums", children: t.label }) }, t.time))
+          ] }),
+          /* @__PURE__ */ jsx7("div", { className: "mt-1 flex w-full gap-px", role: "group", "aria-label": "Shots", children: shots.map((shot, i) => {
+            const mark = worst2(issues.filter((x) => x.shot === shot.id));
+            const selected = selection?.shot === shot.id;
+            const cue = scene.shots[i]?.at;
+            const cueTime = cue ? motionCueTime(scene, cue) : void 0;
+            return /* @__PURE__ */ jsxs5(
+              "button",
+              {
+                type: "button",
+                className: `relative min-w-0 truncate rounded border px-1 py-1 text-left text-[11px] ${selected ? "border-rose-500 bg-rose-500/10" : "border-border bg-muted/40"} ${state.currentShot === shot.id ? "font-semibold" : ""}`,
+                style: { flexGrow: Math.max(1, shot.end - shot.start), flexBasis: 0 },
+                title: `${shot.label ?? shot.id} \xB7 ${seconds2(shot.start)}\u2013${seconds2(shot.end)}${cueTime !== void 0 ? ` \xB7 cued at ${seconds2(cueTime)}` : ""}`,
+                "data-shot": shot.id,
+                "data-issue": mark ?? void 0,
+                onPointerDown: (e) => e.stopPropagation(),
+                onClick: () => {
+                  controller.select({ shot: shot.id });
+                  controller.seekShot(shot.id);
+                },
+                children: [
+                  mark && /* @__PURE__ */ jsx7("span", { className: mark === "error" ? "text-red-500" : "text-amber-500", children: "\u25CF " }),
+                  shot.label ?? shot.id
+                ]
+              },
+              shot.id
+            );
+          }) }),
+          /* @__PURE__ */ jsx7("div", { className: "pointer-events-none absolute inset-y-0 w-0.5 -translate-x-1/2 bg-rose-500", style: { left: pct(time) }, "data-playhead": "" })
+        ]
+      }
+    )
   ] });
 }
+
+// src/animation-editor/SceneSettings.tsx
+import { useState as useState4 } from "react";
+import { fitMotionSceneEdits, formatMotionNarration, parseMotionNarration } from "@pixerate/editor/animation-editor";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var input2 = "w-full min-w-0 rounded border border-border bg-transparent px-1 py-0.5 text-xs";
+var btn2 = "rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40";
+var unit = (u) => /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: u });
+function SceneSettings({ controller, className = "" }) {
+  const state = useAnimationEditorState(controller);
+  const { scene, readOnly, error, duration } = state;
+  const [local, setLocalState] = useState4(null);
+  const setLocal = (text) => setLocalState(text ? { text, revision: state.revision } : null);
+  const [fitTo, setFitTo] = useState4("");
+  const apply = (edit, label) => {
+    setLocal(null);
+    return controller.apply(edit, label);
+  };
+  const settings = (set, label) => apply({ op: "set_settings", ...set }, label);
+  const num = (raw, what, ok, then) => {
+    if (raw.trim() === "") return then(null);
+    const n = Number(raw);
+    if (!Number.isFinite(n) || !ok(n)) return setLocal(what);
+    then(n);
+  };
+  const target = scene.target;
+  const fitSeconds = fitTo || String(target ? (target[0] + target[1]) / 2 : Math.round(duration / 100) / 10);
+  const fit = () => {
+    const s = Number(fitSeconds);
+    if (!(Number.isFinite(s) && s > 0)) return setLocal("Give the length to fit in seconds, above 0.");
+    try {
+      const edits = fitMotionSceneEdits(scene, s * 1e3);
+      if (edits.length) apply(edits, `Fit to ${s} s`);
+      else setLocal(null);
+    } catch (e) {
+      setLocal(e.message);
+    }
+  };
+  const beat = scene.beat;
+  const message = (local && local.revision === state.revision ? local.text : null) ?? error;
+  return /* @__PURE__ */ jsxs6("div", { className: `flex flex-col gap-1.5 text-xs ${className}`, "data-scene-settings": "", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-[6.5rem_1fr] items-center gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ jsx8("label", { className: "text-muted-foreground", children: "Loop" }),
+      /* @__PURE__ */ jsxs6("select", { className: input2, "aria-label": "Scene loop", disabled: readOnly, value: scene.loop ?? "none", onChange: (e) => settings({ loop: e.target.value }, "Change loop"), children: [
+        /* @__PURE__ */ jsx8("option", { value: "none", children: "Off" }),
+        /* @__PURE__ */ jsx8("option", { value: "loop", children: "Loop" }),
+        /* @__PURE__ */ jsx8("option", { value: "ping-pong", children: "Ping-pong" })
+      ] }),
+      /* @__PURE__ */ jsx8("label", { className: "text-muted-foreground", children: "Plays on" }),
+      /* @__PURE__ */ jsxs6("select", { className: input2, "aria-label": "Scene trigger", title: "How a viewer plays it when exported to Flair", disabled: readOnly, value: scene.trigger ?? "", onChange: (e) => settings({ trigger: e.target.value || null }, "Change trigger"), children: [
+        /* @__PURE__ */ jsx8("option", { value: "", children: "Its own (autoplay)" }),
+        /* @__PURE__ */ jsx8("option", { value: "click", children: "Click (a shot per click)" }),
+        /* @__PURE__ */ jsx8("option", { value: "hover", children: "Hover" }),
+        /* @__PURE__ */ jsx8("option", { value: "press", children: "Press" }),
+        /* @__PURE__ */ jsx8("option", { value: "scroll", children: "Scroll" })
+      ] }),
+      /* @__PURE__ */ jsx8("label", { className: "text-muted-foreground", children: "Frame rate" }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx8(
+          CommitInput,
+          {
+            className: input2,
+            type: "number",
+            min: 1,
+            max: 120,
+            "aria-label": "Frame rate",
+            placeholder: "30",
+            disabled: readOnly,
+            value: scene.fps !== void 0 ? String(scene.fps) : "",
+            onCommit: (raw) => num(raw, "Frame rate must be 1 to 120 fps.", (n) => n >= 1 && n <= 120, (n) => n !== null && settings({ fps: n }, "Change frame rate"))
+          }
+        ),
+        unit("fps")
+      ] }),
+      /* @__PURE__ */ jsx8("label", { className: "text-muted-foreground", title: "Hold changes on a grid of this many frames a second (12 = on twos); empty is smooth", children: "Steps" }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx8(
+          CommitInput,
+          {
+            className: input2,
+            type: "number",
+            min: 1,
+            max: 120,
+            "aria-label": "Steps",
+            placeholder: "smooth",
+            disabled: readOnly,
+            value: scene.steps !== void 0 ? String(scene.steps) : "",
+            onCommit: (raw) => num(raw, "Steps must be above 0 and at most 120 fps, or empty for smooth.", (n) => n > 0 && n <= 120, (n) => settings({ steps: n }, "Change steps"))
+          }
+        ),
+        unit("fps")
+      ] }),
+      /* @__PURE__ */ jsx8("label", { className: "text-muted-foreground", children: "Target length" }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+        [0, 1].map((i) => /* @__PURE__ */ jsx8(
+          CommitInput,
+          {
+            className: input2,
+            type: "number",
+            min: 0,
+            step: 0.5,
+            "aria-label": i ? "Target max" : "Target min",
+            placeholder: i ? "max" : "min",
+            disabled: readOnly,
+            value: target ? String(target[i]) : "",
+            onCommit: (raw) => num(raw, "Target lengths are seconds, 0 or more.", (n) => n >= 0, (n) => {
+              if (n === null) return settings({ target: null }, "Clear target length");
+              const next = target ? [...target] : [n, n];
+              next[i] = n;
+              if (next[0] > next[1]) return setLocal("The shortest target length must not be longer than the longest.");
+              settings({ target: next }, "Change target length");
+            })
+          },
+          i
+        )),
+        unit("s")
+      ] }),
+      /* @__PURE__ */ jsx8("label", { className: "text-muted-foreground", children: "Fit to" }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx8("input", { className: input2, type: "number", min: 0.1, step: 0.5, "aria-label": "Fit to", value: fitSeconds, onChange: (e) => setFitTo(e.target.value) }),
+        unit("s"),
+        /* @__PURE__ */ jsx8("button", { type: "button", className: btn2, disabled: readOnly || !scene.shots.length, onClick: fit, "data-fit": "", title: "Change the shots' speeds so the scene lasts this long", children: "Fit" })
+      ] }),
+      /* @__PURE__ */ jsx8("label", { className: "text-muted-foreground", children: "Beat grid" }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", "data-beat-grid": "", children: [
+        /* @__PURE__ */ jsx8(
+          CommitInput,
+          {
+            className: input2,
+            type: "number",
+            min: 1,
+            "aria-label": "BPM",
+            placeholder: "bpm",
+            disabled: readOnly,
+            value: beat ? String(beat.bpm) : "",
+            onCommit: (raw) => num(raw, "BPM must be above 0.", (n) => n > 0, (n) => settings({ beat: n === null ? null : { ...beat ?? {}, bpm: n } }, n === null ? "Clear beat grid" : "Change tempo"))
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          CommitInput,
+          {
+            className: input2,
+            type: "number",
+            "aria-label": "Beat offset",
+            placeholder: "offset ms",
+            disabled: readOnly || !beat,
+            value: beat?.offset !== void 0 ? String(beat.offset) : "",
+            onCommit: (raw) => beat && num(raw, "The offset is a number of ms.", () => true, (n) => settings({ beat: { ...beat, offset: n ?? 0 } }, "Change beat offset"))
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          CommitInput,
+          {
+            className: input2,
+            type: "number",
+            min: 1,
+            step: 1,
+            "aria-label": "Meter",
+            placeholder: "4/bar",
+            disabled: readOnly || !beat,
+            value: beat?.meter !== void 0 ? String(beat.meter) : "",
+            onCommit: (raw) => beat && num(raw, "The meter is a whole number of beats a bar.", (n) => Number.isInteger(n) && n >= 1, (n) => settings({ beat: { ...beat, meter: n ?? 4 } }, "Change meter"))
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6("label", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx8("span", { className: "text-muted-foreground", children: "Narration (a word a line: start ms, then the word)" }),
+      /* @__PURE__ */ jsx8(
+        "textarea",
+        {
+          className: `${input2} h-20 font-mono`,
+          "aria-label": "Narration",
+          placeholder: "0 Meet\n320 the\n480 badge",
+          disabled: readOnly,
+          defaultValue: formatMotionNarration(scene.narration),
+          onBlur: (e) => {
+            if (e.currentTarget.value === formatMotionNarration(scene.narration)) return;
+            const parsed = parseMotionNarration(e.currentTarget.value);
+            if ("error" in parsed) return setLocal(parsed.error);
+            settings({ narration: parsed.narration }, parsed.narration ? "Change narration" : "Clear narration");
+          }
+        },
+        formatMotionNarration(scene.narration)
+      )
+    ] }),
+    message && /* @__PURE__ */ jsx8("p", { className: "text-red-500", role: "alert", "data-edit-error": "", children: message })
+  ] });
+}
+
+// src/animation-editor/ShotInspector.tsx
+import { useMemo as useMemo5, useState as useState5 } from "react";
+import { describeMotionElements as describeMotionElements2, freshShotId, motionCueChoices, motionCueFromKey, motionCueKey } from "@pixerate/editor/animation-editor";
+import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var input3 = "w-full min-w-0 rounded border border-border bg-transparent px-1 py-0.5 text-xs";
+var btn3 = "rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40";
+function ShotInspector({ controller, shot, className = "" }) {
+  const state = useAnimationEditorState(controller);
+  const { scene, selection, readOnly, error } = state;
+  const [local, setLocalState] = useState5(null);
+  const setLocal = (text) => setLocalState(text ? { text, revision: state.revision } : null);
+  const elements = useMemo5(() => describeMotionElements2(scene), [scene.artwork]);
+  const cues = useMemo5(() => motionCueChoices(scene), [scene]);
+  const id = shot ?? selection?.shot ?? scene.shots[0]?.id;
+  const index = scene.shots.findIndex((s) => s.id === id);
+  const current = scene.shots[index];
+  const apply = (edit, label) => {
+    setLocal(null);
+    return controller.apply(edit, label);
+  };
+  const addShot = () => {
+    const newId = freshShotId(scene, "shot");
+    const at = index >= 0 ? index + 1 : scene.shots.length;
+    if (apply({ op: "insert_shots", shots: [{ id: newId, label: "New shot", run: [] }], at }, "Add shot").ok) {
+      controller.select({ shot: newId });
+      controller.seekShot(newId);
+    }
+  };
+  const number = (key, raw, label) => {
+    const n = Number(raw);
+    if (raw.trim() === "") return apply({ op: "update_shot", shot: current.id, remove: [key] }, label);
+    if (!Number.isFinite(n) || n < 0 || key === "speed" && n <= 0) return setLocal(key === "speed" ? "Speed must be a number above 0 (1 = as written)." : "Hold must be a number of ms, 0 or more.");
+    apply({ op: "update_shot", shot: current.id, set: { [key]: n } }, label);
+  };
+  const message = (local && local.revision === state.revision ? local.text : null) ?? error;
+  const cueKey = current ? motionCueKey(current.at) : "";
+  const frame = current?.camera && "frame" in current.camera ? current.camera.frame : "";
+  return /* @__PURE__ */ jsxs7("div", { className: `flex flex-col gap-1.5 text-xs ${className}`, "data-shot-inspector": "", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx9("span", { className: "font-medium", children: "Shot" }),
+      current && /* @__PURE__ */ jsx9("code", { className: "text-[10px] text-muted-foreground", children: current.id }),
+      /* @__PURE__ */ jsxs7("span", { className: "ml-auto flex gap-0.5", children: [
+        /* @__PURE__ */ jsx9("button", { type: "button", className: btn3, disabled: readOnly, onClick: addShot, "data-add-shot": "", children: "+ Shot" }),
+        current && /* @__PURE__ */ jsxs7(Fragment, { children: [
+          /* @__PURE__ */ jsx9("button", { type: "button", className: btn3, "aria-label": "Move shot earlier", disabled: readOnly || index === 0, onClick: () => apply({ op: "move_shot", shot: current.id, to: index - 1 }, "Move shot"), children: "\u2190" }),
+          /* @__PURE__ */ jsx9("button", { type: "button", className: btn3, "aria-label": "Move shot later", disabled: readOnly || index === scene.shots.length - 1, onClick: () => apply({ op: "move_shot", shot: current.id, to: index + 1 }, "Move shot"), children: "\u2192" }),
+          /* @__PURE__ */ jsx9("button", { type: "button", className: btn3, "aria-label": "Delete shot", disabled: readOnly, onClick: () => apply({ op: "delete_shots", shots: [current.id] }, "Delete shot"), children: "\u2715" })
+        ] })
+      ] })
+    ] }),
+    current && /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-[6.5rem_1fr] items-center gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ jsx9("label", { className: "text-muted-foreground", children: "Label" }),
+      /* @__PURE__ */ jsx9(CommitInput, { className: input3, "aria-label": "Shot label", disabled: readOnly, value: current.label ?? "", onCommit: (raw) => apply(raw.trim() ? { op: "update_shot", shot: current.id, set: { label: raw.trim() } } : { op: "update_shot", shot: current.id, remove: ["label"] }, "Rename shot") }),
+      /* @__PURE__ */ jsx9("label", { className: "text-muted-foreground", children: "Hold" }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx9(CommitInput, { className: input3, type: "number", min: 0, step: 50, "aria-label": "Hold", placeholder: "600", disabled: readOnly, value: current.hold !== void 0 ? String(current.hold) : "", onCommit: (raw) => number("hold", raw, "Change hold") }),
+        /* @__PURE__ */ jsx9("span", { className: "text-[10px] text-muted-foreground", children: "ms" })
+      ] }),
+      /* @__PURE__ */ jsx9("label", { className: "text-muted-foreground", children: "Speed" }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx9(CommitInput, { className: input3, type: "number", min: 0.05, step: 0.05, "aria-label": "Speed", placeholder: "1", disabled: readOnly, value: current.speed !== void 0 ? String(current.speed) : "", onCommit: (raw) => number("speed", raw, "Change speed") }),
+        /* @__PURE__ */ jsx9("span", { className: "text-[10px] text-muted-foreground", children: "\xD7" })
+      ] }),
+      /* @__PURE__ */ jsx9("label", { className: "text-muted-foreground", children: "Camera" }),
+      /* @__PURE__ */ jsxs7(
+        "select",
+        {
+          className: input3,
+          "aria-label": "Camera frames",
+          disabled: readOnly,
+          value: current.camera ? frame ? `frame:${frame}` : "rect" : "",
+          onChange: (e) => {
+            const v = e.target.value;
+            if (!v) apply({ op: "update_shot", shot: current.id, remove: ["camera"] }, "Clear camera");
+            else if (v.startsWith("frame:")) apply({ op: "update_shot", shot: current.id, set: { camera: { frame: v.slice(6), padding: 24 } } }, "Frame camera");
+          },
+          children: [
+            /* @__PURE__ */ jsx9("option", { value: "", children: "keep framing" }),
+            current.camera && !frame && /* @__PURE__ */ jsx9("option", { value: "rect", children: "a rectangle" }),
+            elements.map((e) => /* @__PURE__ */ jsxs7("option", { value: `frame:${e.id}`, children: [
+              "frame ",
+              e.name ?? e.id
+            ] }, e.id))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx9("label", { className: "text-muted-foreground", children: "Starts on" }),
+      /* @__PURE__ */ jsxs7(
+        "select",
+        {
+          className: input3,
+          "aria-label": "Cue",
+          disabled: readOnly || index === 0,
+          value: cueKey,
+          onChange: (e) => {
+            const cue = motionCueFromKey(e.target.value);
+            apply(cue ? { op: "update_shot", shot: current.id, set: { at: cue } } : { op: "update_shot", shot: current.id, remove: ["at"] }, "Cue shot");
+          },
+          children: [
+            /* @__PURE__ */ jsx9("option", { value: "", children: "after the shot before" }),
+            cueKey && !cues.some((c) => c.value === cueKey) && /* @__PURE__ */ jsx9("option", { value: cueKey, children: cueKey }),
+            cues.map((c) => /* @__PURE__ */ jsx9("option", { value: c.value, children: c.label }, c.value))
+          ]
+        }
+      ),
+      !cues.length && index > 0 && /* @__PURE__ */ jsx9("p", { className: "col-span-2 text-[10px] text-muted-foreground", children: "Add a beat grid or narration in the scene settings to cue shots to them." })
+    ] }),
+    message && /* @__PURE__ */ jsx9("p", { className: "text-red-500", role: "alert", "data-edit-error": "", children: message })
+  ] });
+}
+
+// src/animation-editor/AnimationEditor.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var ONION = { before: 3, after: 1 };
+var btn4 = "rounded border border-border px-2 py-0.5 text-xs disabled:opacity-40";
+function AnimationEditor({ controller, values, onionSkin, motionPaths, showIssues = true, editable = true, className = "" }) {
+  const state = useAnimationEditorState(controller);
+  const { issues, scene, selection, readOnly } = state;
+  const [picked, setPicked] = useState6(null);
+  const [onion, setOnion] = useState6(false);
+  const [paths, setPaths] = useState6(false);
+  const command = selection?.command !== void 0 ? scene.shots.find((s) => s.id === selection.shot)?.run[selection.command] : void 0;
+  const targets = command && "targets" in command ? command.targets : [];
+  const nodes = useMemo6(() => indexMotionNodes(scene.artwork.nodes), [scene.artwork]);
+  const pickedValid = picked && nodes.has(picked) ? picked : null;
+  const onPick = (id, event) => {
+    if (event.shiftKey && id && command && "targets" in command && selection?.command !== void 0 && !readOnly) {
+      const next = targets.includes(id) ? targets.filter((t) => t !== id) : [...targets, id];
+      if (next.length) controller.apply({ op: "update_command", shot: selection.shot, command: selection.command, set: { targets: next } }, next.length > targets.length ? "Add target" : "Remove target");
+      return;
+    }
+    setPicked(id);
+  };
+  const stage = /* @__PURE__ */ jsx10(
+    AnimationStage,
+    {
+      controller,
+      values,
+      onionSkin: onionSkin ?? (onion ? ONION : void 0),
+      motionPaths: motionPaths ?? paths,
+      onPick: editable ? onPick : void 0,
+      highlight: editable ? [...pickedValid ? [pickedValid] : [], ...targets] : void 0,
+      className: "rounded-md border border-border bg-muted/40"
+    }
+  );
+  const issueList = showIssues && issues.length > 0 && /* @__PURE__ */ jsx10("ul", { className: "space-y-0.5 text-xs", "aria-label": "Animation issues", children: issues.map((issue, i) => /* @__PURE__ */ jsx10("li", { className: issue.severity === "error" ? "text-red-500" : issue.severity === "warning" ? "text-amber-500" : "text-muted-foreground", children: motionIssueLine(issue) }, i)) });
+  if (!editable)
+    return /* @__PURE__ */ jsxs8("div", { className: `flex flex-col gap-2 ${className}`, "data-animation-editor": "", children: [
+      stage,
+      /* @__PURE__ */ jsx10(PlayheadScrubber, { controller }),
+      issueList
+    ] });
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: `grid gap-3 lg:grid-cols-[minmax(0,1fr)_20rem] ${className}`,
+      "data-animation-editor": "",
+      onKeyDown: (e) => {
+        const el = e.target;
+        if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== "z" || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName)) return;
+        e.preventDefault();
+        if (e.shiftKey) controller.redo();
+        else controller.undo();
+      },
+      children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-col gap-2", children: [
+          stage,
+          /* @__PURE__ */ jsx10(PlayheadScrubber, { controller }),
+          /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx10("button", { type: "button", className: btn4, onClick: () => controller.undo(), disabled: !state.canUndo, title: state.canUndo ? `Undo ${state.undoLabel}` : "Nothing to undo", "data-undo": "", children: "Undo" }),
+            /* @__PURE__ */ jsx10("button", { type: "button", className: btn4, onClick: () => controller.redo(), disabled: !state.canRedo, title: state.canRedo ? `Redo ${state.redoLabel}` : "Nothing to redo", "data-redo": "", children: "Redo" }),
+            onionSkin === void 0 && /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx10("input", { type: "checkbox", checked: onion, onChange: (e) => setOnion(e.target.checked) }),
+              " Onion skin"
+            ] }),
+            motionPaths === void 0 && /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx10("input", { type: "checkbox", checked: paths, onChange: (e) => setPaths(e.target.checked) }),
+              " Motion paths"
+            ] }),
+            /* @__PURE__ */ jsx10("span", { className: "ml-auto", "data-picked-element": pickedValid ?? void 0, children: pickedValid ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+              "Picked ",
+              /* @__PURE__ */ jsx10("code", { className: "text-rose-500", children: pickedValid }),
+              " ",
+              /* @__PURE__ */ jsx10("button", { type: "button", className: "underline", onClick: () => setPicked(null), children: "clear" })
+            ] }) : "Click the stage to pick an element; shift-click to toggle it as a target." })
+          ] }),
+          issueList
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-col gap-3", children: [
+          /* @__PURE__ */ jsx10(CommandList, { controller, targets: pickedValid ? [pickedValid] : void 0 }),
+          /* @__PURE__ */ jsx10(CommandInspector, { controller, picked: pickedValid, className: "border-t border-border pt-2" }),
+          /* @__PURE__ */ jsxs8("details", { open: true, className: "border-t border-border pt-2", children: [
+            /* @__PURE__ */ jsx10("summary", { className: "cursor-pointer text-xs font-medium", children: "Shot" }),
+            /* @__PURE__ */ jsx10(ShotInspector, { controller, className: "mt-1" })
+          ] }),
+          /* @__PURE__ */ jsxs8("details", { className: "border-t border-border pt-2", children: [
+            /* @__PURE__ */ jsx10("summary", { className: "cursor-pointer text-xs font-medium", children: "Scene settings" }),
+            /* @__PURE__ */ jsx10(SceneSettings, { controller, className: "mt-1" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 export {
   AnimationEditor,
   AnimationStage,
+  CommandInspector,
+  CommandList,
+  EasePicker,
+  PlayheadScrubber,
+  SceneSettings,
+  ShotInspector,
   ShotTimeline,
   useAnimationEditor,
   useAnimationEditorController,