@pixerate/editor-react 0.78.1 → 0.79.0

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

@@ -1,6 +1,7 @@
-import { AnimationEditorController, AnimationEditorState, AnimationEditorOptions, AnimationEditorToolProviderOptions, MotionFrameOptions, MotionOnionSkin, MotionCommandBase } from '@pixerate/editor/animation-editor';
+import { AnimationEditorController, AnimationEditorState, AnimationEditorOptions, AnimationEditorToolProviderOptions, AnimationEffectsToolProviderOptions, MotionFrameOptions, MotionOnionSkin, MotionCommandBase } from '@pixerate/editor/animation-editor';
 import { ToolRegistry } from '@pixerate/editor/tools';
 import React__default from 'react';
+import { EffectProvider } from '@pixerate/editor/effects';
 
 /** An `AnimationEditorController` created once for the component's lifetime (destroyed on unmount). */
 declare function useAnimationEditorController(options?: AnimationEditorOptions): AnimationEditorController;
@@ -28,6 +29,12 @@ declare function useAnimationEditor(controllerOrOptions?: AnimationEditorControl
  * `export_flair_effect`, …) in `registry` while mounted.
  */
 declare function useAnimationEditorTools(registry: ToolRegistry | null | undefined, controller: AnimationEditorController, options?: AnimationEditorToolProviderOptions): void;
