@pixerate/editor-svelte 0.88.0 → 0.89.0

package/dist/animation-editor/AnimationEditor.svelte

@@ -7,6 +7,9 @@
   import SceneSettings from './SceneSettings.svelte';
   import ShotInspector from './ShotInspector.svelte';
   import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
+  import type { EffectProvider } from '@pixerate/editor/effects';
+  import { useEffects } from '../effects/effects.svelte.js';
+  import AnimationEffectsPanel from './AnimationEffectsPanel.svelte';
 
   interface Props {
     controller: AnimationEditorController;
@@ -23,10 +26,17 @@
      * 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;
     class?: string;
   }
 
-  let { controller, values, onionSkin, motionPaths, showIssues = true, editable = true, class: className = '' }: Props = $props();
+  let { controller, values, onionSkin, motionPaths, showIssues = true, editable = true, effects, class: className = '' }: Props = $props();
+  useEffects(() => controller, () => effects);
   const view = animationEditorStateOf(() => controller);
   const editor = $derived(view.current);
   const ONION: MotionOnionSkin = { before: 3, after: 1 };
@@ -115,6 +125,7 @@
     </div>
     <div class="flex min-w-0 flex-col gap-3">
       <CommandList {controller} targets={pickedValid ? [pickedValid] : undefined} />
