@pixerate/editor-react 0.76.0 → 0.77.0

package/dist/{chunk-LWMUV5TC.js → chunk-QARGR5E5.js}

@@ -1,3 +1,7 @@
+import {
+  PaintGradientEditorView
+} from "./chunk-MO354USR.js";
+
 // src/image-editor/useImageEditor.ts
 import { useRef, useState, useEffect, useCallback, useMemo } from "react";
 import {
@@ -1279,14 +1283,22 @@ import {
   rgbUnitToHex,
   setRetouchChoice
 } from "@pixerate/editor/image-editor";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { DEFAULT_PAINT_GRADIENT } from "@pixerate/editor/image-editor";
+
+// src/image-editor/PaintGradientEditor.tsx
+import { PAINT_GRADIENT_KIT } from "@pixerate/editor/image-editor";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var PaintGradientEditor = (props) => /* @__PURE__ */ jsx7(PaintGradientEditorView, { ...props, kit: PAINT_GRADIENT_KIT });
+
+// src/image-editor/BrushOptionsBar.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var chip = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
 var BrushOptionsBar = ({ controller, className }) => {
   const [, setTick] = useState7(0);
   useEffect6(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
   const [error, setError] = useState7(null);
   const state = controller.getState();
-  const { brush, foreground, background, mixer, mixerLoad, retouch, cloneSource } = state.paint;
+  const { brush, foreground, background, mixer, mixerLoad, retouch, cloneSource, paint } = state.paint;
   const tool = state.activeTool;
   const attempt = (fn) => {
     try {
@@ -1297,7 +1309,7 @@ var BrushOptionsBar = ({ controller, className }) => {
     }
   };
   return /* @__PURE__ */ jsxs7("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "brush-options", children: [
-    /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Paint tools", children: PAINT_TOOLS.map((t) => /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Paint tools", children: PAINT_TOOLS.map((t) => /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1311,7 +1323,7 @@ var BrushOptionsBar = ({ controller, className }) => {
     )) }),
     /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", role: "group", "aria-label": "Colours", children: [
       /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "color",
@@ -1321,10 +1333,10 @@ var BrushOptionsBar = ({ controller, className }) => {
             className: "h-6 w-8 rounded border border-slate-700 bg-transparent"
           }
         ),
-        /* @__PURE__ */ jsx7("span", { className: "text-slate-400", children: "FG" })
+        /* @__PURE__ */ jsx8("span", { className: "text-slate-400", children: "FG" })
       ] }),
       /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "color",
@@ -1334,12 +1346,24 @@ var BrushOptionsBar = ({ controller, className }) => {
             className: "h-6 w-8 rounded border border-slate-700 bg-transparent"
           }
         ),
-        /* @__PURE__ */ jsx7("span", { className: "text-slate-400", children: "BG" })
+        /* @__PURE__ */ jsx8("span", { className: "text-slate-400", children: "BG" })
       ] }),
-      /* @__PURE__ */ jsx7("button", { type: "button", title: "Swap colours (X)", className: chip(false), onClick: () => controller.swapPaintColors(), children: "Swap" }),
-      /* @__PURE__ */ jsx7("button", { type: "button", title: "Default colours (D)", className: chip(false), onClick: () => controller.resetPaintColors(), children: "Default" })
+      /* @__PURE__ */ jsx8("button", { type: "button", title: "Swap colours (X)", className: chip(false), onClick: () => controller.swapPaintColors(), children: "Swap" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", title: "Default colours (D)", className: chip(false), onClick: () => controller.resetPaintColors(), children: "Default" }),
+      state.activeTool === "brush" && /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": paint.type === "gradient",
+          title: "Gradient paint: the brush changes colour as the stroke goes",
+          className: chip(paint.type === "gradient"),
+          onClick: () => attempt(() => controller.setPaintOptions(paint.type === "gradient" ? { foreground } : { paint: DEFAULT_PAINT_GRADIENT })),
+          children: "Gradient"
+        }
+      )
     ] }),
-    BRUSH_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ jsx7(
+    state.activeTool === "brush" && paint.type === "gradient" && /* @__PURE__ */ jsx8(PaintGradientEditor, { value: paint, colors: { paint: foreground, secondary: background }, onChange: (g) => attempt(() => controller.setPaintOptions({ paint: g })) }),
+    BRUSH_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ jsx8(
       ControlSlider,
       {
         spec,
@@ -1350,7 +1374,7 @@ var BrushOptionsBar = ({ controller, className }) => {
     )),
     state.activeTool === "mixer" && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2 border-t border-slate-800 pt-2", role: "group", "aria-label": "Mixer Brush", "data-testid": "mixer-options", children: [
       /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "span",
           {
             "aria-label": "Brush load",
@@ -1359,10 +1383,10 @@ var BrushOptionsBar = ({ controller, className }) => {
             style: { background: mixerLoad.reservoir ? rgbUnitToHex(mixerLoad.reservoir) : "transparent" }
           }
         ),
-        /* @__PURE__ */ jsx7("button", { type: "button", title: "Fill the reservoir with the foreground colour", className: chip(false), onClick: () => controller.loadMixerBrush(), children: "Load brush" }),
-        /* @__PURE__ */ jsx7("button", { type: "button", title: "Empty the picked-up colour", className: chip(false), onClick: () => controller.cleanMixerBrush(), children: "Clean brush" })
+        /* @__PURE__ */ jsx8("button", { type: "button", title: "Fill the reservoir with the foreground colour", className: chip(false), onClick: () => controller.loadMixerBrush(), children: "Load brush" }),
+        /* @__PURE__ */ jsx8("button", { type: "button", title: "Empty the picked-up colour", className: chip(false), onClick: () => controller.cleanMixerBrush(), children: "Clean brush" })
       ] }),
-      /* @__PURE__ */ jsx7("div", { className: "flex gap-1", role: "group", "aria-label": "Mixing", children: MIXER_MIXING_OPTIONS.map((m) => /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8("div", { className: "flex gap-1", role: "group", "aria-label": "Mixing", children: MIXER_MIXING_OPTIONS.map((m) => /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
@@ -1374,10 +1398,10 @@ var BrushOptionsBar = ({ controller, className }) => {
         },
         m.id
       )) }),
-      MIXER_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ jsx7(ControlSlider, { spec, value: mixer[spec.id], onChange: (v) => controller.setPaintOptions({ mixer: { [spec.id]: v } }) }, spec.id)),
+      MIXER_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ jsx8(ControlSlider, { spec, value: mixer[spec.id], onChange: (v) => controller.setPaintOptions({ mixer: { [spec.id]: v } }) }, spec.id)),
       /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap gap-3 text-slate-300", children: [
         /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "input",
             {
               type: "checkbox",
@@ -1390,7 +1414,7 @@ var BrushOptionsBar = ({ controller, className }) => {
           "Load each stroke"
         ] }),
         /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "input",
             {
               type: "checkbox",
@@ -1406,12 +1430,12 @@ var BrushOptionsBar = ({ controller, className }) => {
     ] }),
     isRetouchPaintTool(tool) && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2 border-t border-slate-800 pt-2", role: "group", "aria-label": "Retouch options", "data-testid": "retouch-options", children: [
       (tool === "clone" || tool === "heal") && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx7("span", { className: "text-slate-400", "data-testid": "clone-source", children: cloneSourceLabel(controller) }),
-        cloneSource && /* @__PURE__ */ jsx7("button", { type: "button", title: "Forget the source point", className: chip(false), onClick: () => controller.setCloneSource(null), children: "Clear source" })
+        /* @__PURE__ */ jsx8("span", { className: "text-slate-400", "data-testid": "clone-source", children: cloneSourceLabel(controller) }),
+        cloneSource && /* @__PURE__ */ jsx8("button", { type: "button", title: "Forget the source point", className: chip(false), onClick: () => controller.setCloneSource(null), children: "Clear source" })
       ] }),
       RETOUCH_CHOICES.filter((c) => c.tools.includes(tool)).map((choice) => /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": choice.label, children: [
-        /* @__PURE__ */ jsx7("span", { className: "text-slate-400", children: choice.label }),
-        choice.options.map((o) => /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8("span", { className: "text-slate-400", children: choice.label }),
+        choice.options.map((o) => /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
@@ -1424,9 +1448,9 @@ var BrushOptionsBar = ({ controller, className }) => {
           o.id
         ))
       ] }, choice.id)),
