@pixerate/editor-svelte 0.87.0 → 0.88.0

package/dist/canvas/createCanvasAnimation.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCanvasAnimation.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasAnimation.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,KAAK,EACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,4BAA4B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU;IAClF,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,mDAAmD;IACnD,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAChC,+FAA+F;IAC/F,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,4BAA4B,CAAC,KAAK,CAAC;;;;;;;;;;kBA2DnG,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAak/1G,CAAC;;;;;;;;;;;YAAg/C,CAAC;mBAA8B,CAAC;;;;;;;YAAmjB,CAAC;gBAA0B,CAAC;;;EAH9m6G;AAED,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC"}
+{"version":3,"file":"createCanvasAnimation.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasAnimation.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,KAAK,EACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,4BAA4B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU;IAClF,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,mDAAmD;IACnD,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAChC,+FAA+F;IAC/F,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,4BAA4B,CAAC,KAAK,CAAC;;;;;;;;;;kBA2DnG,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAa6o2G,CAAC;;;;;;;;;;;YAAg/C,CAAC;mBAA8B,CAAC;;;;;;;YAAmjB,CAAC;gBAA0B,CAAC;;;EAHzw6G;AAED,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC"}

package/dist/canvas/createCanvasArrange.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCanvasArrange.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasArrange.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,8BAA8B,EACnC,KAAK,SAAS,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,8BAA8B,CAAC,GAAG,CAAC,CAAC;AAEvD,MAAM,WAAW,0BAA0B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CAChF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;IACrE,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EACxE,OAAO,EAAE,0BAA0B,CAAC,KAAK,CAAC;;IAkBzC;;;;;OAKG;wBACiB,MAAM;;;;;;;;;;sBAoD09wD,CAAC;sBAAiE,CAAC;sBAAiE,CAAC;oBAA+D,CAAC;cAAyD,CAAC;gBAAiD,CAAC;;;;;;;;;0BAA8tC,CAAC;;yBAA6kB,CAAC;;0BAAgf,CAAC;;;;;;;;;;EAxCpk2D;AAED,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEjH,MAAM,WAAW,6BAA6B;IAC7C,OAAO,EAAE;QAAE,SAAS,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,OAAO,CAAA;KAAE,CAAC;IACjE,uEAAuE;IACvE,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,OAAO,CAAA;KAAE,CAAC;IAC1D,aAAa,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,sBAAsB,EAAE,CAAC;CAC7C;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,6BAA6B,GAAG,MAAM,IAAI,CAqB/F"}
+{"version":3,"file":"createCanvasArrange.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasArrange.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,8BAA8B,EACnC,KAAK,SAAS,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,8BAA8B,CAAC,GAAG,CAAC,CAAC;AAEvD,MAAM,WAAW,0BAA0B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CAChF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;IACrE,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EACxE,OAAO,EAAE,0BAA0B,CAAC,KAAK,CAAC;;IAkBzC;;;;;OAKG;wBACiB,MAAM;;;;;;;;;;sBAoDqnxD,CAAC;sBAAiE,CAAC;sBAAiE,CAAC;oBAA+D,CAAC;cAAyD,CAAC;gBAAiD,CAAC;;;;;;;;;0BAA8tC,CAAC;;yBAA6kB,CAAC;;0BAAgf,CAAC;;;;;;;;;;EAxC/t2D;AAED,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEjH,MAAM,WAAW,6BAA6B;IAC7C,OAAO,EAAE;QAAE,SAAS,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,OAAO,CAAA;KAAE,CAAC;IACjE,uEAAuE;IACvE,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,OAAO,CAAA;KAAE,CAAC;IAC1D,aAAa,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,sBAAsB,EAAE,CAAC;CAC7C;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,6BAA6B,GAAG,MAAM,IAAI,CAqB/F"}

package/dist/canvas/createCanvasAutoLayout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCanvasAutoLayout.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasAutoLayout.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,iCAAiC,EACtC,KAAK,SAAS,EACd,KAAK,kBAAkB,EACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAE1D,MAAM,WAAW,6BAA6B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CACnF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;IACrE,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,6BAA6B,CAAC,KAAK,CAAC;;;IA+BzH,2FAA2F;kBAC7E,OAAO,SAAS,kBAAkB,WAAW,OAAO,EAAE,GAAG,OAAO,EAAE;IAKhF,gFAAgF;0BAC1D,QAAQ,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAIjE,4EAA4E;iBAC/D,MAAM;IAInB;;;OAGG;wBACiB,MAAM;;;;;;;;aAiB4ivE,CAAC;;;;aAAiX,CAAC;cAAwB,CAAC;;;;;;;;;;gBAAqrD,CAAC;;;;EAHzozE;AAED,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC"}
+{"version":3,"file":"createCanvasAutoLayout.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasAutoLayout.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,iCAAiC,EACtC,KAAK,SAAS,EACd,KAAK,kBAAkB,EACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAE1D,MAAM,WAAW,6BAA6B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CACnF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;IACrE,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,6BAA6B,CAAC,KAAK,CAAC;;;IA+BzH,2FAA2F;kBAC7E,OAAO,SAAS,kBAAkB,WAAW,OAAO,EAAE,GAAG,OAAO,EAAE;IAKhF,gFAAgF;0BAC1D,QAAQ,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAIjE,4EAA4E;iBAC/D,MAAM;IAInB;;;OAGG;wBACiB,MAAM;;;;;;;;aAiBusvE,CAAC;;;;aAAiX,CAAC;cAAwB,CAAC;;;;;;;;;;gBAAqrD,CAAC;;;;EAHpyzE;AAED,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC"}

