@pixerate/editor-react 0.63.0 → 0.64.0

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

@@ -159,7 +159,7 @@ function useImageEditor(options = {}) {
 }
 
 // src/image-editor/ImageEditor.tsx
-import React8, { useRef as useRef4, useEffect as useEffect6, useState as useState9, useCallback as useCallback2 } from "react";
+import React9, { useRef as useRef5, useEffect as useEffect7, useState as useState10, useCallback as useCallback2 } from "react";
 import {
   canvasToImagePoint,
   hitTestCrop,
@@ -626,7 +626,196 @@ var AdjustmentLayersPanel = ({ controller, layers: layersProp, histogram }) => {
 };
 
 // src/image-editor/LayersPanel.tsx
+import { useEffect as useEffect5, useRef as useRef4, useState as useState6 } from "react";
+
+// src/image-editor/LayerEffectsPanel.tsx
 import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
+import { LAYER_EFFECT_MENU, effectControlChange, layerEffectControls, layerEffectsPanel } from "@pixerate/editor/image-editor";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var button = "px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300 hover:text-white disabled:opacity-40";
+var LayerEffectsPanel = ({ controller, layerId, className }) => {
+  const [, setTick] = useState5(0);
+  useEffect4(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
+  const [open, setOpen] = useState5(null);
+  const [error, setError] = useState5(null);
+  const commitNext = useRef3(true);
+  const layer = layerId ? controller.getLayer(layerId) : controller.getActiveLayer();
+  const model = layerEffectsPanel(layer);
+  const id = layer?.id;
+  const attempt = (fn) => {
+    try {
+      setError(null);
+      fn();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+  const sliderEvents = {
+    onPointerDown: () => commitNext.current = true,
+    onPointerUp: () => commitNext.current = true,
+    onKeyDown: () => commitNext.current = true
+  };
+  if (!model.available || !id) {
+    return /* @__PURE__ */ jsx5("div", { className: `text-xs text-slate-500 ${className ?? ""}`, "data-testid": "layer-effects", children: model.reason });
+  }
+  const effects = controller.getLayerEffects(id);
+  const patterns = controller.getDocumentPatterns();
+  const change = (effectId, control, value, drag = false) => attempt(() => {
+    const effect = controller.getLayerEffects(id).items.find((e) => e.id === effectId);
+    controller.updateLayerEffect(id, effectId, effectControlChange(effect, control.key, value, patterns), drag ? commitNext.current : true);
+    if (drag) commitNext.current = false;
+  });
+  const renderControl = (effectId, c) => {
+    const label = `${c.label}`;
+    switch (c.type) {
+      case "range": {
+        const k = c.percent ? 100 : 1;
+        const shown = Math.round(c.value * k * 100) / 100;
+        return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs5("span", { className: "text-slate-400", children: [
+            label,
+            " ",
+            shown,
+            c.unit
+          ] }),
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              type: "range",
+              "aria-label": label,
+              min: c.min * k,
+              max: c.max * k,
+              step: c.step * k,
+              value: shown,
+              disabled: model.readOnly,
+              ...sliderEvents,
+              onChange: (e) => change(effectId, c, Number(e.target.value) / k, true),
+              className: "accent-indigo-500"
+            }
+          )
+        ] }, c.key);
+      }
+      case "color":
+        return /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1.5 text-slate-300", children: [
+          /* @__PURE__ */ jsx5("input", { type: "color", "aria-label": label, value: c.value, disabled: model.readOnly, onChange: (e) => change(effectId, c, e.target.value) }),
+          label
+        ] }, c.key);
+      case "checkbox":
+        return /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1.5 text-slate-300", children: [
+          /* @__PURE__ */ jsx5("input", { type: "checkbox", "aria-label": label, checked: c.value, disabled: model.readOnly, onChange: (e) => change(effectId, c, e.target.checked), className: "accent-indigo-500" }),
+          label
+        ] }, c.key);
+      case "select":
+        return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: label }),
+          /* @__PURE__ */ jsx5(
+            "select",
+            {
+              "aria-label": label,
+              value: c.value,
+              disabled: model.readOnly,
+              onChange: (e) => change(effectId, c, e.target.value),
+              className: "bg-slate-800 border border-slate-700 rounded px-1.5 py-1",
+              children: c.options.map((o) => /* @__PURE__ */ jsx5("option", { value: o.value, children: o.label }, o.value))
+            }
+          )
+        ] }, c.key);
+    }
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: `flex flex-col gap-1.5 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "layer-effects", "aria-label": "Layer effects", role: "group", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx5("span", { className: "font-semibold text-slate-300", children: "fx Effects" }),
+      /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1 text-slate-300", children: [
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "checkbox",
+            "aria-label": "Effects on",
+            checked: model.enabled,
+            disabled: model.readOnly,
+            onChange: (e) => attempt(() => controller.setLayerEffectsEnabled(id, e.target.checked)),
+            className: "accent-indigo-500"
+          }
+        ),
+        "On"
+      ] }),
+      /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1 text-slate-400", children: [
+        "Scale",
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "number",
+            "aria-label": "Scale effects",
+            min: 1,
+            max: 1e3,
+            step: 1,
+            value: Math.round(model.scale * 100),
+            disabled: model.readOnly,
+            onChange: (e) => {
+              const v = Number(e.target.value);
+              if (v >= 1 && v <= 1e3) attempt(() => controller.setLayerEffectsEnabled(id, model.enabled, v / 100));
+            },
+            className: "w-14 bg-slate-800 border border-slate-700 rounded px-1"
+          }
+        ),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsxs5(
+        "select",
+        {
+          "aria-label": "Add effect",
+          value: "",
+          disabled: model.readOnly,
+          onChange: (e) => {
+            const kind = e.target.value;
+            if (!kind) return;
+            attempt(() => setOpen(controller.addLayerEffect(id, kind).effect.id));
+          },
+          className: "bg-slate-800 border border-slate-700 rounded px-1.5 py-1",
+          children: [
+            /* @__PURE__ */ jsx5("option", { value: "", children: "Add effect\u2026" }),
+            LAYER_EFFECT_MENU.map((m) => /* @__PURE__ */ jsx5("option", { value: m.kind, children: m.label }, m.kind))
+          ]
+        }
+      )
+    ] }),
+    model.readOnly && model.reason && /* @__PURE__ */ jsx5("p", { className: "text-slate-500", children: model.reason }),
+    /* @__PURE__ */ jsx5("ul", { className: "flex flex-col gap-1", "aria-label": "Effects", children: model.rows.map((row) => {
+      const effect = effects.items.find((e) => e.id === row.id);
+      const expanded = open === row.id;
+      return /* @__PURE__ */ jsxs5("li", { "data-effect-id": row.id, className: "rounded bg-slate-900/60 ring-1 ring-slate-800", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1.5 px-1.5 py-1", children: [
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": `${row.label} on`,
+              checked: row.enabled,
+              disabled: model.readOnly,
+              onChange: (e) => attempt(() => controller.updateLayerEffect(id, row.id, { enabled: e.target.checked })),
+              className: "accent-indigo-500"
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": expanded,
+              className: `flex-1 text-left ${row.enabled && model.enabled ? "" : "text-slate-500"}`,
+              onClick: () => setOpen(expanded ? null : row.id),
+              children: row.label
+            }
+          ),
+          /* @__PURE__ */ jsx5("button", { type: "button", className: button, "aria-label": `Remove ${row.label}`, disabled: model.readOnly, onClick: () => attempt(() => controller.removeLayerEffect(id, row.id)), children: "\u2715" })
+        ] }),
+        expanded && /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1 px-1.5 pb-1.5", "data-testid": "effect-settings", children: layerEffectControls(effect, patterns).map((c) => renderControl(row.id, c)) })
+      ] }, row.id);
+    }) }),
+    error && /* @__PURE__ */ jsx5("p", { role: "alert", className: "text-rose-400", children: error })
+  ] });
+};
+
+// src/image-editor/LayersPanel.tsx
 import {
   BLEND_MODES as BLEND_MODES2,
   PSD_FILE_ACCEPT,
@@ -635,11 +824,12 @@ import {
   dropZone,
   openPsdFile,
   layerBadge,
+  layerEffectsBadge,
   layerMenu,
   layerPanelRows,
   runLayerMenuAction
 } from "@pixerate/editor/image-editor";
-import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var iconButton = "px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300 hover:text-white disabled:opacity-40";
 var rowClass = (active) => `flex items-center gap-1.5 px-1.5 py-1 rounded cursor-pointer select-none ${active ? "bg-indigo-600/30 ring-1 ring-indigo-500" : "hover:bg-slate-800"}`;
 var Thumbnail = ({
@@ -650,8 +840,8 @@ var Thumbnail = ({
   selected,
   testId
 }) => {
-  const ref = useRef3(null);
-  useEffect4(() => {
+  const ref = useRef4(null);
+  useEffect5(() => {
     const canvas = ref.current;
     const ctx = canvas?.getContext("2d");
     if (!canvas || !ctx || !pixels || typeof ctx.createImageData !== "function") return;
@@ -661,7 +851,7 @@ var Thumbnail = ({
     img.data.set(pixels.data);
     ctx.putImageData(img, 0, 0);
   }, [pixels]);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "canvas",
     {
       ref,
@@ -674,15 +864,15 @@ var Thumbnail = ({
     }
   );
 };
-var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "image", className }) => {
-  const [, setTick] = useState5(0);
-  useEffect4(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
-  const [error, setError] = useState5(null);
-  const [renaming, setRenaming] = useState5(null);
-  const [menu, setMenu] = useState5(null);
-  const [drag, setDrag] = useState5(null);
-  const [psdNotes, setPsdNotes] = useState5([]);
-  const fileInput = useRef3(null);
+var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "image", effects = true, className }) => {
+  const [, setTick] = useState6(0);
+  useEffect5(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
+  const [error, setError] = useState6(null);
+  const [renaming, setRenaming] = useState6(null);
+  const [menu, setMenu] = useState6(null);
+  const [drag, setDrag] = useState6(null);
+  const [psdNotes, setPsdNotes] = useState6([]);
+  const fileInput = useRef4(null);
   const psdTask = async (fn) => {
     try {
       setError(null);
@@ -691,7 +881,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
       setError(err instanceof Error ? err.message : String(err));
     }
   };
-  const commitNext = useRef3(true);
+  const commitNext = useRef4(true);
   const state = controller.getState();
   const rows = layerPanelRows(state.layers, state.activeLayerId);
   const active = controller.getActiveLayer();
@@ -729,14 +919,14 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
   const thumb = (layer) => layer.type === "pixel" ? controller.getLayerThumbnail(layer.id, { maxSide: 64 }) : null;
   const maskThumb = (layer) => layer.mask && !layer.mask.source ? controller.getLayerThumbnail(layer.id, { maxSide: 64, mask: true }) : null;
   const locked = (layer) => Boolean(layer.locks?.all || layer.locks?.pixels || layer.locks?.position || layer.locks?.transparency);
-  return /* @__PURE__ */ jsxs5("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "layers-panel", onClick: () => menu && setMenu(null), children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-1", role: "toolbar", "aria-label": "Layer actions", children: [
-      /* @__PURE__ */ jsx5("button", { type: "button", className: iconButton, onClick: () => run("new-layer"), children: "New Layer" }),
-      /* @__PURE__ */ jsx5("button", { type: "button", className: iconButton, onClick: () => run("new-group"), children: "New Group" }),
-      /* @__PURE__ */ jsx5("button", { type: "button", className: iconButton, disabled: !active, onClick: () => run("duplicate"), children: "Duplicate" }),
-      /* @__PURE__ */ jsx5("button", { type: "button", className: iconButton, disabled: !active, onClick: () => run("add-mask"), children: "Add Mask" }),
-      /* @__PURE__ */ jsx5("button", { type: "button", className: iconButton, disabled: !active, onClick: () => run("delete"), children: "Delete" }),
-      /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs6("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "layers-panel", onClick: () => menu && setMenu(null), children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-1", role: "toolbar", "aria-label": "Layer actions", children: [
+      /* @__PURE__ */ jsx6("button", { type: "button", className: iconButton, onClick: () => run("new-layer"), children: "New Layer" }),
+      /* @__PURE__ */ jsx6("button", { type: "button", className: iconButton, onClick: () => run("new-group"), children: "New Group" }),
+      /* @__PURE__ */ jsx6("button", { type: "button", className: iconButton, disabled: !active, onClick: () => run("duplicate"), children: "Duplicate" }),
+      /* @__PURE__ */ jsx6("button", { type: "button", className: iconButton, disabled: !active, onClick: () => run("add-mask"), children: "Add Mask" }),
+      /* @__PURE__ */ jsx6("button", { type: "button", className: iconButton, disabled: !active, onClick: () => run("delete"), children: "Delete" }),
+      /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
@@ -751,10 +941,10 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
           children: "\u22EF"
         }
       ),
-      psd && /* @__PURE__ */ jsxs5(Fragment, { children: [
-        /* @__PURE__ */ jsx5("button", { type: "button", className: iconButton, onClick: () => fileInput.current?.click(), children: "Open PSD\u2026" }),
-        /* @__PURE__ */ jsx5("button", { type: "button", className: iconButton, onClick: () => psdTask(async () => (await downloadPsd(controller, psdFileName)).warnings), children: "Export PSD" }),
-        /* @__PURE__ */ jsx5(
+      psd && /* @__PURE__ */ jsxs6(Fragment, { children: [
+        /* @__PURE__ */ jsx6("button", { type: "button", className: iconButton, onClick: () => fileInput.current?.click(), children: "Open PSD\u2026" }),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: iconButton, onClick: () => psdTask(async () => (await downloadPsd(controller, psdFileName)).warnings), children: "Export PSD" }),
+        /* @__PURE__ */ jsx6(
           "input",
           {
             ref: fileInput,
@@ -772,18 +962,18 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
         )
       ] })
     ] }),
-    psdNotes.length > 0 && /* @__PURE__ */ jsxs5("ul", { className: "rounded bg-amber-900/30 text-amber-200 px-2 py-1 space-y-0.5", "data-testid": "psd-warnings", "aria-label": "PSD warnings", children: [
-      psdNotes.map((n) => /* @__PURE__ */ jsx5("li", { children: n }, n)),
-      /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5("button", { type: "button", className: "underline", onClick: () => setPsdNotes([]), children: "Dismiss" }) })
+    psdNotes.length > 0 && /* @__PURE__ */ jsxs6("ul", { className: "rounded bg-amber-900/30 text-amber-200 px-2 py-1 space-y-0.5", "data-testid": "psd-warnings", "aria-label": "PSD warnings", children: [
+      psdNotes.map((n) => /* @__PURE__ */ jsx6("li", { children: n }, n)),
+      /* @__PURE__ */ jsx6("li", { children: /* @__PURE__ */ jsx6("button", { type: "button", className: "underline", onClick: () => setPsdNotes([]), children: "Dismiss" }) })
     ] }),
-    active && /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1 items-center", "data-testid": "layer-properties", children: [
-      /* @__PURE__ */ jsxs5("label", { className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsxs5("span", { className: "text-slate-400", children: [
+    active && /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1 items-center", "data-testid": "layer-properties", children: [
+      /* @__PURE__ */ jsxs6("label", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsxs6("span", { className: "text-slate-400", children: [
           "Opacity ",
           Math.round(active.opacity * 100),
           "%"
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "input",
           {
             type: "range",
@@ -797,13 +987,13 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs5("label", { className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsxs5("span", { className: "text-slate-400", children: [
+      /* @__PURE__ */ jsxs6("label", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsxs6("span", { className: "text-slate-400", children: [
           "Fill ",
           Math.round(((active.type === "pixel" ? active.fillOpacity : void 0) ?? 1) * 100),
           "%"
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "input",
           {
             type: "range",
@@ -818,7 +1008,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs6(
         "select",
         {
           "aria-label": "Layer blend mode",
@@ -826,13 +1016,13 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
           value: active.blend,
           onChange: (e) => attempt(() => controller.setLayerProperties(active.id, { blend: e.target.value })),
           children: [
-            active.type === "group" && /* @__PURE__ */ jsx5("option", { value: "pass-through", children: "Pass Through" }),
-            BLEND_MODES2.map((m) => /* @__PURE__ */ jsx5("option", { value: m.id, children: m.label }, m.id))
+            active.type === "group" && /* @__PURE__ */ jsx6("option", { value: "pass-through", children: "Pass Through" }),
+            BLEND_MODES2.map((m) => /* @__PURE__ */ jsx6("option", { value: m.id, children: m.label }, m.id))
           ]
         }
       ),
-      /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1.5 text-slate-300", children: [
-        /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1.5 text-slate-300", children: [
+        /* @__PURE__ */ jsx6(
           "input",
           {
             type: "checkbox",
@@ -844,8 +1034,8 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
         ),
         "Clip to below"
       ] }),
-      /* @__PURE__ */ jsx5("div", { className: "col-span-2 flex flex-wrap gap-2 text-slate-400", role: "group", "aria-label": "Layer locks", children: ["pixels", "transparency", "position", "all"].map((k) => /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6("div", { className: "col-span-2 flex flex-wrap gap-2 text-slate-400", role: "group", "aria-label": "Layer locks", children: ["pixels", "transparency", "position", "all"].map((k) => /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx6(
           "input",
           {
             type: "checkbox",
@@ -858,9 +1048,10 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
         k
       ] }, k)) })
     ] }),
-    /* @__PURE__ */ jsx5("ul", { className: "flex flex-col gap-0.5", role: "tree", "aria-label": "Layers", children: rows.map((row) => {
+    effects && active && active.type !== "adjustment" && /* @__PURE__ */ jsx6(LayerEffectsPanel, { controller, className: "border-t border-slate-800 pt-1.5" }),
+    /* @__PURE__ */ jsx6("ul", { className: "flex flex-col gap-0.5", role: "tree", "aria-label": "Layers", children: rows.map((row) => {
       const { layer } = row;
-      return /* @__PURE__ */ jsxs5(
+      return /* @__PURE__ */ jsxs6(
         "li",
         {
           role: "treeitem",
@@ -890,7 +1081,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
           className: rowClass(row.active),
           style: { paddingLeft: 6 + row.depth * 14 },
           children: [
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -904,7 +1095,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                 children: layer.visible ? "\u25CF" : "\u25CB"
               }
             ),
-            layer.type === "group" && /* @__PURE__ */ jsx5(
+            layer.type === "group" && /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -917,8 +1108,8 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                 children: layer.collapsed ? "\u25B8" : "\u25BE"
               }
             ),
-            row.clipped && /* @__PURE__ */ jsx5("span", { className: "text-slate-500", "aria-label": "Clipped", children: "\u21B3" }),
-            layer.type === "pixel" ? /* @__PURE__ */ jsx5(
+            row.clipped && /* @__PURE__ */ jsx6("span", { className: "text-slate-500", "aria-label": "Clipped", children: "\u21B3" }),
+            layer.type === "pixel" ? /* @__PURE__ */ jsx6(
               Thumbnail,
               {
                 pixels: thumb(layer),
@@ -926,7 +1117,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                 label: `${row.label} pixels`,
                 selected: row.active && state.activeTarget === "pixels" && Boolean(layer.mask)
               }
-            ) : /* @__PURE__ */ jsx5(
+            ) : /* @__PURE__ */ jsx6(
               "span",
               {
                 className: "shrink-0 grid place-items-center rounded bg-slate-800 text-[9px] text-slate-400 ring-1 ring-slate-700",
@@ -934,7 +1125,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                 children: layerBadge(layer)
               }
             ),
-            layer.mask && /* @__PURE__ */ jsx5(
+            layer.mask && /* @__PURE__ */ jsx6(
               Thumbnail,
               {
                 pixels: maskThumb(layer),
@@ -949,7 +1140,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                 }
               }
             ),
-            renaming === layer.id ? /* @__PURE__ */ jsx5(
+            renaming === layer.id ? /* @__PURE__ */ jsx6(
               "input",
               {
                 autoFocus: true,
@@ -966,7 +1157,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                   if (e.key === "Escape") setRenaming(null);
                 }
               }
-            ) : /* @__PURE__ */ jsx5(
+            ) : /* @__PURE__ */ jsx6(
               "span",
               {
                 className: `flex-1 min-w-0 truncate ${layer.visible ? "" : "text-slate-500"}`,
@@ -977,15 +1168,30 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                 children: row.label
               }
             ),
-            locked(layer) && /* @__PURE__ */ jsx5("span", { "aria-label": "Locked", className: "text-slate-400", children: "\u{1F512}" }),
-            layer.blend !== "normal" && layer.blend !== "pass-through" && /* @__PURE__ */ jsx5("span", { className: "text-[9px] text-slate-500", children: layer.blend })
+            layerEffectsBadge(layer) && /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                "data-testid": "layer-fx-badge",
+                "aria-label": layerEffectsBadge(layer) === "on" ? `Turn effects off for ${row.label}` : `Turn effects on for ${row.label}`,
+                "aria-pressed": layerEffectsBadge(layer) === "on",
+                className: `text-[9px] italic font-semibold ${layerEffectsBadge(layer) === "on" ? "text-indigo-300" : "text-slate-600 line-through"}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  attempt(() => controller.setLayerEffectsEnabled(layer.id, layerEffectsBadge(layer) !== "on"));
+                },
+                children: "fx"
+              }
+            ),
+            locked(layer) && /* @__PURE__ */ jsx6("span", { "aria-label": "Locked", className: "text-slate-400", children: "\u{1F512}" }),
+            layer.blend !== "normal" && layer.blend !== "pass-through" && /* @__PURE__ */ jsx6("span", { className: "text-[9px] text-slate-500", children: layer.blend })
           ]
         },
         layer.id
       );
     }) }),
