@pixerate/editor-react 0.76.0 → 0.77.0

package/dist/paint-editor/index.js

@@ -1,3 +1,7 @@
+import {
+  PaintGradientEditorView
+} from "../chunk-MO354USR.js";
+
 // src/paint-editor/usePaintEditor.ts
 import { useMemo, useState, useSyncExternalStore } from "react";
 import { PaintDirector, PaintEditorController, PaintPresence } from "@pixerate/editor/paint-editor";
@@ -550,7 +554,7 @@ import {
   brushEngineControls,
   brushLoadColor,
   downloadBytes as downloadBytes2,
-  multiColorSliders,
+  brushTakesPaint,
   patchBrushValue,
   patchPath,
   readPath,
@@ -568,7 +572,15 @@ import {
   STAMP_LABELS,
   toggleStamp
 } from "@pixerate/editor/paint-editor";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { DEFAULT_PAINT_GRADIENT } from "@pixerate/editor/paint-editor";
+
+// src/paint-editor/PaintGradientEditor.tsx
+import { PAINT_GRADIENT_KIT } from "@pixerate/editor/paint-editor";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var PaintGradientEditor = (props) => /* @__PURE__ */ jsx4(PaintGradientEditorView, { ...props, kit: PAINT_GRADIENT_KIT });
+
+// src/paint-editor/BrushPanel.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, className }) => {
   const state = usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
@@ -583,12 +595,10 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
     [controller, brushes, paper, thumbnailWidth, thumbnailHeight]
   );
   const engine = brushEngineControls(brush);
-  const mc = brush.behavior.multicolor;
   const carried = brushLoadColor(state.mixerLoad);
