@pixerate/editor-react 0.74.0 → 0.75.0

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

@@ -72,8 +72,9 @@ interface PaintToolbarProps {
 }
 /**
  * Tools (brush, eyedropper, pan, rotate view), undo / redo, view rotation, mirroring and reset,
- * the symmetry and perspective guides, the tracing image and reference images, the drawing hand,
- * and file actions: save / open JSON, export PNG, JPEG and PSD.
+ * the symmetry and perspective guides, stencils (ruler, circle, mask), the tracing image and reference images, the drawing hand,
+ * and file actions: save / open JSON, export PNG, JPEG and PSD, a time-lapse (zipped frames, video
+ * project and ffmpeg command) and a PNG repainted from the strokes at twice the size.
  */
 declare const PaintToolbar: React__default.FC<PaintToolbarProps>;
 
@@ -100,8 +101,9 @@ interface PaperPanelProps {
 }
 /**
  * The paper library by family (each a generated grain preview) and the current paper's colour,
- * grain depth, scale, shading and contrast, plus the wet-media properties stored for later.
- * Each change is one undo step (sliders commit on release).
+ * grain depth, scale, shading and contrast, the wet-media properties and metallic sheen (each
+ * change one undo step; sliders commit on release); then the light for thick paint and metallic
+ * paper (not an undo step) and Flatten relief for the active layer.
  */
 declare const PaperPanel: React__default.FC<PaperPanelProps>;
 