-    error && /* @__PURE__ */ jsx5("p", { role: "alert", className: "text-rose-400", children: error }),
-    menu && /* @__PURE__ */ jsx5(
+    error && /* @__PURE__ */ jsx6("p", { role: "alert", className: "text-rose-400", children: error }),
+    menu && /* @__PURE__ */ jsx6(
       "div",
       {
         role: "menu",
@@ -994,7 +1200,7 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
         style: { left: menu.x, top: menu.y },
         onClick: (e) => e.stopPropagation(),
         onKeyDown: (e) => e.key === "Escape" && setMenu(null),
-        children: layerMenu(controller).map((item) => /* @__PURE__ */ jsx5(
+        children: layerMenu(controller).map((item) => /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -1012,14 +1218,14 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
 };
 
 // src/image-editor/BrushOptionsBar.tsx
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { useEffect as useEffect6, useState as useState7 } from "react";
 import { BRUSH_OPTION_CONTROLS, MIXER_MIXING_OPTIONS, MIXER_OPTION_CONTROLS, PAINT_TOOLS, rgbUnitToHex } from "@pixerate/editor/image-editor";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, 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] = useState6(0);
-  useEffect5(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
-  const [error, setError] = useState6(null);
+  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 } = state.paint;
   const attempt = (fn) => {
@@ -1030,8 +1236,8 @@ var BrushOptionsBar = ({ controller, className }) => {
       setError(err instanceof Error ? err.message : String(err));
     }
   };
-  return /* @__PURE__ */ jsxs6("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "brush-options", children: [
-    /* @__PURE__ */ jsx6("div", { className: "flex gap-1", role: "toolbar", "aria-label": "Paint tools", children: PAINT_TOOLS.map((t) => /* @__PURE__ */ jsx6(
+  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 gap-1", role: "toolbar", "aria-label": "Paint tools", children: PAINT_TOOLS.map((t) => /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -1043,9 +1249,9 @@ var BrushOptionsBar = ({ controller, className }) => {
       },
       t.id
     )) }),
-    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", role: "group", "aria-label": "Colours", children: [
-      /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx6(
+    /* @__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(
           "input",
           {
             type: "color",
@@ -1055,10 +1261,10 @@ var BrushOptionsBar = ({ controller, className }) => {
             className: "h-6 w-8 rounded border border-slate-700 bg-transparent"
           }
         ),
-        /* @__PURE__ */ jsx6("span", { className: "text-slate-400", children: "FG" })
+        /* @__PURE__ */ jsx7("span", { className: "text-slate-400", children: "FG" })
       ] }),
-      /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx7(
           "input",
           {
             type: "color",
@@ -1068,12 +1274,12 @@ var BrushOptionsBar = ({ controller, className }) => {
             className: "h-6 w-8 rounded border border-slate-700 bg-transparent"
           }
         ),
-        /* @__PURE__ */ jsx6("span", { className: "text-slate-400", children: "BG" })
+        /* @__PURE__ */ jsx7("span", { className: "text-slate-400", children: "BG" })
       ] }),