-  const setColors = (colors) => controller.setBrush({ behavior: { multicolor: { colors } } });
   const slug = (name) => name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60) || "brush";
   return /* @__PURE__ */ jsxs4("div", { className: `${panel} ${className ?? ""}`, "data-testid": "brush-panel", children: [
-    /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-2 gap-1", role: "listbox", "aria-label": "Brushes", children: brushes.map((b) => /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-2 gap-1", role: "listbox", "aria-label": "Brushes", children: brushes.map((b) => /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
@@ -598,52 +608,52 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
         className: `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 }),
         children: [
-          /* @__PURE__ */ jsx4(PixelCanvas, { pixels: thumbs.get(b.id) ?? null, label: `${b.name} thumbnail`, className: "rounded", style: { width: "100%", aspectRatio: `${thumbnailWidth} / ${thumbnailHeight}` } }),
-          /* @__PURE__ */ jsx4("span", { className: "truncate text-[10px] text-slate-300", children: b.name })
+          /* @__PURE__ */ jsx5(PixelCanvas, { pixels: thumbs.get(b.id) ?? null, label: `${b.name} thumbnail`, className: "rounded", style: { width: "100%", aspectRatio: `${thumbnailWidth} / ${thumbnailHeight}` } }),
+          /* @__PURE__ */ jsx5("span", { className: "truncate text-[10px] text-slate-300", children: b.name })
         ]
       },
       b.id
     )) }),
     /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", children: [
-      BRUSH_SLIDERS.map((c) => /* @__PURE__ */ jsx4(PaintSlider, { control: c, value: readPath(brush, c.path), onChange: (v) => controller.setBrush(patchPath(brush, c.path, v)) }, c.path)),
+      BRUSH_SLIDERS.map((c) => /* @__PURE__ */ jsx5(PaintSlider, { control: c, value: readPath(brush, c.path), onChange: (v) => controller.setBrush(patchPath(brush, c.path, v)) }, c.path)),
       /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Rotation" }),
-        /* @__PURE__ */ jsx4("select", { "aria-label": "Brush rotation", value: brush.rotation, onChange: (e) => controller.setBrush({ rotation: e.target.value }), className: "rounded bg-slate-800 px-1 py-0.5", children: BRUSH_ROTATIONS.map((r) => /* @__PURE__ */ jsx4("option", { value: r, children: r === "stroke" ? "Follow stroke" : r === "barrel" ? "Pen barrel" : "Fixed" }, r)) })
+        /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "Rotation" }),
+        /* @__PURE__ */ jsx5("select", { "aria-label": "Brush rotation", value: brush.rotation, onChange: (e) => controller.setBrush({ rotation: e.target.value }), className: "rounded bg-slate-800 px-1 py-0.5", children: BRUSH_ROTATIONS.map((r) => /* @__PURE__ */ jsx5("option", { value: r, children: r === "stroke" ? "Follow stroke" : r === "barrel" ? "Pen barrel" : "Fixed" }, r)) })
       ] }),
       /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: brush.tip.pressureSize, onChange: (e) => controller.setBrush({ tip: { pressureSize: e.target.checked } }) }),
+        /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: brush.tip.pressureSize, onChange: (e) => controller.setBrush({ tip: { pressureSize: e.target.checked } }) }),
         " Pressure \u2192 size"
       ] }),
       /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: brush.tip.pressureOpacity, onChange: (e) => controller.setBrush({ tip: { pressureOpacity: e.target.checked } }) }),
+        /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: brush.tip.pressureOpacity, onChange: (e) => controller.setBrush({ tip: { pressureOpacity: e.target.checked } }) }),
         " Pressure \u2192 opacity"
       ] }),
       brush.engine === "dab" && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Blend" }),
-        /* @__PURE__ */ jsx4("select", { "aria-label": "Brush blend", value: brush.tip.blend, onChange: (e) => controller.setBrush({ tip: { blend: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: BLEND_MENU_GROUPS.map((g) => /* @__PURE__ */ jsx4("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ jsx4("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label)) })
+        /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "Blend" }),
+        /* @__PURE__ */ jsx5("select", { "aria-label": "Brush blend", value: brush.tip.blend, onChange: (e) => controller.setBrush({ tip: { blend: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: BLEND_MENU_GROUPS.map((g) => /* @__PURE__ */ jsx5("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ jsx5("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label)) })
       ] })
     ] }),
     engine && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", "data-testid": "brush-engine", children: [
-      /* @__PURE__ */ jsx4("span", { className: "font-medium text-slate-300", children: engine.title }),
+      /* @__PURE__ */ jsx5("span", { className: "font-medium text-slate-300", children: engine.title }),
       engine.wetTool && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Wet tool" }),
-        /* @__PURE__ */ jsx4("select", { "aria-label": "Wet tool", value: brush.wet.tool, onChange: (e) => controller.setBrush({ wet: { tool: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: WET_TOOLS.map((t) => /* @__PURE__ */ jsx4("option", { value: t, children: WET_TOOL_LABELS[t] }, t)) })
+        /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "Wet tool" }),
+        /* @__PURE__ */ jsx5("select", { "aria-label": "Wet tool", value: brush.wet.tool, onChange: (e) => controller.setBrush({ wet: { tool: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: WET_TOOLS.map((t) => /* @__PURE__ */ jsx5("option", { value: t, children: WET_TOOL_LABELS[t] }, t)) })
       ] }),
       engine.wetTool && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Medium" }),
-        /* @__PURE__ */ jsx4("select", { "aria-label": "Wet medium", value: brush.wet.medium, onChange: (e) => controller.setBrush({ wet: { medium: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: WET_MEDIA.map((m) => /* @__PURE__ */ jsx4("option", { value: m, children: WET_MEDIUM_LABELS[m] }, m)) })
+        /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "Medium" }),
+        /* @__PURE__ */ jsx5("select", { "aria-label": "Wet medium", value: brush.wet.medium, onChange: (e) => controller.setBrush({ wet: { medium: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: WET_MEDIA.map((m) => /* @__PURE__ */ jsx5("option", { value: m, children: WET_MEDIUM_LABELS[m] }, m)) })
       ] }),
       engine.particleMenus && /* @__PURE__ */ jsxs4(Fragment2, { children: [
         /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Particles" }),
-          /* @__PURE__ */ jsx4("select", { "aria-label": "Particle kind", value: brush.particle.kind, onChange: (e) => controller.setBrush({ particle: { kind: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: PARTICLE_KINDS.map((k) => /* @__PURE__ */ jsx4("option", { value: k, children: PARTICLE_KIND_LABELS[k] }, k)) })
+          /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "Particles" }),
+          /* @__PURE__ */ jsx5("select", { "aria-label": "Particle kind", value: brush.particle.kind, onChange: (e) => controller.setBrush({ particle: { kind: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: PARTICLE_KINDS.map((k) => /* @__PURE__ */ jsx5("option", { value: k, children: PARTICLE_KIND_LABELS[k] }, k)) })
         ] }),
         /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Drawn as" }),
-          /* @__PURE__ */ jsx4("select", { "aria-label": "Particle render", value: brush.particle.render, onChange: (e) => controller.setBrush({ particle: { render: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: PARTICLE_RENDERS.map((k) => /* @__PURE__ */ jsx4("option", { value: k, children: PARTICLE_RENDER_LABELS[k] }, k)) })
+          /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "Drawn as" }),
+          /* @__PURE__ */ jsx5("select", { "aria-label": "Particle render", value: brush.particle.render, onChange: (e) => controller.setBrush({ particle: { render: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: PARTICLE_RENDERS.map((k) => /* @__PURE__ */ jsx5("option", { value: k, children: PARTICLE_RENDER_LABELS[k] }, k)) })
         ] })
       ] }),
-      engine.stickerStamps && /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "Sticker stamps", children: STAMP_KINDS.map((k) => /* @__PURE__ */ jsx4(
+      engine.stickerStamps && /* @__PURE__ */ jsx5("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "Sticker stamps", children: STAMP_KINDS.map((k) => /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -655,12 +665,12 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
         k
       )) }),
       engine.impastoTool && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Tool" }),
-        /* @__PURE__ */ jsx4("select", { "aria-label": "Impasto tool", value: brush.impasto.tool, onChange: (e) => controller.setBrush({ impasto: { tool: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: IMPASTO_TOOLS.map((t) => /* @__PURE__ */ jsx4("option", { value: t, children: IMPASTO_TOOL_LABELS[t] }, t)) })
+        /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "Tool" }),
+        /* @__PURE__ */ jsx5("select", { "aria-label": "Impasto tool", value: brush.impasto.tool, onChange: (e) => controller.setBrush({ impasto: { tool: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: IMPASTO_TOOLS.map((t) => /* @__PURE__ */ jsx5("option", { value: t, children: IMPASTO_TOOL_LABELS[t] }, t)) })
       ] }),
-      engine.sliders.map((c) => /* @__PURE__ */ jsx4(PaintSlider, { control: c, value: readPath(brush, c.path), onChange: (v) => controller.setBrush(patchPath(brush, c.path, v)) }, c.path)),
+      engine.sliders.map((c) => /* @__PURE__ */ jsx5(PaintSlider, { control: c, value: readPath(brush, c.path), onChange: (v) => controller.setBrush(patchPath(brush, c.path, v)) }, c.path)),
       engine.mixingPath && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Mixing" }),
+        /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "Mixing" }),
         /* @__PURE__ */ jsxs4(
           "select",
           {
@@ -669,57 +679,45 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
             onChange: (e) => controller.setBrush(patchBrushValue(brush, engine.mixingPath, e.target.value)),
             className: "rounded bg-slate-800 px-1 py-0.5",
             children: [
-              /* @__PURE__ */ jsx4("option", { value: "pigment", children: "Pigment" }),
-              /* @__PURE__ */ jsx4("option", { value: "rgb", children: "RGB" })
+              /* @__PURE__ */ jsx5("option", { value: "pigment", children: "Pigment" }),
+              /* @__PURE__ */ jsx5("option", { value: "rgb", children: "RGB" })
             ]
           }
         )
       ] }),
       engine.dirty && /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2", title: "Keep the colour the brush picked up for the next stroke (needs Pick-up above 0)", children: [
-        /* @__PURE__ */ jsx4("input", { type: "checkbox", "aria-label": "Dirty brush", checked: brush.behavior.dirty, onChange: (e) => controller.setBrush({ behavior: { dirty: e.target.checked } }) }),
+        /* @__PURE__ */ jsx5("input", { type: "checkbox", "aria-label": "Dirty brush", checked: brush.behavior.dirty, onChange: (e) => controller.setBrush({ behavior: { dirty: e.target.checked } }) }),
         " Dirty brush"
       ] }),
-      engine.multicolor && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", "data-testid": "multicolor", children: [
-        /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Multi-colour" }),
-          /* @__PURE__ */ jsxs4("select", { "aria-label": "Multi-colour", value: mc.mode, onChange: (e) => controller.setBrush({ behavior: { multicolor: { mode: e.target.value } } }), className: "rounded bg-slate-800 px-1 py-0.5", children: [
-            /* @__PURE__ */ jsx4("option", { value: "off", children: "Off" }),
-            /* @__PURE__ */ jsx4("option", { value: "tip", children: "Across the tip" }),
-            /* @__PURE__ */ jsx4("option", { value: "dab", children: "Per dab" })
-          ] })
+      brushTakesPaint(brush) && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", "data-testid": "brush-gradient", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx5("span", { className: "text-slate-400", title: "A gradient of the brush's own, used instead of the paint (the multi-colour brush)", children: "Brush gradient" }),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": brush.paint !== null,
+              className: chip(brush.paint !== null),
+              onClick: () => attempt(() => controller.setBrush({ paint: brush.paint ? null : DEFAULT_PAINT_GRADIENT })),
+              children: brush.paint ? "On" : "Off"
+            }
+          )
         ] }),
-        mc.mode !== "off" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-          /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-1", "aria-label": "Multi-colour colours", children: [
-            mc.colors.map((col, i) => /* @__PURE__ */ jsxs4("span", { className: "flex items-center", children: [
-              /* @__PURE__ */ jsx4("input", { type: "color", "aria-label": `Multi-colour ${i + 1}`, value: col, onChange: (e) => setColors(mc.colors.map((x, j) => j === i ? e.target.value : x)), className: "h-5 w-6 rounded bg-transparent" }),
-              /* @__PURE__ */ jsx4("button", { type: "button", "aria-label": `Remove multi-colour ${i + 1}`, className: "px-0.5 text-slate-500 hover:text-white", onClick: () => setColors(mc.colors.filter((_, j) => j !== i)), children: "\xD7" })
-            ] }, i)),
-            mc.colors.length < 8 && /* @__PURE__ */ jsx4("button", { type: "button", className: button, "aria-label": "Add multi-colour", onClick: () => setColors([...mc.colors.length ? mc.colors : [state.color, state.secondaryColor], state.color].slice(0, 8)), children: "+" }),
-            mc.colors.length < 2 && /* @__PURE__ */ jsx4("span", { className: "text-[10px] text-slate-500", children: "Uses the paint and second colours" })
-          ] }),
-          mc.mode === "dab" && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Order" }),
-            /* @__PURE__ */ jsxs4("select", { "aria-label": "Colour order", value: mc.order, onChange: (e) => controller.setBrush({ behavior: { multicolor: { order: e.target.value } } }), className: "rounded bg-slate-800 px-1 py-0.5", children: [
-              /* @__PURE__ */ jsx4("option", { value: "sequence", children: "In order" }),
-              /* @__PURE__ */ jsx4("option", { value: "random", children: "Random" })
-            ] })
-          ] }),
-          multiColorSliders(mc.mode).map((c) => /* @__PURE__ */ jsx4(PaintSlider, { control: c, value: readPath(brush, c.path), onChange: (v) => controller.setBrush(patchPath(brush, c.path, v)) }, c.path))
-        ] })
+        brush.paint && /* @__PURE__ */ jsx5(PaintGradientEditor, { value: brush.paint, colors: { paint: state.color, secondary: state.secondaryColor }, onChange: (g) => attempt(() => controller.setBrush({ paint: g })) })
       ] }),
       engine.load && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Carries" }),
-        /* @__PURE__ */ jsx4("span", { "aria-label": "Brush load", title: carried ?? "Clean", className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: carried ?? "transparent" } }),
-        brush.engine === "mixer" && /* @__PURE__ */ jsx4("button", { type: "button", className: button, onClick: () => controller.loadMixerBrush(), children: "Load" }),
-        /* @__PURE__ */ jsx4("button", { type: "button", className: button, onClick: () => controller.cleanMixerBrush(brush.engine === "mixer"), children: "Clean" })
+        /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "Carries" }),
+        /* @__PURE__ */ jsx5("span", { "aria-label": "Brush load", title: carried ?? "Clean", className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: carried ?? "transparent" } }),
+        brush.engine === "mixer" && /* @__PURE__ */ jsx5("button", { type: "button", className: button, onClick: () => controller.loadMixerBrush(), children: "Load" }),
+        /* @__PURE__ */ jsx5("button", { type: "button", className: button, onClick: () => controller.cleanMixerBrush(brush.engine === "mixer"), children: "Clean" })
       ] })
     ] }),
     /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-1", children: [
-      /* @__PURE__ */ jsx4("input", { value: saveName, placeholder: "Brush name", "aria-label": "Brush name", onChange: (e) => setSaveName(e.target.value), className: "w-28 rounded bg-slate-800 px-1.5 py-0.5" }),
-      /* @__PURE__ */ jsx4("button", { type: "button", className: button, disabled: !saveName.trim(), onClick: () => attempt(() => (controller.saveBrush({ id: slug(saveName), name: saveName.trim() }), setSaveName(""))), children: "Save brush" }),
-      /* @__PURE__ */ jsx4("button", { type: "button", className: button, onClick: () => attempt(() => downloadBytes2(JSON.stringify(controller.exportBrushes(), null, 2), "brushes.json", "application/json")), children: "Export" }),
-      /* @__PURE__ */ jsx4("button", { type: "button", className: button, onClick: () => fileRef.current?.click(), children: "Import\u2026" }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5("input", { value: saveName, placeholder: "Brush name", "aria-label": "Brush name", onChange: (e) => setSaveName(e.target.value), className: "w-28 rounded bg-slate-800 px-1.5 py-0.5" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", className: button, disabled: !saveName.trim(), onClick: () => attempt(() => (controller.saveBrush({ id: slug(saveName), name: saveName.trim() }), setSaveName(""))), children: "Save brush" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", className: button, onClick: () => attempt(() => downloadBytes2(JSON.stringify(controller.exportBrushes(), null, 2), "brushes.json", "application/json")), children: "Export" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", className: button, onClick: () => fileRef.current?.click(), children: "Import\u2026" }),
+      /* @__PURE__ */ jsx5(
         "input",
         {
           ref: fileRef,
@@ -735,14 +733,14 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
         }
       )
     ] }),
-    /* @__PURE__ */ jsx4(ErrorLine, { error })
+    /* @__PURE__ */ jsx5(ErrorLine, { error })
   ] });
 };
 
 // src/paint-editor/PaperPanel.tsx
 import { useMemo as useMemo4 } from "react";
 import { LIGHT_SLIDERS, PAPER_FAMILIES, PAPER_LIBRARY, PAPER_SLIDERS, patchPath as patchPath2, readPath as readPath2, renderPaper } from "@pixerate/editor/paint-editor";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var SWATCH = { x: 0, y: 0, width: 64, height: 40 };
 var PaperPanel = ({ controller, className }) => {
   const state = usePaintEditorState(controller);
@@ -751,8 +749,8 @@ var PaperPanel = ({ controller, className }) => {
   const previews = useMemo4(() => new Map(PAPER_LIBRARY.map((p) => [p.preset, { ...SWATCH, data: renderPaper({ ...p, shading: Math.max(0.8, p.shading) }, SWATCH) }])), []);
   return /* @__PURE__ */ jsxs5("div", { className: `${panel} ${className ?? ""}`, "data-testid": "paper-panel", children: [
     PAPER_FAMILIES.map((family) => /* @__PURE__ */ jsxs5("div", { children: [
-      /* @__PURE__ */ jsx5("div", { className: "mb-0.5 text-[10px] uppercase tracking-wide text-slate-500", children: family }),
-      /* @__PURE__ */ jsx5("div", { className: "flex flex-wrap gap-1", role: "listbox", "aria-label": `${family} papers`, children: PAPER_LIBRARY.filter((p) => p.family === family).map((p) => /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6("div", { className: "mb-0.5 text-[10px] uppercase tracking-wide text-slate-500", children: family }),
+      /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap gap-1", role: "listbox", "aria-label": `${family} papers`, children: PAPER_LIBRARY.filter((p) => p.family === family).map((p) => /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
@@ -761,28 +759,28 @@ var PaperPanel = ({ controller, className }) => {
           title: p.name,
           className: `rounded p-0.5 ${paper.preset === p.preset ? "ring-2 ring-indigo-500" : "ring-1 ring-slate-700 hover:ring-slate-500"}`,
           onClick: () => attempt(() => controller.setPaper({ preset: p.preset })),
-          children: /* @__PURE__ */ jsx5(PixelCanvas, { pixels: previews.get(p.preset) ?? null, label: p.name, style: { width: 48, height: 30 } })
+          children: /* @__PURE__ */ jsx6(PixelCanvas, { pixels: previews.get(p.preset) ?? null, label: p.name, style: { width: 48, height: 30 } })
         },
         p.preset
       )) })
     ] }, family)),
-    /* @__PURE__ */ jsx5("div", { className: "text-slate-300", children: paper.name }),
+    /* @__PURE__ */ jsx6("div", { className: "text-slate-300", children: paper.name }),
     /* @__PURE__ */ jsxs5("label", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "Colour" }),
-      /* @__PURE__ */ jsx5(CommitColorInput, { label: "Paper colour", value: paper.color, onCommit: (v) => attempt(() => controller.setPaper({ color: v })), className: "h-6 w-10 rounded bg-transparent" })
+      /* @__PURE__ */ jsx6("span", { className: "text-slate-400", children: "Colour" }),
+      /* @__PURE__ */ jsx6(CommitColorInput, { label: "Paper colour", value: paper.color, onCommit: (v) => attempt(() => controller.setPaper({ color: v })), className: "h-6 w-10 rounded bg-transparent" })
     ] }),
-    PAPER_SLIDERS.map((c) => /* @__PURE__ */ jsx5(PaintSlider, { control: c, value: readPath2(paper, c.path), onCommit: (v) => attempt(() => controller.setPaper(patchPath2(paper, c.path, v))) }, c.path)),
+    PAPER_SLIDERS.map((c) => /* @__PURE__ */ jsx6(PaintSlider, { control: c, value: readPath2(paper, c.path), onCommit: (v) => attempt(() => controller.setPaper(patchPath2(paper, c.path, v))) }, c.path)),
     /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: paper.tiling === "mirror", onChange: (e) => attempt(() => controller.setPaper({ tiling: e.target.checked ? "mirror" : "repeat" })) }),
+      /* @__PURE__ */ jsx6("input", { type: "checkbox", checked: paper.tiling === "mirror", onChange: (e) => attempt(() => controller.setPaper({ tiling: e.target.checked ? "mirror" : "repeat" })) }),
       " Mirror tiling"
     ] }),
-    /* @__PURE__ */ jsx5("button", { type: "button", className: "self-start px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700", onClick: () => attempt(() => controller.setPaper({ seed: paper.seed + 1 })), children: "New sheet" }),
+    /* @__PURE__ */ jsx6("button", { type: "button", className: "self-start px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700", onClick: () => attempt(() => controller.setPaper({ seed: paper.seed + 1 })), children: "New sheet" }),
     /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1.5", "data-testid": "light-panel", children: [
-      /* @__PURE__ */ jsx5("span", { className: "font-medium text-slate-300", children: "Light (thick paint, metallic paper)" }),
-      LIGHT_SLIDERS.map((c) => /* @__PURE__ */ jsx5(PaintSlider, { control: c, value: readPath2(controller.getLighting(), c.path), onChange: (v) => attempt(() => controller.setLighting({ [c.path]: v })) }, c.path)),
-      /* @__PURE__ */ jsx5("button", { type: "button", className: "self-start px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700", onClick: () => attempt(() => controller.flattenRelief()), children: "Flatten relief" })
+      /* @__PURE__ */ jsx6("span", { className: "font-medium text-slate-300", children: "Light (thick paint, metallic paper)" }),
+      LIGHT_SLIDERS.map((c) => /* @__PURE__ */ jsx6(PaintSlider, { control: c, value: readPath2(controller.getLighting(), c.path), onChange: (v) => attempt(() => controller.setLighting({ [c.path]: v })) }, c.path)),
+      /* @__PURE__ */ jsx6("button", { type: "button", className: "self-start px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700", onClick: () => attempt(() => controller.flattenRelief()), children: "Flatten relief" })
     ] }),
-    /* @__PURE__ */ jsx5(ErrorLine, { error })
+    /* @__PURE__ */ jsx6(ErrorLine, { error })
   ] });
 };
 
@@ -803,7 +801,8 @@ import {
   wheelPick,
   wheelPoint
 } from "@pixerate/editor/paint-editor";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { DEFAULT_PAINT_GRADIENT as DEFAULT_PAINT_GRADIENT2, paintSourceCss } from "@pixerate/editor/paint-editor";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className }) => {
   const state = usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
@@ -833,7 +832,7 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
   };
   return /* @__PURE__ */ jsxs6("div", { className: `${panel} ${className ?? ""}`, "data-testid": "color-panel", children: [
     /* @__PURE__ */ jsxs6("div", { className: "relative self-center", style: { width: wheelSize, height: wheelSize }, children: [
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "div",
         {
           role: "slider",
@@ -847,20 +846,20 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
             const rect = e.currentTarget.getBoundingClientRect();
             controller.setColor(wheelPick(e.clientX - rect.left - R, e.clientY - rect.top - R, wheel, color));
           },
-          children: /* @__PURE__ */ jsx6(PixelCanvas, { pixels: ring, label: "Colour wheel", style: { width: wheelSize, height: wheelSize } })
+          children: /* @__PURE__ */ jsx7(PixelCanvas, { pixels: ring, label: "Colour wheel", style: { width: wheelSize, height: wheelSize } })
         }
       ),
-      /* @__PURE__ */ jsx6("svg", { className: "pointer-events-none absolute inset-0", width: wheelSize, height: wheelSize, "aria-hidden": "true", children: harmony.map((h, i) => {
+      /* @__PURE__ */ jsx7("svg", { className: "pointer-events-none absolute inset-0", width: wheelSize, height: wheelSize, "aria-hidden": "true", children: harmony.map((h, i) => {
         const p = wheelPoint(h.angle, mid);
-        return /* @__PURE__ */ jsx6("circle", { cx: R + p.x, cy: R + p.y, r: i === 0 ? 7 : 5, fill: h.color, stroke: "#fff", strokeWidth: i === 0 ? 2 : 1 }, i);
+        return /* @__PURE__ */ jsx7("circle", { cx: R + p.x, cy: R + p.y, r: i === 0 ? 7 : 5, fill: h.color, stroke: "#fff", strokeWidth: i === 0 ? 2 : 1 }, i);
       }) }),
-      /* @__PURE__ */ jsx6("div", { className: "absolute rounded-full border border-slate-700", style: { left: R - R * 0.45, top: R - R * 0.45, width: R * 0.9, height: R * 0.9, background: color } })
+      /* @__PURE__ */ jsx7("div", { className: "absolute rounded-full border border-slate-700", style: { left: R - R * 0.45, top: R - R * 0.45, width: R * 0.9, height: R * 0.9, background: color } })
     ] }),
     /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx6("input", { type: "color", "aria-label": "Paint colour", value: color, onChange: (e) => controller.setColor(e.target.value), className: "h-7 w-9 rounded bg-transparent" }),
-      /* @__PURE__ */ jsx6("input", { type: "color", "aria-label": "Second colour", value: state.secondaryColor, onChange: (e) => controller.setSecondaryColor(e.target.value), className: "h-5 w-7 rounded bg-transparent" }),
-      /* @__PURE__ */ jsx6("button", { type: "button", className: button, title: "Swap colours (X)", onClick: () => controller.swapColors(), children: "Swap" }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7("input", { type: "color", "aria-label": "Paint colour", value: color, onChange: (e) => controller.setColor(e.target.value), className: "h-7 w-9 rounded bg-transparent" }),
+      /* @__PURE__ */ jsx7("input", { type: "color", "aria-label": "Second colour", value: state.secondaryColor, onChange: (e) => controller.setSecondaryColor(e.target.value), className: "h-5 w-7 rounded bg-transparent" }),
+      /* @__PURE__ */ jsx7("button", { type: "button", className: button, title: "Swap colours (X)", onClick: () => controller.swapColors(), children: "Swap" }),
+      /* @__PURE__ */ jsx7(
         "input",
         {
           "aria-label": "Hex colour",
@@ -871,35 +870,58 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
         color
       )
     ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", "data-testid": "paint-source", children: [
+      /* @__PURE__ */ jsx7(
+        "span",
+        {
+          className: "h-5 flex-1 rounded ring-1 ring-slate-700",
+          "aria-label": state.paint.type === "gradient" ? "Gradient paint" : "Paint colour",
+          "data-testid": "paint-well",
+          style: { background: paintSourceCss(state.paint, { paint: color, secondary: state.secondaryColor }) }
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          className: chip(state.paint.type === "gradient"),
+          "aria-pressed": state.paint.type === "gradient",
+          title: "Paint that changes colour as the stroke goes",
+          onClick: () => attempt(() => state.paint.type === "gradient" ? controller.setColor(color) : controller.setPaint(DEFAULT_PAINT_GRADIENT2)),
+          children: "Gradient"
+        }
+      )
+    ] }),
+    state.paint.type === "gradient" && /* @__PURE__ */ jsx7(PaintGradientEditor, { value: state.paint, colors: { paint: color, secondary: state.secondaryColor }, onChange: (g2) => attempt(() => controller.setPaint(g2)) }),
     /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx6("span", { className: "w-16 text-slate-400", children: "Saturation" }),
-      /* @__PURE__ */ jsx6("input", { type: "range", "aria-label": "Saturation", min: 0, max: 1, step: 0.01, value: hsv.s, onChange: (e) => setHsv(Number(e.target.value), hsv.v), className: "flex-1 accent-indigo-500" })
+      /* @__PURE__ */ jsx7("span", { className: "w-16 text-slate-400", children: "Saturation" }),
+      /* @__PURE__ */ jsx7("input", { type: "range", "aria-label": "Saturation", min: 0, max: 1, step: 0.01, value: hsv.s, onChange: (e) => setHsv(Number(e.target.value), hsv.v), className: "flex-1 accent-indigo-500" })
     ] }),
     /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx6("span", { className: "w-16 text-slate-400", children: "Value" }),
-      /* @__PURE__ */ jsx6("input", { type: "range", "aria-label": "Value", min: 0, max: 1, step: 0.01, value: hsv.v, onChange: (e) => setHsv(hsv.s, Number(e.target.value)), className: "flex-1 accent-indigo-500" })
+      /* @__PURE__ */ jsx7("span", { className: "w-16 text-slate-400", children: "Value" }),
+      /* @__PURE__ */ jsx7("input", { type: "range", "aria-label": "Value", min: 0, max: 1, step: 0.01, value: hsv.v, onChange: (e) => setHsv(hsv.s, Number(e.target.value)), className: "flex-1 accent-indigo-500" })
     ] }),
     /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx6("select", { "aria-label": "Harmony", value: kind, onChange: (e) => setKind(e.target.value), className: "rounded bg-slate-800 px-1 py-0.5", children: HARMONY_KINDS.map((k) => /* @__PURE__ */ jsx6("option", { value: k, children: k }, k)) }),
-      /* @__PURE__ */ jsx6("button", { type: "button", className: chip(wheel === "ryb"), "aria-pressed": wheel === "ryb", onClick: () => setWheel("ryb"), children: "RYB" }),
-      /* @__PURE__ */ jsx6("button", { type: "button", className: chip(wheel === "rgb"), "aria-pressed": wheel === "rgb", onClick: () => setWheel("rgb"), children: "RGB" })
+      /* @__PURE__ */ jsx7("select", { "aria-label": "Harmony", value: kind, onChange: (e) => setKind(e.target.value), className: "rounded bg-slate-800 px-1 py-0.5", children: HARMONY_KINDS.map((k) => /* @__PURE__ */ jsx7("option", { value: k, children: k }, k)) }),
+      /* @__PURE__ */ jsx7("button", { type: "button", className: chip(wheel === "ryb"), "aria-pressed": wheel === "ryb", onClick: () => setWheel("ryb"), children: "RYB" }),
+      /* @__PURE__ */ jsx7("button", { type: "button", className: chip(wheel === "rgb"), "aria-pressed": wheel === "rgb", onClick: () => setWheel("rgb"), children: "RGB" })
     ] }),
     /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap gap-1", "aria-label": "Harmony colours", children: [
-      harmony.map((h, i) => /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": `Use ${h.color}`, title: h.color, className: "h-6 w-6 rounded ring-1 ring-slate-700", style: { background: h.color }, onClick: () => controller.setColor(h.color) }, i)),
-      /* @__PURE__ */ jsx6("button", { type: "button", className: button, onClick: () => harmony.forEach((h) => controller.addSwatch(h.color)), children: "+ swatches" })
+      harmony.map((h, i) => /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": `Use ${h.color}`, title: h.color, className: "h-6 w-6 rounded ring-1 ring-slate-700", style: { background: h.color }, onClick: () => controller.setColor(h.color) }, i)),
+      /* @__PURE__ */ jsx7("button", { type: "button", className: button, onClick: () => harmony.forEach((h) => controller.addSwatch(h.color)), children: "+ swatches" })
     ] }),
     /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap gap-1", role: "listbox", "aria-label": "Swatches", children: [
-      state.swatches.map((s, i) => /* @__PURE__ */ jsx6(
+      state.swatches.map((s, i) => /* @__PURE__ */ jsx7(
         "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)`,
+          "aria-selected": s.paint ? state.paint === s.paint : state.paint.type === "color" && s.color === color,
+          "aria-label": s.name ?? (s.paint ? "Gradient" : s.color),
+          title: `${s.name ?? (s.paint ? "Gradient" : s.color)} (right-click to remove)`,
           className: "h-5 w-5 rounded ring-1 ring-slate-700",
-          style: { background: s.color },
-          onClick: () => controller.setColor(s.color),
+          style: { background: s.paint ? paintSourceCss(s.paint, { paint: color, secondary: state.secondaryColor }) : s.color },
+          onClick: () => attempt(() => s.paint ? controller.setPaint(s.paint) : controller.setColor(s.color)),
           onContextMenu: (e) => {
             e.preventDefault();
             controller.removeSwatch(i);
@@ -907,15 +929,15 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
         },
         i
       )),
-      /* @__PURE__ */ jsx6("button", { type: "button", className: button, "aria-label": "Add swatch", onClick: () => controller.addSwatch(color), children: "+" })
+      /* @__PURE__ */ jsx7("button", { type: "button", className: button, "aria-label": "Add swatch", onClick: () => attempt(() => controller.addSwatch(state.paint)), children: "+" })
     ] }),
     mixingPad && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1", "data-testid": "mixing-pad", children: [
       /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx6("span", { className: "text-slate-400", children: "Mixing pad" }),