@@ -132,6 +134,29 @@ interface PaintLayersPanelProps {
  */
 declare const PaintLayersPanel: React__default.FC<PaintLayersPanelProps>;
 
+interface WetPanelProps {
+    controller: PaintEditorController;
+    className?: string;
+}
+/**
+ * Wet media: whether paint is wet, Dry now, Pause / Resume, the water overlay and speed; Wet paper
+ * on the active layer; canvas tilt; the active layer's wet settings (viscosity, evaporation, edge
+ * darkening, granulation, blooms, bleed, pigment weight, lifting, staining) and flow map; and the
+ * kernel in use, with a note when it runs slower than it could (no cross-origin isolation).
+ */
+declare const WetPanel: React__default.FC<WetPanelProps>;
+
+interface StickerPanelProps {
+    controller: PaintEditorController;
+    className?: string;
+}
+/**
+ * The active layer's stickers: pick one to change its stamp, size, rotation, opacity and colour,
+ * bring it to the front or back, or delete it (each change one undo step). Shows nothing for a
+ * layer without stickers.
+ */
+declare const StickerPanel: React__default.FC<StickerPanelProps>;
+
 interface PaintEditorProps {
     controller: PaintEditorController;
     /** Base name of saved and exported files (default `painting`). */
@@ -144,7 +169,7 @@ interface PaintEditorProps {
 }
 /**
  * The paint editor: toolbar, brush library on the left, the canvas, and colour (wheel,
- * harmonies, swatches, mixing pad), paper and layers on the right.
+ * harmonies, swatches, mixing pad), wet media, paper and layers on the right.
  */
 declare const PaintEditor: React__default.FC<PaintEditorProps>;
 
@@ -159,4 +184,4 @@ declare const PaintSlider: React__default.FC<{
     onCommit?: (v: number) => void;
 }>;
 
-export { BrushPanel, type BrushPanelProps, ColorPanel, type ColorPanelProps, PaintCanvas, type PaintCanvasProps, PaintEditor, type PaintEditorProps, PaintLayersPanel, type PaintLayersPanelProps, PaintPresenceLayer, PaintSlider, PaintToolbar, type PaintToolbarProps, PaperPanel, type PaperPanelProps, type UsePaintEditorReturn, usePaintDirector, usePaintEditor, usePaintEditorState };
+export { BrushPanel, type BrushPanelProps, ColorPanel, type ColorPanelProps, PaintCanvas, type PaintCanvasProps, PaintEditor, type PaintEditorProps, PaintLayersPanel, type PaintLayersPanelProps, PaintPresenceLayer, PaintSlider, PaintToolbar, type PaintToolbarProps, PaperPanel, type PaperPanelProps, StickerPanel, type StickerPanelProps, type UsePaintEditorReturn, WetPanel, type WetPanelProps, usePaintDirector, usePaintEditor, usePaintEditorState };

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

@@ -72,8 +72,9 @@ interface PaintToolbarProps {
 }
 /**
  * Tools (brush, eyedropper, pan, rotate view), undo / redo, view rotation, mirroring and reset,
- * the symmetry and perspective guides, the tracing image and reference images, the drawing hand,
- * and file actions: save / open JSON, export PNG, JPEG and PSD.
+ * the symmetry and perspective guides, stencils (ruler, circle, mask), the tracing image and reference images, the drawing hand,
+ * and file actions: save / open JSON, export PNG, JPEG and PSD, a time-lapse (zipped frames, video
+ * project and ffmpeg command) and a PNG repainted from the strokes at twice the size.
  */
 declare const PaintToolbar: React__default.FC<PaintToolbarProps>;
 
@@ -100,8 +101,9 @@ interface PaperPanelProps {
 }
 /**
  * The paper library by family (each a generated grain preview) and the current paper's colour,
- * grain depth, scale, shading and contrast, plus the wet-media properties stored for later.
- * Each change is one undo step (sliders commit on release).
+ * grain depth, scale, shading and contrast, the wet-media properties and metallic sheen (each
+ * change one undo step; sliders commit on release); then the light for thick paint and metallic
+ * paper (not an undo step) and Flatten relief for the active layer.
  */
 declare const PaperPanel: React__default.FC<PaperPanelProps>;
 
@@ -132,6 +134,29 @@ interface PaintLayersPanelProps {
  */
 declare const PaintLayersPanel: React__default.FC<PaintLayersPanelProps>;
 
+interface WetPanelProps {
+    controller: PaintEditorController;
+    className?: string;
+}
+/**
+ * Wet media: whether paint is wet, Dry now, Pause / Resume, the water overlay and speed; Wet paper
+ * on the active layer; canvas tilt; the active layer's wet settings (viscosity, evaporation, edge
+ * darkening, granulation, blooms, bleed, pigment weight, lifting, staining) and flow map; and the
+ * kernel in use, with a note when it runs slower than it could (no cross-origin isolation).
+ */
+declare const WetPanel: React__default.FC<WetPanelProps>;
+
+interface StickerPanelProps {
+    controller: PaintEditorController;
+    className?: string;
+}
+/**
+ * The active layer's stickers: pick one to change its stamp, size, rotation, opacity and colour,
+ * bring it to the front or back, or delete it (each change one undo step). Shows nothing for a
+ * layer without stickers.
+ */
+declare const StickerPanel: React__default.FC<StickerPanelProps>;
+
 interface PaintEditorProps {
     controller: PaintEditorController;
     /** Base name of saved and exported files (default `painting`). */
@@ -144,7 +169,7 @@ interface PaintEditorProps {
 }
 /**
  * The paint editor: toolbar, brush library on the left, the canvas, and colour (wheel,
- * harmonies, swatches, mixing pad), paper and layers on the right.
+ * harmonies, swatches, mixing pad), wet media, paper and layers on the right.
  */
 declare const PaintEditor: React__default.FC<PaintEditorProps>;
 
@@ -159,4 +184,4 @@ declare const PaintSlider: React__default.FC<{
     onCommit?: (v: number) => void;
 }>;
 
-export { BrushPanel, type BrushPanelProps, ColorPanel, type ColorPanelProps, PaintCanvas, type PaintCanvasProps, PaintEditor, type PaintEditorProps, PaintLayersPanel, type PaintLayersPanelProps, PaintPresenceLayer, PaintSlider, PaintToolbar, type PaintToolbarProps, PaperPanel, type PaperPanelProps, type UsePaintEditorReturn, usePaintDirector, usePaintEditor, usePaintEditorState };
+export { BrushPanel, type BrushPanelProps, ColorPanel, type ColorPanelProps, PaintCanvas, type PaintCanvasProps, PaintEditor, type PaintEditorProps, PaintLayersPanel, type PaintLayersPanelProps, PaintPresenceLayer, PaintSlider, PaintToolbar, type PaintToolbarProps, PaperPanel, type PaperPanelProps, StickerPanel, type StickerPanelProps, type UsePaintEditorReturn, WetPanel, type WetPanelProps, usePaintDirector, usePaintEditor, usePaintEditorState };

package/dist/paint-editor/index.js

@@ -27,6 +27,8 @@ import {
   PaintCanvasPresenter,
   PaintGesture,
   documentToScreen,
+  drawWaterOverlay,
+  startWetClock,
   fitZoom,
   guideOverlay,
   handlePaintShortcut,
@@ -37,6 +39,7 @@ var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount =
   const state = usePaintEditorState(controller);
   const viewport = useRef(null);
   const canvas = useRef(null);
+  const water = useRef(null);
   const [size, setSize] = useState2({ width: 800, height: 600 });
   const measured = useRef(false);
   const [predicted, setPredicted] = useState2([]);
@@ -76,6 +79,11 @@ var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount =
     if (ctx && typeof ctx.createImageData === "function") presenter.render(ctx);
     else controller.takeDirty();
   }, [state, presenter, controller]);
+  useEffect(() => startWetClock(controller), [controller]);
+  useEffect(() => {
+    const ctx = water.current?.getContext("2d");
+    if (ctx && typeof ctx.createImageData === "function") drawWaterOverlay(controller, ctx);
+  }, [state, controller]);
   useEffect(() => {
     const el = viewport.current;
     if (!el) return;
@@ -130,6 +138,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__ */ 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__ */ 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__ */ jsx(
             "line",
@@ -138,8 +157,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
             },
@@ -225,8 +244,8 @@ var ReferencePanel = ({ controller, id }) => {
 };
 
 // src/paint-editor/PaintToolbar.tsx
-import { useRef as useRef3 } from "react";
-import { PAINT_TOOLS, SYMMETRY_MODES, decodeImageBlob, downloadBytes } from "@pixerate/editor/paint-editor";
+import { useRef as useRef3, useState as useState4 } from "react";
+import { PAINT_TOOLS, SYMMETRY_MODES, decodeImageBlob, downloadBytes, quickStencil, timeLapseZip } from "@pixerate/editor/paint-editor";
 
 // src/paint-editor/shared.tsx
 import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
@@ -323,6 +342,8 @@ import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var PaintToolbar = ({ controller, tool, onToolChange, fileName = "painting", className }) => {
   const state = usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
+  const [busy, setBusy] = useState4(null);
+  const [note, setNote] = useState4(null);
   const openRef = useRef3(null);
   const tracingRef = useRef3(null);
   const refRef = useRef3(null);
@@ -419,6 +440,12 @@ var PaintToolbar = ({ controller, tool, onToolChange, fileName = "painting", cla
       /* @__PURE__ */ jsx3("button", { type: "button", className: button, onClick: () => controller.clearTracingImage(), children: "Remove tracing" })
     ] }),
     /* @__PURE__ */ jsx3("button", { type: "button", className: button, onClick: () => refRef.current?.click(), children: "Reference\u2026" }),
+    /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1", role: "group", "aria-label": "Stencils", children: [
+      /* @__PURE__ */ jsx3("button", { type: "button", className: button, title: "A ruler: strokes that start near it follow it", onClick: () => attempt(() => controller.addStencil(quickStencil("ruler", canvas))), children: "Ruler" }),
+      /* @__PURE__ */ jsx3("button", { type: "button", className: button, title: "A circle guide: strokes that start near it follow it", onClick: () => attempt(() => controller.addStencil(quickStencil("circle", canvas))), children: "Circle" }),
+      /* @__PURE__ */ jsx3("button", { type: "button", className: button, title: "An ellipse mask: paint lands only inside it", onClick: () => attempt(() => controller.addStencil(quickStencil("ellipse-mask", canvas))), children: "Mask" }),
+      state.guides.stencils.length > 0 && /* @__PURE__ */ jsx3("button", { type: "button", className: button, onClick: () => attempt(() => controller.removeStencils()), children: "Clear stencils" })
+    ] }),
     /* @__PURE__ */ jsx3("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__ */ jsx3("span", { className: "mx-1 h-4 w-px bg-slate-700" }),
     /* @__PURE__ */ jsx3("button", { type: "button", className: button, onClick: () => attempt(() => downloadBytes(JSON.stringify(controller.toJSON()), `${fileName}.paint.json`, "application/json")), children: "Save" }),
@@ -426,6 +453,45 @@ var PaintToolbar = ({ controller, tool, onToolChange, fileName = "painting", cla
     /* @__PURE__ */ jsx3("button", { type: "button", className: button, onClick: () => exportImage("image/png"), children: "PNG" }),
     /* @__PURE__ */ jsx3("button", { type: "button", className: button, onClick: () => exportImage("image/jpeg"), children: "JPEG" }),
     /* @__PURE__ */ jsx3("button", { type: "button", className: button, onClick: () => attempt(() => downloadBytes(controller.exportPsd().bytes, `${fileName}.psd`, "image/vnd.adobe.photoshop")), children: "PSD" }),
+    /* @__PURE__ */ jsx3(
+      "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)}%`) });
+            downloadBytes(await 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__ */ jsx3(
+      "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 {
+            downloadBytes(await controller.exportHighResPng({ scale: 2 }), `${fileName}@2x.png`, "image/png");
+          } finally {
+            setBusy(null);
+          }
+        }),
+        children: "PNG 2\xD7"
+      }
+    ),
+    (busy ?? note) && /* @__PURE__ */ jsx3("span", { className: "text-[11px] text-slate-400", "data-testid": "paint-replay-status", children: busy ?? note }),
     /* @__PURE__ */ jsx3(
       "input",
       {
@@ -476,7 +542,7 @@ var PaintToolbar = ({ controller, tool, onToolChange, fileName = "painting", cla
 };
 
 // src/paint-editor/BrushPanel.tsx
-import { useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
+import { useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
 import {
   BLEND_MENU_GROUPS,
   BRUSH_ROTATIONS,
@@ -487,13 +553,26 @@ import {
   multiColorSliders,
   patchBrushValue,
   patchPath,
-  readPath
+  readPath,
+  WET_TOOLS,
+  WET_TOOL_LABELS,
+  WET_MEDIA,
+  WET_MEDIUM_LABELS,
+  IMPASTO_TOOLS,
+  IMPASTO_TOOL_LABELS,
+  PARTICLE_KINDS,
+  PARTICLE_KIND_LABELS,
+  PARTICLE_RENDERS,
+  PARTICLE_RENDER_LABELS,
+  STAMP_KINDS,
+  STAMP_LABELS,
+  toggleStamp
 } from "@pixerate/editor/paint-editor";
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, className }) => {
   const state = usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
-  const [saveName, setSaveName] = useState4("");
+  const [saveName, setSaveName] = useState5("");
   const fileRef = useRef4(null);
   const { brush, brushes } = state;
   const paper = state.document.paper;
@@ -546,6 +625,39 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
     ] }),
     engine && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", "data-testid": "brush-engine", children: [
       /* @__PURE__ */ jsx4("span", { className: "font-medium text-slate-300", children: engine.title }),
+      engine.wetTool && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Wet tool" }),
+        /* @__PURE__ */ jsx4("select", { "aria-label": "Wet tool", value: brush.wet.tool, onChange: (e) => controller.setBrush({ wet: { tool: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: WET_TOOLS.map((t) => /* @__PURE__ */ jsx4("option", { value: t, children: WET_TOOL_LABELS[t] }, t)) })
+      ] }),
+      engine.wetTool && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Medium" }),
+        /* @__PURE__ */ jsx4("select", { "aria-label": "Wet medium", value: brush.wet.medium, onChange: (e) => controller.setBrush({ wet: { medium: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: WET_MEDIA.map((m) => /* @__PURE__ */ jsx4("option", { value: m, children: WET_MEDIUM_LABELS[m] }, m)) })
+      ] }),
+      engine.particleMenus && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Particles" }),
+          /* @__PURE__ */ jsx4("select", { "aria-label": "Particle kind", value: brush.particle.kind, onChange: (e) => controller.setBrush({ particle: { kind: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: PARTICLE_KINDS.map((k) => /* @__PURE__ */ jsx4("option", { value: k, children: PARTICLE_KIND_LABELS[k] }, k)) })
+        ] }),
+        /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Drawn as" }),
+          /* @__PURE__ */ jsx4("select", { "aria-label": "Particle render", value: brush.particle.render, onChange: (e) => controller.setBrush({ particle: { render: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: PARTICLE_RENDERS.map((k) => /* @__PURE__ */ jsx4("option", { value: k, children: PARTICLE_RENDER_LABELS[k] }, k)) })
+        ] })
+      ] }),
+      engine.stickerStamps && /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "Sticker stamps", children: STAMP_KINDS.map((k) => /* @__PURE__ */ jsx4(
+        "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: toggleStamp(brush.sticker.stamps, k) } }),
+          children: STAMP_LABELS[k]
+        },
+        k
+      )) }),
+      engine.impastoTool && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Tool" }),
+        /* @__PURE__ */ jsx4("select", { "aria-label": "Impasto tool", value: brush.impasto.tool, onChange: (e) => controller.setBrush({ impasto: { tool: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: IMPASTO_TOOLS.map((t) => /* @__PURE__ */ jsx4("option", { value: t, children: IMPASTO_TOOL_LABELS[t] }, t)) })
+      ] }),
       engine.sliders.map((c) => /* @__PURE__ */ jsx4(PaintSlider, { control: c, value: readPath(brush, c.path), onChange: (v) => controller.setBrush(patchPath(brush, c.path, v)) }, c.path)),
       engine.mixingPath && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
         /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Mixing" }),
