@pixerate/editor-react 0.64.0 → 0.65.0

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

@@ -159,7 +159,7 @@ function useImageEditor(options = {}) {
 }
 
 // src/image-editor/ImageEditor.tsx
-import React9, { useRef as useRef5, useEffect as useEffect7, useState as useState10, useCallback as useCallback2 } from "react";
+import React10, { useRef as useRef5, useEffect as useEffect8, useState as useState11, useCallback as useCallback2 } from "react";
 import {
   canvasToImagePoint,
   hitTestCrop,
@@ -174,7 +174,9 @@ import {
   SelectionGesture,
   PaintGesture,
   handlePaintShortcut,
-  pointerPressure
+  pointerPressure,
+  FreeTransformTool,
+  getViewportProjection
 } from "@pixerate/editor/image-editor";
 
 // src/image-editor/ControlSlider.tsx
@@ -1125,6 +1127,22 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
                 children: layerBadge(layer)
               }
             ),
+            layer.mask && !layer.mask.source && layer.type === "pixel" && /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                "aria-label": `${layer.mask.linked === false ? "Link" : "Unlink"} ${row.label} mask`,
+                "aria-pressed": layer.mask.linked !== false,
+                title: layer.mask.linked === false ? "Mask unlinked: it stays put when the layer moves or transforms. Click to link." : "Mask linked: it moves with the layer. Click to unlink.",
+                "data-testid": "layer-mask-link",
+                className: `shrink-0 text-[10px] leading-none ${layer.mask.linked === false ? "text-slate-600" : "text-slate-300"}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  attempt(() => controller.setLayerMaskProps(layer.id, { linked: layer.mask.linked === false }));
+                },
+                children: layer.mask.linked === false ? "\u26D3\uFE0E\u0338" : "\u26D3\uFE0E"
+              }
+            ),
             layer.mask && /* @__PURE__ */ jsx6(
               Thumbnail,
               {
@@ -1646,8 +1664,83 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
   ] });
 };
 
+// src/image-editor/FreeTransformOptionsBar.tsx
+import { useEffect as useEffect7, useState as useState10 } from "react";
+import { FREE_TRANSFORM_FIELDS, FREE_TRANSFORM_MODE_OPTIONS, INTERPOLATIONS, TRANSFORM_ANCHORS } from "@pixerate/editor/image-editor";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var chip2 = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
+var round = (v, unit) => unit === "px" ? Math.round(v * 10) / 10 : Math.round(v * 100) / 100;
+var FreeTransformOptionsBar = ({ tool, className }) => {
+  const [, setTick] = useState10(0);
+  useEffect7(() => tool.subscribe(() => setTick((n) => n + 1)), [tool]);
+  const bar = tool.bar();
+  if (!tool.active || !bar) return null;
+  const apply = (field, raw) => {
+    const v = Number(raw);
+    if (raw.trim() !== "" && Number.isFinite(v) && Math.abs(v - bar[field]) > 1e-9) tool.setField(field, v);
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: `flex flex-wrap items-center gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "free-transform-options", role: "toolbar", "aria-label": "Free Transform options", children: [
+    /* @__PURE__ */ jsx10("div", { className: "flex gap-1", role: "group", "aria-label": "Transform mode", children: FREE_TRANSFORM_MODE_OPTIONS.map((m) => /* @__PURE__ */ jsx10("button", { type: "button", title: m.title, "aria-pressed": tool.mode === m.id, className: chip2(tool.mode === m.id), onClick: () => tool.setMode(m.id), children: m.label }, m.id)) }),
+    /* @__PURE__ */ jsx10("div", { className: "grid grid-cols-3 gap-px", role: "group", "aria-label": "Reference point", children: TRANSFORM_ANCHORS.map((a) => /* @__PURE__ */ jsx10("button", { type: "button", "aria-label": `Reference point ${a}`, title: `Reference point: ${a}`, className: "h-2.5 w-2.5 rounded-sm bg-slate-700 hover:bg-indigo-500", onClick: () => tool.setReference(a) }, a)) }),
+    FREE_TRANSFORM_FIELDS.map((f) => /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-1", title: f.title, children: [
+      /* @__PURE__ */ jsx10("span", { className: "text-slate-400", children: f.label }),
+      /* @__PURE__ */ jsx10(
+        "input",
+        {
+          type: "number",
+          "aria-label": f.title,
+          defaultValue: round(bar[f.id], f.unit),
+          disabled: !bar.affine,
+          step: f.unit === "px" ? 1 : 0.1,
+          className: "w-16 rounded border border-slate-700 bg-slate-900 px-1 py-0.5 text-right disabled:opacity-40",
+          onBlur: (e) => apply(f.id, e.currentTarget.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              e.stopPropagation();
+              apply(f.id, e.currentTarget.value);
+            }
+          }
+        },
+        `${f.id}:${round(bar[f.id], f.unit)}`
+      ),
+      /* @__PURE__ */ jsx10("span", { className: "text-slate-500", children: f.unit }),
+      f.id === "scaleX" && /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Keep width and height proportional",
+          "aria-pressed": tool.proportional,
+          className: chip2(tool.proportional),
+          onClick: () => {
+            tool.proportional = !tool.proportional;
+            setTick((n) => n + 1);
+          },
+          children: "\u26D3\uFE0E"
+        }
+      )
+    ] }, f.id)),
+    /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx10("span", { className: "text-slate-400", children: "Interpolation" }),
+      /* @__PURE__ */ jsx10(
+        "select",
+        {
+          "aria-label": "Interpolation",
+          value: tool.interpolation,
+          onChange: (e) => tool.setInterpolation(e.target.value),
+          className: "rounded border border-slate-700 bg-slate-900 px-1 py-0.5",
+          children: INTERPOLATIONS.map((i) => /* @__PURE__ */ jsx10("option", { value: i, children: i[0].toUpperCase() + i.slice(1) }, i))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx10("button", { type: "button", title: "Commit (Enter)", className: "px-2 py-1 rounded bg-emerald-600 text-white hover:bg-emerald-500", onClick: () => tool.commit(), children: "Commit" }),
+    /* @__PURE__ */ jsx10("button", { type: "button", title: "Cancel (Esc)", className: chip2(false), onClick: () => tool.cancel(), children: "Cancel" }),
+    tool.error && /* @__PURE__ */ jsx10("span", { role: "alert", className: "text-rose-400", children: tool.error })
+  ] });
+};
+
 // src/image-editor/ImageEditor.tsx
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var ImageEditor = ({
   editor: externalEditor,
   src,
@@ -1665,9 +1758,9 @@ var ImageEditor = ({
   const legacyProcess = normalizeProcessVersion(state.adjustments.process) < LATEST_PROCESS_VERSION;
   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 [activeTab, setActiveTab] = useState11("crop");
+  const [activeCropRatio, setActiveCropRatio] = useState11(null);
+  const [selectionOptions, setSelectionOptions] = useState11(DEFAULT_SELECTION_TOOL_OPTIONS);
   const selectionOptionsRef = useRef5(selectionOptions);
   selectionOptionsRef.current = selectionOptions;
   const selectionGestureRef = useRef5(null);
@@ -1675,7 +1768,7 @@ var ImageEditor = ({
     selectionGestureRef.current = new SelectionGesture(controller, () => selectionOptionsRef.current);
   }
   const selectionDraftRef = useRef5(null);
-  const [selectionError, setSelectionError] = useState10(null);
+  const [selectionError, setSelectionError] = useState11(null);
   const paintGestureRef = useRef5(null);
   const paintControllerRef = useRef5(controller);
   if (!paintGestureRef.current || paintControllerRef.current !== controller) {
@@ -1683,14 +1776,26 @@ var ImageEditor = ({
     paintControllerRef.current = controller;
   }
   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 [paintError, setPaintError] = useState11(null);
+  const transformToolRef = useRef5(null);
+  const transformControllerRef = useRef5(controller);
+  if (!transformToolRef.current || transformControllerRef.current !== controller) {
+    transformToolRef.current?.cancel();
+    transformToolRef.current = new FreeTransformTool(controller, {
+      schedule: (run) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(run) : run()
+    });
+    transformControllerRef.current = controller;
+  }
+  const transformTool = transformToolRef.current;
+  const [, setTransformTick] = useState11(0);
+  const [transformCursor, setTransformCursor] = useState11("default");
+  const [inpaintPrompt, setInpaintPrompt] = useState11("");
+  const [inpaintMaskMode, setInpaintMaskMode] = useState11("annotations");
+  const [isRemovingBg, setIsRemovingBg] = useState11(false);
+  const [isInpainting, setIsInpainting] = useState11(false);
+  const [aiError, setAiError] = useState11(null);
+  const [aiSuccess, setAiSuccess] = useState11(null);
+  const [aiTarget, setAiTarget] = useState11("auto");
   const aiOptions = aiTarget === "auto" ? {} : { target: aiTarget };
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
@@ -1753,10 +1858,10 @@ var ImageEditor = ({
       setIsInpainting(false);
     }
   };
-  const [activeColor, setActiveColor] = useState10("#ef4444");
-  const [strokeWidth, setStrokeWidth] = useState10(3);
-  const [fontSize, setFontSize] = useState10(24);
-  const [textInput, setTextInput] = useState10("");
+  const [activeColor, setActiveColor] = useState11("#ef4444");
+  const [strokeWidth, setStrokeWidth] = useState11(3);
+  const [fontSize, setFontSize] = useState11(24);
+  const [textInput, setTextInput] = useState11("");
   const draftAnnotationRef = useRef5(null);
   const draftCropRef = useRef5(null);
   const cropDragInfoRef = useRef5(null);
@@ -1780,12 +1885,64 @@ var ImageEditor = ({
         draftAnnotation: draftAnnotation !== void 0 ? draftAnnotation : draftAnnotationRef.current,
         draftCrop: draftCrop !== void 0 ? draftCrop : draftCropRef.current,
         draftSelectionPath: selectionDraftRef.current,
-        brushCursor: activeTab === "paint" && brushCursorRef.current && controller.getState().activeTool !== "move" ? { ...brushCursorRef.current, diameter: controller.getState().paint.brush.size } : null
+        brushCursor: activeTab === "paint" && brushCursorRef.current && controller.getState().activeTool !== "move" && !transformTool.active ? { ...brushCursorRef.current, diameter: controller.getState().paint.brush.size } : null,
+        freeTransform: transformTool.overlay()
       });
     },
-    [controller, activeTab]
+    [controller, activeTab, transformTool]
   );
-  useEffect7(() => {
+  useEffect8(() => transformTool.subscribe(() => {
+    setTransformTick((n) => n + 1);
+    void renderCanvas();
+  }), [transformTool, renderCanvas]);
+  const transformPoint = (e) => {
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const sx = rect.width > 0 ? canvas.width / rect.width : 1;
+    const sy = rect.height > 0 ? canvas.height / rect.height : 1;
+    const s = controller.getState();
+    const cropping = activeTab === "crop";
+    const projection = getViewportProjection(s, canvas.width, canvas.height, cropping);
+    const pt = canvasToImagePoint({ x: (e.clientX - rect.left) * sx, y: (e.clientY - rect.top) * sy }, s, canvas.width, canvas.height, cropping);
+    transformTool.setView(projection.scale);
+    return { pt, tolerance: 6 / (projection.scale || 1) };
+  };
+  const handleTransformPointerDown = (e) => {
+    if (!transformTool.active) return false;
+    if (e.button !== 0) return true;
+    e.preventDefault();
+    try {
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+    } catch {
+    }
+    const { pt, tolerance } = transformPoint(e);
+    transformTool.down(pt, tolerance);
+    return true;
+  };
+  const handleTransformPointerMove = (e) => {
+    if (!transformTool.active) return false;
+    const { pt, tolerance } = transformPoint(e);
+    if (e.buttons & 1) transformTool.move(pt, e);
+    else {
+      const over = transformTool.hit(pt, tolerance);
+      setTransformCursor(transformTool.cursor(over));
+    }
+    return true;
+  };
+  const handleTransformPointerUp = () => {
+    if (!transformTool.active) return false;
+    transformTool.up();
+    return true;
+  };
+  useEffect8(() => {
+    if (typeof window === "undefined") return;
+    const onKey = (e) => {
+      if (transformTool.key(e)) e.preventDefault();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [transformTool]);
+  useEffect8(() => {
     const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
     const caf = typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame : (id) => clearTimeout(id);
     const animId = raf(() => {
@@ -1793,12 +1950,12 @@ var ImageEditor = ({
     });
     return () => caf(animId);
   }, [renderCanvas, state]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (activeTab === "crop" && editor.state.activeTool !== "crop") {
       editor.setTool("crop");
     }
   }, [activeTab, editor]);
-  useEffect7(() => {
+  useEffect8(() => {
     const container = containerRef.current;
     if (!container) return;
     if (typeof ResizeObserver !== "undefined") {
@@ -1839,6 +1996,7 @@ var ImageEditor = ({
     }));
   };
   const handlePaintPointerDown = (e) => {
+    if (handleTransformPointerDown(e)) return;
     if (activeTab !== "paint" || e.button !== 0) return;
     e.preventDefault();
     try {
@@ -1849,6 +2007,7 @@ var ImageEditor = ({
     setPaintError(paintGestureRef.current.down(first));
   };
   const handlePaintPointerMove = (e) => {
+    if (handleTransformPointerMove(e)) return;
     if (activeTab !== "paint") return;
     const samples = paintSamples(e);
     brushCursorRef.current = samples[samples.length - 1] ?? null;
@@ -1856,6 +2015,7 @@ var ImageEditor = ({
     else void renderCanvas();
   };
   const handlePaintPointerUp = () => {
+    if (handleTransformPointerUp()) return;
     if (activeTab !== "paint") return;
     const g = paintGestureRef.current;
     if (g.active) {
@@ -1863,7 +2023,7 @@ var ImageEditor = ({
       if (g.error) setPaintError(g.error);
     }
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (activeTab !== "paint" || typeof window === "undefined") return;
     const onKey = (e) => {
       if (handlePaintShortcut(controller, e)) e.preventDefault();
@@ -1873,7 +2033,7 @@ var ImageEditor = ({
   }, [activeTab, controller]);
   const handleMouseDown = (e) => {
     const canvas = canvasRef.current;
-    if (!canvas) return;
+    if (!canvas || transformTool.active) return;
     const canvasPt = getCanvasEventPoint(e);
     if (activeTab === "select") {
       const gesture = selectionGestureRef.current;
@@ -1945,7 +2105,7 @@ var ImageEditor = ({
   };
   const handleMouseMove = (e) => {
     const canvas = canvasRef.current;
-    if (!canvas) return;
+    if (!canvas || transformTool.active) return;
     const canvasPt = getCanvasEventPoint(e);
     if (activeTab === "select") {
       const gesture = selectionGestureRef.current;
@@ -2101,7 +2261,7 @@ var ImageEditor = ({
   };
   const handleMouseUp = (e) => {
     const canvas = canvasRef.current;
-    if (!canvas) return;
+    if (!canvas || transformTool.active) return;
     const canvasPt = getCanvasEventPoint(e);
     if (activeTab === "select") {
       const gesture = selectionGestureRef.current;
@@ -2226,15 +2386,15 @@ var ImageEditor = ({
       link.click();
     }
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "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__ */ 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(
+        /* @__PURE__ */ jsxs11("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__ */ jsxs11("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2246,7 +2406,7 @@ var ImageEditor = ({
                 children: "Transform & Crop"
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2258,7 +2418,7 @@ var ImageEditor = ({
                 children: "Adjustments"
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2270,7 +2430,7 @@ var ImageEditor = ({
                 children: "Layers"
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2282,7 +2442,7 @@ var ImageEditor = ({
                 children: "Paint"
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2294,7 +2454,7 @@ var ImageEditor = ({
                 children: "Select & Mask"
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2306,7 +2466,7 @@ var ImageEditor = ({
                 children: "Annotations"
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2318,7 +2478,7 @@ var ImageEditor = ({
                 children: "Depth Mask"
               }
             ),
-            /* @__PURE__ */ jsxs10(
+            /* @__PURE__ */ jsxs11(
               "button",
               {
                 type: "button",
@@ -2328,14 +2488,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__ */ 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" }) }),
+                  /* @__PURE__ */ jsx11("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx11("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__ */ jsxs10("div", { className: "flex items-center gap-2 text-xs", children: [
-            /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2346,7 +2506,7 @@ var ImageEditor = ({
                 children: "\u21A9"
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2357,7 +2517,7 @@ var ImageEditor = ({
                 children: "\u21AA"
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2366,8 +2526,8 @@ var ImageEditor = ({
                 children: "Reset"
               }
             ),
-            /* @__PURE__ */ jsx10("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2377,11 +2537,11 @@ var ImageEditor = ({
                 children: "-"
               }
             ),
-            /* @__PURE__ */ jsxs10("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
+            /* @__PURE__ */ jsxs11("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
               Math.round(state.zoom * 100),
               "%"
             ] }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2391,8 +2551,8 @@ var ImageEditor = ({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ jsx10("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2403,7 +2563,7 @@ var ImageEditor = ({
                 children: "Hold Compare"
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               "button",
               {
                 type: "button",
@@ -2414,13 +2574,15 @@ var ImageEditor = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs10("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
-          /* @__PURE__ */ jsx10(
+        transformTool.active && /* @__PURE__ */ jsx11(FreeTransformOptionsBar, { tool: transformTool, className: "border-b border-slate-800 bg-slate-900/95 px-4 py-2" }),
+        !transformTool.active && transformTool.error && /* @__PURE__ */ jsx11("div", { role: "alert", className: "border-b border-rose-900 bg-rose-950/80 px-4 py-1.5 text-xs text-rose-200", children: transformTool.error }),
+        /* @__PURE__ */ jsxs11("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
+          /* @__PURE__ */ jsx11(
             "div",
             {
               ref: containerRef,
               className: "relative flex-1 h-[360px] md:h-full min-h-[320px] bg-slate-950 overflow-hidden select-none",
-              children: /* @__PURE__ */ jsx10(
+              children: /* @__PURE__ */ jsx11(
                 "canvas",
                 {
                   ref: canvasRef,
@@ -2433,16 +2595,17 @@ var ImageEditor = ({
                   onPointerUp: handlePaintPointerUp,
                   onPointerCancel: () => paintGestureRef.current?.cancel(),
                   "data-testid": "image-editor-canvas",
-                  className: `absolute inset-0 w-full h-full block ${activeTab === "paint" ? "touch-none cursor-crosshair" : ""}`
+                  style: transformTool.active ? { cursor: transformCursor } : void 0,
+                  className: `absolute inset-0 w-full h-full block ${transformTool.active ? "touch-none" : activeTab === "paint" ? "touch-none cursor-crosshair" : ""}`
                 }
               )
             }
           ),
-          /* @__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(
+          /* @__PURE__ */ jsxs11("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__ */ jsxs11("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
+              /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-3 gap-2", children: [
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2454,7 +2617,7 @@ var ImageEditor = ({
                     children: "Freeform"
                   }
                 ),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2466,7 +2629,7 @@ var ImageEditor = ({
                     children: "1:1 Square"
                   }
                 ),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2478,7 +2641,7 @@ var ImageEditor = ({
                     children: "4:3 Standard"
                   }
                 ),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2490,7 +2653,7 @@ var ImageEditor = ({
                     children: "16:9 Wide"
                   }
                 ),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2502,7 +2665,7 @@ var ImageEditor = ({
                     children: "3:2 Photo"
                   }
                 ),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2515,10 +2678,10 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__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(
+              /* @__PURE__ */ jsx11("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
+              /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2527,7 +2690,7 @@ var ImageEditor = ({
                     children: "Rotate -90\xB0"
                   }
                 ),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2536,7 +2699,7 @@ var ImageEditor = ({
                     children: "Rotate +90\xB0"
                   }
                 ),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2545,7 +2708,7 @@ var ImageEditor = ({
                     children: "Flip Horizontal"
                   }
                 ),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2556,10 +2719,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            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(
+            activeTab === "adjust" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2569,9 +2732,9 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx10(Histogram, { histogram: editor.histogram }),
-              IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ jsxs10(React9.Fragment, { children: [
-                /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11(Histogram, { histogram: editor.histogram }),
+              IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ jsxs11(React10.Fragment, { children: [
+                /* @__PURE__ */ jsx11(
                   ControlSlider,
                   {
                     spec,
@@ -2580,14 +2743,14 @@ var ImageEditor = ({
                     onChange: (v) => editor.setAdjustments({ [spec.id]: v })
                   }
                 ),
-                spec.id === "tint" && legacyProcess && /* @__PURE__ */ jsxs10(
+                spec.id === "tint" && legacyProcess && /* @__PURE__ */ jsxs11(
                   "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__ */ jsx10("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
-                      /* @__PURE__ */ jsx10(
+                      /* @__PURE__ */ jsx11("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
+                      /* @__PURE__ */ jsx11(
                         "button",
                         {
                           type: "button",
@@ -2600,7 +2763,7 @@ var ImageEditor = ({
                   }
                 )
               ] }, spec.id)),
-              /* @__PURE__ */ jsx10("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx11(
                 AdjustmentLayersPanel,
                 {
                   controller,
@@ -2609,19 +2772,41 @@ var ImageEditor = ({
                 }
               ) })
             ] }),
-            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 === "layers" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Layers" }),
+              /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  type: "button",
+                  title: "Edit \u203A Free Transform (Ctrl/Cmd+T): the selected pixels, or the whole active layer",
+                  className: "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40",
+                  disabled: transformTool.active,
+                  onClick: () => transformTool.begin(),
+                  children: "Free Transform"
+                }
+              ),
+              /* @__PURE__ */ jsx11(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 === "paint" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Paint" }),
+              /* @__PURE__ */ jsx11(BrushOptionsBar, { controller }),
+              /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  type: "button",
+                  title: "Edit \u203A Free Transform (Ctrl/Cmd+T): the selected pixels, or the whole active layer",
+                  className: "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start",
+                  disabled: transformTool.active,
+                  onClick: () => transformTool.begin(),
+                  children: "Free Transform"
+                }
+              ),
+              paintError && /* @__PURE__ */ jsx11("p", { role: "alert", className: "text-rose-400", "data-testid": "paint-error", children: paintError }),
+              /* @__PURE__ */ jsx11("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ jsx11(LayersPanel, { controller }) })
             ] }),
-            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(
+            activeTab === "annotate" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
+              /* @__PURE__ */ jsx11("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ jsx11(
                 "button",
                 {
                   type: "button",
@@ -2631,9 +2816,9 @@ var ImageEditor = ({
                 },
                 t
               )) }),
-              /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 mt-2", children: [
-                /* @__PURE__ */ jsx10("label", { className: "text-slate-400", children: "Color:" }),
-                /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 mt-2", children: [
+                /* @__PURE__ */ jsx11("label", { className: "text-slate-400", children: "Color:" }),
+                /* @__PURE__ */ jsx11(
                   "input",
                   {
                     type: "color",
@@ -2642,15 +2827,15 @@ var ImageEditor = ({
                     className: "w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent"
                   }
                 ),
-                /* @__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: [
+                /* @__PURE__ */ jsxs11("div", { className: "flex-1 ml-2", children: [
+                  /* @__PURE__ */ jsxs11("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
+                    /* @__PURE__ */ jsx11("span", { children: "Width:" }),
+                    /* @__PURE__ */ jsxs11("span", { className: "font-mono", children: [
                       strokeWidth,
                       "px"
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx11(
                     "input",
                     {
                       type: "range",
@@ -2663,10 +2848,10 @@ var ImageEditor = ({
                   )
                 ] })
               ] }),
-              /* @__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(
+              /* @__PURE__ */ jsx11("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
+              /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx11(
                   "input",
                   {
                     type: "text",
@@ -2677,7 +2862,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__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2687,14 +2872,14 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__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: [
+              /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between text-slate-400", children: [
+                /* @__PURE__ */ jsx11("span", { children: "Font Size:" }),
+                /* @__PURE__ */ jsxs11("span", { className: "font-mono", children: [
                   fontSize,
                   "px"
                 ] })
               ] }),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11(
                 "input",
                 {
                   type: "range",
@@ -2705,14 +2890,14 @@ var ImageEditor = ({
                   className: "w-full accent-indigo-500"
                 }
               ),
-              /* @__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: [
+              /* @__PURE__ */ jsx11("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs11("span", { className: "text-slate-400", children: [
                   "Layers (",
                   state.annotations.length,
                   ")"
                 ] }),
-                state.selectedAnnotationId && /* @__PURE__ */ jsx10(
+                state.selectedAnnotationId && /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2721,7 +2906,7 @@ var ImageEditor = ({
                     children: "Delete Selected"
                   }
                 ),
-                state.annotations.length > 0 && /* @__PURE__ */ jsx10(
+                state.annotations.length > 0 && /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2732,10 +2917,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            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(
+            activeTab === "depth" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2745,8 +2930,8 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
-                /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
+                /* @__PURE__ */ jsx11(
                   "input",
                   {
                     type: "checkbox",
@@ -2755,12 +2940,12 @@ var ImageEditor = ({
                     className: "rounded accent-indigo-500"
                   }
                 ),
-                /* @__PURE__ */ jsx10("span", { children: "Enable Depth / Alpha Mask" })
+                /* @__PURE__ */ jsx11("span", { children: "Enable Depth / Alpha Mask" })
               ] }),
-              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(
+              state.depthMask.enabled && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                /* @__PURE__ */ jsxs11("div", { children: [
+                  /* @__PURE__ */ jsx11("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
+                  /* @__PURE__ */ jsx11(
                     "input",
                     {
                       type: "text",
@@ -2771,8 +2956,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs10("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx11(
                     "button",
                     {
                       type: "button",
@@ -2781,7 +2966,7 @@ var ImageEditor = ({
                       children: "Threshold Mode"
                     }
                   ),
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx11(
                     "button",
                     {
                       type: "button",
@@ -2791,12 +2976,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__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__ */ jsxs11("div", { children: [
+                  /* @__PURE__ */ jsxs11("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ jsx11("span", { children: "Depth Start (Lower):" }),
+                    /* @__PURE__ */ jsx11("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
                   ] }),
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx11(
                     "input",
                     {
                       type: "range",
@@ -2810,12 +2995,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__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__ */ jsxs11("div", { children: [
+                  /* @__PURE__ */ jsxs11("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ jsx11("span", { children: "Depth Stop (Upper):" }),
+                    /* @__PURE__ */ jsx11("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
                   ] }),
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx11(
                     "input",
                     {
                       type: "range",
@@ -2829,12 +3014,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__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__ */ jsxs11("div", { children: [
+                  /* @__PURE__ */ jsxs11("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ jsx11("span", { children: "Softness:" }),
+                    /* @__PURE__ */ jsx11("span", { className: "font-mono", children: state.depthMask.softness })
                   ] }),
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx11(
                     "input",
                     {
                       type: "range",
@@ -2846,8 +3031,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
-                  /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
+                  /* @__PURE__ */ jsx11(
                     "input",
                     {
                       type: "checkbox",
@@ -2856,12 +3041,12 @@ var ImageEditor = ({
                       className: "rounded accent-indigo-500"
                     }
                   ),
-                  /* @__PURE__ */ jsx10("span", { children: "Invert Mask" })
+                  /* @__PURE__ */ jsx11("span", { children: "Invert Mask" })
                 ] })
               ] })
             ] }),
-            activeTab === "select" && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ jsx10(
+            activeTab === "select" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ jsx11(
                 SelectionOptionsBar,
                 {
                   controller,
@@ -2871,13 +3056,37 @@ var ImageEditor = ({
                   quickMask: Boolean(state.quickMask)
                 }
               ),
-              selectionError && /* @__PURE__ */ jsx10("p", { role: "alert", className: "text-rose-400", children: selectionError }),
-              /* @__PURE__ */ jsx10(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
+              selectionError && /* @__PURE__ */ jsx11("p", { role: "alert", className: "text-rose-400", children: selectionError }),
+              /* @__PURE__ */ jsxs11("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ jsx11(
+                  "button",
+                  {
+                    type: "button",
+                    title: "Select \u203A Transform Selection: the outline only",
+                    className: "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40",
+                    disabled: transformTool.active,
+                    onClick: () => transformTool.begin({ content: "selection-outline" }),
+                    children: "Transform Selection"
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  "button",
+                  {
+                    type: "button",
+                    title: "Edit \u203A Free Transform: the selected pixels of the active layer",
+                    className: "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40",
+                    disabled: transformTool.active,
+                    onClick: () => transformTool.begin({ content: "selection" }),
+                    children: "Free Transform Pixels"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx11(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
             ] }),
-            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(
+            activeTab === "ai" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ jsxs11("label", { className: "flex items-center justify-between gap-2 text-slate-300", children: [
+                /* @__PURE__ */ jsx11("span", { children: "Results go to" }),
+                /* @__PURE__ */ jsxs11(
                   "select",
                   {
                     "aria-label": "AI result target",
@@ -2885,54 +3094,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__ */ 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__ */ jsx11("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
+                      /* @__PURE__ */ jsx11("option", { value: "new-layer", children: "New layer / mask" }),
+                      /* @__PURE__ */ jsx11("option", { value: "replace", children: "Replace image" })
                     ]
                   }
                 )
               ] }),
-              /* @__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" }) }),
+              /* @__PURE__ */ jsxs11("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx11("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx11("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__ */ 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..." })
+                  isRemovingBg && /* @__PURE__ */ jsx11("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__ */ jsx10("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
+                /* @__PURE__ */ jsx11(
                   "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__ */ 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" }),
+                    children: isRemovingBg ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                      /* @__PURE__ */ jsx11("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Removing Background..."
-                    ] }) : /* @__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" }) }),
+                    ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                      /* @__PURE__ */ jsx11("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx11("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__ */ 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" })
+              /* @__PURE__ */ jsxs11("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs11("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsxs11("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsx11("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__ */ jsx11("path", { d: "m14 7 3 3" })
                     ] }),
                     "Generative 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..." })
+                  isInpainting && /* @__PURE__ */ jsx11("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__ */ 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(
+                /* @__PURE__ */ jsx11("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
+                /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx11("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
+                  /* @__PURE__ */ jsx11(
                     "textarea",
                     {
                       id: "ai-inpaint-prompt-react",
@@ -2944,10 +3153,10 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__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(
+                /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx11("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
+                  /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-2 gap-1.5", children: [
+                    /* @__PURE__ */ jsxs11(
                       "button",
                       {
                         type: "button",
@@ -2960,7 +3169,7 @@ var ImageEditor = ({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs10(
+                    /* @__PURE__ */ jsxs11(
                       "button",
                       {
                         type: "button",
@@ -2975,25 +3184,25 @@ var ImageEditor = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "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__ */ 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" }),
+                    children: isInpainting ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                      /* @__PURE__ */ jsx11("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Generating Inpaint..."
-                    ] }) : /* @__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" }) }),
+                    ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                      /* @__PURE__ */ jsx11("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx11("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__ */ 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 })
+              aiError && /* @__PURE__ */ jsx11("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
+              aiSuccess && /* @__PURE__ */ jsx11("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
             ] })
           ] })
         ] })
@@ -3014,6 +3223,7 @@ export {
   BrushOptionsBar,
   SelectionOptionsBar,
   RefineEdgePanel,
+  FreeTransformOptionsBar,
   ImageEditor
 };
-//# sourceMappingURL=chunk-M4WLX3IR.js.map
+//# sourceMappingURL=chunk-OSBDCFF4.js.map