@pixerate/editor-react 0.44.0 → 0.45.0

package/dist/animation-editor/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/animation-editor/index.ts
@@ -22,6 +32,12 @@ var animation_editor_exports = {};
 __export(animation_editor_exports, {
   AnimationEditor: () => AnimationEditor,
   AnimationStage: () => AnimationStage,
+  CommandInspector: () => CommandInspector,
+  CommandList: () => CommandList,
+  EasePicker: () => EasePicker,
+  PlayheadScrubber: () => PlayheadScrubber,
+  SceneSettings: () => SceneSettings,
+  ShotInspector: () => ShotInspector,
   ShotTimeline: () => ShotTimeline,
   useAnimationEditor: () => useAnimationEditor,
   useAnimationEditorController: () => useAnimationEditorController,
@@ -77,22 +93,28 @@ function useAnimationEditorTools(registry, controller, options = {}) {
 
 // src/animation-editor/AnimationStage.tsx
 var import_react2 = require("react");
+var import_animation_editor2 = require("@pixerate/editor/animation-editor");
 var import_jsx_runtime = require("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 = (0, import_react2.useMemo)(
-    () => 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]
+    () => (0, import_animation_editor2.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__ */ (0, import_jsx_runtime.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((0, import_animation_editor2.motionNodeAtElement)(scene, e.target, e.currentTarget), e) : void 0,
       dangerouslySetInnerHTML: { __html: svg }
     }
   );
@@ -169,20 +191,849 @@ function ShotTimeline({ controller, className = "" }) {
 }
 
 // src/animation-editor/AnimationEditor.tsx
-var import_animation_editor2 = require("@pixerate/editor/animation-editor");
+var import_react9 = require("react");
+var import_animation_editor9 = require("@pixerate/editor/animation-editor");
+
+// src/animation-editor/CommandInspector.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_animation_editor4 = require("@pixerate/editor/animation-editor");
+
+// src/animation-editor/EasePicker.tsx
+var import_react3 = require("react");
+var import_animation_editor3 = require("@pixerate/editor/animation-editor");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function AnimationEditor({ controller, values, onionSkin, motionPaths, showIssues = true, className = "" }) {
-  const { issues } = useAnimationEditorState(controller);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `flex flex-col gap-2 ${className}`, "data-animation-editor": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AnimationStage, { controller, values, onionSkin, motionPaths, className: "rounded-md border border-border bg-muted/40" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ShotTimeline, { controller }),
-    showIssues && issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "space-y-0.5 text-xs", "aria-label": "Animation issues", children: issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: issue.severity === "error" ? "text-red-500" : issue.severity === "warning" ? "text-amber-500" : "text-muted-foreground", children: (0, import_animation_editor2.motionIssueLine)(issue) }, i)) })
+var W = 72;
+var H = 44;
+function EasePicker({ value, onChange, disabled, className = "" }) {
+  const key = (0, import_animation_editor3.motionEaseKey)(value);
+  const curve = (0, import_react3.useMemo)(() => (0, import_animation_editor3.motionEasingCurve)(value ?? "ease-out"), [value]);
+  const guides = (0, import_animation_editor3.motionEasingGuides)(curve, H);
+  const spring = typeof value === "string" ? value.startsWith("spring") : value?.type === "spring";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `flex items-center gap-2 ${className}`, "data-ease-picker": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "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: [
+          import_animation_editor3.MOTION_EASE_CHOICES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: c.value, children: c.label }, c.value)),
+          key === "custom" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "custom", children: "Custom" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("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__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, x2: W, y1: guides.zero, y2: guides.zero, stroke: "currentColor", strokeOpacity: 0.2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, x2: W, y1: guides.one, y2: guides.one, stroke: "currentColor", strokeOpacity: 0.2, strokeDasharray: "2 2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: (0, import_animation_editor3.motionEasingPath)(curve, W, H), fill: "none", stroke: "#f43f5e", strokeWidth: 1.5 })
+    ] }),
+    spring && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-[10px] tabular-nums text-muted-foreground", children: [
+      Math.round(curve.durationMs),
+      " ms"
+    ] })
+  ] });
+}
+
+// src/animation-editor/CommitInput.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function CommitInput({ value, onCommit, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "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
+var import_jsx_runtime5 = require("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] = (0, import_react4.useState)(null);
+  const setLocal = (text) => setLocalState(text ? { text, revision: state.revision } : null);
+  const elements = (0, import_react4.useMemo)(() => (0, import_animation_editor4.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__ */ (0, import_jsx_runtime5.jsx)("div", { className: `text-xs text-muted-foreground ${className}`, "data-command-inspector": "", children: "Select a command to edit it." });
+  }
+  const values = command;
+  const fields = (0, import_animation_editor4.motionCommandFields)(command.type);
+  const primitive = (0, import_animation_editor4.motionFlairPrimitive)(command);
+  const commit = (field, raw) => {
+    const edit = (0, import_animation_editor4.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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-wrap items-center gap-1", "data-targets": "", children: [
+          targets.map((id) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", "aria-label": `Remove ${id}`, onClick: () => commit(field, targets.filter((t) => t !== id)), children: "\xD7" })
+          ] }, id)),
+          !readOnly && picked && !targets.includes(picked) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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__ */ (0, import_jsx_runtime5.jsxs)("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__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "+ target\u2026" }),
+            elements.filter((e) => !targets.includes(e.id)).map((e) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: e.id, children: e.name ? `${e.name} (${e.id})` : e.id }, e.id))
+          ] })
+        ] });
+      case "node":
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("select", { className: input, ...common, value: typeof v === "string" ? v : "", onChange: (e) => commit(field, e.target.value), children: [
+          !field.required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "\u2014" }),
+          elements.filter((e) => field.name !== "path" || e.type === "path").map((e) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: e.id, children: [
+            e.name ? `${e.name} (${e.id})` : e.id,
+            e.hidden ? " \xB7 hidden" : ""
+          ] }, e.id))
+        ] });
+      case "enum":
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("select", { className: input, ...common, value: typeof v === "string" ? v : "", onChange: (e) => commit(field, e.target.value), children: [
+          !field.required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "default" }),
+          field.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: o, children: o }, o))
+        ] });
+      case "boolean":
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "checkbox", ...common, checked: v === true, onChange: (e) => commit(field, e.target.checked) });
+      case "ease":
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EasePicker, { value: v, disabled: readOnly, onChange: (ease) => commit(field, ease === void 0 ? "" : ease) });
+      case "color":
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(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__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center gap-1", children: ["x", "y"].map((axis) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            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__ */ (0, import_jsx_runtime5.jsx)("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: field.unit })
+        ] });
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CommitInput, { className: input, ...common, value: typeof v === "string" ? v : "", onCommit: (raw) => commit(field, raw) });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `flex flex-col gap-1.5 text-xs ${className}`, "data-command-inspector": "", "data-command-type": command.type, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-medium", children: [
+        index + 1,
+        ". ",
+        command.type
+      ] }),
+      primitive ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { className: "rounded bg-muted px-1 text-[10px]", "data-flair-primitive": primitive, title: "The Flair motion primitive this command plays", children: primitive }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "editor-only (no Flair primitive)" })
+    ] }),
+    ["main", "timing"].map((group) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("fieldset", { className: "grid grid-cols-[6.5rem_1fr] items-center gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsxs)(import_react4.default.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "truncate text-muted-foreground", title: field.description, children: [
+          field.label,
+          field.required ? " *" : ""
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-field": field.name, children: control(field) })
+      ] }, field.name))
+    ] }, group)),
+    message && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-red-500", role: "alert", "data-edit-error": "", children: message })
+  ] });
+}
+
+// src/animation-editor/CommandList.tsx
+var import_react5 = require("react");
+var import_animation_editor5 = require("@pixerate/editor/animation-editor");
+var import_jsx_runtime6 = require("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] = (0, import_react5.useState)("enter");
+  const [local, setLocalState] = (0, import_react5.useState)(null);
+  const setLocal = (text) => setLocalState(text ? { text, revision: state.revision } : null);
+  if (!current) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `text-xs text-muted-foreground ${className}`, "data-command-list": "", children: "Add a shot to start." });
+  const rows = (0, import_animation_editor5.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 = (0, import_animation_editor5.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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `flex flex-col gap-1 text-xs ${className}`, "data-command-list": "", "data-for-shot": current.id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "font-medium", children: [
+      "Commands in ",
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-rose-500", children: current.label ?? current.id })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)(
+        "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__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "min-w-0 flex-1 truncate", title: row.summary, children: [
+              row.index + 1,
+              ". ",
+              row.summary
+            ] }),
+            row.flairPrimitive && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { className: "rounded bg-muted px-1 text-[10px] text-muted-foreground", "data-flair-primitive": row.flairPrimitive, children: row.flairPrimitive }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "tabular-nums text-[10px] text-muted-foreground", children: [
+              ((row.end - row.start) / 1e3).toFixed(2),
+              " s"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex w-full items-center gap-1", onClick: (e) => e.stopPropagation(), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                "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__ */ (0, import_jsx_runtime6.jsx)("option", { value: "after", children: "after previous" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "previous", children: "with previous" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-0.5 text-muted-foreground", children: [
+                "+",
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "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__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ml-auto flex gap-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: btn, "aria-label": "Duplicate", disabled: readOnly, onClick: () => run((0, import_animation_editor5.duplicateMotionCommandEdit)(scene, current.id, row.index), "Duplicate command").ok && controller.select({ shot: current.id, command: row.index + 1 }), children: "\u29C9" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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: import_animation_editor5.MOTION_COMMAND_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: t, children: t }, t)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: btn, onClick: add, "data-add-command": "", children: "Add command" })
+    ] }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-red-500", role: "alert", "data-edit-error": "", children: message })
+  ] });
+}
+
+// src/animation-editor/PlayheadScrubber.tsx
+var import_react6 = require("react");
+var import_animation_editor6 = require("@pixerate/editor/animation-editor");
+var import_jsx_runtime7 = require("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 = (0, import_react6.useRef)(null);
+  const [width, setWidth] = (0, import_react6.useState)(600);
+  (0, import_react6.useEffect)(() => {
+    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 = (0, import_animation_editor6.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 = (0, import_animation_editor6.motionBeatTime)(scene.beat, 0); t <= span && beats.length < 400; t = (0, import_animation_editor6.motionBeatTime)(scene.beat, ++b)) if (t >= 0) beats.push(t);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `flex flex-col gap-1 ${className}`, "data-playhead-scrubber": "", "data-shot-timeline": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1 text-muted-foreground", children: [
+        "Loop",
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "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__ */ (0, import_jsx_runtime7.jsx)("option", { value: "none", children: "Off" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "loop", children: "Loop" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "ping-pong", children: "Ping-pong" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ml-auto tabular-nums text-muted-foreground", "data-time": "", children: [
+        seconds2(time),
+        " / ",
+        seconds2(duration)
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative h-5 border-b border-border text-[10px] text-muted-foreground", "data-ruler": "", children: [
+            beats.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute -top-0.5 left-1 whitespace-nowrap tabular-nums", children: t.label }) }, t.time))
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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 ? (0, import_animation_editor6.motionCueTime)(scene, cue) : void 0;
+            return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "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__ */ (0, import_jsx_runtime7.jsx)("span", { className: mark === "error" ? "text-red-500" : "text-amber-500", children: "\u25CF " }),
+                  shot.label ?? shot.id
+                ]
+              },
+              shot.id
+            );
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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
+var import_react7 = require("react");
+var import_animation_editor7 = require("@pixerate/editor/animation-editor");
+var import_jsx_runtime8 = require("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__ */ (0, import_jsx_runtime8.jsx)("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] = (0, import_react7.useState)(null);
+  const setLocal = (text) => setLocalState(text ? { text, revision: state.revision } : null);
+  const [fitTo, setFitTo] = (0, import_react7.useState)("");
+  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 = (0, import_animation_editor7.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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `flex flex-col gap-1.5 text-xs ${className}`, "data-scene-settings": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "grid grid-cols-[6.5rem_1fr] items-center gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "text-muted-foreground", children: "Loop" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("select", { className: input2, "aria-label": "Scene loop", disabled: readOnly, value: scene.loop ?? "none", onChange: (e) => settings({ loop: e.target.value }, "Change loop"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "none", children: "Off" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "loop", children: "Loop" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "ping-pong", children: "Ping-pong" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "text-muted-foreground", children: "Frame rate" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          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__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          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__ */ (0, import_jsx_runtime8.jsx)("label", { className: "text-muted-foreground", children: "Target length" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+        [0, 1].map((i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          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__ */ (0, import_jsx_runtime8.jsx)("label", { className: "text-muted-foreground", children: "Fit to" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("label", { className: "text-muted-foreground", children: "Beat grid" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", "data-beat-grid": "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          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__ */ (0, import_jsx_runtime8.jsx)(
+          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__ */ (0, import_jsx_runtime8.jsx)(
+          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__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-muted-foreground", children: "Narration (a word a line: start ms, then the word)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "textarea",
+        {
+          className: `${input2} h-20 font-mono`,
+          "aria-label": "Narration",
+          placeholder: "0 Meet\n320 the\n480 badge",
+          disabled: readOnly,
+          defaultValue: (0, import_animation_editor7.formatMotionNarration)(scene.narration),
+          onBlur: (e) => {
+            if (e.currentTarget.value === (0, import_animation_editor7.formatMotionNarration)(scene.narration)) return;
+            const parsed = (0, import_animation_editor7.parseMotionNarration)(e.currentTarget.value);
+            if ("error" in parsed) return setLocal(parsed.error);
+            settings({ narration: parsed.narration }, parsed.narration ? "Change narration" : "Clear narration");
+          }
+        },
+        (0, import_animation_editor7.formatMotionNarration)(scene.narration)
+      )
+    ] }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-red-500", role: "alert", "data-edit-error": "", children: message })
+  ] });
+}
+
+// src/animation-editor/ShotInspector.tsx
+var import_react8 = require("react");
+var import_animation_editor8 = require("@pixerate/editor/animation-editor");
+var import_jsx_runtime9 = require("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] = (0, import_react8.useState)(null);
+  const setLocal = (text) => setLocalState(text ? { text, revision: state.revision } : null);
+  const elements = (0, import_react8.useMemo)(() => (0, import_animation_editor8.describeMotionElements)(scene), [scene.artwork]);
+  const cues = (0, import_react8.useMemo)(() => (0, import_animation_editor8.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 = (0, import_animation_editor8.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 ? (0, import_animation_editor8.motionCueKey)(current.at) : "";
+  const frame = current?.camera && "frame" in current.camera ? current.camera.frame : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `flex flex-col gap-1.5 text-xs ${className}`, "data-shot-inspector": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-medium", children: "Shot" }),
+      current && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { className: "text-[10px] text-muted-foreground", children: current.id }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ml-auto flex gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: btn3, disabled: readOnly, onClick: addShot, "data-add-shot": "", children: "+ Shot" }),
+        current && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-[6.5rem_1fr] items-center gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-muted-foreground", children: "Label" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-muted-foreground", children: "Hold" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "ms" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-muted-foreground", children: "Speed" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "\xD7" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-muted-foreground", children: "Camera" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "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__ */ (0, import_jsx_runtime9.jsx)("option", { value: "", children: "keep framing" }),
+            current.camera && !frame && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rect", children: "a rectangle" }),
+            elements.map((e) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("option", { value: `frame:${e.id}`, children: [
+              "frame ",
+              e.name ?? e.id
+            ] }, e.id))
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-muted-foreground", children: "Starts on" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "select",
+        {
+          className: input3,
+          "aria-label": "Cue",
+          disabled: readOnly || index === 0,
+          value: cueKey,
+          onChange: (e) => {
+            const cue = (0, import_animation_editor8.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__ */ (0, import_jsx_runtime9.jsx)("option", { value: "", children: "after the shot before" }),
+            cueKey && !cues.some((c) => c.value === cueKey) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: cueKey, children: cueKey }),
+            cues.map((c) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: c.value, children: c.label }, c.value))
+          ]
+        }
+      ),
+      !cues.length && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-red-500", role: "alert", "data-edit-error": "", children: message })
   ] });
 }
