@pixerate/editor-svelte 0.86.3 → 0.88.0

package/dist/effects/EffectsBrowser.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { EFFECT_USE_LABELS, type EffectProvider, type EffectSummary, type EffectUse } from '@pixerate/editor/effects';
+  import EffectThumbnail from './EffectThumbnail.svelte';
+
+  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[];
+    /** Called with the effect the user picks. */
+    onpick: (effect: EffectSummary) => void;
+    /** Draw previews with the provider's renderer (default true). */
+    thumbnails?: boolean;
+    /** Heading (default "Effects"; empty for none). */
+    title?: string;
+    class?: string;
+  }
+
+  let { provider, uses, onpick, thumbnails = true, title = 'Effects', class: className = '' }: Props = $props();
+  let all = $state.raw<readonly EffectSummary[]>([]);
+  let found = $state.raw<readonly EffectSummary[]>([]);
+  let query = $state('');
+  let category = $state('');
+  let use = $state<EffectUse | ''>('');
+  let error = $state<string | null>(null);
+
+  $effect(() => {
+    const p = provider;
+    all = [];
+    if (!p) return;
+    let live = true;
+    Promise.resolve()
+      .then(() => p.list())
+      .then(
+        (list) => {
+          if (live) (all = list), (error = null);
+        },
+        (e: unknown) => {
+          if (live) error = e instanceof Error ? e.message : String(e);
+        },
+      );
+    return () => {
+      live = false;
+    };
+  });
+  $effect(() => {
+    const p = provider;
+    const q = query;
+    const options = { ...(category ? { category } : {}), ...(use ? { use } : {}) };
+    if (!p) {
+      found = [];
+      return;
+    }
+    let live = true;
+    Promise.resolve()
+      .then(() => p.search(q, options))
+      .then(
+        (list) => {
+          if (live) found = list;
+        },
+        () => {
+          if (live) found = [];
+        },
+      );
+    return () => {
+      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 categories = $derived([...new Set(all.filter(allowed).map((e) => e.category))]);
+  const shown = $derived(found.filter(allowed));
+</script>
+
+<!--
+  Browses a provider's effects: a search box, a category filter (and a use filter when more than one
+  use is allowed), and a grid of effects with previews. Picking one calls `onpick`.
+-->
+{#if !provider}
+  <div class="rounded-md border border-dashed border-border p-3 text-xs text-muted-foreground {className}" data-effects-browser="" data-effects-unavailable="">
+    No effects provider is registered, so effects cannot be added. Effects already in the document are kept.
+  </div>
+{:else}
+  <section class="flex flex-col gap-2 {className}" data-effects-browser="" aria-label="Effects browser">
+    {#if title}<h3 class="text-xs font-semibold">{title}</h3>{/if}
+    <div class="flex flex-wrap gap-1">
+      <input type="search" class="min-w-0 flex-1 rounded border border-border bg-transparent px-1.5 py-0.5 text-xs" placeholder="Search effects" aria-label="Search effects" bind:value={query} />
+      <select class="rounded border border-border bg-transparent px-1 py-0.5 text-xs" aria-label="Category" bind:value={category}>
+        <option value="">All categories</option>
+        {#each categories as c (c)}<option value={c}>{c}</option>{/each}
+      </select>
+      {#if uses && uses.length > 1}
+        <select class="rounded border border-border bg-transparent px-1 py-0.5 text-xs" aria-label="Use" bind:value={use}>
+          <option value="">Any use</option>
+          {#each uses as u (u)}<option value={u}>{EFFECT_USE_LABELS[u]}</option>{/each}
+        </select>
+      {/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">
+      {#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)}>
+            {#if thumbnails}<EffectThumbnail {provider} effect={e} />{/if}
+            <span class="truncate text-[11px] font-medium">{e.name}</span>
+            <span class="truncate text-[10px] text-muted-foreground">{e.uses.map((u) => EFFECT_USE_LABELS[u]).join(' · ')}</span>
+          </button>
+        </li>
+      {/each}
+    </ul>
+    {#if !shown.length && !error}<p class="text-[11px] text-muted-foreground">No effects match.</p>{/if}
+  </section>
+{/if}

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

@@ -0,0 +1,18 @@
+import { 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[];
+    /** Called with the effect the user picks. */
+    onpick: (effect: EffectSummary) => void;
+    /** Draw previews with the provider's renderer (default true). */
+    thumbnails?: boolean;
+    /** Heading (default "Effects"; empty for none). */
+    title?: string;
+    class?: string;
+}
+declare const EffectsBrowser: import("svelte").Component<Props, {}, "">;
+type EffectsBrowser = ReturnType<typeof EffectsBrowser>;
+export default EffectsBrowser;
+//# sourceMappingURL=EffectsBrowser.svelte.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,17 @@
+import type { EffectDescription, EffectProvider } from "@pixerate/editor/effects";
+/** Anything that takes an effects provider: every editor controller with effects support. */
+export interface EffectsHost {
+    useEffects(provider: EffectProvider): () => void;
+}
+/**
+ * Registers a provider with an editor for the lifetime of the calling component (call it during
+ * initialisation), following the getters: a new provider replaces the old one, `null` or
+ * `undefined` removes it. Without a provider the editor behaves as without effects support.
+ */
+export declare function useEffects(host: EffectsHost | null | undefined | (() => EffectsHost | null | undefined), provider: EffectProvider | null | undefined | (() => EffectProvider | null | undefined)): void;
+/** An effect's description from the provider, reloaded when the getters change (`null` while loading or on error). */
+export declare function effectDescriptionOf(provider: () => EffectProvider | null | undefined, effect: () => string | null | undefined): {
+    readonly description: EffectDescription | null;
+    readonly error: string | null;
+};
+//# sourceMappingURL=effects.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"effects.svelte.d.ts","sourceRoot":"","sources":["../../src/effects/effects.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAElF,6FAA6F;AAC7F,MAAM,WAAW,WAAW;IAC1B,UAAU,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,IAAI,CAAC;CAClD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,QAAQ,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,IAAI,CAOvM;AAED,sHAAsH;AACtH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG;IAAE,QAAQ,CAAC,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAgCjN"}

package/dist/effects/effects.svelte.js

@@ -0,0 +1,49 @@
+import { untrack } from "svelte";
+/**
+ * Registers a provider with an editor for the lifetime of the calling component (call it during
+ * initialisation), following the getters: a new provider replaces the old one, `null` or
+ * `undefined` removes it. Without a provider the editor behaves as without effects support.
+ */
+export function useEffects(host, provider) {
+    $effect(() => {
+        const h = typeof host === "function" ? host() : host;
+        const p = typeof provider === "function" ? provider() : provider;
+        if (!h || !p)
+            return;
+        return untrack(() => h.useEffects(p));
+    });
+}
+/** An effect's description from the provider, reloaded when the getters change (`null` while loading or on error). */
+export function effectDescriptionOf(provider, effect) {
+    let description = $state.raw(null);
+    let error = $state(null);
+    $effect(() => {
+        const p = provider();
+        const id = effect();
+        description = null;
+        error = null;
+        if (!p || !id)
+            return;
+        let live = true;
+        Promise.resolve()
+            .then(() => p.describe(id))
+            .then((d) => {
+            if (live)
+                description = d;
+        }, (e) => {
+            if (live)
+                error = e instanceof Error ? e.message : String(e);
+        });
+        return () => {
+            live = false;
+        };
+    });
+    return {
+        get description() {
+            return description;
+        },
+        get error() {
+            return error;
+        },
+    };
+}

package/dist/effects/index.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from "svelte";
+import type EffectsBrowserComponent from "./EffectsBrowser.svelte";
+import type EffectParametersComponent from "./EffectParameters.svelte";
+import type EffectThumbnailComponent from "./EffectThumbnail.svelte";
+export { default as EffectsBrowser } from "./EffectsBrowser.svelte";
+export { default as EffectParameters } from "./EffectParameters.svelte";
+export { default as EffectThumbnail } from "./EffectThumbnail.svelte";
+export * from "./effects.svelte.js";
+export type EffectsBrowserProps = ComponentProps<typeof EffectsBrowserComponent>;
+export type EffectParametersProps = ComponentProps<typeof EffectParametersComponent>;
+export type EffectThumbnailProps = ComponentProps<typeof EffectThumbnailComponent>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/effects/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,cAAc,qBAAqB,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC;AACjF,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACrF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC"}

package/dist/effects/index.js

@@ -0,0 +1,4 @@
+export { default as EffectsBrowser } from "./EffectsBrowser.svelte";
+export { default as EffectParameters } from "./EffectParameters.svelte";
+export { default as EffectThumbnail } from "./EffectThumbnail.svelte";
+export * from "./effects.svelte.js";

package/dist/image-editor/BrushOptionsBar.svelte

@@ -14,6 +14,8 @@
     setRetouchChoice,
   } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
+  import { DEFAULT_PAINT_GRADIENT } from '@pixerate/editor/image-editor';
+  import PaintGradientEditor from './PaintGradientEditor.svelte';
   import ControlSlider from './ControlSlider.svelte';
 
   interface Props {
@@ -83,7 +85,19 @@
     </label>
     <button type="button" title="Swap colours (X)" class={chip(false)} onclick={() => controller.swapPaintColors()}>Swap</button>
     <button type="button" title="Default colours (D)" class={chip(false)} onclick={() => controller.resetPaintColors()}>Default</button>
+    {#if view.tool === 'brush'}
+      <button
+        type="button"
+        aria-pressed={view.paint.type === 'gradient'}
+        title="Gradient paint: the brush changes colour as the stroke goes"
+        class={chip(view.paint.type === 'gradient')}
+        onclick={() => attempt(() => controller.setPaintOptions(view.paint.type === 'gradient' ? { foreground: view.foreground } : { paint: DEFAULT_PAINT_GRADIENT }))}>Gradient</button
+      >
+    {/if}
   </div>
+  {#if view.tool === 'brush' && view.paint.type === 'gradient'}
+    <PaintGradientEditor value={view.paint} colors={{ paint: view.foreground, secondary: view.background }} onchange={(g) => attempt(() => controller.setPaintOptions({ paint: g }))} />
+  {/if}
 
   {#each BRUSH_OPTION_CONTROLS as spec (spec.id)}
     <ControlSlider {spec} value={view.brush[spec.id]} onchange={(v) => controller.setPaintOptions({ brush: { [spec.id]: v } })} />

package/dist/image-editor/BrushOptionsBar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BrushOptionsBar.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/BrushOptionsBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAkBzE,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8IH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"BrushOptionsBar.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/BrushOptionsBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAoBzE,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsJH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/image-editor/ImageEditor.svelte

@@ -50,6 +50,9 @@
   import TypeOptionsBar from './TypeOptionsBar.svelte';
   import { onDestroy, untrack } from 'svelte';
   import { createReactiveImageEditor, type ReactiveImageEditor } from './imageEditorState.svelte.js';
+  import ImageProviderEffectsPanel from './ImageProviderEffectsPanel.svelte';
+  import type { EffectProvider } from '@pixerate/editor/effects';
+  import { useEffects } from '../effects/effects.svelte.js';
 
   interface Props {
     editor?: ReactiveImageEditor;
@@ -62,6 +65,12 @@
     onRemoveBackground?: RemoveBackgroundHook;
     aiHooks?: ImageEditorAIHooks;
     fit?: ImageEditorFit;
+    /**
+     * An effects provider (see `@pixerate/editor/effects`), registered with the controller while
+     * mounted: filter effects as smart filters and generator or overlay effects as effect layers,
+     * with an Effects section in the Layers tab. Optional: without one the editor is as before.
+     */
+    effects?: EffectProvider | null;
   }
 
   let {
@@ -75,11 +84,16 @@
     onRemoveBackground,
     aiHooks,
     fit,
+    effects,
   }: Props = $props();
 
   const internalEditor = createReactiveImageEditor();
   const editor = $derived(propEditor || internalEditor);
   onDestroy(() => internalEditor.destroy());
+  useEffects(() => editor.controller, () => effects);
+  const hasEffects = (l: import('@pixerate/editor/image-editor').ImageLayer): boolean =>
+    (l.type === 'pixel' && !!l.generator) || (l.type === 'smart' && !!l.smartFilters?.filters.some((f) => f.kind === 'effect')) || (l.type === 'group' && l.children.some(hasEffects));
+  const effectsShown = $derived(!!effects || !!editor.controller.effectsProvider || editor.state.layers.some(hasEffects));
   const legacyProcess = $derived(
     normalizeProcessVersion(editor.state.adjustments.process) < LATEST_PROCESS_VERSION
   );
@@ -1280,6 +1294,7 @@
             disabled={transformActive}
             onclick={() => transformTool.begin()}>Free Transform</button>
           <LayersPanel controller={editor.controller} />
+          {#if effectsShown}<ImageProviderEffectsPanel controller={editor.controller} class="border-t border-slate-700/60 pt-3" />{/if}
           <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Colour</span>
           <ColorProfilePanel controller={editor.controller} />
         </div>

package/dist/image-editor/ImageEditor.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { ExportOptions, InpaintHook, RemoveBackgroundHook, ImageEditorAIHooks, ImageEditorFit } from '@pixerate/editor/image-editor';
 import { type ReactiveImageEditor } from './imageEditorState.svelte.js';
+import type { EffectProvider } from '@pixerate/editor/effects';
 interface Props {
     editor?: ReactiveImageEditor;
     src?: string;
@@ -11,6 +12,12 @@ interface Props {
     onRemoveBackground?: RemoveBackgroundHook;
     aiHooks?: ImageEditorAIHooks;
     fit?: ImageEditorFit;
+    /**
+     * An effects provider (see `@pixerate/editor/effects`), registered with the controller while
+     * mounted: filter effects as smart filters and generator or overlay effects as effect layers,
+     * with an Effects section in the Layers tab. Optional: without one the editor is as before.
+     */
+    effects?: EffectProvider | null;
 }
 declare const ImageEditor: import("svelte").Component<Props, {}, "">;
 type ImageEditor = ReturnType<typeof ImageEditor>;

package/dist/image-editor/ImageEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIR,aAAa,EAGb,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACf,MAAM,+BAA+B,CAAC;AAuCzC,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGjG,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB;AAs2CH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIR,aAAa,EAGb,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACf,MAAM,+BAA+B,CAAC;AAuCzC,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAI7D,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;CACjC;AA+2CH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/image-editor/ImageEffectControls.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { EffectProvider } from '@pixerate/editor/effects';
+  import EffectParameters from '../effects/EffectParameters.svelte';
+  import { effectDescriptionOf } from '../effects/effects.svelte.js';
+
+  interface Props {
+    provider: EffectProvider | null;
+    effect: string;
+    name?: string;
+    values: Readonly<Record<string, unknown>>;
+    onchange: (control: string, value: unknown, gesture: string | null) => void;
+    onpreset: (values: Readonly<Record<string, unknown>>) => void;
+  }
+
+  let { provider, effect, name, values, onchange, onpreset }: Props = $props();
+  const loaded = effectDescriptionOf(() => provider, () => effect);
+</script>
+
+<!-- One effect's controls, loaded from the provider; a note when it does not have the effect. -->
+{#if !provider}
+  <p class="text-[11px] text-slate-400">No effects provider: "{name ?? effect}" is kept but not drawn.</p>
+{:else if loaded.error}
+  <p class="text-[11px] text-amber-400">{loaded.error}</p>
+{:else if !loaded.description}
+  <p class="text-[11px] text-slate-400">Loading…</p>
+{:else}
+  {@const description = loaded.description}
+  <EffectParameters {description} {values} {onchange} onreset={(k) => onchange(k, description.defaults[k], null)} {onpreset} />
+{/if}

package/dist/image-editor/ImageEffectControls.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { EffectProvider } from '@pixerate/editor/effects';
+interface Props {
+    provider: EffectProvider | null;
+    effect: string;
+    name?: string;
+    values: Readonly<Record<string, unknown>>;
+    onchange: (control: string, value: unknown, gesture: string | null) => void;
+    onpreset: (values: Readonly<Record<string, unknown>>) => void;
+}
+declare const ImageEffectControls: import("svelte").Component<Props, {}, "">;
+type ImageEffectControls = ReturnType<typeof ImageEffectControls>;
+export default ImageEffectControls;
+//# sourceMappingURL=ImageEffectControls.svelte.d.ts.map

package/dist/image-editor/ImageEffectControls.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEffectControls.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageEffectControls.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAK7D,UAAU,KAAK;IACb,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC1C,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5E,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;CAC/D;AAyBH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/image-editor/ImageProviderEffectsPanel.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import { findLayer, type ImageEditorController, type ImageLayer, type SmartObjectLayer } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+  import EffectsBrowser from '../effects/EffectsBrowser.svelte';
+  import ImageEffectControls from './ImageEffectControls.svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  let browse = $state<null | 'filter' | 'layer'>(null);
+  let message = $state<string | null>(null);
+  let open = $state<string | null>(null);
+  const snapshot = $derived.by(() => {
+    void tick;
+    const s = controller.getState();
+    const layer: ImageLayer | null = s.activeLayerId ? (findLayer(s.layers, s.activeLayerId)?.layer ?? null) : null;
+    return { provider: controller.effectsProvider, layer };
+  });
+  const provider = $derived(snapshot.provider);
+  const layer = $derived(snapshot.layer);
+  const all = $derived(layer?.type === 'smart' ? ((layer as SmartObjectLayer).smartFilters?.filters ?? []) : []);
+  const generator = $derived(layer?.type === 'pixel' ? layer.generator : undefined);
+  const canFilter = $derived(!!layer && layer.type !== 'adjustment' && layer.type !== 'annotation');
+  const btn = 'rounded border border-slate-700 px-1.5 py-0.5 text-[11px] text-slate-300 hover:text-white disabled:opacity-40';
+  const drags = new Set<string>();
+  /** Changes during a drag skip the undo stack after the first, so the drag is one step. */
+  function commit(gesture: string | null) {
+    if (!gesture) return true;
+    if (drags.has(gesture)) return false;
+    drags.add(gesture);
+    return true;
+  }
+  function run(work: () => unknown) {
+    message = null;
+    Promise.resolve()
+      .then(work)
+      .catch((e: unknown) => (message = e instanceof Error ? e.message : String(e)));
+  }
+</script>
+
+<!--
+  Provider effects for the active layer: its effect smart filters (apply, turn on and off, opacity,
+  reorder, change controls, remove) and, for an effect layer, its own controls; plus adding effect
+  layers. Applying a filter effect to a pixel layer converts it to a smart object in the same undo
+  step. Without a provider it says why nothing can be added.
+-->
+<section class="flex flex-col gap-2 text-xs {className}" aria-label="Provider effects" data-image-provider-effects="">
+  <div class="flex items-center gap-1">
+    <span class="flex-1 text-[11px] font-semibold uppercase tracking-wider text-slate-200">Effects</span>
+    <button type="button" class={btn} disabled={!provider || !canFilter} aria-pressed={browse === 'filter'} onclick={() => (browse = browse === 'filter' ? null : 'filter')}>Apply effect…</button>
+    <button type="button" class={btn} disabled={!provider} aria-pressed={browse === 'layer'} onclick={() => (browse = browse === 'layer' ? null : 'layer')}>Effect layer…</button>
+  </div>
+  {#if !provider}<p class="text-[11px] text-slate-400">No effects provider is registered. Effects in the document are kept.</p>{/if}
+  {#if browse === 'filter' && layer}
+    {@const id = layer.id}
+    <EffectsBrowser {provider} uses={['filter']} title="Filters" onpick={(e) => ((browse = null), run(() => controller.applyEffectFilter(id, e.id)))} />
+  {/if}
+  {#if browse === 'layer'}
+    <EffectsBrowser {provider} uses={['generator', 'overlay', 'title']} title="Generators and overlays" onpick={(e) => ((browse = null), run(() => controller.addEffectLayer(e.id)))} />
+  {/if}
+  {#if generator && layer}
+    {@const id = layer.id}
+    <div class="space-y-1" data-effect-part="generator">
+      <div class="flex items-center gap-1">
+        <span class="flex-1 font-medium text-slate-200">{generator.name ?? generator.effect}</span>
+        <button type="button" class={btn} title="Keep the pixels as a plain layer" onclick={() => run(() => controller.rasterizeEffectLayer(id))}>Rasterize</button>
+      </div>
+      <ImageEffectControls
+        {provider}
+        effect={generator.effect}
+        name={generator.name}
+        values={generator.values}
+        onchange={(k, v, g) => run(() => controller.updateEffectLayer(id, { values: { [k]: v as never } }, commit(g)))}
+        onpreset={(values) => run(() => controller.updateEffectLayer(id, { values: values as never }))}
+      />
+    </div>
+  {/if}
+  {#if layer && all.some((f) => f.kind === 'effect')}
+    {@const id = layer.id}
+    <ol class="space-y-1" data-effect-part="filters">
+      {#each all as f, index (f.id)}
+        {#if f.kind === 'effect'}
+          {@const label = f.name ?? f.effect}
+          <li class="rounded border border-slate-700 p-1" data-smart-effect={f.id}>
+            <div class="flex items-center gap-1">
+              <input type="checkbox" checked={f.enabled} aria-label="{label} on" onchange={(e) => {
+                const enabled = e.currentTarget.checked;
+                run(() => controller.updateEffectFilter(id, f.id, { enabled }));
+              }} />
+              <button type="button" class="min-w-0 flex-1 truncate text-left text-slate-200" aria-expanded={open === f.id} onclick={() => (open = open === f.id ? null : f.id)}>{label}</button>
+              <button type="button" class={btn} disabled={index === all.length - 1} aria-label="Move up" onclick={() => run(() => controller.updateEffectFilter(id, f.id, { index: index + 1 }))}>↑</button>
+              <button type="button" class={btn} disabled={index === 0} aria-label="Move down" onclick={() => run(() => controller.updateEffectFilter(id, f.id, { index: index - 1 }))}>↓</button>
+              <button type="button" class={btn} aria-label="Remove {label}" onclick={() => run(() => controller.removeSmartFilter(id, f.id))}>✕</button>
+            </div>
+            {#if open === f.id}
+              <div class="mt-1 space-y-2">
+                <label class="flex items-center gap-1">
+                  <span class="w-14 text-[11px] text-slate-300">Opacity</span>
+                  <input type="range" min="0" max="1" step="0.01" class="flex-1" value={f.opacity} aria-label="{label} opacity" oninput={(e) => {
+                    const opacity = Number(e.currentTarget.value);
+                    run(() => controller.updateEffectFilter(id, f.id, { opacity }));
+                  }} />
+                </label>
+                <ImageEffectControls
+                  {provider}
+                  effect={f.effect}
+                  name={f.name}
+                  values={f.values}
+                  onchange={(k, v, g) => run(() => controller.updateEffectFilter(id, f.id, { values: { [k]: v as never } }, commit(g)))}
+                  onpreset={(values) => run(() => controller.updateEffectFilter(id, f.id, { values: values as never }))}
+                />
+              </div>
+            {/if}
+          </li>
+        {/if}
+      {/each}
+    </ol>
+  {/if}
+  {#if !layer}<p class="text-[11px] text-slate-400">Select a layer to apply effects to it.</p>{/if}
+  {#if message}<p role="alert" class="text-[11px] text-rose-400">{message}</p>{/if}
+</section>

package/dist/image-editor/ImageProviderEffectsPanel.svelte.d.ts

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

package/dist/image-editor/ImageProviderEffectsPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageProviderEffectsPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageProviderEffectsPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,qBAAqB,EAA0C,MAAM,+BAA+B,CAAC;AAM5H,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8GH,QAAA,MAAM,yBAAyB,2CAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/image-editor/PaintGradientEditor.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { PAINT_GRADIENT_KIT, type PaintGradientSource } from '@pixerate/editor/image-editor';
+  import PaintGradientEditorView from '../paint-editor/PaintGradientEditorView.svelte';
+
+  interface Props {
+    value: PaintGradientSource;
+    onchange: (paint: PaintGradientSource) => void;
+    /** What `paint` / `secondary` stops show as (the editor's two colours). */
+    colors: { paint: string; secondary: string };
+    class?: string;
+  }
+  let { value, onchange, colors, class: className = '' }: Props = $props();
+</script>
+
+<!-- The gradient paint editor (see PaintGradientEditorView). -->
+<PaintGradientEditorView {value} {onchange} {colors} class={className} kit={PAINT_GRADIENT_KIT} />

package/dist/image-editor/PaintGradientEditor.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type PaintGradientSource } from '@pixerate/editor/image-editor';
+interface Props {
+    value: PaintGradientSource;
+    onchange: (paint: PaintGradientSource) => void;
+    /** What `paint` / `secondary` stops show as (the editor's two colours). */
+    colors: {
+        paint: string;
+        secondary: string;
+    };
+    class?: string;
+}
+declare const PaintGradientEditor: import("svelte").Component<Props, {}, "">;
+type PaintGradientEditor = ReturnType<typeof PaintGradientEditor>;
+export default PaintGradientEditor;
+//# sourceMappingURL=PaintGradientEditor.svelte.d.ts.map

package/dist/image-editor/PaintGradientEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintGradientEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/PaintGradientEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAI3F,UAAU,KAAK;IACb,KAAK,EAAE,mBAAmB,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/C,2EAA2E;IAC3E,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAaH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/image-editor/imageEditorState.svelte.d.ts

@@ -1,4 +1,5 @@
-import { ImageEditorController, type ImageEditorFit, type ImageEditorOptions, type ImageEditorState, type ImageEditorTool, type CropBox, type AspectRatio, type ImageAdjustments, type DepthMaskOptions, type Annotation, type CreateAnnotationPayload, type ExportOptions, type SerializedImageEditorState, type AIResultOptions, type ImagePoint, type AdjustmentKind, type AdjustmentLayerInit, type AdjustmentLayerUpdate, type ImageHistogram } from '@pixerate/editor/image-editor';
+import type { ToolRegistry } from '@pixerate/editor/tools';
+import { ImageEditorController, type ImageEffectsToolProviderOptions, type ImageEditorFit, type ImageEditorOptions, type ImageEditorState, type ImageEditorTool, type CropBox, type AspectRatio, type ImageAdjustments, type DepthMaskOptions, type Annotation, type CreateAnnotationPayload, type ExportOptions, type SerializedImageEditorState, type AIResultOptions, type ImagePoint, type AdjustmentKind, type AdjustmentLayerInit, type AdjustmentLayerUpdate, type ImageHistogram } from '@pixerate/editor/image-editor';
 export declare function createReactiveImageEditor(options?: ImageEditorOptions): {
     readonly controller: ImageEditorController;
     readonly state: ImageEditorState;
@@ -68,4 +69,11 @@ export declare function createImageHistogram(controller: ImageEditorController):
     readonly current: ImageHistogram | null;
     destroy(): void;
 };
+/**
+ * Registers the image editor's provider-effect tools (`search_effects`, `describe_effect`,
+ * `apply_effect`, `add_effect_layer`, …) for the lifetime of the calling component. They work once
+ * an effects provider is registered (see `useEffects`); before that the read tools say so and the
+ * write tools refuse.
+ */
+export declare function useImageEffectsTools(registry: ToolRegistry | null | undefined | (() => ToolRegistry | null | undefined), controller: ImageEditorController, options?: ImageEffectsToolProviderOptions): void;
 //# sourceMappingURL=imageEditorState.svelte.d.ts.map

package/dist/image-editor/imageEditorState.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imageEditorState.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/imageEditorState.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAC;AAEvC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAuB;;;;IA2BtE,mGAAmG;;;kBAQrF,eAAe;kBAGf,OAAO,GAAG,IAAI;2BAGL,WAAW;;oBAMlB,MAAM;yBAGD,MAAM;;;4BASH,OAAO,CAAC,gBAAgB,CAAC;;IAMjD,oGAAoG;;IAIpG,mEAAmE;6BAC1C,cAAc,GAAG,mBAAmB,UAAU,MAAM;8BAGnD,MAAM,UAAU,qBAAqB;8BAGrC,MAAM;4BAGR,MAAM,WAAW,MAAM;8BAGrB,MAAM,YAAY,OAAO;0BAG7B,OAAO,CAAC,gBAAgB,CAAC;;uBAM5B,uBAAuB;yBAGrB,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;yBAGpC,MAAM;;yBAMN,MAAM,GAAG,IAAI;;;;oBAYlB,MAAM;qBAGL,MAAM;;kBAMT,MAAM;gBAGR,UAAU;4BAGE,OAAO;gBAGnB,cAAc;mBAGX,MAAM,GAAG,gBAAgB;qBAGvB,aAAa;kBAGhB,aAAa;;mBAMZ,0BAA0B;sBAGvB;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;yBAG5C;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;2BAG7C,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,SAAS,CAAC;IAGhE,kGAAkG;oCAClE,MAAM,YAAY,eAAe;IAGjE,6GAA6G;4CACrE,MAAM,YAAY,eAAe;IAGzE,8EAA8E;;EAMjF;AAED,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAE/E,6GAA6G;AAC7G,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,qBAAqB;;;EAarE"}
+{"version":3,"file":"imageEditorState.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/imageEditorState.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EACL,qBAAqB,EAErB,KAAK,+BAA+B,EACpC,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAC;AAEvC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAuB;;;;IA2BtE,mGAAmG;;;kBAQrF,eAAe;kBAGf,OAAO,GAAG,IAAI;2BAGL,WAAW;;oBAMlB,MAAM;yBAGD,MAAM;;;4BASH,OAAO,CAAC,gBAAgB,CAAC;;IAMjD,oGAAoG;;IAIpG,mEAAmE;6BAC1C,cAAc,GAAG,mBAAmB,UAAU,MAAM;8BAGnD,MAAM,UAAU,qBAAqB;8BAGrC,MAAM;4BAGR,MAAM,WAAW,MAAM;8BAGrB,MAAM,YAAY,OAAO;0BAG7B,OAAO,CAAC,gBAAgB,CAAC;;uBAM5B,uBAAuB;yBAGrB,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;yBAGpC,MAAM;;yBAMN,MAAM,GAAG,IAAI;;;;oBAYlB,MAAM;qBAGL,MAAM;;kBAMT,MAAM;gBAGR,UAAU;4BAGE,OAAO;gBAGnB,cAAc;mBAGX,MAAM,GAAG,gBAAgB;qBAGvB,aAAa;kBAGhB,aAAa;;mBAMZ,0BAA0B;sBAGvB;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;yBAG5C;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;2BAG7C,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,SAAS,CAAC;IAGhE,kGAAkG;oCAClE,MAAM,YAAY,eAAe;IAGjE,6GAA6G;4CACrE,MAAM,YAAY,eAAe;IAGzE,8EAA8E;;EAMjF;AAED,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAE/E,6GAA6G;AAC7G,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,qBAAqB;;;EAarE;AAED;;;;;GAKG;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/image-editor/imageEditorState.svelte.js

@@ -1,4 +1,4 @@
-import { ImageEditorController, } from '@pixerate/editor/image-editor';
+import { ImageEditorController, createImageEffectsToolProvider, } from '@pixerate/editor/image-editor';
 export function createReactiveImageEditor(options = {}) {
     const controller = new ImageEditorController(options);
     let state = $state(controller.getState());
@@ -186,3 +186,17 @@ export function createImageHistogram(controller) {
         },
     };
 }
+/**
+ * Registers the image editor's provider-effect tools (`search_effects`, `describe_effect`,
+ * `apply_effect`, `add_effect_layer`, …) for the lifetime of the calling component. They work once
+ * an effects provider is registered (see `useEffects`); before that the read tools say so and the
+ * write tools refuse.
+ */
+export function useImageEffectsTools(registry, controller, options = {}) {
+    $effect(() => {
+        const target = typeof registry === 'function' ? registry() : registry;
+        if (!target)
+            return;
+        return target.register(createImageEffectsToolProvider(controller, options));
+    });
+}