@pixerate/editor-svelte 0.203.0 → 0.205.0

package/dist/paint-editor/BrushPanel.svelte

@@ -56,22 +56,27 @@
   const carried = $derived(brushLoadColor(snap.mixerLoad));
   // The brush's suggested colours, resolved for the colour scheme: one click makes one the paint colour.
   const palette = $derived((spec.colour?.palette ?? []).flatMap((c) => brushColourHex(c, snap.colorScheme) ?? []));
-  const loads = $derived((['dab', 'mixer', 'impasto'].includes(brush.engine) || (brush.engine === 'wet' && brush.wet.tool === 'paint')) && !brush.ghost);
+  const loads = $derived((['dab', 'mixer', 'impasto'].includes(brush.engine) || (brush.engine === 'wet' && brush.wet.tool === 'paint')) && !brush.ghost && !brush.mutation);
   const slug = (name: string) => name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 60) || 'brush';
 </script>
 
 {#snippet extra(section: string)}
   {#if section === 'shape' && brush.engine === 'sticker'}
     <StickerPicker {controller} label="Sticker stamps" selected={brush.sticker.stamps} onpick={(ref) => controller.setBrush({ sticker: { stamps: toggleStickerRef(brush.sticker.stamps, ref) } })} />
-  {:else if section === 'behaviour' && loads}
-    <div class="flex items-center gap-1">
-      <span class="text-slate-400">Carries</span>
-      <span aria-label="Brush load" title={carried ?? 'Clean'} class="h-4 w-4 rounded ring-1 ring-slate-700" style={`background: ${carried ?? 'transparent'}`}></span>
-      {#if brush.engine === 'mixer'}
-        <button type="button" class={button} onclick={() => controller.loadMixerBrush()}>Load</button>
-      {/if}
-      <button type="button" class={button} onclick={() => controller.cleanMixerBrush(brush.engine === 'mixer')}>Clean</button>
-    </div>
+  {:else if section === 'behaviour'}
+    {#if brush.mutation && !snap.hasMutationAgent}
+      <p class="text-[11px] text-amber-400" role="status" data-paint-mutation-unconnected>No agent is connected — mutation strokes will stay as ordinary paint.</p>
+    {/if}
+    {#if loads}
+      <div class="flex items-center gap-1">
+        <span class="text-slate-400">Carries</span>
+        <span aria-label="Brush load" title={carried ?? 'Clean'} class="h-4 w-4 rounded ring-1 ring-slate-700" style={`background: ${carried ?? 'transparent'}`}></span>
+        {#if brush.engine === 'mixer'}
+          <button type="button" class={button} onclick={() => controller.loadMixerBrush()}>Load</button>
+        {/if}
+        <button type="button" class={button} onclick={() => controller.cleanMixerBrush(brush.engine === 'mixer')}>Clean</button>
+      </div>
+    {/if}
   {:else if section === 'colour'}
     {#if palette.length}
       <div class="flex flex-wrap items-center gap-1" role="group" aria-label="Paint with a palette colour">

package/dist/paint-editor/EvolutionPanel.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import {
+    EVOLUTION_SLIDERS,
+    exportProposalContactSheetPng,
+    liveStrokeRefusal,
+    normalizeMutationRates,
+    paintProposalGhost,
+    proposalGenomeStrokes,
+    type EvolutionMutationRates,
+    type PaintEditorController,
+    type PaintProposals,
+    type PaintProposalsState,
+  } from '@pixerate/editor/paint-editor';
+  import PaintSlider from './PaintSlider.svelte';
+  import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
+
+  interface Props {
+    controller: PaintEditorController;
+    /** Optional proposals store (defaults to `controller.proposals`). */
+    proposals?: PaintProposals;
+    class?: string;
+  }
+  let { controller, proposals, class: className = '' }: Props = $props();
+  const editor = paintEditorState(() => controller);
+  const store = $derived(proposals ?? controller.proposals);
+
+  let proposalState = $state.raw<PaintProposalsState>({ proposals: [] });
+  $effect(() => {
+    const s = store;
+    return untrack(() => {
+      proposalState = s.getState();
+      return s.subscribe((next) => {
+        proposalState = next;
+      });
+    });
+  });
+
+  let selectedStrokes = $state<string[]>([]);
+  let selectedProposals = $state<string[]>([]);
+  let count = $state(4);
+  let seed = $state(1);
+  let mutation = $state<Required<EvolutionMutationRates>>(normalizeMutationRates());
+  let contactSheetUrl = $state<string | null>(null);
+  let error = $state<string | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+
+  const eligibleStrokes = $derived(editor.current.document.strokes.filter((s) => !liveStrokeRefusal(s.brush)));
+  const activeStrokeIds = $derived(selectedStrokes.filter((id) => eligibleStrokes.some((s) => s.id === id)));
+  const effectiveStrokeIds = $derived(
+    activeStrokeIds.length > 0
+      ? activeStrokeIds
+      : editor.current.selectedStroke && eligibleStrokes.some((s) => s.id === editor.current.selectedStroke)
+        ? [editor.current.selectedStroke]
+        : eligibleStrokes.length > 0
+          ? [eligibleStrokes[eligibleStrokes.length - 1]!.id]
+          : []
+  );
+  const variants = $derived(proposalState.proposals.filter((p) => proposalGenomeStrokes(p).length > 0));
+  const activeProposalIds = $derived(selectedProposals.filter((id) => variants.some((v) => v.id === id)));
+
+  function toggleStroke(id: string) {
+    selectedStrokes = selectedStrokes.includes(id) ? selectedStrokes.filter((x) => x !== id) : [...selectedStrokes.slice(-15), id];
+  }
+
+  function toggleProposal(id: string) {
+    selectedProposals = selectedProposals.includes(id) ? selectedProposals.filter((x) => x !== id) : [...selectedProposals.slice(-1), id];
+  }
+
+  function drawPixels(node: HTMLCanvasElement, data: Uint8ClampedArray) {
+    const draw = (d: Uint8ClampedArray) => {
+      const ctx = node.getContext('2d');
+      if (ctx && typeof ImageData !== 'undefined') ctx.putImageData(new ImageData(new Uint8ClampedArray(d), node.width, node.height), 0, 0);
+    };
+    draw(data);
+    return { update: draw };
+  }
+</script>
+
+<!-- Evolutionary strokes: pick recorded dry strokes, adjust mutation rates, and breed a grid of mutated stroke proposals. -->
+<div class={`${panel} ${className}`} data-testid="evolution-panel">
+  <div class="flex items-center justify-between">
+    <span class="font-medium text-slate-300">Evolution ({eligibleStrokes.length})</span>
+    <label class="flex items-center gap-1 text-[11px] text-slate-400">
+      <span>Count</span>
+      <input
+        type="number"
+        aria-label="Variant count"
+        min="2"
+        max="12"
+        value={count}
+        onchange={(e) => {
+          count = Math.max(2, Math.min(12, Number(e.currentTarget.value) || 4));
+        }}
+        class="w-11 rounded bg-slate-800 px-1 py-0.5 text-right font-mono text-slate-200"
+      />
+    </label>
+  </div>
+
+  {#if eligibleStrokes.length > 0}
+    <div class="flex max-h-20 flex-wrap gap-1 overflow-y-auto" role="listbox" aria-label="Parent strokes">
+      {#each eligibleStrokes as s, i (s.id)}
+        {@const on = effectiveStrokeIds.includes(s.id)}
+        <button
+          type="button"
+          role="option"
+          aria-selected={on}
+          title={`${i + 1}. ${s.brush.name} (${s.id})`}
+          class={`h-5 w-5 rounded ring-1 ${on ? 'ring-indigo-400' : 'ring-slate-700'}`}
+          style={`background: ${s.color}`}
+          onclick={() => toggleStroke(s.id)}
+        ></button>
+      {/each}
+    </div>
+  {/if}
+
+  {#each EVOLUTION_SLIDERS as c (c.path)}
+    {@const key = c.path as keyof EvolutionMutationRates}
+    <PaintSlider control={c} value={mutation[key]} onchange={(v) => (mutation = { ...mutation, [key]: v })} />
+  {/each}
+
+  <div class="flex flex-wrap gap-1">
+    <button
+      type="button"
+      class={button}
+      disabled={effectiveStrokeIds.length === 0 || editor.current.stroking}
+      onclick={() =>
+        run(() => {
+          controller.breedStrokes({ strokeIds: effectiveStrokeIds, count, mutation, seed });
+          seed += 1;
+        })}
+    >
+      Breed strokes
+    </button>
+    {#if activeProposalIds.length === 2}
+      <button
+        type="button"
+        class={button}
+        disabled={editor.current.stroking}
+        onclick={() =>
+          run(() => {
+            controller.breedProposal({ proposalIds: activeProposalIds, count, mutation, seed });
+            seed += 1;
+          })}
+      >
+        Cross over (2)
+      </button>
+    {/if}
+    {#if variants.length > 0}
+      <button
+        type="button"
+        class={button}
+        onclick={() =>
+          run(() => {
+            const sheet = exportProposalContactSheetPng(controller, variants);
+            contactSheetUrl = `data:image/png;base64,${sheet.base64}`;
+          })}
+      >
+        Contact sheet
+      </button>
+    {/if}
+  </div>
+
+  {#if variants.length > 0}
+    <div class="grid grid-cols-2 gap-1.5" data-testid="evolution-grid">
+      {#each variants as p (p.id)}
+        {@const g = paintProposalGhost(p)}
+        {@const picked = activeProposalIds.includes(p.id)}
+        <div
+          data-testid={`evolution-variant-${p.id}`}
+          class={`flex flex-col gap-1 rounded border p-1.5 ${picked ? 'border-indigo-500 bg-slate-800/90' : 'border-slate-800 bg-slate-950/60'}`}
+        >
+          <div class="flex items-center justify-between gap-1">
+            <button type="button" aria-pressed={picked} class={chip(picked)} onclick={() => toggleProposal(p.id)}>{p.title}</button>
+          </div>
+          {#if g}
+            <div class="flex h-16 items-center justify-center overflow-hidden rounded bg-slate-900/80 p-1">
+              <canvas use:drawPixels={g.data} width={g.width} height={g.height} role="img" aria-label={p.title} class="max-h-full max-w-full object-contain"></canvas>
+            </div>
+          {/if}
+          {#if p.rationale}
+            <span class="line-clamp-2 text-[10px] text-slate-400" title={p.rationale}>{p.rationale}</span>
+          {/if}
+          <div class="flex flex-wrap gap-1">
+            <button
+              type="button"
+              class={button}
+              disabled={editor.current.stroking}
+              onclick={() =>
+                run(() => {
+                  controller.breedProposal({ proposalIds: [p.id], count, mutation, seed });
+                  seed += 1;
+                })}
+            >
+              Breed from
+            </button>
+            <button type="button" class={button} onclick={() => run(() => store.accept(p.id))}>Accept</button>
+            <button type="button" class={button} onclick={() => run(() => store.reject(p.id))}>Dismiss</button>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  {#if contactSheetUrl}
+    <img src={contactSheetUrl} alt="Variant contact sheet" class="w-full rounded border border-slate-800" data-testid="evolution-contact-sheet" />
+  {/if}
+
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

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

@@ -0,0 +1,10 @@
+import { type PaintEditorController, type PaintProposals } from '@pixerate/editor/paint-editor';
+interface Props {
+    controller: PaintEditorController;
+    /** Optional proposals store (defaults to `controller.proposals`). */
+    proposals?: PaintProposals;
+    class?: string;
+}
+declare const EvolutionPanel: import("svelte").Component<Props, {}, "">;
+type EvolutionPanel = ReturnType<typeof EvolutionPanel>;
+export default EvolutionPanel;

package/dist/paint-editor/PaintCanvas.svelte

@@ -4,6 +4,7 @@
     PaintGesture,
     drawWaterOverlay,
     fitZoom,
+    startDeviceTilt,
     startWetClock,
     guideOverlay,
     handlePaintShortcut,
@@ -41,9 +42,11 @@
     proposals?: PaintProposals;
     /** Strokes an agent is painting live alongside the user's, drawn as soft lines (see `createPaintAgentStrokes`). */
     agentStrokes?: PaintAgentStrokes;
+    /** Follow device orientation (gyroscope tilt on iPhone and iPad) for thin-film iridescence view tilt. */
+    deviceTilt?: boolean;
     class?: string;
   }
-  let { controller, tool = 'brush', fillOptions, showGuides = true, fitOnMount = true, onerror, presence, proposals, agentStrokes, class: className = '' }: Props = $props();
+  let { controller, tool = 'brush', fillOptions, showGuides = true, fitOnMount = true, onerror, presence, proposals, agentStrokes, deviceTilt = false, class: className = '' }: Props = $props();
   let agentLines = $state.raw<PaintAgentStrokesState>({ strokes: [] });
   $effect(() => {
     const store = agentStrokes;
@@ -118,6 +121,13 @@
     return untrack(() => startWetClock(c));
   });
 
+  // Device orientation shifts viewTilt when opted in.
+  $effect(() => {
+    const c = controller;
+    const on = deviceTilt;
+    return on ? untrack(() => startDeviceTilt(c)) : undefined;
+  });
+
   // The water overlay.
   $effect(() => {
     void snap;

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

@@ -17,6 +17,8 @@ interface Props {
     proposals?: PaintProposals;
     /** Strokes an agent is painting live alongside the user's, drawn as soft lines (see `createPaintAgentStrokes`). */
     agentStrokes?: PaintAgentStrokes;
+    /** Follow device orientation (gyroscope tilt on iPhone and iPad) for thin-film iridescence view tilt. */
+    deviceTilt?: boolean;
     class?: string;
 }
 declare const PaintCanvas: import("svelte").Component<Props, {}, "">;

package/dist/paint-editor/PaintEditor.svelte

@@ -13,6 +13,7 @@
   import StickerPanel from './StickerPanel.svelte';
   import StrokePanel from './StrokePanel.svelte';
   import PathStrokePanel from './PathStrokePanel.svelte';
+  import EvolutionPanel from './EvolutionPanel.svelte';
   import PaintEffectsPanel from './PaintEffectsPanel.svelte';
   import { chip, paintEffectsProvider } from './paintEditorRune.svelte.js';
 
@@ -28,6 +29,8 @@
     proposals?: PaintProposals;
     /** Strokes an agent is painting live alongside the user's (see `createPaintAgentStrokes`). */
     agentStrokes?: PaintAgentStrokes;
+    /** Follow device orientation (gyroscope tilt on iPhone and iPad) for thin-film iridescence view tilt. */
+    deviceTilt?: boolean;
     class?: string;
     /**
      * Agent playback: act out the paint tools' calls here with the agent's cursor, opening the
@@ -40,7 +43,7 @@
     /** Bring the editor on screen (switch to its tab) before the agent acts. */
     onplaybackreveal?: () => void | Promise<void>;
   }
-  let { controller, fileName, height = 720, presence, proposals, agentStrokes, class: className = '', playback, playbackId = 'paint', onplaybackreveal }: Props = $props();
+  let { controller, fileName, height = 720, presence, proposals, agentStrokes, deviceTilt, class: className = '', playback, playbackId = 'paint', onplaybackreveal }: Props = $props();
 
   /** Controls a paint plan can point at, by `{ kind: 'control', id }`. */
   const PAINT_CONTROLS: Record<string, string> = {
@@ -122,7 +125,7 @@
     <BrushPanel {controller} class="w-60 shrink-0 overflow-y-auto pr-1" />
     <div class="flex min-w-0 flex-1 flex-col">
       <!-- With playback the editor draws the cursor (over the panels too), so the canvas doesn't. -->
-      <PaintCanvas {controller} {tool} {fillOptions} presence={playing ? undefined : presence} {proposals} {agentStrokes} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
+      <PaintCanvas {controller} {tool} {fillOptions} presence={playing ? undefined : presence} {proposals} {agentStrokes} {deviceTilt} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
       {#if error}<p role="alert" class="mt-1 text-[11px] text-rose-400">{error}</p>{/if}
     </div>
     <div class="flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1">
@@ -135,7 +138,7 @@
         {#if tab === 'color'}<ColorPanel {controller} />{/if}
         {#if tab === 'wet'}<WetPanel {controller} />{/if}
         {#if tab === 'paper'}<PaperPanel {controller} />{/if}
-        {#if tab === 'layers'}<PaintLayersPanel {controller} /><StrokePanel {controller} /><PathStrokePanel {controller} /><StickerPanel {controller} />{/if}
+        {#if tab === 'layers'}<PaintLayersPanel {controller} /><StrokePanel {controller} /><PathStrokePanel {controller} /><EvolutionPanel {controller} {proposals} /><StickerPanel {controller} />{/if}
         {#if tab === 'effects' && effects.current}<PaintEffectsPanel {controller} />{/if}
       </div>
     </div>

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

@@ -12,6 +12,8 @@ interface Props {
     proposals?: PaintProposals;
     /** Strokes an agent is painting live alongside the user's (see `createPaintAgentStrokes`). */
     agentStrokes?: PaintAgentStrokes;
+    /** Follow device orientation (gyroscope tilt on iPhone and iPad) for thin-film iridescence view tilt. */
+    deviceTilt?: boolean;
     class?: string;
     /**
      * Agent playback: act out the paint tools' calls here with the agent's cursor, opening the

package/dist/paint-editor/PaintLayersPanel.svelte

@@ -12,7 +12,7 @@
   const editor = paintEditorState(() => controller);
   const layers = $derived.by(() => {
     void editor.current;
-    return untrack(() => controller.listLayers());
+    return untrack(() => controller.listLayers().filter((l) => !l.temporary));
   });
   const active = $derived(layers.find((l) => l.active) ?? null);
   const light = $derived.by(() => {

package/dist/paint-editor/PaperPanel.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { DEFAULT_BACKLIGHT_COLOR, LIGHT_SLIDERS, PAPER_FAMILIES, PAPER_LIBRARY, PAPER_SLIDERS, patchPath, readPath, renderPaper, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import { DEFAULT_BACKLIGHT_COLOR, LIGHT_SLIDERS, PAPER_FAMILIES, PAPER_LIBRARY, PAPER_SLIDERS, UV_LIGHT_SLIDERS, VIEW_TILT_SLIDERS, patchPath, readPath, renderPaper, requestDeviceTiltPermission, startDeviceTilt, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import { untrack } from 'svelte';
   import PaintSlider from './PaintSlider.svelte';
   import PixelCanvas from './PixelCanvas.svelte';
-  import { attempt, button, paintEditorState, panel } from './paintEditorRune.svelte.js';
+  import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
 
   interface Props {
     controller: PaintEditorController;
@@ -18,6 +19,13 @@
     void editor.current;
     return controller.getLighting();
   });
+  const viewTilt = $derived(editor.current.viewTilt);
+  let tiltFollow = $state(false);
+  $effect(() => {
+    const c = controller;
+    const on = tiltFollow;
+    return on ? untrack(() => startDeviceTilt(c)) : undefined;
+  });
   const previews = new Map(PAPER_LIBRARY.map((p) => [p.preset, { ...SWATCH, data: renderPaper({ ...p, shading: Math.max(0.8, p.shading) }, SWATCH) }]));
 </script>
 
@@ -59,11 +67,40 @@
   </label>
   <button type="button" class={`self-start ${button}`} onclick={() => run(() => controller.setPaper({ seed: paper.seed + 1 }))}>New sheet</button>
   <div class="flex flex-col gap-1.5" data-testid="light-panel">
-    <span class="font-medium text-slate-300">Light (thick paint, metallic paper)</span>
+    <span class="font-medium text-slate-300">Light (thick paint, iridescence, metallic paper)</span>
     {#each LIGHT_SLIDERS as c (c.path)}
       <PaintSlider control={c} value={readPath(lighting, c.path)} onchange={(v) => run(() => controller.setLighting({ [c.path]: v }))} />
     {/each}
-    <button type="button" class={`self-start ${button}`} onclick={() => run(() => controller.flattenRelief())}>Flatten relief</button>
+    {#each VIEW_TILT_SLIDERS as c (c.path)}
+      <PaintSlider control={c} value={readPath(viewTilt, c.path)} onchange={(v) => run(() => controller.setViewTilt({ [c.path]: v }))} />
+    {/each}
+    <div class="flex flex-wrap items-center gap-1">
+      <button
+        type="button"
+        aria-pressed={tiltFollow}
+        class={chip(tiltFollow)}
+        onclick={() =>
+          run(async () => {
+            if (!tiltFollow && !(await requestDeviceTiltPermission())) return;
+            tiltFollow = !tiltFollow;
+          })}
+      >Device tilt</button>
+      <button type="button" class={`self-start ${button}`} onclick={() => run(() => controller.flattenRelief())}>Flatten relief</button>
+    </div>
+  </div>
+  <div class="flex flex-col gap-1.5" data-testid="uv-heat-panel">
+    <span class="font-medium text-slate-300">UV blacklight &amp; heat</span>
+    <label class="flex items-center gap-2">
+      <input type="checkbox" checked={editor.current.uvLight.on} onchange={(e) => run(() => controller.setUvLight({ on: e.currentTarget.checked }))} /> UV blacklight
+    </label>
+    {#each UV_LIGHT_SLIDERS as c (c.path)}
+      <PaintSlider control={c} value={readPath(editor.current.uvLight, c.path)} onchange={(v) => run(() => controller.setUvLight({ [c.path]: v }))} />
+    {/each}
+    <div class="flex items-center gap-1.5">
+      <button type="button" class={button} onclick={() => run(() => controller.advanceHeat(10))}>Step heat</button>
+      <button type="button" class={button} onclick={() => run(() => controller.clearHeat())}>Cool canvas</button>
+      {#if editor.current.heat.hotCells > 0}<span class="text-[11px] text-amber-400">{Math.round(editor.current.heat.max * 100)}% warm</span>{/if}
+    </div>
   </div>
   {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
 </div>

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

@@ -13,6 +13,7 @@ import type StickerPanelComponent from './StickerPanel.svelte';
 import type StickerPickerComponent from './StickerPicker.svelte';
 import type StrokePanelComponent from './StrokePanel.svelte';
 import type PathStrokePanelComponent from './PathStrokePanel.svelte';
+import type EvolutionPanelComponent from './EvolutionPanel.svelte';
 import type PaintEffectsPanelComponent from './PaintEffectsPanel.svelte';
 import type PaintGradientEditorComponent from './PaintGradientEditor.svelte';
 export { default as PaintEditor } from './PaintEditor.svelte';
@@ -29,12 +30,13 @@ export { default as StickerPanel } from './StickerPanel.svelte';
 export { default as StickerPicker } from './StickerPicker.svelte';
 export { default as StrokePanel } from './StrokePanel.svelte';
 export { default as PathStrokePanel } from './PathStrokePanel.svelte';
+export { default as EvolutionPanel } from './EvolutionPanel.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 { default as PaintProposalGhosts } from './PaintProposalGhosts.svelte';
-export { createPaintChangeWatcher, createPaintProposalState, type PaintChangeWatcherRune, type PaintProposalStateRune } from './paintProposalRune.svelte.js';
+export { createMutationRequests, createPaintChangeWatcher, createPaintProposalState, type PaintChangeWatcherRune, type PaintMutationRequestsRune, type PaintProposalStateRune, } from './paintProposalRune.svelte.js';
 export { createPaintDirector, createReactivePaintEditor, paintEditorState, paintEffectsProvider, usePaintEffectsTools } from './paintEditorRune.svelte.js';
 export type PaintEditorProps = ComponentProps<typeof PaintEditorComponent>;
 export type PaintCanvasProps = ComponentProps<typeof PaintCanvasComponent>;
@@ -50,5 +52,6 @@ export type StickerPanelProps = ComponentProps<typeof StickerPanelComponent>;
 export type StickerPickerProps = ComponentProps<typeof StickerPickerComponent>;
 export type StrokePanelProps = ComponentProps<typeof StrokePanelComponent>;
 export type PathStrokePanelProps = ComponentProps<typeof PathStrokePanelComponent>;
+export type EvolutionPanelProps = ComponentProps<typeof EvolutionPanelComponent>;
 export type PaintEffectsPanelProps = ComponentProps<typeof PaintEffectsPanelComponent>;
 export type PaintGradientEditorProps = ComponentProps<typeof PaintGradientEditorComponent>;

package/dist/paint-editor/index.js

@@ -14,10 +14,11 @@ export { default as StickerPanel } from './StickerPanel.svelte';
 export { default as StickerPicker } from './StickerPicker.svelte';
 export { default as StrokePanel } from './StrokePanel.svelte';
 export { default as PathStrokePanel } from './PathStrokePanel.svelte';
+export { default as EvolutionPanel } from './EvolutionPanel.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 { default as PaintProposalGhosts } from './PaintProposalGhosts.svelte';
-export { createPaintChangeWatcher, createPaintProposalState } from './paintProposalRune.svelte.js';
+export { createMutationRequests, createPaintChangeWatcher, createPaintProposalState, } from './paintProposalRune.svelte.js';
 export { createPaintDirector, createReactivePaintEditor, paintEditorState, paintEffectsProvider, usePaintEffectsTools } from './paintEditorRune.svelte.js';

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

@@ -55,7 +55,9 @@ export function paintEditorState(controller) {
  */
 export function createPaintDirector(controller, options = {}) {
     const presence = new PaintPresence();
-    return { presence, director: new PaintDirector(controller, presence, options) };
+    const director = new PaintDirector(controller, presence, options);
+    controller.setMutationDirector(director);
+    return { presence, director };
 }
 export { button, chip } from '../brushes/styles.js';
 export const panel = 'flex flex-col gap-2 text-xs text-slate-200';

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

@@ -1,4 +1,4 @@
-import { type PaintChange, type PaintChangeFeed, type PaintEditorController, type PaintProposal, type PaintProposals, type PaintProposalsOptions } from '@pixerate/editor/paint-editor';
+import { type PaintChange, type PaintChangeFeed, type PaintEditorController, type PaintMutationInfo, type PaintMutationRequestListener, type PaintProposal, type PaintProposals, type PaintProposalsOptions } from '@pixerate/editor/paint-editor';
 export interface PaintProposalStateRune {
     /** The framework-free store (for `createPaintProposalToolProvider` and agents). */
     readonly store: PaintProposals;
@@ -30,3 +30,18 @@ export interface PaintChangeWatcherRune {
 export declare function createPaintChangeWatcher(controller: PaintEditorController, options?: {
     onChange?: (change: PaintChange) => void;
 }): PaintChangeWatcherRune;
+export interface PaintMutationRequestsRune {
+    /** Pending mutations waiting for an agent to claim them (`state === 'pending'`). */
+    readonly pending: readonly PaintMutationInfo[];
+    /** Every active or completed mutation in the session. */
+    readonly mutations: readonly PaintMutationInfo[];
+    /** The most recently raised pending mutation, or `null`. */
+    readonly last: PaintMutationInfo | null;
+    destroy(): void;
+}
+/**
+ * Subscribes to mutation requests raised when a user finishes a stroke with a `mutation` brush
+ * and pauses for `settle` seconds, as a Svelte 5 rune. While active, marks an agent listener as
+ * connected on the controller. The same API as React's `useMutationRequests`.
+ */
+export declare function createMutationRequests(controller: PaintEditorController, onRequest?: PaintMutationRequestListener): PaintMutationRequestsRune;

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

@@ -43,3 +43,39 @@ export function createPaintChangeWatcher(controller, options = {}) {
         },
     };
 }
+/**
+ * Subscribes to mutation requests raised when a user finishes a stroke with a `mutation` brush
+ * and pauses for `settle` seconds, as a Svelte 5 rune. While active, marks an agent listener as
+ * connected on the controller. The same API as React's `useMutationRequests`.
+ */
+export function createMutationRequests(controller, onRequest) {
+    let mutations = $state.raw(controller.listMutations({ includeAll: true }));
+    let last = $state.raw(null);
+    const offState = controller.subscribe(() => {
+        mutations = controller.listMutations({ includeAll: true });
+    });
+    const offReq = controller.onMutationRequest((m) => {
+        last = m;
+        onRequest?.(m);
+    });
+    $effect(() => () => {
+        offState();
+        offReq();
+    });
+    return {
+        get pending() {
+            return mutations.filter((m) => m.state === 'pending');
+        },
+        get mutations() {
+            return mutations;
+        },
+        get last() {
+            const p = mutations.filter((m) => m.state === 'pending');
+            return last && p.some((m) => m.id === last.id) ? last : (p[p.length - 1] ?? null);
+        },
+        destroy() {
+            offState();
+            offReq();
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.203.0",
+  "version": "0.205.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -184,7 +184,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.273.0"
+    "@pixerate/editor": "0.275.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",