-        ["paint", "knife", "pick"].map((t) => /* @__PURE__ */ jsx6("button", { type: "button", "aria-pressed": padTool === t, className: chip(padTool === t), onClick: () => setPadTool(t), children: t === "paint" ? "Paint" : t === "knife" ? "Knife" : "Pick" }, t)),
-        /* @__PURE__ */ jsx6("button", { type: "button", className: button, onClick: () => controller.clearMixingPad(), children: "Clear" })
+        /* @__PURE__ */ jsx7("span", { className: "text-slate-400", children: "Mixing pad" }),
+        ["paint", "knife", "pick"].map((t) => /* @__PURE__ */ jsx7("button", { type: "button", "aria-pressed": padTool === t, className: chip(padTool === t), onClick: () => setPadTool(t), children: t === "paint" ? "Paint" : t === "knife" ? "Knife" : "Pick" }, t)),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: button, onClick: () => controller.clearMixingPad(), children: "Clear" })
       ] }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "div",
         {
           role: "application",
@@ -936,20 +958,20 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
             padPoints.current = null;
             if (pts?.length) attempt(() => controller.mixingPadStroke(pts, { tool: padTool === "knife" ? "knife" : "paint" }));
           },
-          children: /* @__PURE__ */ jsx6(PixelCanvas, { pixels: pad, label: "Mixing pad pixels", className: "w-full rounded", style: { aspectRatio: `${MIXING_PAD_WIDTH} / ${MIXING_PAD_HEIGHT}` } })
+          children: /* @__PURE__ */ jsx7(PixelCanvas, { pixels: pad, label: "Mixing pad pixels", className: "w-full rounded", style: { aspectRatio: `${MIXING_PAD_WIDTH} / ${MIXING_PAD_HEIGHT}` } })
         }
       ),
