@pixerate/editor-react 0.76.0 → 0.77.0

package/dist/paint-editor/index.cjs

@@ -24,6 +24,7 @@ __export(paint_editor_exports, {
   ColorPanel: () => ColorPanel,
   PaintCanvas: () => PaintCanvas,
   PaintEditor: () => PaintEditor,
+  PaintGradientEditor: () => PaintGradientEditor,
   PaintLayersPanel: () => PaintLayersPanel,
   PaintPresenceLayer: () => PaintPresenceLayer,
   PaintSlider: () => PaintSlider,
@@ -571,29 +572,159 @@ var PaintToolbar = ({ controller, tool, onToolChange, fileName = "painting", cla
 };
 
 // src/paint-editor/BrushPanel.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
+var import_paint_editor5 = require("@pixerate/editor/paint-editor");
+var import_paint_editor6 = require("@pixerate/editor/paint-editor");
+
+// src/paint-editor/PaintGradientEditor.tsx
 var import_paint_editor4 = require("@pixerate/editor/paint-editor");
+
+// src/paint-editor/PaintGradientEditorView.tsx
+var import_react5 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var button2 = "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700 disabled:opacity-40";
+var select = "rounded bg-slate-800 px-1 py-0.5 text-[11px]";
+var number = "w-16 rounded bg-slate-800 px-1 py-0.5 text-[11px]";
+var pct = (v) => Math.round(v * 1e3) / 10;
+var PaintGradientEditorView = ({ value, onChange, colors, className, kit }) => {
+  const {
+    PAINT_GRADIENT_MAPPINGS,
+    PAINT_GRADIENT_MAPPING_LABELS,
+    PAINT_GRADIENT_PRESETS,
+    PAINT_GRADIENT_REPEATS,
+    PAINT_GRADIENT_REPEAT_LABELS,
+    PAINT_GRADIENT_SPACES,
+    PAINT_GRADIENT_SPACE_LABELS,
+    addPaintGradientStop,
+    paintGradientMappingFor,
+    paintSourceCss: paintSourceCss2,
+    removePaintGradientStop,
+    reversePaintGradient,
+    updatePaintGradientStop
+  } = kit;
+  const [selected, setSelected] = (0, import_react5.useState)(0);
+  const sel = Math.min(selected, value.stops.length - 1);
+  const stop = value.stops[sel];
+  const map = value.map;
+  const stopHex = (c) => c === "paint" ? colors.paint : c === "secondary" ? colors.secondary : c;
+  const patchStop = (patch) => {
+    const r = updatePaintGradientStop(value, sel, patch);
+    setSelected(r.index);
+    onChange(r.paint);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `flex flex-col gap-1.5 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "paint-gradient-editor", "aria-label": "Gradient paint", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("select", { "aria-label": "Gradient preset", className: select, value: "", onChange: (e) => e.target.value && (setSelected(0), onChange(PAINT_GRADIENT_PRESETS[Number(e.target.value)].paint)), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "", children: "Presets\u2026" }),
+        PAINT_GRADIENT_PRESETS.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: i, children: p.name }, p.name))
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: button2, onClick: () => onChange(reversePaintGradient(value)), children: "Reverse" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": "Gradient ramp: click to add a stop",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": pct(stop.offset),
+        "data-testid": "paint-gradient-ramp",
+        className: "relative h-6 cursor-copy rounded ring-1 ring-slate-700",
+        style: { background: paintSourceCss2(value, colors) },
+        onClick: (e) => {
+          const rect = e.currentTarget.getBoundingClientRect();
+          const r = addPaintGradientStop(value, rect.width ? (e.clientX - rect.left) / rect.width : 0.5, colors);
+          if (r.index >= 0) {
+            setSelected(r.index);
+            onChange(r.paint);
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "relative h-4", "aria-label": "Stops", children: value.stops.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Stop ${i + 1} at ${pct(s.offset)}%`,
+        "aria-pressed": i === sel,
+        className: `absolute top-0 h-4 w-3 -translate-x-1/2 rounded-sm ring-1 ${i === sel ? "ring-white" : "ring-slate-600"}`,
+        style: { left: `${s.offset * 100}%`, background: stopHex(s.color) },
+        onClick: () => setSelected(i)
+      },
+      i
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap items-center gap-1", "data-testid": "paint-gradient-stop", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("select", { "aria-label": "Stop colour source", className: select, value: stop.color === "paint" || stop.color === "secondary" ? stop.color : "color", onChange: (e) => patchStop({ color: e.target.value === "color" ? stopHex(stop.color) : e.target.value }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "color", children: "Colour" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "paint", children: "Paint colour" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "secondary", children: "Second colour" })
+      ] }),
+      stop.color !== "paint" && stop.color !== "secondary" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "color", "aria-label": "Stop colour", value: stop.color, onChange: (e) => patchStop({ color: e.target.value }), className: "h-6 w-8 rounded bg-transparent" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-1", children: [
+        "At",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "number", "aria-label": "Stop position", min: 0, max: 100, step: 1, value: pct(stop.offset), onChange: (e) => patchStop({ offset: Number(e.target.value) / 100 }), className: number }),
+        "%"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-1", children: [
+        "Opacity",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "number", "aria-label": "Stop opacity", min: 0, max: 100, step: 5, value: pct(stop.opacity ?? 1), onChange: (e) => patchStop({ opacity: Number(e.target.value) / 100 }), className: number }),
+        "%"
+      ] }),
+      sel < value.stops.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-1", children: [
+        "Midpoint",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "number", "aria-label": "Stop midpoint", min: 5, max: 95, step: 1, value: pct(stop.midpoint ?? 0.5), onChange: (e) => patchStop({ midpoint: Number(e.target.value) / 100 }), className: number }),
+        "%"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: button2, disabled: value.stops.length <= 2, onClick: () => (setSelected(Math.max(0, sel - 1)), onChange(removePaintGradientStop(value, sel))), children: "Remove stop" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap items-center gap-1", "data-testid": "paint-gradient-mapping", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": "Gradient follows", className: select, value: map.by, onChange: (e) => onChange({ ...value, map: paintGradientMappingFor(e.target.value, map) }), children: PAINT_GRADIENT_MAPPINGS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: m, children: PAINT_GRADIENT_MAPPING_LABELS[m] }, m)) }),
+      map.by === "distance" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "number", "aria-label": "Gradient length", min: 1, max: 1e5, value: map.length, onChange: (e) => onChange({ ...value, map: { ...map, length: Math.max(1, Number(e.target.value) || 1) } }), className: number }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("select", { "aria-label": "Gradient length unit", className: select, value: map.unit ?? "px", onChange: (e) => onChange({ ...value, map: { ...map, unit: e.target.value } }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "px", children: "px" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "dabs", children: "dabs" })
+        ] })
+      ] }),
+      map.by === "time" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "number", "aria-label": "Gradient duration", min: 1, max: 6e5, value: map.duration, onChange: (e) => onChange({ ...value, map: { ...map, duration: Math.max(1, Number(e.target.value) || 1) } }), className: number }),
+      map.by === "random" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "number", "aria-label": "Dabs per pick", min: 1, max: 500, value: map.every ?? 1, onChange: (e) => onChange({ ...value, map: { ...map, every: Math.max(1, Math.round(Number(e.target.value) || 1)) } }), className: number }),
+      (map.by === "distance" || map.by === "time") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": "Gradient repeat", className: select, value: map.repeat ?? "clamp", onChange: (e) => onChange({ ...value, map: { ...map, repeat: e.target.value } }), children: PAINT_GRADIENT_REPEATS.map((r) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: r, children: PAINT_GRADIENT_REPEAT_LABELS[r] }, r)) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": "Gradient mixing", className: select, value: value.space, onChange: (e) => onChange({ ...value, space: e.target.value }), children: PAINT_GRADIENT_SPACES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: s, children: PAINT_GRADIENT_SPACE_LABELS[s] }, s)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex flex-1 items-center gap-1", children: [
+        "Softness",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "range", "aria-label": "Gradient softness", min: 0, max: 1, step: 0.05, value: value.softness ?? 1, onChange: (e) => onChange({ ...value, softness: Number(e.target.value) }), className: "flex-1 accent-indigo-500" })
+      ] })
+    ] })
+  ] });
+};
+
+// src/paint-editor/PaintGradientEditor.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PaintGradientEditor = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PaintGradientEditorView, { ...props, kit: import_paint_editor4.PAINT_GRADIENT_KIT });
+
+// src/paint-editor/BrushPanel.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, className }) => {
   const state = usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
