@pixerate/editor 0.98.0 → 0.100.0

package/dist/image-editor/index.js

@@ -3193,6 +3193,66 @@ var ImageEditorRenderer = class {
       }
       ctx.restore();
     }
+    if (options.freeTransform) {
+      const t = options.freeTransform;
+      ctx.save();
+      try {
+        const scr = (p) => projectImagePoint(p, projection);
+        ctx.beginPath();
+        if (t.warp) {
+          for (const c of t.warp.curves) {
+            const [a, b, d, e] = c.map(scr);
+            ctx.moveTo(a.x, a.y);
+            ctx.bezierCurveTo(b.x, b.y, d.x, d.y, e.x, e.y);
+          }
+          for (const h of t.warp.handles) {
+            const a = scr(h.anchor);
+            const q2 = scr(h.point);
+            ctx.moveTo(a.x, a.y);
+            ctx.lineTo(q2.x, q2.y);
+          }
+        } else {
+          const outline = t.outline.map(scr);
+          outline.forEach((p, i) => i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y));
+          ctx.closePath();
+        }
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = "rgba(0,0,0,0.5)";
+        ctx.stroke();
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = "#ffffff";
+        ctx.stroke();
+        for (const h of [...t.handles, ...t.warp?.anchors ?? []].map(scr)) {
+          ctx.fillStyle = "#ffffff";
+          ctx.strokeStyle = "#1e293b";
+          ctx.fillRect(h.x - 4, h.y - 4, 8, 8);
+          ctx.strokeRect(h.x - 4, h.y - 4, 8, 8);
+        }
+        for (const h of (t.warp?.handles ?? []).map((w) => scr(w.point))) {
+          ctx.beginPath();
+          ctx.arc(h.x, h.y, 3, 0, Math.PI * 2);
+          ctx.fillStyle = "#ffffff";
+          ctx.fill();
+          ctx.strokeStyle = "#1e293b";
+          ctx.stroke();
+        }
+        const r = scr(t.reference);
+        ctx.beginPath();
+        ctx.arc(r.x, r.y, 5, 0, Math.PI * 2);
+        ctx.moveTo(r.x - 8, r.y);
+        ctx.lineTo(r.x + 8, r.y);
+        ctx.moveTo(r.x, r.y - 8);
+        ctx.lineTo(r.x, r.y + 8);
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = "rgba(0,0,0,0.5)";
+        ctx.stroke();
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = "#ffffff";
+        ctx.stroke();
+      } catch {
+      }
+      ctx.restore();
+    }
     if (isActivelyCropping) {
       const activeCrop = options.draftCrop !== void 0 && options.draftCrop !== null ? options.draftCrop : crop ?? { x: 0, y: 0, width: naturalWidth, height: naturalHeight };
       this.drawCropOverlay(ctx, getViewportMetrics(geoState, vpWidth, vpHeight, true, activeCrop));
@@ -4001,7 +4061,7 @@ function removeAnnotationLayers(layers) {
 function polygonCoverage(points, width, height, antiAlias = true) {
   const m = new Float32Array(width * height);
   if (points.length < 3 || width <= 0 || height <= 0) return m;
-  const sub = antiAlias ? 4 : 1;
+  const sub2 = antiAlias ? 4 : 1;
   const edges = [];
   for (let i = 0; i < points.length; i++) {
     const a = points[i];
@@ -4016,8 +4076,8 @@ function polygonCoverage(points, width, height, antiAlias = true) {
   const xs = [];
   for (let py = 0; py < height; py++) {
     const row = py * width;
-    for (let s = 0; s < sub; s++) {
-      const y = py + (s + 0.5) / sub;
+    for (let s = 0; s < sub2; s++) {
+      const y = py + (s + 0.5) / sub2;
       while (next < edges.length && edges[next].top <= y) active.push(edges[next++]);
       if (active.length) active = active.filter((e) => e.bottom > y);
       if (!active.length) continue;
@@ -4039,7 +4099,7 @@ function polygonCoverage(points, width, height, antiAlias = true) {
             const c = cx + 0.5;
             cov = c >= x0 && c < x1 ? 1 : 0;
           }
-          if (cov > 0) m[row + cx] += cov / sub;
+          if (cov > 0) m[row + cx] += cov / sub2;
         }
       }
     }
@@ -11180,7 +11240,7 @@ var ImageEditorController = class {
     const canvas = { x: 0, y: 0, width, height };
     const warnings = [];
     const note = /* @__PURE__ */ new Map();
-    const add = (msg, name) => note.set(msg, [...note.get(msg) ?? [], name]);
+    const add2 = (msg, name) => note.set(msg, [...note.get(msg) ?? [], name]);
     const canRasterize = this.renderer.canRasterize();
     await this.renderer.prepareLayerAssets(this.state.layers, width, height);
     const sources = this.renderer.compositorSources(width, height);
@@ -11188,7 +11248,7 @@ var ImageEditorController = class {
     const bakeMask = (layer) => {
       const mask = layer.mask;
       if (!mask?.source) return mask;
-      add("Parametric (depth) masks were baked into pixel masks", layer.name);
+      add2("Parametric (depth) masks were baked into pixel masks", layer.name);
       const plain3 = { ...layer, mask: { ...mask, density: 1, feather: 0, enabled: true } };
       const ox = layer.type === "pixel" ? layer.offset.x : 0;
       const oy = layer.type === "pixel" ? layer.offset.y : 0;
@@ -11204,7 +11264,7 @@ var ImageEditorController = class {
     };
     const prepare = async (layer) => {
       const p = await prepareLayer(layer);
-      if (p?.blend === "pigment") add("The Pigment blend mode has no PSD equivalent and was written as Normal", layer.name);
+      if (p?.blend === "pigment") add2("The Pigment blend mode has no PSD equivalent and was written as Normal", layer.name);
       return p;
     };
     const prepareLayer = async (layer) => {
@@ -11219,10 +11279,10 @@ var ImageEditorController = class {
       if (layer.type === "adjustment") return { ...layer, mask: bakeMask(layer) };
       if (layer.type === "annotation") {
         if (!canRasterize) {
-          add("Annotation layers need a canvas (a browser) to rasterize and were left out", layer.name);
+          add2("Annotation layers need a canvas (a browser) to rasterize and were left out", layer.name);
           return null;
         }
-        add("Annotation layers were written as pixel layers", layer.name);
+        add2("Annotation layers were written as pixel layers", layer.name);
         const blend = layer.blend === "normal" && layer.annotation.blend ? layer.annotation.blend : layer.blend;
         const content = { ...layer, visible: true, opacity: 1, blend: "normal", annotation: { ...layer.annotation, blend: void 0 } };
         delete content.mask;
@@ -11253,7 +11313,7 @@ var ImageEditorController = class {
       }
       const active = layer.filters?.filter(isActiveFilter) ?? [];
       if (active.length) {
-        add("Layer filters (develop, blur) were baked into the pixels", layer.name);
+        add2("Layer filters (develop, blur) were baked into the pixels", layer.name);
         const content = { ...out, visible: true, opacity: 1, blend: "normal" };
         delete content.mask;
         delete content.clipped;
@@ -11262,7 +11322,7 @@ var ImageEditorController = class {
         const data = compositor.composite([content], canvas, sources);
         out = { ...out, surface: surfaceFromPixels({ width, height, data }, 4, -layer.offset.x, -layer.offset.y) };
       }
-      if (layer.filters?.some((f) => !f.enabled)) add("Disabled layer filters were left out", layer.name);
+      if (layer.filters?.some((f) => !f.enabled)) add2("Disabled layer filters were left out", layer.name);
       delete out.filters;
       const mask = bakeMask(layer);
       if (mask) out.mask = mask;
@@ -13416,7 +13476,7 @@ function createImageEffectTools(controller) {
     annotations: { title: "List layer effects", ...READ3 },
     handler: ({ layerId }) => result(layerArg(layerId), { globalLight: controller.getGlobalLight(), patterns: patternList(controller), kinds: [...LAYER_EFFECT_KINDS] })
   };
-  const add = {
+  const add2 = {
     name: "add_layer_effect",
     title: "Add a layer effect",
     description: "Adds a live effect to a pixel, annotation or group layer with Photoshop's defaults, changed by settings: drop-shadow, inner-shadow, outer-glow, inner-glow, bevel-emboss, satin, color-overlay, gradient-overlay, pattern-overlay or stroke. Several of one kind are allowed (the first listed is on top). One undo step. Returns the new effect's id and the layer's effects.",
@@ -13514,7 +13574,7 @@ function createImageEffectTools(controller) {
       return { globalLight: controller.setGlobalLight(next) };
     }
   };
-  return [list2, add, update, remove, setEnabled, light];
+  return [list2, add2, update, remove, setEnabled, light];
 }
 
 // src/image-editor/layers/paint-ui.ts
@@ -14779,6 +14839,7 @@ function layerMenu(controller) {
     { action: "apply-mask", label: "Apply Layer Mask", enabled: isPixel && Boolean(active?.mask) },
     { action: "delete-mask", label: "Delete Layer Mask", enabled: Boolean(active?.mask) },
     { action: "toggle-mask", label: active?.mask?.enabled === false ? "Enable Layer Mask" : "Disable Layer Mask", enabled: Boolean(active?.mask) },
+    { action: "toggle-mask-link", label: active?.mask?.linked === false ? "Link Layer Mask" : "Unlink Layer Mask", enabled: Boolean(active?.mask && !active.mask.source) },
     { action: "rasterize", label: "Rasterize Layer", enabled: active?.type === "annotation" || isPixel && Boolean(active?.type === "pixel" && active.filters?.length) },
     { action: "toggle-clip", label: active?.clipped ? "Release Clipping Mask" : "Create Clipping Mask", enabled: Boolean(loc && loc.index > 0) }
   ];
@@ -14834,6 +14895,9 @@ async function runLayerMenuAction(controller, action) {
       case "toggle-mask":
         if (id && active?.mask) controller.setLayerMaskProps(id, { enabled: active.mask.enabled === false });
         break;
+      case "toggle-mask-link":
+        if (id && active?.mask) controller.setLayerMaskProps(id, { linked: active.mask.linked === false });
+        break;
       case "rasterize":
         if (id) await controller.rasterizeLayer(id);
         break;
@@ -15052,6 +15116,577 @@ async function downloadPsd(controller, name = "image") {
   }
   return { fileName, warnings: res.warnings };
 }
+
+// src/image-editor/layers/transform-ui.ts
+var CORNERS = ["nw", "ne", "se", "sw"];
+var SIDES = ["n", "e", "s", "w"];
+var CORNER_INDEX = { nw: 0, ne: 1, se: 2, sw: 3 };
+var SIDE_CORNERS = { n: [0, 1], e: [1, 2], s: [2, 3], w: [3, 0] };
+var HANDLE_FRACTION = { nw: [0, 0], n: [0.5, 0], ne: [1, 0], e: [1, 0.5], se: [1, 1], s: [0.5, 1], sw: [0, 1], w: [0, 0.5] };
+var ANCHOR_FRACTION2 = {
+  "top-left": [0, 0],
+  top: [0.5, 0],
+  "top-right": [1, 0],
+  left: [0, 0.5],
+  center: [0.5, 0.5],
+  right: [1, 0.5],
+  "bottom-left": [0, 1],
+  bottom: [0.5, 1],
+  "bottom-right": [1, 1]
+};
+var FREE_TRANSFORM_MODE_OPTIONS = [
+  { id: "scale", label: "Free", title: "Free Transform: corners scale, outside rotates, Ctrl/Cmd distorts" },
+  { id: "rotate", label: "Rotate", title: "Every handle rotates about the reference point" },
+  { id: "skew", label: "Skew", title: "Sides slide along themselves" },
+  { id: "distort", label: "Distort", title: "Each corner moves freely" },
+  { id: "perspective", label: "Perspective", title: "A corner and its partner move symmetrically" },
+  { id: "warp", label: "Warp", title: "Bend through a mesh: drag its points or pull inside; presets in the bar" }
+];
+var WARP_STYLE_OPTIONS = [
+  { id: "custom", label: "Custom" },
+  ...WARP_STYLES.map((id) => ({ id, label: WARP_STYLE_LABELS[id] }))
+];
+var WARP_GRID_OPTIONS = [
+  { id: "1x1", label: "Default", columns: 1, rows: 1 },
+  { id: "3x3", label: "3 \xD7 3", columns: 3, rows: 3 },
+  { id: "5x5", label: "5 \xD7 5", columns: 5, rows: 5 }
+];
+var FREE_TRANSFORM_FIELDS = [
+  { id: "x", label: "X", unit: "px", title: "Reference point X (document pixels)" },
+  { id: "y", label: "Y", unit: "px", title: "Reference point Y (document pixels)" },
+  { id: "scaleX", label: "W", unit: "%", title: "Width in percent of the original" },
+  { id: "scaleY", label: "H", unit: "%", title: "Height in percent of the original" },
+  { id: "rotate", label: "\u2220", unit: "\xB0", title: "Rotation in degrees, clockwise" },
+  { id: "skewX", label: "H skew", unit: "\xB0", title: "Horizontal skew in degrees" },
+  { id: "skewY", label: "V skew", unit: "\xB0", title: "Vertical skew in degrees" }
+];
+var CURSOR = {
+  nw: "nwse-resize",
+  se: "nwse-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize",
+  n: "ns-resize",
+  s: "ns-resize",
+  e: "ew-resize",
+  w: "ew-resize",
+  reference: "move",
+  inside: "move",
+  outside: "alias"
+};
+var meshIndex = (h) => h && h.startsWith("mesh:") ? Number(h.slice(5)) : -1;
+var mod = (m) => Boolean(m.ctrlKey || m.metaKey);
+var add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y });
+var sub = (a, b) => ({ x: a.x - b.x, y: a.y - b.y });
+function rotateAbout(p, c, rad) {
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const d = sub(p, c);
+  return { x: c.x + d.x * cos - d.y * sin, y: c.y + d.x * sin + d.y * cos };
+}
+function insideQuad(q2, p) {
+  let sign = 0;
+  for (let i = 0; i < 4; i++) {
+    const a = q2[i];
+    const b = q2[(i + 1) % 4];
+    const c = (b.x - a.x) * (p.y - a.y) - (b.y - a.y) * (p.x - a.x);
+    if (Math.abs(c) < 1e-12) continue;
+    const s = Math.sign(c);
+    if (sign && s !== sign) return false;
+    sign = s;
+  }
+  return true;
+}
+function insidePolygon(poly, p) {
+  let inside = false;
+  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+    const a = poly[i];
+    const b = poly[j];
+    if (a.y > p.y !== b.y > p.y && p.x < (b.x - a.x) * (p.y - a.y) / (b.y - a.y) + a.x) inside = !inside;
+  }
+  return inside;
+}
+var FreeTransformTool = class {
+  constructor(controller, options = {}) {
+    this.controller = controller;
+    this.options = options;
+  }
+  controller;
+  options;
+  sessionRef = null;
+  modeValue = "scale";
+  /** The reference point in the untransformed frame's space (follows the transform). */
+  refBox = { x: 0, y: 0 };
+  corners = null;
+  drag = null;
+  /** The warp mesh in the frame's own space (null: no warp). */
+  mesh = null;
+  warpSettings = { style: "custom", bend: 50, horizontal: 0, vertical: 0, orientation: "horizontal", columns: 1, rows: 1 };
+  pending = false;
+  viewScale = 1;
+  viewClip;
+  /** Values typed into the options bar since the last drag (V skew is not recovered from the shape). */
+  typed = {};
+  /** Width and height scale together when typed (the chain icon). */
+  proportional = true;
+  error = null;
+  lastResult = null;
+  get active() {
+    return Boolean(this.sessionRef?.isOpen);
+  }
+  get session() {
+    return this.active ? this.sessionRef : null;
+  }
+  get mode() {
+    return this.modeValue;
+  }
+  get interpolation() {
+    return this.sessionRef?.interpolation ?? "bicubic";
+  }
+  listeners = /* @__PURE__ */ new Set();
+  /** Calls `listener` whenever the overlay, readout, mode or error changes. Returns the unsubscribe. */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  changed() {
+    this.options.onChange?.();
+    for (const l of this.listeners) l();
+  }
+  /** Opens a Free Transform (default: the selected pixels of the active layer, or the whole layer). Returns an error message or `null`. */
+  begin(init = {}) {
+    if (this.active) return null;
+    try {
+      if (!init.layerId && init.content !== "selection-outline" && !this.controller.getState().activeLayerId) {
+        const top = [...flattenLayers(this.controller.getState().layers)].reverse().find((l) => l.type === "pixel" && l.visible);
+        if (top) this.controller.setActiveLayer(top.id);
+      }
+      const s = this.controller.beginFreeTransform(init);
+      this.sessionRef = s;
+      this.corners = s.geometry.corners;
+      this.refBox = { x: s.box.x + s.box.width / 2, y: s.box.y + s.box.height / 2 };
+      this.modeValue = "scale";
+      this.mesh = null;
+      this.warpSettings = { style: "custom", bend: 50, horizontal: 0, vertical: 0, orientation: "horizontal", columns: 1, rows: 1 };
+      this.typed = {};
+      this.error = null;
+    } catch (e) {
+      this.error = e instanceof Error ? e.message : String(e);
+    }
+    this.changed();
+    return this.error;
+  }
+  setMode(mode) {
+    this.modeValue = mode;
+    const s = this.session;
+    if (mode === "warp" && s && !this.mesh) this.mesh = identityWarpMesh(s.box, this.warpSettings.columns, this.warpSettings.rows);
+    this.changed();
+  }
+  /** The Warp options bar's settings. */
+  warpBar() {
+    return { ...this.warpSettings };
+  }
+  /** The warp mesh (frame space), or null. */
+  get warp() {
+    return this.mesh;
+  }
+  /**
+   * Applies Warp options: a preset `style` with `bend` / `horizontal` / `vertical` (percent) and
+   * `orientation` replaces the mesh; `custom` keeps it; the grid size re-splits it (exactly when it
+   * can). Switches to Warp mode.
+   */
+  setWarp(changes) {
+    const s = this.session;
+    if (!s) return;
+    this.modeValue = "warp";
+    const next = { ...this.warpSettings, ...changes };
+    this.warpSettings = next;
+    let mesh = this.mesh ?? identityWarpMesh(s.box, next.columns, next.rows);
+    if (next.style !== "custom" && ("style" in changes || "bend" in changes || "horizontal" in changes || "vertical" in changes || "orientation" in changes)) {
+      const preset = { style: next.style, bend: next.bend, horizontal: next.horizontal, vertical: next.vertical, orientation: next.orientation };
+      mesh = warpPresetMesh(preset, s.box) ?? identityWarpMesh(s.box);
+      mesh = resizeWarpMesh(mesh, next.columns, next.rows);
+    }
+    if ("columns" in changes || "rows" in changes) mesh = resizeWarpMesh(mesh, next.columns, next.rows);
+    this.mesh = mesh;
+    this.changed();
+    this.preview();
+  }
+  /** Sets the reference point to an anchor of the frame (the options bar's locator). */
+  setReference(anchor) {
+    const s = this.session;
+    if (!s) return;
+    const [fx, fy] = ANCHOR_FRACTION2[anchor];
+    this.refBox = { x: s.box.x + fx * s.box.width, y: s.box.y + fy * s.box.height };
+    this.changed();
+  }
+  setInterpolation(interpolation) {
+    const s = this.session;
+    if (!s) return;
+    this.run(() => s.update({ interpolation }, false));
+  }
+  /** Screen pixels per document pixel and the visible document area, for previews. */
+  setView(scale, clip) {
+    this.viewScale = scale > 0 ? scale : 1;
+    this.viewClip = clip;
+  }
+  homography() {
+    const s = this.session;
+    return s && this.corners ? rectToQuad(s.box, this.corners) : null;
+  }
+  /** The reference point in document pixels. */
+  referencePoint() {
+    const h = this.homography();
+    return h ? applyHomography(h, this.refBox) : null;
+  }
+  /** The outline, handles and reference point to draw, or `null` when no transform is open. */
+  overlay() {
+    const s = this.session;
+    const h = this.homography();
+    if (!s || !h || !this.corners) return null;
+    const handles = [...CORNERS, ...SIDES].map((id) => {
+      const [fx, fy] = HANDLE_FRACTION[id];
+      const p = applyHomography(h, { x: s.box.x + fx * s.box.width, y: s.box.y + fy * s.box.height }) ?? { x: 0, y: 0 };
+      return { id, x: p.x, y: p.y };
+    });
+    const out = { outline: this.corners.map((p) => ({ x: p.x, y: p.y })), handles, reference: this.referencePoint() ?? { x: 0, y: 0 } };
+    if (this.modeValue === "warp" && this.mesh) {
+      const m = this.mesh;
+      const at = (p) => applyHomography(h, p) ?? p;
+      const pts = m.points.map(at);
+      const edit = warpMeshEditPoints(m);
+      out.handles = [];
+      out.outline = warpMeshGridCurves({ ...m, points: pts }).length ? this.meshOutline(pts, m) : out.outline;
+      out.warp = {
+        curves: warpMeshGridCurves({ ...m, points: pts }),
+        anchors: edit.anchors.map((i) => pts[i]),
+        handles: edit.handles.map((e) => ({ point: pts[e.index], anchor: pts[e.anchor] }))
+      };
+    }
+    return out;
+  }
+  /** The mesh's border anchors, clockwise (for the inside test). */
+  meshOutline(pts, m) {
+    const nx = 3 * (m.us.length - 1) + 1;
+    const ny = 3 * (m.vs.length - 1) + 1;
+    const ring = [];
+    for (let i = 0; i < nx; i++) ring.push(pts[i]);
+    for (let j = 1; j < ny; j++) ring.push(pts[j * nx + nx - 1]);
+    for (let i = nx - 2; i >= 0; i--) ring.push(pts[(ny - 1) * nx + i]);
+    for (let j = ny - 2; j > 0; j--) ring.push(pts[j * nx]);
+    return ring;
+  }
+  /** What a document point is over (`tolerance` in document pixels: a few screen pixels / scale). */
+  hit(p, tolerance) {
+    const o = this.overlay();
+    if (!o) return null;
+    if (this.modeValue === "warp" && this.mesh) {
+      const h = this.homography();
+      const edit = warpMeshEditPoints(this.mesh);
+      let best2 = -1;
+      let bestD2 = tolerance;
+      for (const i of [...edit.anchors, ...edit.handles.map((e) => e.index)]) {
+        const q2 = applyHomography(h, this.mesh.points[i]);
+        if (!q2) continue;
+        const d = Math.hypot(q2.x - p.x, q2.y - p.y);
+        if (d <= bestD2) {
+          best2 = i;
+          bestD2 = d;
+        }
+      }
+      if (best2 >= 0) return `mesh:${best2}`;
+      return insidePolygon(o.outline, p) ? "inside" : "outside";
+    }
+    let best = null;
+    let bestD = tolerance;
+    for (const h of o.handles) {
+      const d = Math.hypot(h.x - p.x, h.y - p.y);
+      if (d <= bestD) {
+        best = h.id;
+        bestD = d;
+      }
+    }
+    if (Math.hypot(o.reference.x - p.x, o.reference.y - p.y) < bestD) best = "reference";
+    if (best) return best;
+    return insideQuad(o.outline, p) ? "inside" : "outside";
+  }
+  /** The CSS cursor for a handle. */
+  cursor(handle) {
+    if (!handle) return "default";
+    if (meshIndex(handle) >= 0) return "pointer";
+    if (this.modeValue === "warp") return handle === "inside" ? "grab" : "default";
+    if (this.modeValue === "rotate" && handle !== "inside" && handle !== "reference") return CURSOR.outside;
+    return CURSOR[handle];
+  }
+  /** Starts a drag on what `p` is over. */
+  down(p, tolerance) {
+    if (!this.session || !this.corners) return null;
+    const handle = this.hit(p, tolerance);
+    if (!handle) return null;
+    let st = null;
+    if (this.modeValue === "warp" && this.mesh && handle === "inside") {
+      const q2 = this.toFrame(p, this.corners);
+      if (q2) {
+        const r = warpMeshParamAt(this.mesh, q2);
+        st = { s: r.s, t: r.t };
+      }
+    }
+    this.drag = { handle, start: { x: p.x, y: p.y }, corners: this.corners, refBox: { ...this.refBox }, ref: this.referencePoint() ?? p, mesh: this.mesh, st };
+    return handle;
+  }
+  /** A document point in the frame's own space under `corners`. */
+  toFrame(p, corners) {
+    const s = this.session;
+    const h = s ? rectToQuad(s.box, corners) : null;
+    const inv = h && invertHomography(h);
+    return inv ? applyHomography(inv, p) : null;
+  }
+  /** Continues the drag to `p` with the modifiers held now. */
+  move(p, m = {}) {
+    const d = this.drag;
+    const s = this.session;
+    if (!d || !s) return;
+    if (d.handle === "reference") {
+      const h = rectToQuad(s.box, d.corners);
+      const inv = h && invertHomography(h);
+      const q2 = inv && applyHomography(inv, p);
+      if (q2) this.refBox = q2;
+      this.changed();
+      return;
+    }
+    if (this.modeValue === "warp" && d.mesh) {
+      const a = this.toFrame(d.start, d.corners);
+      const b = this.toFrame(p, d.corners);
+      if (!a || !b) return;
+      const delta = { x: b.x - a.x, y: b.y - a.y };
+      const i = meshIndex(d.handle);
+      if (i >= 0) this.mesh = dragWarpMeshPoint(d.mesh, i, delta);
+      else if (d.handle === "inside" && d.st) this.mesh = pullWarpMesh(d.mesh, d.st.s, d.st.t, delta);
+      else return;
+      this.warpSettings = { ...this.warpSettings, style: "custom" };
+      this.changed();
+      this.preview();
+      return;
+    }
+    const corners = this.dragCorners(d, p, m);
+    if (corners) this.setCorners(corners);
+  }
+  /** Ends the drag (the transform stays open). */
+  up() {
+    this.drag = null;
+  }
+  dragCorners(d, p, m) {
+    const s = this.session;
+    const c0 = d.corners;
+    let delta = sub(p, d.start);
+    const map = (f) => c0.map(f);
+    const handle = d.handle;
+    const isCorner = handle in CORNER_INDEX;
+    const isSide = handle in SIDE_CORNERS;
+    const rotating = handle === "outside" || this.modeValue === "rotate" && (isCorner || isSide);
+    if (handle === "inside") {
+      if (m.shiftKey) delta = Math.abs(delta.x) >= Math.abs(delta.y) ? { x: delta.x, y: 0 } : { x: 0, y: delta.y };
+      return map((q3) => add(q3, delta));
+    }
+    if (rotating) {
+      const r = d.ref;
+      let a = Math.atan2(p.y - r.y, p.x - r.x) - Math.atan2(d.start.y - r.y, d.start.x - r.x);
+      if (m.shiftKey) a = Math.round(a / (Math.PI / 12)) * (Math.PI / 12);
+      return map((q3) => rotateAbout(q3, r, a));
+    }
+    const perspective = this.modeValue === "perspective" || mod(m) && m.altKey && m.shiftKey;
+    const distort = this.modeValue === "distort" || mod(m) && !perspective;
+    const skew = this.modeValue === "skew" || mod(m) && isSide;
+    if (isSide && (skew || perspective)) {
+      const [i, j] = SIDE_CORNERS[handle];
+      const dir = sub(c0[j], c0[i]);
+      const len = Math.hypot(dir.x, dir.y) || 1;
+      const t = (delta.x * dir.x + delta.y * dir.y) / len;
+      const v = { x: dir.x / len * t, y: dir.y / len * t };
+      const [oi, oj] = SIDE_CORNERS[{ n: "s", s: "n", e: "w", w: "e" }[handle]];
+      return map((q3, k) => k === i || k === j ? add(q3, v) : m.altKey && (k === oi || k === oj) ? sub(q3, v) : q3);
+    }
+    if (isCorner && perspective) {
+      const k = CORNER_INDEX[handle];
+      if (Math.abs(delta.x) >= Math.abs(delta.y)) {
+        const partner2 = [1, 0, 3, 2][k];
+        return map((q3, i) => i === k ? { x: q3.x + delta.x, y: q3.y } : i === partner2 ? { x: q3.x - delta.x, y: q3.y } : q3);
+      }
+      const partner = [3, 2, 1, 0][k];
+      return map((q3, i) => i === k ? { x: q3.x, y: q3.y + delta.y } : i === partner ? { x: q3.x, y: q3.y - delta.y } : q3);
+    }
+    if (distort || isCorner && this.modeValue === "skew") {
+      if (isCorner) return map((q3, i2) => i2 === CORNER_INDEX[handle] ? add(q3, delta) : q3);
+      const [i, j] = SIDE_CORNERS[handle];
+      return map((q3, k) => k === i || k === j ? add(q3, delta) : q3);
+    }
+    const h = rectToQuad(s.box, c0);
+    const inv = h && invertHomography(h);
+    if (!h || !inv) return null;
+    const q2 = applyHomography(inv, p);
+    const q0 = applyHomography(inv, d.start);
+    if (!q2 || !q0) return null;
+    const b = s.box;
+    const [fx, fy] = HANDLE_FRACTION[handle];
+    const grab = { x: b.x + fx * b.width, y: b.y + fy * b.height };
+    const anchor = m.altKey ? d.refBox : { x: b.x + (1 - fx) * b.width, y: b.y + (1 - fy) * b.height };
+    const target = add(grab, sub(q2, q0));
+    const ax = grab.x - anchor.x;
+    const ay = grab.y - anchor.y;
+    let sx = isCorner || handle === "e" || handle === "w" ? Math.abs(ax) > 1e-9 ? (target.x - anchor.x) / ax : 1 : 1;
+    let sy = isCorner || handle === "n" || handle === "s" ? Math.abs(ay) > 1e-9 ? (target.y - anchor.y) / ay : 1 : 1;
+    if (isCorner && !m.shiftKey) {
+      const k = Math.abs(sx) >= Math.abs(sy) ? sx : sy;
+      sx = k;
+      sy = k;
+    }
+    const scaled = [
+      { x: b.x, y: b.y },
+      { x: b.x + b.width, y: b.y },
+      { x: b.x + b.width, y: b.y + b.height },
+      { x: b.x, y: b.y + b.height }
+    ].map((c) => applyHomography(h, { x: anchor.x + (c.x - anchor.x) * sx, y: anchor.y + (c.y - anchor.y) * sy }));
+    return scaled.every(Boolean) ? scaled : null;
+  }
+  /** Sets new corners and refreshes the preview (scheduled). Invalid shapes keep the last good one. */
+  setCorners(corners) {
+    const s = this.session;
+    if (!s) return;
+    const h = rectToQuad(s.box, corners);
+    if (!h) return;
+    this.corners = corners;
+    this.typed = {};
+    this.changed();
+    this.preview();
+  }
+  preview() {
+    if (this.pending) return;
+    this.pending = true;
+    const run = () => {
+      this.pending = false;
+      const s = this.session;
+      if (!s || !this.corners) return;
+      this.run(() => s.update({ corners: this.corners, warp: this.mesh }, { scale: this.viewScale, clip: this.viewClip }));
+    };
+    if (this.options.schedule) this.options.schedule(run);
+    else run();
+  }
+  run(fn) {
+    try {
+      fn();
+      this.error = null;
+    } catch (e) {
+      this.error = e instanceof Error ? e.message : String(e);
+      if (this.sessionRef && !this.sessionRef.isOpen) this.sessionRef = null;
+    }
+    this.changed();
+  }
+  /** The options bar's numbers for the current shape. */
+  bar() {
+    const s = this.session;
+    if (!s || !this.corners) return null;
+    const read = describeTransform({ box: s.box, corners: this.corners }, this.refBox);
+    return {
+      affine: read.affine,
+      x: this.typed.x ?? read.x,
+      y: this.typed.y ?? read.y,
+      scaleX: this.typed.scaleX ?? read.scaleX,
+      scaleY: this.typed.scaleY ?? read.scaleY,
+      rotate: this.typed.rotate ?? read.rotate,
+      skewX: this.typed.skewX ?? read.skewX,
+      skewY: this.typed.skewY ?? 0
+    };
+  }
+  /** Applies a typed options-bar value (W and H together while `proportional`). */
+  setField(field, value) {
+    const s = this.session;
+    const cur = this.bar();
+    if (!s || !cur || !Number.isFinite(value)) return;
+    const next = { ...cur, [field]: value };
+    if (this.proportional && field === "scaleX") next.scaleY = cur.scaleY === 0 ? value : value / cur.scaleX * cur.scaleY;
+    if (this.proportional && field === "scaleY") next.scaleX = cur.scaleX === 0 ? value : value / cur.scaleY * cur.scaleX;
+    if (!next.scaleX || !next.scaleY) {
+      this.error = "Width and height must not be 0 %.";
+      this.changed();
+      return;
+    }
+    const m = matrixFromParams(s.box, {
+      scaleX: next.scaleX,
+      scaleY: next.scaleY,
+      rotate: next.rotate,
+      skewX: next.skewX,
+      skewY: next.skewY,
+      reference: this.refBox,
+      dx: next.x - this.refBox.x,
+      dy: next.y - this.refBox.y
+    });
+    this.setCorners(cornersFromMatrix(s.box, m));
+    this.typed = { scaleX: next.scaleX, scaleY: next.scaleY, rotate: next.rotate, skewX: next.skewX, skewY: next.skewY, x: next.x, y: next.y };
+    this.changed();
+  }
+  /** Finishes with full-quality resampling (one undo step). */
+  commit() {
+    const s = this.session;
+    if (!s) return null;
+    let res = null;
+    this.pending = false;
+    this.run(() => {
+      if (this.corners) s.update({ corners: this.corners, warp: this.mesh }, false);
+      res = s.commit();
+    });
+    this.lastResult = res;
+    this.sessionRef = null;
+    this.corners = null;
+    this.mesh = null;
+    this.drag = null;
+    this.changed();
+    return res;
+  }
+  /** Abandons the transform and restores everything. */
+  cancel() {
+    this.sessionRef?.cancel();
+    this.sessionRef = null;
+    this.corners = null;
+    this.mesh = null;
+    this.drag = null;
+    this.pending = false;
+    this.error = null;
+    this.changed();
+  }
+  /**
+   * Keyboard: Enter commits, Escape cancels, arrows nudge by 1 px (Shift: 10). Ctrl/Cmd+T opens a
+   * Free Transform when none is open. Returns true when the key was used (prevent its default).
+   */
+  key(e) {
+    const t = e.target;
+    const typing = Boolean(t && (t.isContentEditable || t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT"));
+    if (!this.active) {
+      if ((e.ctrlKey || e.metaKey) && !e.altKey && e.key.toLowerCase() === "t" && !typing) {
+        this.begin();
+        return true;
+      }
+      return false;
+    }
+    if (e.key === "Enter") {
+      this.commit();
+      return true;
+    }
+    if (e.key === "Escape") {
+      this.cancel();
+      return true;
+    }
+    if (typing) return false;
+    const step = e.shiftKey ? 10 : 1;
+    const nudge = { ArrowLeft: { x: -step, y: 0 }, ArrowRight: { x: step, y: 0 }, ArrowUp: { x: 0, y: -step }, ArrowDown: { x: 0, y: step } };
+    const v = nudge[e.key];
+    if (v && this.corners) {
+      this.setCorners(this.corners.map((q2) => add(q2, v)));
+      return true;
+    }
+    return false;
+  }
+};
 export {
   ADJUSTMENT_KEYS,
   ADJUSTMENT_KINDS,
@@ -15081,8 +15716,11 @@ export {
   EMPTY_DISTANCE,
   EMPTY_MIXER_LOAD,
   FREE_TRANSFORM_CONTENTS,
+  FREE_TRANSFORM_FIELDS,
   FREE_TRANSFORM_MODES,
+  FREE_TRANSFORM_MODE_OPTIONS,
   FreeTransformSession,
+  FreeTransformTool,
   GUIDED_FILTER_EPS,
   HISTOGRAM_BINS,
   HUE_RANGE_LABELS,
@@ -15145,8 +15783,10 @@ export {
   TiledSurface,
   TransformTooLargeError,
   VIBRANCE_GREY,
+  WARP_GRID_OPTIONS,
   WARP_STYLES,
   WARP_STYLE_LABELS,
+  WARP_STYLE_OPTIONS,
   XYZ_D50_TO_SRGB,
   ZlibError,
   activeAdjustmentLayers,