-      /* @__PURE__ */ jsx6("button", { type: "button", title: "Swap colours (X)", className: chip(false), onClick: () => controller.swapPaintColors(), children: "Swap" }),
-      /* @__PURE__ */ jsx6("button", { type: "button", title: "Default colours (D)", className: chip(false), onClick: () => controller.resetPaintColors(), children: "Default" })
+      /* @__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" })
     ] }),
-    BRUSH_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ jsx6(
+    BRUSH_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ jsx7(
       ControlSlider,
       {
         spec,
@@ -1082,9 +1288,9 @@ var BrushOptionsBar = ({ controller, className }) => {
       },
       spec.id
     )),
-    state.activeTool === "mixer" && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2 border-t border-slate-800 pt-2", role: "group", "aria-label": "Mixer Brush", "data-testid": "mixer-options", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx6(
+    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(
           "span",
           {
             "aria-label": "Brush load",
@@ -1093,10 +1299,10 @@ var BrushOptionsBar = ({ controller, className }) => {
             style: { background: mixerLoad.reservoir ? rgbUnitToHex(mixerLoad.reservoir) : "transparent" }
           }
         ),
-        /* @__PURE__ */ jsx6("button", { type: "button", title: "Fill the reservoir with the foreground colour", className: chip(false), onClick: () => controller.loadMixerBrush(), children: "Load brush" }),
-        /* @__PURE__ */ jsx6("button", { type: "button", title: "Empty the picked-up colour", className: chip(false), onClick: () => controller.cleanMixerBrush(), children: "Clean brush" })
+        /* @__PURE__ */ 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__ */ jsx6("div", { className: "flex gap-1", role: "group", "aria-label": "Mixing", children: MIXER_MIXING_OPTIONS.map((m) => /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7("div", { className: "flex gap-1", role: "group", "aria-label": "Mixing", children: MIXER_MIXING_OPTIONS.map((m) => /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -1108,10 +1314,10 @@ var BrushOptionsBar = ({ controller, className }) => {
         },
         m.id
       )) }),
-      MIXER_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ jsx6(ControlSlider, { spec, value: mixer[spec.id], onChange: (v) => controller.setPaintOptions({ mixer: { [spec.id]: v } }) }, spec.id)),
-      /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap gap-3 text-slate-300", children: [
-        /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx6(
+      MIXER_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ jsx7(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(
             "input",
             {
               type: "checkbox",
@@ -1123,8 +1329,8 @@ var BrushOptionsBar = ({ controller, className }) => {
           ),
           "Load each stroke"
         ] }),
-        /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx7(
             "input",
             {
               type: "checkbox",
@@ -1138,9 +1344,9 @@ var BrushOptionsBar = ({ controller, className }) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap gap-3 text-slate-300", role: "group", "aria-label": "Pressure", children: [
-      /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx6(
+    /* @__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(
           "input",
           {
             type: "checkbox",
@@ -1152,8 +1358,8 @@ var BrushOptionsBar = ({ controller, className }) => {
         ),
         "Pressure size"
       ] }),
-      /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx7(
           "input",
           {
             type: "checkbox",
@@ -1166,23 +1372,23 @@ var BrushOptionsBar = ({ controller, className }) => {
         "Pressure opacity"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ jsx6("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.fillPixels()), children: "Fill" }),
-      /* @__PURE__ */ jsx6("button", { type: "button", className: chip(false), onClick: () => attempt(() => controller.clearPixels()), children: "Clear" })
+    /* @__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" })
     ] }),
-    error && /* @__PURE__ */ jsx6("p", { role: "alert", className: "text-rose-400", children: error })
+    error && /* @__PURE__ */ jsx7("p", { role: "alert", className: "text-rose-400", children: error })
   ] });
 };
 
 // src/image-editor/SelectionOptionsBar.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import {
   SELECTION_MODES,
   SELECTION_MODE_LABELS,
   SELECTION_TOOLS,
   describeSelection
 } from "@pixerate/editor/image-editor";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var MODIFY_OPS = [
   { op: "grow", label: "Grow" },
   { op: "shrink", label: "Shrink" },
@@ -1199,20 +1405,20 @@ var SelectionOptionsBar = ({
   quickMask,
   className = ""
 }) => {
-  const [radius, setRadius] = useState7(2);
+  const [radius, setRadius] = useState8(2);
   const set = (patch) => onOptionsChange({ ...options, ...patch });
   const sel = selection === void 0 ? controller.getSelection() : selection;
   const qm = quickMask ?? Boolean(controller.getState().quickMask);
-  return /* @__PURE__ */ jsxs7("div", { "data-testid": "selection-options-bar", className: `flex flex-col gap-3 text-xs ${className}`, children: [
-    /* @__PURE__ */ jsx7("div", { role: "group", "aria-label": "Selection tool", className: "flex flex-wrap gap-1", children: SELECTION_TOOLS.map((t) => /* @__PURE__ */ jsx7("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__ */ jsx7("div", { role: "group", "aria-label": "Selection mode", className: "flex flex-wrap gap-1", children: SELECTION_MODES.map((m) => /* @__PURE__ */ jsx7("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__ */ jsxs7("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs7("label", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsxs7("span", { className: "flex justify-between text-slate-400", children: [
-          /* @__PURE__ */ jsx7("span", { children: "Tolerance" }),
-          /* @__PURE__ */ jsx7("span", { className: "font-mono", children: options.tolerance })
+  return /* @__PURE__ */ jsxs8("div", { "data-testid": "selection-options-bar", className: `flex flex-col gap-3 text-xs ${className}`, children: [
+    /* @__PURE__ */ jsx8("div", { role: "group", "aria-label": "Selection tool", className: "flex flex-wrap gap-1", children: SELECTION_TOOLS.map((t) => /* @__PURE__ */ jsx8("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__ */ jsx8("div", { role: "group", "aria-label": "Selection mode", className: "flex flex-wrap gap-1", children: SELECTION_MODES.map((m) => /* @__PURE__ */ jsx8("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__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs8("label", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs8("span", { className: "flex justify-between text-slate-400", children: [
+          /* @__PURE__ */ jsx8("span", { children: "Tolerance" }),
+          /* @__PURE__ */ jsx8("span", { className: "font-mono", children: options.tolerance })
         ] }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "range",
@@ -1226,17 +1432,17 @@ var SelectionOptionsBar = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-slate-300", children: [
-        /* @__PURE__ */ jsx7("input", { type: "checkbox", checked: options.contiguous, onChange: (e) => set({ contiguous: e.target.checked }) }),
+      /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-2 text-slate-300", children: [
+        /* @__PURE__ */ jsx8("input", { type: "checkbox", checked: options.contiguous, onChange: (e) => set({ contiguous: e.target.checked }) }),
         "Contiguous"
       ] }),
-      /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-slate-300", children: [
-        /* @__PURE__ */ jsx7("input", { type: "checkbox", checked: options.sampleMerged, onChange: (e) => set({ sampleMerged: e.target.checked }) }),
+      /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-2 text-slate-300", children: [
+        /* @__PURE__ */ jsx8("input", { type: "checkbox", checked: options.sampleMerged, onChange: (e) => set({ sampleMerged: e.target.checked }) }),
         "Sample adjusted image"
       ] }),
-      /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-slate-300", children: [
+      /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-2 text-slate-300", children: [
         "Sample",
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8(
           "select",
           {
             "aria-label": "Sample from",
@@ -1244,27 +1450,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__ */ jsx7("option", { value: "composite", children: "All layers" }),
-              /* @__PURE__ */ jsx7("option", { value: "active-layer", children: "Active layer" })
+              /* @__PURE__ */ jsx8("option", { value: "composite", children: "All layers" }),
+              /* @__PURE__ */ jsx8("option", { value: "active-layer", children: "Active layer" })
             ]
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-slate-300", children: [
-      /* @__PURE__ */ jsx7("input", { type: "checkbox", checked: options.antiAlias, onChange: (e) => set({ antiAlias: e.target.checked }) }),
+    /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-2 text-slate-300", children: [
+      /* @__PURE__ */ jsx8("input", { type: "checkbox", checked: options.antiAlias, onChange: (e) => set({ antiAlias: e.target.checked }) }),
       "Anti-alias"
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap gap-1", children: [
-      /* @__PURE__ */ jsx7("button", { type: "button", className: btn(false), onClick: () => controller.selectAll(), children: "Select All" }),
-      /* @__PURE__ */ jsx7("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.deselect(), children: "Deselect" }),
-      /* @__PURE__ */ jsx7("button", { type: "button", className: btn(false), onClick: () => controller.invertSelection(), children: "Inverse" }),
-      /* @__PURE__ */ jsx7("button", { type: "button", "aria-pressed": qm, className: btn(qm), onClick: () => controller.setQuickMask(!qm), children: "Quick Mask" })
+    /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ jsx8("button", { type: "button", className: btn(false), onClick: () => controller.selectAll(), children: "Select All" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.deselect(), children: "Deselect" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: btn(false), onClick: () => controller.invertSelection(), children: "Inverse" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", "aria-pressed": qm, className: btn(qm), onClick: () => controller.setQuickMask(!qm), children: "Quick Mask" })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-1", children: [
-      /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1 text-slate-400", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-1 text-slate-400", children: [
         "Radius",
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "number",
@@ -1278,29 +1484,29 @@ var SelectionOptionsBar = ({
           }
         )
       ] }),
-      MODIFY_OPS.map(({ op, label }) => /* @__PURE__ */ jsx7("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.modifySelection(op, radius), children: label }, op))
+      MODIFY_OPS.map(({ op, label }) => /* @__PURE__ */ jsx8("button", { type: "button", className: btn(false), disabled: !sel, onClick: () => controller.modifySelection(op, radius), children: label }, op))
     ] }),
-    /* @__PURE__ */ jsx7("p", { "data-testid": "selection-status", className: "text-slate-400", children: describeSelection(sel) })
+    /* @__PURE__ */ jsx8("p", { "data-testid": "selection-status", className: "text-slate-400", children: describeSelection(sel) })
   ] });
 };
 
 // src/image-editor/RefineEdgePanel.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import {
   ADJUSTMENT_KINDS as ADJUSTMENT_KINDS2,
   REFINE_EDGE_CONTROLS,
   adjustmentKindLabel as adjustmentKindLabel2,
   layerMaskFromSelection
 } 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 jsxs9 } from "react/jsx-runtime";
 var DEFAULT_PARAMS = { radius: 8, smartRadius: false, smooth: 0, feather: 0, contrast: 0, shiftEdge: 0 };
-var button = "px-2 py-1 rounded-md border border-slate-800 bg-slate-950 text-[11px] text-slate-200 hover:text-white disabled:opacity-40";
+var 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 = "" }) => {
-  const [params, setParams] = useState8(DEFAULT_PARAMS);
-  const [busy, setBusy] = useState8(false);
-  const [error, setError] = useState8(null);
-  const [layerId, setLayerId] = useState8("");
-  const [newKind, setNewKind] = useState8("hueSaturation");
+  const [params, setParams] = useState9(DEFAULT_PARAMS);
+  const [busy, setBusy] = useState9(false);
+  const [error, setError] = useState9(null);
+  const [layerId, setLayerId] = useState9("");
+  const [newKind, setNewKind] = useState9("hueSaturation");
   const sel = selection === void 0 ? controller.getSelection() : selection;
   const list = layers ?? controller.getAdjustmentLayers();
   const target = list.find((l) => l.id === layerId) ?? list[list.length - 1];
@@ -1315,17 +1521,17 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsxs8("div", { "data-testid": "refine-edge-panel", className: `flex flex-col gap-3 text-xs ${className}`, children: [
-    /* @__PURE__ */ jsx8("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Refine Edge" }),
-    REFINE_EDGE_CONTROLS.map((c) => /* @__PURE__ */ jsxs8("label", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsxs8("span", { className: "flex justify-between text-slate-400", children: [
-        /* @__PURE__ */ jsx8("span", { children: c.label }),
-        /* @__PURE__ */ jsxs8("span", { className: "font-mono", children: [
+  return /* @__PURE__ */ jsxs9("div", { "data-testid": "refine-edge-panel", className: `flex flex-col gap-3 text-xs ${className}`, children: [
+    /* @__PURE__ */ jsx9("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Refine Edge" }),
+    REFINE_EDGE_CONTROLS.map((c) => /* @__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: c.label }),
+        /* @__PURE__ */ jsxs9("span", { className: "font-mono", children: [
           params[c.id],
           c.unit
         ] })
       ] }),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         "input",
         {
           type: "range",
@@ -1339,67 +1545,67 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
         }
       )
     ] }, c.id)),
-    /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-2 text-slate-300", children: [
-      /* @__PURE__ */ jsx8("input", { type: "checkbox", checked: params.smartRadius, onChange: (e) => setParams({ ...params, smartRadius: e.target.checked }) }),
+    /* @__PURE__ */ jsxs9("label", { className: "flex items-center gap-2 text-slate-300", children: [
+      /* @__PURE__ */ jsx9("input", { type: "checkbox", checked: params.smartRadius, onChange: (e) => setParams({ ...params, smartRadius: e.target.checked }) }),
       "Smart Radius"
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !sel || busy, onClick: refine, children: "Refine Edge" }),
-      /* @__PURE__ */ jsx8("button", { type: "button", className: button, onClick: () => setParams(DEFAULT_PARAMS), children: "Reset" })
+    /* @__PURE__ */ jsxs9("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ jsx9("button", { type: "button", className: button2, disabled: !sel || busy, onClick: refine, children: "Refine Edge" }),
+      /* @__PURE__ */ jsx9("button", { type: "button", className: button2, onClick: () => setParams(DEFAULT_PARAMS), children: "Reset" })
     ] }),
-    error && /* @__PURE__ */ jsx8("p", { role: "alert", className: "text-rose-400", children: error }),
-    /* @__PURE__ */ jsx8("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] mt-2", children: "Layer Mask" }),
-    /* @__PURE__ */ jsxs8("div", { className: "flex gap-1 items-center", children: [
-      /* @__PURE__ */ jsx8(
+    error && /* @__PURE__ */ jsx9("p", { role: "alert", className: "text-rose-400", children: error }),
+    /* @__PURE__ */ jsx9("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] mt-2", children: "Layer Mask" }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex gap-1 items-center", children: [
+      /* @__PURE__ */ jsx9(
         "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__ */ jsx8("option", { value: k.kind, children: k.label }, k.kind))
+          children: ADJUSTMENT_KINDS2.map((k) => /* @__PURE__ */ jsx9("option", { value: k.kind, children: k.label }, k.kind))
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
-          className: button,
+          className: button2,
           disabled: !sel,
           onClick: () => sel && setLayerId(controller.addAdjustmentLayer({ kind: newKind, mask: layerMaskFromSelection(sel) })),
           children: "New Masked Layer"
         }
       )
     ] }),
-    list.length > 0 && target && /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx8(
+    list.length > 0 && target && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx9(
         "select",
         {
           "aria-label": "Mask layer",
           value: target.id,
           onChange: (e) => setLayerId(e.target.value),
           className: "bg-slate-950 border border-slate-800 rounded px-1 py-1 text-slate-200",
-          children: list.map((l) => /* @__PURE__ */ jsxs8("option", { value: l.id, children: [
+          children: list.map((l) => /* @__PURE__ */ jsxs9("option", { value: l.id, children: [
             l.name || adjustmentKindLabel2(l.kind),
             l.mask ? " (masked)" : ""
           ] }, l.id))
         }
       ),
-      /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap gap-1", children: [
-        /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !sel, onClick: () => controller.applySelectionAsLayerMask(target.id), children: "Mask with Selection" }),
-        /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !target.mask, onClick: () => controller.selectionFromLayerMask(target.id), children: "Load as Selection" }),
-        /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !target.mask, onClick: () => controller.setAdjustmentLayerMask(target.id, null), children: "Remove Mask" })
+      /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ jsx9("button", { type: "button", className: button2, disabled: !sel, onClick: () => controller.applySelectionAsLayerMask(target.id), children: "Mask with Selection" }),
+        /* @__PURE__ */ jsx9("button", { type: "button", className: button2, disabled: !target.mask, onClick: () => controller.selectionFromLayerMask(target.id), children: "Load as Selection" }),
+        /* @__PURE__ */ jsx9("button", { type: "button", className: button2, disabled: !target.mask, onClick: () => controller.setAdjustmentLayerMask(target.id, null), children: "Remove Mask" })
       ] }),
-      target.mask && /* @__PURE__ */ jsxs8(Fragment2, { children: [
-        /* @__PURE__ */ jsxs8("label", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsxs8("span", { className: "flex justify-between text-slate-400", children: [
-            /* @__PURE__ */ jsx8("span", { children: "Density" }),
-            /* @__PURE__ */ jsxs8("span", { className: "font-mono", children: [
+      target.mask && /* @__PURE__ */ jsxs9(Fragment2, { 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: "Density" }),
+            /* @__PURE__ */ jsxs9("span", { className: "font-mono", children: [
               Math.round((target.mask.density ?? 1) * 100),
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "input",
             {
               type: "range",
@@ -1413,15 +1619,15 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs8("label", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsxs8("span", { className: "flex justify-between text-slate-400", children: [
-            /* @__PURE__ */ jsx8("span", { children: "Mask Feather" }),
-            /* @__PURE__ */ jsxs8("span", { className: "font-mono", 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: "Mask Feather" }),
+            /* @__PURE__ */ jsxs9("span", { className: "font-mono", children: [
               target.mask.feather ?? 0,
               "px"
             ] })
           ] }),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "input",
             {
               type: "range",
@@ -1441,7 +1647,7 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
 };
 
 // src/image-editor/ImageEditor.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var ImageEditor = ({
   editor: externalEditor,
   src,
@@ -1457,34 +1663,34 @@ var ImageEditor = ({
   const editor = externalEditor || internalEditor;
   const { state, controller } = editor;
   const legacyProcess = normalizeProcessVersion(state.adjustments.process) < LATEST_PROCESS_VERSION;
-  const canvasRef = useRef4(null);
-  const containerRef = useRef4(null);
-  const [activeTab, setActiveTab] = useState9("crop");
-  const [activeCropRatio, setActiveCropRatio] = useState9(null);
-  const [selectionOptions, setSelectionOptions] = useState9(DEFAULT_SELECTION_TOOL_OPTIONS);
-  const selectionOptionsRef = useRef4(selectionOptions);
+  const canvasRef = useRef5(null);
+  const containerRef = useRef5(null);
+  const [activeTab, setActiveTab] = useState10("crop");
+  const [activeCropRatio, setActiveCropRatio] = useState10(null);
+  const [selectionOptions, setSelectionOptions] = useState10(DEFAULT_SELECTION_TOOL_OPTIONS);
+  const selectionOptionsRef = useRef5(selectionOptions);
   selectionOptionsRef.current = selectionOptions;
-  const selectionGestureRef = useRef4(null);
+  const selectionGestureRef = useRef5(null);
   if (!selectionGestureRef.current || selectionGestureRef.current.controller !== controller) {
     selectionGestureRef.current = new SelectionGesture(controller, () => selectionOptionsRef.current);
   }
-  const selectionDraftRef = useRef4(null);
-  const [selectionError, setSelectionError] = useState9(null);
-  const paintGestureRef = useRef4(null);
-  const paintControllerRef = useRef4(controller);
+  const selectionDraftRef = useRef5(null);
+  const [selectionError, setSelectionError] = useState10(null);
+  const paintGestureRef = useRef5(null);
+  const paintControllerRef = useRef5(controller);
   if (!paintGestureRef.current || paintControllerRef.current !== controller) {
     paintGestureRef.current = new PaintGesture(controller);
     paintControllerRef.current = controller;
   }
-  const brushCursorRef = useRef4(null);
-  const [paintError, setPaintError] = useState9(null);
-  const [inpaintPrompt, setInpaintPrompt] = useState9("");
-  const [inpaintMaskMode, setInpaintMaskMode] = useState9("annotations");
-  const [isRemovingBg, setIsRemovingBg] = useState9(false);
-  const [isInpainting, setIsInpainting] = useState9(false);
-  const [aiError, setAiError] = useState9(null);
-  const [aiSuccess, setAiSuccess] = useState9(null);
-  const [aiTarget, setAiTarget] = useState9("auto");
+  const brushCursorRef = useRef5(null);
+  const [paintError, setPaintError] = useState10(null);
+  const [inpaintPrompt, setInpaintPrompt] = useState10("");
+  const [inpaintMaskMode, setInpaintMaskMode] = useState10("annotations");
+  const [isRemovingBg, setIsRemovingBg] = useState10(false);
+  const [isInpainting, setIsInpainting] = useState10(false);
+  const [aiError, setAiError] = useState10(null);
+  const [aiSuccess, setAiSuccess] = useState10(null);
+  const [aiTarget, setAiTarget] = useState10("auto");
   const aiOptions = aiTarget === "auto" ? {} : { target: aiTarget };
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
@@ -1547,17 +1753,17 @@ var ImageEditor = ({
       setIsInpainting(false);
     }
   };
-  const [activeColor, setActiveColor] = useState9("#ef4444");
-  const [strokeWidth, setStrokeWidth] = useState9(3);
-  const [fontSize, setFontSize] = useState9(24);
-  const [textInput, setTextInput] = useState9("");
-  const draftAnnotationRef = useRef4(null);
-  const draftCropRef = useRef4(null);
-  const cropDragInfoRef = useRef4(null);
-  const annotationDragInfoRef = useRef4(null);
-  const isDrawingRef = useRef4(false);
-  const currentPathRef = useRef4([]);
-  const dragStartPointRef = useRef4(null);
+  const [activeColor, setActiveColor] = useState10("#ef4444");
+  const [strokeWidth, setStrokeWidth] = useState10(3);
+  const [fontSize, setFontSize] = useState10(24);
+  const [textInput, setTextInput] = useState10("");
+  const draftAnnotationRef = useRef5(null);
+  const draftCropRef = useRef5(null);
+  const cropDragInfoRef = useRef5(null);
+  const annotationDragInfoRef = useRef5(null);
+  const isDrawingRef = useRef5(false);
+  const currentPathRef = useRef5([]);
+  const dragStartPointRef = useRef5(null);
   const renderCanvas = useCallback2(
     async (draftAnnotation, draftCrop) => {
       const canvas = canvasRef.current;
@@ -1579,7 +1785,7 @@ var ImageEditor = ({
     },
     [controller, activeTab]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
     const caf = typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame : (id) => clearTimeout(id);
     const animId = raf(() => {
@@ -1587,12 +1793,12 @@ var ImageEditor = ({
     });
     return () => caf(animId);
   }, [renderCanvas, state]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (activeTab === "crop" && editor.state.activeTool !== "crop") {
       editor.setTool("crop");
     }
   }, [activeTab, editor]);
-  useEffect6(() => {
+  useEffect7(() => {
     const container = containerRef.current;
     if (!container) return;
     if (typeof ResizeObserver !== "undefined") {
@@ -1657,7 +1863,7 @@ var ImageEditor = ({
       if (g.error) setPaintError(g.error);
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (activeTab !== "paint" || typeof window === "undefined") return;
     const onKey = (e) => {
       if (handlePaintShortcut(controller, e)) e.preventDefault();
@@ -2020,15 +2226,15 @@ var ImageEditor = ({
       link.click();
     }
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: `flex flex-col bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-2xl text-slate-100 ${className}`,
       style,
       children: [
-        /* @__PURE__ */ jsxs9("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__ */ jsxs9("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
-            /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs10("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__ */ jsxs10("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2040,7 +2246,7 @@ var ImageEditor = ({
                 children: "Transform & Crop"
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2052,7 +2258,7 @@ var ImageEditor = ({
                 children: "Adjustments"
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2064,7 +2270,7 @@ var ImageEditor = ({
                 children: "Layers"
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2076,7 +2282,7 @@ var ImageEditor = ({
                 children: "Paint"
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2088,7 +2294,7 @@ var ImageEditor = ({
                 children: "Select & Mask"
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2100,7 +2306,7 @@ var ImageEditor = ({
                 children: "Annotations"
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2112,7 +2318,7 @@ var ImageEditor = ({
                 children: "Depth Mask"
               }
             ),
-            /* @__PURE__ */ jsxs9(
+            /* @__PURE__ */ jsxs10(
               "button",
               {
                 type: "button",
@@ -2122,14 +2328,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__ */ jsx9("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx9("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__ */ jsx10("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx10("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__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs", children: [
-            /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2140,7 +2346,7 @@ var ImageEditor = ({
                 children: "\u21A9"
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2151,7 +2357,7 @@ var ImageEditor = ({
                 children: "\u21AA"
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2160,8 +2366,8 @@ var ImageEditor = ({
                 children: "Reset"
               }
             ),
-            /* @__PURE__ */ jsx9("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2171,11 +2377,11 @@ var ImageEditor = ({
                 children: "-"
               }
             ),
-            /* @__PURE__ */ jsxs9("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
+            /* @__PURE__ */ jsxs10("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
               Math.round(state.zoom * 100),
               "%"
             ] }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2185,8 +2391,8 @@ var ImageEditor = ({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ jsx9("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2197,7 +2403,7 @@ var ImageEditor = ({
                 children: "Hold Compare"
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2208,13 +2414,13 @@ var ImageEditor = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs9("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
-          /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs10("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
+          /* @__PURE__ */ jsx10(
             "div",
             {
               ref: containerRef,
               className: "relative flex-1 h-[360px] md:h-full min-h-[320px] bg-slate-950 overflow-hidden select-none",
-              children: /* @__PURE__ */ jsx9(
+              children: /* @__PURE__ */ jsx10(
                 "canvas",
                 {
                   ref: canvasRef,
@@ -2232,11 +2438,11 @@ var ImageEditor = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxs9("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__ */ jsxs9("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ jsx9("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
-              /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-3 gap-2", children: [
-                /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs10("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__ */ jsxs10("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ jsx10("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
+              /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-3 gap-2", children: [
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2248,7 +2454,7 @@ var ImageEditor = ({
                     children: "Freeform"
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2260,7 +2466,7 @@ var ImageEditor = ({
                     children: "1:1 Square"
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2272,7 +2478,7 @@ var ImageEditor = ({
                     children: "4:3 Standard"
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2284,7 +2490,7 @@ var ImageEditor = ({
                     children: "16:9 Wide"
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2296,7 +2502,7 @@ var ImageEditor = ({
                     children: "3:2 Photo"
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2309,10 +2515,10 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx9("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ jsx9("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
-              /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-2 gap-2", children: [
-                /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsx10("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
+              /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2321,7 +2527,7 @@ var ImageEditor = ({
                     children: "Rotate -90\xB0"
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2330,7 +2536,7 @@ var ImageEditor = ({
                     children: "Rotate +90\xB0"
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2339,7 +2545,7 @@ var ImageEditor = ({
                     children: "Flip Horizontal"
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2350,10 +2556,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "adjust" && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx9("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
-                /* @__PURE__ */ jsx9(
+            activeTab === "adjust" && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx10("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2363,9 +2569,9 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx9(Histogram, { histogram: editor.histogram }),
-              IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ jsxs9(React8.Fragment, { children: [
-                /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(Histogram, { histogram: editor.histogram }),
+              IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ jsxs10(React9.Fragment, { children: [
+                /* @__PURE__ */ jsx10(
                   ControlSlider,
                   {
                     spec,
@@ -2374,14 +2580,14 @@ var ImageEditor = ({
                     onChange: (v) => editor.setAdjustments({ [spec.id]: v })
                   }
                 ),
-                spec.id === "tint" && legacyProcess && /* @__PURE__ */ jsxs9(
+                spec.id === "tint" && legacyProcess && /* @__PURE__ */ jsxs10(
                   "div",
                   {
                     className: "flex items-center justify-between gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-200",
                     "data-testid": "image-editor-process-notice",
                     children: [
-                      /* @__PURE__ */ jsx9("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
-                      /* @__PURE__ */ jsx9(
+                      /* @__PURE__ */ jsx10("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
+                      /* @__PURE__ */ jsx10(
                         "button",
                         {
                           type: "button",
@@ -2394,7 +2600,7 @@ var ImageEditor = ({
                   }
                 )
               ] }, spec.id)),
-              /* @__PURE__ */ jsx9("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx10(
                 AdjustmentLayersPanel,
                 {
                   controller,
@@ -2403,19 +2609,19 @@ var ImageEditor = ({
                 }
               ) })
             ] }),
-            activeTab === "layers" && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsx9("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Layers" }),
-              /* @__PURE__ */ jsx9(LayersPanel, { controller })
+            activeTab === "layers" && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsx10("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Layers" }),
+              /* @__PURE__ */ jsx10(LayersPanel, { controller })
             ] }),
-            activeTab === "paint" && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsx9("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Paint" }),
-              /* @__PURE__ */ jsx9(BrushOptionsBar, { controller }),
-              paintError && /* @__PURE__ */ jsx9("p", { role: "alert", className: "text-rose-400", "data-testid": "paint-error", children: paintError }),
-              /* @__PURE__ */ jsx9("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx9(LayersPanel, { controller }) })
+            activeTab === "paint" && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsx10("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Paint" }),
+              /* @__PURE__ */ jsx10(BrushOptionsBar, { controller }),
+              paintError && /* @__PURE__ */ jsx10("p", { role: "alert", className: "text-rose-400", "data-testid": "paint-error", children: paintError }),
+              /* @__PURE__ */ jsx10("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx10(LayersPanel, { controller }) })
             ] }),
-            activeTab === "annotate" && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsx9("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
-              /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ jsx9(
+            activeTab === "annotate" && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsx10("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
+              /* @__PURE__ */ jsx10("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ jsx10(
                 "button",
                 {
                   type: "button",
@@ -2425,9 +2631,9 @@ var ImageEditor = ({
                 },
                 t
               )) }),
-              /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 mt-2", children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-slate-400", children: "Color:" }),
-                /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 mt-2", children: [
+                /* @__PURE__ */ jsx10("label", { className: "text-slate-400", children: "Color:" }),
+                /* @__PURE__ */ jsx10(
                   "input",
                   {
                     type: "color",
@@ -2436,15 +2642,15 @@ var ImageEditor = ({
                     className: "w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent"
                   }
                 ),
-                /* @__PURE__ */ jsxs9("div", { className: "flex-1 ml-2", children: [
-                  /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
-                    /* @__PURE__ */ jsx9("span", { children: "Width:" }),
-                    /* @__PURE__ */ jsxs9("span", { className: "font-mono", children: [
+                /* @__PURE__ */ jsxs10("div", { className: "flex-1 ml-2", children: [
+                  /* @__PURE__ */ jsxs10("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
+                    /* @__PURE__ */ jsx10("span", { children: "Width:" }),
+                    /* @__PURE__ */ jsxs10("span", { className: "font-mono", children: [
                       strokeWidth,
                       "px"
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     "input",
                     {
                       type: "range",
@@ -2457,10 +2663,10 @@ var ImageEditor = ({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsx9("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ jsx9("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
-              /* @__PURE__ */ jsxs9("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsx10("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
+              /* @__PURE__ */ jsxs10("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx10(
                   "input",
                   {
                     type: "text",
@@ -2471,7 +2677,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__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2481,14 +2687,14 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between text-slate-400", children: [
-                /* @__PURE__ */ jsx9("span", { children: "Font Size:" }),
-                /* @__PURE__ */ jsxs9("span", { className: "font-mono", children: [
+              /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between text-slate-400", children: [
+                /* @__PURE__ */ jsx10("span", { children: "Font Size:" }),
+                /* @__PURE__ */ jsxs10("span", { className: "font-mono", children: [
                   fontSize,
                   "px"
                 ] })
               ] }),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "input",
                 {
                   type: "range",
@@ -2499,14 +2705,14 @@ var ImageEditor = ({
                   className: "w-full accent-indigo-500"
                 }
               ),
-              /* @__PURE__ */ jsx9("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxs9("span", { className: "text-slate-400", children: [
+              /* @__PURE__ */ jsx10("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs10("span", { className: "text-slate-400", children: [
                   "Layers (",
                   state.annotations.length,
                   ")"
                 ] }),
-                state.selectedAnnotationId && /* @__PURE__ */ jsx9(
+                state.selectedAnnotationId && /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2515,7 +2721,7 @@ var ImageEditor = ({
                     children: "Delete Selected"
                   }
                 ),
-                state.annotations.length > 0 && /* @__PURE__ */ jsx9(
+                state.annotations.length > 0 && /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2526,10 +2732,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "depth" && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx9("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
-                /* @__PURE__ */ jsx9(
+            activeTab === "depth" && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx10("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2539,8 +2745,8 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs9("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
-                /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
+                /* @__PURE__ */ jsx10(
                   "input",
                   {
                     type: "checkbox",
@@ -2549,12 +2755,12 @@ var ImageEditor = ({
                     className: "rounded accent-indigo-500"
                   }
                 ),
-                /* @__PURE__ */ jsx9("span", { children: "Enable Depth / Alpha Mask" })
+                /* @__PURE__ */ jsx10("span", { children: "Enable Depth / Alpha Mask" })
               ] }),
-              state.depthMask.enabled && /* @__PURE__ */ jsxs9(Fragment3, { children: [
-                /* @__PURE__ */ jsxs9("div", { children: [
-                  /* @__PURE__ */ jsx9("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
-                  /* @__PURE__ */ jsx9(
+              state.depthMask.enabled && /* @__PURE__ */ jsxs10(Fragment3, { children: [
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsx10("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
+                  /* @__PURE__ */ jsx10(
                     "input",
                     {
                       type: "text",
@@ -2565,8 +2771,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsxs10("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx10(
                     "button",
                     {
                       type: "button",
@@ -2575,7 +2781,7 @@ var ImageEditor = ({
                       children: "Threshold Mode"
                     }
                   ),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     "button",
                     {
                       type: "button",
@@ -2585,12 +2791,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { children: [
-                  /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ jsx9("span", { children: "Depth Start (Lower):" }),
-                    /* @__PURE__ */ jsx9("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsxs10("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ jsx10("span", { children: "Depth Start (Lower):" }),
+                    /* @__PURE__ */ jsx10("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
                   ] }),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     "input",
                     {
                       type: "range",
@@ -2604,12 +2810,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { children: [
-                  /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ jsx9("span", { children: "Depth Stop (Upper):" }),
-                    /* @__PURE__ */ jsx9("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsxs10("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ jsx10("span", { children: "Depth Stop (Upper):" }),
+                    /* @__PURE__ */ jsx10("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
                   ] }),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     "input",
                     {
                       type: "range",
@@ -2623,12 +2829,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { children: [
-                  /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ jsx9("span", { children: "Softness:" }),
-                    /* @__PURE__ */ jsx9("span", { className: "font-mono", children: state.depthMask.softness })
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsxs10("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ jsx10("span", { children: "Softness:" }),
+                    /* @__PURE__ */ jsx10("span", { className: "font-mono", children: state.depthMask.softness })
                   ] }),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     "input",
                     {
                       type: "range",
@@ -2640,8 +2846,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs9("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
-                  /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
+                  /* @__PURE__ */ jsx10(
                     "input",
                     {
                       type: "checkbox",
@@ -2650,12 +2856,12 @@ var ImageEditor = ({
                       className: "rounded accent-indigo-500"
                     }
                   ),
-                  /* @__PURE__ */ jsx9("span", { children: "Invert Mask" })
+                  /* @__PURE__ */ jsx10("span", { children: "Invert Mask" })
                 ] })
               ] })
             ] }),
-            activeTab === "select" && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ jsx9(
+            activeTab === "select" && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ jsx10(
                 SelectionOptionsBar,
                 {
                   controller,
@@ -2665,13 +2871,13 @@ var ImageEditor = ({
                   quickMask: Boolean(state.quickMask)
                 }
               ),
-              selectionError && /* @__PURE__ */ jsx9("p", { role: "alert", className: "text-rose-400", children: selectionError }),
-              /* @__PURE__ */ jsx9(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
+              selectionError && /* @__PURE__ */ jsx10("p", { role: "alert", className: "text-rose-400", children: selectionError }),
+              /* @__PURE__ */ jsx10(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
             ] }),
-            activeTab === "ai" && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ jsxs9("label", { className: "flex items-center justify-between gap-2 text-slate-300", children: [
-                /* @__PURE__ */ jsx9("span", { children: "Results go to" }),
-                /* @__PURE__ */ jsxs9(
+            activeTab === "ai" && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ jsxs10("label", { className: "flex items-center justify-between gap-2 text-slate-300", children: [
+                /* @__PURE__ */ jsx10("span", { children: "Results go to" }),
+                /* @__PURE__ */ jsxs10(
                   "select",
                   {
                     "aria-label": "AI result target",
@@ -2679,54 +2885,54 @@ var ImageEditor = ({
                     onChange: (e) => setAiTarget(e.target.value),
                     className: "bg-slate-800 border border-slate-700 rounded px-1.5 py-1",
                     children: [
-                      /* @__PURE__ */ jsx9("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
-                      /* @__PURE__ */ jsx9("option", { value: "new-layer", children: "New layer / mask" }),
-                      /* @__PURE__ */ jsx9("option", { value: "replace", children: "Replace image" })
+                      /* @__PURE__ */ jsx10("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
+                      /* @__PURE__ */ jsx10("option", { value: "new-layer", children: "New layer / mask" }),
+                      /* @__PURE__ */ jsx10("option", { value: "replace", children: "Replace image" })
                     ]
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs9("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
-                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs9("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx9("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx9("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__ */ jsxs10("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs10("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx10("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx10("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__ */ jsx9("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__ */ jsx10("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__ */ jsx9("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
                     onClick: handleRemoveBackground,
                     disabled: isRemovingBg || isInpainting,
                     className: "mt-1 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2",
-                    children: isRemovingBg ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
-                      /* @__PURE__ */ jsx9("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                    children: isRemovingBg ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+                      /* @__PURE__ */ jsx10("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Removing Background..."
-                    ] }) : /* @__PURE__ */ jsxs9(Fragment3, { children: [
-                      /* @__PURE__ */ jsx9("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx9("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__ */ jsxs10(Fragment3, { children: [
+                      /* @__PURE__ */ jsx10("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx10("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
                       "Remove Background"
                     ] })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs9("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
-                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs9("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsxs9("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ jsx9("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__ */ jsx9("path", { d: "m14 7 3 3" })
+              /* @__PURE__ */ jsxs10("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs10("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsxs10("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsx10("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__ */ jsx10("path", { d: "m14 7 3 3" })
                     ] }),
                     "Generative Inpainting"
                   ] }),
-                  isInpainting && /* @__PURE__ */ jsx9("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__ */ jsx10("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__ */ jsx9("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
-                /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsx9("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
-                  /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
+                /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx10("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
+                  /* @__PURE__ */ jsx10(
                     "textarea",
                     {
                       id: "ai-inpaint-prompt-react",
@@ -2738,10 +2944,10 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsx9("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
-                  /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-2 gap-1.5", children: [
-                    /* @__PURE__ */ jsxs9(
+                /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx10("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
+                  /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-2 gap-1.5", children: [
+                    /* @__PURE__ */ jsxs10(
                       "button",
                       {
                         type: "button",
@@ -2754,7 +2960,7 @@ var ImageEditor = ({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs9(
+                    /* @__PURE__ */ jsxs10(
                       "button",
                       {
                         type: "button",
@@ -2769,25 +2975,25 @@ var ImageEditor = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
                     onClick: handleInpaint,
                     disabled: isInpainting || isRemovingBg || !inpaintPrompt.trim(),
                     className: "mt-1 px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2",
-                    children: isInpainting ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
-                      /* @__PURE__ */ jsx9("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                    children: isInpainting ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+                      /* @__PURE__ */ jsx10("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Generating Inpaint..."
-                    ] }) : /* @__PURE__ */ jsxs9(Fragment3, { children: [
-                      /* @__PURE__ */ jsx9("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx9("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__ */ jsxs10(Fragment3, { children: [
+                      /* @__PURE__ */ jsx10("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx10("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__ */ jsx9("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
-              aiSuccess && /* @__PURE__ */ jsx9("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
+              aiError && /* @__PURE__ */ jsx10("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
+              aiSuccess && /* @__PURE__ */ jsx10("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
             ] })
           ] })
         ] })
@@ -2803,10 +3009,11 @@ export {
   useImageHistogram,
   CurvesEditor,
   AdjustmentLayersPanel,
+  LayerEffectsPanel,
   LayersPanel,
   BrushOptionsBar,
   SelectionOptionsBar,
   RefineEdgePanel,
   ImageEditor
 };
-//# sourceMappingURL=chunk-QJSMW4CM.js.map
+//# sourceMappingURL=chunk-M4WLX3IR.js.map