-  const [saveName, setSaveName] = (0, import_react5.useState)("");
-  const fileRef = (0, import_react5.useRef)(null);
+  const [saveName, setSaveName] = (0, import_react6.useState)("");
+  const fileRef = (0, import_react6.useRef)(null);
   const { brush, brushes } = state;
   const paper = state.document.paper;
-  const thumbs = (0, import_react5.useMemo)(
+  const thumbs = (0, import_react6.useMemo)(
     () => new Map(brushes.map((b) => [b.id, controller.brushThumbnail(b.id, { width: thumbnailWidth, height: thumbnailHeight, color: "#26324a" })])),
     // Thumbnails follow the library and the paper.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [controller, brushes, paper, thumbnailWidth, thumbnailHeight]
   );
-  const engine = (0, import_paint_editor4.brushEngineControls)(brush);
-  const mc = brush.behavior.multicolor;
-  const carried = (0, import_paint_editor4.brushLoadColor)(state.mixerLoad);
-  const setColors = (colors) => controller.setBrush({ behavior: { multicolor: { colors } } });
+  const engine = (0, import_paint_editor5.brushEngineControls)(brush);
+  const carried = (0, import_paint_editor5.brushLoadColor)(state.mixerLoad);
   const slug = (name) => name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60) || "brush";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `${panel} ${className ?? ""}`, "data-testid": "brush-panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "grid grid-cols-2 gap-1", role: "listbox", "aria-label": "Brushes", children: brushes.map((b) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${panel} ${className ?? ""}`, "data-testid": "brush-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "grid grid-cols-2 gap-1", role: "listbox", "aria-label": "Brushes", children: brushes.map((b) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "button",
       {
         type: "button",
@@ -603,128 +734,116 @@ 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__ */ (0, import_jsx_runtime4.jsx)(PixelCanvas, { pixels: thumbs.get(b.id) ?? null, label: `${b.name} thumbnail`, className: "rounded", style: { width: "100%", aspectRatio: `${thumbnailWidth} / ${thumbnailHeight}` } }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-[10px] text-slate-300", children: b.name })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PixelCanvas, { pixels: thumbs.get(b.id) ?? null, label: `${b.name} thumbnail`, className: "rounded", style: { width: "100%", aspectRatio: `${thumbnailWidth} / ${thumbnailHeight}` } }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate text-[10px] text-slate-300", children: b.name })
         ]
       },
       b.id
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-      import_paint_editor4.BRUSH_SLIDERS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor4.readPath)(brush, c.path), onChange: (v) => controller.setBrush((0, import_paint_editor4.patchPath)(brush, c.path, v)) }, c.path)),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Rotation" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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: import_paint_editor4.BRUSH_ROTATIONS.map((r) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: r, children: r === "stroke" ? "Follow stroke" : r === "barrel" ? "Pen barrel" : "Fixed" }, r)) })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+      import_paint_editor5.BRUSH_SLIDERS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor5.readPath)(brush, c.path), onChange: (v) => controller.setBrush((0, import_paint_editor5.patchPath)(brush, c.path, v)) }, c.path)),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400", children: "Rotation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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: import_paint_editor5.BRUSH_ROTATIONS.map((r) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: r, children: r === "stroke" ? "Follow stroke" : r === "barrel" ? "Pen barrel" : "Fixed" }, r)) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", checked: brush.tip.pressureSize, onChange: (e) => controller.setBrush({ tip: { pressureSize: e.target.checked } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", checked: brush.tip.pressureSize, onChange: (e) => controller.setBrush({ tip: { pressureSize: e.target.checked } }) }),
         " Pressure \u2192 size"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", checked: brush.tip.pressureOpacity, onChange: (e) => controller.setBrush({ tip: { pressureOpacity: e.target.checked } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", checked: brush.tip.pressureOpacity, onChange: (e) => controller.setBrush({ tip: { pressureOpacity: e.target.checked } }) }),
         " Pressure \u2192 opacity"
       ] }),
-      brush.engine === "dab" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Blend" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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: import_paint_editor4.BLEND_MENU_GROUPS.map((g) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label)) })
+      brush.engine === "dab" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400", children: "Blend" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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: import_paint_editor5.BLEND_MENU_GROUPS.map((g) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label)) })
       ] })
     ] }),
-    engine && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-1.5", "data-testid": "brush-engine", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-medium text-slate-300", children: engine.title }),
-      engine.wetTool && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Wet tool" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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: import_paint_editor4.WET_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: t, children: import_paint_editor4.WET_TOOL_LABELS[t] }, t)) })
+    engine && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-1.5", "data-testid": "brush-engine", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "font-medium text-slate-300", children: engine.title }),
+      engine.wetTool && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400", children: "Wet tool" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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: import_paint_editor5.WET_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: t, children: import_paint_editor5.WET_TOOL_LABELS[t] }, t)) })
       ] }),