-      /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap items-center gap-1", children: /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx6("span", { className: "text-slate-400", children: "Sample" }),
-        /* @__PURE__ */ jsx6("select", { "aria-label": "Pick sample size", value: sample, onChange: (e) => setSample(Number(e.target.value)), className: "rounded bg-slate-800 px-1 py-0.5", children: PAD_SAMPLE_SIZES.map((n) => /* @__PURE__ */ jsx6("option", { value: n, children: n === 1 ? "1 px" : `${n}\xD7${n}` }, n)) })
+      /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap items-center gap-1", children: /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx7("span", { className: "text-slate-400", children: "Sample" }),
+        /* @__PURE__ */ jsx7("select", { "aria-label": "Pick sample size", value: sample, onChange: (e) => setSample(Number(e.target.value)), className: "rounded bg-slate-800 px-1 py-0.5", children: PAD_SAMPLE_SIZES.map((n) => /* @__PURE__ */ jsx7("option", { value: n, children: n === 1 ? "1 px" : `${n}\xD7${n}` }, n)) })
       ] }) }),
       /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-1", children: [
-        /* @__PURE__ */ jsx6("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: color } }),
-        /* @__PURE__ */ jsx6("input", { type: "number", "aria-label": "Paint colour parts", min: 0, max: 20, value: parts[0], onChange: (e) => setParts([Number(e.target.value), parts[1]]), className: "w-10 rounded bg-slate-800 px-1 py-0.5" }),
-        /* @__PURE__ */ jsx6("span", { className: "text-slate-500", children: ":" }),
-        /* @__PURE__ */ jsx6("input", { type: "number", "aria-label": "Second colour parts", min: 0, max: 20, value: parts[1], onChange: (e) => setParts([parts[0], Number(e.target.value)]), className: "w-10 rounded bg-slate-800 px-1 py-0.5" }),
-        /* @__PURE__ */ jsx6("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: state.secondaryColor } }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: color } }),
+        /* @__PURE__ */ jsx7("input", { type: "number", "aria-label": "Paint colour parts", min: 0, max: 20, value: parts[0], onChange: (e) => setParts([Number(e.target.value), parts[1]]), className: "w-10 rounded bg-slate-800 px-1 py-0.5" }),
+        /* @__PURE__ */ jsx7("span", { className: "text-slate-500", children: ":" }),
+        /* @__PURE__ */ jsx7("input", { type: "number", "aria-label": "Second colour parts", min: 0, max: 20, value: parts[1], onChange: (e) => setParts([parts[0], Number(e.target.value)]), className: "w-10 rounded bg-slate-800 px-1 py-0.5" }),
+        /* @__PURE__ */ jsx7("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: state.secondaryColor } }),
+        /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -969,22 +991,22 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
         )
       ] }),
       /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-1", children: [
