@pixerate/editor-react 0.16.0 → 0.17.0

package/dist/{chunk-XTFR3IMK.js → chunk-ZU54BMDC.js}

@@ -159,7 +159,7 @@ function useImageEditor(options = {}) {
 }
 
 // src/image-editor/ImageEditor.tsx
-import React4, { useRef as useRef3, useEffect as useEffect4, useState as useState5, useCallback as useCallback2 } from "react";
+import React6, { useRef as useRef3, useEffect as useEffect4, useState as useState7, useCallback as useCallback2 } from "react";
 import {
   canvasToImagePoint,
   hitTestCrop,
@@ -169,7 +169,9 @@ import {
   normalizeProcessVersion,
   LATEST_PROCESS_VERSION,
   IMAGE_ADJUSTMENT_CONTROLS,
-  readAdjustmentControls
+  readAdjustmentControls,
+  DEFAULT_SELECTION_TOOL_OPTIONS,
+  SelectionGesture
 } from "@pixerate/editor/image-editor";
 
 // src/image-editor/ControlSlider.tsx
@@ -620,8 +622,258 @@ var AdjustmentLayersPanel = ({ controller, layers: layersProp, histogram }) => {
   ] });
 };
 
+// src/image-editor/SelectionOptionsBar.tsx
+import { useState as useState5 } from "react";
+import {
+  SELECTION_MODES,
+  SELECTION_MODE_LABELS,
+  SELECTION_TOOLS,
+  describeSelection
+} from "@pixerate/editor/image-editor";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var MODIFY_OPS = [
+  { op: "grow", label: "Grow" },
+  { op: "shrink", label: "Shrink" },
+  { op: "feather", label: "Feather" },
+  { op: "border", label: "Border" },
+  { op: "smooth", label: "Smooth" }
+];
+var btn = (on) => `px-2 py-1 rounded-md border text-[11px] transition-colors ${on ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-950 border-slate-800 text-slate-300 hover:text-white"}`;
+var SelectionOptionsBar = ({
+  controller,
+  options,
+  onOptionsChange,
+  selection,
+  quickMask,
+  className = ""
+}) => {
+  const [radius, setRadius] = useState5(2);
+  const set = (patch) => onOptionsChange({ ...options, ...patch });
+  const sel = selection === void 0 ? controller.getSelection() : selection;
+  const qm = quickMask ?? Boolean(controller.getState().quickMask);
+  return /* @__PURE__ */ jsxs5("div", { "data-testid": "selection-options-bar", className: `flex flex-col gap-3 text-xs ${className}`, children: [
+    /* @__PURE__ */ jsx5("div", { role: "group", "aria-label": "Selection tool", className: "flex flex-wrap gap-1", children: SELECTION_TOOLS.map((t) => /* @__PURE__ */ jsx5("button", { type: "button", "aria-pressed": options.tool === t.id, className: btn(options.tool === t.id), onClick: () => set({ tool: t.id }), children: t.label }, t.id)) }),
+    /* @__PURE__ */ jsx5("div", { role: "group", "aria-label": "Selection mode", className: "flex flex-wrap gap-1", children: SELECTION_MODES.map((m) => /* @__PURE__ */ jsx5("button", { type: "button", "aria-pressed": options.mode === m, className: btn(options.mode === m), onClick: () => set({ mode: m }), children: SELECTION_MODE_LABELS[m] }, m)) }),
+    options.tool === "wand" && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs5("label", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs5("span", { className: "flex justify-between text-slate-400", children: [
+          /* @__PURE__ */ jsx5("span", { children: "Tolerance" }),
+          /* @__PURE__ */ jsx5("span", { className: "font-mono", children: options.tolerance })
+        ] }),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 255,
+            step: 1,
+            "aria-label": "Tolerance",
+            value: options.tolerance,
+            onChange: (e) => set({ tolerance: Number(e.target.value) }),
+            className: "w-full accent-indigo-500"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-2 text-slate-300", children: [
+        /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: options.contiguous, onChange: (e) => set({ contiguous: e.target.checked }) }),
+        "Contiguous"
+      ] }),
+      /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-2 text-slate-300", children: [
+        /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: options.sampleMerged, onChange: (e) => set({ sampleMerged: e.target.checked }) }),
+        "Sample adjusted image"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-2 text-slate-300", children: [
+      /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: options.antiAlias, onChange: (e) => set({ antiAlias: e.target.checked }) }),
+      "Anti-alias"
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ jsx5("button", { type: "button", className: btn(false), onClick: () => controller.selectAll(), children: "Select All" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.deselect(), children: "Deselect" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", className: btn(false), onClick: () => controller.invertSelection(), children: "Inverse" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-pressed": qm, className: btn(qm), onClick: () => controller.setQuickMask(!qm), children: "Quick Mask" })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1 text-slate-400", children: [
+        "Radius",
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "number",
+            min: 0,
+            max: 500,
+            step: 1,
+            "aria-label": "Modify radius",
+            value: radius,
+            onChange: (e) => setRadius(Math.max(0, Number(e.target.value) || 0)),
+            className: "w-14 bg-slate-950 border border-slate-800 rounded px-1 py-0.5 text-slate-200"
+          }
+        )
+      ] }),
+      MODIFY_OPS.map(({ op, label }) => /* @__PURE__ */ jsx5("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.modifySelection(op, radius), children: label }, op))
+    ] }),
+    /* @__PURE__ */ jsx5("p", { "data-testid": "selection-status", className: "text-slate-400", children: describeSelection(sel) })
+  ] });
+};
+
+// src/image-editor/RefineEdgePanel.tsx
+import { useState as useState6 } from "react";
+import {
+  ADJUSTMENT_KINDS as ADJUSTMENT_KINDS2,
+  REFINE_EDGE_CONTROLS,
+  adjustmentKindLabel as adjustmentKindLabel2,
+  layerMaskFromSelection
+} from "@pixerate/editor/image-editor";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_PARAMS = { radius: 8, smartRadius: false, smooth: 0, feather: 0, contrast: 0, shiftEdge: 0 };
+var button = "px-2 py-1 rounded-md border border-slate-800 bg-slate-950 text-[11px] text-slate-200 hover:text-white disabled:opacity-40";
+var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
+  const [params, setParams] = useState6(DEFAULT_PARAMS);
+  const [busy, setBusy] = useState6(false);
+  const [error, setError] = useState6(null);
+  const [layerId, setLayerId] = useState6("");
+  const [newKind, setNewKind] = useState6("hueSaturation");
+  const sel = selection === void 0 ? controller.getSelection() : selection;
+  const list = layers ?? controller.getAdjustmentLayers();
+  const target = list.find((l) => l.id === layerId) ?? list[list.length - 1];
+  const refine = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      await controller.refineSelection(params);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs6("div", { "data-testid": "refine-edge-panel", className: `flex flex-col gap-3 text-xs ${className}`, children: [
+    /* @__PURE__ */ jsx6("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Refine Edge" }),
+    REFINE_EDGE_CONTROLS.map((c) => /* @__PURE__ */ jsxs6("label", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs6("span", { className: "flex justify-between text-slate-400", children: [
+        /* @__PURE__ */ jsx6("span", { children: c.label }),
+        /* @__PURE__ */ jsxs6("span", { className: "font-mono", children: [
+          params[c.id],
+          c.unit
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "range",
+          min: c.min,
+          max: c.max,
+          step: c.step,
+          "aria-label": c.label,
+          value: params[c.id],
+          onChange: (e) => setParams({ ...params, [c.id]: Number(e.target.value) }),
+          className: "w-full accent-indigo-500"
+        }
+      )
+    ] }, c.id)),
+    /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2 text-slate-300", children: [
+      /* @__PURE__ */ jsx6("input", { type: "checkbox", checked: params.smartRadius, onChange: (e) => setParams({ ...params, smartRadius: e.target.checked }) }),
+      "Smart Radius"
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ jsx6("button", { type: "button", className: button, disabled: !sel || busy, onClick: refine, children: "Refine Edge" }),
+      /* @__PURE__ */ jsx6("button", { type: "button", className: button, onClick: () => setParams(DEFAULT_PARAMS), children: "Reset" })
+    ] }),
+    error && /* @__PURE__ */ jsx6("p", { role: "alert", className: "text-rose-400", children: error }),
+    /* @__PURE__ */ jsx6("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] mt-2", children: "Layer Mask" }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex gap-1 items-center", children: [
+      /* @__PURE__ */ jsx6(
+        "select",
+        {
+          "aria-label": "New masked layer kind",
+          value: newKind,
+          onChange: (e) => setNewKind(e.target.value),
+          className: "flex-1 bg-slate-950 border border-slate-800 rounded px-1 py-1 text-slate-200",
+          children: ADJUSTMENT_KINDS2.map((k) => /* @__PURE__ */ jsx6("option", { value: k.kind, children: k.label }, k.kind))
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          className: button,
+          disabled: !sel,
+          onClick: () => sel && setLayerId(controller.addAdjustmentLayer({ kind: newKind, mask: layerMaskFromSelection(sel) })),
+          children: "New Masked Layer"
+        }
+      )
+    ] }),
+    list.length > 0 && target && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx6(
+        "select",
+        {
+          "aria-label": "Mask layer",
+          value: target.id,
+          onChange: (e) => setLayerId(e.target.value),
+          className: "bg-slate-950 border border-slate-800 rounded px-1 py-1 text-slate-200",
+          children: list.map((l) => /* @__PURE__ */ jsxs6("option", { value: l.id, children: [
+            l.name || adjustmentKindLabel2(l.kind),
+            l.mask ? " (masked)" : ""
+          ] }, l.id))
+        }
+      ),
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ jsx6("button", { type: "button", className: button, disabled: !sel, onClick: () => controller.applySelectionAsLayerMask(target.id), children: "Mask with Selection" }),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: button, disabled: !target.mask, onClick: () => controller.selectionFromLayerMask(target.id), children: "Load as Selection" }),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: button, disabled: !target.mask, onClick: () => controller.setAdjustmentLayerMask(target.id, null), children: "Remove Mask" })
+      ] }),
+      target.mask && /* @__PURE__ */ jsxs6(Fragment, { children: [
+        /* @__PURE__ */ jsxs6("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs6("span", { className: "flex justify-between text-slate-400", children: [
+            /* @__PURE__ */ jsx6("span", { children: "Density" }),
+            /* @__PURE__ */ jsxs6("span", { className: "font-mono", children: [
+              Math.round((target.mask.density ?? 1) * 100),
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: 100,
+              step: 1,
+              "aria-label": "Mask density",
+              value: Math.round((target.mask.density ?? 1) * 100),
+              onChange: (e) => controller.setAdjustmentLayerMaskProps(target.id, { density: Number(e.target.value) / 100 }),
+              className: "w-full accent-indigo-500"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs6("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs6("span", { className: "flex justify-between text-slate-400", children: [
+            /* @__PURE__ */ jsx6("span", { children: "Mask Feather" }),
+            /* @__PURE__ */ jsxs6("span", { className: "font-mono", children: [
+              target.mask.feather ?? 0,
+              "px"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: 50,
+              step: 0.5,
+              "aria-label": "Mask feather",
+              value: target.mask.feather ?? 0,
+              onChange: (e) => controller.setAdjustmentLayerMaskProps(target.id, { feather: Number(e.target.value) }),
+              className: "w-full accent-indigo-500"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
 // src/image-editor/ImageEditor.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var ImageEditor = ({
   editor: externalEditor,
   src,
@@ -639,14 +891,23 @@ var ImageEditor = ({
   const legacyProcess = normalizeProcessVersion(state.adjustments.process) < LATEST_PROCESS_VERSION;
   const canvasRef = useRef3(null);
   const containerRef = useRef3(null);
-  const [activeTab, setActiveTab] = useState5("crop");
-  const [activeCropRatio, setActiveCropRatio] = useState5(null);
-  const [inpaintPrompt, setInpaintPrompt] = useState5("");
-  const [inpaintMaskMode, setInpaintMaskMode] = useState5("annotations");
-  const [isRemovingBg, setIsRemovingBg] = useState5(false);
-  const [isInpainting, setIsInpainting] = useState5(false);
-  const [aiError, setAiError] = useState5(null);
-  const [aiSuccess, setAiSuccess] = useState5(null);
+  const [activeTab, setActiveTab] = useState7("crop");
+  const [activeCropRatio, setActiveCropRatio] = useState7(null);
+  const [selectionOptions, setSelectionOptions] = useState7(DEFAULT_SELECTION_TOOL_OPTIONS);
+  const selectionOptionsRef = useRef3(selectionOptions);
+  selectionOptionsRef.current = selectionOptions;
+  const selectionGestureRef = useRef3(null);
+  if (!selectionGestureRef.current || selectionGestureRef.current.controller !== controller) {
+    selectionGestureRef.current = new SelectionGesture(controller, () => selectionOptionsRef.current);
+  }
+  const selectionDraftRef = useRef3(null);
+  const [selectionError, setSelectionError] = useState7(null);
+  const [inpaintPrompt, setInpaintPrompt] = useState7("");
+  const [inpaintMaskMode, setInpaintMaskMode] = useState7("annotations");
+  const [isRemovingBg, setIsRemovingBg] = useState7(false);
+  const [isInpainting, setIsInpainting] = useState7(false);
+  const [aiError, setAiError] = useState7(null);
+  const [aiSuccess, setAiSuccess] = useState7(null);
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
   const handleRemoveBackground = async () => {
@@ -708,10 +969,10 @@ var ImageEditor = ({
       setIsInpainting(false);
     }
   };
-  const [activeColor, setActiveColor] = useState5("#ef4444");
-  const [strokeWidth, setStrokeWidth] = useState5(3);
-  const [fontSize, setFontSize] = useState5(24);
-  const [textInput, setTextInput] = useState5("");
+  const [activeColor, setActiveColor] = useState7("#ef4444");
+  const [strokeWidth, setStrokeWidth] = useState7(3);
+  const [fontSize, setFontSize] = useState7(24);
+  const [textInput, setTextInput] = useState7("");
   const draftAnnotationRef = useRef3(null);
   const draftCropRef = useRef3(null);
   const cropDragInfoRef = useRef3(null);
@@ -733,7 +994,8 @@ var ImageEditor = ({
         showSelectionOverlay: true,
         interactive: true,
         draftAnnotation: draftAnnotation !== void 0 ? draftAnnotation : draftAnnotationRef.current,
-        draftCrop: draftCrop !== void 0 ? draftCrop : draftCropRef.current
+        draftCrop: draftCrop !== void 0 ? draftCrop : draftCropRef.current,
+        draftSelectionPath: selectionDraftRef.current
       });
     },
     [controller, activeTab]
@@ -781,6 +1043,12 @@ var ImageEditor = ({
     const canvas = canvasRef.current;
     if (!canvas) return;
     const canvasPt = getCanvasEventPoint(e);
+    if (activeTab === "select") {
+      const gesture = selectionGestureRef.current;
+      const imgPt = canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, false);
+      void gesture.begin(imgPt, e).then(() => setSelectionError(gesture.error));
+      return;
+    }
     if (activeTab === "crop") {
       const activeCrop = draftCropRef.current || state.crop || {
         x: 0,
@@ -847,6 +1115,14 @@ var ImageEditor = ({
     const canvas = canvasRef.current;
     if (!canvas) return;
     const canvasPt = getCanvasEventPoint(e);
+    if (activeTab === "select") {
+      const gesture = selectionGestureRef.current;
+      if (gesture.active && gesture.move(canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, false))) {
+        selectionDraftRef.current = gesture.draftPath;
+        renderCanvas();
+      }
+      return;
+    }
     if (activeTab === "crop") {
       const drag = cropDragInfoRef.current;
       if (drag) {
@@ -995,6 +1271,15 @@ var ImageEditor = ({
     const canvas = canvasRef.current;
     if (!canvas) return;
     const canvasPt = getCanvasEventPoint(e);
+    if (activeTab === "select") {
+      const gesture = selectionGestureRef.current;
+      if (gesture.active) {
+        gesture.end(canvasToImagePoint(canvasPt, state, canvas.width, canvas.height, false), e);
+        selectionDraftRef.current = null;
+        renderCanvas();
+      }
+      return;
+    }
     if (activeTab === "crop") {
       if (cropDragInfoRef.current) {
         if (draftCropRef.current && draftCropRef.current.width >= 20 && draftCropRef.current.height >= 20) {
@@ -1109,15 +1394,15 @@ var ImageEditor = ({
       link.click();
     }
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(
     "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__ */ jsxs5("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__ */ jsxs5("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
-            /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs7("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__ */ jsxs7("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1129,7 +1414,7 @@ var ImageEditor = ({
                 children: "Transform & Crop"
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1141,7 +1426,19 @@ var ImageEditor = ({
                 children: "Adjustments"
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setActiveTab("select");
+                  editor.setTool("select");
+                },
+                className: `px-3 py-1.5 rounded-md font-medium transition-colors ${activeTab === "select" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`,
+                children: "Select & Mask"
+              }
+            ),
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1153,7 +1450,7 @@ var ImageEditor = ({
                 children: "Annotations"
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1165,7 +1462,7 @@ var ImageEditor = ({
                 children: "Depth Mask"
               }
             ),
-            /* @__PURE__ */ jsxs5(
+            /* @__PURE__ */ jsxs7(
               "button",
               {
                 type: "button",
@@ -1175,14 +1472,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__ */ jsx5("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx5("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__ */ jsx7("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx7("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__ */ jsxs5("div", { className: "flex items-center gap-2 text-xs", children: [
-            /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1193,7 +1490,7 @@ var ImageEditor = ({
                 children: "\u21A9"
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1204,7 +1501,7 @@ var ImageEditor = ({
                 children: "\u21AA"
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1213,8 +1510,8 @@ var ImageEditor = ({
                 children: "Reset"
               }
             ),
-            /* @__PURE__ */ jsx5("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1224,11 +1521,11 @@ var ImageEditor = ({
                 children: "-"
               }
             ),
-            /* @__PURE__ */ jsxs5("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
+            /* @__PURE__ */ jsxs7("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
               Math.round(state.zoom * 100),
               "%"
             ] }),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1238,8 +1535,8 @@ var ImageEditor = ({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ jsx5("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1250,7 +1547,7 @@ var ImageEditor = ({
                 children: "Hold Compare"
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1261,13 +1558,13 @@ var ImageEditor = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
-          /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs7("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
+          /* @__PURE__ */ jsx7(
             "div",
             {
               ref: containerRef,
               className: "relative flex-1 h-[360px] md:h-full min-h-[320px] bg-slate-950 overflow-hidden select-none",
-              children: /* @__PURE__ */ jsx5(
+              children: /* @__PURE__ */ jsx7(
                 "canvas",
                 {
                   ref: canvasRef,
@@ -1280,11 +1577,11 @@ var ImageEditor = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxs5("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__ */ jsxs5("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ jsx5("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
-              /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-3 gap-2", children: [
-                /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsxs7("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__ */ jsxs7("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ jsx7("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
+              /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-3 gap-2", children: [
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1296,7 +1593,7 @@ var ImageEditor = ({
                     children: "Freeform"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1308,7 +1605,7 @@ var ImageEditor = ({
                     children: "1:1 Square"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1320,7 +1617,7 @@ var ImageEditor = ({
                     children: "4:3 Standard"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1332,7 +1629,7 @@ var ImageEditor = ({
                     children: "16:9 Wide"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1344,7 +1641,7 @@ var ImageEditor = ({
                     children: "3:2 Photo"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1357,10 +1654,10 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx5("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ jsx5("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
-              /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-2", children: [
-                /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsx7("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
+              /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1369,7 +1666,7 @@ var ImageEditor = ({
                     children: "Rotate -90\xB0"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1378,7 +1675,7 @@ var ImageEditor = ({
                     children: "Rotate +90\xB0"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1387,7 +1684,7 @@ var ImageEditor = ({
                     children: "Flip Horizontal"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1398,10 +1695,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "adjust" && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx5("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
-                /* @__PURE__ */ jsx5(
+            activeTab === "adjust" && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx7("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1411,9 +1708,9 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx5(Histogram, { histogram: editor.histogram }),
-              IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ jsxs5(React4.Fragment, { children: [
-                /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7(Histogram, { histogram: editor.histogram }),
+              IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ jsxs7(React6.Fragment, { children: [
+                /* @__PURE__ */ jsx7(
                   ControlSlider,
                   {
                     spec,
@@ -1422,14 +1719,14 @@ var ImageEditor = ({
                     onChange: (v) => editor.setAdjustments({ [spec.id]: v })
                   }
                 ),
-                spec.id === "tint" && legacyProcess && /* @__PURE__ */ jsxs5(
+                spec.id === "tint" && legacyProcess && /* @__PURE__ */ jsxs7(
                   "div",
                   {
                     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__ */ jsx5("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
-                      /* @__PURE__ */ jsx5(
+                      /* @__PURE__ */ jsx7("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
+                      /* @__PURE__ */ jsx7(
                         "button",
                         {
                           type: "button",
@@ -1442,7 +1739,7 @@ var ImageEditor = ({
                   }
                 )
               ] }, spec.id)),
-              /* @__PURE__ */ jsx5("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx7(
                 AdjustmentLayersPanel,
                 {
                   controller,
@@ -1451,9 +1748,9 @@ var ImageEditor = ({
                 }
               ) })
             ] }),
-            activeTab === "annotate" && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsx5("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
-              /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ jsx5(
+            activeTab === "annotate" && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsx7("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
+              /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
@@ -1463,9 +1760,9 @@ var ImageEditor = ({
                 },
                 t
               )) }),
-              /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 mt-2", children: [
-                /* @__PURE__ */ jsx5("label", { className: "text-slate-400", children: "Color:" }),
-                /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 mt-2", children: [
+                /* @__PURE__ */ jsx7("label", { className: "text-slate-400", children: "Color:" }),
+                /* @__PURE__ */ jsx7(
                   "input",
                   {
                     type: "color",
@@ -1474,15 +1771,15 @@ var ImageEditor = ({
                     className: "w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent"
                   }
                 ),
-                /* @__PURE__ */ jsxs5("div", { className: "flex-1 ml-2", children: [
-                  /* @__PURE__ */ jsxs5("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
-                    /* @__PURE__ */ jsx5("span", { children: "Width:" }),
-                    /* @__PURE__ */ jsxs5("span", { className: "font-mono", children: [
+                /* @__PURE__ */ jsxs7("div", { className: "flex-1 ml-2", children: [
+                  /* @__PURE__ */ jsxs7("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
+                    /* @__PURE__ */ jsx7("span", { children: "Width:" }),
+                    /* @__PURE__ */ jsxs7("span", { className: "font-mono", children: [
                       strokeWidth,
                       "px"
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx5(
+                  /* @__PURE__ */ jsx7(
                     "input",
                     {
                       type: "range",
@@ -1495,10 +1792,10 @@ var ImageEditor = ({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsx5("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ jsx5("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
-              /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsx7("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
+              /* @__PURE__ */ jsxs7("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx7(
                   "input",
                   {
                     type: "text",
@@ -1509,7 +1806,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__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1519,14 +1816,14 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between text-slate-400", children: [
-                /* @__PURE__ */ jsx5("span", { children: "Font Size:" }),
-                /* @__PURE__ */ jsxs5("span", { className: "font-mono", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between text-slate-400", children: [
+                /* @__PURE__ */ jsx7("span", { children: "Font Size:" }),
+                /* @__PURE__ */ jsxs7("span", { className: "font-mono", children: [
                   fontSize,
                   "px"
                 ] })
               ] }),
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7(
                 "input",
                 {
                   type: "range",
@@ -1537,14 +1834,14 @@ var ImageEditor = ({
                   className: "w-full accent-indigo-500"
                 }
               ),
-              /* @__PURE__ */ jsx5("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxs5("span", { className: "text-slate-400", children: [
+              /* @__PURE__ */ jsx7("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs7("span", { className: "text-slate-400", children: [
                   "Layers (",
                   state.annotations.length,
                   ")"
                 ] }),
-                state.selectedAnnotationId && /* @__PURE__ */ jsx5(
+                state.selectedAnnotationId && /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1553,7 +1850,7 @@ var ImageEditor = ({
                     children: "Delete Selected"
                   }
                 ),
-                state.annotations.length > 0 && /* @__PURE__ */ jsx5(
+                state.annotations.length > 0 && /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1564,10 +1861,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "depth" && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx5("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
-                /* @__PURE__ */ jsx5(
+            activeTab === "depth" && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx7("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
@@ -1577,8 +1874,8 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
-                /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
+                /* @__PURE__ */ jsx7(
                   "input",
                   {
                     type: "checkbox",
@@ -1587,12 +1884,12 @@ var ImageEditor = ({
                     className: "rounded accent-indigo-500"
                   }
                 ),
-                /* @__PURE__ */ jsx5("span", { children: "Enable Depth / Alpha Mask" })
+                /* @__PURE__ */ jsx7("span", { children: "Enable Depth / Alpha Mask" })
               ] }),
-              state.depthMask.enabled && /* @__PURE__ */ jsxs5(Fragment, { children: [
-                /* @__PURE__ */ jsxs5("div", { children: [
-                  /* @__PURE__ */ jsx5("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
-                  /* @__PURE__ */ jsx5(
+              state.depthMask.enabled && /* @__PURE__ */ jsxs7(Fragment2, { children: [
+                /* @__PURE__ */ jsxs7("div", { children: [
+                  /* @__PURE__ */ jsx7("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
+                  /* @__PURE__ */ jsx7(
                     "input",
                     {
                       type: "text",
@@ -1603,8 +1900,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsxs7("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx7(
                     "button",
                     {
                       type: "button",
@@ -1613,7 +1910,7 @@ var ImageEditor = ({
                       children: "Threshold Mode"
                     }
                   ),
-                  /* @__PURE__ */ jsx5(
+                  /* @__PURE__ */ jsx7(
                     "button",
                     {
                       type: "button",
@@ -1623,12 +1920,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs5("div", { children: [
-                  /* @__PURE__ */ jsxs5("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ jsx5("span", { children: "Depth Start (Lower):" }),
-                    /* @__PURE__ */ jsx5("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
+                /* @__PURE__ */ jsxs7("div", { children: [
+                  /* @__PURE__ */ jsxs7("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ jsx7("span", { children: "Depth Start (Lower):" }),
+                    /* @__PURE__ */ jsx7("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
                   ] }),
-                  /* @__PURE__ */ jsx5(
+                  /* @__PURE__ */ jsx7(
                     "input",
                     {
                       type: "range",
@@ -1642,12 +1939,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs5("div", { children: [
-                  /* @__PURE__ */ jsxs5("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ jsx5("span", { children: "Depth Stop (Upper):" }),
-                    /* @__PURE__ */ jsx5("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
+                /* @__PURE__ */ jsxs7("div", { children: [
+                  /* @__PURE__ */ jsxs7("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ jsx7("span", { children: "Depth Stop (Upper):" }),
+                    /* @__PURE__ */ jsx7("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
                   ] }),
-                  /* @__PURE__ */ jsx5(
+                  /* @__PURE__ */ jsx7(
                     "input",
                     {
                       type: "range",
@@ -1661,12 +1958,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs5("div", { children: [
-                  /* @__PURE__ */ jsxs5("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ jsx5("span", { children: "Softness:" }),
-                    /* @__PURE__ */ jsx5("span", { className: "font-mono", children: state.depthMask.softness })
+                /* @__PURE__ */ jsxs7("div", { children: [
+                  /* @__PURE__ */ jsxs7("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ jsx7("span", { children: "Softness:" }),
+                    /* @__PURE__ */ jsx7("span", { className: "font-mono", children: state.depthMask.softness })
                   ] }),
-                  /* @__PURE__ */ jsx5(
+                  /* @__PURE__ */ jsx7(
                     "input",
                     {
                       type: "range",
@@ -1678,8 +1975,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
-                  /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
+                  /* @__PURE__ */ jsx7(
                     "input",
                     {
                       type: "checkbox",
@@ -1688,52 +1985,66 @@ var ImageEditor = ({
                       className: "rounded accent-indigo-500"
                     }
                   ),
-                  /* @__PURE__ */ jsx5("span", { children: "Invert Mask" })
+                  /* @__PURE__ */ jsx7("span", { children: "Invert Mask" })
                 ] })
               ] })
             ] }),
-            activeTab === "ai" && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ jsxs5("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
-                /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs5("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx5("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx5("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 === "select" && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ jsx7(
+                SelectionOptionsBar,
+                {
+                  controller,
+                  options: selectionOptions,
+                  onOptionsChange: setSelectionOptions,
+                  selection: state.selection ?? null,
+                  quickMask: Boolean(state.quickMask)
+                }
+              ),
+              selectionError && /* @__PURE__ */ jsx7("p", { role: "alert", className: "text-rose-400", children: selectionError }),
+              /* @__PURE__ */ jsx7(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
+            ] }),
+            activeTab === "ai" && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs7("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx7("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx7("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__ */ jsx5("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__ */ jsx7("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__ */ jsx5("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
+                /* @__PURE__ */ jsx7(
                   "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__ */ jsxs5(Fragment, { children: [
-                      /* @__PURE__ */ jsx5("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                    children: isRemovingBg ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+                      /* @__PURE__ */ jsx7("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Removing Background..."
-                    ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
-                      /* @__PURE__ */ jsx5("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx5("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__ */ jsxs7(Fragment2, { children: [
+                      /* @__PURE__ */ jsx7("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx7("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__ */ jsxs5("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
-                /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs5("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsxs5("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ jsx5("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__ */ jsx5("path", { d: "m14 7 3 3" })
+              /* @__PURE__ */ jsxs7("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs7("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsxs7("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsx7("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__ */ jsx7("path", { d: "m14 7 3 3" })
                     ] }),
                     "Generative Inpainting"
                   ] }),
-                  isInpainting && /* @__PURE__ */ jsx5("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__ */ jsx7("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__ */ jsx5("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
-                /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsx5("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
-                  /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
+                /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx7("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
+                  /* @__PURE__ */ jsx7(
                     "textarea",
                     {
                       id: "ai-inpaint-prompt-react",
@@ -1745,10 +2056,10 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsx5("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
-                  /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-1.5", children: [
-                    /* @__PURE__ */ jsxs5(
+                /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx7("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
+                  /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-2 gap-1.5", children: [
+                    /* @__PURE__ */ jsxs7(
                       "button",
                       {
                         type: "button",
@@ -1761,7 +2072,7 @@ var ImageEditor = ({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs5(
+                    /* @__PURE__ */ jsxs7(
                       "button",
                       {
                         type: "button",
@@ -1776,25 +2087,25 @@ var ImageEditor = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "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__ */ jsxs5(Fragment, { children: [
-                      /* @__PURE__ */ jsx5("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                    children: isInpainting ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+                      /* @__PURE__ */ jsx7("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Generating Inpaint..."
-                    ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
-                      /* @__PURE__ */ jsx5("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx5("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__ */ jsxs7(Fragment2, { children: [
+                      /* @__PURE__ */ jsx7("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx7("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__ */ jsx5("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
-              aiSuccess && /* @__PURE__ */ jsx5("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
+              aiError && /* @__PURE__ */ jsx7("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
+              aiSuccess && /* @__PURE__ */ jsx7("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
             ] })
           ] })
         ] })
@@ -1810,6 +2121,8 @@ export {
   useImageHistogram,
   CurvesEditor,
   AdjustmentLayersPanel,
+  SelectionOptionsBar,
+  RefineEdgePanel,
   ImageEditor
 };
-//# sourceMappingURL=chunk-XTFR3IMK.js.map
+//# sourceMappingURL=chunk-ZU54BMDC.js.map