@pixerate/editor-react 0.67.0 → 0.68.0

package/dist/paint-editor/index.cjs

@@ -0,0 +1,893 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/paint-editor/index.ts
+var paint_editor_exports = {};
+__export(paint_editor_exports, {
+  BrushPanel: () => BrushPanel,
+  ColorPanel: () => ColorPanel,
+  PaintCanvas: () => PaintCanvas,
+  PaintEditor: () => PaintEditor,
+  PaintLayersPanel: () => PaintLayersPanel,
+  PaintSlider: () => PaintSlider,
+  PaintToolbar: () => PaintToolbar,
+  PaperPanel: () => PaperPanel,
+  usePaintEditor: () => usePaintEditor,
+  usePaintEditorState: () => usePaintEditorState
+});
+module.exports = __toCommonJS(paint_editor_exports);
+
+// src/paint-editor/usePaintEditor.ts
+var import_react = require("react");
+var import_paint_editor = require("@pixerate/editor/paint-editor");
+function usePaintEditor(options = {}) {
+  const [controller] = (0, import_react.useState)(() => options instanceof import_paint_editor.PaintEditorController ? options : new import_paint_editor.PaintEditorController(options));
+  const state = usePaintEditorState(controller);
+  return (0, import_react.useMemo)(() => ({ controller, state }), [controller, state]);
+}
+function usePaintEditorState(controller) {
+  return (0, import_react.useSyncExternalStore)(
+    (notify) => controller.subscribe(notify),
+    () => controller.getState(),
+    () => controller.getState()
+  );
+}
+
+// src/paint-editor/PaintCanvas.tsx
+var import_react2 = require("react");
+var import_paint_editor2 = require("@pixerate/editor/paint-editor");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount = true, onError, className }) => {
+  const state = usePaintEditorState(controller);
+  const viewport = (0, import_react2.useRef)(null);
+  const canvas = (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)([]);
+  const presenter = (0, import_react2.useMemo)(() => new import_paint_editor2.PaintCanvasPresenter(controller), [controller]);
+  const gesture = (0, import_react2.useMemo)(
+    () => new import_paint_editor2.PaintGesture(controller, () => {
+      const r = viewport.current?.getBoundingClientRect();
+      return { left: r?.left ?? 0, top: r?.top ?? 0, width: r?.width || size.width, height: r?.height || size.height };
+    }),
+    // The box reads the element when called; `size` is only the jsdom fallback.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [controller]
+  );
+  gesture.tool = tool;
+  const { canvas: doc } = state.document;
+  (0, import_react2.useEffect)(() => {
+    const el = viewport.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      if (!el.clientWidth || !el.clientHeight) return;
+      measured.current = true;
+      setSize({ width: el.clientWidth, height: el.clientHeight });
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const fitted = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const key = `${doc.width}x${doc.height}`;
+    if (!fitOnMount || fitted.current === key) return;
+    if (typeof ResizeObserver !== "undefined" && !measured.current) return;
+    fitted.current = key;
+    controller.setView({ zoom: (0, import_paint_editor2.fitZoom)(doc, size), pan: { x: 0, y: 0 } });
+  }, [controller, doc, size, fitOnMount]);
+  (0, import_react2.useEffect)(() => {
+    const ctx = canvas.current?.getContext("2d");
+    if (ctx && typeof ctx.createImageData === "function") presenter.render(ctx);
+    else controller.takeDirty();
+  }, [state, presenter, controller]);
+  (0, import_react2.useEffect)(() => {
+    const el = viewport.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      e.preventDefault();
+      gesture.wheel(e);
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [gesture]);
+  const report = () => onError?.(gesture.error);
+  const transform = (0, import_paint_editor2.viewCssTransform)(state.view, doc, size);
+  const lines = showGuides ? (0, import_paint_editor2.guideOverlay)(controller) : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: viewport,
+      tabIndex: 0,
+      role: "application",
+      "aria-label": "Paint canvas",
+      "data-testid": "paint-canvas",
+      className: `relative overflow-hidden bg-slate-950 outline-none touch-none select-none ${className ?? ""}`,
+      style: { cursor: tool === "pan" ? "grab" : tool === "eyedropper" ? "copy" : "crosshair" },
+      onPointerDown: (e) => {
+        viewport.current?.focus();
+        if (gesture.down(e.nativeEvent)) e.target.setPointerCapture?.(e.pointerId);
+        report();
+      },
+      onPointerMove: (e) => {
+        gesture.move(e.nativeEvent);
+        if (gesture.predicted.length || predicted.length) setPredicted(gesture.predicted.map((p) => ({ x: p.x, y: p.y })));
+      },
+      onPointerUp: (e) => {
+        gesture.up(e.nativeEvent);
+        setPredicted([]);
+      },
+      onPointerCancel: () => {
+        gesture.cancel();
+        setPredicted([]);
+      },
+      onKeyDown: (e) => {
+        if ((0, import_paint_editor2.handlePaintShortcut)(controller, gesture, e)) e.preventDefault();
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "canvas",
+          {
+            ref: canvas,
+            width: doc.width,
+            height: doc.height,
+            className: "absolute left-0 top-0 shadow-2xl",
+            style: { transform, transformOrigin: "0 0", imageRendering: state.view.zoom > 2 ? "pixelated" : "auto" }
+          }
+        ),
+        /* @__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",
+            {
+              x1: l.from.x,
+              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,
+              strokeWidth: 1 / state.view.zoom,
+              strokeDasharray: l.kind === "symmetry" ? `${6 / state.view.zoom} ${4 / state.view.zoom}` : void 0
+            },
+            i
+          )),
+          predicted.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: predicted.map((p) => `${p.x},${p.y}`).join(" "), fill: "none", stroke: state.color, strokeOpacity: 0.5, strokeWidth: Math.max(1, state.brush.tip.size / 2), strokeLinecap: "round" })
+        ] }),
+        state.guides.references.filter((r) => r.visible).map((r) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReferencePanel, { controller, id: r.id }, r.id)),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute bottom-1 right-2 text-[10px] text-slate-500 pointer-events-none", "data-testid": "paint-view-status", children: [
+          Math.round(state.view.zoom * 100),
+          "% \xB7 ",
+          Math.round(state.view.rotation),
+          "\xB0",
+          state.view.mirror ? " \xB7 mirrored" : ""
+        ] })
+      ]
+    }
+  );
+};
+var ReferencePanel = ({ controller, id }) => {
+  const state = usePaintEditorState(controller);
+  const ref = state.guides.references.find((r) => r.id === id);
+  const drag = (0, import_react2.useRef)(null);
+  if (!ref) return null;
+  const h = ref.height / ref.width * ref.displayWidth;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "absolute rounded border border-slate-700 bg-slate-900/95 shadow-xl",
+      style: { left: ref.x, top: ref.y, width: ref.displayWidth },
+      "data-testid": "paint-reference",
+      onPointerDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: "flex items-center justify-between px-1.5 py-0.5 text-[10px] text-slate-300 cursor-move",
+            onPointerDown: (e) => {
+              drag.current = { x: e.clientX, y: e.clientY, ox: ref.x, oy: ref.y };
+              e.target.setPointerCapture?.(e.pointerId);
+            },
+            onPointerMove: (e) => {
+              const d = drag.current;
+              if (d) controller.updateReferenceImage(id, { x: d.ox + e.clientX - d.x, y: d.oy + e.clientY - d.y });
+            },
+            onPointerUp: () => drag.current = null,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: ref.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", "aria-label": `Hide ${ref.name}`, className: "px-1 text-slate-400 hover:text-white", onClick: () => controller.updateReferenceImage(id, { visible: false }), children: "\xD7" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: ref.src,
+            alt: ref.name,
+            draggable: false,
+            width: ref.displayWidth,
+            height: h,
+            className: "block cursor-copy",
+            onClick: (e) => {
+              const rect = e.target.getBoundingClientRect();
+              const k = ref.width / (rect.width || ref.displayWidth);
+              controller.setColor(controller.pickReferenceColor(id, Math.min(ref.width - 1, (e.clientX - rect.left) * k), Math.min(ref.height - 1, (e.clientY - rect.top) * k)));
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/paint-editor/PaintToolbar.tsx
+var import_react4 = require("react");
+var import_paint_editor3 = require("@pixerate/editor/paint-editor");
+
+// src/paint-editor/shared.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var chip = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
+var button = "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700 disabled:opacity-40";
+var panel = "flex flex-col gap-2 text-xs text-slate-200";
+var PixelCanvas = ({ pixels, label, className, style }) => {
+  const ref = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    const canvas = ref.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx || !pixels || typeof ctx.createImageData !== "function") return;
+    canvas.width = pixels.width;
+    canvas.height = pixels.height;
+    const img = ctx.createImageData(pixels.width, pixels.height);
+    img.data.set(pixels.data);
+    ctx.putImageData(img, 0, 0);
+  }, [pixels]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("canvas", { ref, role: "img", "aria-label": label, className, style, width: pixels?.width, height: pixels?.height });
+};
+var fmt = (c, v) => c.step >= 1 ? String(Math.round(v)) : v.toFixed(2);
+var PaintSlider = ({ control, value, onChange, onCommit }) => {
+  const [draft, setDraft] = (0, import_react3.useState)(null);
+  const ref = (0, import_react3.useRef)(null);
+  const commit = (0, import_react3.useRef)(onCommit);
+  commit.current = onCommit;
+  (0, import_react3.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const done = () => {
+      commit.current?.(Number(el.value));
+      setDraft(null);
+    };
+    el.addEventListener("change", done);
+    return () => el.removeEventListener("change", done);
+  }, []);
+  const shown = draft ?? value;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "flex flex-col gap-0.5", "data-path": control.path, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "flex justify-between text-slate-400", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: control.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-mono", children: fmt(control, shown) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        ref,
+        type: "range",
+        "aria-label": control.label,
+        min: control.min,
+        max: control.max,
+        step: control.step,
+        value: shown,
+        onChange: (e) => {
+          const v = Number(e.target.value);
+          if (onCommit) setDraft(v);
+          onChange?.(v);
+        },
+        className: "w-full accent-indigo-500"
+      }
+    )
+  ] });
+};
+function useAttempt() {
+  const [error, setError] = (0, import_react3.useState)(null);
+  const attempt = (fn) => {
+    try {
+      setError(null);
+      const r = fn();
+      if (r && typeof r.catch === "function") r.catch((e) => setError(e instanceof Error ? e.message : String(e)));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+  return [error, attempt, setError];
+}
+var ErrorLine = ({ error }) => error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { role: "alert", className: "text-[11px] text-rose-400", children: error }) : null;
+var CommitColorInput = ({ value, label, onCommit, className }) => {
+  const ref = (0, import_react3.useRef)(null);
+  const commit = (0, import_react3.useRef)(onCommit);
+  commit.current = onCommit;
+  (0, import_react3.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const done = () => commit.current(el.value);
+    el.addEventListener("change", done);
+    return () => el.removeEventListener("change", done);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { ref, type: "color", "aria-label": label, defaultValue: value, className }, value);
+};
+
+// src/paint-editor/PaintToolbar.tsx
+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 openRef = (0, import_react4.useRef)(null);
+  const tracingRef = (0, import_react4.useRef)(null);
+  const refRef = (0, import_react4.useRef)(null);
+  const { symmetry, perspective, tracing } = state.guides;
+  const { canvas } = state.document;
+  const exportImage = (format) => attempt(async () => (0, import_paint_editor3.downloadBytes)(await controller.exportImage({ format }), `${fileName}.${format === "image/png" ? "png" : "jpg"}`, format));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `flex flex-wrap items-center gap-1.5 text-xs text-slate-200 ${className ?? ""}`, role: "toolbar", "aria-label": "Paint toolbar", "data-testid": "paint-toolbar", children: [
+    import_paint_editor3.PAINT_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", "aria-pressed": tool === t.id, title: `${t.label} (${t.key.toUpperCase()})`, className: chip(tool === t.id), onClick: () => onToolChange(t.id), children: t.label }, t.id)),
+    /* @__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, disabled: !state.canUndo, title: state.undoLabel ? `Undo ${state.undoLabel}` : "Undo", onClick: () => controller.undo(), children: "Undo" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, disabled: !state.canRedo, title: state.redoLabel ? `Redo ${state.redoLabel}` : "Redo", onClick: () => controller.redo(), children: "Redo" }),
+    /* @__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, "aria-label": "Rotate view left", onClick: () => controller.setView({ rotation: state.view.rotation - 15 }), children: "\u27F2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, "aria-label": "Rotate view right", onClick: () => controller.setView({ rotation: state.view.rotation + 15 }), children: "\u27F3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: chip(state.view.mirror), "aria-pressed": state.view.mirror, onClick: () => controller.setView({ mirror: !state.view.mirror }), children: "Mirror view" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, onClick: () => controller.resetView(), children: "Reset view" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-1 h-4 w-px bg-slate-700" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "flex items-center gap-1", children: [
+      "Symmetry",
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "select",
+        {
+          "aria-label": "Symmetry",
+          value: symmetry.mode,
+          onChange: (e) => controller.setSymmetry({ mode: e.target.value, center: symmetry.mode === "off" ? { x: canvas.width / 2, y: canvas.height / 2 } : symmetry.center }),
+          className: "rounded bg-slate-800 px-1 py-0.5",
+          children: import_paint_editor3.SYMMETRY_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: m, children: m }, m))
+        }
+      )
+    ] }),
+    symmetry.mode === "kaleidoscope" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "input",
+      {
+        type: "number",
+        "aria-label": "Kaleidoscope segments",
+        min: 2,
+        max: 32,
+        value: symmetry.segments,
+        onChange: (e) => controller.setSymmetry({ segments: Number(e.target.value) }),
+        className: "w-12 rounded bg-slate-800 px-1 py-0.5"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        type: "button",
+        className: chip(perspective.enabled),
+        "aria-pressed": perspective.enabled,
+        onClick: () => attempt(
+          () => controller.setPerspective(
+            perspective.enabled ? { enabled: false } : { enabled: true, points: perspective.points.length ? perspective.points : [{ x: canvas.width / 2, y: canvas.height * 0.4 }] }
+          )
+        ),
+        children: "Perspective"
+      }
+    ),
+    perspective.enabled && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "select",
+      {
+        "aria-label": "Vanishing points",
+        value: perspective.points.length,
+        onChange: (e) => {
+          const n = Number(e.target.value);
+          const y = canvas.height * 0.4;
+          const pts = n === 1 ? [{ x: canvas.width / 2, y }] : n === 2 ? [{ x: -canvas.width * 0.5, y }, { x: canvas.width * 1.5, y }] : [{ x: -canvas.width * 0.5, y }, { x: canvas.width * 1.5, y }, { x: canvas.width / 2, y: canvas.height * 3 }];
+          attempt(() => controller.setPerspective({ points: pts }));
+        },
+        className: "rounded bg-slate-800 px-1 py-0.5",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: 1, children: "1-point" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: 2, children: "2-point" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: 3, children: "3-point" })
+        ]
+      }
+    ),
+    /* @__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: () => tracingRef.current?.click(), children: "Tracing image\u2026" }),
+    tracing && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          type: "range",
+          "aria-label": "Tracing opacity",
+          min: 0,
+          max: 1,
+          step: 0.05,
+          value: tracing.opacity,
+          onChange: (e) => controller.updateTracing({ opacity: Number(e.target.value) }),
+          className: "w-16 accent-indigo-500"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: chip(tracing.sampleColors), "aria-pressed": tracing.sampleColors, onClick: () => controller.updateTracing({ sampleColors: !tracing.sampleColors }), children: "Trace colours" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: chip(tracing.visible), "aria-pressed": tracing.visible, onClick: () => controller.updateTracing({ visible: !tracing.visible }), children: "Show tracing" }),
+      /* @__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.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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: button, onClick: () => openRef.current?.click(), children: "Open\u2026" }),
+    /* @__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)(
+      "input",
+      {
+        ref: openRef,
+        type: "file",
+        accept: ".json,application/json",
+        "aria-label": "Open painting",
+        className: "hidden",
+        onChange: (e) => {
+          const f = e.target.files?.[0];
+          if (f) attempt(async () => controller.loadJSON(JSON.parse(await f.text())));
+          e.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "input",
+      {
+        ref: tracingRef,
+        type: "file",
+        accept: "image/*",
+        "aria-label": "Load tracing image",
+        className: "hidden",
+        onChange: (e) => {
+          const f = e.target.files?.[0];
+          if (f) attempt(async () => controller.setTracingImage({ pixels: await (0, import_paint_editor3.decodeImageBlob)(f) }));
+          e.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "input",
+      {
+        ref: refRef,
+        type: "file",
+        accept: "image/*",
+        "aria-label": "Add reference image",
+        className: "hidden",
+        onChange: (e) => {
+          const f = e.target.files?.[0];
+          if (f) attempt(async () => controller.addReferenceImage({ pixels: await (0, import_paint_editor3.decodeImageBlob)(f), name: f.name }));
+          e.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorLine, { error })
+  ] });
+};
+
+// src/paint-editor/BrushPanel.tsx
+var import_react5 = require("react");
+var import_paint_editor4 = require("@pixerate/editor/paint-editor");
+var import_jsx_runtime4 = 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 { brush, brushes } = state;
+  const paper = state.document.paper;
+  const thumbs = (0, import_react5.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 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)(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": brush.id === b.id,
+        title: `${b.name} (${b.category})`,
+        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 })
+        ]
+      },
+      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_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 } }) }),
+        " 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 } }) }),
+        " Pressure \u2192 opacity"
+      ] })
+    ] }),
+    /* @__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)(
+        "input",
+        {
+          ref: fileRef,
+          type: "file",
+          accept: ".json,application/json",
+          "aria-label": "Import brushes",
+          className: "hidden",
+          onChange: (e) => {
+            const f = e.target.files?.[0];
+            if (f) attempt(async () => controller.importBrushes(JSON.parse(await f.text())));
+            e.target.value = "";
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.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 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)(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": paper.preset === p.preset,
+          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 } })
+        },
+        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" })
+    ] }),
+    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" })) }),
+      " 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.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 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 padPoints = (0, import_react7.useRef)(null);
+  const ring = (0, import_react7.useMemo)(() => (0, import_paint_editor6.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 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 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));
+    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)(
+        "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)),
+          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));
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.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_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_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)(
+        "input",
+        {
+          "aria-label": "Hex colour",
+          defaultValue: color,
+          onBlur: (e) => attempt(() => controller.setColor(e.target.value.startsWith("#") ? e.target.value : `#${e.target.value}`)),
+          className: "w-20 rounded bg-slate-800 px-1.5 py-0.5 font-mono"
+        },
+        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_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" })
+    ] }),
+    /* @__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_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_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)(
+        "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)`,
+          className: "h-5 w-5 rounded ring-1 ring-slate-700",
+          style: { background: s.color },
+          onClick: () => controller.setColor(s.color),
+          onContextMenu: (e) => {
+            e.preventDefault();
+            controller.removeSwatch(i);
+          }
+        },
+        i
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, "aria-label": "Add swatch", onClick: () => controller.addSwatch(color), 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" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "div",
+        {
+          role: "application",
+          "aria-label": "Mixing pad",
+          className: "touch-none cursor-crosshair",
+          onPointerDown: (e) => {
+            const p = padPoint(e);
+            if (padTool === "pick") {
+              attempt(() => controller.mixingPadPick(p.x, p.y, { setColor: true }));
+              return;
+            }
+            padPoints.current = [p];
+            e.target.setPointerCapture?.(e.pointerId);
+          },
+          onPointerMove: (e) => padPoints.current?.push(padPoint(e)),
+          onPointerUp: () => {
+            const pts = padPoints.current;
+            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}` } })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.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");
+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 };
+}
+var PaintLayersPanel = ({ controller, className }) => {
+  usePaintEditorState(controller);
+  const [error, attempt] = useAttempt();
+  const [renaming, setRenaming] = (0, import_react8.useState)(null);
+  const layers = controller.listLayers();
+  const active = layers.find((l) => l.active) ?? null;
+  const move = (delta) => {
+    if (!active) return;
+    const { index, count } = siblingIndex(layers, active);
+    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" })
+    ] }),
+    /* @__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)(
+      "li",
+      {
+        role: "treeitem",
+        "aria-selected": l.active,
+        className: `flex items-center gap-1.5 rounded px-1.5 py-1 cursor-pointer ${l.active ? "bg-indigo-600/30 ring-1 ring-indigo-500" : "hover:bg-slate-800"}`,
+        style: { paddingLeft: 6 + l.depth * 12 },
+        onClick: () => controller.setActiveLayer(l.id),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": l.visible ? `Hide ${l.name}` : `Show ${l.name}`,
+              className: `w-5 text-[11px] ${l.visible ? "text-slate-200" : "text-slate-600"}`,
+              onClick: (e) => {
+                e.stopPropagation();
+                attempt(() => controller.updateLayer(l.id, { visible: !l.visible }));
+              },
+              children: l.visible ? "\u25CF" : "\u25CB"
+            }
+          ),
+          renaming === l.id ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "input",
+            {
+              autoFocus: true,
+              "aria-label": "Layer name",
+              defaultValue: l.name,
+              className: "flex-1 rounded bg-slate-800 px-1",
+              onClick: (e) => e.stopPropagation(),
+              onBlur: (e) => {
+                setRenaming(null);
+                if (e.target.value.trim() && e.target.value !== l.name) attempt(() => controller.updateLayer(l.id, { name: e.target.value }));
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") e.target.blur();
+                if (e.key === "Escape") setRenaming(null);
+              }
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime7.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.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)(
+          "input",
+          {
+            type: "range",
+            "aria-label": "Layer opacity",
+            min: 0,
+            max: 1,
+            step: 0.01,
+            value: active.opacity,
+            onChange: (e) => attempt(() => controller.updateLayer(active.id, { opacity: Number(e.target.value) })),
+            className: "flex-1 accent-indigo-500"
+          }
+        )
+      ] }),
+      /* @__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_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: m.id, children: m.label }, m.id))
+        ] })
+      ] }),
+      /* @__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_runtime7.jsx)(ErrorLine, { error })
+  ] });
+};
+
+// src/paint-editor/PaintEditor.tsx
+var import_react9 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var PaintEditor = ({ controller, fileName, height = 720, 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, 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 })
+      ] }),
+      /* @__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 })
+      ] })
+    ] })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BrushPanel,
+  ColorPanel,
+  PaintCanvas,
+  PaintEditor,
+  PaintLayersPanel,
+  PaintSlider,
+  PaintToolbar,
+  PaperPanel,
+  usePaintEditor,
+  usePaintEditorState
+});
+//# sourceMappingURL=index.cjs.map