@@ -629,7 +741,7 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
 
 // src/paint-editor/PaperPanel.tsx
 import { useMemo as useMemo4 } from "react";
-import { PAPER_FAMILIES, PAPER_LIBRARY, PAPER_SLIDERS, patchPath as patchPath2, readPath as readPath2, renderPaper } from "@pixerate/editor/paint-editor";
+import { LIGHT_SLIDERS, PAPER_FAMILIES, PAPER_LIBRARY, PAPER_SLIDERS, patchPath as patchPath2, readPath as readPath2, renderPaper } from "@pixerate/editor/paint-editor";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var SWATCH = { x: 0, y: 0, width: 64, height: 40 };
 var PaperPanel = ({ controller, className }) => {
@@ -665,12 +777,17 @@ var PaperPanel = ({ controller, className }) => {
       " Mirror tiling"
     ] }),
     /* @__PURE__ */ jsx5("button", { type: "button", className: "self-start px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700", onClick: () => attempt(() => controller.setPaper({ seed: paper.seed + 1 })), children: "New sheet" }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1.5", "data-testid": "light-panel", children: [
+      /* @__PURE__ */ jsx5("span", { className: "font-medium text-slate-300", children: "Light (thick paint, metallic paper)" }),
+      LIGHT_SLIDERS.map((c) => /* @__PURE__ */ jsx5(PaintSlider, { control: c, value: readPath2(controller.getLighting(), c.path), onChange: (v) => attempt(() => controller.setLighting({ [c.path]: v })) }, c.path)),
+      /* @__PURE__ */ jsx5("button", { type: "button", className: "self-start px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700", onClick: () => attempt(() => controller.flattenRelief()), children: "Flatten relief" })
+    ] }),
     /* @__PURE__ */ jsx5(ErrorLine, { error })
   ] });
 };
 
 // src/paint-editor/ColorPanel.tsx
