@pixerate/editor-svelte 0.88.1 → 0.90.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>

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/paint-editor/PaintEditor.svelte

@@ -8,7 +8,8 @@
   import PaperPanel from './PaperPanel.svelte';
   import WetPanel from './WetPanel.svelte';
   import StickerPanel from './StickerPanel.svelte';
-  import { chip } from './paintEditorRune.svelte.js';
+  import PaintEffectsPanel from './PaintEffectsPanel.svelte';
+  import { chip, paintEffectsProvider } from './paintEditorRune.svelte.js';
 
   interface Props {
     controller: PaintEditorController;
@@ -22,7 +23,9 @@
   }
   let { controller, fileName, height = 720, presence, class: className = '' }: Props = $props();
   let tool = $state<PaintTool>('brush');
-  let tab = $state<'color' | 'wet' | 'paper' | 'layers'>('color');
+  let tab = $state<'color' | 'wet' | 'paper' | 'layers' | 'effects'>('color');
+  const effects = paintEffectsProvider(() => controller);
+  const tabs = $derived(effects.current ? (['color', 'wet', 'paper', 'layers', 'effects'] as const) : (['color', 'wet', 'paper', 'layers'] as const));
   let error = $state<string | null>(null);
 </script>
 
@@ -37,14 +40,15 @@
     </div>
     <div class="flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1">
       <div class="flex gap-1" role="tablist" aria-label="Paint panels">
