@pixerate/editor-svelte 0.202.1 → 0.204.0

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

@@ -9,6 +9,7 @@
     handlePaintShortcut,
     viewCssTransform,
     type PaintEditorController,
+    type FillRegionOptions,
     type PaintPresence,
     type PaintProposals,
     type PaintAgentStrokes,
@@ -26,6 +27,8 @@
     controller: PaintEditorController;
     /** The active tool (default brush). */
     tool?: PaintTool;
+    /** Options for the Fill tool (`tool === 'fill'`). */
+    fillOptions?: Omit<FillRegionOptions, 'x' | 'y' | 'points'>;
     /** Draw the symmetry axes and perspective lines (default true). */
     showGuides?: boolean;
     /** Fit the canvas in the viewport on mount (default true). */
@@ -40,7 +43,7 @@
     agentStrokes?: PaintAgentStrokes;
     class?: string;
   }
-  let { controller, tool = 'brush', 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, class: className = '' }: Props = $props();
   let agentLines = $state.raw<PaintAgentStrokesState>({ strokes: [] });
   $effect(() => {
     const store = agentStrokes;
@@ -71,6 +74,7 @@
   );
   $effect(() => {
     gesture.tool = tool;
+    if (fillOptions) gesture.fillOptions = fillOptions;
   });
   const doc = $derived(snap.document.canvas);
 

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

@@ -1,8 +1,10 @@
-import { type PaintEditorController, type PaintPresence, type PaintProposals, type PaintAgentStrokes, type PaintTool } from '@pixerate/editor/paint-editor';
+import { type PaintEditorController, type FillRegionOptions, type PaintPresence, type PaintProposals, type PaintAgentStrokes, type PaintTool } from '@pixerate/editor/paint-editor';
 interface Props {
     controller: PaintEditorController;
     /** The active tool (default brush). */
     tool?: PaintTool;
+    /** Options for the Fill tool (`tool === 'fill'`). */
+    fillOptions?: Omit<FillRegionOptions, 'x' | 'y' | 'points'>;
     /** Draw the symmetry axes and perspective lines (default true). */
     showGuides?: boolean;
     /** Fit the canvas in the viewport on mount (default true). */

package/dist/paint-editor/PaintEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { PaintPresence, documentToScreen, screenToDocument, type PaintEditorController, type PaintProposals, type PaintAgentStrokes, type PaintTool } from '@pixerate/editor/paint-editor';
+  import { PaintPresence, documentToScreen, screenToDocument, type FillRegionOptions, type PaintEditorController, type PaintProposals, type PaintAgentStrokes, type PaintTool } from '@pixerate/editor/paint-editor';
   import type { AgentPlayback, PlaybackPoint, PlaybackRect, PlaybackRef } from '@pixerate/editor/tools';
   import { createPlaybackSurface, getAgentPlayback } from '../playback/playback.svelte.js';
   import PresenceLayer from '../playback/PresenceLayer.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';
 
@@ -105,6 +106,7 @@
     return c && box ? { x: c.x - box.left, y: c.y - box.top } : p;
   };
   let tool = $state<PaintTool>('brush');
+  let fillOptions = $state<Omit<FillRegionOptions, 'x' | 'y' | 'points'>>({ reference: 'all', tolerance: 32, closeGap: 4, expand: 1, antialias: true });
   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));
@@ -116,12 +118,12 @@
   {#if playing}
     <PresenceLayer presence={agentPresence} viewport={docToRoot} />
   {/if}
-  <PaintToolbar {controller} {tool} ontoolchange={(t) => (tool = t)} {fileName} />
+  <PaintToolbar {controller} {tool} ontoolchange={(t) => (tool = t)} {fillOptions} onfilloptionschange={(f) => (fillOptions = f)} {fileName} />
   <div class="flex min-h-0 flex-1 gap-2">
     <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} 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} 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">
@@ -134,7 +136,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/PaintToolbar.svelte

@@ -1,18 +1,33 @@
 <script lang="ts">
-  import { PAINT_TOOLS, SYMMETRY_MODES, decodeImageBlob, downloadBytes, quickStencil, timeLapseZip, type PaintEditorController, type PaintTool, type SymmetryMode } from '@pixerate/editor/paint-editor';
+  import { PAINT_TOOLS, SYMMETRY_MODES, decodeImageBlob, downloadBytes, quickStencil, timeLapseZip, type FillRegionOptions, type PaintEditorController, type PaintTool, type SymmetryMode } from '@pixerate/editor/paint-editor';
   import { attempt, button, chip, paintEditorState } from './paintEditorRune.svelte.js';
 
+  type FillToolbarOptions = Omit<FillRegionOptions, 'x' | 'y' | 'points'>;
+
   interface Props {
     controller: PaintEditorController;
     tool: PaintTool;
     ontoolchange: (tool: PaintTool) => void;
+    fillOptions?: FillToolbarOptions;
+    onfilloptionschange?: (options: FillToolbarOptions) => void;
     /** Base name of saved and exported files (default `painting`). */
     fileName?: string;
     class?: string;
   }