-import { useMemo as useMemo5, useRef as useRef5, useState as useState5 } from "react";
+import { useMemo as useMemo5, useRef as useRef5, useState as useState6 } from "react";
 import {
   HARMONY_KINDS,
   MIXING_PAD_HEIGHT,
@@ -690,12 +807,12 @@ import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className }) => {
   const state = usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
-  const [wheel, setWheel] = useState5("ryb");
-  const [kind, setKind] = useState5("complementary");
-  const [padTool, setPadTool] = useState5("paint");
-  const [sample, setSample] = useState5(3);
-  const [parts, setParts] = useState5([1, 1]);
-  const [padName, setPadName] = useState5("");
+  const [wheel, setWheel] = useState6("ryb");
+  const [kind, setKind] = useState6("complementary");
+  const [padTool, setPadTool] = useState6("paint");
+  const [sample, setSample] = useState6(3);
+  const [parts, setParts] = useState6([1, 1]);
+  const [padName, setPadName] = useState6("");
   const padPoints = useRef5(null);
   const ring = useMemo5(() => renderColorWheel(wheelSize, wheel), [wheelSize, wheel]);
   const color = state.color;
@@ -865,7 +982,7 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
 };
 
 // src/paint-editor/PaintLayersPanel.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { BLEND_MENU_GROUPS as BLEND_MENU_GROUPS2 } from "@pixerate/editor/paint-editor";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function siblingIndex(layers, l) {
