@pixerate/editor-react 0.74.0 → 0.75.0

package/dist/paint-editor/index.cjs

@@ -29,6 +29,8 @@ __export(paint_editor_exports, {
   PaintSlider: () => PaintSlider,
   PaintToolbar: () => PaintToolbar,
   PaperPanel: () => PaperPanel,
+  StickerPanel: () => StickerPanel,
+  WetPanel: () => WetPanel,
   usePaintDirector: () => usePaintDirector,
   usePaintEditor: () => usePaintEditor,
   usePaintEditorState: () => usePaintEditorState
@@ -66,6 +68,7 @@ var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount =
   const state = usePaintEditorState(controller);
   const viewport = (0, import_react2.useRef)(null);
   const canvas = (0, import_react2.useRef)(null);
+  const water = (0, import_react2.useRef)(null);
   const [size, setSize] = (0, import_react2.useState)({ width: 800, height: 600 });
   const measured = (0, import_react2.useRef)(false);
   const [predicted, setPredicted] = (0, import_react2.useState)([]);
@@ -105,6 +108,11 @@ var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount =
     if (ctx && typeof ctx.createImageData === "function") presenter.render(ctx);
     else controller.takeDirty();
   }, [state, presenter, controller]);
+  (0, import_react2.useEffect)(() => (0, import_paint_editor2.startWetClock)(controller), [controller]);
+  (0, import_react2.useEffect)(() => {
+    const ctx = water.current?.getContext("2d");
+    if (ctx && typeof ctx.createImageData === "function") (0, import_paint_editor2.drawWaterOverlay)(controller, ctx);
+  }, [state, controller]);
   (0, import_react2.useEffect)(() => {
     const el = viewport.current;
     if (!el) return;
@@ -159,6 +167,17 @@ var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount =
             style: { transform, transformOrigin: "0 0", imageRendering: state.view.zoom > 2 ? "pixelated" : "auto" }
           }
         ),
+        state.wet.overlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "canvas",
+          {
+            ref: water,
+            width: doc.width,
+            height: doc.height,
+            "data-testid": "paint-water-overlay",
+            className: "absolute left-0 top-0 pointer-events-none opacity-60",
+            style: { transform, transformOrigin: "0 0" }
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "absolute left-0 top-0 pointer-events-none overflow-visible", width: doc.width, height: doc.height, style: { transform, transformOrigin: "0 0" }, "aria-hidden": "true", children: [
           lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "line",
@@ -167,8 +186,8 @@ var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount =
               y1: l.from.y,
               x2: l.to.x,
               y2: l.to.y,
-              stroke: l.kind === "symmetry" ? "#22d3ee" : "#f472b6",
-              strokeOpacity: l.kind === "symmetry" ? 0.8 : 0.35,
+              stroke: l.kind === "symmetry" ? "#22d3ee" : l.kind === "stencil" ? "#fbbf24" : "#f472b6",
+              strokeOpacity: l.kind === "symmetry" || l.kind === "stencil" ? 0.8 : 0.35,
               strokeWidth: 1 / state.view.zoom,
               strokeDasharray: l.kind === "symmetry" ? `${6 / state.view.zoom} ${4 / state.view.zoom}` : void 0
             },
@@ -352,6 +371,8 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var PaintToolbar = ({ controller, tool, onToolChange, fileName = "painting", className }) => {
   const state = usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
+  const [busy, setBusy] = (0, import_react4.useState)(null);
+  const [note, setNote] = (0, import_react4.useState)(null);
   const openRef = (0, import_react4.useRef)(null);
   const tracingRef = (0, import_react4.useRef)(null);
   const refRef = (0, import_react4.useRef)(null);
@@ -448,6 +469,12 @@ var PaintToolbar = ({ controller, tool, onToolChange, fileName = "painting", cla
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, onClick: () => controller.clearTracingImage(), children: "Remove tracing" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, onClick: () => refRef.current?.click(), children: "Reference\u2026" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "flex items-center gap-1", role: "group", "aria-label": "Stencils", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, title: "A ruler: strokes that start near it follow it", onClick: () => attempt(() => controller.addStencil((0, import_paint_editor3.quickStencil)("ruler", canvas))), children: "Ruler" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, title: "A circle guide: strokes that start near it follow it", onClick: () => attempt(() => controller.addStencil((0, import_paint_editor3.quickStencil)("circle", canvas))), children: "Circle" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, title: "An ellipse mask: paint lands only inside it", onClick: () => attempt(() => controller.addStencil((0, import_paint_editor3.quickStencil)("ellipse-mask", canvas))), children: "Mask" }),
+      state.guides.stencils.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => controller.removeStencils()), children: "Clear stencils" })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, title: "Which hand holds the pen (palm rejection)", onClick: () => controller.setHand(state.hand === "right" ? "left" : "right"), children: state.hand === "right" ? "Right-handed" : "Left-handed" }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-1 h-4 w-px bg-slate-700" }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => (0, import_paint_editor3.downloadBytes)(JSON.stringify(controller.toJSON()), `${fileName}.paint.json`, "application/json")), children: "Save" }),
@@ -455,6 +482,45 @@ var PaintToolbar = ({ controller, tool, onToolChange, fileName = "painting", cla
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, onClick: () => exportImage("image/png"), children: "PNG" }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, onClick: () => exportImage("image/jpeg"), children: "JPEG" }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => (0, import_paint_editor3.downloadBytes)(controller.exportPsd().bytes, `${fileName}.psd`, "image/vnd.adobe.photoshop")), children: "PSD" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        type: "button",
+        className: button,
+        disabled: busy !== null,
+        title: "Repaint the painting from its strokes as a time-lapse: frames, a video project and the ffmpeg command, zipped",
+        onClick: () => attempt(async () => {
+          setBusy("Repainting\u2026");
+          try {
+            const tl = await controller.timeLapse({ onProgress: (p) => setBusy(`Repainting\u2026 ${Math.round(p * 100)}%`) });
+            (0, import_paint_editor3.downloadBytes)(await (0, import_paint_editor3.timeLapseZip)(tl), `${fileName}-timelapse.zip`, "application/zip");
+            setNote(`Time-lapse: ${tl.frames.length} frames, ${(tl.durationMs / 1e3).toFixed(1)} s (run render.sh in the zip for the MP4).`);
+          } finally {
+            setBusy(null);
+          }
+        }),
+        children: "Time-lapse"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        type: "button",
+        className: button,
+        disabled: busy !== null,
+        title: "Repaint the painting from its strokes at twice the size (more detail, not upscaled)",
+        onClick: () => attempt(async () => {
+          setBusy("Repainting at 2\xD7\u2026");
+          try {
+            (0, import_paint_editor3.downloadBytes)(await controller.exportHighResPng({ scale: 2 }), `${fileName}@2x.png`, "image/png");
+          } finally {
+            setBusy(null);
+          }
+        }),
+        children: "PNG 2\xD7"
+      }
+    ),
+    (busy ?? note) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[11px] text-slate-400", "data-testid": "paint-replay-status", children: busy ?? note }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "input",
       {
@@ -564,6 +630,39 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
     ] }),
     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.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.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)) })
