@pixerate/editor-react 0.61.0 → 0.63.0

package/dist/{chunk-OSOGA2OJ.js → chunk-QJSMW4CM.js}

@@ -1013,7 +1013,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
 
 // src/image-editor/BrushOptionsBar.tsx
 import { useEffect as useEffect5, useState as useState6 } from "react";
-import { BRUSH_OPTION_CONTROLS, PAINT_TOOLS } from "@pixerate/editor/image-editor";
+import { BRUSH_OPTION_CONTROLS, MIXER_MIXING_OPTIONS, MIXER_OPTION_CONTROLS, PAINT_TOOLS, rgbUnitToHex } from "@pixerate/editor/image-editor";
 import { jsx as jsx6, jsxs as jsxs6 } from "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 BrushOptionsBar = ({ controller, className }) => {
@@ -1021,7 +1021,7 @@ var BrushOptionsBar = ({ controller, className }) => {
   useEffect5(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
   const [error, setError] = useState6(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);
@@ -1082,6 +1082,62 @@ var BrushOptionsBar = ({ controller, className }) => {
       },
       spec.id
     )),
+    state.activeTool === "mixer" && /* @__PURE__ */ jsxs6("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__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx6(
+          "span",
+          {
+            "aria-label": "Brush load",
+            title: mixerLoad.reservoir ? `Loaded ${rgbUnitToHex(mixerLoad.reservoir)}, ${Math.round(mixerLoad.amount * 100)}% left` : "Unloaded",
+            className: "h-6 w-6 rounded border border-slate-700",
+            style: { background: mixerLoad.reservoir ? rgbUnitToHex(mixerLoad.reservoir) : "transparent" }
+          }
+        ),
+        /* @__PURE__ */ jsx6("button", { type: "button", title: "Fill the reservoir with the foreground colour", className: chip(false), onClick: () => controller.loadMixerBrush(), children: "Load brush" }),
+        /* @__PURE__ */ jsx6("button", { type: "button", title: "Empty the picked-up colour", className: chip(false), onClick: () => controller.cleanMixerBrush(), children: "Clean brush" })
+      ] }),
+      /* @__PURE__ */ jsx6("div", { className: "flex gap-1", role: "group", "aria-label": "Mixing", children: MIXER_MIXING_OPTIONS.map((m) => /* @__PURE__ */ jsx6(
+        "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
+      )) }),
+      MIXER_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ jsx6(ControlSlider, { spec, value: mixer[spec.id], onChange: (v) => controller.setPaintOptions({ mixer: { [spec.id]: v } }) }, spec.id)),
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap gap-3 text-slate-300", children: [
+        /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx6(
+            "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__ */ jsxs6("label", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx6(
+            "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__ */ jsxs6("div", { className: "flex flex-wrap gap-3 text-slate-300", role: "group", "aria-label": "Pressure", children: [
       /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx6(
@@ -2753,4 +2809,4 @@ export {
   RefineEdgePanel,
   ImageEditor
 };
-//# sourceMappingURL=chunk-OSOGA2OJ.js.map
+//# sourceMappingURL=chunk-QJSMW4CM.js.map