-        {#each ['color', 'wet', 'paper', 'layers'] as const as t (t)}
-          <button type="button" role="tab" aria-selected={tab === t} class={chip(tab === t)} onclick={() => (tab = t)}>{t === 'color' ? 'Colour' : t === 'wet' ? 'Wet' : t === 'paper' ? 'Paper' : 'Layers'}</button>
+        {#each tabs as t (t)}
+          <button type="button" role="tab" aria-selected={tab === t} class={chip(tab === t)} onclick={() => (tab = t)}>{t === 'color' ? 'Colour' : t === 'wet' ? 'Wet' : t === 'paper' ? 'Paper' : t === 'layers' ? 'Layers' : 'Effects'}</button>
         {/each}
       </div>
       {#if tab === 'color'}<ColorPanel {controller} />{/if}
       {#if tab === 'wet'}<WetPanel {controller} />{/if}
       {#if tab === 'paper'}<PaperPanel {controller} />{/if}
       {#if tab === 'layers'}<PaintLayersPanel {controller} /><StickerPanel {controller} />{/if}
+      {#if tab === 'effects' && effects.current}<PaintEffectsPanel {controller} />{/if}
     </div>
   </div>
 </div>

package/dist/paint-editor/PaintEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaintEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAa,MAAM,+BAA+B,CAAC;AAYnG,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4CH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"PaintEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAa,MAAM,+BAA+B,CAAC;AAanG,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgDH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/paint-editor/PaintEffectsPanel.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { PAPER_EFFECT_BLENDS, type PaintEditorController, type PaperEffectBlend } from '@pixerate/editor/paint-editor';
+  import type { EffectUse } from '@pixerate/editor/effects';
+  import EffectsBrowser from '../effects/EffectsBrowser.svelte';
+  import ImageEffectControls from '../image-editor/ImageEffectControls.svelte';
+  import { attempt, button, paintEditorState, paintEffectsProvider, panel } from './paintEditorRune.svelte.js';
+
+  interface Props {
+    controller: PaintEditorController;
+    class?: string;
+  }
+  let { controller, class: className = '' }: Props = $props();
+  const editor = paintEditorState(() => controller);
+  const effects = paintEffectsProvider(() => controller);
+  const provider = $derived(effects.current);
+  const view = $derived.by(() => {
+    const doc = editor.current.document;
+    const activeId = doc.activeLayerId;
+    return {
+      activeId,
+      paper: controller.getPaperEffect(),
+      layerEffect: activeId ? controller.getEffectLayer(activeId) : undefined,
+      pixel: activeId ? controller.getLayer(activeId)?.type === 'pixel' : false,
+    };
+  });
+  type Browse = null | 'paper' | 'layer' | 'fill' | 'light';
+  const BROWSERS: Record<Exclude<Browse, null>, { uses: EffectUse[]; title: string }> = {
+    paper: { uses: ['generator'], title: 'Effect paper' },
+    layer: { uses: ['generator', 'overlay', 'title'], title: 'Effect layer' },
+    fill: { uses: ['generator', 'overlay', 'title'], title: 'Fill the layer' },
+    light: { uses: ['filter'], title: 'Light on the paint' },
+  };
+  let browse = $state<Browse>(null);
+  let error = $state<string | null>(null);
+  let busy = $state(false);
+  const run = (work: () => unknown) =>
+    attempt(() => {
+      busy = true;
+      return Promise.resolve().then(work).finally(() => (busy = false));
+    }, (m) => (error = m));
+  const drags = new Set<string>();
+  /** The first change of a drag records the undo step; later ones join it. */
+  function commit(gesture: string | null) {
+    if (!gesture) return true;
+    if (drags.has(gesture)) return false;
+    drags.add(gesture);
+    return true;
+  }
+  function toggle(b: Exclude<Browse, null>) {
+    browse = browse === b ? null : b;
+  }
+  function pick(id: string) {
+    const kind = browse;
+    const layerId = view.activeId;
+    browse = null;
+    if (kind === 'paper') run(() => controller.setPaperEffect(id));
+    else if (kind === 'layer') run(() => controller.addEffectLayer(id));
+    else if (kind === 'fill') run(() => controller.fillLayerWithEffect(id));
+    else if (kind === 'light' && layerId) run(() => controller.applyLightEffect(layerId, id));
+  }
+</script>
+
+<!--
+  Provider effects in the paint editor: effect paper (a generator over the sheet, multiplied so the
+  grain shows), effect layers, effect fills and light baked onto the active layer's dried paint;
+  plus the controls of the effect paper and of an active effect layer. Each change is one undo
+  step (a slider drag is one). Without a provider it says why nothing can be added.
+-->
+<div class={`${panel} ${className}`} data-testid="paint-effects-panel" aria-busy={busy}>
+  <div class="flex flex-wrap items-center gap-1">
+    <span class="flex-1 font-medium text-slate-300">Effects</span>
+    <button type="button" class={button} disabled={!provider} aria-pressed={browse === 'paper'} onclick={() => toggle('paper')}>Paper…</button>
+    <button type="button" class={button} disabled={!provider} aria-pressed={browse === 'layer'} onclick={() => toggle('layer')}>Layer…</button>
+    <button type="button" class={button} disabled={!provider || !view.pixel} aria-pressed={browse === 'fill'} onclick={() => toggle('fill')}>Fill…</button>
+    <button type="button" class={button} disabled={!provider || !view.pixel} aria-pressed={browse === 'light'} onclick={() => toggle('light')} title="Bake a light, glow or grade into the active layer's dried paint">Light…</button>
+  </div>
+  {#if !provider}<p class="text-[11px] text-slate-400">No effects provider is registered. Effects in the painting are kept.</p>{/if}
+  {#if browse}
+    <EffectsBrowser {provider} uses={BROWSERS[browse].uses} title={BROWSERS[browse].title} onpick={(e) => pick(e.id)} />
+  {/if}
+  {#if view.paper}
+    {@const paper = view.paper}
+    <div class="flex flex-col gap-1 rounded border border-slate-700 p-1" data-effect-part="paper">
+      <div class="flex items-center gap-1">
+        <span class="flex-1 truncate">Paper: {paper.name ?? paper.effect}</span>
+        <button type="button" class={button} aria-label="Remove the effect paper" onclick={() => run(() => controller.setPaperEffect(null))}>✕</button>
+      </div>
+      <label class="flex items-center gap-1">
+        <span class="w-14 text-[11px] text-slate-400">Opacity</span>
+        <input type="range" min="0" max="1" step="0.01" class="flex-1" aria-label="Effect paper opacity" value={paper.opacity} onchange={(e) => { const opacity = Number(e.currentTarget.value); run(() => controller.updatePaperEffect({ opacity })); }} />
+      </label>
+      <label class="flex items-center gap-1">
+        <span class="w-14 text-[11px] text-slate-400">Blend</span>
+        <select class="flex-1 rounded bg-slate-800 px-1 py-0.5 text-[11px]" aria-label="Effect paper blend" value={paper.blend} onchange={(e) => { const blend = e.currentTarget.value as PaperEffectBlend; run(() => controller.updatePaperEffect({ blend })); }}>
+          {#each PAPER_EFFECT_BLENDS as b (b)}<option value={b}>{b}</option>{/each}
+        </select>
+      </label>
+      <ImageEffectControls
+        {provider}
+        effect={paper.effect}
+        name={paper.name}
+        values={paper.values}
+        onchange={(k, v, gesture) => run(() => controller.updatePaperEffect({ values: { [k]: v as never } }, commit(gesture)))}
+        onpreset={(values) => run(() => controller.updatePaperEffect({ values: { ...values } as never }))}
+      />
+    </div>
+  {/if}
+  {#if view.layerEffect && view.activeId}
+    {@const fx = view.layerEffect}
+    {@const layerId = view.activeId}
+    <div class="flex flex-col gap-1 rounded border border-slate-700 p-1" data-effect-part="layer">
+      <div class="flex items-center gap-1">
+        <span class="flex-1 truncate">Layer: {fx.name ?? fx.effect}</span>
+        <button type="button" class={button} title="Keep the pixels as a plain layer" onclick={() => run(() => controller.rasterizeEffectLayer(layerId))}>Rasterize</button>
+      </div>
+      <ImageEffectControls
+        {provider}
+        effect={fx.effect}
+        name={fx.name}
+        values={fx.values}
+        onchange={(k, v, gesture) => run(() => controller.updateEffectLayer(layerId, { values: { [k]: v as never } }, commit(gesture)))}
+        onpreset={(values) => run(() => controller.updateEffectLayer(layerId, { values: { ...values } as never }))}
+      />
+    </div>
+  {/if}
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

package/dist/paint-editor/PaintEffectsPanel.svelte.d.ts

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

package/dist/paint-editor/PaintEffectsPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintEffectsPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintEffectsPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAuB,KAAK,qBAAqB,EAAyB,MAAM,+BAA+B,CAAC;AAOrH,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6GH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

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

@@ -8,6 +8,7 @@ import type ColorPanelComponent from './ColorPanel.svelte';
 import type PaintLayersPanelComponent from './PaintLayersPanel.svelte';
 import type WetPanelComponent from './WetPanel.svelte';
 import type StickerPanelComponent from './StickerPanel.svelte';
+import type PaintEffectsPanelComponent from './PaintEffectsPanel.svelte';
 import type PaintGradientEditorComponent from './PaintGradientEditor.svelte';
 export { default as PaintEditor } from './PaintEditor.svelte';
 export { default as PaintCanvas } from './PaintCanvas.svelte';
@@ -18,10 +19,11 @@ export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as WetPanel } from './WetPanel.svelte';
 export { default as StickerPanel } from './StickerPanel.svelte';
+export { default as PaintEffectsPanel } from './PaintEffectsPanel.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
 export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
-export { createPaintDirector, createReactivePaintEditor, paintEditorState } from './paintEditorRune.svelte.js';
+export { createPaintDirector, createReactivePaintEditor, paintEditorState, paintEffectsProvider, usePaintEffectsTools } from './paintEditorRune.svelte.js';
 export type PaintEditorProps = ComponentProps<typeof PaintEditorComponent>;
 export type PaintCanvasProps = ComponentProps<typeof PaintCanvasComponent>;
 export type PaintToolbarProps = ComponentProps<typeof PaintToolbarComponent>;
@@ -31,5 +33,6 @@ export type ColorPanelProps = ComponentProps<typeof ColorPanelComponent>;
 export type PaintLayersPanelProps = ComponentProps<typeof PaintLayersPanelComponent>;
 export type WetPanelProps = ComponentProps<typeof WetPanelComponent>;
 export type StickerPanelProps = ComponentProps<typeof StickerPanelComponent>;
+export type PaintEffectsPanelProps = ComponentProps<typeof PaintEffectsPanelComponent>;
 export type PaintGradientEditorProps = ComponentProps<typeof PaintGradientEditorComponent>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/paint-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,iBAAiB,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,4BAA4B,MAAM,8BAA8B,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/G,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACrF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACrE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE7E,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,4BAA4B,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/paint-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,iBAAiB,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,0BAA0B,MAAM,4BAA4B,CAAC;AACzE,OAAO,KAAK,4BAA4B,MAAM,8BAA8B,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAE3J,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACrF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACrE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAEvF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,4BAA4B,CAAC,CAAC"}

package/dist/paint-editor/index.js

@@ -7,7 +7,8 @@ export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as WetPanel } from './WetPanel.svelte';
 export { default as StickerPanel } from './StickerPanel.svelte';
+export { default as PaintEffectsPanel } from './PaintEffectsPanel.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
 export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
-export { createPaintDirector, createReactivePaintEditor, paintEditorState } from './paintEditorRune.svelte.js';
+export { createPaintDirector, createReactivePaintEditor, paintEditorState, paintEffectsProvider, usePaintEffectsTools } from './paintEditorRune.svelte.js';

package/dist/paint-editor/paintEditorRune.svelte.d.ts

@@ -1,4 +1,6 @@
-import { PaintDirector, PaintEditorController, PaintPresence, type PaintDirectorOptions, type PaintEditorOptions, type PaintEditorState } from '@pixerate/editor/paint-editor';
+import { PaintDirector, PaintEditorController, PaintPresence, type PaintDirectorOptions, type PaintEditorOptions, type PaintEditorState, type PaintEffectsToolProviderOptions } from '@pixerate/editor/paint-editor';
+import type { EffectProvider } from '@pixerate/editor/effects';
+import type { ToolRegistry } from '@pixerate/editor/tools';
 /**
  * A `PaintEditorController` (created from `options`, or the one given) with its state as a
  * rune: `editor.state` updates after every change. Call `destroy()` to unsubscribe.
@@ -26,4 +28,14 @@ export declare const button = "px-2 py-1 rounded text-[11px] bg-slate-800 text-s
 export declare const panel = "flex flex-col gap-2 text-xs text-slate-200";
 /** Runs `fn` and returns the error message it threw (or a rejected promise's, through `onAsync`). */
 export declare function attempt(fn: () => unknown, onError: (msg: string | null) => void): void;
+/** The controller's effects provider as a rune, following `setEffectsProvider`. */
+export declare function paintEffectsProvider(controller: () => PaintEditorController): {
+    readonly current: EffectProvider | null;
+};
+/**
+ * Registers the paint editor's provider-effect tools (`set_paper_effect`, `add_effect_layer`,
+ * `fill_layer_with_effect`, `apply_effect`, …) for the lifetime of the calling component. Before
+ * an effects provider is registered the read tools say so and the write tools refuse.
+ */
+export declare function usePaintEffectsTools(registry: ToolRegistry | null | undefined | (() => ToolRegistry | null | undefined), controller: PaintEditorController, options?: PaintEffectsToolProviderOptions): void;
 //# sourceMappingURL=paintEditorRune.svelte.d.ts.map

package/dist/paint-editor/paintEditorRune.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paintEditorRune.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/paintEditorRune.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,EAAE,KAAK,oBAAoB,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAE/K;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAkB,GAAG,qBAA0B;;;;EAiBjG;AAED,8FAA8F;AAC9F,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,qBAAqB,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAA;CAAE,CAoBhH;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,qBAAqB,EAAE,OAAO,GAAE,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAM,GAAG;IAAE,QAAQ,EAAE,aAAa,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAA;CAAE,CAG9K;AAED,eAAO,MAAM,IAAI,GAAI,IAAI,OAAO,WAAwH,CAAC;AACzJ,eAAO,MAAM,MAAM,qGAAqG,CAAC;AACzH,eAAO,MAAM,KAAK,+CAA+C,CAAC;AAElE,qGAAqG;AACrG,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,OAAO,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI,CAQtF"}
+{"version":3,"file":"paintEditorRune.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/paintEditorRune.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAAkC,aAAa,EAAE,qBAAqB,EAAE,aAAa,EAAE,KAAK,oBAAoB,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,KAAK,+BAA+B,EAAE,MAAM,+BAA+B,CAAC;AACrP,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAkB,GAAG,qBAA0B;;;;EAiBjG;AAED,8FAA8F;AAC9F,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,qBAAqB,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAA;CAAE,CAoBhH;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,qBAAqB,EAAE,OAAO,GAAE,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAM,GAAG;IAAE,QAAQ,EAAE,aAAa,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAA;CAAE,CAG9K;AAED,eAAO,MAAM,IAAI,GAAI,IAAI,OAAO,WAAwH,CAAC;AACzJ,eAAO,MAAM,MAAM,qGAAqG,CAAC;AACzH,eAAO,MAAM,KAAK,+CAA+C,CAAC;AAElE,qGAAqG;AACrG,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,OAAO,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI,CAQtF;AAED,mFAAmF;AACnF,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,MAAM,qBAAqB,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAAA;CAAE,CAgBzH;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,EACnF,UAAU,EAAE,qBAAqB,EACjC,OAAO,GAAE,+BAAoC,GAC5C,IAAI,CAMN"}

package/dist/paint-editor/paintEditorRune.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from 'svelte';
-import { PaintDirector, PaintEditorController, PaintPresence } from '@pixerate/editor/paint-editor';
+import { createPaintEffectsToolProvider, PaintDirector, PaintEditorController, PaintPresence } from '@pixerate/editor/paint-editor';
 /**
  * A `PaintEditorController` (created from `options`, or the one given) with its state as a
  * rune: `editor.state` updates after every change. Call `destroy()` to unsubscribe.
@@ -68,3 +68,34 @@ export function attempt(fn, onError) {
         onError(e instanceof Error ? e.message : String(e));
     }
 }
+/** The controller's effects provider as a rune, following `setEffectsProvider`. */
+export function paintEffectsProvider(controller) {
+    let provider = $state.raw(controller().effectsProvider);
+    $effect(() => {
+        const c = controller();
+        return untrack(() => {
+            provider = c.effectsProvider;
+            return c.effects.subscribe((p) => {
+                provider = p;
+            });
+        });
+    });
+    return {
+        get current() {
+            return provider;
+        },
+    };
+}
+/**
+ * Registers the paint editor's provider-effect tools (`set_paper_effect`, `add_effect_layer`,
+ * `fill_layer_with_effect`, `apply_effect`, …) for the lifetime of the calling component. Before
+ * an effects provider is registered the read tools say so and the write tools refuse.
+ */
+export function usePaintEffectsTools(registry, controller, options = {}) {
+    $effect(() => {
+        const target = typeof registry === 'function' ? registry() : registry;
+        if (!target)
+            return;
+        return target.register(createPaintEffectsToolProvider(controller, options));
+    });
+}

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.1",
+  "version": "0.90.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.1"
+    "@pixerate/editor": "0.126.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",