-      engine.wetTool && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Medium" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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: import_paint_editor4.WET_MEDIA.map((m) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: m, children: import_paint_editor4.WET_MEDIUM_LABELS[m] }, m)) })
+      engine.wetTool && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400", children: "Medium" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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: import_paint_editor5.WET_MEDIA.map((m) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: m, children: import_paint_editor5.WET_MEDIUM_LABELS[m] }, m)) })
       ] }),
-      engine.particleMenus && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Particles" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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: import_paint_editor4.PARTICLE_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: k, children: import_paint_editor4.PARTICLE_KIND_LABELS[k] }, k)) })
+      engine.particleMenus && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400", children: "Particles" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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: import_paint_editor5.PARTICLE_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: k, children: import_paint_editor5.PARTICLE_KIND_LABELS[k] }, k)) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Drawn as" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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: import_paint_editor4.PARTICLE_RENDERS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: k, children: import_paint_editor4.PARTICLE_RENDER_LABELS[k] }, k)) })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400", children: "Drawn as" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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: import_paint_editor5.PARTICLE_RENDERS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: k, children: import_paint_editor5.PARTICLE_RENDER_LABELS[k] }, k)) })
         ] })
       ] }),
-      engine.stickerStamps && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "Sticker stamps", children: import_paint_editor4.STAMP_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      engine.stickerStamps && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "Sticker stamps", children: import_paint_editor5.STAMP_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "button",
         {
           type: "button",
           "aria-pressed": brush.sticker.stamps.includes(k),
           className: `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: (0, import_paint_editor4.toggleStamp)(brush.sticker.stamps, k) } }),
-          children: import_paint_editor4.STAMP_LABELS[k]
+          onClick: () => controller.setBrush({ sticker: { stamps: (0, import_paint_editor5.toggleStamp)(brush.sticker.stamps, k) } }),
+          children: import_paint_editor5.STAMP_LABELS[k]
         },
         k
       )) }),
-      engine.impastoTool && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Tool" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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: import_paint_editor4.IMPASTO_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: t, children: import_paint_editor4.IMPASTO_TOOL_LABELS[t] }, t)) })
+      engine.impastoTool && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400", children: "Tool" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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: import_paint_editor5.IMPASTO_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: t, children: import_paint_editor5.IMPASTO_TOOL_LABELS[t] }, t)) })
       ] }),
-      engine.sliders.map((c) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor4.readPath)(brush, c.path), onChange: (v) => controller.setBrush((0, import_paint_editor4.patchPath)(brush, c.path, v)) }, c.path)),
-      engine.mixingPath && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Mixing" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      engine.sliders.map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor5.readPath)(brush, c.path), onChange: (v) => controller.setBrush((0, import_paint_editor5.patchPath)(brush, c.path, v)) }, c.path)),
+      engine.mixingPath && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400", children: "Mixing" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "select",
           {
             "aria-label": "Brush mixing",
             value: engine.mixingPath === "blender.mixing" ? brush.blender.mixing : engine.mixingPath === "smudge.mixing" ? brush.smudge.mixing : brush.behavior.mixing,
-            onChange: (e) => controller.setBrush((0, import_paint_editor4.patchBrushValue)(brush, engine.mixingPath, e.target.value)),
+            onChange: (e) => controller.setBrush((0, import_paint_editor5.patchBrushValue)(brush, engine.mixingPath, e.target.value)),
             className: "rounded bg-slate-800 px-1 py-0.5",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "pigment", children: "Pigment" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "rgb", children: "RGB" })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "pigment", children: "Pigment" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "rgb", children: "RGB" })
             ]
           }
         )
       ] }),
-      engine.dirty && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", "aria-label": "Dirty brush", checked: brush.behavior.dirty, onChange: (e) => controller.setBrush({ behavior: { dirty: e.target.checked } }) }),
+      engine.dirty && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("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__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-1.5", "data-testid": "multicolor", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Multi-colour" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsx)("option", { value: "off", children: "Off" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "tip", children: "Across the tip" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "dab", children: "Per dab" })
-          ] })
+      (0, import_paint_editor5.brushTakesPaint)(brush) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-1.5", "data-testid": "brush-gradient", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": brush.paint !== null,
+              className: chip(brush.paint !== null),
+              onClick: () => attempt(() => controller.setBrush({ paint: brush.paint ? null : import_paint_editor6.DEFAULT_PAINT_GRADIENT })),
+              children: brush.paint ? "On" : "Off"
+            }
+          )
         ] }),
-        mc.mode !== "off" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap items-center gap-1", "aria-label": "Multi-colour colours", children: [
-            mc.colors.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[10px] text-slate-500", children: "Uses the paint and second colours" })
-          ] }),
-          mc.mode === "dab" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Order" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsx)("option", { value: "sequence", children: "In order" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "random", children: "Random" })
-            ] })
-          ] }),
-          (0, import_paint_editor4.multiColorSliders)(mc.mode).map((c) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor4.readPath)(brush, c.path), onChange: (v) => controller.setBrush((0, import_paint_editor4.patchPath)(brush, c.path, v)) }, c.path))
-        ] })
+        brush.paint && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaintGradientEditor, { value: brush.paint, colors: { paint: state.color, secondary: state.secondaryColor }, onChange: (g) => attempt(() => controller.setBrush({ paint: g })) })
       ] }),
-      engine.load && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Carries" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: button, onClick: () => controller.loadMixerBrush(), children: "Load" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: button, onClick: () => controller.cleanMixerBrush(brush.engine === "mixer"), children: "Clean" })
+      engine.load && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400", children: "Carries" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, onClick: () => controller.loadMixerBrush(), children: "Load" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, onClick: () => controller.cleanMixerBrush(brush.engine === "mixer"), children: "Clean" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: button, disabled: !saveName.trim(), onClick: () => attempt(() => (controller.saveBrush({ id: slug(saveName), name: saveName.trim() }), setSaveName(""))), children: "Save brush" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => (0, import_paint_editor4.downloadBytes)(JSON.stringify(controller.exportBrushes(), null, 2), "brushes.json", "application/json")), children: "Export" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: button, onClick: () => fileRef.current?.click(), children: "Import\u2026" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, disabled: !saveName.trim(), onClick: () => attempt(() => (controller.saveBrush({ id: slug(saveName), name: saveName.trim() }), setSaveName(""))), children: "Save brush" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => (0, import_paint_editor5.downloadBytes)(JSON.stringify(controller.exportBrushes(), null, 2), "brushes.json", "application/json")), children: "Export" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, onClick: () => fileRef.current?.click(), children: "Import\u2026" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "input",
         {
           ref: fileRef,
@@ -740,24 +859,24 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorLine, { error })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorLine, { error })
   ] });
 };
 
 // src/paint-editor/PaperPanel.tsx
-var import_react6 = require("react");
-var import_paint_editor5 = require("@pixerate/editor/paint-editor");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_paint_editor7 = require("@pixerate/editor/paint-editor");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var SWATCH = { x: 0, y: 0, width: 64, height: 40 };
 var PaperPanel = ({ controller, className }) => {
   const state = usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
   const paper = state.document.paper;
-  const previews = (0, import_react6.useMemo)(() => new Map(import_paint_editor5.PAPER_LIBRARY.map((p) => [p.preset, { ...SWATCH, data: (0, import_paint_editor5.renderPaper)({ ...p, shading: Math.max(0.8, p.shading) }, SWATCH) }])), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${panel} ${className ?? ""}`, "data-testid": "paper-panel", children: [
-    import_paint_editor5.PAPER_FAMILIES.map((family) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mb-0.5 text-[10px] uppercase tracking-wide text-slate-500", children: family }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-wrap gap-1", role: "listbox", "aria-label": `${family} papers`, children: import_paint_editor5.PAPER_LIBRARY.filter((p) => p.family === family).map((p) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const previews = (0, import_react7.useMemo)(() => new Map(import_paint_editor7.PAPER_LIBRARY.map((p) => [p.preset, { ...SWATCH, data: (0, import_paint_editor7.renderPaper)({ ...p, shading: Math.max(0.8, p.shading) }, SWATCH) }])), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `${panel} ${className ?? ""}`, "data-testid": "paper-panel", children: [
+    import_paint_editor7.PAPER_FAMILIES.map((family) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mb-0.5 text-[10px] uppercase tracking-wide text-slate-500", children: family }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap gap-1", role: "listbox", "aria-label": `${family} papers`, children: import_paint_editor7.PAPER_LIBRARY.filter((p) => p.family === family).map((p) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
@@ -766,92 +885,93 @@ 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__ */ (0, import_jsx_runtime5.jsx)(PixelCanvas, { pixels: previews.get(p.preset) ?? null, label: p.name, style: { width: 48, height: 30 } })
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PixelCanvas, { pixels: previews.get(p.preset) ?? null, label: p.name, style: { width: 48, height: 30 } })
         },
         p.preset
       )) })
     ] }, family)),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-slate-300", children: paper.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-slate-400", children: "Colour" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CommitColorInput, { label: "Paper colour", value: paper.color, onCommit: (v) => attempt(() => controller.setPaper({ color: v })), className: "h-6 w-10 rounded bg-transparent" })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-slate-300", children: paper.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-slate-400", children: "Colour" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CommitColorInput, { label: "Paper colour", value: paper.color, onCommit: (v) => attempt(() => controller.setPaper({ color: v })), className: "h-6 w-10 rounded bg-transparent" })
     ] }),