-        /* @__PURE__ */ jsx6("input", { value: padName, placeholder: "Pad name", "aria-label": "Pad name", onChange: (e) => setPadName(e.target.value), className: "w-24 rounded bg-slate-800 px-1.5 py-0.5" }),
-        /* @__PURE__ */ jsx6("button", { type: "button", className: button, onClick: () => attempt(() => (controller.saveMixingPad(padName || void 0), setPadName(""))), children: "Keep pad" })
+        /* @__PURE__ */ jsx7("input", { value: padName, placeholder: "Pad name", "aria-label": "Pad name", onChange: (e) => setPadName(e.target.value), className: "w-24 rounded bg-slate-800 px-1.5 py-0.5" }),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: button, onClick: () => attempt(() => (controller.saveMixingPad(padName || void 0), setPadName(""))), children: "Keep pad" })
       ] }),
-      state.savedMixingPads.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "flex flex-col gap-0.5", "aria-label": "Kept pads", children: state.savedMixingPads.map((p) => /* @__PURE__ */ jsxs6("li", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx6("button", { type: "button", className: `${button} flex-1 text-left`, onClick: () => attempt(() => controller.loadMixingPad(p.id)), children: p.name }),
-        /* @__PURE__ */ jsx6("button", { type: "button", className: button, "aria-label": `Remove ${p.name}`, onClick: () => attempt(() => controller.removeMixingPad(p.id)), children: "\xD7" })
+      state.savedMixingPads.length > 0 && /* @__PURE__ */ jsx7("ul", { className: "flex flex-col gap-0.5", "aria-label": "Kept pads", children: state.savedMixingPads.map((p) => /* @__PURE__ */ jsxs6("li", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx7("button", { type: "button", className: `${button} flex-1 text-left`, onClick: () => attempt(() => controller.loadMixingPad(p.id)), children: p.name }),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: button, "aria-label": `Remove ${p.name}`, onClick: () => attempt(() => controller.removeMixingPad(p.id)), children: "\xD7" })
       ] }, p.id)) })
     ] }),
