@pixerate/editor-react 0.14.0 → 0.16.0

package/dist/image-editor/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,13 +17,26 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/image-editor/index.ts
 var image_editor_exports = {};
 __export(image_editor_exports, {
+  AdjustmentLayersPanel: () => AdjustmentLayersPanel,
+  ControlSlider: () => ControlSlider,
+  CurvesEditor: () => CurvesEditor,
+  Histogram: () => Histogram,
   ImageEditor: () => ImageEditor,
-  useImageEditor: () => useImageEditor
+  useImageEditor: () => useImageEditor,
+  useImageHistogram: () => useImageHistogram
 });
 module.exports = __toCommonJS(image_editor_exports);
 
@@ -36,6 +51,8 @@ function useImageEditor(options = {}) {
   const controller = controllerRef.current;
   const [state, setState] = (0, import_react.useState)(() => controller.getState());
   const [historyTicks, setHistoryTicks] = (0, import_react.useState)(0);
+  const [histogram, setHistogram] = (0, import_react.useState)(() => controller.getHistogram());
+  (0, import_react.useEffect)(() => controller.subscribeHistogram(setHistogram), [controller]);
   (0, import_react.useEffect)(() => {
     const unsub = controller.subscribe((next) => {
       setState(next);
@@ -67,6 +84,21 @@ function useImageEditor(options = {}) {
     [controller]
   );
   const resetAdjustments = (0, import_react.useCallback)(() => controller.resetAdjustments(), [controller]);
+  const upgradeProcess = (0, import_react.useCallback)(() => controller.upgradeProcess(), [controller]);
+  const addAdjustmentLayer = (0, import_react.useCallback)(
+    (init, index) => controller.addAdjustmentLayer(init, index),
+    [controller]
+  );
+  const updateAdjustmentLayer = (0, import_react.useCallback)(
+    (id, update, commitToHistory = true) => controller.updateAdjustmentLayer(id, update, commitToHistory),
+    [controller]
+  );
+  const removeAdjustmentLayer = (0, import_react.useCallback)((id) => controller.removeAdjustmentLayer(id), [controller]);
+  const moveAdjustmentLayer = (0, import_react.useCallback)((id, to) => controller.moveAdjustmentLayer(id, to), [controller]);
+  const toggleAdjustmentLayer = (0, import_react.useCallback)(
+    (id, enabled) => controller.toggleAdjustmentLayer(id, enabled),
+    [controller]
+  );
   const setDepthMask = (0, import_react.useCallback)((partial) => controller.setDepthMask(partial), [controller]);
   const resetDepthMask = (0, import_react.useCallback)(() => controller.resetDepthMask(), [controller]);
   const addAnnotation = (0, import_react.useCallback)((ann) => controller.addAnnotation(ann), [controller]);
@@ -127,6 +159,13 @@ function useImageEditor(options = {}) {
       flipVertical,
       setAdjustments,
       resetAdjustments,
+      upgradeProcess,
+      addAdjustmentLayer,
+      updateAdjustmentLayer,
+      removeAdjustmentLayer,
+      moveAdjustmentLayer,
+      toggleAdjustmentLayer,
+      histogram,
       setDepthMask,
       resetDepthMask,
       addAnnotation,
@@ -155,14 +194,445 @@ function useImageEditor(options = {}) {
       applyBackgroundRemovedImage
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [controller, state, historyTicks]
+    [controller, state, historyTicks, histogram]
   );
 }
 
 // src/image-editor/ImageEditor.tsx
-var import_react2 = require("react");
+var import_react5 = __toESM(require("react"), 1);
+var import_image_editor6 = require("@pixerate/editor/image-editor");
+
+// src/image-editor/ControlSlider.tsx
 var import_image_editor2 = require("@pixerate/editor/image-editor");
 var import_jsx_runtime = require("react/jsx-runtime");
+var ControlSlider = ({ spec, value, onChange, disabled, label }) => {
+  const name = label ?? spec.label;
+  const track = (0, import_image_editor2.controlTrackBackground)(spec);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-control-id": spec.id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: name }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: (0, import_image_editor2.formatControlValue)(spec, value) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "range",
+        min: spec.min,
+        max: spec.max,
+        step: spec.step,
+        "aria-label": name,
+        disabled,
+        value,
+        onChange: (e) => onChange(Number(e.target.value)),
+        className: "w-full accent-indigo-500 disabled:opacity-40"
+      }
+    ),
+    track && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-0.5 rounded-full opacity-70", style: { background: track } })
+  ] });
+};
+
+// src/image-editor/Histogram.tsx
+var import_react2 = require("react");
+var import_image_editor3 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FILL = {
+  luminance: "rgba(148, 163, 184, 0.45)",
+  red: "rgba(239, 68, 68, 0.45)",
+  green: "rgba(34, 197, 94, 0.45)",
+  blue: "rgba(59, 130, 246, 0.45)"
+};
+var W = 256;
+var Histogram = ({ histogram, channel = "rgb", height = 64, className = "", style }) => {
+  const channels = channel === "rgb" ? ["luminance", "red", "green", "blue"] : [channel];
+  const paths = (0, import_react2.useMemo)(
+    () => histogram && histogram.samples > 0 ? channels.map((c) => ({ c, d: (0, import_image_editor3.histogramPath)(histogram, c, W, height) })) : [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [histogram, channel, height]
+  );
+  const clipLow = histogram && histogram.samples ? Math.max(...histogram.shadows) / histogram.samples : 0;
+  const clipHigh = histogram && histogram.samples ? Math.max(...histogram.highlights) / histogram.samples : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      viewBox: `0 0 ${W} ${height}`,
+      preserveAspectRatio: "none",
+      role: "img",
+      "aria-label": histogram ? `Histogram of ${histogram.samples} pixels` : "Histogram (no data)",
+      "data-testid": "image-editor-histogram",
+      className: `w-full rounded bg-slate-950/60 ${className}`,
+      style: { height, ...style },
+      children: [
+        paths.map(({ c, d }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d, fill: FILL[c], stroke: "none" }, c)),
+        clipLow > 5e-3 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: 0, y: 0, width: 3, height, fill: "#3b82f6", "data-testid": "histogram-clip-shadows" }),
+        clipHigh > 5e-3 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: W - 3, y: 0, width: 3, height, fill: "#ef4444", "data-testid": "histogram-clip-highlights" })
+      ]
+    }
+  );
+};
+function useImageHistogram(controller) {
+  const [histogram, setHistogram] = (0, import_react2.useState)(() => controller.getHistogram());
+  (0, import_react2.useEffect)(() => controller.subscribeHistogram(setHistogram), [controller]);
+  return histogram;
+}
+
+// src/image-editor/AdjustmentLayersPanel.tsx
+var import_react4 = require("react");
+var import_image_editor5 = require("@pixerate/editor/image-editor");
+
+// src/image-editor/CurvesEditor.tsx
+var import_react3 = require("react");
+var import_image_editor4 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var BOX = 256;
+var STROKE = { master: "#e2e8f0", red: "#ef4444", green: "#22c55e", blue: "#3b82f6" };
+var CurvesEditor = ({ points, onChange, histogram, channel = "master", size = 200 }) => {
+  const svgRef = (0, import_react3.useRef)(null);
+  const [drag, setDrag] = (0, import_react3.useState)(null);
+  const toBox = (e) => {
+    const rect = svgRef.current?.getBoundingClientRect();
+    if (!rect || !rect.width || !rect.height) return { x: 0, y: 0 };
+    return { x: (e.clientX - rect.left) / rect.width * BOX, y: (e.clientY - rect.top) / rect.height * BOX };
+  };
+  const onPointerDown = (e) => {
+    const { x, y } = toBox(e);
+    let index = (0, import_image_editor4.hitTestCurvePoint)(points, x, y, BOX, BOX, 10);
+    if (index === -1) {
+      const inserted = (0, import_image_editor4.insertCurvePoint)(points, (0, import_image_editor4.boxToCurvePoint)(x, y, BOX, BOX));
+      onChange(inserted.points, true);
+      index = inserted.index;
+    } else {
+      onChange(points, true);
+    }
+    setDrag(index);
+    e.target.setPointerCapture?.(e.pointerId);
+  };
+  const onPointerMove = (e) => {
+    if (drag === null) return;
+    onChange((0, import_image_editor4.moveCurvePoint)(points, drag, (0, import_image_editor4.boxToCurvePoint)(toBox(e).x, toBox(e).y, BOX, BOX)), false);
+  };
+  const onDoubleClick = (e) => {
+    const { x, y } = toBox(e);
+    const index = (0, import_image_editor4.hitTestCurvePoint)(points, x, y, BOX, BOX, 10);
+    if (index !== -1 && points.length > 2) onChange((0, import_image_editor4.removeCurvePoint)(points, index), true);
+  };
+  const histChannel = channel === "master" ? "luminance" : channel;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "svg",
+    {
+      ref: svgRef,
+      viewBox: `0 0 ${BOX} ${BOX}`,
+      width: size,
+      height: size,
+      role: "application",
+      "aria-label": `${channel} curve`,
+      "data-testid": "curves-editor",
+      className: "rounded bg-slate-950/70 touch-none select-none cursor-crosshair",
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: () => setDrag(null),
+      onPointerCancel: () => setDrag(null),
+      onDoubleClick,
+      children: [
+        histogram && histogram.samples > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: (0, import_image_editor4.histogramPath)(histogram, histChannel, BOX, BOX), fill: "rgba(148, 163, 184, 0.25)" }),
+        [64, 128, 192].map((v) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { stroke: "rgba(148, 163, 184, 0.2)", strokeWidth: 1, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: v, y1: 0, x2: v, y2: BOX }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, y1: v, x2: BOX, y2: v })
+        ] }, v)),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, y1: BOX, x2: BOX, y2: 0, stroke: "rgba(148, 163, 184, 0.35)", strokeDasharray: "4 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: (0, import_image_editor4.curveSvgPath)(points, BOX, BOX), fill: "none", stroke: STROKE[channel], strokeWidth: 2 }),
+        points.map((p, i) => {
+          const b = (0, import_image_editor4.curvePointToBox)(p, BOX, BOX);
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "circle",
+            {
+              cx: b.x,
+              cy: b.y,
+              r: 5,
+              fill: drag === i ? STROKE[channel] : "#0f172a",
+              stroke: STROKE[channel],
+              strokeWidth: 2,
+              "aria-label": `Point ${p.input} to ${p.output}`
+            },
+            i
+          );
+        })
+      ]
+    }
+  );
+};
+
+// src/image-editor/AdjustmentLayersPanel.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CHANNELS = [
+  { id: "master", label: "RGB" },
+  { id: "red", label: "Red" },
+  { id: "green", label: "Green" },
+  { id: "blue", label: "Blue" }
+];
+var TONES = [
+  { id: "shadows", label: "Shadows" },
+  { id: "midtones", label: "Midtones" },
+  { id: "highlights", label: "Highlights" }
+];
+var selectClass = "bg-slate-800 border border-slate-700 rounded px-1.5 py-1 text-slate-200";
+var chipClass = (on) => `px-2 py-0.5 rounded text-[10px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-400 hover:text-slate-200"}`;
+var HueRangeStrip = ({ bounds }) => {
+  const pts = Array.from({ length: 73 }, (_, i) => `${i / 72 * 360},${20 - (0, import_image_editor5.hueRangeWeight)({ bounds }, i * 5) * 18}`).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { viewBox: "0 0 360 20", preserveAspectRatio: "none", className: "w-full h-4 rounded", "data-testid": "hue-range-strip", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("linearGradient", { id: "pixerate-hue-strip", children: [0, 60, 120, 180, 240, 300, 360].map((h) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: `${h / 360 * 100}%`, stopColor: `hsl(${h}, 90%, 50%)` }, h)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: 360, height: 20, fill: "url(#pixerate-hue-strip)", opacity: 0.6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: pts, fill: "none", stroke: "#fff", strokeWidth: 1.5 })
+  ] });
+};
+var AdjustmentLayersPanel = ({ controller, layers: layersProp, histogram }) => {
+  const follow = layersProp === void 0;
+  const [, setTick] = (0, import_react4.useState)(0);
+  (0, import_react4.useEffect)(() => follow ? controller.subscribe(() => setTick((n) => n + 1)) : void 0, [controller, follow]);
+  const layers = layersProp ?? controller.getAdjustmentLayers();
+  const [newKind, setNewKind] = (0, import_react4.useState)("curves");
+  const [selectedId, setSelectedId] = (0, import_react4.useState)(null);
+  const [channel, setChannel] = (0, import_react4.useState)("master");
+  const [range, setRange] = (0, import_react4.useState)(-1);
+  const [tone, setTone] = (0, import_react4.useState)("midtones");
+  const selected = layers.find((l) => l.id === selectedId) ?? null;
+  const topFirst = [...layers].reverse();
+  const setParam = (layer, path, value, commit = true) => controller.updateAdjustmentLayer(layer.id, { params: (0, import_image_editor5.setControlPath)(layer.params, path, value) }, commit);
+  const slider = (layer, spec, label) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    ControlSlider,
+    {
+      spec,
+      label,
+      value: Number((0, import_image_editor5.getControlPath)(layer.params, spec.id) ?? spec.default),
+      onChange: (v) => setParam(layer, spec.id, v)
+    },
+    spec.id
+  );
+  const controlsOf = (layer, filter = () => true) => import_image_editor5.ADJUSTMENT_LAYER_CONTROLS[layer.kind].filter(filter);
+  const checkbox = (layer, path, label) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "input",
+      {
+        type: "checkbox",
+        checked: Boolean((0, import_image_editor5.getControlPath)(layer.params, path)),
+        onChange: (e) => setParam(layer, path, e.target.checked),
+        className: "accent-indigo-500"
+      }
+    ),
+    label
+  ] });
+  const editor = (layer) => {
+    switch (layer.kind) {
+      case "curves":
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Curve channel", children: CHANNELS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: chipClass(channel === c.id), onClick: () => setChannel(c.id), children: c.label }, c.id)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            CurvesEditor,
+            {
+              points: layer.params[channel],
+              channel,
+              histogram,
+              onChange: (points, commit) => setParam(layer, channel, points, commit)
+            }
+          )
+        ] });
+      case "levels":
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Levels channel", children: CHANNELS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: chipClass(channel === c.id), onClick: () => setChannel(c.id), children: c.label }, c.id)) }),
+          controlsOf(layer, (s) => s.id.startsWith(`${channel}.`)).map((s) => slider(layer, s))
+        ] });
+      case "hueSaturation":
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "Hue range", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: chipClass(range === -1), onClick: () => setRange(-1), children: "Master" }),
+            import_image_editor5.HUE_RANGE_LABELS.map((name, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: chipClass(range === i), onClick: () => setRange(i), disabled: layer.params.colorize, children: name }, name))
+          ] }),
+          range >= 0 && !layer.params.colorize && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HueRangeStrip, { bounds: layer.params.ranges[range].bounds }),
+          controlsOf(layer, (s) => range === -1 || layer.params.colorize ? !s.id.startsWith("ranges.") : s.id.startsWith(`ranges.${range}.`)).map(
+            (s) => slider(layer, s)
+          ),
+          range === -1 && checkbox(layer, "colorize", "Colorize")
+        ] });
+      case "colorBalance":
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Tone", children: TONES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: chipClass(tone === t.id), onClick: () => setTone(t.id), children: t.label }, t.id)) }),
+          controlsOf(layer, (s) => s.id.startsWith(`${tone}.`)).map((s) => slider(layer, s)),
+          checkbox(layer, "preserveLuminosity", "Preserve luminosity")
+        ] });
+      case "blackWhite":
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          controlsOf(layer).map((s) => slider(layer, s)),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: layer.params.tint !== null,
+                onChange: (e) => setParam(layer, "tint", e.target.checked ? "#e1d3b3" : null),
+                className: "accent-indigo-500"
+              }
+            ),
+            "Tint",
+            layer.params.tint && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "input",
+              {
+                type: "color",
+                "aria-label": "Tint colour",
+                value: layer.params.tint,
+                onChange: (e) => setParam(layer, "tint", e.target.value),
+                className: "h-5 w-8 bg-transparent"
+              }
+            )
+          ] })
+        ] });
+      case "photoFilter":
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+            "Filter colour",
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "input",
+              {
+                type: "color",
+                "aria-label": "Filter colour",
+                value: layer.params.color,
+                onChange: (e) => setParam(layer, "color", e.target.value),
+                className: "h-5 w-8 bg-transparent"
+              }
+            )
+          ] }),
+          controlsOf(layer).map((s) => slider(layer, s)),
+          checkbox(layer, "preserveLuminosity", "Preserve luminosity")
+        ] });
+      case "invert":
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-slate-500 text-[11px]", children: "Invert has no settings." });
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col gap-2", children: controlsOf(layer).map((s) => slider(layer, s)) });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2 text-xs", "data-testid": "adjustment-layers-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Adjustment Layers" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "select",
+        {
+          "aria-label": "New adjustment layer kind",
+          className: `${selectClass} flex-1`,
+          value: newKind,
+          onChange: (e) => setNewKind(e.target.value),
+          children: import_image_editor5.ADJUSTMENT_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: k.kind, children: k.label }, k.kind))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "px-2 py-1 rounded bg-indigo-600 text-white hover:bg-indigo-500",
+          onClick: () => {
+            setSelectedId(controller.addAdjustmentLayer(newKind));
+            setChannel("master");
+            setRange(-1);
+          },
+          children: "Add Layer"
+        }
+      )
+    ] }),
+    topFirst.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "flex flex-col gap-1", "aria-label": "Adjustment layers", children: topFirst.map((layer) => {
+      const index = layers.indexOf(layer);
+      const label = layer.name || (0, import_image_editor5.adjustmentKindLabel)(layer.kind);
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "li",
+        {
+          className: `flex items-center gap-1.5 rounded px-1.5 py-1 ${layer.id === selectedId ? "bg-indigo-600/20 ring-1 ring-indigo-500/50" : "bg-slate-800/60"}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                "aria-label": `Show ${label}`,
+                checked: layer.enabled,
+                onChange: () => controller.toggleAdjustmentLayer(layer.id),
+                className: "accent-indigo-500"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                className: `flex-1 text-left truncate ${layer.enabled ? "text-slate-200" : "text-slate-500 line-through"}`,
+                onClick: () => setSelectedId(layer.id === selectedId ? null : layer.id),
+                "aria-pressed": layer.id === selectedId,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Move ${label} up`,
+                disabled: index === layers.length - 1,
+                onClick: () => controller.moveAdjustmentLayer(layer.id, index + 1),
+                className: "px-1 text-slate-400 hover:text-slate-200 disabled:opacity-30",
+                children: "\u2191"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Move ${label} down`,
+                disabled: index === 0,
+                onClick: () => controller.moveAdjustmentLayer(layer.id, index - 1),
+                className: "px-1 text-slate-400 hover:text-slate-200 disabled:opacity-30",
+                children: "\u2193"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Remove ${label}`,
+                onClick: () => {
+                  controller.removeAdjustmentLayer(layer.id);
+                  if (selectedId === layer.id) setSelectedId(null);
+                },
+                className: "px-1 text-rose-400 hover:text-rose-300",
+                children: "\u2715"
+              }
+            )
+          ]
+        },
+        layer.id
+      );
+    }) }),
+    selected && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2 rounded border border-slate-700/60 p-2", "data-testid": "adjustment-layer-editor", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Blend" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "select",
+          {
+            "aria-label": "Blend mode",
+            className: `${selectClass} flex-1`,
+            value: selected.blend,
+            onChange: (e) => controller.updateAdjustmentLayer(selected.id, { blend: e.target.value }),
+            children: import_image_editor5.BLEND_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: m.id, children: m.label }, m.id))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ControlSlider,
+        {
+          spec: import_image_editor5.ADJUSTMENT_LAYER_OPACITY_CONTROL,
+          label: "Layer opacity",
+          value: selected.opacity,
+          onChange: (v) => controller.updateAdjustmentLayer(selected.id, { opacity: v })
+        }
+      ),
+      editor(selected)
+    ] })
+  ] });
+};
+
+// src/image-editor/ImageEditor.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var ImageEditor = ({
   editor: externalEditor,
   src,