@@ -875,7 +992,7 @@ function siblingIndex(layers, l) {
 var PaintLayersPanel = ({ controller, className }) => {
   usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
-  const [renaming, setRenaming] = useState6(null);
+  const [renaming, setRenaming] = useState7(null);
   const layers = controller.listLayers();
   const active = layers.find((l) => l.active) ?? null;
   const move = (delta) => {
@@ -975,26 +1092,117 @@ var PaintLayersPanel = ({ controller, className }) => {
   ] });
 };
 
-// src/paint-editor/PaintEditor.tsx
-import { useState as useState7 } from "react";
+// src/paint-editor/WetPanel.tsx
+import { WET_FLOW_KINDS, WET_PARAM_SLIDERS, WET_SPEED_SLIDER, WET_TILT_SLIDERS, readPath as readPath3 } from "@pixerate/editor/paint-editor";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+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__ */ jsxs8("div", { className: `${panel} ${className ?? ""}`, "data-testid": "wet-panel", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx8("span", { className: wet.wet ? "text-sky-300" : "text-slate-400", "data-testid": "wet-status", children: wet.wet ? wet.paused ? "Wet (paused)" : "Wet" : "Dry" }),
+      /* @__PURE__ */ jsxs8("span", { className: "text-[10px] text-slate-500", children: [
+        "step ",
+        wet.clock
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !wet.layerIds.length, onClick: () => attempt(async () => (await controller.wetIdle(), controller.dryPaint())), children: "Dry now" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: chip(wet.paused), "aria-pressed": wet.paused, onClick: () => controller.setWetPaused(!wet.paused), children: wet.paused ? "Resume" : "Pause" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: chip(wet.overlay), "aria-pressed": wet.overlay, onClick: () => controller.setWaterOverlay(!wet.overlay), children: "Water" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: chip(wet.instantDry), "aria-pressed": wet.instantDry, title: "Each wet stroke dries as soon as it ends", onClick: () => controller.setInstantDry(!wet.instantDry), children: "Instant dry" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !layerId, onClick: () => attempt(async () => (await controller.wetIdle(), controller.wetPaper({}))), children: "Wet paper" })
+    ] }),
+    /* @__PURE__ */ jsx8(PaintSlider, { control: WET_SPEED_SLIDER, value: wet.speed, onChange: (v) => controller.setWetSpeed(v) }),
+    WET_TILT_SLIDERS.map((c) => /* @__PURE__ */ jsx8(PaintSlider, { control: c, value: readPath3(wet.tilt, c.path), onCommit: (v) => attempt(async () => (await controller.wetIdle(), controller.setCanvasTilt({ [c.path]: v }))) }, c.path)),
+    info && /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-1.5", "data-testid": "wet-layer", children: [
+      /* @__PURE__ */ jsx8("span", { className: "font-medium text-slate-300", children: "This layer" }),
+      WET_PARAM_SLIDERS.map((c) => /* @__PURE__ */ jsx8(PaintSlider, { control: c, value: readPath3(info.params, c.path), onCommit: (v) => attempt(async () => (await controller.wetIdle(), controller.setWetParams(layerId, { [c.path]: v }))) }, c.path)),
+      /* @__PURE__ */ jsxs8("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx8("span", { className: "text-slate-400", children: "Flow map" }),
+        /* @__PURE__ */ jsx8("select", { "aria-label": "Flow map", value: info.flow.kind, onChange: (e) => attempt(async () => (await controller.wetIdle(), controller.setFlowMap(layerId, { kind: e.target.value }))), className: "rounded bg-slate-800 px-1 py-0.5", children: WET_FLOW_KINDS.map((k) => /* @__PURE__ */ jsx8("option", { value: k, children: FLOW_LABELS[k] }, k)) })
+      ] }),
+      info.flow.kind !== "none" && /* @__PURE__ */ jsx8(
+        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__ */ jsx8("p", { className: "text-[10px] text-amber-300", "data-testid": "wet-message", children: backend.message }),
+    backend.backend && /* @__PURE__ */ jsx8("p", { className: "text-[10px] text-slate-500", children: backend.backend.kind === "wasm-threads" ? `WebAssembly, ${backend.backend.threads} threads` : backend.backend.kind === "wasm" ? "WebAssembly, one thread" : "JavaScript" }),
+    /* @__PURE__ */ jsx8(ErrorLine, { error })
+  ] });
+};
+
+// src/paint-editor/StickerPanel.tsx
+import { useState as useState8 } from "react";
+import { STAMP_KINDS as STAMP_KINDS2, STAMP_LABELS as STAMP_LABELS2, STICKER_SLIDERS, readPath as readPath4 } from "@pixerate/editor/paint-editor";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var StickerPanel = ({ controller, className }) => {
+  const state = usePaintEditorState(controller);
+  const [error, attempt] = useAttempt();
+  const [picked, setPicked] = useState8(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__ */ jsxs9("div", { className: `${panel} ${className ?? ""}`, "data-testid": "sticker-panel", children: [
+    /* @__PURE__ */ jsxs9("span", { className: "font-medium text-slate-300", children: [
+      "Stickers (",
+      stickers.length,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "flex max-h-24 flex-wrap gap-1 overflow-y-auto", role: "listbox", "aria-label": "Stickers", children: stickers.map((s) => /* @__PURE__ */ jsx9("button", { type: "button", role: "option", "aria-selected": s.id === picked, title: `${STAMP_LABELS2[s.stamp]} ${s.id}`, className: `h-5 w-5 rounded ring-1 ${s.id === picked ? "ring-indigo-400" : "ring-slate-700"}`, style: { background: s.color }, onClick: () => setPicked(s.id) }, s.id)) }),
+    sel && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-1.5", "data-testid": "sticker-edit", children: [
+      /* @__PURE__ */ jsxs9("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx9("span", { className: "text-slate-400", children: "Stamp" }),
+        /* @__PURE__ */ jsx9("select", { "aria-label": "Sticker stamp", value: sel.stamp, onChange: (e) => attempt(() => controller.updateSticker(layerId, sel.id, { stamp: e.target.value })), className: "rounded bg-slate-800 px-1 py-0.5", children: STAMP_KINDS2.map((k) => /* @__PURE__ */ jsx9("option", { value: k, children: STAMP_LABELS2[k] }, k)) })
+      ] }),
+      STICKER_SLIDERS.map((c) => /* @__PURE__ */ jsx9(PaintSlider, { control: c, value: readPath4(sel, c.path), onCommit: (v) => attempt(() => controller.updateSticker(layerId, sel.id, { [c.path]: v })) }, c.path)),
+      /* @__PURE__ */ jsxs9("label", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx9("span", { className: "text-slate-400", children: "Colour" }),
+        /* @__PURE__ */ jsx9(CommitColorInput, { label: "Sticker colour", value: sel.color, onCommit: (v) => attempt(() => controller.updateSticker(layerId, sel.id, { color: v })), className: "h-6 w-10 rounded bg-transparent" })
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ jsx9("button", { type: "button", className: button, onClick: () => attempt(() => controller.arrangeStickers(layerId, [sel.id], "front")), children: "To front" }),
+        /* @__PURE__ */ jsx9("button", { type: "button", className: button, onClick: () => attempt(() => controller.arrangeStickers(layerId, [sel.id], "back")), children: "To back" }),
+        /* @__PURE__ */ jsx9("button", { type: "button", className: button, onClick: () => attempt(() => (controller.removeStickers(layerId, [sel.id]), setPicked(null))), children: "Delete" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9(ErrorLine, { error })
+  ] });
+};
+
+// src/paint-editor/PaintEditor.tsx
+import { useState as useState9 } from "react";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var PaintEditor = ({ controller, fileName, height = 720, presence, className }) => {
-  const [tool, setTool] = useState7("brush");
-  const [tab, setTab] = useState7("color");
-  const [error, setError] = useState7(null);
-  return /* @__PURE__ */ jsxs8("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__ */ jsx8(PaintToolbar, { controller, tool, onToolChange: setTool, fileName }),
-    /* @__PURE__ */ jsxs8("div", { className: "flex min-h-0 flex-1 gap-2", children: [
-      /* @__PURE__ */ jsx8(BrushPanel, { controller, className: "w-60 shrink-0 overflow-y-auto pr-1" }),
-      /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx8(PaintCanvas, { controller, tool, onError: setError, presence, className: "flex-1 rounded-lg" }),
-        error && /* @__PURE__ */ jsx8("p", { role: "alert", className: "mt-1 text-[11px] text-rose-400", children: error })
+  const [tool, setTool] = useState9("brush");
+  const [tab, setTab] = useState9("color");
+  const [error, setError] = useState9(null);
+  return /* @__PURE__ */ jsxs10("div", { className: `flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-900 p-2 ${className ?? ""}`, style: { height }, "data-testid": "paint-editor", children: [
+    /* @__PURE__ */ jsx10(PaintToolbar, { controller, tool, onToolChange: setTool, fileName }),
+    /* @__PURE__ */ jsxs10("div", { className: "flex min-h-0 flex-1 gap-2", children: [
+      /* @__PURE__ */ jsx10(BrushPanel, { controller, className: "w-60 shrink-0 overflow-y-auto pr-1" }),
+      /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx10(PaintCanvas, { controller, tool, onError: setError, presence, className: "flex-1 rounded-lg" }),
+        error && /* @__PURE__ */ jsx10("p", { role: "alert", className: "mt-1 text-[11px] text-rose-400", children: error })
       ] }),
-      /* @__PURE__ */ jsxs8("div", { className: "flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1", children: [
-        /* @__PURE__ */ jsx8("div", { className: "flex gap-1", role: "tablist", "aria-label": "Paint panels", children: ["color", "paper", "layers"].map((t) => /* @__PURE__ */ jsx8("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__ */ jsx8(ColorPanel, { controller }),
-        tab === "paper" && /* @__PURE__ */ jsx8(PaperPanel, { controller }),
-        tab === "layers" && /* @__PURE__ */ jsx8(PaintLayersPanel, { controller })
+      /* @__PURE__ */ jsxs10("div", { className: "flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1", children: [
+        /* @__PURE__ */ jsx10("div", { className: "flex gap-1", role: "tablist", "aria-label": "Paint panels", children: ["color", "wet", "paper", "layers"].map((t) => /* @__PURE__ */ jsx10("button", { type: "button", role: "tab", "aria-selected": tab === t, className: chip(tab === t), onClick: () => setTab(t), children: t === "color" ? "Colour" : t === "wet" ? "Wet" : t === "paper" ? "Paper" : "Layers" }, t)) }),
+        tab === "color" && /* @__PURE__ */ jsx10(ColorPanel, { controller }),
+        tab === "wet" && /* @__PURE__ */ jsx10(WetPanel, { controller }),
+        tab === "paper" && /* @__PURE__ */ jsx10(PaperPanel, { controller }),
+        tab === "layers" && /* @__PURE__ */ jsx10(PaintLayersPanel, { controller }),
+        tab === "layers" && /* @__PURE__ */ jsx10(StickerPanel, { controller })
       ] })
     ] })
   ] });
@@ -1009,6 +1217,8 @@ export {
   PaintSlider,
   PaintToolbar,
   PaperPanel,
+  StickerPanel,
+  WetPanel,
   usePaintDirector,
   usePaintEditor,
   usePaintEditorState