@pixerate/editor-react 0.40.0 → 0.42.0

package/dist/animation-editor/index.cjs

@@ -0,0 +1,192 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/animation-editor/index.ts
+var animation_editor_exports = {};
+__export(animation_editor_exports, {
+  AnimationEditor: () => AnimationEditor,
+  AnimationStage: () => AnimationStage,
+  ShotTimeline: () => ShotTimeline,
+  useAnimationEditor: () => useAnimationEditor,
+  useAnimationEditorController: () => useAnimationEditorController,
+  useAnimationEditorState: () => useAnimationEditorState,
+  useAnimationEditorTools: () => useAnimationEditorTools
+});
+module.exports = __toCommonJS(animation_editor_exports);
+
+// src/animation-editor/useAnimationEditor.ts
+var import_react = require("react");
+var import_animation_editor = require("@pixerate/editor/animation-editor");
+function useAnimationEditorController(options = {}) {
+  const ref = (0, import_react.useRef)(null);
+  if (!ref.current) ref.current = new import_animation_editor.AnimationEditorController(options);
+  const controller = ref.current;
+  (0, import_react.useEffect)(() => () => controller.destroy(), [controller]);
+  return controller;
+}
+function useAnimationEditorState(controller) {
+  return (0, import_react.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+}
+function useAnimationEditor(controllerOrOptions = {}) {
+  const own = (0, import_react.useRef)(null);
+  let controller;
+  if (controllerOrOptions instanceof import_animation_editor.AnimationEditorController) controller = controllerOrOptions;
+  else {
+    if (!own.current) own.current = new import_animation_editor.AnimationEditorController(controllerOrOptions);
+    controller = own.current;
+  }
+  (0, import_react.useEffect)(() => () => own.current?.destroy(), []);
+  const state = useAnimationEditorState(controller);
+  const actions = (0, import_react.useMemo)(
+    () => ({
+      play: () => controller.play(),
+      pause: () => controller.pause(),
+      toggle: () => controller.toggle(),
+      seek: (time) => controller.seek(time),
+      undo: () => void controller.undo(),
+      redo: () => void controller.redo(),
+      toSvg: () => controller.toSvg()
+    }),
+    [controller]
+  );
+  return { controller, state, ...actions };
+}
+function useAnimationEditorTools(registry, controller, options = {}) {
+  const { id, namespace, readOnly, rasterize } = options;
+  (0, import_react.useEffect)(() => {
+    if (!registry) return;
+    return registry.register((0, import_animation_editor.createAnimationEditorToolProvider)(controller, { id, namespace, readOnly, rasterize }));
+  }, [registry, controller, id, namespace, readOnly, rasterize]);
+}
+
+// src/animation-editor/AnimationStage.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function AnimationStage({ controller, values, className = "" }) {
+  const state = useAnimationEditorState(controller);
+  const { scene, time } = state;
+  const svg = (0, import_react2.useMemo)(
+    () => controller.toSvg(time, { pretty: false, idPrefix: "ae-", values }).replace(/<svg ([^>]*?)width="[^"]*" height="[^"]*"/, '<svg $1width="100%" height="100%"'),
+    [controller, scene, time, values]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: `relative overflow-hidden ${className}`,
+      style: { aspectRatio: `${scene.artwork.width} / ${scene.artwork.height}` },
+      "data-animation-stage": "",
+      role: "img",
+      "aria-label": `${scene.name} at ${(time / 1e3).toFixed(2)} s`,
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+
+// src/animation-editor/ShotTimeline.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var seconds = (ms) => `${(ms / 1e3).toFixed(1)} s`;
+function worst(issues) {
+  if (issues.some((i) => i.severity === "error")) return "error";
+  if (issues.some((i) => i.severity === "warning")) return "warning";
+  return null;
+}
+function ShotTimeline({ controller, className = "" }) {
+  const state = useAnimationEditorState(controller);
+  const { duration, shots, time, playing, selection, issues } = state;
+  const span = Math.max(1, duration);
+  const onRuler = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    controller.seek((event.clientX - box.left) / Math.max(1, box.width) * span);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex flex-col gap-1 ${className}`, "data-shot-timeline": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsxs)("span", { className: "tabular-nums text-muted-foreground", children: [
+        seconds(time),
+        " / ",
+        seconds(duration)
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: "relative h-3 cursor-pointer rounded bg-muted",
+        onPointerDown: onRuler,
+        role: "slider",
+        "aria-label": "Playhead",
+        "aria-valuemin": 0,
+        "aria-valuemax": duration,
+        "aria-valuenow": Math.round(time),
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "ArrowRight") controller.seek(time + 100);
+          if (e.key === "ArrowLeft") controller.seek(time - 100);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute inset-y-0 w-0.5 bg-rose-500", style: { left: `${time / span * 100}%` } })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex w-full gap-px", role: "group", "aria-label": "Shots", children: shots.map((shot) => {
+      const mark = worst(issues.filter((i) => i.shot === shot.id));
+      const selected = selection?.shot === shot.id;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: `min-w-0 truncate rounded border px-1 py-1 text-left text-[11px] ${selected ? "border-rose-500 bg-rose-500/10" : "border-border"} ${state.currentShot === shot.id ? "font-semibold" : ""}`,
+          style: { flexGrow: Math.max(1, shot.end - shot.start), flexBasis: 0 },
+          title: `${shot.label ?? shot.id} \xB7 ${seconds(shot.end - shot.start)}`,
+          "data-shot": shot.id,
+          "data-issue": mark ?? void 0,
+          onClick: () => {
+            controller.select({ shot: shot.id });
+            controller.seekShot(shot.id);
+          },
+          children: [
+            mark && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: mark === "error" ? "text-red-500" : "text-amber-500", children: "\u25CF " }),
+            shot.label ?? shot.id
+          ]
+        },
+        shot.id
+      );
+    }) })
+  ] });
+}
+
+// src/animation-editor/AnimationEditor.tsx
+var import_animation_editor2 = require("@pixerate/editor/animation-editor");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AnimationEditor({ controller, values, 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, 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)) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimationEditor,
+  AnimationStage,
+  ShotTimeline,
+  useAnimationEditor,
+  useAnimationEditorController,
+  useAnimationEditorState,
+  useAnimationEditorTools
+});
+//# sourceMappingURL=index.cjs.map

package/dist/animation-editor/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/animation-editor/index.ts","../../src/animation-editor/useAnimationEditor.ts","../../src/animation-editor/AnimationStage.tsx","../../src/animation-editor/ShotTimeline.tsx","../../src/animation-editor/AnimationEditor.tsx"],"sourcesContent":["export * from './useAnimationEditor';\nexport * from './AnimationStage';\nexport * from './ShotTimeline';\nexport * from './AnimationEditor';\n","import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';\nimport {\n  AnimationEditorController,\n  createAnimationEditorToolProvider,\n  type AnimationEditorOptions,\n  type AnimationEditorState,\n  type AnimationEditorToolProviderOptions,\n} from '@pixerate/editor/animation-editor';\nimport type { ToolRegistry } from '@pixerate/editor/tools';\n\n/** An `AnimationEditorController` created once for the component's lifetime (destroyed on unmount). */\nexport function useAnimationEditorController(options: AnimationEditorOptions = {}): AnimationEditorController {\n  const ref = useRef<AnimationEditorController | null>(null);\n  if (!ref.current) ref.current = new AnimationEditorController(options);\n  const controller = ref.current;\n  useEffect(() => () => controller.destroy(), [controller]);\n  return controller;\n}\n\n/** The controller's state (re-renders on every change, including each played frame). */\nexport function useAnimationEditorState(controller: AnimationEditorController): AnimationEditorState {\n  return useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);\n}\n\nexport interface UseAnimationEditorResult {\n  controller: AnimationEditorController;\n  state: AnimationEditorState;\n  play: () => void;\n  pause: () => void;\n  toggle: () => void;\n  seek: (time: number) => void;\n  undo: () => void;\n  redo: () => void;\n  /** The frame at the playhead as SVG. */\n  toSvg: () => string;\n}\n\n/**\n * Subscribes to an animation editor controller and exposes its state with bound actions.\n * Pass options instead of a controller to create one for the component's lifetime.\n */\nexport function useAnimationEditor(controllerOrOptions: AnimationEditorController | AnimationEditorOptions = {}): UseAnimationEditorResult {\n  const own = useRef<AnimationEditorController | null>(null);\n  let controller: AnimationEditorController;\n  if (controllerOrOptions instanceof AnimationEditorController) controller = controllerOrOptions;\n  else {\n    if (!own.current) own.current = new AnimationEditorController(controllerOrOptions);\n    controller = own.current;\n  }\n  useEffect(() => () => own.current?.destroy(), []);\n  const state = useAnimationEditorState(controller);\n  const actions = useMemo(\n    () => ({\n      play: () => controller.play(),\n      pause: () => controller.pause(),\n      toggle: () => controller.toggle(),\n      seek: (time: number) => controller.seek(time),\n      undo: () => void controller.undo(),\n      redo: () => void controller.redo(),\n      toSvg: () => controller.toSvg(),\n    }),\n    [controller],\n  );\n  return { controller, state, ...actions };\n}\n\n/**\n * Registers the animation editor's agent tools (`get_animation`, `add_commands`,\n * `export_flair_effect`, …) in `registry` while mounted.\n */\nexport function useAnimationEditorTools(\n  registry: ToolRegistry | null | undefined,\n  controller: AnimationEditorController,\n  options: AnimationEditorToolProviderOptions = {},\n): void {\n  const { id, namespace, readOnly, rasterize } = options;\n  useEffect(() => {\n    if (!registry) return;\n    return registry.register(createAnimationEditorToolProvider(controller, { id, namespace, readOnly, rasterize }));\n  }, [registry, controller, id, namespace, readOnly, rasterize]);\n}\n","import React, { useMemo } from 'react';\nimport type { AnimationEditorController, MotionFrameOptions } from '@pixerate/editor/animation-editor';\nimport { useAnimationEditorState } from './useAnimationEditor';\n\nexport interface AnimationStageProps {\n  controller: AnimationEditorController;\n  /** Control values to preview (`{ accent: \"#0ea5e9\" }`). */\n  values?: MotionFrameOptions['values'];\n  className?: string;\n}\n\n/** The animation's frame at the playhead, drawn as inline SVG scaled to the stage's width. */\nexport function AnimationStage({ controller, values, className = '' }: AnimationStageProps) {\n  const state = useAnimationEditorState(controller);\n  const { scene, time } = state;\n  const svg = useMemo(\n    () => controller.toSvg(time, { pretty: false, idPrefix: 'ae-', values }).replace(/<svg ([^>]*?)width=\"[^\"]*\" height=\"[^\"]*\"/, '<svg $1width=\"100%\" height=\"100%\"'),\n    [controller, scene, time, values],\n  );\n  return (\n    <div\n      className={`relative overflow-hidden ${className}`}\n      style={{ aspectRatio: `${scene.artwork.width} / ${scene.artwork.height}` }}\n      data-animation-stage=\"\"\n      role=\"img\"\n      aria-label={`${scene.name} at ${(time / 1000).toFixed(2)} s`}\n      dangerouslySetInnerHTML={{ __html: svg }}\n    />\n  );\n}\n","import React from 'react';\nimport type { AnimationEditorController, MotionIssue } from '@pixerate/editor/animation-editor';\nimport { useAnimationEditorState } from './useAnimationEditor';\n\nexport interface ShotTimelineProps {\n  controller: AnimationEditorController;\n  className?: string;\n}\n\nconst seconds = (ms: number) => `${(ms / 1000).toFixed(1)} s`;\n\nfunction worst(issues: readonly MotionIssue[]): 'error' | 'warning' | null {\n  if (issues.some((i) => i.severity === 'error')) return 'error';\n  if (issues.some((i) => i.severity === 'warning')) return 'warning';\n  return null;\n}\n\n/**\n * Play / pause, the playhead and one block per shot (as wide as it is long): click a shot to\n * select it and jump to its start, click the ruler to seek. Shots with errors or warnings are marked.\n */\nexport function ShotTimeline({ controller, className = '' }: ShotTimelineProps) {\n  const state = useAnimationEditorState(controller);\n  const { duration, shots, time, playing, selection, issues } = state;\n  const span = Math.max(1, duration);\n  const onRuler = (event: React.PointerEvent<HTMLDivElement>) => {\n    const box = event.currentTarget.getBoundingClientRect();\n    controller.seek(((event.clientX - box.left) / Math.max(1, box.width)) * span);\n  };\n  return (\n    <div className={`flex flex-col gap-1 ${className}`} data-shot-timeline=\"\">\n      <div className=\"flex items-center gap-2 text-xs\">\n        <button type=\"button\" className=\"rounded border border-border px-2 py-0.5\" onClick={() => controller.toggle()} aria-label={playing ? 'Pause' : 'Play'} disabled={!shots.length}>\n          {playing ? 'Pause' : 'Play'}\n        </button>\n        <span className=\"tabular-nums text-muted-foreground\">\n          {seconds(time)} / {seconds(duration)}\n        </span>\n      </div>\n      <div className=\"relative h-3 cursor-pointer rounded bg-muted\" onPointerDown={onRuler} role=\"slider\" aria-label=\"Playhead\" aria-valuemin={0} aria-valuemax={duration} aria-valuenow={Math.round(time)} tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === 'ArrowRight') controller.seek(time + 100);\n          if (e.key === 'ArrowLeft') controller.seek(time - 100);\n        }}>\n        <div className=\"absolute inset-y-0 w-0.5 bg-rose-500\" style={{ left: `${(time / span) * 100}%` }} />\n      </div>\n      <div className=\"flex w-full gap-px\" role=\"group\" aria-label=\"Shots\">\n        {shots.map((shot) => {\n          const mark = worst(issues.filter((i) => i.shot === shot.id));\n          const selected = selection?.shot === shot.id;\n          return (\n            <button\n              key={shot.id}\n              type=\"button\"\n              className={`min-w-0 truncate rounded border px-1 py-1 text-left text-[11px] ${selected ? 'border-rose-500 bg-rose-500/10' : 'border-border'} ${state.currentShot === shot.id ? 'font-semibold' : ''}`}\n              style={{ flexGrow: Math.max(1, shot.end - shot.start), flexBasis: 0 }}\n              title={`${shot.label ?? shot.id} · ${seconds(shot.end - shot.start)}`}\n              data-shot={shot.id}\n              data-issue={mark ?? undefined}\n              onClick={() => {\n                controller.select({ shot: shot.id });\n                controller.seekShot(shot.id);\n              }}\n            >\n              {mark && <span className={mark === 'error' ? 'text-red-500' : 'text-amber-500'}>● </span>}\n              {shot.label ?? shot.id}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n","import React from 'react';\nimport { motionIssueLine, type AnimationEditorController, type MotionFrameOptions } from '@pixerate/editor/animation-editor';\nimport { AnimationStage } from './AnimationStage';\nimport { ShotTimeline } from './ShotTimeline';\nimport { useAnimationEditorState } from './useAnimationEditor';\n\nexport interface AnimationEditorProps {\n  controller: AnimationEditorController;\n  values?: MotionFrameOptions['values'];\n  /** List the scene's issues under the timeline (default true). */\n  showIssues?: boolean;\n  className?: string;\n}\n\n/** Stage, shot timeline and issue list for an `AnimationEditorController`. */\nexport function AnimationEditor({ controller, values, showIssues = true, className = '' }: AnimationEditorProps) {\n  const { issues } = useAnimationEditorState(controller);\n  return (\n    <div className={`flex flex-col gap-2 ${className}`} data-animation-editor=\"\">\n      <AnimationStage controller={controller} values={values} className=\"rounded-md border border-border bg-muted/40\" />\n      <ShotTimeline controller={controller} />\n      {showIssues && issues.length > 0 && (\n        <ul className=\"space-y-0.5 text-xs\" aria-label=\"Animation issues\">\n          {issues.map((issue, i) => (\n            <li key={i} className={issue.severity === 'error' ? 'text-red-500' : issue.severity === 'warning' ? 'text-amber-500' : 'text-muted-foreground'}>\n              {motionIssueLine(issue)}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAiE;AACjE,8BAMO;AAIA,SAAS,6BAA6B,UAAkC,CAAC,GAA8B;AAC5G,QAAM,UAAM,qBAAyC,IAAI;AACzD,MAAI,CAAC,IAAI,QAAS,KAAI,UAAU,IAAI,kDAA0B,OAAO;AACrE,QAAM,aAAa,IAAI;AACvB,8BAAU,MAAM,MAAM,WAAW,QAAQ,GAAG,CAAC,UAAU,CAAC;AACxD,SAAO;AACT;AAGO,SAAS,wBAAwB,YAA6D;AACnG,aAAO,mCAAqB,WAAW,WAAW,WAAW,UAAU,WAAW,QAAQ;AAC5F;AAmBO,SAAS,mBAAmB,sBAA0E,CAAC,GAA6B;AACzI,QAAM,UAAM,qBAAyC,IAAI;AACzD,MAAI;AACJ,MAAI,+BAA+B,kDAA2B,cAAa;AAAA,OACtE;AACH,QAAI,CAAC,IAAI,QAAS,KAAI,UAAU,IAAI,kDAA0B,mBAAmB;AACjF,iBAAa,IAAI;AAAA,EACnB;AACA,8BAAU,MAAM,MAAM,IAAI,SAAS,QAAQ,GAAG,CAAC,CAAC;AAChD,QAAM,QAAQ,wBAAwB,UAAU;AAChD,QAAM,cAAU;AAAA,IACd,OAAO;AAAA,MACL,MAAM,MAAM,WAAW,KAAK;AAAA,MAC5B,OAAO,MAAM,WAAW,MAAM;AAAA,MAC9B,QAAQ,MAAM,WAAW,OAAO;AAAA,MAChC,MAAM,CAAC,SAAiB,WAAW,KAAK,IAAI;AAAA,MAC5C,MAAM,MAAM,KAAK,WAAW,KAAK;AAAA,MACjC,MAAM,MAAM,KAAK,WAAW,KAAK;AAAA,MACjC,OAAO,MAAM,WAAW,MAAM;AAAA,IAChC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SAAO,EAAE,YAAY,OAAO,GAAG,QAAQ;AACzC;AAMO,SAAS,wBACd,UACA,YACA,UAA8C,CAAC,GACzC;AACN,QAAM,EAAE,IAAI,WAAW,UAAU,UAAU,IAAI;AAC/C,8BAAU,MAAM;AACd,QAAI,CAAC,SAAU;AACf,WAAO,SAAS,aAAS,2DAAkC,YAAY,EAAE,IAAI,WAAW,UAAU,UAAU,CAAC,CAAC;AAAA,EAChH,GAAG,CAAC,UAAU,YAAY,IAAI,WAAW,UAAU,SAAS,CAAC;AAC/D;;;AChFA,IAAAA,gBAA+B;AAoB3B;AARG,SAAS,eAAe,EAAE,YAAY,QAAQ,YAAY,GAAG,GAAwB;AAC1F,QAAM,QAAQ,wBAAwB,UAAU;AAChD,QAAM,EAAE,OAAO,KAAK,IAAI;AACxB,QAAM,UAAM;AAAA,IACV,MAAM,WAAW,MAAM,MAAM,EAAE,QAAQ,OAAO,UAAU,OAAO,OAAO,CAAC,EAAE,QAAQ,6CAA6C,mCAAmC;AAAA,IACjK,CAAC,YAAY,OAAO,MAAM,MAAM;AAAA,EAClC;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,4BAA4B,SAAS;AAAA,MAChD,OAAO,EAAE,aAAa,GAAG,MAAM,QAAQ,KAAK,MAAM,MAAM,QAAQ,MAAM,GAAG;AAAA,MACzE,wBAAqB;AAAA,MACrB,MAAK;AAAA,MACL,cAAY,GAAG,MAAM,IAAI,QAAQ,OAAO,KAAM,QAAQ,CAAC,CAAC;AAAA,MACxD,yBAAyB,EAAE,QAAQ,IAAI;AAAA;AAAA,EACzC;AAEJ;;;ACGQ,IAAAC,sBAAA;AAvBR,IAAM,UAAU,CAAC,OAAe,IAAI,KAAK,KAAM,QAAQ,CAAC,CAAC;AAEzD,SAAS,MAAM,QAA4D;AACzE,MAAI,OAAO,KAAK,CAAC,MAAM,EAAE,aAAa,OAAO,EAAG,QAAO;AACvD,MAAI,OAAO,KAAK,CAAC,MAAM,EAAE,aAAa,SAAS,EAAG,QAAO;AACzD,SAAO;AACT;AAMO,SAAS,aAAa,EAAE,YAAY,YAAY,GAAG,GAAsB;AAC9E,QAAM,QAAQ,wBAAwB,UAAU;AAChD,QAAM,EAAE,UAAU,OAAO,MAAM,SAAS,WAAW,OAAO,IAAI;AAC9D,QAAM,OAAO,KAAK,IAAI,GAAG,QAAQ;AACjC,QAAM,UAAU,CAAC,UAA8C;AAC7D,UAAM,MAAM,MAAM,cAAc,sBAAsB;AACtD,eAAW,MAAO,MAAM,UAAU,IAAI,QAAQ,KAAK,IAAI,GAAG,IAAI,KAAK,IAAK,IAAI;AAAA,EAC9E;AACA,SACE,8CAAC,SAAI,WAAW,uBAAuB,SAAS,IAAI,sBAAmB,IACrE;AAAA,kDAAC,SAAI,WAAU,mCACb;AAAA,mDAAC,YAAO,MAAK,UAAS,WAAU,4CAA2C,SAAS,MAAM,WAAW,OAAO,GAAG,cAAY,UAAU,UAAU,QAAQ,UAAU,CAAC,MAAM,QACrK,oBAAU,UAAU,QACvB;AAAA,MACA,8CAAC,UAAK,WAAU,sCACb;AAAA,gBAAQ,IAAI;AAAA,QAAE;AAAA,QAAI,QAAQ,QAAQ;AAAA,SACrC;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QAAI,WAAU;AAAA,QAA+C,eAAe;AAAA,QAAS,MAAK;AAAA,QAAS,cAAW;AAAA,QAAW,iBAAe;AAAA,QAAG,iBAAe;AAAA,QAAU,iBAAe,KAAK,MAAM,IAAI;AAAA,QAAG,UAAU;AAAA,QAC9M,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,aAAc,YAAW,KAAK,OAAO,GAAG;AACtD,cAAI,EAAE,QAAQ,YAAa,YAAW,KAAK,OAAO,GAAG;AAAA,QACvD;AAAA,QACA,uDAAC,SAAI,WAAU,wCAAuC,OAAO,EAAE,MAAM,GAAI,OAAO,OAAQ,GAAG,IAAI,GAAG;AAAA;AAAA,IACpG;AAAA,IACA,6CAAC,SAAI,WAAU,sBAAqB,MAAK,SAAQ,cAAW,SACzD,gBAAM,IAAI,CAAC,SAAS;AACnB,YAAM,OAAO,MAAM,OAAO,OAAO,CAAC,MAAM,EAAE,SAAS,KAAK,EAAE,CAAC;AAC3D,YAAM,WAAW,WAAW,SAAS,KAAK;AAC1C,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,WAAW,mEAAmE,WAAW,mCAAmC,eAAe,IAAI,MAAM,gBAAgB,KAAK,KAAK,kBAAkB,EAAE;AAAA,UACnM,OAAO,EAAE,UAAU,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,KAAK,GAAG,WAAW,EAAE;AAAA,UACpE,OAAO,GAAG,KAAK,SAAS,KAAK,EAAE,SAAM,QAAQ,KAAK,MAAM,KAAK,KAAK,CAAC;AAAA,UACnE,aAAW,KAAK;AAAA,UAChB,cAAY,QAAQ;AAAA,UACpB,SAAS,MAAM;AACb,uBAAW,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;AACnC,uBAAW,SAAS,KAAK,EAAE;AAAA,UAC7B;AAAA,UAEC;AAAA,oBAAQ,6CAAC,UAAK,WAAW,SAAS,UAAU,iBAAiB,kBAAkB,qBAAE;AAAA,YACjF,KAAK,SAAS,KAAK;AAAA;AAAA;AAAA,QAbf,KAAK;AAAA,MAcZ;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;;;ACvEA,IAAAC,2BAAyF;AAiBrF,IAAAC,sBAAA;AAHG,SAAS,gBAAgB,EAAE,YAAY,QAAQ,aAAa,MAAM,YAAY,GAAG,GAAyB;AAC/G,QAAM,EAAE,OAAO,IAAI,wBAAwB,UAAU;AACrD,SACE,8CAAC,SAAI,WAAW,uBAAuB,SAAS,IAAI,yBAAsB,IACxE;AAAA,iDAAC,kBAAe,YAAwB,QAAgB,WAAU,+CAA8C;AAAA,IAChH,6CAAC,gBAAa,YAAwB;AAAA,IACrC,cAAc,OAAO,SAAS,KAC7B,6CAAC,QAAG,WAAU,uBAAsB,cAAW,oBAC5C,iBAAO,IAAI,CAAC,OAAO,MAClB,6CAAC,QAAW,WAAW,MAAM,aAAa,UAAU,iBAAiB,MAAM,aAAa,YAAY,mBAAmB,yBACpH,wDAAgB,KAAK,KADf,CAET,CACD,GACH;AAAA,KAEJ;AAEJ;","names":["import_react","import_jsx_runtime","import_animation_editor","import_jsx_runtime"]}

package/dist/animation-editor/index.d.cts

@@ -0,0 +1,61 @@
+import { AnimationEditorController, AnimationEditorState, AnimationEditorOptions, AnimationEditorToolProviderOptions, MotionFrameOptions } from '@pixerate/editor/animation-editor';
+import { ToolRegistry } from '@pixerate/editor/tools';
+import React__default from 'react';
+
+/** An `AnimationEditorController` created once for the component's lifetime (destroyed on unmount). */
+declare function useAnimationEditorController(options?: AnimationEditorOptions): AnimationEditorController;
+/** The controller's state (re-renders on every change, including each played frame). */
+declare function useAnimationEditorState(controller: AnimationEditorController): AnimationEditorState;
+interface UseAnimationEditorResult {
+    controller: AnimationEditorController;
+    state: AnimationEditorState;
+    play: () => void;
+    pause: () => void;
+    toggle: () => void;
+    seek: (time: number) => void;
+    undo: () => void;
+    redo: () => void;
+    /** The frame at the playhead as SVG. */
+    toSvg: () => string;
+}
+/**
+ * Subscribes to an animation editor controller and exposes its state with bound actions.
+ * Pass options instead of a controller to create one for the component's lifetime.
+ */
+declare function useAnimationEditor(controllerOrOptions?: AnimationEditorController | AnimationEditorOptions): UseAnimationEditorResult;
+/**
+ * Registers the animation editor's agent tools (`get_animation`, `add_commands`,
+ * `export_flair_effect`, …) in `registry` while mounted.
+ */
+declare function useAnimationEditorTools(registry: ToolRegistry | null | undefined, controller: AnimationEditorController, options?: AnimationEditorToolProviderOptions): void;
+
+interface AnimationStageProps {
+    controller: AnimationEditorController;
+    /** Control values to preview (`{ accent: "#0ea5e9" }`). */
+    values?: MotionFrameOptions['values'];
+    className?: string;
+}
+/** The animation's frame at the playhead, drawn as inline SVG scaled to the stage's width. */
+declare function AnimationStage({ controller, values, className }: AnimationStageProps): React__default.JSX.Element;
+
+interface ShotTimelineProps {
+    controller: AnimationEditorController;
+    className?: string;
+}
+/**
+ * Play / pause, the playhead and one block per shot (as wide as it is long): click a shot to
+ * select it and jump to its start, click the ruler to seek. Shots with errors or warnings are marked.
+ */
+declare function ShotTimeline({ controller, className }: ShotTimelineProps): React__default.JSX.Element;
+
+interface AnimationEditorProps {
+    controller: AnimationEditorController;
+    values?: MotionFrameOptions['values'];
+    /** List the scene's issues under the timeline (default true). */
+    showIssues?: boolean;
+    className?: string;
+}
+/** Stage, shot timeline and issue list for an `AnimationEditorController`. */
+declare function AnimationEditor({ controller, values, showIssues, className }: AnimationEditorProps): React__default.JSX.Element;
+
+export { AnimationEditor, type AnimationEditorProps, AnimationStage, type AnimationStageProps, ShotTimeline, type ShotTimelineProps, type UseAnimationEditorResult, useAnimationEditor, useAnimationEditorController, useAnimationEditorState, useAnimationEditorTools };

package/dist/animation-editor/index.d.ts

@@ -0,0 +1,61 @@
+import { AnimationEditorController, AnimationEditorState, AnimationEditorOptions, AnimationEditorToolProviderOptions, MotionFrameOptions } from '@pixerate/editor/animation-editor';
+import { ToolRegistry } from '@pixerate/editor/tools';
+import React__default from 'react';
+
+/** An `AnimationEditorController` created once for the component's lifetime (destroyed on unmount). */
+declare function useAnimationEditorController(options?: AnimationEditorOptions): AnimationEditorController;
+/** The controller's state (re-renders on every change, including each played frame). */
+declare function useAnimationEditorState(controller: AnimationEditorController): AnimationEditorState;
+interface UseAnimationEditorResult {
+    controller: AnimationEditorController;
+    state: AnimationEditorState;
+    play: () => void;
+    pause: () => void;
+    toggle: () => void;
+    seek: (time: number) => void;
+    undo: () => void;
+    redo: () => void;
+    /** The frame at the playhead as SVG. */
+    toSvg: () => string;
+}
+/**
+ * Subscribes to an animation editor controller and exposes its state with bound actions.
+ * Pass options instead of a controller to create one for the component's lifetime.
+ */
+declare function useAnimationEditor(controllerOrOptions?: AnimationEditorController | AnimationEditorOptions): UseAnimationEditorResult;
+/**
+ * Registers the animation editor's agent tools (`get_animation`, `add_commands`,
+ * `export_flair_effect`, …) in `registry` while mounted.
+ */
+declare function useAnimationEditorTools(registry: ToolRegistry | null | undefined, controller: AnimationEditorController, options?: AnimationEditorToolProviderOptions): void;
+
+interface AnimationStageProps {
+    controller: AnimationEditorController;
+    /** Control values to preview (`{ accent: "#0ea5e9" }`). */
+    values?: MotionFrameOptions['values'];
+    className?: string;
+}
+/** The animation's frame at the playhead, drawn as inline SVG scaled to the stage's width. */
+declare function AnimationStage({ controller, values, className }: AnimationStageProps): React__default.JSX.Element;
+
+interface ShotTimelineProps {
+    controller: AnimationEditorController;
+    className?: string;
+}
+/**
+ * Play / pause, the playhead and one block per shot (as wide as it is long): click a shot to
+ * select it and jump to its start, click the ruler to seek. Shots with errors or warnings are marked.
+ */
+declare function ShotTimeline({ controller, className }: ShotTimelineProps): React__default.JSX.Element;
+
+interface AnimationEditorProps {
+    controller: AnimationEditorController;
+    values?: MotionFrameOptions['values'];
+    /** List the scene's issues under the timeline (default true). */
+    showIssues?: boolean;
+    className?: string;
+}
+/** Stage, shot timeline and issue list for an `AnimationEditorController`. */
+declare function AnimationEditor({ controller, values, showIssues, className }: AnimationEditorProps): React__default.JSX.Element;
+
+export { AnimationEditor, type AnimationEditorProps, AnimationStage, type AnimationStageProps, ShotTimeline, type ShotTimelineProps, type UseAnimationEditorResult, useAnimationEditor, useAnimationEditorController, useAnimationEditorState, useAnimationEditorTools };

package/dist/animation-editor/index.js

@@ -0,0 +1,162 @@
+// src/animation-editor/useAnimationEditor.ts
+import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import {
+  AnimationEditorController,
+  createAnimationEditorToolProvider
+} from "@pixerate/editor/animation-editor";
+function useAnimationEditorController(options = {}) {
+  const ref = useRef(null);
+  if (!ref.current) ref.current = new AnimationEditorController(options);
+  const controller = ref.current;
+  useEffect(() => () => controller.destroy(), [controller]);
+  return controller;
+}
+function useAnimationEditorState(controller) {
+  return useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
+}
+function useAnimationEditor(controllerOrOptions = {}) {
+  const own = useRef(null);
+  let controller;
+  if (controllerOrOptions instanceof AnimationEditorController) controller = controllerOrOptions;
+  else {
+    if (!own.current) own.current = new AnimationEditorController(controllerOrOptions);
+    controller = own.current;
+  }
+  useEffect(() => () => own.current?.destroy(), []);
+  const state = useAnimationEditorState(controller);
+  const actions = useMemo(
+    () => ({
+      play: () => controller.play(),
+      pause: () => controller.pause(),
+      toggle: () => controller.toggle(),
+      seek: (time) => controller.seek(time),
+      undo: () => void controller.undo(),
+      redo: () => void controller.redo(),
+      toSvg: () => controller.toSvg()
+    }),
+    [controller]
+  );
+  return { controller, state, ...actions };
+}
+function useAnimationEditorTools(registry, controller, options = {}) {
+  const { id, namespace, readOnly, rasterize } = options;
+  useEffect(() => {
+    if (!registry) return;
+    return registry.register(createAnimationEditorToolProvider(controller, { id, namespace, readOnly, rasterize }));
+  }, [registry, controller, id, namespace, readOnly, rasterize]);
+}
+
+// src/animation-editor/AnimationStage.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx } from "react/jsx-runtime";
+function AnimationStage({ controller, values, className = "" }) {
+  const state = useAnimationEditorState(controller);
+  const { scene, time } = state;
+  const svg = useMemo2(
+    () => controller.toSvg(time, { pretty: false, idPrefix: "ae-", values }).replace(/<svg ([^>]*?)width="[^"]*" height="[^"]*"/, '<svg $1width="100%" height="100%"'),
+    [controller, scene, time, values]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `relative overflow-hidden ${className}`,
+      style: { aspectRatio: `${scene.artwork.width} / ${scene.artwork.height}` },
+      "data-animation-stage": "",
+      role: "img",
+      "aria-label": `${scene.name} at ${(time / 1e3).toFixed(2)} s`,
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+
+// src/animation-editor/ShotTimeline.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var seconds = (ms) => `${(ms / 1e3).toFixed(1)} s`;
+function worst(issues) {
+  if (issues.some((i) => i.severity === "error")) return "error";
+  if (issues.some((i) => i.severity === "warning")) return "warning";
+  return null;
+}
+function ShotTimeline({ controller, className = "" }) {
+  const state = useAnimationEditorState(controller);
+  const { duration, shots, time, playing, selection, issues } = state;
+  const span = Math.max(1, duration);
+  const onRuler = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    controller.seek((event.clientX - box.left) / Math.max(1, box.width) * span);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-1 ${className}`, "data-shot-timeline": "", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx2("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__ */ jsxs("span", { className: "tabular-nums text-muted-foreground", children: [
+        seconds(time),
+        " / ",
+        seconds(duration)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "relative h-3 cursor-pointer rounded bg-muted",
+        onPointerDown: onRuler,
+        role: "slider",
+        "aria-label": "Playhead",
+        "aria-valuemin": 0,
+        "aria-valuemax": duration,
+        "aria-valuenow": Math.round(time),
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "ArrowRight") controller.seek(time + 100);
+          if (e.key === "ArrowLeft") controller.seek(time - 100);
+        },
+        children: /* @__PURE__ */ jsx2("div", { className: "absolute inset-y-0 w-0.5 bg-rose-500", style: { left: `${time / span * 100}%` } })
+      }
+    ),
+    /* @__PURE__ */ jsx2("div", { className: "flex w-full gap-px", role: "group", "aria-label": "Shots", children: shots.map((shot) => {
+      const mark = worst(issues.filter((i) => i.shot === shot.id));
+      const selected = selection?.shot === shot.id;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `min-w-0 truncate rounded border px-1 py-1 text-left text-[11px] ${selected ? "border-rose-500 bg-rose-500/10" : "border-border"} ${state.currentShot === shot.id ? "font-semibold" : ""}`,
+          style: { flexGrow: Math.max(1, shot.end - shot.start), flexBasis: 0 },
+          title: `${shot.label ?? shot.id} \xB7 ${seconds(shot.end - shot.start)}`,
+          "data-shot": shot.id,
+          "data-issue": mark ?? void 0,
+          onClick: () => {
+            controller.select({ shot: shot.id });
+            controller.seekShot(shot.id);
+          },
+          children: [
+            mark && /* @__PURE__ */ jsx2("span", { className: mark === "error" ? "text-red-500" : "text-amber-500", children: "\u25CF " }),
+            shot.label ?? shot.id
+          ]
+        },
+        shot.id
+      );
+    }) })
+  ] });
+}
+
+// src/animation-editor/AnimationEditor.tsx
+import { motionIssueLine } from "@pixerate/editor/animation-editor";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function AnimationEditor({ controller, values, 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, 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)) })
+  ] });
+}
+export {
+  AnimationEditor,
+  AnimationStage,
+  ShotTimeline,
+  useAnimationEditor,
+  useAnimationEditorController,
+  useAnimationEditorState,
+  useAnimationEditorTools
+};
+//# sourceMappingURL=index.js.map

package/dist/animation-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/animation-editor/useAnimationEditor.ts","../../src/animation-editor/AnimationStage.tsx","../../src/animation-editor/ShotTimeline.tsx","../../src/animation-editor/AnimationEditor.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';\nimport {\n  AnimationEditorController,\n  createAnimationEditorToolProvider,\n  type AnimationEditorOptions,\n  type AnimationEditorState,\n  type AnimationEditorToolProviderOptions,\n} from '@pixerate/editor/animation-editor';\nimport type { ToolRegistry } from '@pixerate/editor/tools';\n\n/** An `AnimationEditorController` created once for the component's lifetime (destroyed on unmount). */\nexport function useAnimationEditorController(options: AnimationEditorOptions = {}): AnimationEditorController {\n  const ref = useRef<AnimationEditorController | null>(null);\n  if (!ref.current) ref.current = new AnimationEditorController(options);\n  const controller = ref.current;\n  useEffect(() => () => controller.destroy(), [controller]);\n  return controller;\n}\n\n/** The controller's state (re-renders on every change, including each played frame). */\nexport function useAnimationEditorState(controller: AnimationEditorController): AnimationEditorState {\n  return useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);\n}\n\nexport interface UseAnimationEditorResult {\n  controller: AnimationEditorController;\n  state: AnimationEditorState;\n  play: () => void;\n  pause: () => void;\n  toggle: () => void;\n  seek: (time: number) => void;\n  undo: () => void;\n  redo: () => void;\n  /** The frame at the playhead as SVG. */\n  toSvg: () => string;\n}\n\n/**\n * Subscribes to an animation editor controller and exposes its state with bound actions.\n * Pass options instead of a controller to create one for the component's lifetime.\n */\nexport function useAnimationEditor(controllerOrOptions: AnimationEditorController | AnimationEditorOptions = {}): UseAnimationEditorResult {\n  const own = useRef<AnimationEditorController | null>(null);\n  let controller: AnimationEditorController;\n  if (controllerOrOptions instanceof AnimationEditorController) controller = controllerOrOptions;\n  else {\n    if (!own.current) own.current = new AnimationEditorController(controllerOrOptions);\n    controller = own.current;\n  }\n  useEffect(() => () => own.current?.destroy(), []);\n  const state = useAnimationEditorState(controller);\n  const actions = useMemo(\n    () => ({\n      play: () => controller.play(),\n      pause: () => controller.pause(),\n      toggle: () => controller.toggle(),\n      seek: (time: number) => controller.seek(time),\n      undo: () => void controller.undo(),\n      redo: () => void controller.redo(),\n      toSvg: () => controller.toSvg(),\n    }),\n    [controller],\n  );\n  return { controller, state, ...actions };\n}\n\n/**\n * Registers the animation editor's agent tools (`get_animation`, `add_commands`,\n * `export_flair_effect`, …) in `registry` while mounted.\n */\nexport function useAnimationEditorTools(\n  registry: ToolRegistry | null | undefined,\n  controller: AnimationEditorController,\n  options: AnimationEditorToolProviderOptions = {},\n): void {\n  const { id, namespace, readOnly, rasterize } = options;\n  useEffect(() => {\n    if (!registry) return;\n    return registry.register(createAnimationEditorToolProvider(controller, { id, namespace, readOnly, rasterize }));\n  }, [registry, controller, id, namespace, readOnly, rasterize]);\n}\n","import React, { useMemo } from 'react';\nimport type { AnimationEditorController, MotionFrameOptions } from '@pixerate/editor/animation-editor';\nimport { useAnimationEditorState } from './useAnimationEditor';\n\nexport interface AnimationStageProps {\n  controller: AnimationEditorController;\n  /** Control values to preview (`{ accent: \"#0ea5e9\" }`). */\n  values?: MotionFrameOptions['values'];\n  className?: string;\n}\n\n/** The animation's frame at the playhead, drawn as inline SVG scaled to the stage's width. */\nexport function AnimationStage({ controller, values, className = '' }: AnimationStageProps) {\n  const state = useAnimationEditorState(controller);\n  const { scene, time } = state;\n  const svg = useMemo(\n    () => controller.toSvg(time, { pretty: false, idPrefix: 'ae-', values }).replace(/<svg ([^>]*?)width=\"[^\"]*\" height=\"[^\"]*\"/, '<svg $1width=\"100%\" height=\"100%\"'),\n    [controller, scene, time, values],\n  );\n  return (\n    <div\n      className={`relative overflow-hidden ${className}`}\n      style={{ aspectRatio: `${scene.artwork.width} / ${scene.artwork.height}` }}\n      data-animation-stage=\"\"\n      role=\"img\"\n      aria-label={`${scene.name} at ${(time / 1000).toFixed(2)} s`}\n      dangerouslySetInnerHTML={{ __html: svg }}\n    />\n  );\n}\n","import React from 'react';\nimport type { AnimationEditorController, MotionIssue } from '@pixerate/editor/animation-editor';\nimport { useAnimationEditorState } from './useAnimationEditor';\n\nexport interface ShotTimelineProps {\n  controller: AnimationEditorController;\n  className?: string;\n}\n\nconst seconds = (ms: number) => `${(ms / 1000).toFixed(1)} s`;\n\nfunction worst(issues: readonly MotionIssue[]): 'error' | 'warning' | null {\n  if (issues.some((i) => i.severity === 'error')) return 'error';\n  if (issues.some((i) => i.severity === 'warning')) return 'warning';\n  return null;\n}\n\n/**\n * Play / pause, the playhead and one block per shot (as wide as it is long): click a shot to\n * select it and jump to its start, click the ruler to seek. Shots with errors or warnings are marked.\n */\nexport function ShotTimeline({ controller, className = '' }: ShotTimelineProps) {\n  const state = useAnimationEditorState(controller);\n  const { duration, shots, time, playing, selection, issues } = state;\n  const span = Math.max(1, duration);\n  const onRuler = (event: React.PointerEvent<HTMLDivElement>) => {\n    const box = event.currentTarget.getBoundingClientRect();\n    controller.seek(((event.clientX - box.left) / Math.max(1, box.width)) * span);\n  };\n  return (\n    <div className={`flex flex-col gap-1 ${className}`} data-shot-timeline=\"\">\n      <div className=\"flex items-center gap-2 text-xs\">\n        <button type=\"button\" className=\"rounded border border-border px-2 py-0.5\" onClick={() => controller.toggle()} aria-label={playing ? 'Pause' : 'Play'} disabled={!shots.length}>\n          {playing ? 'Pause' : 'Play'}\n        </button>\n        <span className=\"tabular-nums text-muted-foreground\">\n          {seconds(time)} / {seconds(duration)}\n        </span>\n      </div>\n      <div className=\"relative h-3 cursor-pointer rounded bg-muted\" onPointerDown={onRuler} role=\"slider\" aria-label=\"Playhead\" aria-valuemin={0} aria-valuemax={duration} aria-valuenow={Math.round(time)} tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === 'ArrowRight') controller.seek(time + 100);\n          if (e.key === 'ArrowLeft') controller.seek(time - 100);\n        }}>\n        <div className=\"absolute inset-y-0 w-0.5 bg-rose-500\" style={{ left: `${(time / span) * 100}%` }} />\n      </div>\n      <div className=\"flex w-full gap-px\" role=\"group\" aria-label=\"Shots\">\n        {shots.map((shot) => {\n          const mark = worst(issues.filter((i) => i.shot === shot.id));\n          const selected = selection?.shot === shot.id;\n          return (\n            <button\n              key={shot.id}\n              type=\"button\"\n              className={`min-w-0 truncate rounded border px-1 py-1 text-left text-[11px] ${selected ? 'border-rose-500 bg-rose-500/10' : 'border-border'} ${state.currentShot === shot.id ? 'font-semibold' : ''}`}\n              style={{ flexGrow: Math.max(1, shot.end - shot.start), flexBasis: 0 }}\n              title={`${shot.label ?? shot.id} · ${seconds(shot.end - shot.start)}`}\n              data-shot={shot.id}\n              data-issue={mark ?? undefined}\n              onClick={() => {\n                controller.select({ shot: shot.id });\n                controller.seekShot(shot.id);\n              }}\n            >\n              {mark && <span className={mark === 'error' ? 'text-red-500' : 'text-amber-500'}>● </span>}\n              {shot.label ?? shot.id}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n","import React from 'react';\nimport { motionIssueLine, type AnimationEditorController, type MotionFrameOptions } from '@pixerate/editor/animation-editor';\nimport { AnimationStage } from './AnimationStage';\nimport { ShotTimeline } from './ShotTimeline';\nimport { useAnimationEditorState } from './useAnimationEditor';\n\nexport interface AnimationEditorProps {\n  controller: AnimationEditorController;\n  values?: MotionFrameOptions['values'];\n  /** List the scene's issues under the timeline (default true). */\n  showIssues?: boolean;\n  className?: string;\n}\n\n/** Stage, shot timeline and issue list for an `AnimationEditorController`. */\nexport function AnimationEditor({ controller, values, showIssues = true, className = '' }: AnimationEditorProps) {\n  const { issues } = useAnimationEditorState(controller);\n  return (\n    <div className={`flex flex-col gap-2 ${className}`} data-animation-editor=\"\">\n      <AnimationStage controller={controller} values={values} className=\"rounded-md border border-border bg-muted/40\" />\n      <ShotTimeline controller={controller} />\n      {showIssues && issues.length > 0 && (\n        <ul className=\"space-y-0.5 text-xs\" aria-label=\"Animation issues\">\n          {issues.map((issue, i) => (\n            <li key={i} className={issue.severity === 'error' ? 'text-red-500' : issue.severity === 'warning' ? 'text-amber-500' : 'text-muted-foreground'}>\n              {motionIssueLine(issue)}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["useMemo","useMemo","jsx","jsx","jsxs"]}