-    import_paint_editor5.PAPER_SLIDERS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor5.readPath)(paper, c.path), onCommit: (v) => attempt(() => controller.setPaper((0, import_paint_editor5.patchPath)(paper, c.path, v))) }, c.path)),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "checkbox", checked: paper.tiling === "mirror", onChange: (e) => attempt(() => controller.setPaper({ tiling: e.target.checked ? "mirror" : "repeat" })) }),
+    import_paint_editor7.PAPER_SLIDERS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor7.readPath)(paper, c.path), onCommit: (v) => attempt(() => controller.setPaper((0, import_paint_editor7.patchPath)(paper, c.path, v))) }, c.path)),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "checkbox", checked: paper.tiling === "mirror", onChange: (e) => attempt(() => controller.setPaper({ tiling: e.target.checked ? "mirror" : "repeat" })) }),
       " Mirror tiling"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-1.5", "data-testid": "light-panel", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-medium text-slate-300", children: "Light (thick paint, metallic paper)" }),
-      import_paint_editor5.LIGHT_SLIDERS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor5.readPath)(controller.getLighting(), c.path), onChange: (v) => attempt(() => controller.setLighting({ [c.path]: v })) }, c.path)),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1.5", "data-testid": "light-panel", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium text-slate-300", children: "Light (thick paint, metallic paper)" }),
+      import_paint_editor7.LIGHT_SLIDERS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor7.readPath)(controller.getLighting(), c.path), onChange: (v) => attempt(() => controller.setLighting({ [c.path]: v })) }, c.path)),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(ErrorLine, { error })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorLine, { error })
   ] });
 };
 
 // src/paint-editor/ColorPanel.tsx
