@pixerate/editor-svelte 0.76.3 → 0.77.0

package/dist/paint-editor/PaintLayersPanel.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { BLEND_MODES, type BlendMode, type PaintEditorController, type PaintLayerInfo } from '@pixerate/editor/paint-editor';
+  import { untrack } from 'svelte';
+  import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
+
+  interface Props {
+    controller: PaintEditorController;
+    class?: string;
+  }
+  let { controller, class: className = '' }: Props = $props();
+  const editor = paintEditorState(() => controller);
+  const layers = $derived.by(() => {
+    void editor.current;
+    return untrack(() => controller.listLayers());
+  });
+  const active = $derived(layers.find((l) => l.active) ?? null);
+  let error = $state<string | null>(null);
+  let renaming = $state<string | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+  const move = (delta: number) => {
+    if (!active) return;
+    const sibs: PaintLayerInfo[] = layers.filter((x) => x.parentId === active.parentId).reverse();
+    const index = sibs.findIndex((x) => x.id === active.id);
+    const to = Math.min(sibs.length - 1, Math.max(0, index + delta));
+    if (to !== index) run(() => controller.moveLayer(active.id, to));
+  };
+</script>
+
+<!-- The layer stack, top first, with the active layer's opacity, blend and locks. -->
+<div class={`${panel} ${className}`} data-testid="paint-layers-panel">
+  <div class="flex flex-wrap gap-1">
+    <button type="button" class={button} onclick={() => run(() => controller.addLayer())}>New layer</button>
+    <button type="button" class={button} onclick={() => run(() => controller.addLayer({ type: 'group' }))}>New group</button>
+    <button type="button" class={button} disabled={!active} onclick={() => active && run(() => controller.duplicateLayer(active.id))}>Duplicate</button>
+    <button type="button" class={button} disabled={!active} aria-label="Move layer up" onclick={() => move(1)}>↑</button>
+    <button type="button" class={button} disabled={!active} aria-label="Move layer down" onclick={() => move(-1)}>↓</button>
+    <button type="button" class={button} disabled={!active} onclick={() => active && run(() => controller.mergeDown(active.id))}>Merge down</button>
+    <button type="button" class={button} disabled={!active || layers.length < 2} onclick={() => active && run(() => controller.removeLayer(active.id))}>Delete</button>
+  </div>
+  <ul role="tree" aria-label="Layers" class="flex flex-col gap-0.5">
+    {#each layers as l (l.id)}
+      <li
+        role="treeitem"
+        aria-selected={l.active}
+        class={`flex items-center gap-1.5 rounded px-1.5 py-1 cursor-pointer ${l.active ? 'bg-indigo-600/30 ring-1 ring-indigo-500' : 'hover:bg-slate-800'}`}
+        style={`padding-left: ${6 + l.depth * 12}px`}
+        onclick={() => controller.setActiveLayer(l.id)}
+        onkeydown={(e) => e.key === 'Enter' && controller.setActiveLayer(l.id)}
+      >
+        <button
+          type="button"
+          aria-label={l.visible ? `Hide ${l.name}` : `Show ${l.name}`}
+          class={`w-5 text-[11px] ${l.visible ? 'text-slate-200' : 'text-slate-600'}`}
+          onclick={(e) => {
+            e.stopPropagation();
+            run(() => controller.updateLayer(l.id, { visible: !l.visible }));
+          }}>{l.visible ? '●' : '○'}</button
+        >
+        {#if renaming === l.id}
+          <!-- svelte-ignore a11y_autofocus -->
+          <input
+            autofocus
+            aria-label="Layer name"
+            value={l.name}
+            class="flex-1 rounded bg-slate-800 px-1"
+            onclick={(e) => e.stopPropagation()}
+            onblur={(e) => {
+              const v = e.currentTarget.value;
+              renaming = null;
+              if (v.trim() && v !== l.name) run(() => controller.updateLayer(l.id, { name: v }));
+            }}
+            onkeydown={(e) => {
+              if (e.key === 'Enter') e.currentTarget.blur();
+              if (e.key === 'Escape') renaming = null;
+            }}
+          />
+        {:else}
+          <span class="flex-1 truncate" role="presentation" ondblclick={() => (renaming = l.id)}>{l.type === 'group' ? '▸ ' : ''}{l.name}</span>
+        {/if}
+        {#if l.locks.pixels || l.locks.all}<span title="Locked">🔒</span>{/if}
+      </li>
+    {/each}
+  </ul>
+  {#if active}
+    <div class="flex flex-col gap-1.5">
+      <label class="flex items-center gap-2">
+        <span class="w-14 text-slate-400">Opacity</span>
+        <input type="range" aria-label="Layer opacity" min="0" max="1" step="0.01" value={active.opacity} oninput={(e) => run(() => controller.updateLayer(active.id, { opacity: Number(e.currentTarget.value) }))} class="flex-1 accent-indigo-500" />
+      </label>
+      <label class="flex items-center gap-2">
+        <span class="w-14 text-slate-400">Blend</span>
+        <select aria-label="Layer blend" value={active.blend} onchange={(e) => run(() => controller.updateLayer(active.id, { blend: e.currentTarget.value as BlendMode }))} class="flex-1 rounded bg-slate-800 px-1 py-0.5">
+          {#if active.type === 'group'}<option value="pass-through">Pass through</option>{/if}
+          {#each BLEND_MODES as m (m.id)}
+            <option value={m.id}>{m.label}</option>
+          {/each}
+        </select>
+      </label>
+      <div class="flex gap-1">
+        {#each ['pixels', 'transparency'] as const as k (k)}
+          <button type="button" aria-pressed={Boolean(active.locks[k])} class={chip(Boolean(active.locks[k]))} onclick={() => run(() => controller.updateLayer(active.id, { locks: { [k]: !active.locks[k] } }))}>{k === 'pixels' ? 'Lock pixels' : 'Lock transparency'}</button>
+        {/each}
+        <button type="button" aria-pressed={active.clipped} class={chip(active.clipped)} onclick={() => run(() => controller.updateLayer(active.id, { clipped: !active.clipped }))}>Clip</button>
+      </div>
+    </div>
+  {/if}
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

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

@@ -0,0 +1,9 @@
+import { type PaintEditorController } from '@pixerate/editor/paint-editor';
+interface Props {
+    controller: PaintEditorController;
+    class?: string;
+}
+declare const PaintLayersPanel: import("svelte").Component<Props, {}, "">;
+type PaintLayersPanel = ReturnType<typeof PaintLayersPanel>;
+export default PaintLayersPanel;
+//# sourceMappingURL=PaintLayersPanel.svelte.d.ts.map

package/dist/paint-editor/PaintLayersPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintLayersPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintLayersPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA+B,KAAK,qBAAqB,EAAuB,MAAM,+BAA+B,CAAC;AAK3H,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwFH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/paint-editor/PaintSlider.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { SliderControl } from '@pixerate/editor/paint-editor';
+
+  interface Props {
+    control: SliderControl;
+    value: number;
+    /** Runs while dragging. */
+    onchange?: (v: number) => void;
+    /** Runs once on release (the native `change` event), for settings that are undo steps. */
+    oncommit?: (v: number) => void;
+  }
+  let { control, value, onchange, oncommit }: Props = $props();
+  let draft = $state<number | null>(null);
+  const shown = $derived(draft ?? value);
+  const fmt = (v: number) => (control.step >= 1 ? String(Math.round(v)) : v.toFixed(2));
+</script>
+
+<label class="flex flex-col gap-0.5" data-path={control.path}>
+  <span class="flex justify-between text-slate-400">
+    <span>{control.label}</span>
+    <span class="font-mono">{fmt(shown)}</span>
+  </span>
+  <input
+    type="range"
+    aria-label={control.label}
+    min={control.min}
+    max={control.max}
+    step={control.step}
+    value={shown}
+    oninput={(e) => {
+      const v = Number(e.currentTarget.value);
+      if (oncommit) draft = v;
+      onchange?.(v);
+    }}
+    onchange={(e) => {
+      oncommit?.(Number(e.currentTarget.value));
+      draft = null;
+    }}
+    class="w-full accent-indigo-500"
+  />
+</label>

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

@@ -0,0 +1,13 @@
+import type { SliderControl } from '@pixerate/editor/paint-editor';
+interface Props {
+    control: SliderControl;
+    value: number;
+    /** Runs while dragging. */
+    onchange?: (v: number) => void;
+    /** Runs once on release (the native `change` event), for settings that are undo steps. */
+    oncommit?: (v: number) => void;
+}
+declare const PaintSlider: import("svelte").Component<Props, {}, "">;
+type PaintSlider = ReturnType<typeof PaintSlider>;
+export default PaintSlider;
+//# sourceMappingURL=PaintSlider.svelte.d.ts.map

package/dist/paint-editor/PaintSlider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintSlider.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintSlider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAGjE,UAAU,KAAK;IACb,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AA2BH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/paint-editor/PaintToolbar.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { PAINT_TOOLS, SYMMETRY_MODES, decodeImageBlob, downloadBytes, type PaintEditorController, type PaintTool, type SymmetryMode } from '@pixerate/editor/paint-editor';
+  import { attempt, button, chip, paintEditorState } from './paintEditorRune.svelte.js';
+
+  interface Props {
+    controller: PaintEditorController;
+    tool: PaintTool;
+    ontoolchange: (tool: PaintTool) => void;
+    /** Base name of saved and exported files (default `painting`). */
+    fileName?: string;
+    class?: string;
+  }
+  let { controller, tool, ontoolchange, fileName = 'painting', class: className = '' }: Props = $props();
+  const editor = paintEditorState(() => controller);
+  const snap = $derived(editor.current);
+  const symmetry = $derived(snap.guides.symmetry);
+  const perspective = $derived(snap.guides.perspective);
+  const tracing = $derived(snap.guides.tracing);
+  const canvas = $derived(snap.document.canvas);
+  let error = $state<string | null>(null);
+  let openInput = $state<HTMLInputElement | null>(null);
+  let tracingInput = $state<HTMLInputElement | null>(null);
+  let refInput = $state<HTMLInputElement | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+  const exportImage = (format: 'image/png' | 'image/jpeg') =>
+    run(async () => downloadBytes(await controller.exportImage({ format }), `${fileName}.${format === 'image/png' ? 'png' : 'jpg'}`, format));
+  const vanishing = (n: number) => {
+    const y = canvas.height * 0.4;
+    return n === 1 ? [{ x: canvas.width / 2, y }] : n === 2 ? [{ x: -canvas.width * 0.5, y }, { x: canvas.width * 1.5, y }] : [{ x: -canvas.width * 0.5, y }, { x: canvas.width * 1.5, y }, { x: canvas.width / 2, y: canvas.height * 3 }];
+  };
+  const fileOf = (e: Event) => {
+    const input = e.currentTarget as HTMLInputElement;
+    const f = input.files?.[0];
+    input.value = '';
+    return f;
+  };
+</script>
+
+<!-- Tools, undo / redo, view rotation and mirroring, guides, tracing and reference images, hand, files. -->
+<div class={`flex flex-wrap items-center gap-1.5 text-xs text-slate-200 ${className}`} role="toolbar" aria-label="Paint toolbar" data-testid="paint-toolbar">
+  {#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}
+  <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>
+  <span class="mx-1 h-4 w-px bg-slate-700"></span>
+  <button type="button" class={button} aria-label="Rotate view left" onclick={() => controller.setView({ rotation: snap.view.rotation - 15 })}>⟲</button>
+  <button type="button" class={button} aria-label="Rotate view right" onclick={() => controller.setView({ rotation: snap.view.rotation + 15 })}>⟳</button>
+  <button type="button" class={chip(snap.view.mirror)} aria-pressed={snap.view.mirror} onclick={() => controller.setView({ mirror: !snap.view.mirror })}>Mirror view</button>
+  <button type="button" class={button} onclick={() => controller.resetView()}>Reset view</button>
+  <span class="mx-1 h-4 w-px bg-slate-700"></span>
+  <label class="flex items-center gap-1">
+    Symmetry
+    <select
+      aria-label="Symmetry"
+      value={symmetry.mode}
+      onchange={(e) => controller.setSymmetry({ mode: e.currentTarget.value as SymmetryMode, center: symmetry.mode === 'off' ? { x: canvas.width / 2, y: canvas.height / 2 } : symmetry.center })}
+      class="rounded bg-slate-800 px-1 py-0.5"
+    >
+      {#each SYMMETRY_MODES as m (m)}
+        <option value={m}>{m}</option>
+      {/each}
+    </select>
+  </label>
+  {#if symmetry.mode === 'kaleidoscope'}
+    <input type="number" aria-label="Kaleidoscope segments" min="2" max="32" value={symmetry.segments} oninput={(e) => controller.setSymmetry({ segments: Number(e.currentTarget.value) })} class="w-12 rounded bg-slate-800 px-1 py-0.5" />
+  {/if}
+  <button
+    type="button"
+    class={chip(perspective.enabled)}
+    aria-pressed={perspective.enabled}
+    onclick={() => run(() => controller.setPerspective(perspective.enabled ? { enabled: false } : { enabled: true, points: perspective.points.length ? perspective.points : vanishing(1) }))}
+  >Perspective</button>
+  {#if perspective.enabled}
+    <select aria-label="Vanishing points" value={perspective.points.length} onchange={(e) => run(() => controller.setPerspective({ points: vanishing(Number(e.currentTarget.value)) }))} class="rounded bg-slate-800 px-1 py-0.5">
+      <option value={1}>1-point</option>
+      <option value={2}>2-point</option>
+      <option value={3}>3-point</option>
+    </select>
+  {/if}
+  <span class="mx-1 h-4 w-px bg-slate-700"></span>
+  <button type="button" class={button} onclick={() => tracingInput?.click()}>Tracing image…</button>
+  {#if tracing}
+    <input type="range" aria-label="Tracing opacity" min="0" max="1" step="0.05" value={tracing.opacity} oninput={(e) => controller.updateTracing({ opacity: Number(e.currentTarget.value) })} class="w-16 accent-indigo-500" />
+    <button type="button" class={chip(tracing.sampleColors)} aria-pressed={tracing.sampleColors} onclick={() => controller.updateTracing({ sampleColors: !tracing.sampleColors })}>Trace colours</button>
+    <button type="button" class={chip(tracing.visible)} aria-pressed={tracing.visible} onclick={() => controller.updateTracing({ visible: !tracing.visible })}>Show tracing</button>
+    <button type="button" class={button} onclick={() => controller.clearTracingImage()}>Remove tracing</button>
+  {/if}
+  <button type="button" class={button} onclick={() => refInput?.click()}>Reference…</button>
+  <button type="button" class={button} title="Which hand holds the pen (palm rejection)" onclick={() => controller.setHand(snap.hand === 'right' ? 'left' : 'right')}>{snap.hand === 'right' ? 'Right-handed' : 'Left-handed'}</button>
+  <span class="mx-1 h-4 w-px bg-slate-700"></span>
+  <button type="button" class={button} onclick={() => run(() => downloadBytes(JSON.stringify(controller.toJSON()), `${fileName}.paint.json`, 'application/json'))}>Save</button>
+  <button type="button" class={button} onclick={() => openInput?.click()}>Open…</button>
+  <button type="button" class={button} onclick={() => exportImage('image/png')}>PNG</button>
+  <button type="button" class={button} onclick={() => exportImage('image/jpeg')}>JPEG</button>
+  <button type="button" class={button} onclick={() => run(() => downloadBytes(controller.exportPsd().bytes, `${fileName}.psd`, 'image/vnd.adobe.photoshop'))}>PSD</button>
+  <input
+    bind:this={openInput}
+    type="file"
+    accept=".json,application/json"
+    aria-label="Open painting"
+    class="hidden"
+    onchange={(e) => {
+      const f = fileOf(e);
+      if (f) run(async () => controller.loadJSON(JSON.parse(await f.text())));
+    }}
+  />
+  <input
+    bind:this={tracingInput}
+    type="file"
+    accept="image/*"
+    aria-label="Load tracing image"
+    class="hidden"
+    onchange={(e) => {
+      const f = fileOf(e);
+      if (f) run(async () => controller.setTracingImage({ pixels: await decodeImageBlob(f) }));
+    }}
+  />
+  <input
+    bind:this={refInput}
+    type="file"
+    accept="image/*"
+    aria-label="Add reference image"
+    class="hidden"
+    onchange={(e) => {
+      const f = fileOf(e);
+      if (f) run(async () => controller.addReferenceImage({ pixels: await decodeImageBlob(f), name: f.name }));
+    }}
+  />
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

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

@@ -0,0 +1,13 @@
+import { type PaintEditorController, type PaintTool } from '@pixerate/editor/paint-editor';
+interface Props {
+    controller: PaintEditorController;
+    tool: PaintTool;
+    ontoolchange: (tool: PaintTool) => void;
+    /** Base name of saved and exported files (default `painting`). */
+    fileName?: string;
+    class?: string;
+}
+declare const PaintToolbar: import("svelte").Component<Props, {}, "">;
+type PaintToolbar = ReturnType<typeof PaintToolbar>;
+export default PaintToolbar;
+//# sourceMappingURL=PaintToolbar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaintToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA+D,KAAK,qBAAqB,EAAE,KAAK,SAAS,EAAqB,MAAM,+BAA+B,CAAC;AAIzK,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiGH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/paint-editor/PaperPanel.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { PAPER_FAMILIES, PAPER_LIBRARY, PAPER_SLIDERS, patchPath, readPath, renderPaper, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import PaintSlider from './PaintSlider.svelte';
+  import PixelCanvas from './PixelCanvas.svelte';
+  import { attempt, button, paintEditorState, panel } from './paintEditorRune.svelte.js';
+
+  interface Props {
+    controller: PaintEditorController;
+    class?: string;
+  }
+  let { controller, class: className = '' }: Props = $props();
+  const editor = paintEditorState(() => controller);
+  const paper = $derived(editor.current.document.paper);
+  let error = $state<string | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+  const SWATCH = { x: 0, y: 0, width: 64, height: 40 };
+  const previews = new Map(PAPER_LIBRARY.map((p) => [p.preset, { ...SWATCH, data: renderPaper({ ...p, shading: Math.max(0.8, p.shading) }, SWATCH) }]));
+</script>
+
+<!-- The paper library by family and the current paper's settings (each change one undo step). -->
+<div class={`${panel} ${className}`} data-testid="paper-panel">
+  {#each PAPER_FAMILIES as family (family)}
+    <div>
+      <div class="mb-0.5 text-[10px] uppercase tracking-wide text-slate-500">{family}</div>
+      <div class="flex flex-wrap gap-1" role="listbox" aria-label={`${family} papers`}>
+        {#each PAPER_LIBRARY.filter((p) => p.family === family) as p (p.preset)}
+          <button
+            type="button"
+            role="option"
+            aria-selected={paper.preset === p.preset}
+            title={p.name}
+            class={`rounded p-0.5 ${paper.preset === p.preset ? 'ring-2 ring-indigo-500' : 'ring-1 ring-slate-700 hover:ring-slate-500'}`}
+            onclick={() => run(() => controller.setPaper({ preset: p.preset }))}
+          >
+            <PixelCanvas pixels={previews.get(p.preset) ?? null} label={p.name} style="width: 48px; height: 30px" />
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/each}
+  <div class="text-slate-300">{paper.name}</div>
+  <label class="flex items-center justify-between">
+    <span class="text-slate-400">Colour</span>
+    <input type="color" aria-label="Paper colour" value={paper.color} onchange={(e) => run(() => controller.setPaper({ color: e.currentTarget.value }))} class="h-6 w-10 rounded bg-transparent" />
+  </label>
+  {#each PAPER_SLIDERS as c (c.path)}
+    <PaintSlider control={c} value={readPath(paper, c.path)} oncommit={(v) => run(() => controller.setPaper(patchPath(paper as never, c.path, v) as never))} />
+  {/each}
+  <label class="flex items-center gap-2">
+    <input type="checkbox" checked={paper.tiling === 'mirror'} onchange={(e) => run(() => controller.setPaper({ tiling: e.currentTarget.checked ? 'mirror' : 'repeat' }))} /> Mirror tiling
+  </label>
+  <button type="button" class={`self-start ${button}`} onclick={() => run(() => controller.setPaper({ seed: paper.seed + 1 }))}>New sheet</button>
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

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

@@ -0,0 +1,9 @@
+import { type PaintEditorController } from '@pixerate/editor/paint-editor';
+interface Props {
+    controller: PaintEditorController;
+    class?: string;
+}
+declare const PaperPanel: import("svelte").Component<Props, {}, "">;
+type PaperPanel = ReturnType<typeof PaperPanel>;
+export default PaperPanel;
+//# sourceMappingURL=PaperPanel.svelte.d.ts.map

package/dist/paint-editor/PaperPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaperPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaperPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAkF,KAAK,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAMzJ,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+CH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/paint-editor/PixelCanvas.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  interface Props {
+    pixels: { width: number; height: number; data: Uint8ClampedArray } | null;
+    label: string;
+    class?: string;
+    style?: string;
+  }
+  let { pixels, label, class: className = '', style = '' }: Props = $props();
+  let canvas = $state<HTMLCanvasElement | null>(null);
+
+  $effect(() => {
+    const ctx = canvas?.getContext('2d');
+    if (!canvas || !ctx || !pixels || typeof ctx.createImageData !== 'function') return;
+    canvas.width = pixels.width;
+    canvas.height = pixels.height;
+    const img = ctx.createImageData(pixels.width, pixels.height);
+    img.data.set(pixels.data);
+    ctx.putImageData(img, 0, 0);
+  });
+</script>
+
+<canvas bind:this={canvas} aria-label={label} class={className} {style} width={pixels?.width} height={pixels?.height}></canvas>

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

@@ -0,0 +1,14 @@
+interface Props {
+    pixels: {
+        width: number;
+        height: number;
+        data: Uint8ClampedArray;
+    } | null;
+    label: string;
+    class?: string;
+    style?: string;
+}
+declare const PixelCanvas: import("svelte").Component<Props, {}, "">;
+type PixelCanvas = ReturnType<typeof PixelCanvas>;
+export default PixelCanvas;
+//# sourceMappingURL=PixelCanvas.svelte.d.ts.map

package/dist/paint-editor/PixelCanvas.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PixelCanvas.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,iBAAiB,CAAA;KAAE,GAAG,IAAI,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/paint-editor/ReferencePanel.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { PaintEditorController, ReferenceImage } from '@pixerate/editor/paint-editor';
+
+  interface Props {
+    controller: PaintEditorController;
+    reference: ReferenceImage;
+  }
+  let { controller, reference }: Props = $props();
+  let drag: { x: number; y: number; ox: number; oy: number } | null = null;
+  const h = $derived((reference.height / reference.width) * reference.displayWidth);
+</script>
+
+<!-- A floating reference image: drag its title bar to move it, click the image to pick a colour. -->
+<div
+  class="absolute rounded border border-slate-700 bg-slate-900/95 shadow-xl"
+  style={`left: ${reference.x}px; top: ${reference.y}px; width: ${reference.displayWidth}px`}
+  data-testid="paint-reference"
+  role="dialog"
+  aria-label={reference.name}
+  tabindex="-1"
+  onpointerdown={(e) => e.stopPropagation()}
+>
+  <div
+    class="flex items-center justify-between px-1.5 py-0.5 text-[10px] text-slate-300 cursor-move"
+    role="toolbar"
+    tabindex="-1"
+    onpointerdown={(e) => {
+      drag = { x: e.clientX, y: e.clientY, ox: reference.x, oy: reference.y };
+      (e.target as Element).setPointerCapture?.(e.pointerId);
+    }}
+    onpointermove={(e) => {
+      if (drag) controller.updateReferenceImage(reference.id, { x: drag.ox + e.clientX - drag.x, y: drag.oy + e.clientY - drag.y });
+    }}
+    onpointerup={() => (drag = null)}
+  >
+    <span class="truncate">{reference.name}</span>
+    <button type="button" aria-label={`Hide ${reference.name}`} class="px-1 text-slate-400 hover:text-white" onclick={() => controller.updateReferenceImage(reference.id, { visible: false })}>×</button>
+  </div>
+  <button
+    type="button"
+    class="block cursor-copy p-0"
+    aria-label={`Pick a colour from ${reference.name}`}
+    onclick={(e) => {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      const k = reference.width / (rect.width || reference.displayWidth);
+      controller.setColor(controller.pickReferenceColor(reference.id, Math.min(reference.width - 1, (e.clientX - rect.left) * k), Math.min(reference.height - 1, (e.clientY - rect.top) * k)));
+    }}
+  >
+    <img src={reference.src} alt={reference.name} draggable="false" width={reference.displayWidth} height={h} class="block" />
+  </button>
+</div>

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

@@ -0,0 +1,9 @@
+import type { PaintEditorController, ReferenceImage } from '@pixerate/editor/paint-editor';
+interface Props {
+    controller: PaintEditorController;
+    reference: ReferenceImage;
+}
+declare const ReferencePanel: import("svelte").Component<Props, {}, "">;
+type ReferencePanel = ReturnType<typeof ReferencePanel>;
+export default ReferencePanel;
+//# sourceMappingURL=ReferencePanel.svelte.d.ts.map

package/dist/paint-editor/ReferencePanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferencePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/ReferencePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAGzF,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,SAAS,EAAE,cAAc,CAAC;CAC3B;AA+BH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,25 @@
+import type { ComponentProps } from 'svelte';
+import type PaintEditorComponent from './PaintEditor.svelte';
+import type PaintCanvasComponent from './PaintCanvas.svelte';
+import type PaintToolbarComponent from './PaintToolbar.svelte';
+import type BrushPanelComponent from './BrushPanel.svelte';
+import type PaperPanelComponent from './PaperPanel.svelte';
+import type ColorPanelComponent from './ColorPanel.svelte';
+import type PaintLayersPanelComponent from './PaintLayersPanel.svelte';
+export { default as PaintEditor } from './PaintEditor.svelte';
+export { default as PaintCanvas } from './PaintCanvas.svelte';
+export { default as PaintToolbar } from './PaintToolbar.svelte';
+export { default as BrushPanel } from './BrushPanel.svelte';
+export { default as PaperPanel } from './PaperPanel.svelte';
+export { default as ColorPanel } from './ColorPanel.svelte';
+export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
+export { default as PaintSlider } from './PaintSlider.svelte';
+export { createReactivePaintEditor, paintEditorState } from './paintEditorRune.svelte.js';
+export type PaintEditorProps = ComponentProps<typeof PaintEditorComponent>;
+export type PaintCanvasProps = ComponentProps<typeof PaintCanvasComponent>;
+export type PaintToolbarProps = ComponentProps<typeof PaintToolbarComponent>;
+export type BrushPanelProps = ComponentProps<typeof BrushPanelComponent>;
+export type PaperPanelProps = ComponentProps<typeof PaperPanelComponent>;
+export type ColorPanelProps = ComponentProps<typeof ColorPanelComponent>;
+export type PaintLayersPanelProps = ComponentProps<typeof PaintLayersPanelComponent>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;AAEvE,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,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE1F,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"}

package/dist/paint-editor/index.js

@@ -0,0 +1,9 @@
+export { default as PaintEditor } from './PaintEditor.svelte';
+export { default as PaintCanvas } from './PaintCanvas.svelte';
+export { default as PaintToolbar } from './PaintToolbar.svelte';
+export { default as BrushPanel } from './BrushPanel.svelte';
+export { default as PaperPanel } from './PaperPanel.svelte';
+export { default as ColorPanel } from './ColorPanel.svelte';
+export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
+export { default as PaintSlider } from './PaintSlider.svelte';
+export { createReactivePaintEditor, paintEditorState } from './paintEditorRune.svelte.js';

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

@@ -0,0 +1,20 @@
+import { PaintEditorController, type PaintEditorOptions, type PaintEditorState } 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.
+ */
+export declare function createReactivePaintEditor(options?: PaintEditorOptions | PaintEditorController): {
+    readonly controller: PaintEditorController;
+    readonly state: PaintEditorState;
+    destroy(): void;
+};
+/** The controller's state as a rune, for components (subscribe in an effect, see GOTCHAS). */
+export declare function paintEditorState(controller: () => PaintEditorController): {
+    readonly current: PaintEditorState;
+};
+export declare const chip: (on: boolean) => string;
+export declare const button = "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700 disabled:opacity-40";
+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;
+//# sourceMappingURL=paintEditorRune.svelte.d.ts.map

package/dist/paint-editor/paintEditorRune.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paintEditorRune.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/paintEditorRune.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtH;;;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,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"}