package/dist/canvas/createCanvasComponents.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCanvasComponents.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasComponents.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,iCAAiC,EACtC,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAE1D,MAAM,WAAW,6BAA6B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CACnF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;IAC/D,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,6BAA6B,CAAC,KAAK,CAAC;IAazH,gCAAgC;;;;;4BASwmsI,CAAC;;UAAmM,CAAC;YAAsB,CAAC;eAAyB,CAAC;;8BAA8E,CAAC;;;;;;;;;;6BAA4nC,CAAC;;;;;;;;eAA6yB,CAAC;;;;;;;oBAAi7B,CAAC;;;;;;;;;;;;;;gBAA07C,CAAC;;EAHtu1I;AAED,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"createCanvasComponents.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasComponents.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,iCAAiC,EACtC,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAE1D,MAAM,WAAW,6BAA6B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CACnF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;IAC/D,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,6BAA6B,CAAC,KAAK,CAAC;IAazH,gCAAgC;;;;;4BASmwsI,CAAC;;UAAmM,CAAC;YAAsB,CAAC;eAAyB,CAAC;;8BAA8E,CAAC;;;;;;;;;;6BAA4nC,CAAC;;;;;;;;eAA6yB,CAAC;;;;;;;oBAAi7B,CAAC;;;;;;;;;;;;;;gBAA07C,CAAC;;EAHj41I;AAED,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/effects/EffectParameters.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { effectFieldValue, effectParameterFields, type EffectDescription } from '@pixerate/editor/effects';
+  import { parameterLabel, parameterValuesEqual, type ParameterValue } from '@pixerate/editor/parameters';
+  import ParameterFieldControl from '../parameters/ParameterFieldControl.svelte';
+
+  interface Props {
+    /** The effect's description (`describe`). */
+    description: EffectDescription;
+    /** Its saved values; controls left out show their defaults. */
+    values: Readonly<Record<string, unknown>>;
+    /**
+     * A control changed. While a slider or colour drag is under way `gesture` is a key unique to
+     * that drag, so the host can fold its changes into one undo step; otherwise `null`.
+     */
+    onchange: (control: string, value: ParameterValue, gesture: string | null) => void;
+    /** Resets one control to its default. */
+    onreset?: (control: string) => void;
+    /** Controls that are keyframed: shown read-only with a note (edit them as keyframes). */
+    keyframed?: ReadonlySet<string>;
+    /** Applies a preset's values. */
+    onpreset?: (values: Readonly<Record<string, unknown>>) => void;
+    disabled?: boolean;
+    class?: string;
+  }
+
+  let { description, values, onchange, onreset, keyframed, onpreset, disabled = false, class: className = '' }: Props = $props();
+  const fields = $derived(effectParameterFields(description));
+  const idBase = `fx-${Math.random().toString(36).slice(2, 8)}`;
+  let gesture: string | null = null;
+  let count = 0;
+  function preset(name: string) {
+    const p = description.presets.find((x) => x.name === name);
+    if (p) onpreset?.({ ...description.defaults, ...p.values });
+  }
+</script>
+
+<!--
+  The parameter panel of an effect, generated from its JSON Schema controls: sliders for bounded
+  numbers, switches, choices, colour pickers, vectors and text, with each control's description,
+  per-control reset and the effect's presets.
+-->
+<div class="space-y-2 {className}" data-effect-parameters={description.id}>
+  {#if onpreset && description.presets.length > 0}
+    <select class="w-full rounded border border-border bg-transparent px-1 py-0.5 text-xs" aria-label="{description.name} presets" value="" {disabled} onchange={(e) => preset(e.currentTarget.value)}>
+      <option value="">Presets…</option>
+      {#each description.presets as p (p.name)}<option value={p.name}>{p.name}</option>{/each}
+    </select>
+  {/if}
+  {#each fields as field (field.id)}
+    {@const label = parameterLabel(field)}
+    {@const keyed = keyframed?.has(field.id) ?? false}
+    {@const value = effectFieldValue(field, values[field.id])}
+    <div class="space-y-1" data-effect-control={field.id}>
+      <div class="flex items-center gap-1.5">
+        <label for="{idBase}-{field.id}" class="min-w-0 flex-1 truncate text-xs font-medium" title={field.description}>{label}</label>
+        {#if keyed}<span class="text-[10px] text-muted-foreground">keyframed</span>{/if}
+        {#if onreset && !keyed && !disabled && !parameterValuesEqual(value, field.default)}
+          <button type="button" class="rounded px-1 text-[11px] text-muted-foreground hover:text-foreground" aria-label="Reset {label}" onclick={() => onreset(field.id)}>↺</button>
+        {/if}
+      </div>
+      <ParameterFieldControl
+        {field}
+        {value}
+        id="{idBase}-{field.id}"
+        disabled={disabled || keyed}
+        onchange={(v) => onchange(field.id, v, gesture)}
+        ongesturestart={() => (gesture = `${idBase}:${field.id}:${++count}`)}
+        ongestureend={() => (gesture = null)}
+      />
+    </div>
+  {/each}
+  {#if !fields.length}<p class="text-[11px] text-muted-foreground">No controls.</p>{/if}
+</div>

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

@@ -0,0 +1,25 @@
+import { type EffectDescription } from '@pixerate/editor/effects';
+import { type ParameterValue } from '@pixerate/editor/parameters';
+interface Props {
+    /** The effect's description (`describe`). */
+    description: EffectDescription;
+    /** Its saved values; controls left out show their defaults. */
+    values: Readonly<Record<string, unknown>>;
+    /**
+     * A control changed. While a slider or colour drag is under way `gesture` is a key unique to
+     * that drag, so the host can fold its changes into one undo step; otherwise `null`.
+     */
+    onchange: (control: string, value: ParameterValue, gesture: string | null) => void;
+    /** Resets one control to its default. */
+    onreset?: (control: string) => void;
+    /** Controls that are keyframed: shown read-only with a note (edit them as keyframes). */
+    keyframed?: ReadonlySet<string>;
+    /** Applies a preset's values. */
+    onpreset?: (values: Readonly<Record<string, unknown>>) => void;
+    disabled?: boolean;
+    class?: string;
+}
+declare const EffectParameters: import("svelte").Component<Props, {}, "">;
+type EffectParameters = ReturnType<typeof EffectParameters>;
+export default EffectParameters;
+//# sourceMappingURL=EffectParameters.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EffectParameters.svelte.d.ts","sourceRoot":"","sources":["../../src/effects/EffectParameters.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA2C,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC3G,OAAO,EAAwC,KAAK,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAItG,UAAU,KAAK;IACb,6CAA6C;IAC7C,WAAW,EAAE,iBAAiB,CAAC;IAC/B,+DAA+D;IAC/D,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC1C;;;OAGG;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnF,yCAAyC;IACzC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,yFAAyF;IACzF,SAAS,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8CH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/effects/EffectThumbnail.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { renderEffectThumbnail, type EffectProvider, type EffectSummary } from '@pixerate/editor/effects';
+
+  interface Props {
+    provider: EffectProvider;
+    effect: EffectSummary;
+    /** Pixel size of the preview (default 96 × 54). */
+    width?: number;
+    height?: number;
+    class?: string;
+  }
+
+  let { provider, effect: item, width = 96, height = 54, class: className = '' }: Props = $props();
+  let canvas = $state<HTMLCanvasElement | null>(null);
+  let failed = $state(false);
+
+  $effect(() => {
+    failed = item.kind === 'motion';
+    if (failed) return;
+    let live = true;
+    renderEffectThumbnail(provider, item, { width, height }).then(
+      (pixels) => {
+        const ctx = live ? canvas?.getContext('2d') : null;
+        if (!ctx || typeof ImageData === 'undefined') return;
+        ctx.putImageData(new ImageData(new Uint8ClampedArray(pixels.data), pixels.width, pixels.height), 0, 0);
+      },
+      () => {
+        if (live) failed = true;
+      },
+    );
+    return () => {
+      live = false;
+    };
+  });
+</script>
+
+<!-- A preview of an effect drawn by the provider's own renderer; motion effects and failures show a label. -->
+<div
+  class="relative overflow-hidden rounded border border-border bg-[repeating-conic-gradient(#8884_0_25%,transparent_0_50%)] bg-[length:12px_12px] {className}"
+  style="aspect-ratio: {width} / {height}"
+  data-effect-thumbnail={item.id}
+>
+  {#if failed}
+    <span class="absolute inset-0 flex items-center justify-center text-[10px] text-muted-foreground">{item.kind === 'motion' ? 'Motion' : 'No preview'}</span>
+  {:else}
+    <canvas bind:this={canvas} {width} {height} class="h-full w-full" aria-hidden="true"></canvas>
+  {/if}
+</div>

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

@@ -0,0 +1,13 @@
+import { type EffectProvider, type EffectSummary } from '@pixerate/editor/effects';
+interface Props {
+    provider: EffectProvider;
+    effect: EffectSummary;
+    /** Pixel size of the preview (default 96 × 54). */
+    width?: number;
+    height?: number;
+    class?: string;
+}
+declare const EffectThumbnail: import("svelte").Component<Props, {}, "">;
+type EffectThumbnail = ReturnType<typeof EffectThumbnail>;
+export default EffectThumbnail;
+//# sourceMappingURL=EffectThumbnail.svelte.d.ts.map

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

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

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/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"}