-var import_react7 = require("react");
-var import_paint_editor6 = require("@pixerate/editor/paint-editor");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_paint_editor8 = require("@pixerate/editor/paint-editor");
+var import_paint_editor9 = require("@pixerate/editor/paint-editor");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className }) => {
   const state = usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
-  const [wheel, setWheel] = (0, import_react7.useState)("ryb");
-  const [kind, setKind] = (0, import_react7.useState)("complementary");
-  const [padTool, setPadTool] = (0, import_react7.useState)("paint");
-  const [sample, setSample] = (0, import_react7.useState)(3);
-  const [parts, setParts] = (0, import_react7.useState)([1, 1]);
-  const [padName, setPadName] = (0, import_react7.useState)("");
-  const padPoints = (0, import_react7.useRef)(null);
-  const ring = (0, import_react7.useMemo)(() => (0, import_paint_editor6.renderColorWheel)(wheelSize, wheel), [wheelSize, wheel]);
+  const [wheel, setWheel] = (0, import_react8.useState)("ryb");
+  const [kind, setKind] = (0, import_react8.useState)("complementary");
+  const [padTool, setPadTool] = (0, import_react8.useState)("paint");
+  const [sample, setSample] = (0, import_react8.useState)(3);
+  const [parts, setParts] = (0, import_react8.useState)([1, 1]);
+  const [padName, setPadName] = (0, import_react8.useState)("");
+  const padPoints = (0, import_react8.useRef)(null);
+  const ring = (0, import_react8.useMemo)(() => (0, import_paint_editor8.renderColorWheel)(wheelSize, wheel), [wheelSize, wheel]);
   const color = state.color;
-  const harmony = (0, import_react7.useMemo)(() => controller.harmony(kind, { color, wheel }), [controller, kind, color, wheel]);
-  const [r, g, b] = (0, import_paint_editor6.parseHexColor)(color);
-  const hsv = (0, import_paint_editor6.rgbToHsv)(r, g, b);
-  const pad = (0, import_react7.useMemo)(() => ({ width: import_paint_editor6.MIXING_PAD_WIDTH, height: import_paint_editor6.MIXING_PAD_HEIGHT, data: controller.mixingPad.pixels() }), [controller, state.mixingPadVersion]);
+  const harmony = (0, import_react8.useMemo)(() => controller.harmony(kind, { color, wheel }), [controller, kind, color, wheel]);
+  const [r, g, b] = (0, import_paint_editor8.parseHexColor)(color);
+  const hsv = (0, import_paint_editor8.rgbToHsv)(r, g, b);
+  const pad = (0, import_react8.useMemo)(() => ({ width: import_paint_editor8.MIXING_PAD_WIDTH, height: import_paint_editor8.MIXING_PAD_HEIGHT, data: controller.mixingPad.pixels() }), [controller, state.mixingPadVersion]);
   const R = wheelSize / 2;
   const mid = R * 0.82;
-  const setHsv = (s, v) => controller.setColor((0, import_paint_editor6.rgbToHexColor)(...(0, import_paint_editor6.hsvToRgb)(hsv.h, s, v)));
+  const setHsv = (s, v) => controller.setColor((0, import_paint_editor8.rgbToHexColor)(...(0, import_paint_editor8.hsvToRgb)(hsv.h, s, v)));
   const padPoint = (e) => {
     const rect = e.currentTarget.getBoundingClientRect();
-    const kx = import_paint_editor6.MIXING_PAD_WIDTH / (rect.width || import_paint_editor6.MIXING_PAD_WIDTH);
-    const ky = import_paint_editor6.MIXING_PAD_HEIGHT / (rect.height || import_paint_editor6.MIXING_PAD_HEIGHT);
-    const x = Math.min(import_paint_editor6.MIXING_PAD_WIDTH, Math.max(0, (e.clientX - rect.left) * kx));
-    const y = Math.min(import_paint_editor6.MIXING_PAD_HEIGHT, Math.max(0, (e.clientY - rect.top) * ky));
+    const kx = import_paint_editor8.MIXING_PAD_WIDTH / (rect.width || import_paint_editor8.MIXING_PAD_WIDTH);
+    const ky = import_paint_editor8.MIXING_PAD_HEIGHT / (rect.height || import_paint_editor8.MIXING_PAD_HEIGHT);
+    const x = Math.min(import_paint_editor8.MIXING_PAD_WIDTH, Math.max(0, (e.clientX - rect.left) * kx));
+    const y = Math.min(import_paint_editor8.MIXING_PAD_HEIGHT, Math.max(0, (e.clientY - rect.top) * ky));
     return e.pointerType === "pen" && e.pressure > 0 ? { x, y, pressure: e.pressure } : { x, y };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${panel} ${className ?? ""}`, "data-testid": "color-panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative self-center", style: { width: wheelSize, height: wheelSize }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `${panel} ${className ?? ""}`, "data-testid": "color-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative self-center", style: { width: wheelSize, height: wheelSize }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
         {
           role: "slider",
           "aria-label": "Hue wheel",
           "aria-valuemin": 0,
           "aria-valuemax": 360,
-          "aria-valuenow": Math.round((0, import_paint_editor6.hueToWheel)(hsv.h, wheel)),
+          "aria-valuenow": Math.round((0, import_paint_editor8.hueToWheel)(hsv.h, wheel)),
           tabIndex: 0,
           className: "absolute inset-0 cursor-crosshair",
           onPointerDown: (e) => {
             const rect = e.currentTarget.getBoundingClientRect();
-            controller.setColor((0, import_paint_editor6.wheelPick)(e.clientX - rect.left - R, e.clientY - rect.top - R, wheel, color));
+            controller.setColor((0, import_paint_editor8.wheelPick)(e.clientX - rect.left - R, e.clientY - rect.top - R, wheel, color));
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PixelCanvas, { pixels: ring, label: "Colour wheel", style: { width: wheelSize, height: wheelSize } })
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PixelCanvas, { pixels: ring, label: "Colour wheel", style: { width: wheelSize, height: wheelSize } })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "pointer-events-none absolute inset-0", width: wheelSize, height: wheelSize, "aria-hidden": "true", children: harmony.map((h, i) => {
-        const p = (0, import_paint_editor6.wheelPoint)(h.angle, mid);
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("svg", { className: "pointer-events-none absolute inset-0", width: wheelSize, height: wheelSize, "aria-hidden": "true", children: harmony.map((h, i) => {
+        const p = (0, import_paint_editor8.wheelPoint)(h.angle, mid);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, title: "Swap colours (X)", onClick: () => controller.swapColors(), children: "Swap" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: button, title: "Swap colours (X)", onClick: () => controller.swapColors(), children: "Swap" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "input",
         {
           "aria-label": "Hex colour",
@@ -862,35 +982,58 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
         color
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16 text-slate-400", children: "Saturation" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", "data-testid": "paint-source", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "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: (0, import_paint_editor9.paintSourceCss)(state.paint, { paint: color, secondary: state.secondaryColor }) }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "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(import_paint_editor9.DEFAULT_PAINT_GRADIENT)),
+          children: "Gradient"
+        }
+      )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16 text-slate-400", children: "Value" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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" })
+    state.paint.type === "gradient" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaintGradientEditor, { value: state.paint, colors: { paint: color, secondary: state.secondaryColor }, onChange: (g2) => attempt(() => controller.setPaint(g2)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-16 text-slate-400", children: "Saturation" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("select", { "aria-label": "Harmony", value: kind, onChange: (e) => setKind(e.target.value), className: "rounded bg-slate-800 px-1 py-0.5", children: import_paint_editor6.HARMONY_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: k, children: k }, k)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: chip(wheel === "ryb"), "aria-pressed": wheel === "ryb", onClick: () => setWheel("ryb"), children: "RYB" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: chip(wheel === "rgb"), "aria-pressed": wheel === "rgb", onClick: () => setWheel("rgb"), children: "RGB" })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-16 text-slate-400", children: "Value" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap gap-1", "aria-label": "Harmony colours", children: [
-      harmony.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, onClick: () => harmony.forEach((h) => controller.addSwatch(h.color)), children: "+ swatches" })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("select", { "aria-label": "Harmony", value: kind, onChange: (e) => setKind(e.target.value), className: "rounded bg-slate-800 px-1 py-0.5", children: import_paint_editor8.HARMONY_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: k, children: k }, k)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: chip(wheel === "ryb"), "aria-pressed": wheel === "ryb", onClick: () => setWheel("ryb"), children: "RYB" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: chip(wheel === "rgb"), "aria-pressed": wheel === "rgb", onClick: () => setWheel("rgb"), children: "RGB" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap gap-1", role: "listbox", "aria-label": "Swatches", children: [
-      state.swatches.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap gap-1", "aria-label": "Harmony colours", children: [
+      harmony.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: button, onClick: () => harmony.forEach((h) => controller.addSwatch(h.color)), children: "+ swatches" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap gap-1", role: "listbox", "aria-label": "Swatches", children: [
+      state.swatches.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "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 ? (0, import_paint_editor9.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);
@@ -898,15 +1041,15 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
         },
         i
       )),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, "aria-label": "Add swatch", onClick: () => controller.addSwatch(color), children: "+" })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: button, "aria-label": "Add swatch", onClick: () => attempt(() => controller.addSwatch(state.paint)), children: "+" })
     ] }),
-    mixingPad && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-1", "data-testid": "mixing-pad", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400", children: "Mixing pad" }),
-        ["paint", "knife", "pick"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "aria-pressed": padTool === t, className: chip(padTool === t), onClick: () => setPadTool(t), children: t === "paint" ? "Paint" : t === "knife" ? "Knife" : "Pick" }, t)),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, onClick: () => controller.clearMixingPad(), children: "Clear" })
+    mixingPad && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-1", "data-testid": "mixing-pad", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-slate-400", children: "Mixing pad" }),
+        ["paint", "knife", "pick"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", "aria-pressed": padTool === t, className: chip(padTool === t), onClick: () => setPadTool(t), children: t === "paint" ? "Paint" : t === "knife" ? "Knife" : "Pick" }, t)),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: button, onClick: () => controller.clearMixingPad(), children: "Clear" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
         {
           role: "application",
@@ -915,7 +1058,7 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
           onPointerDown: (e) => {
             const p = padPoint(e);
             if (padTool === "pick") {
-              attempt(() => controller.mixingPadPick(p.x, p.y, { setColor: true, radius: (0, import_paint_editor6.padSampleRadius)(sample) }));
+              attempt(() => controller.mixingPadPick(p.x, p.y, { setColor: true, radius: (0, import_paint_editor8.padSampleRadius)(sample) }));
               return;
             }
             padPoints.current = [p];
@@ -927,20 +1070,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__ */ (0, import_jsx_runtime6.jsx)(PixelCanvas, { pixels: pad, label: "Mixing pad pixels", className: "w-full rounded", style: { aspectRatio: `${import_paint_editor6.MIXING_PAD_WIDTH} / ${import_paint_editor6.MIXING_PAD_HEIGHT}` } })
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PixelCanvas, { pixels: pad, label: "Mixing pad pixels", className: "w-full rounded", style: { aspectRatio: `${import_paint_editor8.MIXING_PAD_WIDTH} / ${import_paint_editor8.MIXING_PAD_HEIGHT}` } })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap items-center gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400", children: "Sample" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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: import_paint_editor6.PAD_SAMPLE_SIZES.map((n) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: n, children: n === 1 ? "1 px" : `${n}\xD7${n}` }, n)) })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-wrap items-center gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-slate-400", children: "Sample" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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: import_paint_editor8.PAD_SAMPLE_SIZES.map((n) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: n, children: n === 1 ? "1 px" : `${n}\xD7${n}` }, n)) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: color } }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-500", children: ":" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: state.secondaryColor } }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: color } }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-slate-500", children: ":" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: state.secondaryColor } }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "button",
           {
             type: "button",
@@ -959,23 +1102,23 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => (controller.saveMixingPad(padName || void 0), setPadName(""))), children: "Keep pad" })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => (controller.saveMixingPad(padName || void 0), setPadName(""))), children: "Keep pad" })
       ] }),
-      state.savedMixingPads.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "flex flex-col gap-0.5", "aria-label": "Kept pads", children: state.savedMixingPads.map((p) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: `${button} flex-1 text-left`, onClick: () => attempt(() => controller.loadMixingPad(p.id)), children: p.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, "aria-label": `Remove ${p.name}`, onClick: () => attempt(() => controller.removeMixingPad(p.id)), children: "\xD7" })
+      state.savedMixingPads.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "flex flex-col gap-0.5", "aria-label": "Kept pads", children: state.savedMixingPads.map((p) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: `${button} flex-1 text-left`, onClick: () => attempt(() => controller.loadMixingPad(p.id)), children: p.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: button, "aria-label": `Remove ${p.name}`, onClick: () => attempt(() => controller.removeMixingPad(p.id)), children: "\xD7" })
       ] }, p.id)) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorLine, { error })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorLine, { error })
   ] });
 };
 
 // src/paint-editor/PaintLayersPanel.tsx
-var import_react8 = require("react");
-var import_paint_editor7 = require("@pixerate/editor/paint-editor");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_paint_editor10 = require("@pixerate/editor/paint-editor");
+var import_jsx_runtime9 = require("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 };
@@ -983,7 +1126,7 @@ function siblingIndex(layers, l) {
 var PaintLayersPanel = ({ controller, className }) => {
   usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
-  const [renaming, setRenaming] = (0, import_react8.useState)(null);
+  const [renaming, setRenaming] = (0, import_react9.useState)(null);
   const layers = controller.listLayers();
   const active = layers.find((l) => l.active) ?? null;
   const move = (delta) => {
@@ -992,17 +1135,17 @@ var PaintLayersPanel = ({ controller, className }) => {
     const to = Math.min(count - 1, Math.max(0, index + delta));
     if (to !== index) attempt(() => controller.moveLayer(active.id, to));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `${panel} ${className ?? ""}`, "data-testid": "paint-layers-panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => controller.addLayer()), children: "New layer" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => controller.addLayer({ type: "group" })), children: "New group" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: button, disabled: !active, onClick: () => active && attempt(() => controller.duplicateLayer(active.id)), children: "Duplicate" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: button, disabled: !active, "aria-label": "Move layer up", onClick: () => move(1), children: "\u2191" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: button, disabled: !active, "aria-label": "Move layer down", onClick: () => move(-1), children: "\u2193" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: button, disabled: !active, onClick: () => active && attempt(() => controller.mergeDown(active.id)), children: "Merge down" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: button, disabled: !active || layers.length < 2, onClick: () => active && attempt(() => controller.removeLayer(active.id)), children: "Delete" })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${panel} ${className ?? ""}`, "data-testid": "paint-layers-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => controller.addLayer()), children: "New layer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => controller.addLayer({ type: "group" })), children: "New group" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: button, disabled: !active, onClick: () => active && attempt(() => controller.duplicateLayer(active.id)), children: "Duplicate" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: button, disabled: !active, "aria-label": "Move layer up", onClick: () => move(1), children: "\u2191" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: button, disabled: !active, "aria-label": "Move layer down", onClick: () => move(-1), children: "\u2193" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: button, disabled: !active, onClick: () => active && attempt(() => controller.mergeDown(active.id)), children: "Merge down" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: button, disabled: !active || layers.length < 2, onClick: () => active && attempt(() => controller.removeLayer(active.id)), children: "Delete" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { role: "tree", "aria-label": "Layers", className: "flex flex-col gap-0.5", children: layers.map((l) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { role: "tree", "aria-label": "Layers", className: "flex flex-col gap-0.5", children: layers.map((l) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "li",
       {
         role: "treeitem",
@@ -1011,7 +1154,7 @@ var PaintLayersPanel = ({ controller, className }) => {
         style: { paddingLeft: 6 + l.depth * 12 },
         onClick: () => controller.setActiveLayer(l.id),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "button",
             {
               type: "button",
@@ -1024,7 +1167,7 @@ var PaintLayersPanel = ({ controller, className }) => {
               children: l.visible ? "\u25CF" : "\u25CB"
             }
           ),
-          renaming === l.id ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          renaming === l.id ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "input",
             {
               autoFocus: true,
@@ -1041,19 +1184,19 @@ var PaintLayersPanel = ({ controller, className }) => {
                 if (e.key === "Escape") setRenaming(null);
               }
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex-1 truncate", onDoubleClick: () => setRenaming(l.id), children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex-1 truncate", onDoubleClick: () => setRenaming(l.id), children: [
             l.type === "group" ? "\u25B8 " : "",
             l.name
           ] }),
-          l.locks.pixels || l.locks.all ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { title: "Locked", children: "\u{1F512}" }) : null
+          l.locks.pixels || l.locks.all ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { title: "Locked", children: "\u{1F512}" }) : null
         ]
       },
       l.id
     )) }),