+      {#if editor.effectsProvider || controller.appliedEffects().length > 0}<AnimationEffectsPanel {controller} node={pickedValid} class="border-t border-border pt-2" />{/if}
       <CommandInspector {controller} picked={pickedValid} class="border-t border-border pt-2" />
       <details open class="border-t border-border pt-2">
         <summary class="cursor-pointer text-xs font-medium">Shot</summary>

package/dist/animation-editor/AnimationEditor.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin } from '@pixerate/editor/animation-editor';
+import type { EffectProvider } from '@pixerate/editor/effects';
 interface Props {
     controller: AnimationEditorController;
     values?: MotionFrameOptions['values'];
@@ -14,6 +15,12 @@ interface Props {
      * 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;
     class?: string;
 }
 declare const AnimationEditor: import("svelte").Component<Props, {}, "">;

package/dist/animation-editor/AnimationEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/AnimationEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,yBAAyB,EAAE,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAUnK,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,kHAAkH;IAClH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,oGAAoG;IACpG,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,MAAM,EAAE,CAAC;IAC1C,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqGH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AnimationEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/AnimationEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,yBAAyB,EAAE,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAQrK,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAK7D,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,kHAAkH;IAClH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,oGAAoG;IACpG,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,MAAM,EAAE,CAAC;IAC1C,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0GH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/animation-editor/AnimationEffectControls.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { AnimationEditorController, MotionEffectResult } from '@pixerate/editor/animation-editor';
+  import EffectParameters from '../effects/EffectParameters.svelte';
+  import { effectDescriptionOf } from '../effects/effects.svelte.js';
+
+  interface Props {
+    controller: AnimationEditorController;
+    instance: string;
+    effect: string;
+    values: Readonly<Record<string, unknown>>;
+  }
+
+  let { controller, instance, effect, values }: Props = $props();
+  const loaded = effectDescriptionOf(() => controller.effectsProvider, () => effect);
+  let message = $state<string | null>(null);
+  const report = (r: Promise<MotionEffectResult>) => void r.then((x) => (message = x.ok ? null : x.error));
+</script>
+
+<!-- One applied effect's controls, loaded from the provider. -->
+{#if !controller.effectsProvider}
+  <p class="text-[11px] text-muted-foreground">No effects provider: its commands are kept as they are.</p>
+{:else if loaded.error}
+  <p class="text-[11px] text-amber-500">{loaded.error}</p>
+{:else if !loaded.description}
+  <p class="text-[11px] text-muted-foreground">Loading…</p>
+{:else}
+  <EffectParameters
+    description={loaded.description}
+    {values}
+    onchange={(k, v, g) => report(controller.updateMotionEffect(instance, { [k]: v as never }, { merge: g ?? undefined }))}
+    onreset={(k) => report(controller.updateMotionEffect(instance, { [k]: null }))}
+    onpreset={(v) => report(controller.updateMotionEffect(instance, v as never))}
+  />
+  {#if message}<p role="alert" class="text-[11px] text-destructive">{message}</p>{/if}
+{/if}

package/dist/animation-editor/AnimationEffectControls.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { AnimationEditorController } from '@pixerate/editor/animation-editor';
+interface Props {
+    controller: AnimationEditorController;
+    instance: string;
+    effect: string;
+    values: Readonly<Record<string, unknown>>;
+}
+declare const AnimationEffectControls: import("svelte").Component<Props, {}, "">;
+type AnimationEffectControls = ReturnType<typeof AnimationEffectControls>;
+export default AnimationEffectControls;
+//# sourceMappingURL=AnimationEffectControls.svelte.d.ts.map

package/dist/animation-editor/AnimationEffectControls.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationEffectControls.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/AnimationEffectControls.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAsB,MAAM,mCAAmC,CAAC;AAKrG,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CAC3C;AA2BH,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/animation-editor/AnimationEffectsPanel.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { indexMotionNodes, type AnimationEditorController, type MotionEffectResult } from '@pixerate/editor/animation-editor';
+  import EffectsBrowser from '../effects/EffectsBrowser.svelte';
+  import AnimationEffectControls from './AnimationEffectControls.svelte';
+  import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
+
+  interface Props {
+    controller: AnimationEditorController;
+    /** The node motion effects are applied to (e.g. the element picked on the stage). */
+    node?: string | null;
+    class?: string;
+  }
+
+  let { controller, node = null, class: className = '' }: Props = $props();
+  const view = animationEditorStateOf(() => controller);
+  const ed = $derived(view.current);
+  const provider = $derived(ed.effectsProvider);
+  const nodes = $derived([...indexMotionNodes(ed.scene.artwork.nodes).keys()]);
+  let chosen = $state('');
+  const target = $derived(node && nodes.includes(node) ? node : chosen && nodes.includes(chosen) ? chosen : '');
+  let browse = $state<null | 'motion' | 'vector'>(null);
+  let open = $state<string | null>(null);
+  let message = $state<string | null>(null);
+  const applied = $derived.by(() => {
+    void ed.scene;
+    return controller.appliedEffects();
+  });
+  const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
+  function report(r: MotionEffectResult | Promise<MotionEffectResult>) {
+    void Promise.resolve(r).then((x) => (message = x.ok ? (x.notes.length ? x.notes.join(' ') : null) : x.error));
+  }
+</script>
+
+<!--
+  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).
+-->
+<section class="flex flex-col gap-2 text-xs {className}" aria-label="Effects" data-animation-effects="">
+  <div class="flex flex-wrap items-center gap-1">
+    <span class="flex-1 font-semibold">Effects</span>
+    <select class="rounded border border-border bg-transparent px-1 py-0.5 text-[11px]" aria-label="Node to animate" value={target} disabled={!!node} onchange={(e) => (chosen = e.currentTarget.value)}>
+      <option value="">Node…</option>
+      {#each nodes as id (id)}<option value={id}>{id}</option>{/each}
+    </select>
+    <button type="button" class={btn} disabled={ed.readOnly || !provider || !target} aria-pressed={browse === 'motion'} onclick={() => (browse = browse === 'motion' ? null : 'motion')}>Animate…</button>
+    <button type="button" class={btn} disabled={ed.readOnly || !provider} aria-pressed={browse === 'vector'} onclick={() => (browse = browse === 'vector' ? null : 'vector')}>Vector effect…</button>
+  </div>
+  {#if !provider}<p class="text-[11px] text-muted-foreground">No effects provider is registered. Commands effects made are kept.</p>{/if}
+  {#if browse === 'motion'}
+    <EffectsBrowser {provider} uses={['motion']} kinds={['motion']} title="Motion for {target}" onpick={(e) => ((browse = null), report(controller.applyMotionEffect(e.id, [target])))} />
+  {/if}
+  {#if browse === 'vector'}
+    <EffectsBrowser {provider} kinds={['vector']} title="Vector effects" onpick={(e) => ((browse = null), report(controller.addVectorEffect(e.id)))} />
+  {/if}
+  <ol class="space-y-1">
+    {#each applied as e (e.instance)}
+      <li class="rounded border border-border p-1" data-motion-effect={e.instance}>
+        <div class="flex items-center gap-1">
+          <button type="button" class="min-w-0 flex-1 truncate text-left" aria-expanded={open === e.instance} onclick={() => (open = open === e.instance ? null : e.instance)}>
+            {e.name ?? e.effect} <span class="text-muted-foreground">· {e.kind === 'vector' ? 'picture' : e.targets.join(', ')}</span>
+          </button>
+          <button type="button" class={btn} disabled={ed.readOnly} aria-label="Remove {e.name ?? e.effect}" onclick={() => report(controller.removeMotionEffect(e.instance))}>✕</button>
+        </div>
+        {#if open === e.instance}<div class="mt-1"><AnimationEffectControls {controller} instance={e.instance} effect={e.effect} values={e.values} /></div>{/if}
+      </li>
+    {/each}
+  </ol>
+  {#if !applied.length}<p class="text-[11px] text-muted-foreground">No provider effects in this scene.</p>{/if}
+  {#if message}<p role="status" class="text-[11px] text-muted-foreground" data-effects-message="">{message}</p>{/if}
+</section>

package/dist/animation-editor/AnimationEffectsPanel.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type AnimationEditorController } from '@pixerate/editor/animation-editor';
+interface Props {
+    controller: AnimationEditorController;
+    /** The node motion effects are applied to (e.g. the element picked on the stage). */
+    node?: string | null;
+    class?: string;
+}
+declare const AnimationEffectsPanel: import("svelte").Component<Props, {}, "">;
+type AnimationEffectsPanel = ReturnType<typeof AnimationEffectsPanel>;
+export default AnimationEffectsPanel;
+//# sourceMappingURL=AnimationEffectsPanel.svelte.d.ts.map

package/dist/animation-editor/AnimationEffectsPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationEffectsPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/AnimationEffectsPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoB,KAAK,yBAAyB,EAA2B,MAAM,mCAAmC,CAAC;AAM5H,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiEH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/animation-editor/createAnimationEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import { AnimationEditorController, type AnimationEditorOptions, type AnimationEditorState, type AnimationEditorToolProviderOptions } from "@pixerate/editor/animation-editor";
+import { AnimationEditorController, type AnimationEffectsToolProviderOptions, type AnimationEditorOptions, type AnimationEditorState, type AnimationEditorToolProviderOptions } from "@pixerate/editor/animation-editor";
 import type { ToolRegistry } from "@pixerate/editor/tools";
 export interface SvelteAnimationEditor {
     readonly controller: AnimationEditorController;
@@ -30,4 +30,10 @@ export declare function animationEditorStateOf(getController: () => AnimationEdi
  * initialisation). Pass a getter to follow a changing registry.
  */
 export declare function useAnimationEditorTools(registry: ToolRegistry | null | undefined | (() => ToolRegistry | null | undefined), controller: AnimationEditorController, options?: AnimationEditorToolProviderOptions): void;
+/**
+ * Registers the animation editor's provider-effect tools (`search_effects`, `apply_effect`,
+ * `add_vector_effect`, …) for the lifetime of the calling component. They work once an effects
+ * provider is registered (see `useEffects`).
+ */
+export declare function useAnimationEffectsTools(registry: ToolRegistry | null | undefined | (() => ToolRegistry | null | undefined), controller: AnimationEditorController, options?: AnimationEffectsToolProviderOptions): void;
 //# sourceMappingURL=createAnimationEditor.svelte.d.ts.map

package/dist/animation-editor/createAnimationEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createAnimationEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/createAnimationEditor.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EACL,yBAAyB,EAEzB,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EACzB,KAAK,kCAAkC,EACxC,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,UAAU,EAAE,yBAAyB,CAAC;IAC/C,sEAAsE;IACtE,QAAQ,CAAC,KAAK,EAAE,oBAAoB,CAAC;IACrC,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,IAAI,IAAI,CAAC;IACf,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,wCAAwC;IACxC,KAAK,IAAI,MAAM,CAAC;IAChB,qFAAqF;IACrF,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,mBAAmB,GAAE,yBAAyB,GAAG,sBAA2B,GAAG,qBAAqB,CAwBzI;AAED,0FAA0F;AAC1F,wBAAgB,sBAAsB,CAAC,aAAa,EAAE,MAAM,yBAAyB,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,oBAAoB,CAAA;CAAE,CAgBjI;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,EACnF,UAAU,EAAE,yBAAyB,EACrC,OAAO,GAAE,kCAAuC,GAC/C,IAAI,CAMN"}
+{"version":3,"file":"createAnimationEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/createAnimationEditor.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EACL,yBAAyB,EAGzB,KAAK,mCAAmC,EACxC,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EACzB,KAAK,kCAAkC,EACxC,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,UAAU,EAAE,yBAAyB,CAAC;IAC/C,sEAAsE;IACtE,QAAQ,CAAC,KAAK,EAAE,oBAAoB,CAAC;IACrC,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,IAAI,IAAI,CAAC;IACf,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,wCAAwC;IACxC,KAAK,IAAI,MAAM,CAAC;IAChB,qFAAqF;IACrF,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,mBAAmB,GAAE,yBAAyB,GAAG,sBAA2B,GAAG,qBAAqB,CAwBzI;AAED,0FAA0F;AAC1F,wBAAgB,sBAAsB,CAAC,aAAa,EAAE,MAAM,yBAAyB,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,oBAAoB,CAAA;CAAE,CAgBjI;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,EACnF,UAAU,EAAE,yBAAyB,EACrC,OAAO,GAAE,kCAAuC,GAC/C,IAAI,CAMN;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,EACnF,UAAU,EAAE,yBAAyB,EACrC,OAAO,GAAE,mCAAwC,GAChD,IAAI,CAMN"}

package/dist/animation-editor/createAnimationEditor.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import { AnimationEditorController, createAnimationEditorToolProvider, } from "@pixerate/editor/animation-editor";
+import { AnimationEditorController, createAnimationEditorToolProvider, createAnimationEffectsToolProvider, } from "@pixerate/editor/animation-editor";
 /**
  * Svelte 5 rune: subscribes to an `AnimationEditorController` (or creates one from options)
  * and exposes its state reactively with bound actions.
@@ -59,3 +59,16 @@ export function useAnimationEditorTools(registry, controller, options = {}) {
         return target.register(createAnimationEditorToolProvider(controller, options));
     });
 }
+/**
+ * Registers the animation editor's provider-effect tools (`search_effects`, `apply_effect`,
+ * `add_vector_effect`, …) for the lifetime of the calling component. They work once an effects
+ * provider is registered (see `useEffects`).
+ */
+export function useAnimationEffectsTools(registry, controller, options = {}) {
+    $effect(() => {
+        const target = typeof registry === "function" ? registry() : registry;
+        if (!target)
+            return;
+        return target.register(createAnimationEffectsToolProvider(controller, options));
+    });
+}

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

@@ -17,6 +17,7 @@ export { default as CommandInspector } from "./CommandInspector.svelte";
 export { default as EasePicker } from "./EasePicker.svelte";
 export { default as ShotInspector } from "./ShotInspector.svelte";
 export { default as SceneSettings } from "./SceneSettings.svelte";
+export { default as AnimationEffectsPanel } from "./AnimationEffectsPanel.svelte";
 export * from "./createAnimationEditor.svelte.js";
 export type AnimationEditorProps = ComponentProps<typeof AnimationEditorComponent>;
 export type AnimationStageProps = ComponentProps<typeof AnimationStageComponent>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,cAAc,mCAAmC,CAAC;AAElD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACnF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC;AACjF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACrF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACrF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,cAAc,mCAAmC,CAAC;AAElD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACnF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC;AACjF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACrF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACrF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/animation-editor/index.js

@@ -7,4 +7,5 @@ export { default as CommandInspector } from "./CommandInspector.svelte";
 export { default as EasePicker } from "./EasePicker.svelte";
 export { default as ShotInspector } from "./ShotInspector.svelte";
 export { default as SceneSettings } from "./SceneSettings.svelte";
+export { default as AnimationEffectsPanel } from "./AnimationEffectsPanel.svelte";
 export * from "./createAnimationEditor.svelte.js";

package/dist/effects/EffectThumbnail.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { renderEffectThumbnail, type EffectProvider, type EffectSummary } from '@pixerate/editor/effects';
 
   interface Props {
@@ -15,10 +16,13 @@
   let failed = $state(false);
 
   $effect(() => {
-    failed = item.kind === 'motion';
-    if (failed) return;
+    // Reads only what picks the picture: setting `failed` below must not run this again.
+    const motion = item.kind === 'motion';
+    const request = { provider, item, size: { width, height } };
+    failed = motion;
+    if (motion) return;
     let live = true;
-    renderEffectThumbnail(provider, item, { width, height }).then(
+    untrack(() => renderEffectThumbnail(request.provider, request.item, request.size)).then(
       (pixels) => {
         const ctx = live ? canvas?.getContext('2d') : null;
         if (!ctx || typeof ImageData === 'undefined') return;

package/dist/effects/EffectThumbnail.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EffectThumbnail.svelte.d.ts","sourceRoot":"","sources":["../../src/effects/EffectThumbnail.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyB,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAGxG,UAAU,KAAK;IACb,QAAQ,EAAE,cAAc,CAAC;IACzB,MAAM,EAAE,aAAa,CAAC;IACtB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwCH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"EffectThumbnail.svelte.d.ts","sourceRoot":"","sources":["../../src/effects/EffectThumbnail.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAyB,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAGxG,UAAU,KAAK;IACb,QAAQ,EAAE,cAAc,CAAC;IACzB,MAAM,EAAE,aAAa,CAAC;IACtB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4CH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/effects/EffectsBrowser.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { EFFECT_USE_LABELS, type EffectProvider, type EffectSummary, type EffectUse } from '@pixerate/editor/effects';
+  import { EFFECT_USE_LABELS, type EffectKind, type EffectProvider, type EffectSummary, type EffectUse } from '@pixerate/editor/effects';
   import EffectThumbnail from './EffectThumbnail.svelte';
 
   interface Props {
@@ -7,6 +7,8 @@
     provider: EffectProvider | null | undefined;
     /** Only effects with one of these uses (default: all but motion). */
     uses?: readonly EffectUse[];
+    /** Only effects of these kinds (default: any). */
+    kinds?: readonly EffectKind[];
     /** Called with the effect the user picks. */
     onpick: (effect: EffectSummary) => void;
     /** Draw previews with the provider's renderer (default true). */
@@ -16,7 +18,7 @@
     class?: string;
   }
 
-  let { provider, uses, onpick, thumbnails = true, title = 'Effects', class: className = '' }: Props = $props();
+  let { provider, uses, kinds, onpick, thumbnails = true, title = 'Effects', class: className = '' }: Props = $props();
   let all = $state.raw<readonly EffectSummary[]>([]);
   let found = $state.raw<readonly EffectSummary[]>([]);
   let query = $state('');
@@ -66,7 +68,7 @@
       live = false;
     };
   });
-  const allowed = (e: EffectSummary) => (uses ? e.kind !== 'motion' || uses.includes('motion') : e.kind !== 'motion') && (!uses || e.uses.some((u) => uses.includes(u)));
+  const allowed = (e: EffectSummary) => (!kinds || kinds.includes(e.kind)) && (uses ? e.kind !== 'motion' || uses.includes('motion') : e.kind !== 'motion') && (!uses || e.uses.some((u) => uses.includes(u)));
   const categories = $derived([...new Set(all.filter(allowed).map((e) => e.category))]);
   const shown = $derived(found.filter(allowed));
 </script>
@@ -96,7 +98,7 @@
       {/if}
     </div>
     {#if error}<p role="alert" class="text-[11px] text-destructive">{error}</p>{/if}
-    <ul class="grid grid-cols-[repeat(auto-fill,minmax(6.5rem,1fr))] gap-1.5" role="list">
+    <ul class="grid max-h-96 grid-cols-[repeat(auto-fill,minmax(6.5rem,1fr))] gap-1.5 overflow-y-auto" role="list">
       {#each shown as e (e.id)}
         <li>
           <button type="button" class="flex w-full flex-col gap-1 rounded border border-transparent p-1 text-left hover:border-border focus-visible:border-border" title={e.description ?? e.name} data-effect-id={e.id} onclick={() => onpick(e)}>

package/dist/effects/EffectsBrowser.svelte.d.ts

@@ -1,9 +1,11 @@
-import { type EffectProvider, type EffectSummary, type EffectUse } from '@pixerate/editor/effects';
+import { type EffectKind, type EffectProvider, type EffectSummary, type EffectUse } from '@pixerate/editor/effects';
 interface Props {
     /** The editor's provider; without one the browser says effects are unavailable. */
     provider: EffectProvider | null | undefined;
     /** Only effects with one of these uses (default: all but motion). */
     uses?: readonly EffectUse[];
+    /** Only effects of these kinds (default: any). */
+    kinds?: readonly EffectKind[];
     /** Called with the effect the user picks. */
     onpick: (effect: EffectSummary) => void;
     /** Draw previews with the provider's renderer (default true). */

package/dist/effects/EffectsBrowser.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EffectsBrowser.svelte.d.ts","sourceRoot":"","sources":["../../src/effects/EffectsBrowser.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAIpH,UAAU,KAAK;IACb,mFAAmF;IACnF,QAAQ,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5C,qEAAqE;IACrE,IAAI,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,6CAA6C;IAC7C,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoGH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"EffectsBrowser.svelte.d.ts","sourceRoot":"","sources":["../../src/effects/EffectsBrowser.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAIrI,UAAU,KAAK;IACb,mFAAmF;IACnF,QAAQ,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5C,qEAAqE;IACrE,IAAI,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,6CAA6C;IAC7C,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoGH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/vector/VectorEditor.svelte

@@ -4,6 +4,9 @@
   import VectorCanvas from './VectorCanvas.svelte';
   import VectorStylePanel from './VectorStylePanel.svelte';
   import VectorToolbar from './VectorToolbar.svelte';
+  import type { EffectProvider } from '@pixerate/editor/effects';
+  import { useEffects } from '../effects/effects.svelte.js';
+  import VectorProviderEffectsPanel from './VectorProviderEffectsPanel.svelte';
 
   interface Props {
     controller: VectorEditorController;
@@ -14,10 +17,18 @@
     /** Canvas height (default 520px). */
     height?: number | string;
     canvasProps?: Omit<ComponentProps<typeof VectorCanvas>, 'controller'>;
+    /**
+     * An effects provider (see `@pixerate/editor/effects`), registered with the controller while
+     * mounted: provider vector effects as groups, with an Effects section under the style panel.
+     * Optional: without one the editor is as before.
+     */
+    effects?: EffectProvider | null;
     class?: string;
   }
 
-  let { controller, tools, showStylePanel = true, height = 520, canvasProps = {}, class: className = '' }: Props = $props();
+  let { controller, tools, showStylePanel = true, height = 520, canvasProps = {}, effects, class: className = '' }: Props = $props();
+  useEffects(() => controller, () => effects);
+  const effectsShown = $derived(!!effects || controller.vectorEffectGroups().length > 0);
 </script>
 
 <div class="flex flex-col gap-2 {className}" data-vector-editor="">
@@ -30,7 +41,10 @@
       <VectorCanvas {controller} {...canvasProps} />
     </div>
     {#if showStylePanel}
-      <VectorStylePanel {controller} class="w-full shrink-0 rounded-md border border-border p-3 md:w-56" />
+      <div class="flex w-full shrink-0 flex-col gap-2 md:w-56">
+        <VectorStylePanel {controller} class="rounded-md border border-border p-3" />
+        {#if effectsShown}<VectorProviderEffectsPanel {controller} class="rounded-md border border-border p-3" />{/if}
+      </div>
     {/if}
   </div>
 </div>

package/dist/vector/VectorEditor.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentProps } from 'svelte';
 import type { VectorEditorController, VectorTool } from '@pixerate/editor/vector';
 import VectorCanvas from './VectorCanvas.svelte';
+import type { EffectProvider } from '@pixerate/editor/effects';
 interface Props {
     controller: VectorEditorController;
     /** Tools in the toolbar (default: all). */
@@ -10,6 +11,12 @@ interface Props {
     /** Canvas height (default 520px). */
     height?: number | string;
     canvasProps?: Omit<ComponentProps<typeof VectorCanvas>, 'controller'>;
+    /**
+     * An effects provider (see `@pixerate/editor/effects`), registered with the controller while
+     * mounted: provider vector effects as groups, with an Effects section under the style panel.
+     * Optional: without one the editor is as before.
+     */
+    effects?: EffectProvider | null;
     class?: string;
 }
 declare const VectorEditor: import("svelte").Component<Props, {}, "">;

package/dist/vector/VectorEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,YAAY,MAAM,uBAAuB,CAAC;AAK/C,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,0CAA0C;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0BH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"VectorEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,YAAY,MAAM,uBAAuB,CAAC;AAGjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAK7D,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,0CAA0C;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC;IACtE;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkCH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/vector/VectorProviderEffectControls.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { VectorEditorController, VectorGroupNode } from '@pixerate/editor/vector';
+  import EffectParameters from '../effects/EffectParameters.svelte';
+  import { effectDescriptionOf } from '../effects/effects.svelte.js';
+
+  interface Props {
+    controller: VectorEditorController;
+    group: VectorGroupNode;
+  }
+
+  let { controller, group }: Props = $props();
+  const loaded = effectDescriptionOf(() => controller.effectsProvider, () => group.providerEffect?.effect);
+  let message = $state<string | null>(null);
+  const run = (work: Promise<unknown>) =>
+    void work.then(
+      () => (message = null),
+      (e: unknown) => (message = e instanceof Error ? e.message : String(e)),
+    );
+</script>
+
+<!-- One effect group's controls, loaded from the provider. -->
+{#if !controller.effectsProvider}
+  <p class="text-[11px] text-muted-foreground">No effects provider: the shapes are kept as they are.</p>
+{:else if loaded.error}
+  <p class="text-[11px] text-amber-500">{loaded.error}</p>
+{:else if !loaded.description}
+  <p class="text-[11px] text-muted-foreground">Loading…</p>
+{:else}
+  <EffectParameters
+    description={loaded.description}
+    values={group.providerEffect?.values ?? {}}
+    onchange={(k, v) => run(controller.updateVectorEffect(group.id, { [k]: v as never }))}
+    onreset={(k) => run(controller.updateVectorEffect(group.id, { [k]: null }))}
+    onpreset={(v) => run(controller.updateVectorEffect(group.id, v as never))}
+  />
+  {#if message}<p role="alert" class="text-[11px] text-destructive">{message}</p>{/if}
+{/if}

package/dist/vector/VectorProviderEffectControls.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { VectorEditorController, VectorGroupNode } from '@pixerate/editor/vector';
+interface Props {
+    controller: VectorEditorController;
+    group: VectorGroupNode;
+}
+declare const VectorProviderEffectControls: import("svelte").Component<Props, {}, "">;
+type VectorProviderEffectControls = ReturnType<typeof VectorProviderEffectControls>;
+export default VectorProviderEffectControls;
+//# sourceMappingURL=VectorProviderEffectControls.svelte.d.ts.map

package/dist/vector/VectorProviderEffectControls.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorProviderEffectControls.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorProviderEffectControls.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAKrF,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,EAAE,eAAe,CAAC;CACxB;AA+BH,QAAA,MAAM,4BAA4B,2CAAwC,CAAC;AAC3E,KAAK,4BAA4B,GAAG,UAAU,CAAC,OAAO,4BAA4B,CAAC,CAAC;AACpF,eAAe,4BAA4B,CAAC"}

package/dist/vector/VectorProviderEffectsPanel.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { EffectProvider } from '@pixerate/editor/effects';
+  import type { VectorEditorController } from '@pixerate/editor/vector';
+  import EffectsBrowser from '../effects/EffectsBrowser.svelte';
+  import VectorProviderEffectControls from './VectorProviderEffectControls.svelte';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  interface Props {
+    controller: VectorEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+  const view = vectorStateOf(() => controller);
+  let provider = $state.raw<EffectProvider | null>(untrack(() => controller.effects.provider));
+  $effect(() => {
+    const c = controller;
+    provider = c.effects.provider;
+    return untrack(() => c.effects.subscribe((p) => (provider = p)));
+  });
+  let browse = $state(false);
+  let message = $state<string | null>(null);
+  const groups = $derived.by(() => {
+    void view.current.document;
+    return controller.vectorEffectGroups();
+  });
+  const selected = $derived(groups.filter((g) => view.current.selection.includes(g.id)));
+  const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
+  function run(work: () => unknown) {
+    message = null;
+    Promise.resolve()
+      .then(work)
+      .catch((e: unknown) => (message = e instanceof Error ? e.message : String(e)));
+  }
+</script>
+
+<!--
+  Provider vector effects in a drawing: add one (its picture at rest becomes a selected group of
+  editable shapes), draw it again with new values, or detach it to keep the shapes. Motion is
+  applied in the animation editor.
+-->
+<section class="flex flex-col gap-2 text-xs {className}" aria-label="Vector effects" data-vector-provider-effects="">
+  <div class="flex items-center gap-1">
+    <span class="flex-1 font-semibold">Effects</span>
+    <button type="button" class={btn} disabled={!provider} aria-pressed={browse} onclick={() => (browse = !browse)}>Add effect…</button>
+  </div>
+  {#if !provider}<p class="text-[11px] text-muted-foreground">No effects provider is registered. Effect groups are kept as shapes.</p>{/if}
+  {#if browse}
+    <EffectsBrowser {provider} kinds={['vector']} title="Vector effects" onpick={(e) => ((browse = false), run(() => controller.addVectorEffect(e.id)))} />
+  {/if}
+  {#each selected as g (g.id)}
+    <div class="space-y-1 rounded border border-border p-1" data-vector-effect-group={g.id}>
+      <div class="flex items-center gap-1">
+        <span class="min-w-0 flex-1 truncate font-medium">{g.providerEffect?.name ?? g.providerEffect?.effect}</span>
+        <button type="button" class={btn} title="Keep the shapes as a plain group" onclick={() => run(() => controller.detachVectorEffect(g.id))}>Detach</button>
+      </div>
+      <VectorProviderEffectControls {controller} group={g} />
+    </div>
+  {/each}
+  {#if groups.length > 0 && !selected.length}<p class="text-[11px] text-muted-foreground">Select an effect group ({groups.length} in the drawing) to change it.</p>{/if}
+  {#if message}<p role="alert" class="text-[11px] text-destructive">{message}</p>{/if}
+</section>

package/dist/vector/VectorProviderEffectsPanel.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { VectorEditorController } from '@pixerate/editor/vector';
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorProviderEffectsPanel: import("svelte").Component<Props, {}, "">;
+type VectorProviderEffectsPanel = ReturnType<typeof VectorProviderEffectsPanel>;
+export default VectorProviderEffectsPanel;
+//# sourceMappingURL=VectorProviderEffectsPanel.svelte.d.ts.map

package/dist/vector/VectorProviderEffectsPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorProviderEffectsPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorProviderEffectsPanel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAMpE,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2DH,QAAA,MAAM,0BAA0B,2CAAwC,CAAC;AACzE,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAChF,eAAe,0BAA0B,CAAC"}

package/dist/vector/createVectorEditor.svelte.d.ts

@@ -1,4 +1,5 @@
-import { VectorEditorController, type VectorCommandOptions, type VectorEditorOptions, type VectorEditorState, type VectorTool } from "@pixerate/editor/vector";
+import { VectorEditorController, type VectorEffectsToolProviderOptions, type VectorCommandOptions, type VectorEditorOptions, type VectorEditorState, type VectorTool } from "@pixerate/editor/vector";
+import type { ToolRegistry } from "@pixerate/editor/tools";
 export interface SvelteVectorEditor {
     readonly controller: VectorEditorController;
     /** The controller's state (reactive). */
@@ -27,4 +28,10 @@ export interface VectorCommandTarget {
  * registry.
  */
 export declare function useVectorCommands(registry: VectorCommandTarget | null | undefined | (() => VectorCommandTarget | null | undefined), controller: VectorEditorController, options?: VectorCommandOptions): void;
+/**
+ * Registers the vector editor's provider-effect tools (`search_effects`, `apply_effect`, …) for the
+ * lifetime of the calling component. They work once an effects provider is registered (see
+ * `useEffects`).
+ */
+export declare function useVectorEffectsTools(registry: ToolRegistry | null | undefined | (() => ToolRegistry | null | undefined), controller: VectorEditorController, options?: VectorEffectsToolProviderOptions): void;
 //# sourceMappingURL=createVectorEditor.svelte.d.ts.map

package/dist/vector/createVectorEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createVectorEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/createVectorEditor.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EAEtB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAC5C,yCAAyC;IACzC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;IAClC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,eAAe,IAAI,IAAI,CAAC;IACxB,KAAK,IAAI,MAAM,CAAC;IAChB,qFAAqF;IACrF,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,mBAAmB,GAAE,sBAAsB,GAAG,mBAAwB,GAAG,kBAAkB,CAuB7H;AAED,0EAA0E;AAC1E,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,IAAI,CAAC;CAClC;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC,EACjG,UAAU,EAAE,sBAAsB,EAClC,OAAO,GAAE,oBAAyB,GACjC,IAAI,CAMN"}
+{"version":3,"file":"createVectorEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/createVectorEditor.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EAGtB,KAAK,gCAAgC,EACrC,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAC5C,yCAAyC;IACzC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;IAClC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,eAAe,IAAI,IAAI,CAAC;IACxB,KAAK,IAAI,MAAM,CAAC;IAChB,qFAAqF;IACrF,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,mBAAmB,GAAE,sBAAsB,GAAG,mBAAwB,GAAG,kBAAkB,CAuB7H;AAED,0EAA0E;AAC1E,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,IAAI,CAAC;CAClC;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC,EACjG,UAAU,EAAE,sBAAsB,EAClC,OAAO,GAAE,oBAAyB,GACjC,IAAI,CAMN;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,EACnF,UAAU,EAAE,sBAAsB,EAClC,OAAO,GAAE,gCAAqC,GAC7C,IAAI,CAMN"}

package/dist/vector/createVectorEditor.svelte.js

@@ -1,4 +1,4 @@
-import { VectorEditorController, createVectorCommands, } from "@pixerate/editor/vector";
+import { VectorEditorController, createVectorCommands, createVectorEffectsToolProvider, } from "@pixerate/editor/vector";
 /**
  * Svelte 5 rune: subscribes to a `VectorEditorController` (or creates one from options) and
  * exposes its state reactively with bound actions.
@@ -41,3 +41,16 @@ export function useVectorCommands(registry, controller, options = {}) {
         return target.register(createVectorCommands(controller, options));
     });
 }
+/**
+ * Registers the vector editor's provider-effect tools (`search_effects`, `apply_effect`, …) for the
+ * lifetime of the calling component. They work once an effects provider is registered (see
+ * `useEffects`).
+ */
+export function useVectorEffectsTools(registry, controller, options = {}) {
+    $effect(() => {
+        const target = typeof registry === "function" ? registry() : registry;
+        if (!target)
+            return;
+        return target.register(createVectorEffectsToolProvider(controller, options));
+    });
+}

package/dist/vector/index.d.ts

@@ -26,6 +26,7 @@ export { default as VectorPaintPath } from "./VectorPaintPath.svelte";
 export { default as VectorAppearancePanel } from "./VectorAppearancePanel.svelte";
 export { default as VectorGradientAnnotator } from "./VectorGradientAnnotator.svelte";
 export { default as VectorGradientEditor } from "./VectorGradientEditor.svelte";
+export { default as VectorProviderEffectsPanel } from "./VectorProviderEffectsPanel.svelte";
 export * from "./createVectorEditor.svelte.js";
 export { vectorStateOf } from "./subscribe.svelte.js";
 export * from "./styles.js";

package/dist/vector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vector/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vector/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AAC5F,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/vector/index.js

@@ -23,6 +23,7 @@ export { default as VectorPaintPath } from "./VectorPaintPath.svelte";
 export { default as VectorAppearancePanel } from "./VectorAppearancePanel.svelte";
 export { default as VectorGradientAnnotator } from "./VectorGradientAnnotator.svelte";
 export { default as VectorGradientEditor } from "./VectorGradientEditor.svelte";
+export { default as VectorProviderEffectsPanel } from "./VectorProviderEffectsPanel.svelte";
 export * from "./createVectorEditor.svelte.js";
 export { vectorStateOf } from "./subscribe.svelte.js";
 export * from "./styles.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.88.0",
+  "version": "0.89.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -144,7 +144,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.124.0"
+    "@pixerate/editor": "0.125.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",