+/**
+ * Registers the animation editor's provider-effect tools (`search_effects`, `apply_effect`,
+ * `add_vector_effect`, …) in `registry` while mounted. They work once an effects provider is
+ * registered (see `useEffects`).
+ */
+declare function useAnimationEffectsTools(registry: ToolRegistry | null | undefined, controller: AnimationEditorController, options?: AnimationEffectsToolProviderOptions): void;
 
 interface AnimationStageProps {
     controller: AnimationEditorController;
@@ -77,6 +84,12 @@ interface AnimationEditorProps {
      * scrubber and issues only.
      */
     editable?: boolean;
+    /**
+     * An effects provider (see `@pixerate/editor/effects`), registered with the controller while
+     * mounted: provider motion applied to the picked element and vector effects, with an Effects
+     * panel. Optional: without one the editor is as before.
+     */
+    effects?: EffectProvider | null;
     className?: string;
 }
 /**
@@ -85,7 +98,7 @@ interface AnimationEditorProps {
  * playhead scrubber, and panels to edit commands, shots and scene settings by hand. Every edit
  * is one undo step.
  */
-declare function AnimationEditor({ controller, values, onionSkin, motionPaths, showIssues, editable, className }: AnimationEditorProps): React__default.JSX.Element;
+declare function AnimationEditor({ controller, values, onionSkin, motionPaths, showIssues, editable, effects, className }: AnimationEditorProps): React__default.JSX.Element;
 
 interface PlayheadScrubberProps {
     controller: AnimationEditorController;
@@ -166,4 +179,17 @@ interface SceneSettingsProps {
  */
 declare function SceneSettings({ controller, className }: SceneSettingsProps): React__default.JSX.Element;
 
-export { AnimationEditor, type AnimationEditorProps, AnimationStage, type AnimationStageProps, CommandInspector, type CommandInspectorProps, CommandList, type CommandListProps, EasePicker, type EasePickerProps, PlayheadScrubber, type PlayheadScrubberProps, SceneSettings, type SceneSettingsProps, ShotInspector, type ShotInspectorProps, ShotTimeline, type ShotTimelineProps, type UseAnimationEditorResult, useAnimationEditor, useAnimationEditorController, useAnimationEditorState, useAnimationEditorTools };
+interface AnimationEffectsPanelProps {
+    controller: AnimationEditorController;
+    /** The node motion effects are applied to (e.g. the element picked on the stage). */
+    node?: string | null;
+    className?: string;
+}
+/**
+ * Provider effects in an animation: apply a motion effect to a node (its changes become commands
+ * in a new shot), add a vector effect with its own picture, and change or remove the effects the
+ * scene holds. Every change is one undo step (a slider drag is one).
+ */
+declare function AnimationEffectsPanel({ controller, node, className }: AnimationEffectsPanelProps): React__default.JSX.Element;
+
+export { AnimationEditor, type AnimationEditorProps, AnimationEffectsPanel, type AnimationEffectsPanelProps, AnimationStage, type AnimationStageProps, CommandInspector, type CommandInspectorProps, CommandList, type CommandListProps, EasePicker, type EasePickerProps, PlayheadScrubber, type PlayheadScrubberProps, SceneSettings, type SceneSettingsProps, ShotInspector, type ShotInspectorProps, ShotTimeline, type ShotTimelineProps, type UseAnimationEditorResult, useAnimationEditor, useAnimationEditorController, useAnimationEditorState, useAnimationEditorTools, useAnimationEffectsTools };

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

@@ -1,6 +1,7 @@
-import { AnimationEditorController, AnimationEditorState, AnimationEditorOptions, AnimationEditorToolProviderOptions, MotionFrameOptions, MotionOnionSkin, MotionCommandBase } from '@pixerate/editor/animation-editor';
+import { AnimationEditorController, AnimationEditorState, AnimationEditorOptions, AnimationEditorToolProviderOptions, AnimationEffectsToolProviderOptions, MotionFrameOptions, MotionOnionSkin, MotionCommandBase } from '@pixerate/editor/animation-editor';
 import { ToolRegistry } from '@pixerate/editor/tools';
 import React__default from 'react';
+import { EffectProvider } from '@pixerate/editor/effects';
 
 /** An `AnimationEditorController` created once for the component's lifetime (destroyed on unmount). */
 declare function useAnimationEditorController(options?: AnimationEditorOptions): AnimationEditorController;
@@ -28,6 +29,12 @@ declare function useAnimationEditor(controllerOrOptions?: AnimationEditorControl
  * `export_flair_effect`, …) in `registry` while mounted.
  */
 declare function useAnimationEditorTools(registry: ToolRegistry | null | undefined, controller: AnimationEditorController, options?: AnimationEditorToolProviderOptions): void;
+/**
+ * Registers the animation editor's provider-effect tools (`search_effects`, `apply_effect`,
+ * `add_vector_effect`, …) in `registry` while mounted. They work once an effects provider is
+ * registered (see `useEffects`).
+ */
+declare function useAnimationEffectsTools(registry: ToolRegistry | null | undefined, controller: AnimationEditorController, options?: AnimationEffectsToolProviderOptions): void;
 
 interface AnimationStageProps {
     controller: AnimationEditorController;
@@ -77,6 +84,12 @@ interface AnimationEditorProps {
      * scrubber and issues only.
      */
     editable?: boolean;
+    /**
+     * An effects provider (see `@pixerate/editor/effects`), registered with the controller while
+     * mounted: provider motion applied to the picked element and vector effects, with an Effects
+     * panel. Optional: without one the editor is as before.
+     */
+    effects?: EffectProvider | null;
     className?: string;
 }
 /**
@@ -85,7 +98,7 @@ interface AnimationEditorProps {
  * playhead scrubber, and panels to edit commands, shots and scene settings by hand. Every edit
  * is one undo step.
  */
-declare function AnimationEditor({ controller, values, onionSkin, motionPaths, showIssues, editable, className }: AnimationEditorProps): React__default.JSX.Element;
+declare function AnimationEditor({ controller, values, onionSkin, motionPaths, showIssues, editable, effects, className }: AnimationEditorProps): React__default.JSX.Element;
 
 interface PlayheadScrubberProps {
     controller: AnimationEditorController;
@@ -166,4 +179,17 @@ interface SceneSettingsProps {
  */
 declare function SceneSettings({ controller, className }: SceneSettingsProps): React__default.JSX.Element;
 
-export { AnimationEditor, type AnimationEditorProps, AnimationStage, type AnimationStageProps, CommandInspector, type CommandInspectorProps, CommandList, type CommandListProps, EasePicker, type EasePickerProps, PlayheadScrubber, type PlayheadScrubberProps, SceneSettings, type SceneSettingsProps, ShotInspector, type ShotInspectorProps, ShotTimeline, type ShotTimelineProps, type UseAnimationEditorResult, useAnimationEditor, useAnimationEditorController, useAnimationEditorState, useAnimationEditorTools };
+interface AnimationEffectsPanelProps {
+    controller: AnimationEditorController;
+    /** The node motion effects are applied to (e.g. the element picked on the stage). */
+    node?: string | null;
+    className?: string;
+}
+/**
+ * Provider effects in an animation: apply a motion effect to a node (its changes become commands
+ * in a new shot), add a vector effect with its own picture, and change or remove the effects the
+ * scene holds. Every change is one undo step (a slider drag is one).
+ */
+declare function AnimationEffectsPanel({ controller, node, className }: AnimationEffectsPanelProps): React__default.JSX.Element;
+
+export { AnimationEditor, type AnimationEditorProps, AnimationEffectsPanel, type AnimationEffectsPanelProps, AnimationStage, type AnimationStageProps, CommandInspector, type CommandInspectorProps, CommandList, type CommandListProps, EasePicker, type EasePickerProps, PlayheadScrubber, type PlayheadScrubberProps, SceneSettings, type SceneSettingsProps, ShotInspector, type ShotInspectorProps, ShotTimeline, type ShotTimelineProps, type UseAnimationEditorResult, useAnimationEditor, useAnimationEditorController, useAnimationEditorState, useAnimationEditorTools, useAnimationEffectsTools };

package/dist/animation-editor/index.js

@@ -1,8 +1,17 @@
+import {
+  EffectParameters,
+  EffectsBrowser,
+  useEffectDescription,
+  useEffects
+} from "../chunk-WOQ3H7KA.js";
+import "../chunk-ZQZAKUUM.js";
+
 // src/animation-editor/useAnimationEditor.ts
 import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 import {
   AnimationEditorController,
-  createAnimationEditorToolProvider
+  createAnimationEditorToolProvider,
+  createAnimationEffectsToolProvider
 } from "@pixerate/editor/animation-editor";
 function useAnimationEditorController(options = {}) {
   const ref = useRef(null);
@@ -45,6 +54,13 @@ function useAnimationEditorTools(registry, controller, options = {}) {
     return registry.register(createAnimationEditorToolProvider(controller, { id, namespace, readOnly, rasterize }));
   }, [registry, controller, id, namespace, readOnly, rasterize]);
 }
+function useAnimationEffectsTools(registry, controller, options = {}) {
+  const { id, namespace, readOnly } = options;
+  useEffect(() => {
+    if (!registry) return;
+    return registry.register(createAnimationEffectsToolProvider(controller, { id, namespace, readOnly }));
+  }, [registry, controller, id, namespace, readOnly]);
+}
 
 // src/animation-editor/AnimationStage.tsx
 import { useMemo as useMemo2 } from "react";
@@ -146,8 +162,8 @@ function ShotTimeline({ controller, className = "" }) {
 }
 
 // src/animation-editor/AnimationEditor.tsx
-import { useMemo as useMemo6, useState as useState6 } from "react";
-import { indexMotionNodes, motionIssueLine } from "@pixerate/editor/animation-editor";
+import { useMemo as useMemo7, useState as useState7 } from "react";
+import { indexMotionNodes as indexMotionNodes2, motionIssueLine } from "@pixerate/editor/animation-editor";
 
 // src/animation-editor/CommandInspector.tsx
 import React3, { useMemo as useMemo4, useState } from "react";
@@ -931,19 +947,91 @@ function ShotInspector({ controller, shot, className = "" }) {
   ] });
 }
 
-// src/animation-editor/AnimationEditor.tsx
+// src/animation-editor/AnimationEffectsPanel.tsx
+import { useMemo as useMemo6, useState as useState6 } from "react";
+import { indexMotionNodes } from "@pixerate/editor/animation-editor";
 import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var btn4 = "rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40";
+function Controls({ controller, instance, effect, values }) {
+  const provider = controller.effectsProvider;
+  const { description, error } = useEffectDescription(provider, effect);
+  const [message, setMessage] = useState6(null);
+  const report = (r) => void r.then((x) => setMessage(x.ok ? null : x.error));
+  if (!provider) return /* @__PURE__ */ jsx10("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider: its commands are kept as they are." });
+  if (error) return /* @__PURE__ */ jsx10("p", { className: "text-[11px] text-amber-500", children: error });
+  if (!description) return /* @__PURE__ */ jsx10("p", { className: "text-[11px] text-muted-foreground", children: "Loading\u2026" });
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx10(
+      EffectParameters,
+      {
+        description,
+        values,
+        onChange: (k, v, gesture) => report(controller.updateMotionEffect(instance, { [k]: v }, { merge: gesture ?? void 0 })),
+        onReset: (k) => report(controller.updateMotionEffect(instance, { [k]: null })),
+        onPreset: (v) => report(controller.updateMotionEffect(instance, v))
+      }
+    ),
+    message && /* @__PURE__ */ jsx10("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+  ] });
+}
+function AnimationEffectsPanel({ controller, node, className = "" }) {
+  const state = useAnimationEditorState(controller);
+  const provider = state.effectsProvider;
+  const nodes = useMemo6(() => [...indexMotionNodes(state.scene.artwork.nodes).keys()], [state.scene.artwork]);
+  const [chosen, setChosen] = useState6("");
+  const target = node && nodes.includes(node) ? node : chosen && nodes.includes(chosen) ? chosen : "";
+  const [browse, setBrowse] = useState6(null);
+  const [open, setOpen] = useState6(null);
+  const [message, setMessage] = useState6(null);
+  const report = (r) => void Promise.resolve(r).then((x) => setMessage(x.ok ? x.notes.length ? x.notes.join(" ") : null : x.error));
+  const applied = useMemo6(() => controller.appliedEffects(), [controller, state.scene]);
+  const disabled = state.readOnly;
+  return /* @__PURE__ */ jsxs8("section", { className: `flex flex-col gap-2 text-xs ${className}`, "aria-label": "Effects", "data-animation-effects": "", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx10("span", { className: "flex-1 font-semibold", children: "Effects" }),
+      /* @__PURE__ */ jsxs8("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-[11px]", "aria-label": "Node to animate", value: target, disabled: !!node, onChange: (e) => setChosen(e.currentTarget.value), children: [
+        /* @__PURE__ */ jsx10("option", { value: "", children: "Node\u2026" }),
+        nodes.map((id) => /* @__PURE__ */ jsx10("option", { value: id, children: id }, id))
+      ] }),
+      /* @__PURE__ */ jsx10("button", { type: "button", className: btn4, disabled: disabled || !provider || !target, "aria-pressed": browse === "motion", onClick: () => setBrowse(browse === "motion" ? null : "motion"), children: "Animate\u2026" }),
+      /* @__PURE__ */ jsx10("button", { type: "button", className: btn4, disabled: disabled || !provider, "aria-pressed": browse === "vector", onClick: () => setBrowse(browse === "vector" ? null : "vector"), children: "Vector effect\u2026" })
+    ] }),
+    !provider && /* @__PURE__ */ jsx10("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider is registered. Commands effects made are kept." }),
+    browse === "motion" && /* @__PURE__ */ jsx10(EffectsBrowser, { provider, uses: ["motion"], kinds: ["motion"], title: `Motion for ${target}`, onPick: (e) => (setBrowse(null), report(controller.applyMotionEffect(e.id, [target]))) }),
+    browse === "vector" && /* @__PURE__ */ jsx10(EffectsBrowser, { provider, kinds: ["vector"], title: "Vector effects", onPick: (e) => (setBrowse(null), report(controller.addVectorEffect(e.id))) }),
+    /* @__PURE__ */ jsx10("ol", { className: "space-y-1", children: applied.map((e) => /* @__PURE__ */ jsxs8("li", { className: "rounded border border-border p-1", "data-motion-effect": e.instance, children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs8("button", { type: "button", className: "min-w-0 flex-1 truncate text-left", "aria-expanded": open === e.instance, onClick: () => setOpen(open === e.instance ? null : e.instance), children: [
+          e.name ?? e.effect,
+          " ",
+          /* @__PURE__ */ jsxs8("span", { className: "text-muted-foreground", children: [
+            "\xB7 ",
+            e.kind === "vector" ? "picture" : e.targets.join(", ")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx10("button", { type: "button", className: btn4, disabled, "aria-label": `Remove ${e.name ?? e.effect}`, onClick: () => report(controller.removeMotionEffect(e.instance)), children: "\u2715" })
+      ] }),
+      open === e.instance && /* @__PURE__ */ jsx10("div", { className: "mt-1", children: /* @__PURE__ */ jsx10(Controls, { controller, instance: e.instance, effect: e.effect, values: e.values }) })
+    ] }, e.instance)) }),
+    !applied.length && /* @__PURE__ */ jsx10("p", { className: "text-[11px] text-muted-foreground", children: "No provider effects in this scene." }),
+    message && /* @__PURE__ */ jsx10("p", { role: "status", className: "text-[11px] text-muted-foreground", "data-effects-message": "", children: message })
+  ] });
+}
+
+// src/animation-editor/AnimationEditor.tsx
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var ONION = { before: 3, after: 1 };
-var btn4 = "rounded border border-border px-2 py-0.5 text-xs disabled:opacity-40";
-function AnimationEditor({ controller, values, onionSkin, motionPaths, showIssues = true, editable = true, className = "" }) {
+var btn5 = "rounded border border-border px-2 py-0.5 text-xs disabled:opacity-40";
+function AnimationEditor({ controller, values, onionSkin, motionPaths, showIssues = true, editable = true, effects, className = "" }) {
   const state = useAnimationEditorState(controller);
+  useEffects(controller, effects);
   const { issues, scene, selection, readOnly } = state;
-  const [picked, setPicked] = useState6(null);
-  const [onion, setOnion] = useState6(false);
-  const [paths, setPaths] = useState6(false);
+  const [picked, setPicked] = useState7(null);
+  const [onion, setOnion] = useState7(false);
+  const [paths, setPaths] = useState7(false);
   const command = selection?.command !== void 0 ? scene.shots.find((s) => s.id === selection.shot)?.run[selection.command] : void 0;
   const targets = command && "targets" in command ? command.targets : [];
-  const nodes = useMemo6(() => indexMotionNodes(scene.artwork.nodes), [scene.artwork]);
+  const nodes = useMemo7(() => indexMotionNodes2(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) {
@@ -953,7 +1041,7 @@ function AnimationEditor({ controller, values, onionSkin, motionPaths, showIssue
     }
     setPicked(id);
   };
-  const stage = /* @__PURE__ */ jsx10(
+  const stage = /* @__PURE__ */ jsx11(
     AnimationStage,
     {
       controller,
@@ -965,14 +1053,14 @@ function AnimationEditor({ controller, values, onionSkin, motionPaths, showIssue
       className: "rounded-md border border-border bg-muted/40"
     }
   );
-  const issueList = showIssues && issues.length > 0 && /* @__PURE__ */ jsx10("ul", { className: "space-y-0.5 text-xs", "aria-label": "Animation issues", children: issues.map((issue, i) => /* @__PURE__ */ jsx10("li", { className: issue.severity === "error" ? "text-red-500" : issue.severity === "warning" ? "text-amber-500" : "text-muted-foreground", children: motionIssueLine(issue) }, i)) });
+  const issueList = showIssues && issues.length > 0 && /* @__PURE__ */ jsx11("ul", { className: "space-y-0.5 text-xs", "aria-label": "Animation issues", children: issues.map((issue, i) => /* @__PURE__ */ jsx11("li", { className: issue.severity === "error" ? "text-red-500" : issue.severity === "warning" ? "text-amber-500" : "text-muted-foreground", children: motionIssueLine(issue) }, i)) });
   if (!editable)
-    return /* @__PURE__ */ jsxs8("div", { className: `flex flex-col gap-2 ${className}`, "data-animation-editor": "", children: [
+    return /* @__PURE__ */ jsxs9("div", { className: `flex flex-col gap-2 ${className}`, "data-animation-editor": "", children: [
       stage,
-      /* @__PURE__ */ jsx10(PlayheadScrubber, { controller }),
+      /* @__PURE__ */ jsx11(PlayheadScrubber, { controller }),
       issueList
     ] });
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: `grid gap-3 lg:grid-cols-[minmax(0,1fr)_20rem] ${className}`,
@@ -985,39 +1073,40 @@ function AnimationEditor({ controller, values, onionSkin, motionPaths, showIssue
         else controller.undo();
       },
       children: [
-        /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-col gap-2", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 flex-col gap-2", children: [
           stage,
-          /* @__PURE__ */ jsx10(PlayheadScrubber, { controller }),
-          /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx10("button", { type: "button", className: btn4, onClick: () => controller.undo(), disabled: !state.canUndo, title: state.canUndo ? `Undo ${state.undoLabel}` : "Nothing to undo", "data-undo": "", children: "Undo" }),
-            /* @__PURE__ */ jsx10("button", { type: "button", className: btn4, onClick: () => controller.redo(), disabled: !state.canRedo, title: state.canRedo ? `Redo ${state.redoLabel}` : "Nothing to redo", "data-redo": "", children: "Redo" }),
-            onionSkin === void 0 && /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx10("input", { type: "checkbox", checked: onion, onChange: (e) => setOnion(e.target.checked) }),
+          /* @__PURE__ */ jsx11(PlayheadScrubber, { controller }),
+          /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx11("button", { type: "button", className: btn5, onClick: () => controller.undo(), disabled: !state.canUndo, title: state.canUndo ? `Undo ${state.undoLabel}` : "Nothing to undo", "data-undo": "", children: "Undo" }),
+            /* @__PURE__ */ jsx11("button", { type: "button", className: btn5, onClick: () => controller.redo(), disabled: !state.canRedo, title: state.canRedo ? `Redo ${state.redoLabel}` : "Nothing to redo", "data-redo": "", children: "Redo" }),
+            onionSkin === void 0 && /* @__PURE__ */ jsxs9("label", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx11("input", { type: "checkbox", checked: onion, onChange: (e) => setOnion(e.target.checked) }),
               " Onion skin"
             ] }),
-            motionPaths === void 0 && /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx10("input", { type: "checkbox", checked: paths, onChange: (e) => setPaths(e.target.checked) }),
+            motionPaths === void 0 && /* @__PURE__ */ jsxs9("label", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx11("input", { type: "checkbox", checked: paths, onChange: (e) => setPaths(e.target.checked) }),
               " Motion paths"
             ] }),
-            /* @__PURE__ */ jsx10("span", { className: "ml-auto", "data-picked-element": pickedValid ?? void 0, children: pickedValid ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+            /* @__PURE__ */ jsx11("span", { className: "ml-auto", "data-picked-element": pickedValid ?? void 0, children: pickedValid ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
               "Picked ",
-              /* @__PURE__ */ jsx10("code", { className: "text-rose-500", children: pickedValid }),
+              /* @__PURE__ */ jsx11("code", { className: "text-rose-500", children: pickedValid }),
               " ",
-              /* @__PURE__ */ jsx10("button", { type: "button", className: "underline", onClick: () => setPicked(null), children: "clear" })
+              /* @__PURE__ */ jsx11("button", { type: "button", className: "underline", onClick: () => setPicked(null), children: "clear" })
             ] }) : "Click the stage to pick an element; shift-click to toggle it as a target." })
           ] }),
           issueList
         ] }),
-        /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-col gap-3", children: [
-          /* @__PURE__ */ jsx10(CommandList, { controller, targets: pickedValid ? [pickedValid] : void 0 }),
-          /* @__PURE__ */ jsx10(CommandInspector, { controller, picked: pickedValid, className: "border-t border-border pt-2" }),
-          /* @__PURE__ */ jsxs8("details", { open: true, className: "border-t border-border pt-2", children: [
-            /* @__PURE__ */ jsx10("summary", { className: "cursor-pointer text-xs font-medium", children: "Shot" }),
-            /* @__PURE__ */ jsx10(ShotInspector, { controller, className: "mt-1" })
+        /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 flex-col gap-3", children: [
+          /* @__PURE__ */ jsx11(CommandList, { controller, targets: pickedValid ? [pickedValid] : void 0 }),
+          (state.effectsProvider || controller.appliedEffects().length > 0) && /* @__PURE__ */ jsx11(AnimationEffectsPanel, { controller, node: pickedValid, className: "border-t border-border pt-2" }),
+          /* @__PURE__ */ jsx11(CommandInspector, { controller, picked: pickedValid, className: "border-t border-border pt-2" }),
+          /* @__PURE__ */ jsxs9("details", { open: true, className: "border-t border-border pt-2", children: [
+            /* @__PURE__ */ jsx11("summary", { className: "cursor-pointer text-xs font-medium", children: "Shot" }),
+            /* @__PURE__ */ jsx11(ShotInspector, { controller, className: "mt-1" })
           ] }),
-          /* @__PURE__ */ jsxs8("details", { className: "border-t border-border pt-2", children: [
-            /* @__PURE__ */ jsx10("summary", { className: "cursor-pointer text-xs font-medium", children: "Scene settings" }),
-            /* @__PURE__ */ jsx10(SceneSettings, { controller, className: "mt-1" })
+          /* @__PURE__ */ jsxs9("details", { className: "border-t border-border pt-2", children: [
+            /* @__PURE__ */ jsx11("summary", { className: "cursor-pointer text-xs font-medium", children: "Scene settings" }),
+            /* @__PURE__ */ jsx11(SceneSettings, { controller, className: "mt-1" })
           ] })
         ] })
       ]
@@ -1026,6 +1115,7 @@ function AnimationEditor({ controller, values, onionSkin, motionPaths, showIssue
 }
 export {
   AnimationEditor,
+  AnimationEffectsPanel,
   AnimationStage,
   CommandInspector,
   CommandList,
@@ -1037,6 +1127,7 @@ export {
   useAnimationEditor,
   useAnimationEditorController,
   useAnimationEditorState,
-  useAnimationEditorTools
+  useAnimationEditorTools,
+  useAnimationEffectsTools
 };
 //# sourceMappingURL=index.js.map