-    active && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-14 text-slate-400", children: "Opacity" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    active && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "w-14 text-slate-400", children: "Opacity" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "input",
           {
             type: "range",
@@ -1067,25 +1210,25 @@ var PaintLayersPanel = ({ controller, className }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-14 text-slate-400", children: "Blend" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("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__ */ (0, import_jsx_runtime7.jsx)("option", { value: "pass-through", children: "Pass through" }),
-          import_paint_editor7.BLEND_MENU_GROUPS.map((g) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label))
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "w-14 text-slate-400", children: "Blend" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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__ */ (0, import_jsx_runtime9.jsx)("option", { value: "pass-through", children: "Pass through" }),
+          import_paint_editor10.BLEND_MENU_GROUPS.map((g) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label))
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-1", children: [
-        ["pixels", "transparency"].map((k) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "aria-pressed": active.clipped, className: chip(active.clipped), onClick: () => attempt(() => controller.updateLayer(active.id, { clipped: !active.clipped })), children: "Clip" })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-1", children: [
+        ["pixels", "transparency"].map((k) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", "aria-pressed": active.clipped, className: chip(active.clipped), onClick: () => attempt(() => controller.updateLayer(active.id, { clipped: !active.clipped })), children: "Clip" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorLine, { error })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorLine, { error })
   ] });
 };
 
 // src/paint-editor/WetPanel.tsx
