@pixerate/editor-svelte 0.89.0 → 0.90.0

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/package.json

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