-  let { controller, tool, ontoolchange, fileName = 'painting', class: className = '' }: Props = $props();
+  let { controller, tool, ontoolchange, fillOptions: controlledFill, onfilloptionschange, fileName = 'painting', class: className = '' }: Props = $props();
   const editor = paintEditorState(() => controller);
   const snap = $derived(editor.current);
+  let localFill = $state<FillToolbarOptions>({ reference: 'all', tolerance: 32, closeGap: 4, expand: 1, antialias: true });
+  const fill = $derived(controlledFill ?? localFill);
+  const updateFill = (patch: Partial<FillToolbarOptions>) => {
+    const next = { ...fill, ...patch };
+    localFill = next;
+    onfilloptionschange?.(next);
+  };
+  const layers = $derived.by(() => {
+    void snap;
+    return controller.listLayers().filter((l) => l.type === 'pixel');
+  });
   const symmetry = $derived(snap.guides.symmetry);
   const perspective = $derived(snap.guides.perspective);
   const tracing = $derived(snap.guides.tracing);
@@ -63,6 +78,33 @@
   {#each PAINT_TOOLS as t (t.id)}
     <button type="button" aria-pressed={tool === t.id} title={`${t.label} (${t.key.toUpperCase()})`} class={chip(tool === t.id)} onclick={() => ontoolchange(t.id)}>{t.label}</button>
   {/each}
+  {#if tool === 'fill'}
+    <div class="flex items-center gap-1.5 rounded border border-slate-700/80 bg-slate-900/60 px-2 py-0.5 text-[11px] text-slate-300" data-testid="paint-fill-options">
+      <label class="flex items-center gap-1">
+        <span>Ref</span>
+        <select aria-label="Fill reference" class="rounded bg-slate-800 px-1 py-0.5 text-[11px]" value={fill.reference ?? 'all'} onchange={(e) => updateFill({ reference: e.currentTarget.value })}>
+          <option value="all">All layers</option>
+          <option value="layer">Active layer</option>
+          {#each layers as l (l.id)}
+            <option value={l.id}>{l.name}</option>
+          {/each}
+        </select>
+      </label>
+      <label class="flex items-center gap-1">
+        <span>Tol</span>
+        <input type="number" aria-label="Fill tolerance" min="0" max="255" value={fill.tolerance ?? 32} oninput={(e) => updateFill({ tolerance: Math.max(0, Math.min(255, Number(e.currentTarget.value) || 0)) })} class="w-11 rounded bg-slate-800 px-1 py-0.5 text-[11px]" />
+      </label>
+      <label class="flex items-center gap-1">
+        <span>Gap</span>
+        <input type="number" aria-label="Close gap" min="0" max="32" value={fill.closeGap ?? 4} oninput={(e) => updateFill({ closeGap: Math.max(0, Math.min(32, Number(e.currentTarget.value) || 0)) })} class="w-10 rounded bg-slate-800 px-1 py-0.5 text-[11px]" />
+      </label>
+      <label class="flex items-center gap-1">
+        <span>Expand</span>
+        <input type="number" aria-label="Expand fill" min="-16" max="16" value={fill.expand ?? 1} oninput={(e) => updateFill({ expand: Math.max(-16, Math.min(16, Number(e.currentTarget.value) || 0)) })} class="w-10 rounded bg-slate-800 px-1 py-0.5 text-[11px]" />
+      </label>
+      <button type="button" class={chip(Boolean(fill.wet))} aria-pressed={Boolean(fill.wet)} onclick={() => updateFill({ wet: !fill.wet })}>Wet</button>
+    </div>
+  {/if}
   <span class="mx-1 h-4 w-px bg-slate-700"></span>
   <button type="button" class={button} disabled={!snap.canUndo} title={snap.undoLabel ? `Undo ${snap.undoLabel}` : 'Undo'} onclick={() => controller.undo()}>Undo</button>
   <button type="button" class={button} disabled={!snap.canRedo} title={snap.redoLabel ? `Redo ${snap.redoLabel}` : 'Redo'} onclick={() => controller.redo()}>Redo</button>

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

@@ -1,8 +1,11 @@
-import { type PaintEditorController, type PaintTool } from '@pixerate/editor/paint-editor';
+import { type FillRegionOptions, type PaintEditorController, type PaintTool } from '@pixerate/editor/paint-editor';
+type FillToolbarOptions = Omit<FillRegionOptions, 'x' | 'y' | 'points'>;
 interface Props {
     controller: PaintEditorController;
     tool: PaintTool;
     ontoolchange: (tool: PaintTool) => void;
+    fillOptions?: FillToolbarOptions;
+    onfilloptionschange?: (options: FillToolbarOptions) => void;
     /** Base name of saved and exported files (default `painting`). */
     fileName?: string;
     class?: string;

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,6 +30,7 @@ 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';
@@ -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,6 +14,7 @@ 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';

package/package.json

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