-      RETOUCH_OPTION_CONTROLS.filter((c) => c.tools.includes(tool)).map((spec) => /* @__PURE__ */ jsx7(ControlSlider, { spec, value: retouch[spec.id], onChange: (v) => controller.setPaintOptions({ retouch: { [spec.id]: v } }) }, spec.id)),
-      /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-3 text-slate-300", children: RETOUCH_TOGGLES.filter((t) => t.tools.includes(tool)).map((t) => /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx7(
+      RETOUCH_OPTION_CONTROLS.filter((c) => c.tools.includes(tool)).map((spec) => /* @__PURE__ */ jsx8(ControlSlider, { spec, value: retouch[spec.id], onChange: (v) => controller.setPaintOptions({ retouch: { [spec.id]: v } }) }, spec.id)),
+      /* @__PURE__ */ jsx8("div", { className: "flex flex-wrap gap-3 text-slate-300", children: RETOUCH_TOGGLES.filter((t) => t.tools.includes(tool)).map((t) => /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "checkbox",
@@ -1441,7 +1465,7 @@ var BrushOptionsBar = ({ controller, className }) => {
     ] }),
     /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap gap-3 text-slate-300", role: "group", "aria-label": "Pressure", children: [
       /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "checkbox",
@@ -1454,7 +1478,7 @@ var BrushOptionsBar = ({ controller, className }) => {
         "Pressure size"
       ] }),
       /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "checkbox",
@@ -1468,17 +1492,17 @@ var BrushOptionsBar = ({ controller, className }) => {
       ] })
     ] }),
     /* @__PURE__ */ jsxs7("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ jsx7("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.fillPixels()), children: "Fill" }),
-      /* @__PURE__ */ jsx7("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.clearPixels()), children: "Clear" })
+      /* @__PURE__ */ jsx8("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.fillPixels()), children: "Fill" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.clearPixels()), children: "Clear" })
     ] }),
-    error && /* @__PURE__ */ jsx7("p", { role: "alert", className: "text-rose-400", children: error })
+    error && /* @__PURE__ */ jsx8("p", { role: "alert", className: "text-rose-400", children: error })
   ] });
 };
 
 // src/image-editor/ColorProfilePanel.tsx
 import { useEffect as useEffect7, useState as useState8 } from "react";
 import { COLOR_MODE_OPTIONS, INTENT_OPTIONS, PROOF_PROFILE_OPTIONS, WORKING_SPACE_OPTIONS, colorPanelView } from "@pixerate/editor/image-editor";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var chip2 = "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white";
 var select = "rounded bg-slate-800 px-1 py-0.5 text-[11px] text-slate-200";
 var ColorProfilePanel = ({ controller, className }) => {
@@ -1511,26 +1535,26 @@ var ColorProfilePanel = ({ controller, className }) => {
   };
   return /* @__PURE__ */ jsxs8("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "color-profile-panel", children: [
     /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx8("span", { className: "text-slate-400", children: "Profile" }),
-      /* @__PURE__ */ jsx8("span", { "data-testid": "color-profile-name", children: view.profileName })
+      /* @__PURE__ */ jsx9("span", { className: "text-slate-400", children: "Profile" }),
+      /* @__PURE__ */ jsx9("span", { "data-testid": "color-profile-name", children: view.profileName })
     ] }),
     /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": "Colour mode", children: [
-      /* @__PURE__ */ jsx8("span", { className: "text-slate-400", children: "Mode" }),
-      /* @__PURE__ */ jsx8("select", { "aria-label": "Colour mode", className: select, value: view.mode, onChange: (e) => attempt(() => controller.setColorMode(e.target.value)), children: COLOR_MODE_OPTIONS.map((o) => /* @__PURE__ */ jsx8("option", { value: o.id, title: o.title, children: o.label }, o.id)) }),
-      view.cmykProfileName && /* @__PURE__ */ jsx8("span", { className: "text-slate-400", children: view.cmykProfileName })
+      /* @__PURE__ */ jsx9("span", { className: "text-slate-400", children: "Mode" }),
+      /* @__PURE__ */ jsx9("select", { "aria-label": "Colour mode", className: select, value: view.mode, onChange: (e) => attempt(() => controller.setColorMode(e.target.value)), children: COLOR_MODE_OPTIONS.map((o) => /* @__PURE__ */ jsx9("option", { value: o.id, title: o.title, children: o.label }, o.id)) }),
+      view.cmykProfileName && /* @__PURE__ */ jsx9("span", { className: "text-slate-400", children: view.cmykProfileName })
     ] }),
     /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": "Assign or convert", children: [
-      /* @__PURE__ */ jsx8("select", { "aria-label": "Target profile", className: select, value: target, onChange: (e) => setTarget(e.target.value), children: WORKING_SPACE_OPTIONS.map((o) => /* @__PURE__ */ jsx8("option", { value: o.id, children: o.label }, o.id)) }),
-      /* @__PURE__ */ jsx8("select", { "aria-label": "Rendering intent", className: select, value: intent, onChange: (e) => setIntent(e.target.value), children: INTENT_OPTIONS.map((o) => /* @__PURE__ */ jsx8("option", { value: o.id, title: o.title, children: o.label }, o.id)) }),
+      /* @__PURE__ */ jsx9("select", { "aria-label": "Target profile", className: select, value: target, onChange: (e) => setTarget(e.target.value), children: WORKING_SPACE_OPTIONS.map((o) => /* @__PURE__ */ jsx9("option", { value: o.id, children: o.label }, o.id)) }),
+      /* @__PURE__ */ jsx9("select", { "aria-label": "Rendering intent", className: select, value: intent, onChange: (e) => setIntent(e.target.value), children: INTENT_OPTIONS.map((o) => /* @__PURE__ */ jsx9("option", { value: o.id, title: o.title, children: o.label }, o.id)) }),
       /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx8("input", { type: "checkbox", "aria-label": "Black point compensation", checked: bpc, onChange: (e) => setBpc(e.target.checked), className: "accent-indigo-500" }),
+        /* @__PURE__ */ jsx9("input", { type: "checkbox", "aria-label": "Black point compensation", checked: bpc, onChange: (e) => setBpc(e.target.checked), className: "accent-indigo-500" }),
         "BPC"
       ] }),
-      /* @__PURE__ */ jsx8("button", { type: "button", className: chip2, title: "Edit \u203A Assign Profile: keep the numbers", onClick: () => attempt(() => controller.assignProfile(target)), children: "Assign" }),
-      /* @__PURE__ */ jsx8("button", { type: "button", className: chip2, title: "Edit \u203A Convert to Profile: keep the look", onClick: () => attempt(() => controller.convertToProfile(target, { intent, bpc })), children: "Convert" })
+      /* @__PURE__ */ jsx9("button", { type: "button", className: chip2, title: "Edit \u203A Assign Profile: keep the numbers", onClick: () => attempt(() => controller.assignProfile(target)), children: "Assign" }),
+      /* @__PURE__ */ jsx9("button", { type: "button", className: chip2, title: "Edit \u203A Convert to Profile: keep the look", onClick: () => attempt(() => controller.convertToProfile(target, { intent, bpc })), children: "Convert" })
     ] }),
     /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": "Proof setup", children: [
-      /* @__PURE__ */ jsx8("span", { className: "text-slate-400", children: "Proof" }),
+      /* @__PURE__ */ jsx9("span", { className: "text-slate-400", children: "Proof" }),
       /* @__PURE__ */ jsxs8(
         "select",
         {
@@ -1539,24 +1563,24 @@ var ColorProfilePanel = ({ controller, className }) => {
           value: view.proof?.id ?? "",
           onChange: (e) => e.target.value ? proofWith({ id: e.target.value }) : attempt(() => controller.setProofSetup(null)),
           children: [
-            /* @__PURE__ */ jsx8("option", { value: "", children: "Off" }),
-            PROOF_PROFILE_OPTIONS.map((o) => /* @__PURE__ */ jsx8("option", { value: o.id, children: o.label }, o.id))
+            /* @__PURE__ */ jsx9("option", { value: "", children: "Off" }),
+            PROOF_PROFILE_OPTIONS.map((o) => /* @__PURE__ */ jsx9("option", { value: o.id, children: o.label }, o.id))
           ]
         }
       ),
       view.proof && /* @__PURE__ */ jsxs8(Fragment2, { children: [
-        /* @__PURE__ */ jsx8("select", { "aria-label": "Proof intent", className: select, value: view.proof.intent, onChange: (e) => proofWith({ intent: e.target.value }), children: INTENT_OPTIONS.map((o) => /* @__PURE__ */ jsx8("option", { value: o.id, children: o.label }, o.id)) }),
+        /* @__PURE__ */ jsx9("select", { "aria-label": "Proof intent", className: select, value: view.proof.intent, onChange: (e) => proofWith({ intent: e.target.value }), children: INTENT_OPTIONS.map((o) => /* @__PURE__ */ jsx9("option", { value: o.id, children: o.label }, o.id)) }),
         /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx8("input", { type: "checkbox", "aria-label": "Simulate paper colour", checked: view.proof.simulatePaper, onChange: (e) => proofWith({ simulatePaper: e.target.checked }), className: "accent-indigo-500" }),
+          /* @__PURE__ */ jsx9("input", { type: "checkbox", "aria-label": "Simulate paper colour", checked: view.proof.simulatePaper, onChange: (e) => proofWith({ simulatePaper: e.target.checked }), className: "accent-indigo-500" }),
           "Paper"
         ] }),
         /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx8("input", { type: "checkbox", "aria-label": "Gamut warning", checked: view.proof.gamutWarning, onChange: (e) => proofWith({ gamutWarning: e.target.checked }), className: "accent-indigo-500" }),
+          /* @__PURE__ */ jsx9("input", { type: "checkbox", "aria-label": "Gamut warning", checked: view.proof.gamutWarning, onChange: (e) => proofWith({ gamutWarning: e.target.checked }), className: "accent-indigo-500" }),
           "Gamut warning"
         ] })
       ] })
     ] }),