-    /* @__PURE__ */ jsx6(ErrorLine, { error })
+    /* @__PURE__ */ jsx7(ErrorLine, { error })
   ] });
 };
 
 // src/paint-editor/PaintLayersPanel.tsx
 import { useState as useState7 } from "react";
 import { BLEND_MENU_GROUPS as BLEND_MENU_GROUPS2 } from "@pixerate/editor/paint-editor";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function siblingIndex(layers, l) {
   const sibs = layers.filter((x) => x.parentId === l.parentId).reverse();
   return { index: sibs.findIndex((x) => x.id === l.id), count: sibs.length };
@@ -1003,15 +1025,15 @@ var PaintLayersPanel = ({ controller, className }) => {
   };
   return /* @__PURE__ */ jsxs7("div", { className: `${panel} ${className ?? ""}`, "data-testid": "paint-layers-panel", children: [
     /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap gap-1", children: [
-      /* @__PURE__ */ jsx7("button", { type: "button", className: button, onClick: () => attempt(() => controller.addLayer()), children: "New layer" }),
-      /* @__PURE__ */ jsx7("button", { type: "button", className: button, onClick: () => attempt(() => controller.addLayer({ type: "group" })), children: "New group" }),
-      /* @__PURE__ */ jsx7("button", { type: "button", className: button, disabled: !active, onClick: () => active && attempt(() => controller.duplicateLayer(active.id)), children: "Duplicate" }),
-      /* @__PURE__ */ jsx7("button", { type: "button", className: button, disabled: !active, "aria-label": "Move layer up", onClick: () => move(1), children: "\u2191" }),
-      /* @__PURE__ */ jsx7("button", { type: "button", className: button, disabled: !active, "aria-label": "Move layer down", onClick: () => move(-1), children: "\u2193" }),
-      /* @__PURE__ */ jsx7("button", { type: "button", className: button, disabled: !active, onClick: () => active && attempt(() => controller.mergeDown(active.id)), children: "Merge down" }),
-      /* @__PURE__ */ jsx7("button", { type: "button", className: button, disabled: !active || layers.length < 2, onClick: () => active && attempt(() => controller.removeLayer(active.id)), children: "Delete" })
+      /* @__PURE__ */ jsx8("button", { type: "button", className: button, onClick: () => attempt(() => controller.addLayer()), children: "New layer" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: button, onClick: () => attempt(() => controller.addLayer({ type: "group" })), children: "New group" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !active, onClick: () => active && attempt(() => controller.duplicateLayer(active.id)), children: "Duplicate" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !active, "aria-label": "Move layer up", onClick: () => move(1), children: "\u2191" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !active, "aria-label": "Move layer down", onClick: () => move(-1), children: "\u2193" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !active, onClick: () => active && attempt(() => controller.mergeDown(active.id)), children: "Merge down" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !active || layers.length < 2, onClick: () => active && attempt(() => controller.removeLayer(active.id)), children: "Delete" })
     ] }),
-    /* @__PURE__ */ jsx7("ul", { role: "tree", "aria-label": "Layers", className: "flex flex-col gap-0.5", children: layers.map((l) => /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx8("ul", { role: "tree", "aria-label": "Layers", className: "flex flex-col gap-0.5", children: layers.map((l) => /* @__PURE__ */ jsxs7(
       "li",
       {
         role: "treeitem",
@@ -1020,7 +1042,7 @@ var PaintLayersPanel = ({ controller, className }) => {
         style: { paddingLeft: 6 + l.depth * 12 },
         onClick: () => controller.setActiveLayer(l.id),
         children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -1033,7 +1055,7 @@ var PaintLayersPanel = ({ controller, className }) => {
               children: l.visible ? "\u25CF" : "\u25CB"
             }
           ),
-          renaming === l.id ? /* @__PURE__ */ jsx7(
+          renaming === l.id ? /* @__PURE__ */ jsx8(
             "input",
             {
               autoFocus: true,
@@ -1054,15 +1076,15 @@ var PaintLayersPanel = ({ controller, className }) => {
             l.type === "group" ? "\u25B8 " : "",
             l.name
           ] }),
-          l.locks.pixels || l.locks.all ? /* @__PURE__ */ jsx7("span", { title: "Locked", children: "\u{1F512}" }) : null
+          l.locks.pixels || l.locks.all ? /* @__PURE__ */ jsx8("span", { title: "Locked", children: "\u{1F512}" }) : null
         ]
       },
       l.id
     )) }),
     active && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1.5", children: [
       /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx7("span", { className: "w-14 text-slate-400", children: "Opacity" }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8("span", { className: "w-14 text-slate-400", children: "Opacity" }),
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "range",
@@ -1077,24 +1099,24 @@ var PaintLayersPanel = ({ controller, className }) => {
         )
       ] }),
       /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx7("span", { className: "w-14 text-slate-400", children: "Blend" }),
+        /* @__PURE__ */ jsx8("span", { className: "w-14 text-slate-400", children: "Blend" }),
         /* @__PURE__ */ jsxs7("select", { "aria-label": "Layer blend", value: active.blend, onChange: (e) => attempt(() => controller.updateLayer(active.id, { blend: e.target.value })), className: "flex-1 rounded bg-slate-800 px-1 py-0.5", children: [
-          active.type === "group" && /* @__PURE__ */ jsx7("option", { value: "pass-through", children: "Pass through" }),
-          BLEND_MENU_GROUPS2.map((g) => /* @__PURE__ */ jsx7("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ jsx7("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label))
+          active.type === "group" && /* @__PURE__ */ jsx8("option", { value: "pass-through", children: "Pass through" }),
+          BLEND_MENU_GROUPS2.map((g) => /* @__PURE__ */ jsx8("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ jsx8("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label))
         ] })
       ] }),
       /* @__PURE__ */ jsxs7("div", { className: "flex gap-1", children: [
-        ["pixels", "transparency"].map((k) => /* @__PURE__ */ jsx7("button", { type: "button", "aria-pressed": Boolean(active.locks[k]), className: chip(Boolean(active.locks[k])), onClick: () => attempt(() => controller.updateLayer(active.id, { locks: { [k]: !active.locks[k] } })), children: k === "pixels" ? "Lock pixels" : "Lock transparency" }, k)),
-        /* @__PURE__ */ jsx7("button", { type: "button", "aria-pressed": active.clipped, className: chip(active.clipped), onClick: () => attempt(() => controller.updateLayer(active.id, { clipped: !active.clipped })), children: "Clip" })
+        ["pixels", "transparency"].map((k) => /* @__PURE__ */ jsx8("button", { type: "button", "aria-pressed": Boolean(active.locks[k]), className: chip(Boolean(active.locks[k])), onClick: () => attempt(() => controller.updateLayer(active.id, { locks: { [k]: !active.locks[k] } })), children: k === "pixels" ? "Lock pixels" : "Lock transparency" }, k)),
+        /* @__PURE__ */ jsx8("button", { type: "button", "aria-pressed": active.clipped, className: chip(active.clipped), onClick: () => attempt(() => controller.updateLayer(active.id, { clipped: !active.clipped })), children: "Clip" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx7(ErrorLine, { error })
+    /* @__PURE__ */ jsx8(ErrorLine, { error })
   ] });
 };
 
 // src/paint-editor/WetPanel.tsx
-import { WET_FLOW_KINDS, WET_PARAM_SLIDERS, WET_SPEED_SLIDER, WET_TILT_SLIDERS, readPath as readPath3 } from "@pixerate/editor/paint-editor";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { WET_FLOW_KINDS, WET_GPU_OPTIONS, WET_PARAM_SLIDERS, WET_SPEED_SLIDER, WET_TILT_SLIDERS, readPath as readPath3, wetEngineSummary } from "@pixerate/editor/paint-editor";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var FLOW_LABELS = { none: "None", linear: "One way", swirl: "Swirl", radial: "Outwards", turbulent: "Eddies" };
 var WetPanel = ({ controller, className }) => {
   const state = usePaintEditorState(controller);
@@ -1105,29 +1127,29 @@ var WetPanel = ({ controller, className }) => {
   const backend = controller.wetState();
   return /* @__PURE__ */ jsxs8("div", { className: `${panel} ${className ?? ""}`, "data-testid": "wet-panel", children: [
     /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx8("span", { className: wet.wet ? "text-sky-300" : "text-slate-400", "data-testid": "wet-status", children: wet.wet ? wet.paused ? "Wet (paused)" : "Wet" : "Dry" }),
+      /* @__PURE__ */ jsx9("span", { className: wet.wet ? "text-sky-300" : "text-slate-400", "data-testid": "wet-status", children: wet.wet ? wet.paused ? "Wet (paused)" : "Wet" : "Dry" }),
       /* @__PURE__ */ jsxs8("span", { className: "text-[10px] text-slate-500", children: [
         "step ",
         wet.clock
       ] })
     ] }),
     /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap gap-1", children: [
-      /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !wet.layerIds.length, onClick: () => attempt(async () => (await controller.wetIdle(), controller.dryPaint())), children: "Dry now" }),
-      /* @__PURE__ */ jsx8("button", { type: "button", className: chip(wet.paused), "aria-pressed": wet.paused, onClick: () => controller.setWetPaused(!wet.paused), children: wet.paused ? "Resume" : "Pause" }),
-      /* @__PURE__ */ jsx8("button", { type: "button", className: chip(wet.overlay), "aria-pressed": wet.overlay, onClick: () => controller.setWaterOverlay(!wet.overlay), children: "Water" }),
-      /* @__PURE__ */ jsx8("button", { type: "button", className: chip(wet.instantDry), "aria-pressed": wet.instantDry, title: "Each wet stroke dries as soon as it ends", onClick: () => controller.setInstantDry(!wet.instantDry), children: "Instant dry" }),
-      /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !layerId, onClick: () => attempt(async () => (await controller.wetIdle(), controller.wetPaper({}))), children: "Wet paper" })
+      /* @__PURE__ */ jsx9("button", { type: "button", className: button, disabled: !wet.layerIds.length, onClick: () => attempt(async () => (await controller.wetIdle(), controller.dryPaint())), children: "Dry now" }),
+      /* @__PURE__ */ jsx9("button", { type: "button", className: chip(wet.paused), "aria-pressed": wet.paused, onClick: () => controller.setWetPaused(!wet.paused), children: wet.paused ? "Resume" : "Pause" }),
+      /* @__PURE__ */ jsx9("button", { type: "button", className: chip(wet.overlay), "aria-pressed": wet.overlay, onClick: () => controller.setWaterOverlay(!wet.overlay), children: "Water" }),
+      /* @__PURE__ */ jsx9("button", { type: "button", className: chip(wet.instantDry), "aria-pressed": wet.instantDry, title: "Each wet stroke dries as soon as it ends", onClick: () => controller.setInstantDry(!wet.instantDry), children: "Instant dry" }),
+      /* @__PURE__ */ jsx9("button", { type: "button", className: button, disabled: !layerId, onClick: () => attempt(async () => (await controller.wetIdle(), controller.wetPaper({}))), children: "Wet paper" })
     ] }),
