@pixerate/editor-svelte 0.203.0 → 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/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';
 
@@ -135,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/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.203.0",
+  "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.273.0"
+    "@pixerate/editor": "0.274.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",