+
+// src/animation-editor/AnimationEditor.tsx
+var import_jsx_runtime10 = require("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] = (0, import_react9.useState)(null);
+  const [onion, setOnion] = (0, import_react9.useState)(false);
+  const [paths, setPaths] = (0, import_react9.useState)(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 = (0, import_react9.useMemo)(() => (0, import_animation_editor9.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__ */ (0, import_jsx_runtime10.jsx)(
+    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__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "space-y-0.5 text-xs", "aria-label": "Animation issues", children: issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: issue.severity === "error" ? "text-red-500" : issue.severity === "warning" ? "text-amber-500" : "text-muted-foreground", children: (0, import_animation_editor9.motionIssueLine)(issue) }, i)) });
+  if (!editable)
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col gap-2 ${className}`, "data-animation-editor": "", children: [
+      stage,
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PlayheadScrubber, { controller }),
+      issueList
+    ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
+          stage,
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PlayheadScrubber, { controller }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { type: "checkbox", checked: onion, onChange: (e) => setOnion(e.target.checked) }),
+              " Onion skin"
+            ] }),
+            motionPaths === void 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { type: "checkbox", checked: paths, onChange: (e) => setPaths(e.target.checked) }),
+              " Motion paths"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ml-auto", "data-picked-element": pickedValid ?? void 0, children: pickedValid ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+              "Picked ",
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { className: "text-rose-500", children: pickedValid }),
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CommandList, { controller, targets: pickedValid ? [pickedValid] : void 0 }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CommandInspector, { controller, picked: pickedValid, className: "border-t border-border pt-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("details", { open: true, className: "border-t border-border pt-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("summary", { className: "cursor-pointer text-xs font-medium", children: "Shot" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShotInspector, { controller, className: "mt-1" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("details", { className: "border-t border-border pt-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("summary", { className: "cursor-pointer text-xs font-medium", children: "Scene settings" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SceneSettings, { controller, className: "mt-1" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnimationEditor,
   AnimationStage,
+  CommandInspector,
+  CommandList,
+  EasePicker,
+  PlayheadScrubber,
+  SceneSettings,
+  ShotInspector,
   ShotTimeline,
   useAnimationEditor,
   useAnimationEditorController,