-    /* @__PURE__ */ jsx8(PaintSlider, { control: WET_SPEED_SLIDER, value: wet.speed, onChange: (v) => controller.setWetSpeed(v) }),
-    WET_TILT_SLIDERS.map((c) => /* @__PURE__ */ jsx8(PaintSlider, { control: c, value: readPath3(wet.tilt, c.path), onCommit: (v) => attempt(async () => (await controller.wetIdle(), controller.setCanvasTilt({ [c.path]: v }))) }, c.path)),
+    /* @__PURE__ */ jsx9(PaintSlider, { control: WET_SPEED_SLIDER, value: wet.speed, onChange: (v) => controller.setWetSpeed(v) }),
+    WET_TILT_SLIDERS.map((c) => /* @__PURE__ */ jsx9(PaintSlider, { control: c, value: readPath3(wet.tilt, c.path), onCommit: (v) => attempt(async () => (await controller.wetIdle(), controller.setCanvasTilt({ [c.path]: v }))) }, c.path)),
     info && /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-1.5", "data-testid": "wet-layer", children: [
-      /* @__PURE__ */ jsx8("span", { className: "font-medium text-slate-300", children: "This layer" }),
-      WET_PARAM_SLIDERS.map((c) => /* @__PURE__ */ jsx8(PaintSlider, { control: c, value: readPath3(info.params, c.path), onCommit: (v) => attempt(async () => (await controller.wetIdle(), controller.setWetParams(layerId, { [c.path]: v }))) }, c.path)),
+      /* @__PURE__ */ jsx9("span", { className: "font-medium text-slate-300", children: "This layer" }),
+      WET_PARAM_SLIDERS.map((c) => /* @__PURE__ */ jsx9(PaintSlider, { control: c, value: readPath3(info.params, c.path), onCommit: (v) => attempt(async () => (await controller.wetIdle(), controller.setWetParams(layerId, { [c.path]: v }))) }, c.path)),
       /* @__PURE__ */ jsxs8("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx8("span", { className: "text-slate-400", children: "Flow map" }),
-        /* @__PURE__ */ jsx8("select", { "aria-label": "Flow map", value: info.flow.kind, onChange: (e) => attempt(async () => (await controller.wetIdle(), controller.setFlowMap(layerId, { kind: e.target.value }))), className: "rounded bg-slate-800 px-1 py-0.5", children: WET_FLOW_KINDS.map((k) => /* @__PURE__ */ jsx8("option", { value: k, children: FLOW_LABELS[k] }, k)) })
+        /* @__PURE__ */ jsx9("span", { className: "text-slate-400", children: "Flow map" }),
+        /* @__PURE__ */ jsx9("select", { "aria-label": "Flow map", value: info.flow.kind, onChange: (e) => attempt(async () => (await controller.wetIdle(), controller.setFlowMap(layerId, { kind: e.target.value }))), className: "rounded bg-slate-800 px-1 py-0.5", children: WET_FLOW_KINDS.map((k) => /* @__PURE__ */ jsx9("option", { value: k, children: FLOW_LABELS[k] }, k)) })
       ] }),
-      info.flow.kind !== "none" && /* @__PURE__ */ jsx8(
+      info.flow.kind !== "none" && /* @__PURE__ */ jsx9(
         PaintSlider,
         {
           control: { path: "strength", label: "Flow strength", min: 0, max: 1, step: 0.01 },
@@ -1136,16 +1158,21 @@ var WetPanel = ({ controller, className }) => {
         }
       )
     ] }),
-    backend.message && /* @__PURE__ */ jsx8("p", { className: "text-[10px] text-amber-300", "data-testid": "wet-message", children: backend.message }),
-    backend.backend && /* @__PURE__ */ jsx8("p", { className: "text-[10px] text-slate-500", children: backend.backend.kind === "wasm-threads" ? `WebAssembly, ${backend.backend.threads} threads` : backend.backend.kind === "wasm" ? "WebAssembly, one thread" : "JavaScript" }),
-    /* @__PURE__ */ jsx8(ErrorLine, { error })
+    backend.message && /* @__PURE__ */ jsx9("p", { className: "text-[10px] text-amber-300", "data-testid": "wet-message", children: backend.message }),
+    backend.backend && /* @__PURE__ */ jsx9("p", { className: "text-[10px] text-slate-500", children: backend.backend.kind === "wasm-threads" ? `WebAssembly, ${backend.backend.threads} threads` : backend.backend.kind === "wasm" ? "WebAssembly, one thread" : "JavaScript" }),
+    /* @__PURE__ */ jsxs8("label", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx9("span", { className: "text-slate-400", children: "Engine" }),
+      /* @__PURE__ */ jsx9("select", { "aria-label": "Wet engine", value: wet.gpu, onChange: (e) => attempt(() => controller.setWetEngine({ gpu: e.target.value })), className: "rounded bg-slate-800 px-1 py-0.5", children: WET_GPU_OPTIONS.map((o) => /* @__PURE__ */ jsx9("option", { value: o.value, children: o.label }, o.value)) })
+    ] }),
+    /* @__PURE__ */ jsx9("p", { className: `text-[10px] ${backend.engine.state === "active" ? "text-emerald-300" : "text-slate-500"}`, "data-testid": "wet-engine", children: wetEngineSummary(backend.engine) }),
+    /* @__PURE__ */ jsx9(ErrorLine, { error })
   ] });
 };
 
 // src/paint-editor/StickerPanel.tsx
 import { useState as useState8 } from "react";
 import { STAMP_KINDS as STAMP_KINDS2, STAMP_LABELS as STAMP_LABELS2, STICKER_SLIDERS, readPath as readPath4 } from "@pixerate/editor/paint-editor";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var StickerPanel = ({ controller, className }) => {
   const state = usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
@@ -1160,49 +1187,49 @@ var StickerPanel = ({ controller, className }) => {
       stickers.length,
       ")"
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "flex max-h-24 flex-wrap gap-1 overflow-y-auto", role: "listbox", "aria-label": "Stickers", children: stickers.map((s) => /* @__PURE__ */ jsx9("button", { type: "button", role: "option", "aria-selected": s.id === picked, title: `${STAMP_LABELS2[s.stamp]} ${s.id}`, className: `h-5 w-5 rounded ring-1 ${s.id === picked ? "ring-indigo-400" : "ring-slate-700"}`, style: { background: s.color }, onClick: () => setPicked(s.id) }, s.id)) }),
+    /* @__PURE__ */ jsx10("div", { className: "flex max-h-24 flex-wrap gap-1 overflow-y-auto", role: "listbox", "aria-label": "Stickers", children: stickers.map((s) => /* @__PURE__ */ jsx10("button", { type: "button", role: "option", "aria-selected": s.id === picked, title: `${STAMP_LABELS2[s.stamp]} ${s.id}`, className: `h-5 w-5 rounded ring-1 ${s.id === picked ? "ring-indigo-400" : "ring-slate-700"}`, style: { background: s.color }, onClick: () => setPicked(s.id) }, s.id)) }),
     sel && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-1.5", "data-testid": "sticker-edit", children: [
       /* @__PURE__ */ jsxs9("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx9("span", { className: "text-slate-400", children: "Stamp" }),
-        /* @__PURE__ */ jsx9("select", { "aria-label": "Sticker stamp", value: sel.stamp, onChange: (e) => attempt(() => controller.updateSticker(layerId, sel.id, { stamp: e.target.value })), className: "rounded bg-slate-800 px-1 py-0.5", children: STAMP_KINDS2.map((k) => /* @__PURE__ */ jsx9("option", { value: k, children: STAMP_LABELS2[k] }, k)) })
+        /* @__PURE__ */ jsx10("span", { className: "text-slate-400", children: "Stamp" }),
+        /* @__PURE__ */ jsx10("select", { "aria-label": "Sticker stamp", value: sel.stamp, onChange: (e) => attempt(() => controller.updateSticker(layerId, sel.id, { stamp: e.target.value })), className: "rounded bg-slate-800 px-1 py-0.5", children: STAMP_KINDS2.map((k) => /* @__PURE__ */ jsx10("option", { value: k, children: STAMP_LABELS2[k] }, k)) })
       ] }),