-    error && /* @__PURE__ */ jsx8("p", { role: "alert", className: "text-rose-400", children: error })
+    error && /* @__PURE__ */ jsx9("p", { role: "alert", className: "text-rose-400", children: error })
   ] });
 };
 
@@ -1568,7 +1592,7 @@ import {
   SELECTION_TOOLS,
   describeSelection
 } from "@pixerate/editor/image-editor";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var MODIFY_OPS = [
   { op: "grow", label: "Grow" },
   { op: "shrink", label: "Shrink" },
@@ -1590,15 +1614,15 @@ var SelectionOptionsBar = ({
   const sel = selection === void 0 ? controller.getSelection() : selection;
   const qm = quickMask ?? Boolean(controller.getState().quickMask);
   return /* @__PURE__ */ jsxs9("div", { "data-testid": "selection-options-bar", className: `flex flex-col gap-3 text-xs ${className}`, children: [
-    /* @__PURE__ */ jsx9("div", { role: "group", "aria-label": "Selection tool", className: "flex flex-wrap gap-1", children: SELECTION_TOOLS.map((t) => /* @__PURE__ */ jsx9("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__ */ jsx9("div", { role: "group", "aria-label": "Selection mode", className: "flex flex-wrap gap-1", children: SELECTION_MODES.map((m) => /* @__PURE__ */ jsx9("button", { type: "button", "aria-pressed": options.mode === m, className: btn(options.mode === m), onClick: () => set({ mode: m }), children: SELECTION_MODE_LABELS[m] }, m)) }),
+    /* @__PURE__ */ jsx10("div", { role: "group", "aria-label": "Selection tool", className: "flex flex-wrap gap-1", children: SELECTION_TOOLS.map((t) => /* @__PURE__ */ jsx10("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__ */ jsx10("div", { role: "group", "aria-label": "Selection mode", className: "flex flex-wrap gap-1", children: SELECTION_MODES.map((m) => /* @__PURE__ */ jsx10("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__ */ jsxs9("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsxs9("label", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsxs9("span", { className: "flex justify-between text-slate-400", children: [
-          /* @__PURE__ */ jsx9("span", { children: "Tolerance" }),
-          /* @__PURE__ */ jsx9("span", { className: "font-mono", children: options.tolerance })
+          /* @__PURE__ */ jsx10("span", { children: "Tolerance" }),
+          /* @__PURE__ */ jsx10("span", { className: "font-mono", children: options.tolerance })
         ] }),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           "input",
           {
             type: "range",
@@ -1613,11 +1637,11 @@ var SelectionOptionsBar = ({
         )
       ] }),
       /* @__PURE__ */ jsxs9("label", { className: "flex items-center gap-2 text-slate-300", children: [
-        /* @__PURE__ */ jsx9("input", { type: "checkbox", checked: options.contiguous, onChange: (e) => set({ contiguous: e.target.checked }) }),
+        /* @__PURE__ */ jsx10("input", { type: "checkbox", checked: options.contiguous, onChange: (e) => set({ contiguous: e.target.checked }) }),
         "Contiguous"
       ] }),
       /* @__PURE__ */ jsxs9("label", { className: "flex items-center gap-2 text-slate-300", children: [
-        /* @__PURE__ */ jsx9("input", { type: "checkbox", checked: options.sampleMerged, onChange: (e) => set({ sampleMerged: e.target.checked }) }),
+        /* @__PURE__ */ jsx10("input", { type: "checkbox", checked: options.sampleMerged, onChange: (e) => set({ sampleMerged: e.target.checked }) }),
         "Sample adjusted image"
       ] }),
       /* @__PURE__ */ jsxs9("label", { className: "flex items-center gap-2 text-slate-300", children: [
@@ -1630,27 +1654,27 @@ var SelectionOptionsBar = ({
             onChange: (e) => set({ sample: e.target.value }),
             className: "bg-slate-800 border border-slate-700 rounded px-1 py-0.5",
             children: [
-              /* @__PURE__ */ jsx9("option", { value: "composite", children: "All layers" }),
-              /* @__PURE__ */ jsx9("option", { value: "active-layer", children: "Active layer" })
+              /* @__PURE__ */ jsx10("option", { value: "composite", children: "All layers" }),
+              /* @__PURE__ */ jsx10("option", { value: "active-layer", children: "Active layer" })
             ]
           }
         )
       ] })
     ] }),
     /* @__PURE__ */ jsxs9("label", { className: "flex items-center gap-2 text-slate-300", children: [
-      /* @__PURE__ */ jsx9("input", { type: "checkbox", checked: options.antiAlias, onChange: (e) => set({ antiAlias: e.target.checked }) }),
+      /* @__PURE__ */ jsx10("input", { type: "checkbox", checked: options.antiAlias, onChange: (e) => set({ antiAlias: e.target.checked }) }),
       "Anti-alias"
     ] }),
     /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap gap-1", children: [
-      /* @__PURE__ */ jsx9("button", { type: "button", className: btn(false), onClick: () => controller.selectAll(), children: "Select All" }),
-      /* @__PURE__ */ jsx9("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.deselect(), children: "Deselect" }),
-      /* @__PURE__ */ jsx9("button", { type: "button", className: btn(false), onClick: () => controller.invertSelection(), children: "Inverse" }),
-      /* @__PURE__ */ jsx9("button", { type: "button", "aria-pressed": qm, className: btn(qm), onClick: () => controller.setQuickMask(!qm), children: "Quick Mask" })
+      /* @__PURE__ */ jsx10("button", { type: "button", className: btn(false), onClick: () => controller.selectAll(), children: "Select All" }),
+      /* @__PURE__ */ jsx10("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.deselect(), children: "Deselect" }),
+      /* @__PURE__ */ jsx10("button", { type: "button", className: btn(false), onClick: () => controller.invertSelection(), children: "Inverse" }),
+      /* @__PURE__ */ jsx10("button", { type: "button", "aria-pressed": qm, className: btn(qm), onClick: () => controller.setQuickMask(!qm), children: "Quick Mask" })
     ] }),
     /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center gap-1", children: [
       /* @__PURE__ */ jsxs9("label", { className: "flex items-center gap-1 text-slate-400", children: [
         "Radius",
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           "input",
           {
             type: "number",
@@ -1664,9 +1688,9 @@ var SelectionOptionsBar = ({
           }
         )
       ] }),
-      MODIFY_OPS.map(({ op, label }) => /* @__PURE__ */ jsx9("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.modifySelection(op, radius), children: label }, op))
+      MODIFY_OPS.map(({ op, label }) => /* @__PURE__ */ jsx10("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.modifySelection(op, radius), children: label }, op))
     ] }),
-    /* @__PURE__ */ jsx9("p", { "data-testid": "selection-status", className: "text-slate-400", children: describeSelection(sel) })
+    /* @__PURE__ */ jsx10("p", { "data-testid": "selection-status", className: "text-slate-400", children: describeSelection(sel) })
   ] });
 };
 
@@ -1678,7 +1702,7 @@ import {
   adjustmentKindLabel as adjustmentKindLabel2,
   layerMaskFromSelection
 } from "@pixerate/editor/image-editor";
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_PARAMS = { radius: 8, smartRadius: false, smooth: 0, feather: 0, contrast: 0, shiftEdge: 0 };
 var button2 = "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 = "" }) => {
@@ -1702,16 +1726,16 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
     }
   };
   return /* @__PURE__ */ jsxs10("div", { "data-testid": "refine-edge-panel", className: `flex flex-col gap-3 text-xs ${className}`, children: [
-    /* @__PURE__ */ jsx10("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Refine Edge" }),
+    /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Refine Edge" }),
     REFINE_EDGE_CONTROLS.map((c) => /* @__PURE__ */ jsxs10("label", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ jsxs10("span", { className: "flex justify-between text-slate-400", children: [
-        /* @__PURE__ */ jsx10("span", { children: c.label }),
+        /* @__PURE__ */ jsx11("span", { children: c.label }),
         /* @__PURE__ */ jsxs10("span", { className: "font-mono", children: [
           params[c.id],
           c.unit
         ] })
       ] }),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "input",
         {
           type: "range",
@@ -1726,27 +1750,27 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
       )
     ] }, c.id)),
     /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-2 text-slate-300", children: [
-      /* @__PURE__ */ jsx10("input", { type: "checkbox", checked: params.smartRadius, onChange: (e) => setParams({ ...params, smartRadius: e.target.checked }) }),
+      /* @__PURE__ */ jsx11("input", { type: "checkbox", checked: params.smartRadius, onChange: (e) => setParams({ ...params, smartRadius: e.target.checked }) }),
       "Smart Radius"
     ] }),
     /* @__PURE__ */ jsxs10("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ jsx10("button", { type: "button", className: button2, disabled: !sel || busy, onClick: refine, children: "Refine Edge" }),
-      /* @__PURE__ */ jsx10("button", { type: "button", className: button2, onClick: () => setParams(DEFAULT_PARAMS), children: "Reset" })
+      /* @__PURE__ */ jsx11("button", { type: "button", className: button2, disabled: !sel || busy, onClick: refine, children: "Refine Edge" }),
+      /* @__PURE__ */ jsx11("button", { type: "button", className: button2, onClick: () => setParams(DEFAULT_PARAMS), children: "Reset" })
     ] }),
