@pixerate/editor-svelte 0.84.0 → 0.85.1

package/dist/paint-editor/BrushPanel.svelte

@@ -10,8 +10,26 @@
     patchBrushValue,
     patchPath,
     readPath,
+    WET_TOOLS,
+    WET_TOOL_LABELS,
+    WET_MEDIA,
+    WET_MEDIUM_LABELS,
+    IMPASTO_TOOLS,
+    IMPASTO_TOOL_LABELS,
+    PARTICLE_KINDS,
+    PARTICLE_KIND_LABELS,
+    PARTICLE_RENDERS,
+    PARTICLE_RENDER_LABELS,
+    STAMP_KINDS,
+    STAMP_LABELS,
+    toggleStamp,
+    type ParticleKind,
+    type ParticleRender,
+    type ImpastoTool,
+    type WetMediumKind,
     type BlendMode,
     type BrushRotation,
+    type WetTool,
     type MultiColorMode,
     type PaintEditorController,
   } from '@pixerate/editor/paint-editor';
@@ -104,6 +122,55 @@
   {#if engine}
     <div class="flex flex-col gap-1.5" data-testid="brush-engine">
       <span class="font-medium text-slate-300">{engine.title}</span>
+      {#if engine.wetTool}
+        <label class="flex items-center justify-between gap-2">
+          <span class="text-slate-400">Wet tool</span>
+          <select aria-label="Wet tool" value={brush.wet.tool} onchange={(e) => controller.setBrush({ wet: { tool: e.currentTarget.value as WetTool } })} class="rounded bg-slate-800 px-1 py-0.5">
+            {#each WET_TOOLS as t (t)}<option value={t}>{WET_TOOL_LABELS[t]}</option>{/each}
+          </select>
+        </label>
+      {/if}
+      {#if engine.wetTool}
+        <label class="flex items-center justify-between gap-2">
+          <span class="text-slate-400">Medium</span>
+          <select aria-label="Wet medium" value={brush.wet.medium} onchange={(e) => controller.setBrush({ wet: { medium: e.currentTarget.value as WetMediumKind } })} class="rounded bg-slate-800 px-1 py-0.5">
+            {#each WET_MEDIA as m (m)}<option value={m}>{WET_MEDIUM_LABELS[m]}</option>{/each}
+          </select>
+        </label>
+      {/if}
+      {#if engine.particleMenus}
+        <label class="flex items-center justify-between gap-2">
+          <span class="text-slate-400">Particles</span>
+          <select aria-label="Particle kind" value={brush.particle.kind} onchange={(e) => controller.setBrush({ particle: { kind: e.currentTarget.value as ParticleKind } })} class="rounded bg-slate-800 px-1 py-0.5">
+            {#each PARTICLE_KINDS as k (k)}<option value={k}>{PARTICLE_KIND_LABELS[k]}</option>{/each}
+          </select>
+        </label>
+        <label class="flex items-center justify-between gap-2">
+          <span class="text-slate-400">Drawn as</span>
+          <select aria-label="Particle render" value={brush.particle.render} onchange={(e) => controller.setBrush({ particle: { render: e.currentTarget.value as ParticleRender } })} class="rounded bg-slate-800 px-1 py-0.5">
+            {#each PARTICLE_RENDERS as k (k)}<option value={k}>{PARTICLE_RENDER_LABELS[k]}</option>{/each}
+          </select>
+        </label>
+      {/if}
+      {#if engine.stickerStamps}
+        <div class="flex flex-wrap gap-1" role="group" aria-label="Sticker stamps">
+          {#each STAMP_KINDS as k (k)}
+            <button
+              type="button"
+              aria-pressed={brush.sticker.stamps.includes(k)}
+              class={`px-1.5 py-0.5 rounded text-[10px] ${brush.sticker.stamps.includes(k) ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300'}`}
+              onclick={() => controller.setBrush({ sticker: { stamps: toggleStamp(brush.sticker.stamps, k) } })}>{STAMP_LABELS[k]}</button>
+          {/each}
+        </div>
+      {/if}
+      {#if engine.impastoTool}
+        <label class="flex items-center justify-between gap-2">
+          <span class="text-slate-400">Tool</span>
+          <select aria-label="Impasto tool" value={brush.impasto.tool} onchange={(e) => controller.setBrush({ impasto: { tool: e.currentTarget.value as ImpastoTool } })} class="rounded bg-slate-800 px-1 py-0.5">
+            {#each IMPASTO_TOOLS as t (t)}<option value={t}>{IMPASTO_TOOL_LABELS[t]}</option>{/each}
+          </select>
+        </label>
+      {/if}
       {#each engine.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}

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

@@ -1 +1 @@
-{"version":3,"file":"BrushPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/BrushPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAcH,KAAK,qBAAqB,EAC3B,MAAM,+BAA+B,CAAC;AAOvC,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;AAuKH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"BrushPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/BrushPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAgCH,KAAK,qBAAqB,EAC3B,MAAM,+BAA+B,CAAC;AAOvC,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;AAoNH,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

@@ -2,7 +2,9 @@
   import {
     PaintCanvasPresenter,
     PaintGesture,
+    drawWaterOverlay,
     fitZoom,
+    startWetClock,
     guideOverlay,
     handlePaintShortcut,
     viewCssTransform,
@@ -35,6 +37,7 @@
   const snap = $derived(editor.current);
   let viewport = $state<HTMLDivElement | null>(null);
   let canvas = $state<HTMLCanvasElement | null>(null);
+  let water = $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));
@@ -83,6 +86,21 @@
     });
   });
 
+  // Wet paint flows with the display.
+  $effect(() => {
+    const c = controller;
+    return untrack(() => startWetClock(c));
+  });
+
+  // The water overlay.
+  $effect(() => {
+    void snap;
+    const ctx = water?.getContext('2d');
+    untrack(() => {
+      if (ctx && typeof ctx.createImageData === 'function') drawWaterOverlay(controller, ctx as never);
+    });
+  });
+
   // Wheel needs a non-passive listener to prevent page scroll (see GOTCHAS).
   $effect(() => {
     const el = viewport;
@@ -141,6 +159,16 @@
     class="absolute left-0 top-0 shadow-2xl"
     style={`transform: ${transform}; transform-origin: 0 0; image-rendering: ${snap.view.zoom > 2 ? 'pixelated' : 'auto'}`}
   ></canvas>
+  {#if snap.wet.overlay}
+    <canvas
+      bind:this={water}
+      width={doc.width}
+      height={doc.height}
+      data-testid="paint-water-overlay"
+      class="absolute left-0 top-0 pointer-events-none opacity-60"
+      style={`transform: ${transform}; transform-origin: 0 0`}
+    ></canvas>
+  {/if}
   <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
@@ -148,8 +176,8 @@
         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={l.kind === 'symmetry' ? '#22d3ee' : l.kind === 'stencil' ? '#fbbf24' : '#f472b6'}
+        stroke-opacity={l.kind === 'symmetry' || l.kind === 'stencil' ? 0.8 : 0.35}
         stroke-width={1 / snap.view.zoom}
         stroke-dasharray={l.kind === 'symmetry' ? `${6 / snap.view.zoom} ${4 / snap.view.zoom}` : undefined}
       />

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

@@ -1 +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,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,+BAA+B,CAAC;AAOvC,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,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwHH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"PaintCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintCanvas.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EASH,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,+BAA+B,CAAC;AAOvC,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,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2IH,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

@@ -6,6 +6,8 @@
   import PaintLayersPanel from './PaintLayersPanel.svelte';
   import PaintToolbar from './PaintToolbar.svelte';
   import PaperPanel from './PaperPanel.svelte';
+  import WetPanel from './WetPanel.svelte';
+  import StickerPanel from './StickerPanel.svelte';
   import { chip } from './paintEditorRune.svelte.js';
 
   interface Props {
@@ -20,11 +22,11 @@
   }
   let { controller, fileName, height = 720, presence, class: className = '' }: Props = $props();
   let tool = $state<PaintTool>('brush');
-  let tab = $state<'color' | 'paper' | 'layers'>('color');
+  let tab = $state<'color' | 'wet' | 'paper' | 'layers'>('color');
   let error = $state<string | null>(null);
 </script>
 
-<!-- Toolbar, brush library, the canvas, and colour / paper / layers. -->
+<!-- Toolbar, brush library, the canvas, and colour / wet media / 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">
@@ -35,13 +37,14 @@
     </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 ['color', 'wet', '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 === 'wet' ? 'Wet' : t === 'paper' ? 'Paper' : 'Layers'}</button>
         {/each}
       </div>
       {#if tab === 'color'}<ColorPanel {controller} />{/if}
+      {#if tab === 'wet'}<WetPanel {controller} />{/if}
       {#if tab === 'paper'}<PaperPanel {controller} />{/if}
-      {#if tab === 'layers'}<PaintLayersPanel {controller} />{/if}
+      {#if tab === 'layers'}<PaintLayersPanel {controller} /><StickerPanel {controller} />{/if}
     </div>
   </div>
 </div>

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

@@ -1 +1 @@
-{"version":3,"file":"PaintEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAa,MAAM,+BAA+B,CAAC;AAUnG,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,yEAAyE;IACzE,QAAQ,CAAC,EAAE,aAAa,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"}
+{"version":3,"file":"PaintEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAa,MAAM,+BAA+B,CAAC;AAYnG,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,yEAAyE;IACzE,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4CH,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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { PAINT_TOOLS, SYMMETRY_MODES, decodeImageBlob, downloadBytes, type PaintEditorController, type PaintTool, type SymmetryMode } from '@pixerate/editor/paint-editor';
+  import { PAINT_TOOLS, SYMMETRY_MODES, decodeImageBlob, downloadBytes, quickStencil, timeLapseZip, type PaintEditorController, type PaintTool, type SymmetryMode } from '@pixerate/editor/paint-editor';
   import { attempt, button, chip, paintEditorState } from './paintEditorRune.svelte.js';
 
   interface Props {
@@ -18,10 +18,32 @@
   const tracing = $derived(snap.guides.tracing);
   const canvas = $derived(snap.document.canvas);
   let error = $state<string | null>(null);
+  let busy = $state<string | null>(null);
+  let note = $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 timeLapse = () =>
+    run(async () => {
+      busy = 'Repainting…';
+      try {
+        const tl = await controller.timeLapse({ onProgress: (p) => (busy = `Repainting… ${Math.round(p * 100)}%`) });
+        downloadBytes(await timeLapseZip(tl), `${fileName}-timelapse.zip`, 'application/zip');
+        note = `Time-lapse: ${tl.frames.length} frames, ${(tl.durationMs / 1000).toFixed(1)} s (run render.sh in the zip for the MP4).`;
+      } finally {
+        busy = null;
+      }
+    });
+  const highRes = () =>
+    run(async () => {
+      busy = 'Repainting at 2×…';
+      try {
+        downloadBytes(await controller.exportHighResPng({ scale: 2 }), `${fileName}@2x.png`, 'image/png');
+      } finally {
+        busy = null;
+      }
+    });
   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) => {
@@ -88,6 +110,12 @@
     <button type="button" class={button} onclick={() => controller.clearTracingImage()}>Remove tracing</button>
   {/if}
   <button type="button" class={button} onclick={() => refInput?.click()}>Reference…</button>
+  <span class="flex items-center gap-1" role="group" aria-label="Stencils">
+    <button type="button" class={button} title="A ruler: strokes that start near it follow it" onclick={() => run(() => controller.addStencil(quickStencil('ruler', canvas)))}>Ruler</button>
+    <button type="button" class={button} title="A circle guide: strokes that start near it follow it" onclick={() => run(() => controller.addStencil(quickStencil('circle', canvas)))}>Circle</button>
+    <button type="button" class={button} title="An ellipse mask: paint lands only inside it" onclick={() => run(() => controller.addStencil(quickStencil('ellipse-mask', canvas)))}>Mask</button>
+    {#if snap.guides.stencils.length > 0}<button type="button" class={button} onclick={() => run(() => controller.removeStencils())}>Clear stencils</button>{/if}
+  </span>
   <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>
@@ -95,6 +123,9 @@
   <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>
+  <button type="button" class={button} disabled={busy !== null} title="Repaint the painting from its strokes as a time-lapse: frames, a video project and the ffmpeg command, zipped" onclick={timeLapse}>Time-lapse</button>
+  <button type="button" class={button} disabled={busy !== null} title="Repaint the painting from its strokes at twice the size (more detail, not upscaled)" onclick={highRes}>PNG 2×</button>
+  {#if busy ?? note}<span class="text-[11px] text-slate-400" data-testid="paint-replay-status">{busy ?? note}</span>{/if}
   <input
     bind:this={openInput}
     type="file"

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

@@ -1 +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"}
+{"version":3,"file":"PaintToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA2F,KAAK,qBAAqB,EAAE,KAAK,SAAS,EAAqB,MAAM,+BAA+B,CAAC;AAIrM,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;AAgIH,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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { PAPER_FAMILIES, PAPER_LIBRARY, PAPER_SLIDERS, patchPath, readPath, renderPaper, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import { LIGHT_SLIDERS, 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';
@@ -14,6 +14,10 @@
   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 lighting = $derived.by(() => {
+    void editor.current;
+    return controller.getLighting();
+  });
   const previews = new Map(PAPER_LIBRARY.map((p) => [p.preset, { ...SWATCH, data: renderPaper({ ...p, shading: Math.max(0.8, p.shading) }, SWATCH) }]));
 </script>
 
@@ -50,5 +54,12 @@
     <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>
+  <div class="flex flex-col gap-1.5" data-testid="light-panel">
+    <span class="font-medium text-slate-300">Light (thick paint, metallic paper)</span>
+    {#each LIGHT_SLIDERS as c (c.path)}
+      <PaintSlider control={c} value={readPath(lighting, c.path)} onchange={(v) => run(() => controller.setLighting({ [c.path]: v }))} />
+    {/each}
+    <button type="button" class={`self-start ${button}`} onclick={() => run(() => controller.flattenRelief())}>Flatten relief</button>
+  </div>
   {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
 </div>

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

@@ -1 +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"}
+{"version":3,"file":"PaperPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaperPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiG,KAAK,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAMxK,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0DH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/paint-editor/StickerPanel.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { STAMP_KINDS, STAMP_LABELS, STICKER_SLIDERS, readPath, type PaintEditorController, type StampKind } from '@pixerate/editor/paint-editor';
+  import PaintSlider from './PaintSlider.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 layerId = $derived(editor.current.document.activeLayerId);
+  const stickers = $derived(layerId ? (editor.current.document.stickers?.[layerId] ?? []) : []);
+  let picked = $state<string | null>(null);
+  const sel = $derived(stickers.find((s) => s.id === picked) ?? null);
+  let error = $state<string | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+</script>
+
+<!-- The active layer's stickers: pick one to change, reorder or delete it (each change one undo step). -->
+{#if stickers.length && layerId}
+  <div class={`${panel} ${className}`} data-testid="sticker-panel">
+    <span class="font-medium text-slate-300">Stickers ({stickers.length})</span>
+    <div class="flex max-h-24 flex-wrap gap-1 overflow-y-auto" role="listbox" aria-label="Stickers">
+      {#each stickers as s (s.id)}
+        <button type="button" role="option" aria-selected={s.id === picked} title={`${STAMP_LABELS[s.stamp]} ${s.id}`} class={`h-5 w-5 rounded ring-1 ${s.id === picked ? 'ring-indigo-400' : 'ring-slate-700'}`} style={`background: ${s.color}`} onclick={() => (picked = s.id)}></button>
+      {/each}
+    </div>
+    {#if sel}
+      <div class="flex flex-col gap-1.5" data-testid="sticker-edit">
+        <label class="flex items-center justify-between gap-2">
+          <span class="text-slate-400">Stamp</span>
+          <select aria-label="Sticker stamp" value={sel.stamp} onchange={(e) => { const stamp = e.currentTarget.value as StampKind; run(() => controller.updateSticker(layerId, sel.id, { stamp })); }} class="rounded bg-slate-800 px-1 py-0.5">
+            {#each STAMP_KINDS as k (k)}<option value={k}>{STAMP_LABELS[k]}</option>{/each}
+          </select>
+        </label>
+        {#each STICKER_SLIDERS as c (c.path)}
+          <PaintSlider control={c} value={readPath(sel, c.path)} oncommit={(v) => run(() => controller.updateSticker(layerId, sel.id, { [c.path]: v }))} />
+        {/each}
+        <label class="flex items-center justify-between">
+          <span class="text-slate-400">Colour</span>
+          <input type="color" aria-label="Sticker colour" value={sel.color} onchange={(e) => { const color = e.currentTarget.value; run(() => controller.updateSticker(layerId, sel.id, { color })); }} class="h-6 w-10 rounded bg-transparent" />
+        </label>
+        <div class="flex flex-wrap gap-1">
+          <button type="button" class={button} onclick={() => run(() => controller.arrangeStickers(layerId, [sel.id], 'front'))}>To front</button>
+          <button type="button" class={button} onclick={() => run(() => controller.arrangeStickers(layerId, [sel.id], 'back'))}>To back</button>
+          <button type="button" class={button} onclick={() => run(() => { controller.removeStickers(layerId, [sel.id]); picked = null; })}>Delete</button>
+        </div>
+      </div>
+    {/if}
+    {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+  </div>
+{/if}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"StickerPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/StickerPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAwD,KAAK,qBAAqB,EAAkB,MAAM,+BAA+B,CAAC;AAK/I,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqDH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/paint-editor/WetPanel.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { WET_FLOW_KINDS, WET_PARAM_SLIDERS, WET_SPEED_SLIDER, WET_TILT_SLIDERS, readPath, type PaintEditorController, type WetFlowKind } from '@pixerate/editor/paint-editor';
+  import PaintSlider from './PaintSlider.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 wet = $derived(editor.current.wet);
+  const layerId = $derived(editor.current.document.activeLayerId);
+  const info = $derived.by(() => {
+    void editor.current;
+    return layerId ? controller.wetLayerInfo(layerId) : null;
+  });
+  const backend = $derived.by(() => {
+    void editor.current;
+    return controller.wetState();
+  });
+  let error = $state<string | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+  const FLOW_LABELS: Record<WetFlowKind, string> = { none: 'None', linear: 'One way', swirl: 'Swirl', radial: 'Outwards', turbulent: 'Eddies' };
+</script>
+
+<!-- Wet media: status, Dry now, Pause, the water overlay, speed, Wet paper, tilt, the active layer's wet settings and flow map, and the kernel in use. -->
+<div class={`${panel} ${className}`} data-testid="wet-panel">
+  <div class="flex items-center justify-between">
+    <span class={wet.wet ? 'text-sky-300' : 'text-slate-400'} data-testid="wet-status">{wet.wet ? (wet.paused ? 'Wet (paused)' : 'Wet') : 'Dry'}</span>
+    <span class="text-[10px] text-slate-500">step {wet.clock}</span>
+  </div>
+  <div class="flex flex-wrap gap-1">
+    <button type="button" class={button} disabled={!wet.layerIds.length} onclick={() => run(async () => (await controller.wetIdle(), controller.dryPaint()))}>Dry now</button>
+    <button type="button" class={chip(wet.paused)} aria-pressed={wet.paused} onclick={() => controller.setWetPaused(!wet.paused)}>{wet.paused ? 'Resume' : 'Pause'}</button>
+    <button type="button" class={chip(wet.overlay)} aria-pressed={wet.overlay} onclick={() => controller.setWaterOverlay(!wet.overlay)}>Water</button>
+    <button type="button" class={chip(wet.instantDry)} aria-pressed={wet.instantDry} title="Each wet stroke dries as soon as it ends" onclick={() => controller.setInstantDry(!wet.instantDry)}>Instant dry</button>
+    <button type="button" class={button} disabled={!layerId} onclick={() => run(async () => (await controller.wetIdle(), controller.wetPaper({})))}>Wet paper</button>
+  </div>
+  <PaintSlider control={WET_SPEED_SLIDER} value={wet.speed} onchange={(v) => controller.setWetSpeed(v)} />
+  {#each WET_TILT_SLIDERS as c (c.path)}
+    <PaintSlider control={c} value={readPath(wet.tilt, c.path)} oncommit={(v) => run(async () => (await controller.wetIdle(), controller.setCanvasTilt({ [c.path]: v })))} />
+  {/each}
+  {#if info && layerId}
+    <div class="flex flex-col gap-1.5" data-testid="wet-layer">
+      <span class="font-medium text-slate-300">This layer</span>
+      {#each WET_PARAM_SLIDERS as c (c.path)}
+        <PaintSlider control={c} value={readPath(info.params, c.path)} oncommit={(v) => run(async () => (await controller.wetIdle(), controller.setWetParams(layerId, { [c.path]: v })))} />
+      {/each}
+      <label class="flex items-center justify-between gap-2">
+        <span class="text-slate-400">Flow map</span>
+        <select aria-label="Flow map" value={info.flow.kind} onchange={(e) => { const kind = e.currentTarget.value as WetFlowKind; run(async () => (await controller.wetIdle(), controller.setFlowMap(layerId, { kind }))); }} class="rounded bg-slate-800 px-1 py-0.5">
+          {#each WET_FLOW_KINDS as k (k)}<option value={k}>{FLOW_LABELS[k]}</option>{/each}
+        </select>
+      </label>
+      {#if info.flow.kind !== 'none'}
+        <PaintSlider control={{ path: 'strength', label: 'Flow strength', min: 0, max: 1, step: 0.01 }} value={info.flow.strength} oncommit={(v) => run(async () => (await controller.wetIdle(), controller.setFlowMap(layerId, { strength: v })))} />
+      {/if}
+    </div>
+  {/if}
+  {#if backend.message}<p class="text-[10px] text-amber-300" data-testid="wet-message">{backend.message}</p>{/if}
+  {#if backend.backend}
+    <p class="text-[10px] text-slate-500">{backend.backend.kind === 'wasm-threads' ? `WebAssembly, ${backend.backend.threads} threads` : backend.backend.kind === 'wasm' ? 'WebAssembly, one thread' : 'JavaScript'}</p>
+  {/if}
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"WetPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/WetPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmF,KAAK,qBAAqB,EAAoB,MAAM,+BAA+B,CAAC;AAK5K,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkEH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

@@ -6,6 +6,8 @@ import type BrushPanelComponent from './BrushPanel.svelte';
 import type PaperPanelComponent from './PaperPanel.svelte';
 import type ColorPanelComponent from './ColorPanel.svelte';
 import type PaintLayersPanelComponent from './PaintLayersPanel.svelte';
+import type WetPanelComponent from './WetPanel.svelte';
+import type StickerPanelComponent from './StickerPanel.svelte';
 export { default as PaintEditor } from './PaintEditor.svelte';
 export { default as PaintCanvas } from './PaintCanvas.svelte';
 export { default as PaintToolbar } from './PaintToolbar.svelte';
@@ -13,6 +15,8 @@ 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 WetPanel } from './WetPanel.svelte';
+export { default as StickerPanel } from './StickerPanel.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
 export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
 export { createPaintDirector, createReactivePaintEditor, paintEditorState } from './paintEditorRune.svelte.js';
@@ -23,4 +27,6 @@ export type BrushPanelProps = ComponentProps<typeof BrushPanelComponent>;
 export type PaperPanelProps = ComponentProps<typeof PaperPanelComponent>;
 export type ColorPanelProps = ComponentProps<typeof ColorPanelComponent>;
 export type PaintLayersPanelProps = ComponentProps<typeof PaintLayersPanelComponent>;
+export type WetPanelProps = ComponentProps<typeof WetPanelComponent>;
+export type StickerPanelProps = ComponentProps<typeof StickerPanelComponent>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/G,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"}
+{"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;AACvE,OAAO,KAAK,iBAAiB,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,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,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/G,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;AACrF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACrE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/paint-editor/index.js

@@ -5,6 +5,8 @@ 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 WetPanel } from './WetPanel.svelte';
+export { default as StickerPanel } from './StickerPanel.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
 export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
 export { createPaintDirector, createReactivePaintEditor, paintEditorState } from './paintEditorRune.svelte.js';

package/dist/vector/VectorCanvas.svelte

@@ -466,6 +466,14 @@
         {/if}
       </g>
     {/if}
+    {#each overlay.shading as sh (sh.nodeId)}
+      <g data-vector-shading={sh.kind}>
+        {#each sh.lines as d, i (i)}<path {d} stroke={accentColor} stroke-width="1" opacity="0.7" />{/each}
+        {#each sh.points as p (p.index)}
+          <circle data-vector-shading-point={p.index} data-selected={p.selected || undefined} cx={p.x} cy={p.y} r={p.selected ? 6 : 4.5} fill={p.color} stroke={p.selected ? accentColor : '#ffffff'} stroke-width={p.selected ? 2 : 1.5} />
+        {/each}
+      </g>
+    {/each}
     {#each overlay.trackingPoints as t, i (i)}
       <path data-vector-tracking-point="" d="M{t.x - 5} {t.y}H{t.x + 5}M{t.x} {t.y - 5}V{t.y + 5}" stroke={guideColor} stroke-width="1.5" />
     {/each}

package/dist/vector/VectorCanvas.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorCanvas.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EASH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AASjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmaH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"VectorCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorCanvas.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EASH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AASjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA2aH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/vector/VectorShadingPanel.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { isVectorFreeformGradient, isVectorMeshGradient, vectorPaintToHex, type VectorEditorController, type VectorPathNode } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  /**
+   * Gradient meshes and freeform gradients of the selected path: make a rows × columns mesh or a
+   * freeform gradient, and edit the point picked with the Gradient tool (colour, opacity, and a
+   * freeform point's spread, or remove it). Each change is one undo step.
+   */
+  interface Props {
+    controller: VectorEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  const store = vectorStateOf(() => controller);
+  const view = $derived(store.current);
+  let rows = $state(2);
+  let columns = $state(2);
+  const path = $derived(view.selection.map((id) => controller.getNode(id)).find((n): n is VectorPathNode => n?.type === 'path') ?? null);
+  const mesh = $derived(path && isVectorMeshGradient(path.fill) ? path.fill : null);
+  const free = $derived(path && isVectorFreeformGradient(path.fill) ? path.fill : null);
+  const sel = $derived(path && view.shadingPoint?.nodeId === path.id ? view.shadingPoint : null);
+  const color = $derived(sel ? (mesh ? mesh.colors[sel.index] : free?.points[sel.index]?.color) : undefined);
+  const opacity = $derived(sel ? (mesh ? (mesh.opacities?.[sel.index] ?? 1) : (free?.points[sel.index]?.opacity ?? 1)) : 1);
+  const spread = $derived(sel && free ? (free.points[sel.index]?.spread ?? 0) : 0);
+
+  function edit(patch: { color?: string; opacity?: number; spread?: number }, merge?: string) {
+    if (!sel || !path) return;
+    if (mesh) controller.setMeshPoint(path.id, sel.index, patch, merge ? { merge } : {});
+    else controller.setFreeformPoint(path.id, sel.index, patch, merge ? { merge } : {});
+  }
+
+  const buttonClass =
+    'inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40';
+  const numberClass = 'h-7 w-12 rounded border border-border bg-background px-1.5 text-xs';
+  const clamp = (v: string) => Math.max(1, Math.min(32, parseInt(v, 10) || 1));
+</script>
+
+{#if path}
+  <div class="space-y-2 {className}" data-vector-shading-panel={path.id} aria-label="Mesh and freeform gradient">
+    <div class="flex flex-wrap items-center gap-1">
+      <span class="w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Shading</span>
+      <input type="number" min="1" max="32" aria-label="Mesh rows" title="Mesh rows" class={numberClass} value={rows} oninput={(e) => (rows = clamp(e.currentTarget.value))} />
+      <span class="text-xs text-muted-foreground">×</span>
+      <input type="number" min="1" max="32" aria-label="Mesh columns" title="Mesh columns" class={numberClass} value={columns} oninput={(e) => (columns = clamp(e.currentTarget.value))} />
+      <button type="button" class={buttonClass} data-vector-shading-action="mesh" title="Create Gradient Mesh: smooth patches whose points blend colours (edit them with the Gradient tool)" onclick={() => controller.setMeshGradient({ rows, columns }, { ids: [path.id] })}>Mesh</button>
+      <button type="button" class={buttonClass} data-vector-shading-action="freeform" title="Freeform Gradient: colour points blended across the shape (click inside with the Gradient tool to add one)" onclick={() => controller.setFreeformGradient({}, { ids: [path.id] })}>Freeform</button>
+    </div>
+    {#if (mesh || free) && !sel}
+      <p class="text-[11px] text-muted-foreground">Gradient tool (G): drag points; {free ? 'click inside to add one, Alt-click to remove.' : 'pick one to colour it.'}</p>
+    {/if}
+    {#if sel}
+      <div class="flex flex-wrap items-center gap-2" data-vector-shading-point={sel.index}>
+        <span class="w-16 text-xs text-foreground">Point {sel.index}</span>
+        <input type="color" aria-label="Point colour" class="h-7 w-10 cursor-pointer rounded border border-border bg-background" value={vectorPaintToHex(color ?? '#000000') ?? '#000000'} oninput={(e) => edit({ color: e.currentTarget.value }, 'shading-color')} />
+        <input type="range" min="0" max="1" step="0.05" aria-label="Point opacity" title="Opacity" class="h-4 w-20 accent-primary" value={opacity} oninput={(e) => edit({ opacity: parseFloat(e.currentTarget.value) }, 'shading-opacity')} />
+        {#if free}
+          <input type="range" min="0" max="1" step="0.05" aria-label="Point spread" title="Spread: pure colour round the point" class="h-4 w-20 accent-primary" value={spread} oninput={(e) => edit({ spread: parseFloat(e.currentTarget.value) }, 'shading-spread')} />
+          <button type="button" class={buttonClass} aria-label="Remove point" onclick={() => controller.removeFreeformPoint(path.id, sel.index)}>Remove</button>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/vector/VectorShadingPanel.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+/**
+ * Gradient meshes and freeform gradients of the selected path: make a rows × columns mesh or a
+ * freeform gradient, and edit the point picked with the Gradient tool (colour, opacity, and a
+ * freeform point's spread, or remove it). Each change is one undo step.
+ */
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorShadingPanel: import("svelte").Component<Props, {}, "">;
+type VectorShadingPanel = ReturnType<typeof VectorShadingPanel>;
+export default VectorShadingPanel;
+//# sourceMappingURL=VectorShadingPanel.svelte.d.ts.map

package/dist/vector/VectorShadingPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorShadingPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorShadingPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoE,KAAK,sBAAsB,EAAuB,MAAM,yBAAyB,CAAC;AAI3J;;;;GAIG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6DH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/vector/VectorStylePanel.svelte

@@ -26,6 +26,8 @@
   import VectorConstraintsPanel from './VectorConstraintsPanel.svelte';
   import VectorFramePanel from './VectorFramePanel.svelte';
   import VectorConnectorPanel from './VectorConnectorPanel.svelte';
+  import VectorShadingPanel from './VectorShadingPanel.svelte';
+  import VectorTracePanel from './VectorTracePanel.svelte';
   import VectorGradientEditor from './VectorGradientEditor.svelte';
 
   interface Props {
@@ -253,6 +255,8 @@
   {/if}
   <VectorFramePanel {controller} />
   <VectorConnectorPanel {controller} />
+  <VectorShadingPanel {controller} />
+  <VectorTracePanel {controller} />
   <VectorConstraintsPanel {controller} />
   <VectorSymbolsPanel {controller} />
 </div>

package/dist/vector/VectorStylePanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorStylePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorStylePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAYH,KAAK,sBAAsB,EAG5B,MAAM,yBAAyB,CAAC;AAejC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoLH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"VectorStylePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorStylePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAYH,KAAK,sBAAsB,EAG5B,MAAM,yBAAyB,CAAC;AAiBjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwLH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/vector/VectorTracePanel.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { VectorEditorController } from '@pixerate/editor/vector';
+
+  /**
+   * Image Trace: pick an image file and trace it into paths, in one colour (dark areas) or a
+   * stacked path per colour. The traced group goes on the artboard at its width. One undo step.
+   */
+  interface Props {
+    controller: VectorEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  let input: HTMLInputElement | undefined = $state();
+  let mode: 'threshold' | 'color' = $state('threshold');
+  let colors = $state(6);
+  let message: string | null = $state(null);
+
+  /** Decodes an image file in the browser into RGBA pixels (at most `max` pixels, scaled down to fit). */
+  async function filePixels(file: File, max = 1_000_000) {
+    const bitmap = await createImageBitmap(file);
+    const k = Math.min(1, Math.sqrt(max / (bitmap.width * bitmap.height)));
+    const width = Math.max(1, Math.round(bitmap.width * k));
+    const height = Math.max(1, Math.round(bitmap.height * k));
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d')!;
+    ctx.drawImage(bitmap, 0, 0, width, height);
+    return { width, height, data: ctx.getImageData(0, 0, width, height).data };
+  }
+
+  async function trace(file: File) {
+    try {
+      const pixels = await filePixels(file);
+      const doc = controller.getState().document;
+      const width = Math.min(doc.width, pixels.width);
+      const r = controller.traceImage(pixels, { mode, colors, width, name: file.name.replace(/\.[^.]+$/, '') || 'Image Trace' });
+      message = r.ok ? null : r.message;
+    } catch {
+      message = 'That file could not be read as an image.';
+    }
+  }
+
+  const buttonClass =
+    'inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40';
+  const selectClass = 'h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs';
+  const numberClass = 'h-7 w-12 rounded border border-border bg-background px-1.5 text-xs';
+</script>
+
+<div class="space-y-1 {className}" data-vector-trace-panel="" aria-label="Image trace">
+  <div class="flex items-center gap-1">
+    <span class="w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Trace</span>
+    <select aria-label="Trace mode" class={selectClass} bind:value={mode}>
+      <option value="threshold">Black &amp; white</option>
+      <option value="color">Colours</option>
+    </select>
+    {#if mode === 'color'}
+      <input type="number" min="2" max="32" aria-label="Trace colours" title="Colours" class={numberClass} value={colors} oninput={(e) => (colors = Math.max(2, Math.min(32, parseInt(e.currentTarget.value, 10) || 2)))} />
+    {/if}
+    <button type="button" class={buttonClass} data-vector-trace-action="" title="Image Trace: pick an image to turn into paths" onclick={() => input?.click()}>Image…</button>
+    <input
+      bind:this={input}
+      type="file"
+      accept="image/*"
+      hidden
+      onchange={(e) => {
+        const file = e.currentTarget.files?.[0];
+        e.currentTarget.value = '';
+        if (file) void trace(file);
+      }}
+    />
+  </div>
+  {#if message}<p class="text-[11px] text-red-600">{message}</p>{/if}
+</div>

package/dist/vector/VectorTracePanel.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { VectorEditorController } from '@pixerate/editor/vector';
+/**
+ * Image Trace: pick an image file and trace it into paths, in one colour (dark areas) or a
+ * stacked path per colour. The traced group goes on the artboard at its width. One undo step.
+ */
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorTracePanel: import("svelte").Component<Props, {}, "">;
+type VectorTracePanel = ReturnType<typeof VectorTracePanel>;
+export default VectorTracePanel;
+//# sourceMappingURL=VectorTracePanel.svelte.d.ts.map

package/dist/vector/VectorTracePanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorTracePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorTracePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;;GAGG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkEH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/vector/index.d.ts

@@ -14,6 +14,8 @@ export { default as VectorSymbolsPanel } from "./VectorSymbolsPanel.svelte";
 export { default as VectorConstraintsPanel } from "./VectorConstraintsPanel.svelte";
 export { default as VectorFramePanel } from "./VectorFramePanel.svelte";
 export { default as VectorConnectorPanel } from "./VectorConnectorPanel.svelte";
+export { default as VectorShadingPanel } from "./VectorShadingPanel.svelte";
+export { default as VectorTracePanel } from "./VectorTracePanel.svelte";
 export { default as VectorTextElement } from "./VectorTextElement.svelte";
 export { default as VectorMaskedNodes } from "./VectorMaskedNodes.svelte";
 export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";

package/dist/vector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vector/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vector/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/vector/index.js

@@ -11,6 +11,8 @@ export { default as VectorSymbolsPanel } from "./VectorSymbolsPanel.svelte";
 export { default as VectorConstraintsPanel } from "./VectorConstraintsPanel.svelte";
 export { default as VectorFramePanel } from "./VectorFramePanel.svelte";
 export { default as VectorConnectorPanel } from "./VectorConnectorPanel.svelte";
+export { default as VectorShadingPanel } from "./VectorShadingPanel.svelte";
+export { default as VectorTracePanel } from "./VectorTracePanel.svelte";
 export { default as VectorTextElement } from "./VectorTextElement.svelte";
 export { default as VectorMaskedNodes } from "./VectorMaskedNodes.svelte";
 export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.84.0",
+  "version": "0.85.1",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -139,7 +139,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.115.0"
+    "@pixerate/editor": "0.117.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",