-      STICKER_SLIDERS.map((c) => /* @__PURE__ */ jsx9(PaintSlider, { control: c, value: readPath4(sel, c.path), onCommit: (v) => attempt(() => controller.updateSticker(layerId, sel.id, { [c.path]: v })) }, c.path)),
+      STICKER_SLIDERS.map((c) => /* @__PURE__ */ jsx10(PaintSlider, { control: c, value: readPath4(sel, c.path), onCommit: (v) => attempt(() => controller.updateSticker(layerId, sel.id, { [c.path]: v })) }, c.path)),
       /* @__PURE__ */ jsxs9("label", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx9("span", { className: "text-slate-400", children: "Colour" }),
-        /* @__PURE__ */ jsx9(CommitColorInput, { label: "Sticker colour", value: sel.color, onCommit: (v) => attempt(() => controller.updateSticker(layerId, sel.id, { color: v })), className: "h-6 w-10 rounded bg-transparent" })
+        /* @__PURE__ */ jsx10("span", { className: "text-slate-400", children: "Colour" }),
+        /* @__PURE__ */ jsx10(CommitColorInput, { label: "Sticker colour", value: sel.color, onCommit: (v) => attempt(() => controller.updateSticker(layerId, sel.id, { color: v })), className: "h-6 w-10 rounded bg-transparent" })
       ] }),
       /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap gap-1", children: [
-        /* @__PURE__ */ jsx9("button", { type: "button", className: button, onClick: () => attempt(() => controller.arrangeStickers(layerId, [sel.id], "front")), children: "To front" }),
-        /* @__PURE__ */ jsx9("button", { type: "button", className: button, onClick: () => attempt(() => controller.arrangeStickers(layerId, [sel.id], "back")), children: "To back" }),
-        /* @__PURE__ */ jsx9("button", { type: "button", className: button, onClick: () => attempt(() => (controller.removeStickers(layerId, [sel.id]), setPicked(null))), children: "Delete" })
+        /* @__PURE__ */ jsx10("button", { type: "button", className: button, onClick: () => attempt(() => controller.arrangeStickers(layerId, [sel.id], "front")), children: "To front" }),
+        /* @__PURE__ */ jsx10("button", { type: "button", className: button, onClick: () => attempt(() => controller.arrangeStickers(layerId, [sel.id], "back")), children: "To back" }),
+        /* @__PURE__ */ jsx10("button", { type: "button", className: button, onClick: () => attempt(() => (controller.removeStickers(layerId, [sel.id]), setPicked(null))), children: "Delete" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx9(ErrorLine, { error })
+    /* @__PURE__ */ jsx10(ErrorLine, { error })
   ] });
 };
 
 // src/paint-editor/PaintEditor.tsx
 import { useState as useState9 } from "react";
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var PaintEditor = ({ controller, fileName, height = 720, presence, className }) => {
   const [tool, setTool] = useState9("brush");
   const [tab, setTab] = useState9("color");
   const [error, setError] = useState9(null);
   return /* @__PURE__ */ jsxs10("div", { className: `flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-900 p-2 ${className ?? ""}`, style: { height }, "data-testid": "paint-editor", children: [
-    /* @__PURE__ */ jsx10(PaintToolbar, { controller, tool, onToolChange: setTool, fileName }),
+    /* @__PURE__ */ jsx11(PaintToolbar, { controller, tool, onToolChange: setTool, fileName }),
     /* @__PURE__ */ jsxs10("div", { className: "flex min-h-0 flex-1 gap-2", children: [
-      /* @__PURE__ */ jsx10(BrushPanel, { controller, className: "w-60 shrink-0 overflow-y-auto pr-1" }),
+      /* @__PURE__ */ jsx11(BrushPanel, { controller, className: "w-60 shrink-0 overflow-y-auto pr-1" }),
       /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx10(PaintCanvas, { controller, tool, onError: setError, presence, className: "flex-1 rounded-lg" }),
-        error && /* @__PURE__ */ jsx10("p", { role: "alert", className: "mt-1 text-[11px] text-rose-400", children: error })
+        /* @__PURE__ */ jsx11(PaintCanvas, { controller, tool, onError: setError, presence, className: "flex-1 rounded-lg" }),
+        error && /* @__PURE__ */ jsx11("p", { role: "alert", className: "mt-1 text-[11px] text-rose-400", children: error })
       ] }),
       /* @__PURE__ */ jsxs10("div", { className: "flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1", children: [
-        /* @__PURE__ */ jsx10("div", { className: "flex gap-1", role: "tablist", "aria-label": "Paint panels", children: ["color", "wet", "paper", "layers"].map((t) => /* @__PURE__ */ jsx10("button", { type: "button", role: "tab", "aria-selected": tab === t, className: chip(tab === t), onClick: () => setTab(t), children: t === "color" ? "Colour" : t === "wet" ? "Wet" : t === "paper" ? "Paper" : "Layers" }, t)) }),
-        tab === "color" && /* @__PURE__ */ jsx10(ColorPanel, { controller }),
-        tab === "wet" && /* @__PURE__ */ jsx10(WetPanel, { controller }),
-        tab === "paper" && /* @__PURE__ */ jsx10(PaperPanel, { controller }),
-        tab === "layers" && /* @__PURE__ */ jsx10(PaintLayersPanel, { controller }),
-        tab === "layers" && /* @__PURE__ */ jsx10(StickerPanel, { controller })
+        /* @__PURE__ */ jsx11("div", { className: "flex gap-1", role: "tablist", "aria-label": "Paint panels", children: ["color", "wet", "paper", "layers"].map((t) => /* @__PURE__ */ jsx11("button", { type: "button", role: "tab", "aria-selected": tab === t, className: chip(tab === t), onClick: () => setTab(t), children: t === "color" ? "Colour" : t === "wet" ? "Wet" : t === "paper" ? "Paper" : "Layers" }, t)) }),
+        tab === "color" && /* @__PURE__ */ jsx11(ColorPanel, { controller }),
+        tab === "wet" && /* @__PURE__ */ jsx11(WetPanel, { controller }),
+        tab === "paper" && /* @__PURE__ */ jsx11(PaperPanel, { controller }),
+        tab === "layers" && /* @__PURE__ */ jsx11(PaintLayersPanel, { controller }),
+        tab === "layers" && /* @__PURE__ */ jsx11(StickerPanel, { controller })
       ] })
     ] })
   ] });
@@ -1212,6 +1239,7 @@ export {
   ColorPanel,
   PaintCanvas,
   PaintEditor,
+  PaintGradientEditor,
   PaintLayersPanel,
   PaintPresenceLayer,
   PaintSlider,