-var import_paint_editor8 = require("@pixerate/editor/paint-editor");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_paint_editor11 = require("@pixerate/editor/paint-editor");
+var import_jsx_runtime10 = require("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);
@@ -1094,31 +1237,31 @@ var WetPanel = ({ controller, className }) => {
   const layerId = state.document.activeLayerId;
   const info = layerId ? controller.wetLayerInfo(layerId) : null;
   const backend = controller.wetState();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `${panel} ${className ?? ""}`, "data-testid": "wet-panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: wet.wet ? "text-sky-300" : "text-slate-400", "data-testid": "wet-status", children: wet.wet ? wet.paused ? "Wet (paused)" : "Wet" : "Dry" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-[10px] text-slate-500", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `${panel} ${className ?? ""}`, "data-testid": "wet-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: wet.wet ? "text-sky-300" : "text-slate-400", "data-testid": "wet-status", children: wet.wet ? wet.paused ? "Wet (paused)" : "Wet" : "Dry" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-[10px] text-slate-500", children: [
         "step ",
         wet.clock
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: button, disabled: !wet.layerIds.length, onClick: () => attempt(async () => (await controller.wetIdle(), controller.dryPaint())), children: "Dry now" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: chip(wet.paused), "aria-pressed": wet.paused, onClick: () => controller.setWetPaused(!wet.paused), children: wet.paused ? "Resume" : "Pause" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: chip(wet.overlay), "aria-pressed": wet.overlay, onClick: () => controller.setWaterOverlay(!wet.overlay), children: "Water" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: button, disabled: !layerId, onClick: () => attempt(async () => (await controller.wetIdle(), controller.wetPaper({}))), children: "Wet paper" })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: button, disabled: !wet.layerIds.length, onClick: () => attempt(async () => (await controller.wetIdle(), controller.dryPaint())), children: "Dry now" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: chip(wet.paused), "aria-pressed": wet.paused, onClick: () => controller.setWetPaused(!wet.paused), children: wet.paused ? "Resume" : "Pause" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: chip(wet.overlay), "aria-pressed": wet.overlay, onClick: () => controller.setWaterOverlay(!wet.overlay), children: "Water" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: button, disabled: !layerId, onClick: () => attempt(async () => (await controller.wetIdle(), controller.wetPaper({}))), children: "Wet paper" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaintSlider, { control: import_paint_editor8.WET_SPEED_SLIDER, value: wet.speed, onChange: (v) => controller.setWetSpeed(v) }),
-    import_paint_editor8.WET_TILT_SLIDERS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor8.readPath)(wet.tilt, c.path), onCommit: (v) => attempt(async () => (await controller.wetIdle(), controller.setCanvasTilt({ [c.path]: v }))) }, c.path)),
-    info && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-1.5", "data-testid": "wet-layer", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "font-medium text-slate-300", children: "This layer" }),
-      import_paint_editor8.WET_PARAM_SLIDERS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor8.readPath)(info.params, c.path), onCommit: (v) => attempt(async () => (await controller.wetIdle(), controller.setWetParams(layerId, { [c.path]: v }))) }, c.path)),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-slate-400", children: "Flow map" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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: import_paint_editor8.WET_FLOW_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: k, children: FLOW_LABELS[k] }, k)) })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaintSlider, { control: import_paint_editor11.WET_SPEED_SLIDER, value: wet.speed, onChange: (v) => controller.setWetSpeed(v) }),
+    import_paint_editor11.WET_TILT_SLIDERS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor11.readPath)(wet.tilt, c.path), onCommit: (v) => attempt(async () => (await controller.wetIdle(), controller.setCanvasTilt({ [c.path]: v }))) }, c.path)),
+    info && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1.5", "data-testid": "wet-layer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-medium text-slate-300", children: "This layer" }),
+      import_paint_editor11.WET_PARAM_SLIDERS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor11.readPath)(info.params, c.path), onCommit: (v) => attempt(async () => (await controller.wetIdle(), controller.setWetParams(layerId, { [c.path]: v }))) }, c.path)),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-slate-400", children: "Flow map" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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: import_paint_editor11.WET_FLOW_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: k, children: FLOW_LABELS[k] }, k)) })
       ] }),
