@pixerate/editor-svelte 0.76.2 → 0.77.0

package/README.md

@@ -80,6 +80,7 @@ Tables are on by default in `createRichTextPreset` (`table: false` turns them of
 | `@pixerate/editor-svelte` | `EditableTextNodeEditor`, `BubbleMenu`, `TemplateRenderer`, `initiateEditor`, `createReactiveEditor`, `createHistory`, `createHistoryDirty`, `createHistoryShortcuts`, `navigationGuard` (action), `createNavigationGuard`, `SpreadsheetEditor`, `FormulaBar`, `FormulaHints`, `createReactiveSpreadsheet`, `DirtyTracker` |
 | `@pixerate/editor-svelte/spreadsheet` | `SpreadsheetEditor` (virtualised for large sheets, `virtualize` prop), `FormulaBar`, `FormulaHints`, `SpreadsheetContextMenu`, `SpreadsheetGroupRow`, `SheetTabs`, `NameManager`, `createReactiveSpreadsheet`, `createSpreadsheetViewport` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/image-editor` | `ImageEditor`, `createReactiveImageEditor`: crop, rotate/flip, adjustments, annotations, depth masks, Select & Mask (`SelectionOptionsBar`, `RefineEdgePanel`: magic wand, marquees, lasso, Refine Edge, layer masks), and `onInpaint` / `onRemoveBackground` AI hooks |
+| `@pixerate/editor-svelte/paint-editor` | `PaintEditor`, `createReactivePaintEditor`: natural-media painting with `PaintCanvas` (pen pressure, tilt and twist, coalesced and predicted events, palm rejection, view rotation and mirroring), `PaintToolbar` (tools, symmetry, perspective, tracing and reference images, save / open, PNG / JPEG / PSD), `BrushPanel` (library with thumbnails), `PaperPanel`, `ColorPanel` (wheel, harmonies, swatches, mixing pad) and `PaintLayersPanel` |
 | `@pixerate/editor-svelte/commands` | `CommandPalette`, `createCommandPalette` (`hotkey: "Mod+K"`; call `destroy()` when done), `createCommandShortcuts`, `useRegisterCommands` over a `CommandRegistry` from `@pixerate/editor/commands` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/persistence` | `createAutosave` (crash-recovery snapshots bound to a history / dirty flag, flushed on `pagehide`; call `destroy()` when done) and `<RecoveryPrompt>` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/generation` | `GenerationSettings` (controls generated from a model's capabilities, reference slots by role, plan adjustments; `onchange` / `onaddreference`), `createGenerationPlan(() => request, () => caps)`, `JobProgress`, `createJobProgress` (call `destroy()` when done) over `@pixerate/editor/generation` (also re-exported from the root entry) |

package/dist/paint-editor/BrushPanel.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { BRUSH_ROTATIONS, BRUSH_SLIDERS, downloadBytes, patchPath, readPath, type BrushRotation, 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';
+
+  interface Props {
+    controller: PaintEditorController;
+    thumbnailWidth?: number;
+    thumbnailHeight?: number;
+    class?: string;
+  }
+  let { controller, thumbnailWidth = 112, thumbnailHeight = 32, class: className = '' }: Props = $props();
+  const editor = paintEditorState(() => controller);
+  const snap = $derived(editor.current);
+  const brush = $derived(snap.brush);
+  let error = $state<string | null>(null);
+  let saveName = $state('');
+  let fileInput = $state<HTMLInputElement | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+  // Thumbnails follow the library and the paper.
+  const thumbs = $derived.by(() => {
+    const list = snap.brushes;
+    void snap.document.paper;
+    return untrack(() => new Map(list.map((b) => [b.id, controller.brushThumbnail(b.id, { width: thumbnailWidth, height: thumbnailHeight, color: '#26324a' })])));
+  });
+  const slug = (name: string) => name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 60) || 'brush';
+</script>
+
+<!-- The brush library with thumbnails, the active brush's settings, save, import and export. -->
+<div class={`${panel} ${className}`} data-testid="brush-panel">
+  <div class="grid grid-cols-2 gap-1" role="listbox" aria-label="Brushes">
+    {#each snap.brushes as b (b.id)}
+      <button
+        type="button"
+        role="option"
+        aria-selected={brush.id === b.id}
+        title={`${b.name} (${b.category})`}
+        class={`flex flex-col items-start gap-0.5 rounded p-1 text-left ${brush.id === b.id ? 'bg-indigo-600/30 ring-1 ring-indigo-500' : 'bg-slate-900 hover:bg-slate-800'}`}
+        onclick={() => controller.setBrush({ id: b.id })}
+      >
+        <PixelCanvas pixels={thumbs.get(b.id) ?? null} label={`${b.name} thumbnail`} class="rounded" style={`width: 100%; aspect-ratio: ${thumbnailWidth} / ${thumbnailHeight}`} />
+        <span class="truncate text-[10px] text-slate-300">{b.name}</span>
+      </button>
+    {/each}
+  </div>
+  <div class="flex flex-col gap-1.5">
+    {#each BRUSH_SLIDERS as c (c.path)}
+      <PaintSlider control={c} value={readPath(brush, c.path)} onchange={(v) => controller.setBrush(patchPath(brush as never, c.path, v) as never)} />
+    {/each}
+    <label class="flex items-center justify-between gap-2">
+      <span class="text-slate-400">Rotation</span>
+      <select aria-label="Brush rotation" value={brush.rotation} onchange={(e) => controller.setBrush({ rotation: e.currentTarget.value as BrushRotation })} class="rounded bg-slate-800 px-1 py-0.5">
+        {#each BRUSH_ROTATIONS as r (r)}
+          <option value={r}>{r === 'stroke' ? 'Follow stroke' : r === 'barrel' ? 'Pen barrel' : 'Fixed'}</option>
+        {/each}
+      </select>
+    </label>
+    <label class="flex items-center gap-2">
+      <input type="checkbox" checked={brush.tip.pressureSize} onchange={(e) => controller.setBrush({ tip: { pressureSize: e.currentTarget.checked } })} /> Pressure → size
+    </label>
+    <label class="flex items-center gap-2">
+      <input type="checkbox" checked={brush.tip.pressureOpacity} onchange={(e) => controller.setBrush({ tip: { pressureOpacity: e.currentTarget.checked } })} /> Pressure → opacity
+    </label>
+  </div>
+  <div class="flex flex-wrap items-center gap-1">
+    <input bind:value={saveName} placeholder="Brush name" aria-label="Brush name" class="w-28 rounded bg-slate-800 px-1.5 py-0.5" />
+    <button
+      type="button"
+      class={button}
+      disabled={!saveName.trim()}
+      onclick={() =>
+        run(() => {
+          controller.saveBrush({ id: slug(saveName), name: saveName.trim() });
+          saveName = '';
+        })}>Save brush</button
+    >
+    <button type="button" class={button} onclick={() => run(() => downloadBytes(JSON.stringify(controller.exportBrushes(), null, 2), 'brushes.json', 'application/json'))}>Export</button>
+    <button type="button" class={button} onclick={() => fileInput?.click()}>Import…</button>
+    <input
+      bind:this={fileInput}
+      type="file"
+      accept=".json,application/json"
+      aria-label="Import brushes"
+      class="hidden"
+      onchange={(e) => {
+        const input = e.currentTarget;
+        const f = input.files?.[0];
+        input.value = '';
+        if (f) run(async () => controller.importBrushes(JSON.parse(await f.text())));
+      }}
+    />
+  </div>
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

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

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

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

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

package/dist/paint-editor/ColorPanel.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+  import {
+    HARMONY_KINDS,
+    MIXING_PAD_HEIGHT,
+    MIXING_PAD_WIDTH,
+    hsvToRgb,
+    hueToWheel,
+    parseHexColor,
+    renderColorWheel,
+    rgbToHexColor,
+    rgbToHsv,
+    wheelPick,
+    wheelPoint,
+    type ColorWheel,
+    type HarmonyKind,
+    type PaintEditorController,
+  } from '@pixerate/editor/paint-editor';
+  import { untrack } from 'svelte';
+  import PixelCanvas from './PixelCanvas.svelte';
+  import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
+
+  interface Props {
+    controller: PaintEditorController;
+    /** Wheel diameter in px (default 168). */
+    wheelSize?: number;
+    /** Show the mixing pad (default true). */
+    mixingPad?: boolean;
+    class?: string;
+  }
+  let { controller, wheelSize = 168, mixingPad = true, class: className = '' }: Props = $props();
+  const editor = paintEditorState(() => controller);
+  const snap = $derived(editor.current);
+  let error = $state<string | null>(null);
+  let wheel = $state<ColorWheel>('ryb');
+  let kind = $state<HarmonyKind>('complementary');
+  let padTool = $state<'paint' | 'knife' | 'pick'>('paint');
+  let padPoints: Array<{ x: number; y: number; pressure?: number }> | null = null;
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+  const ring = $derived(renderColorWheel(wheelSize, wheel));
+  const color = $derived(snap.color);
+  const harmony = $derived(controller.harmony(kind, { color, wheel }));
+  const hsv = $derived(rgbToHsv(...parseHexColor(color)));
+  const pad = $derived.by(() => {
+    void snap.mixingPadVersion;
+    return untrack(() => ({ width: MIXING_PAD_WIDTH, height: MIXING_PAD_HEIGHT, data: controller.mixingPad.pixels() }));
+  });
+  const R = $derived(wheelSize / 2);
+  const setHsv = (s: number, v: number) => controller.setColor(rgbToHexColor(...hsvToRgb(hsv.h, s, v)));
+  const padPoint = (e: PointerEvent) => {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const x = Math.min(MIXING_PAD_WIDTH, Math.max(0, (e.clientX - rect.left) * (MIXING_PAD_WIDTH / (rect.width || MIXING_PAD_WIDTH))));
+    const y = Math.min(MIXING_PAD_HEIGHT, Math.max(0, (e.clientY - rect.top) * (MIXING_PAD_HEIGHT / (rect.height || MIXING_PAD_HEIGHT))));
+    return e.pointerType === 'pen' && e.pressure > 0 ? { x, y, pressure: e.pressure } : { x, y };
+  };
+</script>
+
+<!-- Hue wheel with harmonies, saturation and value, colours, harmony chips, swatches, mixing pad. -->
+<div class={`${panel} ${className}`} data-testid="color-panel">
+  <div class="relative self-center" style={`width: ${wheelSize}px; height: ${wheelSize}px`}>
+    <div
+      role="slider"
+      aria-label="Hue wheel"
+      aria-valuemin={0}
+      aria-valuemax={360}
+      aria-valuenow={Math.round(hueToWheel(hsv.h, wheel))}
+      tabindex="0"
+      class="absolute inset-0 cursor-crosshair"
+      onpointerdown={(e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        controller.setColor(wheelPick(e.clientX - rect.left - R, e.clientY - rect.top - R, wheel, color));
+      }}
+    >
+      <PixelCanvas pixels={ring} label="Colour wheel" style={`width: ${wheelSize}px; height: ${wheelSize}px`} />
+    </div>
+    <svg class="pointer-events-none absolute inset-0" width={wheelSize} height={wheelSize} aria-hidden="true">
+      {#each harmony as h, i (i)}
+        {@const p = wheelPoint(h.angle, R * 0.82)}
+        <circle cx={R + p.x} cy={R + p.y} r={i === 0 ? 7 : 5} fill={h.color} stroke="#fff" stroke-width={i === 0 ? 2 : 1} />
+      {/each}
+    </svg>
+    <div class="absolute rounded-full border border-slate-700" style={`left: ${R - R * 0.45}px; top: ${R - R * 0.45}px; width: ${R * 0.9}px; height: ${R * 0.9}px; background: ${color}`}></div>
+  </div>
+  <div class="flex items-center gap-2">
+    <input type="color" aria-label="Paint colour" value={color} oninput={(e) => controller.setColor(e.currentTarget.value)} class="h-7 w-9 rounded bg-transparent" />
+    <input type="color" aria-label="Second colour" value={snap.secondaryColor} oninput={(e) => controller.setSecondaryColor(e.currentTarget.value)} class="h-5 w-7 rounded bg-transparent" />
+    <button type="button" class={button} title="Swap colours (X)" onclick={() => controller.swapColors()}>Swap</button>
+    {#key color}
+      <input
+        aria-label="Hex colour"
+        value={color}
+        onblur={(e) => {
+          const v = e.currentTarget.value;
+          run(() => controller.setColor(v.startsWith('#') ? v : `#${v}`));
+        }}
+        class="w-20 rounded bg-slate-800 px-1.5 py-0.5 font-mono"
+      />
+    {/key}
+  </div>
+  <label class="flex items-center gap-2">
+    <span class="w-16 text-slate-400">Saturation</span>
+    <input type="range" aria-label="Saturation" min="0" max="1" step="0.01" value={hsv.s} oninput={(e) => setHsv(Number(e.currentTarget.value), hsv.v)} class="flex-1 accent-indigo-500" />
+  </label>
+  <label class="flex items-center gap-2">
+    <span class="w-16 text-slate-400">Value</span>
+    <input type="range" aria-label="Value" min="0" max="1" step="0.01" value={hsv.v} oninput={(e) => setHsv(hsv.s, Number(e.currentTarget.value))} class="flex-1 accent-indigo-500" />
+  </label>
+  <div class="flex items-center gap-1">
+    <select aria-label="Harmony" value={kind} onchange={(e) => (kind = e.currentTarget.value as HarmonyKind)} class="rounded bg-slate-800 px-1 py-0.5">
+      {#each HARMONY_KINDS as k (k)}
+        <option value={k}>{k}</option>
+      {/each}
+    </select>
+    <button type="button" class={chip(wheel === 'ryb')} aria-pressed={wheel === 'ryb'} onclick={() => (wheel = 'ryb')}>RYB</button>
+    <button type="button" class={chip(wheel === 'rgb')} aria-pressed={wheel === 'rgb'} onclick={() => (wheel = 'rgb')}>RGB</button>
+  </div>
+  <div class="flex flex-wrap gap-1" role="group" aria-label="Harmony colours">
+    {#each harmony as h, i (i)}
+      <button type="button" aria-label={`Use ${h.color}`} title={h.color} class="h-6 w-6 rounded ring-1 ring-slate-700" style={`background: ${h.color}`} onclick={() => controller.setColor(h.color)}></button>
+    {/each}
+    <button type="button" class={button} onclick={() => harmony.forEach((h) => controller.addSwatch(h.color))}>+ swatches</button>
+  </div>
+  <div class="flex flex-wrap gap-1" role="listbox" aria-label="Swatches">
+    {#each snap.swatches as s, i (i)}
+      <button
+        type="button"
+        role="option"
+        aria-selected={s.color === color}
+        aria-label={s.name ?? s.color}
+        title={`${s.name ?? s.color} (right-click to remove)`}
+        class="h-5 w-5 rounded ring-1 ring-slate-700"
+        style={`background: ${s.color}`}
+        onclick={() => controller.setColor(s.color)}
+        oncontextmenu={(e) => {
+          e.preventDefault();
+          controller.removeSwatch(i);
+        }}
+      ></button>
+    {/each}
+    <button type="button" class={button} aria-label="Add swatch" onclick={() => controller.addSwatch(color)}>+</button>
+  </div>
+  {#if mixingPad}
+    <div class="flex flex-col gap-1" data-testid="mixing-pad">
+      <div class="flex items-center gap-1">
+        <span class="text-slate-400">Mixing pad</span>
+        {#each ['paint', 'knife', 'pick'] as const as t (t)}
+          <button type="button" aria-pressed={padTool === t} class={chip(padTool === t)} onclick={() => (padTool = t)}>{t === 'paint' ? 'Paint' : t === 'knife' ? 'Knife' : 'Pick'}</button>
+        {/each}
+        <button type="button" class={button} onclick={() => controller.clearMixingPad()}>Clear</button>
+      </div>
+      <div
+        role="application"
+        aria-label="Mixing pad"
+        class="touch-none cursor-crosshair"
+        onpointerdown={(e) => {
+          const p = padPoint(e);
+          if (padTool === 'pick') {
+            run(() => controller.mixingPadPick(p.x, p.y, { setColor: true }));
+            return;
+          }
+          padPoints = [p];
+          (e.target as Element).setPointerCapture?.(e.pointerId);
+        }}
+        onpointermove={(e) => padPoints?.push(padPoint(e))}
+        onpointerup={() => {
+          const pts = padPoints;
+          padPoints = null;
+          if (pts?.length) run(() => controller.mixingPadStroke(pts, { tool: padTool === 'knife' ? 'knife' : 'paint' }));
+        }}
+      >
+        <PixelCanvas pixels={pad} label="Mixing pad pixels" class="w-full rounded" style={`aspect-ratio: ${MIXING_PAD_WIDTH} / ${MIXING_PAD_HEIGHT}`} />
+      </div>
+    </div>
+  {/if}
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

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

@@ -0,0 +1,13 @@
+import { type PaintEditorController } from '@pixerate/editor/paint-editor';
+interface Props {
+    controller: PaintEditorController;
+    /** Wheel diameter in px (default 168). */
+    wheelSize?: number;
+    /** Show the mixing pad (default true). */
+    mixingPad?: boolean;
+    class?: string;
+}
+declare const ColorPanel: import("svelte").Component<Props, {}, "">;
+type ColorPanel = ReturnType<typeof ColorPanel>;
+export default ColorPanel;
+//# sourceMappingURL=ColorPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/ColorPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAcH,KAAK,qBAAqB,EAC3B,MAAM,+BAA+B,CAAC;AAMvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6HH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/paint-editor/PaintCanvas.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import {
+    PaintCanvasPresenter,
+    PaintGesture,
+    fitZoom,
+    guideOverlay,
+    handlePaintShortcut,
+    viewCssTransform,
+    type PaintEditorController,
+    type PaintTool,
+  } from '@pixerate/editor/paint-editor';
+  import { untrack } from 'svelte';
+  import { paintEditorState } from './paintEditorRune.svelte.js';
+  import ReferencePanel from './ReferencePanel.svelte';
+
+  interface Props {
+    controller: PaintEditorController;
+    /** The active tool (default brush). */
+    tool?: PaintTool;
+    /** Draw the symmetry axes and perspective lines (default true). */
+    showGuides?: boolean;
+    /** Fit the canvas in the viewport on mount (default true). */
+    fitOnMount?: boolean;
+    /** Called with a refusal (hidden or locked layer). */
+    onerror?: (message: string | null) => void;
+    class?: string;
+  }
+  let { controller, tool = 'brush', showGuides = true, fitOnMount = true, onerror, class: className = '' }: Props = $props();
+
+  const editor = paintEditorState(() => controller);
+  const snap = $derived(editor.current);
+  let viewport = $state<HTMLDivElement | null>(null);
+  let canvas = $state<HTMLCanvasElement | null>(null);
+  let size = $state({ width: 800, height: 600 });
+  let predicted = $state<Array<{ x: number; y: number }>>([]);
+  const presenter = $derived(new PaintCanvasPresenter(controller));
+  const gesture = $derived(
+    new PaintGesture(controller, () => {
+      const r = viewport?.getBoundingClientRect();
+      return { left: r?.left ?? 0, top: r?.top ?? 0, width: r?.width || size.width, height: r?.height || size.height };
+    })
+  );
+  $effect(() => {
+    gesture.tool = tool;
+  });
+  const doc = $derived(snap.document.canvas);
+
+  $effect(() => {
+    const el = viewport;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const ro = new ResizeObserver(() => {
+      if (!el.clientWidth || !el.clientHeight) return;
+      measured = true;
+      size = { width: el.clientWidth, height: el.clientHeight };
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  });
+
+  // Fit once per canvas size, after the viewport has been measured (or at once where it cannot be).
+  let fitted: string | null = null;
+  let measured = $state(false);
+  $effect(() => {
+    const key = `${doc.width}x${doc.height}`;
+    const s = size;
+    if (!fitOnMount || fitted === key) return;
+    if (typeof ResizeObserver !== 'undefined' && !measured) return;
+    fitted = key;
+    untrack(() => controller.setView({ zoom: fitZoom(doc, s), pan: { x: 0, y: 0 } }));
+  });
+
+  // Upload changed tiles whenever the state changes.
+  $effect(() => {
+    void snap;
+    const ctx = canvas?.getContext('2d');
+    untrack(() => {
+      if (ctx && typeof ctx.createImageData === 'function') presenter.render(ctx as never);
+      else controller.takeDirty();
+    });
+  });
+
+  // Wheel needs a non-passive listener to prevent page scroll (see GOTCHAS).
+  $effect(() => {
+    const el = viewport;
+    if (!el) return;
+    const g = gesture;
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      g.wheel(e);
+    };
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  });
+
+  const transform = $derived(viewCssTransform(snap.view, doc, size));
+  const lines = $derived.by(() => {
+    void snap;
+    return showGuides ? guideOverlay(controller) : [];
+  });
+</script>
+
+<!-- The canvas is a painting surface (role application): it takes pointer and key input. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+<div
+  bind:this={viewport}
+  tabindex="0"
+  role="application"
+  aria-label="Paint canvas"
+  data-testid="paint-canvas"
+  class={`relative overflow-hidden bg-slate-950 outline-none touch-none select-none ${className}`}
+  style={`cursor: ${tool === 'pan' ? 'grab' : tool === 'eyedropper' ? 'copy' : 'crosshair'}`}
+  onpointerdown={(e) => {
+    viewport?.focus();
+    if (gesture.down(e)) (e.target as Element).setPointerCapture?.(e.pointerId);
+    onerror?.(gesture.error);
+  }}
+  onpointermove={(e) => {
+    gesture.move(e);
+    if (gesture.predicted.length || predicted.length) predicted = gesture.predicted.map((p) => ({ x: p.x, y: p.y }));
+  }}
+  onpointerup={(e) => {
+    gesture.up(e);
+    predicted = [];
+  }}
+  onpointercancel={() => {
+    gesture.cancel();
+    predicted = [];
+  }}
+  onkeydown={(e) => {
+    if (handlePaintShortcut(controller, gesture, e)) e.preventDefault();
+  }}
+>
+  <canvas
+    bind:this={canvas}
+    width={doc.width}
+    height={doc.height}
+    class="absolute left-0 top-0 shadow-2xl"
+    style={`transform: ${transform}; transform-origin: 0 0; image-rendering: ${snap.view.zoom > 2 ? 'pixelated' : 'auto'}`}
+  ></canvas>
+  <svg class="absolute left-0 top-0 pointer-events-none overflow-visible" width={doc.width} height={doc.height} style={`transform: ${transform}; transform-origin: 0 0`} aria-hidden="true">
+    {#each lines as l, i (i)}
+      <line
+        x1={l.from.x}
+        y1={l.from.y}
+        x2={l.to.x}
+        y2={l.to.y}
+        stroke={l.kind === 'symmetry' ? '#22d3ee' : '#f472b6'}
+        stroke-opacity={l.kind === 'symmetry' ? 0.8 : 0.35}
+        stroke-width={1 / snap.view.zoom}
+        stroke-dasharray={l.kind === 'symmetry' ? `${6 / snap.view.zoom} ${4 / snap.view.zoom}` : undefined}
+      />
+    {/each}
+    {#if predicted.length > 0}
+      <polyline points={predicted.map((p) => `${p.x},${p.y}`).join(' ')} fill="none" stroke={snap.color} stroke-opacity="0.5" stroke-width={Math.max(1, snap.brush.tip.size / 2)} stroke-linecap="round" />
+    {/if}
+  </svg>
+  {#each snap.guides.references.filter((r) => r.visible) as r (r.id)}
+    <ReferencePanel {controller} reference={r} />
+  {/each}
+  <div class="absolute bottom-1 right-2 text-[10px] text-slate-500 pointer-events-none" data-testid="paint-view-status">
+    {Math.round(snap.view.zoom * 100)}% · {Math.round(snap.view.rotation)}°{snap.view.mirror ? ' · mirrored' : ''}
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+import { type PaintEditorController, type PaintTool } from '@pixerate/editor/paint-editor';
+interface Props {
+    controller: PaintEditorController;
+    /** The active tool (default brush). */
+    tool?: PaintTool;
+    /** Draw the symmetry axes and perspective lines (default true). */
+    showGuides?: boolean;
+    /** Fit the canvas in the viewport on mount (default true). */
+    fitOnMount?: boolean;
+    /** Called with a refusal (hidden or locked layer). */
+    onerror?: (message: string | null) => void;
+    class?: string;
+}
+declare const PaintCanvas: import("svelte").Component<Props, {}, "">;
+type PaintCanvas = ReturnType<typeof PaintCanvas>;
+export default PaintCanvas;
+//# sourceMappingURL=PaintCanvas.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaintCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintCanvas.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAOH,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACf,MAAM,+BAA+B,CAAC;AAMvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,uCAAuC;IACvC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsHH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/paint-editor/PaintEditor.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { PaintEditorController, PaintTool } from '@pixerate/editor/paint-editor';
+  import BrushPanel from './BrushPanel.svelte';
+  import ColorPanel from './ColorPanel.svelte';
+  import PaintCanvas from './PaintCanvas.svelte';
+  import PaintLayersPanel from './PaintLayersPanel.svelte';
+  import PaintToolbar from './PaintToolbar.svelte';
+  import PaperPanel from './PaperPanel.svelte';
+  import { chip } from './paintEditorRune.svelte.js';
+
+  interface Props {
+    controller: PaintEditorController;
+    /** Base name of saved and exported files (default `painting`). */
+    fileName?: string;
+    /** Height of the editor (default 720 px). */
+    height?: number | string;
+    class?: string;
+  }
+  let { controller, fileName, height = 720, class: className = '' }: Props = $props();
+  let tool = $state<PaintTool>('brush');
+  let tab = $state<'color' | 'paper' | 'layers'>('color');
+  let error = $state<string | null>(null);
+</script>
+
+<!-- Toolbar, brush library, the canvas, and colour / paper / layers. -->
+<div class={`flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-900 p-2 ${className}`} style={`height: ${typeof height === 'number' ? `${height}px` : height}`} data-testid="paint-editor">
+  <PaintToolbar {controller} {tool} ontoolchange={(t) => (tool = t)} {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">
+      <PaintCanvas {controller} {tool} 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">
+      <div class="flex gap-1" role="tablist" aria-label="Paint panels">
+        {#each ['color', 'paper', 'layers'] as const as t (t)}
+          <button type="button" role="tab" aria-selected={tab === t} class={chip(tab === t)} onclick={() => (tab = t)}>{t === 'color' ? 'Colour' : t === 'paper' ? 'Paper' : 'Layers'}</button>
+        {/each}
+      </div>
+      {#if tab === 'color'}<ColorPanel {controller} />{/if}
+      {#if tab === 'paper'}<PaperPanel {controller} />{/if}
+      {#if tab === 'layers'}<PaintLayersPanel {controller} />{/if}
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaintEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAa,MAAM,+BAA+B,CAAC;AAUpF,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}