@pixerate/editor-react 0.62.0 → 0.63.0

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

@@ -181,9 +181,11 @@ interface BrushOptionsBarProps {
     className?: string;
 }
 /**
- * The paint tools: Move / Brush / Eraser, the brush's size, hardness, opacity, flow and smoothing,
- * pressure toggles, the foreground and background colours (D resets, X swaps) and Edit › Fill /
- * Clear on the active layer. Shortcuts are handled by `handlePaintShortcut` in the editor.
+ * The paint tools: Move / Brush / Mixer / Eraser, the brush's size, hardness, opacity, flow and
+ * smoothing, pressure toggles, the foreground and background colours (D resets, X swaps) and
+ * Edit › Fill / Clear on the active layer. With the Mixer Brush: its load (Load brush / Clean
+ * brush), Wet / Load / Mix, load and clean each stroke, and the RGB / Pigment mixing toggle.
+ * Shortcuts are handled by `handlePaintShortcut` in the editor.
  */
 declare const BrushOptionsBar: React__default.FC<BrushOptionsBarProps>;
 

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

@@ -181,9 +181,11 @@ interface BrushOptionsBarProps {
     className?: string;
 }
 /**
- * The paint tools: Move / Brush / Eraser, the brush's size, hardness, opacity, flow and smoothing,
- * pressure toggles, the foreground and background colours (D resets, X swaps) and Edit › Fill /
- * Clear on the active layer. Shortcuts are handled by `handlePaintShortcut` in the editor.
+ * The paint tools: Move / Brush / Mixer / Eraser, the brush's size, hardness, opacity, flow and
+ * smoothing, pressure toggles, the foreground and background colours (D resets, X swaps) and
+ * Edit › Fill / Clear on the active layer. With the Mixer Brush: its load (Load brush / Clean
+ * brush), Wet / Load / Mix, load and clean each stroke, and the RGB / Pigment mixing toggle.
+ * Shortcuts are handled by `handlePaintShortcut` in the editor.
  */
 declare const BrushOptionsBar: React__default.FC<BrushOptionsBarProps>;
 

package/dist/image-editor/index.js

@@ -10,7 +10,7 @@ import {
   SelectionOptionsBar,
   useImageEditor,
   useImageHistogram
-} from "../chunk-OSOGA2OJ.js";
+} from "../chunk-QJSMW4CM.js";
 export {
   AdjustmentLayersPanel,
   BrushOptionsBar,

package/dist/index.cjs

@@ -4600,7 +4600,7 @@ var BrushOptionsBar = ({ controller, className }) => {
   (0, import_react39.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
   const [error, setError] = (0, import_react39.useState)(null);
   const state = controller.getState();
-  const { brush, foreground, background } = state.paint;
+  const { brush, foreground, background, mixer, mixerLoad } = state.paint;
   const attempt = (fn) => {
     try {
       setError(null);
@@ -4661,6 +4661,62 @@ var BrushOptionsBar = ({ controller, className }) => {
       },
       spec.id
     )),
+    state.activeTool === "mixer" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-2 border-t border-slate-800 pt-2", role: "group", "aria-label": "Mixer Brush", "data-testid": "mixer-options", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          "span",
+          {
+            "aria-label": "Brush load",
+            title: mixerLoad.reservoir ? `Loaded ${(0, import_image_editor7.rgbUnitToHex)(mixerLoad.reservoir)}, ${Math.round(mixerLoad.amount * 100)}% left` : "Unloaded",
+            className: "h-6 w-6 rounded border border-slate-700",
+            style: { background: mixerLoad.reservoir ? (0, import_image_editor7.rgbUnitToHex)(mixerLoad.reservoir) : "transparent" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", title: "Fill the reservoir with the foreground colour", className: chip(false), onClick: () => controller.loadMixerBrush(), children: "Load brush" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", title: "Empty the picked-up colour", className: chip(false), onClick: () => controller.cleanMixerBrush(), children: "Clean brush" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Mixing", children: import_image_editor7.MIXER_MIXING_OPTIONS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": mixer.mixing === m.id,
+          title: m.title,
+          className: chip(mixer.mixing === m.id),
+          onClick: () => controller.setPaintOptions({ mixer: { mixing: m.id } }),
+          children: m.label
+        },
+        m.id
+      )) }),
+      import_image_editor7.MIXER_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ControlSlider, { spec, value: mixer[spec.id], onChange: (v) => controller.setPaintOptions({ mixer: { [spec.id]: v } }) }, spec.id)),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": "Load the brush after each stroke",
+              checked: mixer.loadEachStroke,
+              onChange: (e) => controller.setPaintOptions({ mixer: { loadEachStroke: e.target.checked } }),
+              className: "accent-indigo-500"
+            }
+          ),
+          "Load each stroke"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": "Clean the brush after each stroke",
+              checked: mixer.cleanEachStroke,
+              onChange: (e) => controller.setPaintOptions({ mixer: { cleanEachStroke: e.target.checked } }),
+              className: "accent-indigo-500"
+            }
+          ),
+          "Clean each stroke"
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", role: "group", "aria-label": "Pressure", children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(