+        ] }),
+        /* @__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)) })
+        ] })
+      ] }),
+      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)(
+        "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]
+        },
+        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.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" }),
@@ -683,6 +782,11 @@ var PaperPanel = ({ controller, className }) => {
       " 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_runtime5.jsx)(ErrorLine, { error })
   ] });
 };
@@ -979,26 +1083,117 @@ var PaintLayersPanel = ({ controller, className }) => {
   ] });
 };
 
-// src/paint-editor/PaintEditor.tsx
-var import_react9 = require("react");
+// src/paint-editor/WetPanel.tsx
+var import_paint_editor8 = require("@pixerate/editor/paint-editor");
 var import_jsx_runtime8 = 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);
+  const [error, attempt] = useAttempt();
+  const wet = state.wet;
+  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: [
+        "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_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)) })
+      ] }),
+      info.flow.kind !== "none" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        PaintSlider,
+        {
+          control: { path: "strength", label: "Flow strength", min: 0, max: 1, step: 0.01 },
+          value: info.flow.strength,
+          onCommit: (v) => attempt(async () => (await controller.wetIdle(), controller.setFlowMap(layerId, { strength: v })))
+        }
+      )
+    ] }),
+    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 })
+  ] });
+};
+
+// 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 StickerPanel = ({ controller, className }) => {
+  const state = usePaintEditorState(controller);
+  const [error, attempt] = useAttempt();
+  const [picked, setPicked] = (0, import_react9.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: [
+      "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)) })
+      ] }),
+      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" })
+      ] }),
+      /* @__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_runtime9.jsx)(ErrorLine, { error })
+  ] });
+};
+
+// src/paint-editor/PaintEditor.tsx
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var PaintEditor = ({ controller, fileName, height = 720, presence, className }) => {
-  const [tool, setTool] = (0, import_react9.useState)("brush");
-  const [tab, setTab] = (0, import_react9.useState)("color");
-  const [error, setError] = (0, import_react9.useState)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(PaintToolbar, { controller, tool, onToolChange: setTool, fileName }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex min-h-0 flex-1 gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BrushPanel, { controller, className: "w-60 shrink-0 overflow-y-auto pr-1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaintCanvas, { controller, tool, onError: setError, presence, className: "flex-1 rounded-lg" }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { role: "alert", className: "mt-1 text-[11px] text-rose-400", children: error })
+  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 })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex gap-1", role: "tablist", "aria-label": "Paint panels", children: ["color", "paper", "layers"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", role: "tab", "aria-selected": tab === t, className: chip(tab === t), onClick: () => setTab(t), children: t === "color" ? "Colour" : t === "paper" ? "Paper" : "Layers" }, t)) }),
-        tab === "color" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ColorPanel, { controller }),
-        tab === "paper" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaperPanel, { controller }),
-        tab === "layers" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaintLayersPanel, { controller })
+      /* @__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 })
       ] })
     ] })
   ] });
@@ -1014,6 +1209,8 @@ var PaintEditor = ({ controller, fileName, height = 720, presence, className })
   PaintSlider,
   PaintToolbar,
   PaperPanel,
+  StickerPanel,
+  WetPanel,
   usePaintDirector,
   usePaintEditor,
   usePaintEditorState