-      info.flow.kind !== "none" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      info.flow.kind !== "none" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         PaintSlider,
         {
           control: { path: "strength", label: "Flow strength", min: 0, max: 1, step: 0.01 },
@@ -1127,73 +1270,78 @@ var WetPanel = ({ controller, className }) => {
         }
       )
     ] }),
-    backend.message && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[10px] text-amber-300", "data-testid": "wet-message", children: backend.message }),
-    backend.backend && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)(ErrorLine, { error })
+    backend.message && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-[10px] text-amber-300", "data-testid": "wet-message", children: backend.message }),
+    backend.backend && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-slate-400", children: "Engine" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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: import_paint_editor11.WET_GPU_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: o.value, children: o.label }, o.value)) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: `text-[10px] ${backend.engine.state === "active" ? "text-emerald-300" : "text-slate-500"}`, "data-testid": "wet-engine", children: (0, import_paint_editor11.wetEngineSummary)(backend.engine) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ErrorLine, { error })
   ] });
 };
 
 // src/paint-editor/StickerPanel.tsx
-var import_react9 = require("react");
-var import_paint_editor9 = require("@pixerate/editor/paint-editor");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_paint_editor12 = require("@pixerate/editor/paint-editor");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var StickerPanel = ({ controller, className }) => {
   const state = usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
-  const [picked, setPicked] = (0, import_react9.useState)(null);
+  const [picked, setPicked] = (0, import_react10.useState)(null);
   const layerId = state.document.activeLayerId;
   const stickers = layerId ? state.document.stickers?.[layerId] ?? [] : [];
   if (!stickers.length) return null;
   const sel = stickers.find((s) => s.id === picked) ?? null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${panel} ${className ?? ""}`, "data-testid": "sticker-panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "font-medium text-slate-300", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${panel} ${className ?? ""}`, "data-testid": "sticker-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "font-medium text-slate-300", children: [
       "Stickers (",
       stickers.length,
       ")"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex max-h-24 flex-wrap gap-1 overflow-y-auto", role: "listbox", "aria-label": "Stickers", children: stickers.map((s) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", role: "option", "aria-selected": s.id === picked, title: `${import_paint_editor9.STAMP_LABELS[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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-1.5", "data-testid": "sticker-edit", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-slate-400", children: "Stamp" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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: import_paint_editor9.STAMP_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: k, children: import_paint_editor9.STAMP_LABELS[k] }, k)) })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex max-h-24 flex-wrap gap-1 overflow-y-auto", role: "listbox", "aria-label": "Stickers", children: stickers.map((s) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", role: "option", "aria-selected": s.id === picked, title: `${import_paint_editor12.STAMP_LABELS[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__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-1.5", "data-testid": "sticker-edit", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-slate-400", children: "Stamp" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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: import_paint_editor12.STAMP_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: k, children: import_paint_editor12.STAMP_LABELS[k] }, k)) })
       ] }),
-      import_paint_editor9.STICKER_SLIDERS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor9.readPath)(sel, c.path), onCommit: (v) => attempt(() => controller.updateSticker(layerId, sel.id, { [c.path]: v })) }, c.path)),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-slate-400", children: "Colour" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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" })
+      import_paint_editor12.STICKER_SLIDERS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor12.readPath)(sel, c.path), onCommit: (v) => attempt(() => controller.updateSticker(layerId, sel.id, { [c.path]: v })) }, c.path)),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-slate-400", children: "Colour" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => controller.arrangeStickers(layerId, [sel.id], "front")), children: "To front" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => controller.arrangeStickers(layerId, [sel.id], "back")), children: "To back" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => (controller.removeStickers(layerId, [sel.id]), setPicked(null))), children: "Delete" })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => controller.arrangeStickers(layerId, [sel.id], "front")), children: "To front" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => controller.arrangeStickers(layerId, [sel.id], "back")), children: "To back" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => (controller.removeStickers(layerId, [sel.id]), setPicked(null))), children: "Delete" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorLine, { error })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ErrorLine, { error })
   ] });
 };
 
 // src/paint-editor/PaintEditor.tsx
-var import_react10 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var PaintEditor = ({ controller, fileName, height = 720, presence, className }) => {
-  const [tool, setTool] = (0, import_react10.useState)("brush");
-  const [tab, setTab] = (0, import_react10.useState)("color");
-  const [error, setError] = (0, import_react10.useState)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("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__ */ (0, import_jsx_runtime10.jsx)(PaintToolbar, { controller, tool, onToolChange: setTool, fileName }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-h-0 flex-1 gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BrushPanel, { controller, className: "w-60 shrink-0 overflow-y-auto pr-1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaintCanvas, { controller, tool, onError: setError, presence, className: "flex-1 rounded-lg" }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { role: "alert", className: "mt-1 text-[11px] text-rose-400", children: error })
+  const [tool, setTool] = (0, import_react11.useState)("brush");
+  const [tab, setTab] = (0, import_react11.useState)("color");
+  const [error, setError] = (0, import_react11.useState)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("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__ */ (0, import_jsx_runtime12.jsx)(PaintToolbar, { controller, tool, onToolChange: setTool, fileName }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex min-h-0 flex-1 gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BrushPanel, { controller, className: "w-60 shrink-0 overflow-y-auto pr-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaintCanvas, { controller, tool, onError: setError, presence, className: "flex-1 rounded-lg" }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { role: "alert", className: "mt-1 text-[11px] text-rose-400", children: error })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex gap-1", role: "tablist", "aria-label": "Paint panels", children: ["color", "wet", "paper", "layers"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsx)(ColorPanel, { controller }),
-        tab === "wet" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(WetPanel, { controller }),
-        tab === "paper" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaperPanel, { controller }),
-        tab === "layers" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaintLayersPanel, { controller }),
-        tab === "layers" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StickerPanel, { controller })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex gap-1", role: "tablist", "aria-label": "Paint panels", children: ["color", "wet", "paper", "layers"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)(ColorPanel, { controller }),
+        tab === "wet" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WetPanel, { controller }),
+        tab === "paper" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaperPanel, { controller }),
+        tab === "layers" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaintLayersPanel, { controller }),
+        tab === "layers" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StickerPanel, { controller })
       ] })
     ] })
   ] });
@@ -1204,6 +1352,7 @@ var PaintEditor = ({ controller, fileName, height = 720, presence, className })
   ColorPanel,
   PaintCanvas,
   PaintEditor,
+  PaintGradientEditor,
   PaintLayersPanel,
   PaintPresenceLayer,
   PaintSlider,