@@ -177,16 +647,17 @@ var ImageEditor = ({
   const internalEditor = useImageEditor({ image: src });
   const editor = externalEditor || internalEditor;
   const { state, controller } = editor;
-  const canvasRef = (0, import_react2.useRef)(null);
-  const containerRef = (0, import_react2.useRef)(null);
-  const [activeTab, setActiveTab] = (0, import_react2.useState)("crop");
-  const [activeCropRatio, setActiveCropRatio] = (0, import_react2.useState)(null);
-  const [inpaintPrompt, setInpaintPrompt] = (0, import_react2.useState)("");
-  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react2.useState)("annotations");
-  const [isRemovingBg, setIsRemovingBg] = (0, import_react2.useState)(false);
-  const [isInpainting, setIsInpainting] = (0, import_react2.useState)(false);
-  const [aiError, setAiError] = (0, import_react2.useState)(null);
-  const [aiSuccess, setAiSuccess] = (0, import_react2.useState)(null);
+  const legacyProcess = (0, import_image_editor6.normalizeProcessVersion)(state.adjustments.process) < import_image_editor6.LATEST_PROCESS_VERSION;
+  const canvasRef = (0, import_react5.useRef)(null);
+  const containerRef = (0, import_react5.useRef)(null);
+  const [activeTab, setActiveTab] = (0, import_react5.useState)("crop");
+  const [activeCropRatio, setActiveCropRatio] = (0, import_react5.useState)(null);
+  const [inpaintPrompt, setInpaintPrompt] = (0, import_react5.useState)("");
+  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react5.useState)("annotations");
+  const [isRemovingBg, setIsRemovingBg] = (0, import_react5.useState)(false);
+  const [isInpainting, setIsInpainting] = (0, import_react5.useState)(false);
+  const [aiError, setAiError] = (0, import_react5.useState)(null);
+  const [aiSuccess, setAiSuccess] = (0, import_react5.useState)(null);
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
   const handleRemoveBackground = async () => {
@@ -248,18 +719,18 @@ var ImageEditor = ({
       setIsInpainting(false);
     }
   };
-  const [activeColor, setActiveColor] = (0, import_react2.useState)("#ef4444");
-  const [strokeWidth, setStrokeWidth] = (0, import_react2.useState)(3);
-  const [fontSize, setFontSize] = (0, import_react2.useState)(24);
-  const [textInput, setTextInput] = (0, import_react2.useState)("");
-  const draftAnnotationRef = (0, import_react2.useRef)(null);
-  const draftCropRef = (0, import_react2.useRef)(null);
-  const cropDragInfoRef = (0, import_react2.useRef)(null);
-  const annotationDragInfoRef = (0, import_react2.useRef)(null);
-  const isDrawingRef = (0, import_react2.useRef)(false);
-  const currentPathRef = (0, import_react2.useRef)([]);
-  const dragStartPointRef = (0, import_react2.useRef)(null);
-  const renderCanvas = (0, import_react2.useCallback)(
+  const [activeColor, setActiveColor] = (0, import_react5.useState)("#ef4444");
+  const [strokeWidth, setStrokeWidth] = (0, import_react5.useState)(3);
+  const [fontSize, setFontSize] = (0, import_react5.useState)(24);
+  const [textInput, setTextInput] = (0, import_react5.useState)("");
+  const draftAnnotationRef = (0, import_react5.useRef)(null);
+  const draftCropRef = (0, import_react5.useRef)(null);
+  const cropDragInfoRef = (0, import_react5.useRef)(null);
+  const annotationDragInfoRef = (0, import_react5.useRef)(null);
+  const isDrawingRef = (0, import_react5.useRef)(false);
+  const currentPathRef = (0, import_react5.useRef)([]);
+  const dragStartPointRef = (0, import_react5.useRef)(null);
+  const renderCanvas = (0, import_react5.useCallback)(
     async (draftAnnotation, draftCrop) => {
       const canvas = canvasRef.current;
       const container = containerRef.current;
@@ -278,7 +749,7 @@ var ImageEditor = ({
     },
     [controller, activeTab]
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
     const caf = typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame : (id) => clearTimeout(id);
     const animId = raf(() => {
@@ -286,12 +757,12 @@ var ImageEditor = ({
     });
     return () => caf(animId);
   }, [renderCanvas, state]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (activeTab === "crop" && editor.state.activeTool !== "crop") {
       editor.setTool("crop");
     }
   }, [activeTab, editor]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     if (typeof ResizeObserver !== "undefined") {
@@ -328,8 +799,8 @@ var ImageEditor = ({
         width: state.imageDimensions.width,
         height: state.imageDimensions.height
       };
-      const handle = (0, import_image_editor2.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
-      const startImgPt = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
+      const handle = (0, import_image_editor6.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
+      const startImgPt = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
       if (handle) {
         cropDragInfoRef.current = {
           handle,
@@ -348,12 +819,12 @@ var ImageEditor = ({
       return;
     }
     if (activeTab === "annotate") {
-      const imgPt = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+      const imgPt = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
       dragStartPointRef.current = imgPt;
       if (state.activeTool === "select") {
         for (let i = state.annotations.length - 1; i >= 0; i--) {
           const ann = state.annotations[i];
-          if ((0, import_image_editor2.hitTestAnnotation)(imgPt, ann)) {
+          if ((0, import_image_editor6.hitTestAnnotation)(imgPt, ann)) {
             editor.selectAnnotation(ann.id);
             annotationDragInfoRef.current = {
               annId: ann.id,
@@ -390,7 +861,7 @@ var ImageEditor = ({
     if (activeTab === "crop") {
       const drag = cropDragInfoRef.current;
       if (drag) {
-        const currentImgPt = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
+        const currentImgPt = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
         let newCrop;
         if (drag.handle === "new") {
           const minX = Math.max(0, Math.min(drag.startImgPt.x, currentImgPt.x));
@@ -404,7 +875,7 @@ var ImageEditor = ({
             height: Math.round(Math.max(20, maxY - minY))
           };
         } else {
-          newCrop = (0, import_image_editor2.calculateCropDrag)(
+          newCrop = (0, import_image_editor6.calculateCropDrag)(
             drag.startCrop,
             drag.handle,
             drag.startImgPt,
@@ -424,15 +895,15 @@ var ImageEditor = ({
           width: state.imageDimensions.width,
           height: state.imageDimensions.height
         };
-        const handle = (0, import_image_editor2.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
-        canvas.style.cursor = (0, import_image_editor2.getCropCursor)(handle, state.transform);
+        const handle = (0, import_image_editor6.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
+        canvas.style.cursor = (0, import_image_editor6.getCropCursor)(handle, state.transform);
       }
       return;
     }
     if (activeTab === "annotate") {
       if (annotationDragInfoRef.current) {
         const drag = annotationDragInfoRef.current;
-        const currentImgPt2 = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+        const currentImgPt2 = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
         const dx = currentImgPt2.x - drag.startImgPt.x;
         const dy = currentImgPt2.y - drag.startImgPt.y;
         editor.updateAnnotation(drag.annId, {
@@ -444,10 +915,10 @@ var ImageEditor = ({
       const startPt = dragStartPointRef.current;
       if (!startPt) {
         if (state.activeTool === "select") {
-          const imgPt = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+          const imgPt = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
           let hovered = false;
           for (let i = state.annotations.length - 1; i >= 0; i--) {
-            if ((0, import_image_editor2.hitTestAnnotation)(imgPt, state.annotations[i])) {
+            if ((0, import_image_editor6.hitTestAnnotation)(imgPt, state.annotations[i])) {
               hovered = true;
               break;
             }
@@ -458,7 +929,7 @@ var ImageEditor = ({
         }
         return;
       }
-      const currentImgPt = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+      const currentImgPt = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
       if (state.activeTool === "pen" && isDrawingRef.current) {
         currentPathRef.current.push(currentImgPt);
         const draft = {
@@ -553,7 +1024,7 @@ var ImageEditor = ({
       }
       const startPt = dragStartPointRef.current;
       if (startPt) {
-        const currentImgPt = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+        const currentImgPt = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
         if (state.activeTool === "pen" && isDrawingRef.current) {
           if (currentPathRef.current.length > 1) {
             editor.addAnnotation({
@@ -649,15 +1120,15 @@ var ImageEditor = ({
       link.click();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: `flex flex-col bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-2xl text-slate-100 ${className}`,
       style,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center justify-between px-4 py-3 bg-slate-950/80 border-b border-slate-800 gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-wrap items-center justify-between px-4 py-3 bg-slate-950/80 border-b border-slate-800 gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 type: "button",
@@ -669,7 +1140,7 @@ var ImageEditor = ({
                 children: "Transform & Crop"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 type: "button",
@@ -681,7 +1152,7 @@ var ImageEditor = ({
                 children: "Adjustments"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 type: "button",
@@ -693,7 +1164,7 @@ var ImageEditor = ({
                 children: "Annotations"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 type: "button",
@@ -705,7 +1176,7 @@ var ImageEditor = ({
                 children: "Depth Mask"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "button",
               {
                 type: "button",
@@ -715,14 +1186,14 @@ var ImageEditor = ({
                 },
                 className: `px-3 py-1.5 rounded-md font-medium transition-colors flex items-center gap-1.5 ${activeTab === "ai" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
                   "AI Tools"
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 type: "button",
@@ -733,7 +1204,7 @@ var ImageEditor = ({
                 children: "\u21A9"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 type: "button",
@@ -744,7 +1215,7 @@ var ImageEditor = ({
                 children: "\u21AA"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 type: "button",
@@ -753,8 +1224,8 @@ var ImageEditor = ({
                 children: "Reset"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 type: "button",
@@ -764,11 +1235,11 @@ var ImageEditor = ({
                 children: "-"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
               Math.round(state.zoom * 100),
               "%"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 type: "button",
@@ -778,8 +1249,8 @@ var ImageEditor = ({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 type: "button",
@@ -790,7 +1261,7 @@ var ImageEditor = ({
                 children: "Hold Compare"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 type: "button",
@@ -801,13 +1272,13 @@ var ImageEditor = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {
               ref: containerRef,
               className: "relative flex-1 h-[360px] md:h-full min-h-[320px] bg-slate-950 overflow-hidden select-none",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "canvas",
                 {
                   ref: canvasRef,
@@ -820,11 +1291,11 @@ var ImageEditor = ({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full md:w-80 bg-slate-900/90 border-t md:border-t-0 md:border-l border-slate-800 p-4 overflow-y-auto h-auto md:h-full md:max-h-[560px]", children: [
-            activeTab === "crop" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-full md:w-80 bg-slate-900/90 border-t md:border-t-0 md:border-l border-slate-800 p-4 overflow-y-auto h-auto md:h-full md:max-h-[560px]", children: [
+            activeTab === "crop" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -836,7 +1307,7 @@ var ImageEditor = ({
                     children: "Freeform"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -848,7 +1319,7 @@ var ImageEditor = ({
                     children: "1:1 Square"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -860,7 +1331,7 @@ var ImageEditor = ({
                     children: "4:3 Standard"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -872,7 +1343,7 @@ var ImageEditor = ({
                     children: "16:9 Wide"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -884,7 +1355,7 @@ var ImageEditor = ({
                     children: "3:2 Photo"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -897,10 +1368,10 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -909,7 +1380,7 @@ var ImageEditor = ({
                     children: "Rotate -90\xB0"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -918,7 +1389,7 @@ var ImageEditor = ({
                     children: "Rotate +90\xB0"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -927,7 +1398,7 @@ var ImageEditor = ({
                     children: "Flip Horizontal"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -938,10 +1409,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "adjust" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            activeTab === "adjust" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -951,136 +1422,49 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Brightness" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.adjustments.brightness })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "input",
-                  {
-                    type: "range",
-                    min: "-100",
-                    max: "100",
-                    value: state.adjustments.brightness,
-                    onChange: (e) => editor.setAdjustments({ brightness: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Contrast" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.adjustments.contrast })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "input",
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Histogram, { histogram: editor.histogram }),
+              import_image_editor6.IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react5.default.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  ControlSlider,
                   {
-                    type: "range",
-                    min: "-100",
-                    max: "100",
-                    value: state.adjustments.contrast,
-                    onChange: (e) => editor.setAdjustments({ contrast: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
+                    spec,
+                    value: (0, import_image_editor6.readAdjustmentControls)(state.adjustments)[spec.id],
+                    disabled: spec.requiresProcess !== void 0 && legacyProcess,
+                    onChange: (v) => editor.setAdjustments({ [spec.id]: v })
                   }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Saturation" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.adjustments.saturation })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "input",
-                  {
-                    type: "range",
-                    min: "-100",
-                    max: "100",
-                    value: state.adjustments.saturation,
-                    onChange: (e) => editor.setAdjustments({ saturation: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Exposure" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.adjustments.exposure })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "input",
-                  {
-                    type: "range",
-                    min: "-100",
-                    max: "100",
-                    value: state.adjustments.exposure,
-                    onChange: (e) => editor.setAdjustments({ exposure: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Warmth / Temperature" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.adjustments.temperature })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "input",
-                  {
-                    type: "range",
-                    min: "-100",
-                    max: "100",
-                    value: state.adjustments.temperature,
-                    onChange: (e) => editor.setAdjustments({ temperature: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Blur" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-mono", children: [
-                    state.adjustments.blur,
-                    "px"
-                  ] })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "input",
-                  {
-                    type: "range",
-                    min: "0",
-                    max: "30",
-                    value: state.adjustments.blur,
-                    onChange: (e) => editor.setAdjustments({ blur: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Opacity" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-mono", children: [
-                    Math.round(state.adjustments.opacity * 100),
-                    "%"
-                  ] })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "input",
+                ),
+                spec.id === "tint" && legacyProcess && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "div",
                   {
-                    type: "range",
-                    min: "0",
-                    max: "1",
-                    step: "0.05",
-                    value: state.adjustments.opacity,
-                    onChange: (e) => editor.setAdjustments({ opacity: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
+                    className: "flex items-center justify-between gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-200",
+                    "data-testid": "image-editor-process-notice",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => editor.upgradeProcess(),
+                          className: "shrink-0 rounded bg-amber-500/20 px-2 py-0.5 hover:bg-amber-500/30",
+                          children: "Update"
+                        }
+                      )
+                    ]
                   }
                 )
-              ] })
+              ] }, spec.id)),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                AdjustmentLayersPanel,
+                {
+                  controller,
+                  layers: state.adjustments.layers,
+                  histogram: editor.histogram
+                }
+              ) })
             ] }),
-            activeTab === "annotate" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            activeTab === "annotate" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "button",
                 {
                   type: "button",
@@ -1090,9 +1474,9 @@ var ImageEditor = ({
                 },
                 t
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 mt-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "text-slate-400", children: "Color:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 mt-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "text-slate-400", children: "Color:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "input",
                   {
                     type: "color",
@@ -1101,15 +1485,15 @@ var ImageEditor = ({
                     className: "w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 ml-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Width:" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-mono", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 ml-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Width:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-mono", children: [
                       strokeWidth,
                       "px"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "input",
                     {
                       type: "range",
@@ -1122,10 +1506,10 @@ var ImageEditor = ({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "input",
                   {
                     type: "text",
@@ -1136,7 +1520,7 @@ var ImageEditor = ({
                     className: "flex-1 bg-slate-950 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1146,14 +1530,14 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between text-slate-400", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Font Size:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-mono", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between text-slate-400", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Font Size:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-mono", children: [
                   fontSize,
                   "px"
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "input",
                 {
                   type: "range",
@@ -1164,14 +1548,14 @@ var ImageEditor = ({
                   className: "w-full accent-indigo-500"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-slate-400", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-slate-400", children: [
                   "Layers (",
                   state.annotations.length,
                   ")"
                 ] }),
-                state.selectedAnnotationId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                state.selectedAnnotationId && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1180,7 +1564,7 @@ var ImageEditor = ({
                     children: "Delete Selected"
                   }
                 ),
-                state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1191,10 +1575,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "depth" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            activeTab === "depth" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1204,8 +1588,8 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "input",
                   {
                     type: "checkbox",
@@ -1214,12 +1598,12 @@ var ImageEditor = ({
                     className: "rounded accent-indigo-500"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Enable Depth / Alpha Mask" })
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Enable Depth / Alpha Mask" })
               ] }),
-              state.depthMask.enabled && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              state.depthMask.enabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "input",
                     {
                       type: "text",
@@ -1230,8 +1614,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1240,7 +1624,7 @@ var ImageEditor = ({
                       children: "Threshold Mode"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1250,12 +1634,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Depth Start (Lower):" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Depth Start (Lower):" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "input",
                     {
                       type: "range",
@@ -1269,12 +1653,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Depth Stop (Upper):" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Depth Stop (Upper):" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "input",
                     {
                       type: "range",
@@ -1288,12 +1672,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Softness:" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.depthMask.softness })
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Softness:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-mono", children: state.depthMask.softness })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "input",
                     {
                       type: "range",
@@ -1305,8 +1689,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "input",
                     {
                       type: "checkbox",
@@ -1315,52 +1699,52 @@ var ImageEditor = ({
                       className: "rounded accent-indigo-500"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Invert Mask" })
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Invert Mask" })
                 ] })
               ] })
             ] }),
-            activeTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" }) }),
+            activeTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" }) }),
                     "Background Removal"
                   ] }),
-                  isRemovingBg && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-900/60 text-indigo-300 animate-pulse", children: "Removing..." })
+                  isRemovingBg && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-900/60 text-indigo-300 animate-pulse", children: "Removing..." })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: handleRemoveBackground,
                     disabled: isRemovingBg || isInpainting,
                     className: "mt-1 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2",
-                    children: isRemovingBg ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                    children: isRemovingBg ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Removing Background..."
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
                       "Remove Background"
                     ] })
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21.64 3.64-1.28-1.28a1.2 1.2 0 0 0-1.7 0l-9.72 9.72-1.94 4.86 4.86-1.94 9.72-9.72a1.2 1.2 0 0 0 .06-1.64z" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m14 7 3 3" })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m21.64 3.64-1.28-1.28a1.2 1.2 0 0 0-1.7 0l-9.72 9.72-1.94 4.86 4.86-1.94 9.72-9.72a1.2 1.2 0 0 0 .06-1.64z" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m14 7 3 3" })
                     ] }),
                     "Generative Inpainting"
                   ] }),
-                  isInpainting && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-900/60 text-purple-300 animate-pulse", children: "Inpainting..." })
+                  isInpainting && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-900/60 text-purple-300 animate-pulse", children: "Inpainting..." })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "textarea",
                     {
                       id: "ai-inpaint-prompt-react",
@@ -1372,10 +1756,10 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -1388,7 +1772,7 @@ var ImageEditor = ({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -1403,25 +1787,25 @@ var ImageEditor = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: handleInpaint,
                     disabled: isInpainting || isRemovingBg || !inpaintPrompt.trim(),
                     className: "mt-1 px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2",
-                    children: isInpainting ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                    children: isInpainting ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Generating Inpaint..."
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
                       "Apply Inpainting"
                     ] })
                   }
                 )
               ] }),
-              aiError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
-              aiSuccess && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
+              aiError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
+              aiSuccess && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
             ] })
           ] })
         ] })
@@ -1431,7 +1815,12 @@ var ImageEditor = ({
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AdjustmentLayersPanel,
+  ControlSlider,
+  CurvesEditor,
+  Histogram,
   ImageEditor,
-  useImageEditor
+  useImageEditor,
+  useImageHistogram
 });
 //# sourceMappingURL=index.cjs.map