-    error && /* @__PURE__ */ jsx10("p", { role: "alert", className: "text-rose-400", children: error }),
-    /* @__PURE__ */ jsx10("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] mt-2", children: "Layer Mask" }),
+    error && /* @__PURE__ */ jsx11("p", { role: "alert", className: "text-rose-400", children: error }),
+    /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] mt-2", children: "Layer Mask" }),
     /* @__PURE__ */ jsxs10("div", { className: "flex gap-1 items-center", children: [
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "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__ */ jsx10("option", { value: k.kind, children: k.label }, k.kind))
+          children: ADJUSTMENT_KINDS2.map((k) => /* @__PURE__ */ jsx11("option", { value: k.kind, children: k.label }, k.kind))
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -1758,7 +1782,7 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
       )
     ] }),
     list.length > 0 && target && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "select",
         {
           "aria-label": "Mask layer",
@@ -1772,20 +1796,20 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
         }
       ),
       /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap gap-1", children: [
-        /* @__PURE__ */ jsx10("button", { type: "button", className: button2, disabled: !sel, onClick: () => controller.applySelectionAsLayerMask(target.id), children: "Mask with Selection" }),
-        /* @__PURE__ */ jsx10("button", { type: "button", className: button2, disabled: !target.mask, onClick: () => controller.selectionFromLayerMask(target.id), children: "Load as Selection" }),
-        /* @__PURE__ */ jsx10("button", { type: "button", className: button2, disabled: !target.mask, onClick: () => controller.setAdjustmentLayerMask(target.id, null), children: "Remove Mask" })
+        /* @__PURE__ */ jsx11("button", { type: "button", className: button2, disabled: !sel, onClick: () => controller.applySelectionAsLayerMask(target.id), children: "Mask with Selection" }),
+        /* @__PURE__ */ jsx11("button", { type: "button", className: button2, disabled: !target.mask, onClick: () => controller.selectionFromLayerMask(target.id), children: "Load as Selection" }),
+        /* @__PURE__ */ jsx11("button", { type: "button", className: button2, disabled: !target.mask, onClick: () => controller.setAdjustmentLayerMask(target.id, null), children: "Remove Mask" })
       ] }),
       target.mask && /* @__PURE__ */ jsxs10(Fragment3, { children: [
         /* @__PURE__ */ jsxs10("label", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ jsxs10("span", { className: "flex justify-between text-slate-400", children: [
-            /* @__PURE__ */ jsx10("span", { children: "Density" }),
+            /* @__PURE__ */ jsx11("span", { children: "Density" }),
             /* @__PURE__ */ jsxs10("span", { className: "font-mono", children: [
               Math.round((target.mask.density ?? 1) * 100),
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "input",
             {
               type: "range",
@@ -1801,13 +1825,13 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
         ] }),
         /* @__PURE__ */ jsxs10("label", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ jsxs10("span", { className: "flex justify-between text-slate-400", children: [
-            /* @__PURE__ */ jsx10("span", { children: "Mask Feather" }),
+            /* @__PURE__ */ jsx11("span", { children: "Mask Feather" }),
             /* @__PURE__ */ jsxs10("span", { className: "font-mono", children: [
               target.mask.feather ?? 0,
               "px"
             ] })
           ] }),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "input",
             {
               type: "range",
@@ -1829,7 +1853,7 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
 // src/image-editor/FreeTransformOptionsBar.tsx
 import { useEffect as useEffect8, useState as useState11 } from "react";
 import { FREE_TRANSFORM_FIELDS, FREE_TRANSFORM_MODE_OPTIONS, INTERPOLATIONS, TRANSFORM_ANCHORS, WARP_GRID_OPTIONS, WARP_STYLE_OPTIONS } from "@pixerate/editor/image-editor";
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var chip3 = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
 var round = (v, unit) => unit === "px" ? Math.round(v * 10) / 10 : Math.round(v * 100) / 100;
 var FreeTransformOptionsBar = ({ tool, className }) => {
@@ -1847,16 +1871,16 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
     if (raw.trim() !== "" && Number.isFinite(v) && Math.abs(v - bar[field]) > 1e-9) tool.setField(field, v);
   };
   return /* @__PURE__ */ jsxs11("div", { className: `flex flex-wrap items-center gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "free-transform-options", role: "toolbar", "aria-label": "Free Transform options", children: [
-    /* @__PURE__ */ jsx11("div", { className: "flex gap-1", role: "group", "aria-label": "Transform mode", children: FREE_TRANSFORM_MODE_OPTIONS.map((m) => /* @__PURE__ */ jsx11("button", { type: "button", title: m.title, "aria-pressed": tool.mode === m.id, className: chip3(tool.mode === m.id), onClick: () => tool.setMode(m.id), children: m.label }, m.id)) }),
-    /* @__PURE__ */ jsx11("div", { className: "grid grid-cols-3 gap-px", role: "group", "aria-label": "Reference point", children: TRANSFORM_ANCHORS.map((a) => /* @__PURE__ */ jsx11("button", { type: "button", "aria-label": `Reference point ${a}`, title: `Reference point: ${a}`, className: "h-2.5 w-2.5 rounded-sm bg-slate-700 hover:bg-indigo-500", onClick: () => tool.setReference(a) }, a)) }),
+    /* @__PURE__ */ jsx12("div", { className: "flex gap-1", role: "group", "aria-label": "Transform mode", children: FREE_TRANSFORM_MODE_OPTIONS.map((m) => /* @__PURE__ */ jsx12("button", { type: "button", title: m.title, "aria-pressed": tool.mode === m.id, className: chip3(tool.mode === m.id), onClick: () => tool.setMode(m.id), children: m.label }, m.id)) }),
+    /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-3 gap-px", role: "group", "aria-label": "Reference point", children: TRANSFORM_ANCHORS.map((a) => /* @__PURE__ */ jsx12("button", { type: "button", "aria-label": `Reference point ${a}`, title: `Reference point: ${a}`, className: "h-2.5 w-2.5 rounded-sm bg-slate-700 hover:bg-indigo-500", onClick: () => tool.setReference(a) }, a)) }),
     tool.mode === "warp" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": "Warp options", children: [
       /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx11("span", { className: "text-slate-400", children: "Warp" }),
-        /* @__PURE__ */ jsx11("select", { "aria-label": "Warp style", value: warp.style, onChange: (e) => tool.setWarp({ style: e.target.value }), className: "rounded border border-slate-700 bg-slate-900 px-1 py-0.5", children: WARP_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx11("option", { value: o.id, children: o.label }, o.id)) })
+        /* @__PURE__ */ jsx12("span", { className: "text-slate-400", children: "Warp" }),
+        /* @__PURE__ */ jsx12("select", { "aria-label": "Warp style", value: warp.style, onChange: (e) => tool.setWarp({ style: e.target.value }), className: "rounded border border-slate-700 bg-slate-900 px-1 py-0.5", children: WARP_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx12("option", { value: o.id, children: o.label }, o.id)) })
       ] }),
       ["bend", "horizontal", "vertical"].map((k) => /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx11("span", { className: "text-slate-400", children: k === "bend" ? "Bend" : k === "horizontal" ? "H" : "V" }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12("span", { className: "text-slate-400", children: k === "bend" ? "Bend" : k === "horizontal" ? "H" : "V" }),
+        /* @__PURE__ */ jsx12(
           "input",
           {
             type: "number",
@@ -1877,9 +1901,9 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
           },
           `${k}:${warp[k]}`
         ),
-        /* @__PURE__ */ jsx11("span", { className: "text-slate-500", children: "%" })
+        /* @__PURE__ */ jsx12("span", { className: "text-slate-500", children: "%" })
       ] }, k)),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -1892,8 +1916,8 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
         }
       ),
       /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx11("span", { className: "text-slate-400", children: "Grid" }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12("span", { className: "text-slate-400", children: "Grid" }),
+        /* @__PURE__ */ jsx12(
           "select",
           {
             "aria-label": "Warp grid",
@@ -1903,14 +1927,14 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
               tool.setWarp({ columns: g.columns, rows: g.rows });
             },
             className: "rounded border border-slate-700 bg-slate-900 px-1 py-0.5",
-            children: WARP_GRID_OPTIONS.map((g) => /* @__PURE__ */ jsx11("option", { value: g.id, children: g.label }, g.id))
+            children: WARP_GRID_OPTIONS.map((g) => /* @__PURE__ */ jsx12("option", { value: g.id, children: g.label }, g.id))
           }
         )
       ] })
     ] }),
     tool.mode !== "warp" && FREE_TRANSFORM_FIELDS.map((f) => /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", title: f.title, children: [
-      /* @__PURE__ */ jsx11("span", { className: "text-slate-400", children: f.label }),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12("span", { className: "text-slate-400", children: f.label }),
+      /* @__PURE__ */ jsx12(
         "input",
         {
           type: "number",
@@ -1930,8 +1954,8 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
         },
         `${f.id}:${round(bar[f.id], f.unit)}`
       ),
-      /* @__PURE__ */ jsx11("span", { className: "text-slate-500", children: f.unit }),
-      f.id === "scaleX" && /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12("span", { className: "text-slate-500", children: f.unit }),
+      f.id === "scaleX" && /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -1947,28 +1971,28 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
       )
     ] }, f.id)),
     /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx11("span", { className: "text-slate-400", children: "Interpolation" }),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12("span", { className: "text-slate-400", children: "Interpolation" }),
+      /* @__PURE__ */ jsx12(
         "select",
         {
           "aria-label": "Interpolation",
           value: tool.interpolation,
           onChange: (e) => tool.setInterpolation(e.target.value),
           className: "rounded border border-slate-700 bg-slate-900 px-1 py-0.5",
-          children: INTERPOLATIONS.map((i) => /* @__PURE__ */ jsx11("option", { value: i, children: i[0].toUpperCase() + i.slice(1) }, i))
+          children: INTERPOLATIONS.map((i) => /* @__PURE__ */ jsx12("option", { value: i, children: i[0].toUpperCase() + i.slice(1) }, i))
         }
       )
     ] }),
-    /* @__PURE__ */ jsx11("button", { type: "button", title: "Commit (Enter)", className: "px-2 py-1 rounded bg-emerald-600 text-white hover:bg-emerald-500", onClick: () => tool.commit(), children: "Commit" }),
-    /* @__PURE__ */ jsx11("button", { type: "button", title: "Cancel (Esc)", className: chip3(false), onClick: () => tool.cancel(), children: "Cancel" }),
-    tool.error && /* @__PURE__ */ jsx11("span", { role: "alert", className: "text-rose-400", children: tool.error })
+    /* @__PURE__ */ jsx12("button", { type: "button", title: "Commit (Enter)", className: "px-2 py-1 rounded bg-emerald-600 text-white hover:bg-emerald-500", onClick: () => tool.commit(), children: "Commit" }),
+    /* @__PURE__ */ jsx12("button", { type: "button", title: "Cancel (Esc)", className: chip3(false), onClick: () => tool.cancel(), children: "Cancel" }),
+    tool.error && /* @__PURE__ */ jsx12("span", { role: "alert", className: "text-rose-400", children: tool.error })
   ] });
 };
 
 // src/image-editor/ShapeOptionsBar.tsx
 import { useEffect as useEffect9, useState as useState12 } from "react";
 import { LIVE_SHAPE_KINDS, SHAPE_KIND_LABELS, applyShapeOptions } from "@pixerate/editor/image-editor";
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var chip4 = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
 var ShapeOptionsBar = ({ controller, options, onChange, className }) => {
   const [, setTick] = useState12(0);
@@ -1988,12 +2012,12 @@ var ShapeOptionsBar = ({ controller, options, onChange, className }) => {
   };
   const num = (v, min, max) => Math.max(min, Math.min(max, Number(v) || min));
   return /* @__PURE__ */ jsxs12("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "shape-options", children: [
-    /* @__PURE__ */ jsx12("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Shape kind", children: LIVE_SHAPE_KINDS.map((k) => /* @__PURE__ */ jsx12("button", { type: "button", "aria-pressed": options.kind === k, className: chip4(options.kind === k), onClick: () => onChange({ ...options, kind: k }), children: SHAPE_KIND_LABELS[k] }, k)) }),
+    /* @__PURE__ */ jsx13("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Shape kind", children: LIVE_SHAPE_KINDS.map((k) => /* @__PURE__ */ jsx13("button", { type: "button", "aria-pressed": options.kind === k, className: chip4(options.kind === k), onClick: () => onChange({ ...options, kind: k }), children: SHAPE_KIND_LABELS[k] }, k)) }),
     /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-3", children: [
       /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx12("input", { type: "checkbox", "aria-label": "Fill", checked: options.fill !== null, onChange: (e) => set({ fill: e.target.checked ? "#4f46e5" : null }) }),
+        /* @__PURE__ */ jsx13("input", { type: "checkbox", "aria-label": "Fill", checked: options.fill !== null, onChange: (e) => set({ fill: e.target.checked ? "#4f46e5" : null }) }),
         "Fill",
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "input",
           {
             type: "color",
@@ -2006,9 +2030,9 @@ var ShapeOptionsBar = ({ controller, options, onChange, className }) => {
         )
       ] }),
       /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx12("input", { type: "checkbox", "aria-label": "Stroke", checked: options.stroke !== null, onChange: (e) => set({ stroke: e.target.checked ? "#000000" : null }) }),
+        /* @__PURE__ */ jsx13("input", { type: "checkbox", "aria-label": "Stroke", checked: options.stroke !== null, onChange: (e) => set({ stroke: e.target.checked ? "#000000" : null }) }),
         "Stroke",
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "input",
           {
             type: "color",
@@ -2022,7 +2046,7 @@ var ShapeOptionsBar = ({ controller, options, onChange, className }) => {
       ] }),
       /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-1", children: [
         "Width",
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "input",
           {
             type: "number",
@@ -2039,20 +2063,20 @@ var ShapeOptionsBar = ({ controller, options, onChange, className }) => {
     /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-3", children: [
       options.kind === "rect" && /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-1", children: [
         "Radius",
-        /* @__PURE__ */ jsx12("input", { type: "number", "aria-label": "Corner radius", min: 0, max: 1e3, value: options.radius, onChange: (e) => set({ radius: num(e.target.value, 0, 1e3) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
+        /* @__PURE__ */ jsx13("input", { type: "number", "aria-label": "Corner radius", min: 0, max: 1e3, value: options.radius, onChange: (e) => set({ radius: num(e.target.value, 0, 1e3) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
       ] }),
       options.kind === "polygon" && /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-1", children: [
         "Sides",
-        /* @__PURE__ */ jsx12("input", { type: "number", "aria-label": "Sides", min: 3, max: 100, value: options.sides, onChange: (e) => set({ sides: num(e.target.value, 3, 100) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
+        /* @__PURE__ */ jsx13("input", { type: "number", "aria-label": "Sides", min: 3, max: 100, value: options.sides, onChange: (e) => set({ sides: num(e.target.value, 3, 100) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
       ] }),
       options.kind === "star" && /* @__PURE__ */ jsxs12(Fragment4, { children: [
         /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-1", children: [
           "Points",
-          /* @__PURE__ */ jsx12("input", { type: "number", "aria-label": "Points", min: 3, max: 100, value: options.points, onChange: (e) => set({ points: num(e.target.value, 3, 100) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
+          /* @__PURE__ */ jsx13("input", { type: "number", "aria-label": "Points", min: 3, max: 100, value: options.points, onChange: (e) => set({ points: num(e.target.value, 3, 100) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
         ] }),
         /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-1", children: [
           "Inner",
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "input",
             {
               type: "range",
@@ -2070,23 +2094,23 @@ var ShapeOptionsBar = ({ controller, options, onChange, className }) => {
       options.kind === "line" && /* @__PURE__ */ jsxs12(Fragment4, { children: [
         /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-1", children: [
           "Weight",
-          /* @__PURE__ */ jsx12("input", { type: "number", "aria-label": "Line weight", min: 1, max: 200, value: options.weight, onChange: (e) => set({ weight: num(e.target.value, 1, 200) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
+          /* @__PURE__ */ jsx13("input", { type: "number", "aria-label": "Line weight", min: 1, max: 200, value: options.weight, onChange: (e) => set({ weight: num(e.target.value, 1, 200) }), className: "w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" })
         ] }),
         /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx12("input", { type: "checkbox", "aria-label": "Arrowhead", checked: options.arrow, onChange: (e) => set({ arrow: e.target.checked }) }),
+          /* @__PURE__ */ jsx13("input", { type: "checkbox", "aria-label": "Arrowhead", checked: options.arrow, onChange: (e) => set({ arrow: e.target.checked }) }),
           "Arrowhead"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx12("p", { className: "text-[10px] text-slate-500", children: "Drag on the image to draw. Shift: square, circle or 45\xB0 line. Alt: from the centre." }),
-    error && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-rose-400", children: error })
+    /* @__PURE__ */ jsx13("p", { className: "text-[10px] text-slate-500", children: "Drag on the image to draw. Shift: square, circle or 45\xB0 line. Alt: from the centre." }),
+    error && /* @__PURE__ */ jsx13("p", { role: "alert", className: "text-rose-400", children: error })
   ] });
 };
 
 // src/image-editor/TypeOptionsBar.tsx
 import { useEffect as useEffect10, useState as useState13 } from "react";
 import { TEXT_ALIGNS } from "@pixerate/editor/image-editor";
-import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var chip5 = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
 var ALIGN_LABELS = { left: "Left", center: "Centre", right: "Right", justify: "Justify" };
 var TypeOptionsBar = ({ controller, options, onChange, session, className }) => {
@@ -2129,7 +2153,7 @@ var TypeOptionsBar = ({ controller, options, onChange, session, className }) =>
     /* @__PURE__ */ jsxs13("div", { className: "flex flex-wrap items-center gap-2", children: [
       /* @__PURE__ */ jsxs13("label", { className: "flex items-center gap-1", children: [
         "Font",
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "input",
           {
             list: "pixerate-type-fonts",
@@ -2139,11 +2163,11 @@ var TypeOptionsBar = ({ controller, options, onChange, session, className }) =>
             className: "w-32 rounded border border-slate-700 bg-slate-950 px-1 py-0.5"
           }
         ),
-        /* @__PURE__ */ jsx13("datalist", { id: "pixerate-type-fonts", children: fonts.map((f) => /* @__PURE__ */ jsx13("option", { value: f }, f)) })
+        /* @__PURE__ */ jsx14("datalist", { id: "pixerate-type-fonts", children: fonts.map((f) => /* @__PURE__ */ jsx14("option", { value: f }, f)) })
       ] }),
       /* @__PURE__ */ jsxs13("label", { className: "flex items-center gap-1", children: [
         "Size",
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "input",
           {
             type: "number",
@@ -2156,24 +2180,24 @@ var TypeOptionsBar = ({ controller, options, onChange, session, className }) =>
           }
         )
       ] }),
-      /* @__PURE__ */ jsx13("button", { type: "button", "aria-pressed": shown.fontWeight >= 600, className: `${chip5(shown.fontWeight >= 600)} font-bold`, onClick: () => style({ fontWeight: shown.fontWeight >= 600 ? 400 : 700 }), children: "B" }),
-      /* @__PURE__ */ jsx13("button", { type: "button", "aria-pressed": shown.italic, className: `${chip5(shown.italic)} italic`, onClick: () => style({ italic: !shown.italic }), children: "I" }),
-      /* @__PURE__ */ jsx13("input", { type: "color", "aria-label": "Text colour", value: shown.color, onChange: (e) => style({ color: e.target.value }), className: "h-6 w-8 rounded border border-slate-700 bg-transparent" })
+      /* @__PURE__ */ jsx14("button", { type: "button", "aria-pressed": shown.fontWeight >= 600, className: `${chip5(shown.fontWeight >= 600)} font-bold`, onClick: () => style({ fontWeight: shown.fontWeight >= 600 ? 400 : 700 }), children: "B" }),
+      /* @__PURE__ */ jsx14("button", { type: "button", "aria-pressed": shown.italic, className: `${chip5(shown.italic)} italic`, onClick: () => style({ italic: !shown.italic }), children: "I" }),
+      /* @__PURE__ */ jsx14("input", { type: "color", "aria-label": "Text colour", value: shown.color, onChange: (e) => style({ color: e.target.value }), className: "h-6 w-8 rounded border border-slate-700 bg-transparent" })
     ] }),
-    /* @__PURE__ */ jsx13("div", { className: "flex gap-1", role: "toolbar", "aria-label": "Alignment", children: TEXT_ALIGNS.map((a) => /* @__PURE__ */ jsx13("button", { type: "button", "aria-pressed": options.align === a, className: chip5(options.align === a), onClick: () => style({ align: a }), children: ALIGN_LABELS[a] }, a)) }),
-    /* @__PURE__ */ jsx13("p", { className: "text-[10px] text-slate-500", children: "Click to type point text, drag for a paragraph box, click text to edit it. Esc finishes." }),
+    /* @__PURE__ */ jsx14("div", { className: "flex gap-1", role: "toolbar", "aria-label": "Alignment", children: TEXT_ALIGNS.map((a) => /* @__PURE__ */ jsx14("button", { type: "button", "aria-pressed": options.align === a, className: chip5(options.align === a), onClick: () => style({ align: a }), children: ALIGN_LABELS[a] }, a)) }),
+    /* @__PURE__ */ jsx14("p", { className: "text-[10px] text-slate-500", children: "Click to type point text, drag for a paragraph box, click text to edit it. Esc finishes." }),
     missing.length > 0 && /* @__PURE__ */ jsxs13("p", { role: "status", className: "text-amber-400", "data-testid": "type-missing-fonts", children: [
       "Missing ",
       missing.length === 1 ? "font" : "fonts",
       ": ",
       missing.join(", ")
     ] }),
-    error && /* @__PURE__ */ jsx13("p", { role: "alert", className: "text-rose-400", children: error })
+    error && /* @__PURE__ */ jsx14("p", { role: "alert", className: "text-rose-400", children: error })
   ] });
 };
 
 // src/image-editor/ImageEditor.tsx
-import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var ImageEditor = ({
   editor: externalEditor,
   src,
@@ -2914,7 +2938,7 @@ var ImageEditor = ({
       children: [
         /* @__PURE__ */ jsxs14("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__ */ jsxs14("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -2926,7 +2950,7 @@ var ImageEditor = ({
                 children: "Transform & Crop"
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -2938,7 +2962,7 @@ var ImageEditor = ({
                 children: "Adjustments"
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -2950,7 +2974,7 @@ var ImageEditor = ({
                 children: "Layers"
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -2962,7 +2986,7 @@ var ImageEditor = ({
                 children: "Paint"
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -2974,7 +2998,7 @@ var ImageEditor = ({
                 children: "Select & Mask"
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -2986,7 +3010,7 @@ var ImageEditor = ({
                 children: "Annotations"
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -3008,14 +3032,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__ */ jsx14("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx14("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__ */ jsx15("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx15("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__ */ jsxs14("div", { className: "flex items-center gap-2 text-xs", children: [
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -3026,7 +3050,7 @@ var ImageEditor = ({
                 children: "\u21A9"
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -3037,7 +3061,7 @@ var ImageEditor = ({
                 children: "\u21AA"
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -3046,8 +3070,8 @@ var ImageEditor = ({
                 children: "Reset"
               }
             ),
-            /* @__PURE__ */ jsx14("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -3061,7 +3085,7 @@ var ImageEditor = ({
               Math.round(state.zoom * 100),
               "%"
             ] }),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -3071,8 +3095,8 @@ var ImageEditor = ({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ jsx14("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -3083,7 +3107,7 @@ var ImageEditor = ({
                 children: "Hold Compare"
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -3094,8 +3118,8 @@ var ImageEditor = ({
             )
           ] })
         ] }),
-        transformTool.active && /* @__PURE__ */ jsx14(FreeTransformOptionsBar, { tool: transformTool, className: "border-b border-slate-800 bg-slate-900/95 px-4 py-2" }),
-        !transformTool.active && transformTool.error && /* @__PURE__ */ jsx14("div", { role: "alert", className: "border-b border-rose-900 bg-rose-950/80 px-4 py-1.5 text-xs text-rose-200", children: transformTool.error }),
+        transformTool.active && /* @__PURE__ */ jsx15(FreeTransformOptionsBar, { tool: transformTool, className: "border-b border-slate-800 bg-slate-900/95 px-4 py-2" }),
+        !transformTool.active && transformTool.error && /* @__PURE__ */ jsx15("div", { role: "alert", className: "border-b border-rose-900 bg-rose-950/80 px-4 py-1.5 text-xs text-rose-200", children: transformTool.error }),
         /* @__PURE__ */ jsxs14("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
           /* @__PURE__ */ jsxs14(
             "div",
@@ -3103,7 +3127,7 @@ var ImageEditor = ({
               ref: containerRef,
               className: "relative flex-1 h-[360px] md:h-full min-h-[320px] bg-slate-950 overflow-hidden select-none",
               children: [
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "canvas",
                   {
                     ref: canvasRef,
@@ -3120,7 +3144,7 @@ var ImageEditor = ({
                     className: `absolute inset-0 w-full h-full block ${transformTool.active ? "touch-none" : activeTab === "paint" ? "touch-none cursor-crosshair" : activeTab === "annotate" && state.activeTool === "type" ? "cursor-text" : activeTab === "annotate" && state.activeTool === "shape" ? "cursor-crosshair" : ""}`
                   }
                 ),
-                typeSession && /* @__PURE__ */ jsx14(
+                typeSession && /* @__PURE__ */ jsx15(
                   "textarea",
                   {
                     ref: typeInputRef,
@@ -3144,9 +3168,9 @@ var ImageEditor = ({
           ),
           /* @__PURE__ */ jsxs14("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__ */ jsxs14("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ jsx14("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
+              /* @__PURE__ */ jsx15("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
               /* @__PURE__ */ jsxs14("div", { className: "grid grid-cols-3 gap-2", children: [
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3158,7 +3182,7 @@ var ImageEditor = ({
                     children: "Freeform"
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3170,7 +3194,7 @@ var ImageEditor = ({
                     children: "1:1 Square"
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3182,7 +3206,7 @@ var ImageEditor = ({
                     children: "4:3 Standard"
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3194,7 +3218,7 @@ var ImageEditor = ({
                     children: "16:9 Wide"
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3206,7 +3230,7 @@ var ImageEditor = ({
                     children: "3:2 Photo"
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3219,10 +3243,10 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx14("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ jsx14("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
+              /* @__PURE__ */ jsx15("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsx15("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
               /* @__PURE__ */ jsxs14("div", { className: "grid grid-cols-2 gap-2", children: [
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3231,7 +3255,7 @@ var ImageEditor = ({
                     children: "Rotate -90\xB0"
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3240,7 +3264,7 @@ var ImageEditor = ({
                     children: "Rotate +90\xB0"
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3249,7 +3273,7 @@ var ImageEditor = ({
                     children: "Flip Horizontal"
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3262,8 +3286,8 @@ var ImageEditor = ({
             ] }),
             activeTab === "adjust" && /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-3 text-xs", children: [
               /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx14("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3273,9 +3297,9 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx14(Histogram, { histogram: editor.histogram }),
+              /* @__PURE__ */ jsx15(Histogram, { histogram: editor.histogram }),
               IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ jsxs14(React13.Fragment, { children: [
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   ControlSlider,
                   {
                     spec,
@@ -3290,8 +3314,8 @@ var ImageEditor = ({
                     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__ */ jsx14("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
-                      /* @__PURE__ */ jsx14(
+                      /* @__PURE__ */ jsx15("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
+                      /* @__PURE__ */ jsx15(
                         "button",
                         {
                           type: "button",
@@ -3304,7 +3328,7 @@ var ImageEditor = ({
                   }
                 )
               ] }, spec.id)),
-              /* @__PURE__ */ jsx14("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx15(
                 AdjustmentLayersPanel,
                 {
                   controller,
@@ -3314,8 +3338,8 @@ var ImageEditor = ({
               ) })
             ] }),
             activeTab === "layers" && /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsx14("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Layers" }),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Layers" }),
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -3326,14 +3350,14 @@ var ImageEditor = ({
                   children: "Free Transform"
                 }
               ),
-              /* @__PURE__ */ jsx14(LayersPanel, { controller }),
-              /* @__PURE__ */ jsx14("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Colour" }),
-              /* @__PURE__ */ jsx14(ColorProfilePanel, { controller })
+              /* @__PURE__ */ jsx15(LayersPanel, { controller }),
+              /* @__PURE__ */ jsx15("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Colour" }),
+              /* @__PURE__ */ jsx15(ColorProfilePanel, { controller })
             ] }),
             activeTab === "paint" && /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsx14("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Paint" }),
-              /* @__PURE__ */ jsx14(BrushOptionsBar, { controller }),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Paint" }),
+              /* @__PURE__ */ jsx15(BrushOptionsBar, { controller }),
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -3344,12 +3368,12 @@ var ImageEditor = ({
                   children: "Free Transform"
                 }
               ),
-              paintError && /* @__PURE__ */ jsx14("p", { role: "alert", className: "text-rose-400", "data-testid": "paint-error", children: paintError }),
-              /* @__PURE__ */ jsx14("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx14(LayersPanel, { controller }) })
+              paintError && /* @__PURE__ */ jsx15("p", { role: "alert", className: "text-rose-400", "data-testid": "paint-error", children: paintError }),
+              /* @__PURE__ */ jsx15("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx15(LayersPanel, { controller }) })
             ] }),
             activeTab === "annotate" && /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsx14("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Shape & Type Layers" }),
-              /* @__PURE__ */ jsx14("div", { className: "grid grid-cols-2 gap-1.5", children: ["shape", "type"].map((t) => /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Shape & Type Layers" }),
+              /* @__PURE__ */ jsx15("div", { className: "grid grid-cols-2 gap-1.5", children: ["shape", "type"].map((t) => /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -3360,13 +3384,13 @@ var ImageEditor = ({
                 },
                 t
               )) }),
-              state.activeTool === "shape" && /* @__PURE__ */ jsx14(ShapeOptionsBar, { controller, options: shapeOptions, onChange: setShapeOptions }),
-              state.activeTool === "type" && /* @__PURE__ */ jsx14(TypeOptionsBar, { controller, options: typeOptions, onChange: setTypeOptions, session: typeSession }),
-              state.activeTool === "type" && typeSession && /* @__PURE__ */ jsx14("button", { type: "button", onClick: finishTyping, className: "self-start rounded bg-slate-800 px-2 py-1 text-[11px] text-slate-200 hover:bg-slate-700", children: "Done editing text" }),
-              shapeTypeError && /* @__PURE__ */ jsx14("p", { role: "alert", className: "text-rose-400", "data-testid": "shape-type-error", children: shapeTypeError }),
-              /* @__PURE__ */ jsx14("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ jsx14("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
-              /* @__PURE__ */ jsx14("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ jsx14(
+              state.activeTool === "shape" && /* @__PURE__ */ jsx15(ShapeOptionsBar, { controller, options: shapeOptions, onChange: setShapeOptions }),
+              state.activeTool === "type" && /* @__PURE__ */ jsx15(TypeOptionsBar, { controller, options: typeOptions, onChange: setTypeOptions, session: typeSession }),
+              state.activeTool === "type" && typeSession && /* @__PURE__ */ jsx15("button", { type: "button", onClick: finishTyping, className: "self-start rounded bg-slate-800 px-2 py-1 text-[11px] text-slate-200 hover:bg-slate-700", children: "Done editing text" }),
+              shapeTypeError && /* @__PURE__ */ jsx15("p", { role: "alert", className: "text-rose-400", "data-testid": "shape-type-error", children: shapeTypeError }),
+              /* @__PURE__ */ jsx15("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsx15("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
+              /* @__PURE__ */ jsx15("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -3377,8 +3401,8 @@ var ImageEditor = ({
                 t
               )) }),
               /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 mt-2", children: [
-                /* @__PURE__ */ jsx14("label", { className: "text-slate-400", children: "Color:" }),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15("label", { className: "text-slate-400", children: "Color:" }),
+                /* @__PURE__ */ jsx15(
                   "input",
                   {
                     type: "color",
@@ -3389,13 +3413,13 @@ var ImageEditor = ({
                 ),
                 /* @__PURE__ */ jsxs14("div", { className: "flex-1 ml-2", children: [
                   /* @__PURE__ */ jsxs14("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
-                    /* @__PURE__ */ jsx14("span", { children: "Width:" }),
+                    /* @__PURE__ */ jsx15("span", { children: "Width:" }),
                     /* @__PURE__ */ jsxs14("span", { className: "font-mono", children: [
                       strokeWidth,
                       "px"
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "input",
                     {
                       type: "range",
@@ -3408,10 +3432,10 @@ var ImageEditor = ({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsx14("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ jsx14("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
+              /* @__PURE__ */ jsx15("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsx15("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
               /* @__PURE__ */ jsxs14("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "input",
                   {
                     type: "text",
@@ -3422,7 +3446,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__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3433,13 +3457,13 @@ var ImageEditor = ({
                 )
               ] }),
               /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between text-slate-400", children: [
-                /* @__PURE__ */ jsx14("span", { children: "Font Size:" }),
+                /* @__PURE__ */ jsx15("span", { children: "Font Size:" }),
                 /* @__PURE__ */ jsxs14("span", { className: "font-mono", children: [
                   fontSize,
                   "px"
                 ] })
               ] }),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "input",
                 {
                   type: "range",
@@ -3450,14 +3474,14 @@ var ImageEditor = ({
                   className: "w-full accent-indigo-500"
                 }
               ),
-              /* @__PURE__ */ jsx14("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsx15("div", { className: "h-px bg-slate-800 my-1" }),
               /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsxs14("span", { className: "text-slate-400", children: [
                   "Layers (",
                   state.annotations.length,
                   ")"
                 ] }),
-                state.selectedAnnotationId && /* @__PURE__ */ jsx14(
+                state.selectedAnnotationId && /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3466,7 +3490,7 @@ var ImageEditor = ({
                     children: "Delete Selected"
                   }
                 ),
-                state.annotations.length > 0 && /* @__PURE__ */ jsx14(
+                state.annotations.length > 0 && /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3479,8 +3503,8 @@ var ImageEditor = ({
             ] }),
             activeTab === "depth" && /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-3 text-xs", children: [
               /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx14("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3491,7 +3515,7 @@ var ImageEditor = ({
                 )
               ] }),
               /* @__PURE__ */ jsxs14("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "input",
                   {
                     type: "checkbox",
@@ -3500,12 +3524,12 @@ var ImageEditor = ({
                     className: "rounded accent-indigo-500"
                   }
                 ),
-                /* @__PURE__ */ jsx14("span", { children: "Enable Depth / Alpha Mask" })
+                /* @__PURE__ */ jsx15("span", { children: "Enable Depth / Alpha Mask" })
               ] }),
               state.depthMask.enabled && /* @__PURE__ */ jsxs14(Fragment5, { children: [
                 /* @__PURE__ */ jsxs14("div", { children: [
-                  /* @__PURE__ */ jsx14("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
+                  /* @__PURE__ */ jsx15(
                     "input",
                     {
                       type: "text",
@@ -3517,7 +3541,7 @@ var ImageEditor = ({
                   )
                 ] }),
                 /* @__PURE__ */ jsxs14("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "button",
                     {
                       type: "button",
@@ -3526,7 +3550,7 @@ var ImageEditor = ({
                       children: "Threshold Mode"
                     }
                   ),
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "button",
                     {
                       type: "button",
@@ -3538,10 +3562,10 @@ var ImageEditor = ({
                 ] }),
                 /* @__PURE__ */ jsxs14("div", { children: [
                   /* @__PURE__ */ jsxs14("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ jsx14("span", { children: "Depth Start (Lower):" }),
-                    /* @__PURE__ */ jsx14("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
+                    /* @__PURE__ */ jsx15("span", { children: "Depth Start (Lower):" }),
+                    /* @__PURE__ */ jsx15("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
                   ] }),
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "input",
                     {
                       type: "range",
@@ -3557,10 +3581,10 @@ var ImageEditor = ({
                 ] }),
                 /* @__PURE__ */ jsxs14("div", { children: [
                   /* @__PURE__ */ jsxs14("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ jsx14("span", { children: "Depth Stop (Upper):" }),
-                    /* @__PURE__ */ jsx14("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
+                    /* @__PURE__ */ jsx15("span", { children: "Depth Stop (Upper):" }),
+                    /* @__PURE__ */ jsx15("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
                   ] }),
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "input",
                     {
                       type: "range",
@@ -3576,10 +3600,10 @@ var ImageEditor = ({
                 ] }),
                 /* @__PURE__ */ jsxs14("div", { children: [
                   /* @__PURE__ */ jsxs14("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ jsx14("span", { children: "Softness:" }),
-                    /* @__PURE__ */ jsx14("span", { className: "font-mono", children: state.depthMask.softness })
+                    /* @__PURE__ */ jsx15("span", { children: "Softness:" }),
+                    /* @__PURE__ */ jsx15("span", { className: "font-mono", children: state.depthMask.softness })
                   ] }),
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "input",
                     {
                       type: "range",
@@ -3592,7 +3616,7 @@ var ImageEditor = ({
                   )
                 ] }),
                 /* @__PURE__ */ jsxs14("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "input",
                     {
                       type: "checkbox",
@@ -3601,12 +3625,12 @@ var ImageEditor = ({
                       className: "rounded accent-indigo-500"
                     }
                   ),
-                  /* @__PURE__ */ jsx14("span", { children: "Invert Mask" })
+                  /* @__PURE__ */ jsx15("span", { children: "Invert Mask" })
                 ] })
               ] })
             ] }),
             activeTab === "select" && /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 SelectionOptionsBar,
                 {
                   controller,
@@ -3616,9 +3640,9 @@ var ImageEditor = ({
                   quickMask: Boolean(state.quickMask)
                 }
               ),
-              selectionError && /* @__PURE__ */ jsx14("p", { role: "alert", className: "text-rose-400", children: selectionError }),
+              selectionError && /* @__PURE__ */ jsx15("p", { role: "alert", className: "text-rose-400", children: selectionError }),
               /* @__PURE__ */ jsxs14("div", { className: "flex gap-1", children: [
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3629,7 +3653,7 @@ var ImageEditor = ({
                     children: "Transform Selection"
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3641,11 +3665,11 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx14(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
+              /* @__PURE__ */ jsx15(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
             ] }),
             activeTab === "ai" && /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-4 text-xs", children: [
               /* @__PURE__ */ jsxs14("label", { className: "flex items-center justify-between gap-2 text-slate-300", children: [
-                /* @__PURE__ */ jsx14("span", { children: "Results go to" }),
+                /* @__PURE__ */ jsx15("span", { children: "Results go to" }),
                 /* @__PURE__ */ jsxs14(
                   "select",
                   {
@@ -3654,9 +3678,9 @@ var ImageEditor = ({
                     onChange: (e) => setAiTarget(e.target.value),
                     className: "bg-slate-800 border border-slate-700 rounded px-1.5 py-1",
                     children: [
-                      /* @__PURE__ */ jsx14("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
-                      /* @__PURE__ */ jsx14("option", { value: "new-layer", children: "New layer / mask" }),
-                      /* @__PURE__ */ jsx14("option", { value: "replace", children: "Replace image" })
+                      /* @__PURE__ */ jsx15("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
+                      /* @__PURE__ */ jsx15("option", { value: "new-layer", children: "New layer / mask" }),
+                      /* @__PURE__ */ jsx15("option", { value: "replace", children: "Replace image" })
                     ]
                   }
                 )
@@ -3664,13 +3688,13 @@ var ImageEditor = ({
               /* @__PURE__ */ jsxs14("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
                 /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ jsxs14("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx14("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx14("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" }) }),
+                    /* @__PURE__ */ jsx15("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx15("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__ */ jsx14("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__ */ jsx15("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__ */ jsx14("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3678,10 +3702,10 @@ var ImageEditor = ({
                     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__ */ jsxs14(Fragment5, { children: [
-                      /* @__PURE__ */ jsx14("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                      /* @__PURE__ */ jsx15("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Removing Background..."
                     ] }) : /* @__PURE__ */ jsxs14(Fragment5, { children: [
-                      /* @__PURE__ */ jsx14("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx14("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__ */ jsx15("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx15("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"
                     ] })
                   }
@@ -3691,17 +3715,17 @@ var ImageEditor = ({
                 /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ jsxs14("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
                     /* @__PURE__ */ jsxs14("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ jsx14("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__ */ jsx14("path", { d: "m14 7 3 3" })
+                      /* @__PURE__ */ jsx15("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__ */ jsx15("path", { d: "m14 7 3 3" })
                     ] }),
                     "Generative Inpainting"
                   ] }),
-                  isInpainting && /* @__PURE__ */ jsx14("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__ */ jsx15("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__ */ jsx14("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
+                /* @__PURE__ */ jsx15("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
                 /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsx14("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
+                  /* @__PURE__ */ jsx15(
                     "textarea",
                     {
                       id: "ai-inpaint-prompt-react",
@@ -3714,7 +3738,7 @@ var ImageEditor = ({
                   )
                 ] }),
                 /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsx14("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
+                  /* @__PURE__ */ jsx15("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
                   /* @__PURE__ */ jsxs14("div", { className: "grid grid-cols-2 gap-1.5", children: [
                     /* @__PURE__ */ jsxs14(
                       "button",
@@ -3744,7 +3768,7 @@ var ImageEditor = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -3752,17 +3776,17 @@ var ImageEditor = ({
                     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__ */ jsxs14(Fragment5, { children: [
-                      /* @__PURE__ */ jsx14("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                      /* @__PURE__ */ jsx15("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Generating Inpaint..."
                     ] }) : /* @__PURE__ */ jsxs14(Fragment5, { children: [
-                      /* @__PURE__ */ jsx14("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx14("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__ */ jsx15("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx15("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__ */ jsx14("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
-              aiSuccess && /* @__PURE__ */ jsx14("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
+              aiError && /* @__PURE__ */ jsx15("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
+              aiSuccess && /* @__PURE__ */ jsx15("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
             ] })
           ] })
         ] })
@@ -3780,6 +3804,7 @@ export {
   AdjustmentLayersPanel,
   LayerEffectsPanel,
   LayersPanel,
+  PaintGradientEditor,
   BrushOptionsBar,
   ColorProfilePanel,
   SelectionOptionsBar,
@@ -3789,4 +3814,4 @@ export {
   TypeOptionsBar,
   ImageEditor
 };
-//# sourceMappingURL=chunk-LWMUV5TC.js.map
+//# sourceMappingURL=chunk-QARGR5E5.js.map