@pixerate/editor 0.212.0 → 0.214.0

package/dist/image-editor/index.js

@@ -1,8 +1,10 @@
 import {
+  bendSegment,
   loadOpenTypeFont,
   parseOpenTypeFont,
+  removeAnchorsKeepingShape,
   traceField
-} from "../chunk-5OC22IEO.js";
+} from "../chunk-DJBYJOHM.js";
 import {
   ColorGmm,
   DEFAULT_REFINE_EDGE_PARAMS,
@@ -668,6 +670,8 @@ import {
   applyMatrix,
   bezierToSubpaths,
   caretAt,
+  cloneAnchor,
+  convertAnchor,
   createCanvasTextShaper,
   createMetricTextShaper,
   createOutlineTextShaper,
@@ -679,23 +683,30 @@ import {
   fitRuns,
   fontOf,
   identityWarpMesh,
+  inferAnchorType,
+  insertAnchor,
   invertMatrix,
   layoutText,
   lineToTextSpace,
+  moveAnchorHandle,
   multiplyMatrices,
   paragraphRanges,
   pullWarpMesh,
+  removeAnchors,
   resizeWarpMesh,
   restyleRange,
   rotateMatrix,
   roundSubpaths,
   spliceRuns,
   styleAt,
+  subpathSegment,
+  subpathSegmentCount,
   subpathsToBezier,
   textArrowStep,
   textIndexAt,
   textLineMove,
   textSelectionQuads,
+  translateAnchor,
   translateMatrix,
   warpMeshColumns,
   warpMeshEditPoints,
@@ -707,7 +718,9 @@ import {
 import "../chunk-F7YA3MMC.js";
 import "../chunk-M6DNZNVY.js";
 import {
-  bezierPathToSvg
+  bezierPathToSvg,
+  pointInBezierPath,
+  segmentNearest
 } from "../chunk-WEIK3UYB.js";
 import "../chunk-PWBZH3FK.js";
 import {
@@ -1175,10 +1188,10 @@ function emptyHistogram() {
     max: 0
   };
 }
-function addToHistogram(h, data, stride, rect) {
-  for (let y = rect.y; y < rect.y + rect.height; y++) {
-    let i = (y * stride + rect.x) * 4;
-    for (let x = 0; x < rect.width; x++, i += 4) {
+function addToHistogram(h, data, stride, rect2) {
+  for (let y = rect2.y; y < rect2.y + rect2.height; y++) {
+    let i = (y * stride + rect2.x) * 4;
+    for (let x = 0; x < rect2.width; x++, i += 4) {
       if (!(data[i + 3] > 0)) {
         h.transparent++;
         continue;
@@ -1639,6 +1652,63 @@ var ImageEditorRenderer = class {
       }
       ctx.restore();
     }
+    if (options.pathEdit) {
+      const e = options.pathEdit;
+      ctx.save();
+      try {
+        const scr = (p) => projectImagePoint(p, projection);
+        const trace2 = (c) => {
+          const [a, b, d, f] = c.map(scr);
+          ctx.moveTo(a.x, a.y);
+          if (f) ctx.bezierCurveTo(b.x, b.y, d.x, d.y, f.x, f.y);
+          else ctx.lineTo(b.x, b.y);
+        };
+        ctx.beginPath();
+        e.curves.forEach(trace2);
+        ctx.lineWidth = 1.5 * u;
+        ctx.strokeStyle = OVERLAY_HANDLE_EDGE;
+        ctx.stroke();
+        if (e.preview) {
+          ctx.beginPath();
+          trace2(e.preview);
+          ctx.setLineDash([4 * u, 3 * u]);
+          ctx.stroke();
+          ctx.setLineDash([]);
+        }
+        ctx.beginPath();
+        for (const h of e.handles) {
+          const a = scr(h.anchor);
+          const q = scr(h.point);
+          ctx.moveTo(a.x, a.y);
+          ctx.lineTo(q.x, q.y);
+        }
+        ctx.lineWidth = 1 * u;
+        ctx.stroke();
+        for (const h of e.handles) {
+          const q = scr(h.point);
+          ctx.beginPath();
+          ctx.arc(q.x, q.y, 3 * u, 0, Math.PI * 2);
+          ctx.fillStyle = OVERLAY_HANDLE_EDGE;
+          ctx.fill();
+        }
+        const size = 6 * u;
+        ctx.lineWidth = 1 * u;
+        for (const a of e.anchors) {
+          const q = scr(a.point);
+          ctx.fillStyle = a.selected ? OVERLAY_HANDLE_EDGE : "#ffffff";
+          ctx.fillRect(q.x - size / 2, q.y - size / 2, size, size);
+          ctx.strokeRect(q.x - size / 2, q.y - size / 2, size, size);
+        }
+        if (e.marquee) {
+          const a = scr({ x: e.marquee.x, y: e.marquee.y });
+          const b = scr({ x: e.marquee.x + e.marquee.width, y: e.marquee.y + e.marquee.height });
+          ctx.setLineDash([4 * u, 3 * u]);
+          ctx.strokeRect(Math.min(a.x, b.x), Math.min(a.y, b.y), Math.abs(b.x - a.x), Math.abs(b.y - a.y));
+        }
+      } 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), u);
@@ -1742,7 +1812,7 @@ var ImageEditorRenderer = class {
         if (!source.enabled || !source.maskSource) return null;
         return this.depthMaps.get(`${source.maskSource}|${width}x${height}`) ?? null;
       },
-      rasterizeAnnotation: (annotation, rect) => this.rasterizeAnnotation(annotation, rect),
+      rasterizeAnnotation: (annotation, rect2) => this.rasterizeAnnotation(annotation, rect2),
       version: `${host?.version() ?? ""}:${this.assetVersion}`,
       globalLight: host?.globalLight?.(),
       pattern: host?.pattern ? (id) => host.pattern(id) : void 0
@@ -1754,15 +1824,15 @@ var ImageEditorRenderer = class {
     for (const l of flattenLayers(layers)) {
       const source = l.mask?.source;
       if (source?.enabled && source.maskSource) {
-        const key = `${source.maskSource}|${width}x${height}`;
-        if (this.depthMaps.has(key)) continue;
+        const key2 = `${source.maskSource}|${width}x${height}`;
+        if (this.depthMaps.has(key2)) continue;
         try {
           const maskImg = await this.imageCache.get(source.maskSource);
           const canvas = this.createCanvas(width, height);
           const mctx = canvas.getContext("2d");
           const data = mctx ? (mctx.drawImage(maskImg, 0, 0, width, height), mctx.getImageData?.(0, 0, width, height)) : null;
           if (data) {
-            this.depthMaps.set(key, { width, height, data: data.data });
+            this.depthMaps.set(key2, { width, height, data: data.data });
             this.assetVersion++;
           }
         } catch {
@@ -1783,34 +1853,34 @@ var ImageEditorRenderer = class {
     return Boolean(ctx && typeof ctx.getImageData === "function");
   }
   /** One annotation drawn into a tile-sized RGBA buffer at `rect` (document space), or `null` without a canvas. */
-  rasterizeAnnotation(annotation, rect) {
-    if (!this.scratch) this.scratch = this.createCanvas(rect.width, rect.height);
+  rasterizeAnnotation(annotation, rect2) {
+    if (!this.scratch) this.scratch = this.createCanvas(rect2.width, rect2.height);
     const canvas = this.scratch;
-    if (canvas.width !== rect.width || canvas.height !== rect.height) {
-      canvas.width = rect.width;
-      canvas.height = rect.height;
+    if (canvas.width !== rect2.width || canvas.height !== rect2.height) {
+      canvas.width = rect2.width;
+      canvas.height = rect2.height;
     }
     const ctx = canvas.getContext("2d");
     if (!ctx || typeof ctx.getImageData !== "function") return null;
     try {
       ctx.setTransform(1, 0, 0, 1, 0, 0);
-      ctx.clearRect(0, 0, rect.width, rect.height);
-      ctx.setTransform(1, 0, 0, 1, -rect.x, -rect.y);
+      ctx.clearRect(0, 0, rect2.width, rect2.height);
+      ctx.setTransform(1, 0, 0, 1, -rect2.x, -rect2.y);
       const img = annotation.type === "image" ? this.imageCache.peek(annotation.src) ?? null : null;
       this.drawAnnotationShape(ctx, annotation, img);
       ctx.setTransform(1, 0, 0, 1, 0, 0);
-      return new Uint8ClampedArray(ctx.getImageData(0, 0, rect.width, rect.height).data);
+      return new Uint8ClampedArray(ctx.getImageData(0, 0, rect2.width, rect2.height).data);
     } catch {
       return null;
     }
   }
-  putTile(ctx, data, tx, ty, rect) {
-    const ox = tx * TILE - rect.x;
-    const oy = ty * TILE - rect.y;
+  putTile(ctx, data, tx, ty, rect2) {
+    const ox = tx * TILE - rect2.x;
+    const oy = ty * TILE - rect2.y;
     const x0 = Math.max(0, -ox);
     const y0 = Math.max(0, -oy);
-    const x1 = Math.min(TILE, rect.width - ox);
-    const y1 = Math.min(TILE, rect.height - oy);
+    const x1 = Math.min(TILE, rect2.width - ox);
+    const y1 = Math.min(TILE, rect2.height - oy);
     if (x1 <= x0 || y1 <= y0) return;
     const img = ctx.createImageData(TILE, TILE);
     img.data.set(data);
@@ -1822,23 +1892,23 @@ var ImageEditorRenderer = class {
    * uploading only the tiles that changed since the last render.
    */
   updateComposite(layers, region, width, height, options = {}) {
-    const rect = coveringRect(region);
+    const rect2 = coveringRect(region);
     let comp = this.comp;
     let fresh = false;
-    if (!comp || comp.rect.x !== rect.x || comp.rect.y !== rect.y || comp.rect.width !== rect.width || comp.rect.height !== rect.height) {
-      const canvas = this.createCanvas(rect.width, rect.height);
-      comp = this.comp = new CompositeCanvas(canvas, rect);
+    if (!comp || comp.rect.x !== rect2.x || comp.rect.y !== rect2.y || comp.rect.width !== rect2.width || comp.rect.height !== rect2.height) {
+      const canvas = this.createCanvas(rect2.width, rect2.height);
+      comp = this.comp = new CompositeCanvas(canvas, rect2);
       fresh = true;
     }
     const ctx = comp.canvas.getContext("2d");
     if (!ctx || typeof ctx.createImageData !== "function") return null;
     let changed = false;
-    this.compositor.compositeTiles(layers, rect, this.compositorSources(width, height), (tx, ty, data) => {
-      const key = tileKey(tx, ty);
-      if (comp.tiles.get(key) === data) return;
-      comp.tiles.set(key, data);
-      comp.histograms.delete(key);
-      this.putTile(ctx, data, tx, ty, rect);
+    this.compositor.compositeTiles(layers, rect2, this.compositorSources(width, height), (tx, ty, data) => {
+      const key2 = tileKey(tx, ty);
+      if (comp.tiles.get(key2) === data) return;
+      comp.tiles.set(key2, data);
+      comp.histograms.delete(key2);
+      this.putTile(ctx, data, tx, ty, rect2);
       changed = true;
     }, { checkpointLayerId: options.checkpointLayerId, dirty: fresh ? void 0 : options.dirty });
     if (changed) comp.version++;
@@ -1857,8 +1927,8 @@ var ImageEditorRenderer = class {
     const rotated = getRotatedSize(region.width, region.height, transform);
     const baseW = Math.max(1, Math.round(rotated.width));
     const baseH = Math.max(1, Math.round(rotated.height));
-    const key = `${this.displayKey}:${comp.version}|${region.x},${region.y},${region.width},${region.height}|${normalizeAngle(transform.rotate)},${transform.flipH},${transform.flipV}|${opacity}|${blur}`;
-    if (this.cachedPostCanvas && this.cachedPostKey === key) return { canvas: this.cachedPostCanvas, histogram: this.cachedPostHistogram };
+    const key2 = `${this.displayKey}:${comp.version}|${region.x},${region.y},${region.width},${region.height}|${normalizeAngle(transform.rotate)},${transform.flipH},${transform.flipV}|${opacity}|${blur}`;
+    if (this.cachedPostCanvas && this.cachedPostKey === key2) return { canvas: this.cachedPostCanvas, histogram: this.cachedPostHistogram };
     const canvas = this.cachedPostCanvas && this.cachedPostCanvas.width === baseW && this.cachedPostCanvas.height === baseH ? this.cachedPostCanvas : this.createCanvas(baseW, baseH);
     const ctx = canvas.getContext("2d");
     if (!ctx) return null;
@@ -1872,7 +1942,7 @@ var ImageEditorRenderer = class {
     ctx.restore();
     const histogram = this.applyPost(ctx, baseW, baseH, state);
     this.cachedPostCanvas = canvas;
-    this.cachedPostKey = key;
+    this.cachedPostKey = key2;
     this.cachedPostHistogram = histogram;
     return { canvas, histogram };
   }
@@ -1908,11 +1978,11 @@ var ImageEditorRenderer = class {
   /** A layer's mask as canvas-sized coverage for its mask view, kept while the mask is unchanged. */
   maskViewSelection(layer, width, height) {
     if (!layer.mask || layer.mask.source || width < 1 || height < 1) return null;
-    const key = `${width}x${height}:${layer.type === "pixel" ? `${layer.offset.x},${layer.offset.y}` : ""}`;
+    const key2 = `${width}x${height}:${layer.type === "pixel" ? `${layer.offset.x},${layer.offset.y}` : ""}`;
     const cached = this.maskViewCache.get(layer.mask.surface);
-    if (cached?.key === key) return cached.mask;
+    if (cached?.key === key2) return cached.mask;
     const mask = layerMaskSelection(layer, width, height);
-    if (mask) this.maskViewCache.set(layer.mask.surface, { key, mask });
+    if (mask) this.maskViewCache.set(layer.mask.surface, { key: key2, mask });
     return mask;
   }
   /** A mask alone in grey (white = revealed), opaque, drawn in natural image space. */
@@ -1931,16 +2001,16 @@ var ImageEditorRenderer = class {
   }
   /** A channel's tint (colour, opacity, masked or selected area), drawn in natural image space. */
   drawMaskOverlay(ctx, mask, style) {
-    const key = `${style.color?.join(",")}|${style.opacity}|${style.indicates}`;
+    const key2 = `${style.color?.join(",")}|${style.opacity}|${style.indicates}`;
     let cached = this.overlayCache.get(mask);
-    if (!cached || cached.key !== key) {
+    if (!cached || cached.key !== key2) {
       const canvas = this.createCanvas(mask.width, mask.height);
       const mctx = canvas.getContext("2d");
       if (!mctx || typeof mctx.createImageData !== "function") return;
       const img = mctx.createImageData(mask.width, mask.height);
       img.data.set(quickMaskPixels(mask, style));
       mctx.putImageData(img, 0, 0);
-      cached = { key, canvas };
+      cached = { key: key2, canvas };
       this.overlayCache.set(mask, cached);
     }
     ctx.drawImage(cached.canvas, 0, 0, mask.width, mask.height);
@@ -2001,11 +2071,11 @@ var ImageEditorRenderer = class {
     if (typeof ctx.setLineDash === "function") ctx.setLineDash([]);
   }
   getSourceId(img) {
-    const key = img;
-    let id = this.sourceIds.get(key);
+    const key2 = img;
+    let id = this.sourceIds.get(key2);
     if (id === void 0) {
       id = ++this.nextSourceId;
-      this.sourceIds.set(key, id);
+      this.sourceIds.set(key2, id);
     }
     return id;
   }
@@ -2104,15 +2174,15 @@ var ImageEditorRenderer = class {
         break;
       }
       case "rect": {
-        const rect = ann;
-        ctx.strokeStyle = rect.strokeColor;
-        ctx.lineWidth = rect.strokeWidth;
-        if (rect.fillColor) {
-          ctx.fillStyle = rect.fillColor;
-          ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+        const rect2 = ann;
+        ctx.strokeStyle = rect2.strokeColor;
+        ctx.lineWidth = rect2.strokeWidth;
+        if (rect2.fillColor) {
+          ctx.fillStyle = rect2.fillColor;
+          ctx.fillRect(rect2.x, rect2.y, rect2.width, rect2.height);
         }
-        if (rect.strokeWidth > 0) {
-          ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+        if (rect2.strokeWidth > 0) {
+          ctx.strokeRect(rect2.x, rect2.y, rect2.width, rect2.height);
         }
         break;
       }
@@ -2303,12 +2373,12 @@ var ImageEditorRenderer = class {
       const split = splitOverlayAnnotations(layers);
       overlay = split.overlay.map((l) => l.annotation);
       await this.prepareLayerAssets(split.composite, naturalWidth, naturalHeight);
-      const rect = coveringRect(region);
-      const comp = this.createCanvas(rect.width, rect.height);
+      const rect2 = coveringRect(region);
+      const comp = this.createCanvas(rect2.width, rect2.height);
       const cctx = comp.getContext("2d");
       if (cctx && typeof cctx.createImageData === "function") {
-        this.exportCompositor.compositeTiles(split.composite, rect, this.compositorSources(naturalWidth, naturalHeight), (tx, ty, data) => {
-          this.putTile(cctx, data, tx, ty, rect);
+        this.exportCompositor.compositeTiles(split.composite, rect2, this.compositorSources(naturalWidth, naturalHeight), (tx, ty, data) => {
+          this.putTile(cctx, data, tx, ty, rect2);
         });
       }
       baseCanvas = this.createCanvas(baseW, baseH);
@@ -2319,7 +2389,7 @@ var ImageEditorRenderer = class {
         bctx.beginPath();
         bctx.rect(region.x, region.y, region.width, region.height);
         bctx.clip();
-        bctx.drawImage(comp, rect.x, rect.y);
+        bctx.drawImage(comp, rect2.x, rect2.y);
         bctx.restore();
         this.applyPost(bctx, baseW, baseH, state);
       }
@@ -2447,10 +2517,10 @@ function getBaseProjection(region, transform, baseW, baseH) {
   };
 }
 var CompositeCanvas = class {
-  constructor(canvas, rect) {
+  constructor(canvas, rect2) {
     this.canvas = canvas;
-    this.rect = rect;
-    this.region = rect;
+    this.rect = rect2;
+    this.region = rect2;
   }
   canvas;
   rect;
@@ -2463,18 +2533,18 @@ var CompositeCanvas = class {
     if (!this.tiles.size) return null;
     const r = coveringRect(this.region);
     const parts = [];
-    for (const [key, data] of this.tiles) {
-      let h = this.histograms.get(key);
+    for (const [key2, data] of this.tiles) {
+      let h = this.histograms.get(key2);
       if (!h) {
-        const tx = key % 65536 - 32768;
-        const ty = Math.floor(key / 65536) - 32768;
+        const tx = key2 % 65536 - 32768;
+        const ty = Math.floor(key2 / 65536) - 32768;
         const x0 = Math.max(r.x, tx * TILE);
         const y0 = Math.max(r.y, ty * TILE);
         const x1 = Math.min(r.x + r.width, tx * TILE + TILE);
         const y1 = Math.min(r.y + r.height, ty * TILE + TILE);
         h = emptyHistogram();
         if (x1 > x0 && y1 > y0) addToHistogram(h, data, TILE, { x: x0 - tx * TILE, y: y0 - ty * TILE, width: x1 - x0, height: y1 - y0 });
-        this.histograms.set(key, h);
+        this.histograms.set(key2, h);
       }
       parts.push(h);
     }
@@ -2496,6 +2566,423 @@ function hexRgb(hex) {
   return [v >> 16 & 255, v >> 8 & 255, v & 255];
 }
 
+// src/image-editor/selection/inspect.ts
+var MASK_EDGE_THRESHOLDS = { halo: 0.35, alignment: 0.5, jaggedness: 15, soft: 0.9 };
+var STRONG_EDGE = 0.1;
+function toLab(r, g, b) {
+  const lin = (v) => {
+    v /= 255;
+    return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  };
+  const R = lin(r);
+  const G = lin(g);
+  const B = lin(b);
+  const f = (t) => t > 8856e-6 ? Math.cbrt(t) : 7.787 * t + 16 / 116;
+  const x = f((0.4124 * R + 0.3576 * G + 0.1805 * B) / 0.95047);
+  const y = f(0.2126 * R + 0.7152 * G + 0.0722 * B);
+  const z = f((0.0193 * R + 0.1192 * G + 0.9505 * B) / 1.08883);
+  return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+}
+var dist = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
+var r3 = (v) => Math.round(v * 1e3) / 1e3;
+function inspectMaskEdge(mask, image, options = {}) {
+  const b = mask.bounds;
+  if (!b) throw new Error("The mask is empty: there is no edge to inspect.");
+  const minArea = Math.max(1, options.minArea ?? 16);
+  const W = mask.width;
+  const H = mask.height;
+  const a = mask.data;
+  const alpha = (x, y) => x < 0 || y < 0 || x >= W || y >= H ? 0 : a[y * W + x];
+  const img = image.data;
+  const rgb = (x, y) => {
+    const ix = x - image.x;
+    const iy = y - image.y;
+    if (ix < 0 || iy < 0 || ix >= image.width || iy >= image.height) return null;
+    const i = (iy * image.width + ix) * 4;
+    if (img[i + 3] < 128) return null;
+    return [img[i], img[i + 1], img[i + 2]];
+  };
+  const premul = (x, y, c) => {
+    const ix = Math.min(image.width - 1, Math.max(0, x - image.x));
+    const iy = Math.min(image.height - 1, Math.max(0, y - image.y));
+    const i = (iy * image.width + ix) * 4;
+    return img[i + c] * img[i + 3] / 255;
+  };
+  const gradCache = /* @__PURE__ */ new Map();
+  const gradient = (x, y) => {
+    const k = y * W + x;
+    const hit = gradCache.get(k);
+    if (hit !== void 0) return hit;
+    let best = 0;
+    for (let c = 0; c < 3; c++) {
+      const p = (dx, dy) => premul(x + dx, y + dy, c);
+      const gx = p(1, -1) + 2 * p(1, 0) + p(1, 1) - p(-1, -1) - 2 * p(-1, 0) - p(-1, 1);
+      const gy = p(-1, 1) + 2 * p(0, 1) + p(1, 1) - p(-1, -1) - 2 * p(0, -1) - p(1, -1);
+      best = Math.max(best, Math.hypot(gx, gy) / 1020);
+    }
+    gradCache.set(k, best);
+    return best;
+  };
+  const B = Math.min(256, Math.max(24, Math.round(Math.max(W, H) / 12)));
+  const BW = Math.ceil(W / B);
+  const blocks = /* @__PURE__ */ new Map();
+  const block = (x, y) => {
+    const k = Math.floor(y / B) * BW + Math.floor(x / B);
+    let blk = blocks.get(k);
+    if (!blk) blocks.set(k, blk = { edge: 0, aligned: 0, halo: 0, haloN: 0, turn: 0, len: 0, x0: Infinity, y0: Infinity, x1: -Infinity, y1: -Infinity });
+    return blk;
+  };
+  const grow = (blk, x, y) => {
+    blk.x0 = Math.min(blk.x0, x);
+    blk.y0 = Math.min(blk.y0, y);
+    blk.x1 = Math.max(blk.x1, x);
+    blk.y1 = Math.max(blk.y1, y);
+  };
+  const x0 = Math.max(0, b.x - 1);
+  const y0 = Math.max(0, b.y - 1);
+  const x1 = Math.min(W, b.x + b.width + 1);
+  const y1 = Math.min(H, b.y + b.height + 1);
+  let area = 0;
+  let edgeLength = 0;
+  let aligned = 0;
+  let haloSum = 0;
+  let haloN = 0;
+  let band = 0;
+  let soft = 0;
+  for (let y = y0; y < y1; y++) {
+    for (let x = x0; x < x1; x++) {
+      const v = a[y * W + x];
+      if (v >= 128) area++;
+      let lo = false;
+      let hi = false;
+      for (let dy = -1; dy <= 1; dy++) {
+        for (let dx = -1; dx <= 1; dx++) {
+          const nx = x + dx;
+          const ny = y + dy;
+          if (nx < 0 || ny < 0 || nx >= W || ny >= H) continue;
+          if (a[ny * W + nx] >= 128) hi = true;
+          else lo = true;
+        }
+      }
+      const partial = v > 0 && v < 255;
+      if (hi && lo || partial) {
+        band++;
+        if (partial) soft++;
+      }
+      if (v < 128) continue;
+      const inCanvasLow = (nx, ny) => nx >= 0 && ny >= 0 && nx < W && ny < H && a[ny * W + nx] < 128;
+      if (!(inCanvasLow(x - 1, y) || inCanvasLow(x + 1, y) || inCanvasLow(x, y - 1) || inCanvasLow(x, y + 1))) continue;
+      edgeLength++;
+      const blk = block(x, y);
+      blk.edge++;
+      grow(blk, x, y);
+      let strong = false;
+      for (let dy = -2; dy <= 2 && !strong; dy++) {
+        for (let dx = -2; dx <= 2 && !strong; dx++) {
+          const nx = x + dx;
+          const ny = y + dy;
+          if (nx >= 0 && ny >= 0 && nx < W && ny < H && gradient(nx, ny) >= STRONG_EDGE) strong = true;
+        }
+      }
+      if (strong) {
+        aligned++;
+        blk.aligned++;
+      }
+      const s = (dx, dy) => alpha(Math.min(W - 1, Math.max(0, x + dx)), Math.min(H - 1, Math.max(0, y + dy)));
+      const gx = s(1, -1) + 2 * s(1, 0) + s(1, 1) - s(-1, -1) - 2 * s(-1, 0) - s(-1, 1);
+      const gy = s(-1, 1) + 2 * s(0, 1) + s(1, 1) - s(-1, -1) - 2 * s(0, -1) - s(1, -1);
+      const len = Math.hypot(gx, gy);
+      if (len < 1e-6) continue;
+      const ux = gx / len;
+      const uy = gy / len;
+      const at = (d) => rgb(Math.round(x + ux * d), Math.round(y + uy * d));
+      const ring = at(1.5);
+      const deep = at(5);
+      const out = at(-3);
+      if (!ring || !deep || !out) continue;
+      const labOut = toLab(...out);
+      const span = dist(toLab(...deep), labOut);
+      if (span < 10) continue;
+      const h = Math.min(1, Math.max(0, 1 - dist(toLab(...ring), labOut) / span));
+      haloSum += h;
+      haloN++;
+      blk.halo += h;
+      blk.haloN++;
+    }
+  }
+  let turnExcess = 0;
+  let outline = 0;
+  for (const loop of traceLoops(a, W, H, x0 - 1, y0 - 1, x1 + 1, y1 + 1)) {
+    const pts = resample(loop, 2);
+    const n = pts.length;
+    if (n < 6) continue;
+    const L = n * 2;
+    let total = 0;
+    let net = 0;
+    const turns = [];
+    for (let i = 0; i < n; i++) {
+      const p0 = pts[(i + n - 1) % n];
+      const p1 = pts[i];
+      const p2 = pts[(i + 1) % n];
+      let d = Math.atan2(p2[1] - p1[1], p2[0] - p1[0]) - Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
+      while (d > Math.PI) d -= 2 * Math.PI;
+      while (d <= -Math.PI) d += 2 * Math.PI;
+      turns.push(d);
+      total += Math.abs(d);
+      net += d;
+    }
+    const closure = Math.abs(net);
+    turnExcess += Math.max(0, total - closure);
+    outline += L;
+    for (let i = 0; i < n; i++) {
+      const [px2, py] = pts[i];
+      if (px2 < 0 || py < 0 || px2 >= W || py >= H) continue;
+      const blk = block(Math.floor(px2), Math.floor(py));
+      blk.turn += Math.abs(turns[i]) - closure / n;
+      blk.len += 2;
+    }
+  }
+  const jaggedness = outline ? 100 * turnExcess / outline : 0;
+  const { holes, islands } = regions(a, W, H, b, minArea);
+  const haloScore = haloN ? haloSum / haloN : 0;
+  const edgeAlignment = edgeLength ? aligned / edgeLength : 0;
+  const softFraction = band ? soft / band : 0;
+  const T2 = MASK_EDGE_THRESHOLDS;
+  const candidates = [];
+  const pad = (r) => {
+    const px0 = Math.max(0, r.x - 8);
+    const py0 = Math.max(0, r.y - 8);
+    return { x: px0, y: py0, width: Math.min(W, r.x + r.width + 8) - px0, height: Math.min(H, r.y + r.height + 8) - py0 };
+  };
+  for (const blk of blocks.values()) {
+    if (blk.edge < 8) continue;
+    const bounds = pad({ x: blk.x0, y: blk.y0, width: blk.x1 - blk.x0 + 1, height: blk.y1 - blk.y0 + 1 });
+    const opts = [];
+    if (blk.haloN >= 8) {
+      const h = blk.halo / blk.haloN;
+      if (h >= T2.halo) opts.push({ severity: h, reason: `halo ${r3(h)}: the colour just inside the edge matches the background` });
+    }
+    const al = blk.aligned / blk.edge;
+    if (al < T2.alignment) opts.push({ severity: (1 - al) * 0.9, reason: `alignment ${r3(al)}: the edge is off the image's edges` });
+    if (blk.len >= 16) {
+      const j = 100 * Math.max(0, blk.turn) / blk.len;
+      if (j >= T2.jaggedness) opts.push({ severity: Math.min(1, j / (4 * T2.jaggedness)), reason: `jaggedness ${r3(j)}: the outline zigzags` });
+    }
+    const top = opts.sort((p, q) => q.severity - p.severity)[0];
+    if (top) candidates.push({ ...top, bounds });
+  }
+  const imageArea = W * H;
+  for (const r of holes.largest) candidates.push({ severity: Math.min(0.95, 0.5 + r.area / (0.01 * imageArea)), bounds: pad(r.bounds), reason: `hole of ${r.area} px inside the selection` });
+  for (const r of islands.largest) candidates.push({ severity: Math.min(0.95, 0.5 + r.area / (0.01 * imageArea)), bounds: pad(r.bounds), reason: `island of ${r.area} px apart from the main selection` });
+  const worst = candidates.sort((p, q) => q.severity - p.severity).slice(0, 5).map(({ bounds, reason }) => ({ bounds, reason }));
+  const issues = [];
+  if (haloScore >= T2.halo)
+    issues.push(`Halo (haloScore ${r3(haloScore)} \u2265 ${T2.halo}): background colour is left inside the edge. Contract the edge (modify_selection contract 1\u20132 px, or refine_selection shiftEdge -20 to -40), or decontaminate on a new-layer output.`);
+  if (edgeLength >= 16 && edgeAlignment < T2.alignment)
+    issues.push(`Off the image's edges (edgeAlignment ${r3(edgeAlignment)} < ${T2.alignment}): much of the edge does not follow edges in the image. Rebuild it with select_subject, select_object or quick_select, or refine_selection with a larger radius.`);
+  if (jaggedness >= T2.jaggedness) issues.push(`Jagged (jaggedness ${r3(jaggedness)} \u2265 ${T2.jaggedness}): the outline zigzags. Smooth it (refine_selection smooth 20\u201340, or modify_selection smooth).`);
+  if (softFraction >= T2.soft && edgeAlignment >= T2.alignment)
+    issues.push(`Very soft (softFraction ${r3(softFraction)} \u2265 ${T2.soft}): almost the whole edge is partly selected. If the subject has hard edges, raise refine_selection contrast or lower feather.`);
+  if (holes.count) issues.push(`${holes.count} hole(s) (${holes.totalArea} px) inside the selection. If they belong to the subject, fill them (quick_select or select_polygon with mode add).`);
+  if (islands.count) issues.push(`${islands.count} island(s) (${islands.totalArea} px) apart from the main selection. If they are stray, remove them (select_polygon or quick_select with mode subtract).`);
+  return {
+    area,
+    bounds: { ...b },
+    edgeLength,
+    haloScore: r3(haloScore),
+    edgeAlignment: r3(edgeAlignment),
+    jaggedness: r3(jaggedness),
+    softFraction: r3(softFraction),
+    holes,
+    islands,
+    worst,
+    issues
+  };
+}
+function traceLoops(a, W, H, rx0, ry0, rx1, ry1) {
+  const w = rx1 - rx0;
+  const h = ry1 - ry0;
+  const f = (i, j) => {
+    const x = rx0 + i;
+    const y = ry0 + j;
+    return x < 0 || y < 0 || x >= W || y >= H ? 0 : a[y * W + x];
+  };
+  const on = (i, j) => f(i, j) >= 128;
+  const V = w * h;
+  const point = (id) => {
+    const vertical = id >= V;
+    const k = vertical ? id - V : id;
+    const i = k % w;
+    const j = (k - i) / w;
+    const p = f(i, j);
+    const q = vertical ? f(i, j + 1) : f(i + 1, j);
+    const t = q === p ? 0.5 : Math.min(1, Math.max(0, (127.5 - p) / (q - p)));
+    return vertical ? [rx0 + i, ry0 + j + t] : [rx0 + i + t, ry0 + j];
+  };
+  const segs = [];
+  const touch = /* @__PURE__ */ new Map();
+  const add2 = (e1, e2) => {
+    const s = segs.length / 2;
+    segs.push(e1, e2);
+    for (const e of [e1, e2]) {
+      const list = touch.get(e);
+      if (list) list.push(s);
+      else touch.set(e, [s]);
+    }
+  };
+  for (let j = 0; j < h - 1; j++) {
+    for (let i = 0; i < w - 1; i++) {
+      const c = (on(i, j) ? 1 : 0) | (on(i + 1, j) ? 2 : 0) | (on(i + 1, j + 1) ? 4 : 0) | (on(i, j + 1) ? 8 : 0);
+      if (c === 0 || c === 15) continue;
+      const top = j * w + i;
+      const bottom = (j + 1) * w + i;
+      const left = V + j * w + i;
+      const right = V + j * w + i + 1;
+      const centre = (f(i, j) + f(i + 1, j) + f(i + 1, j + 1) + f(i, j + 1)) / 4 >= 128;
+      switch (c) {
+        case 1:
+        case 14:
+          add2(left, top);
+          break;
+        case 2:
+        case 13:
+          add2(top, right);
+          break;
+        case 3:
+        case 12:
+          add2(left, right);
+          break;
+        case 4:
+        case 11:
+          add2(right, bottom);
+          break;
+        case 6:
+        case 9:
+          add2(top, bottom);
+          break;
+        case 7:
+        case 8:
+          add2(left, bottom);
+          break;
+        case 5:
+          if (centre) {
+            add2(top, right);
+            add2(left, bottom);
+          } else {
+            add2(left, top);
+            add2(right, bottom);
+          }
+          break;
+        case 10:
+          if (centre) {
+            add2(left, top);
+            add2(right, bottom);
+          } else {
+            add2(top, right);
+            add2(left, bottom);
+          }
+          break;
+      }
+    }
+  }
+  const used = new Uint8Array(segs.length / 2);
+  const loops = [];
+  for (let s0 = 0; s0 < used.length; s0++) {
+    if (used[s0]) continue;
+    const loop = [];
+    let s = s0;
+    let from = segs[s * 2];
+    while (!used[s]) {
+      used[s] = 1;
+      loop.push(point(from));
+      const to = segs[s * 2] === from ? segs[s * 2 + 1] : segs[s * 2];
+      const next = touch.get(to).find((t) => !used[t]);
+      from = to;
+      if (next === void 0) break;
+      s = next;
+    }
+    loops.push(loop);
+  }
+  return loops;
+}
+function resample(loop, step) {
+  const n = loop.length;
+  if (n < 2) return [];
+  const out = [loop[0]];
+  let carry = 0;
+  for (let i = 0; i < n; i++) {
+    const [ax, ay] = loop[i];
+    const [bx, by] = loop[(i + 1) % n];
+    const seg = Math.hypot(bx - ax, by - ay);
+    let t = step - carry;
+    while (t <= seg) {
+      out.push([ax + (bx - ax) * t / seg, ay + (by - ay) * t / seg]);
+      t += step;
+    }
+    carry = seg - (t - step);
+  }
+  if (out.length > 1 && Math.hypot(out[out.length - 1][0] - out[0][0], out[out.length - 1][1] - out[0][1]) < step / 2) out.pop();
+  return out;
+}
+function regions(a, W, H, b, minArea) {
+  const x0 = b.x - 1;
+  const y0 = b.y - 1;
+  const w = b.width + 2;
+  const h = b.height + 2;
+  const on = (i, j) => {
+    const x = x0 + i;
+    const y = y0 + j;
+    return x >= 0 && y >= 0 && x < W && y < H && a[y * W + x] >= 128;
+  };
+  const label = new Int32Array(w * h);
+  const stack = new Int32Array(w * h);
+  const found = [];
+  const N4 = [[1, 0], [-1, 0], [0, 1], [0, -1]];
+  const N8 = [...N4, [1, 1], [1, -1], [-1, 1], [-1, -1]];
+  for (let start = 0; start < w * h; start++) {
+    if (label[start]) continue;
+    const si = start % w;
+    const sj = (start - si) / w;
+    const fg = on(si, sj);
+    const id = found.length + 1;
+    const r = { fg, area: 0, bx0: si, by0: sj, bx1: si, by1: sj, outer: false };
+    let top = 0;
+    stack[top++] = start;
+    label[start] = id;
+    while (top) {
+      const k = stack[--top];
+      const i = k % w;
+      const j = (k - i) / w;
+      r.area++;
+      if (i < r.bx0) r.bx0 = i;
+      if (i > r.bx1) r.bx1 = i;
+      if (j < r.by0) r.by0 = j;
+      if (j > r.by1) r.by1 = j;
+      if (i === 0 || j === 0 || i === w - 1 || j === h - 1) r.outer = true;
+      for (const [dx, dy] of fg ? N8 : N4) {
+        const ni = i + dx;
+        const nj = j + dy;
+        if (ni < 0 || nj < 0 || ni >= w || nj >= h) continue;
+        const nk = nj * w + ni;
+        if (label[nk] || on(ni, nj) !== fg) continue;
+        label[nk] = id;
+        stack[top++] = nk;
+      }
+    }
+    found.push(r);
+  }
+  const box = (r) => ({ x: x0 + r.bx0, y: y0 + r.by0, width: r.bx1 - r.bx0 + 1, height: r.by1 - r.by0 + 1 });
+  const summarize = (list) => {
+    const kept = list.filter((r) => r.area >= minArea).sort((p, q) => q.area - p.area);
+    return { count: kept.length, totalArea: kept.reduce((s, r) => s + r.area, 0), largest: kept.slice(0, 10).map((r) => ({ area: r.area, bounds: box(r) })) };
+  };
+  const pieces = found.filter((r) => r.fg).sort((p, q) => q.area - p.area);
+  return {
+    holes: summarize(found.filter((r) => !r.fg && !r.outer)),
+    islands: summarize(pieces.slice(1))
+  };
+}
+
 // src/image-editor/selection/path.ts
 function selectionToSubpaths(mask, options = {}) {
   const b = mask.bounds;
@@ -2547,12 +3034,12 @@ function pathToSelection(components, width, height, options = {}) {
   const rx1 = Math.min(width, Math.ceil(x1));
   const ry1 = Math.min(height, Math.ceil(y1));
   if (!(rx1 > rx0 && ry1 > ry0)) return createSelectionMask(width, height);
-  const rect = { x: rx0, y: ry0, width: rx1 - rx0, height: ry1 - ry0 };
-  const cov = componentsCoverage(components, rect, options.fillRule ?? "nonzero");
+  const rect2 = { x: rx0, y: ry0, width: rx1 - rx0, height: ry1 - ry0 };
+  const cov = componentsCoverage(components, rect2, options.fillRule ?? "nonzero");
   const hard = options.antiAlias === false;
   const bytes = new Uint8Array(cov.length);
   for (let i = 0; i < cov.length; i++) bytes[i] = hard ? cov[i] >= 0.5 ? 255 : 0 : coverageToByte(cov[i]);
-  const mask = selectionFromRegion(width, height, rect, bytes);
+  const mask = selectionFromRegion(width, height, rect2, bytes);
   const feather = options.feather ?? 0;
   return feather > 0 && mask.bounds ? modifySelection(mask, "feather", feather) : mask;
 }
@@ -2591,11 +3078,11 @@ var EdgeMap = class {
   block(x, y) {
     const bx = Math.floor(x / BLOCK);
     const by = Math.floor(y / BLOCK);
-    const key = by * 65536 + bx;
-    let b = this.blocks.get(key);
+    const key2 = by * 65536 + bx;
+    let b = this.blocks.get(key2);
     if (!b) {
       b = this.computeBlock(bx * BLOCK, by * BLOCK);
-      this.blocks.set(key, b);
+      this.blocks.set(key2, b);
     }
     return b;
   }
@@ -2689,7 +3176,7 @@ var Heap = class {
   ids = new Int32Array(256);
   keys = new Float64Array(256);
   size = 0;
-  push(id, key) {
+  push(id, key2) {
     if (this.size === this.ids.length) {
       const ids = new Int32Array(this.size * 2);
       ids.set(this.ids);
@@ -2701,31 +3188,31 @@ var Heap = class {
     let i = this.size++;
     while (i > 0) {
       const p = i - 1 >> 1;
-      if (this.keys[p] <= key) break;
+      if (this.keys[p] <= key2) break;
       this.ids[i] = this.ids[p];
       this.keys[i] = this.keys[p];
       i = p;
     }
     this.ids[i] = id;
-    this.keys[i] = key;
+    this.keys[i] = key2;
   }
   /** Removes the cheapest entry; read it from `topId` / `topKey` first. */
   pop() {
     const n = --this.size;
     const id = this.ids[n];
-    const key = this.keys[n];
+    const key2 = this.keys[n];
     let i = 0;
     for (; ; ) {
       let c = 2 * i + 1;
       if (c >= n) break;
       if (c + 1 < n && this.keys[c + 1] < this.keys[c]) c++;
-      if (this.keys[c] >= key) break;
+      if (this.keys[c] >= key2) break;
       this.ids[i] = this.ids[c];
       this.keys[i] = this.keys[c];
       i = c;
     }
     this.ids[i] = id;
-    this.keys[i] = key;
+    this.keys[i] = key2;
   }
   get topId() {
     return this.ids[0];
@@ -2784,19 +3271,19 @@ function liveWire(map, from, to, band) {
     }
   }
   const scale = maxStrength > 0 ? 1 / maxStrength : 0;
-  const dist = new Float64Array(n).fill(Infinity);
+  const dist2 = new Float64Array(n).fill(Infinity);
   const prev = new Int32Array(n).fill(-1);
   const done = new Uint8Array(n);
   const start = (ay - ry0) * w + (ax - rx0);
   const goal = (by - ry0) * w + (bx - rx0);
-  dist[start] = 0;
+  dist2[start] = 0;
   const heap = new Heap();
   heap.push(start, 0);
   while (heap.size) {
     const p = heap.topId;
     const d = heap.topKey;
     heap.pop();
-    if (done[p] || d > dist[p]) continue;
+    if (done[p] || d > dist2[p]) continue;
     done[p] = 1;
     if (p === goal) break;
     const x = p % w;
@@ -2817,8 +3304,8 @@ function liveWire(map, from, to, band) {
       const fZ = 1 - zero[q];
       const cost = (W_ZERO * fZ + W_GRADIENT * fG + W_DIRECTION * fD + 0.01) * step;
       const nd = d + cost;
-      if (nd < dist[q]) {
-        dist[q] = nd;
+      if (nd < dist2[q]) {
+        dist2[q] = nd;
         prev[q] = p;
         heap.push(q, nd);
       }
@@ -3534,8 +4021,8 @@ function colorRange(pixels, samples, options = {}) {
       const d = Math.max(Math.abs(data[p] - s.c[0]), Math.abs(data[p + 1] - s.c[1]), Math.abs(data[p + 2] - s.c[2]));
       let k = Math.min(1, Math.max(0, 1 - d / f));
       if (k > 0 && radius !== void 0 && s.at) {
-        const dist = Math.hypot(x - s.at.x, y - s.at.y);
-        k *= Math.min(1, Math.max(0, 1 - dist / radius));
+        const dist2 = Math.hypot(x - s.at.x, y - s.at.y);
+        k *= Math.min(1, Math.max(0, 1 - dist2 / radius));
       }
       if (k > best) best = k;
     }
@@ -3885,29 +4372,29 @@ var ImageEffectsEngine = class {
     return this.pending.size > 0;
   }
   /** See `SmartEffectResolver`. */
-  resolve(filter, input, width, height, key) {
-    const hit = this.cache.get(key);
+  resolve(filter, input, width, height, key2) {
+    const hit = this.cache.get(key2);
     if (hit) {
-      this.cache.delete(key);
-      this.cache.set(key, hit);
+      this.cache.delete(key2);
+      this.cache.set(key2, hit);
       return { result: hit, pending: false };
     }
-    if (this.pending.has(key)) return { result: null, pending: true };
+    if (this.pending.has(key2)) return { result: null, pending: true };
     const provider = this.slot.provider;
-    if (!provider || this.failures.has(key)) return { result: null, pending: false };
+    if (!provider || this.failures.has(key2)) return { result: null, pending: false };
     const generation = this.generation;
     const source = { width, height, data: new Uint8ClampedArray(input) };
     const run = this.filter(provider, filter.effect, filter.values, source).then((out) => {
       if (generation !== this.generation) return;
-      this.cache.set(key, out);
+      this.cache.set(key2, out);
       while (this.cache.size > this.maxEntries) this.cache.delete(this.cache.keys().next().value);
     }).catch((error) => {
-      if (generation === this.generation) this.failures.set(key, error instanceof Error ? error : new Error(String(error)));
+      if (generation === this.generation) this.failures.set(key2, error instanceof Error ? error : new Error(String(error)));
     }).finally(() => {
-      if (this.pending.get(key) === run) this.pending.delete(key);
+      if (this.pending.get(key2) === run) this.pending.delete(key2);
       if (generation === this.generation) this.notify();
     });
-    this.pending.set(key, run);
+    this.pending.set(key2, run);
     return { result: null, pending: true };
   }
   /** A filter effect over `source`: its result, or (for an overlay) the effect drawn over it. */
@@ -3928,12 +4415,12 @@ var ImageEffectsEngine = class {
     return out.width === size.width && out.height === size.height ? out : createEffectPixels(size.width, size.height);
   }
   /** Why the result for `key` failed, if it did. */
-  failure(key) {
-    return this.failures.get(key);
+  failure(key2) {
+    return this.failures.get(key2);
   }
   /** Every failure so far. */
   failuresList() {
-    return [...this.failures].map(([key, error]) => ({ key, error }));
+    return [...this.failures].map(([key2, error]) => ({ key: key2, error }));
   }
   /** Resolves when nothing is rendering. */
   async idle() {
@@ -4556,10 +5043,10 @@ function resolveProfile(doc) {
   let p;
   if (doc.builtin) p = builtinProfile(doc.builtin);
   else if (doc.icc) {
-    const key = bytesToBase64(doc.icc);
-    p = fromBytes.get(key) ?? parseProfile(doc.icc);
+    const key2 = bytesToBase64(doc.icc);
+    p = fromBytes.get(key2) ?? parseProfile(doc.icc);
     if (fromBytes.size > 32) fromBytes.clear();
-    fromBytes.set(key, p);
+    fromBytes.set(key2, p);
   } else p = srgbProfile();
   resolved.set(doc, p);
   return p;
@@ -4649,12 +5136,12 @@ function convertHex(hex, from, to, intent = "relative", bpc = true) {
   return `#${c(out[0])}${c(out[1])}${c(out[2])}`;
 }
 function convertColorFields(value, convert) {
-  const walk = (v, key) => {
-    if (typeof v === "string") return /color$/i.test(key) && /^#[0-9a-f]{6}$/i.test(v) ? convert(v) : v;
+  const walk = (v, key2) => {
+    if (typeof v === "string") return /color$/i.test(key2) && /^#[0-9a-f]{6}$/i.test(v) ? convert(v) : v;
     if (Array.isArray(v)) {
       let changed = false;
       const out = v.map((x) => {
-        const y = walk(x, key);
+        const y = walk(x, key2);
         if (y !== x) changed = true;
         return y;
       });
@@ -4676,7 +5163,7 @@ function convertSurfaceColors(surface, t) {
   if (surface.channels !== 4 || t.inputs !== 3 || t.outputs !== 3) return surface;
   const tiles = /* @__PURE__ */ new Map();
   const memo = /* @__PURE__ */ new Map();
-  for (const [key, tile] of surface.tiles) {
+  for (const [key2, tile] of surface.tiles) {
     let next = memo.get(tile);
     if (next === void 0) {
       if (tile.deep instanceof Uint16Array) {
@@ -4699,7 +5186,7 @@ function convertSurfaceColors(surface, t) {
       }
       memo.set(tile, next);
     }
-    if (next) tiles.set(key, next);
+    if (next) tiles.set(key2, next);
   }
   return new TiledSurface(4, tiles, surface.defaultValue);
 }
@@ -4716,22 +5203,22 @@ function paintCoverageInto(base, coverage, apply, rects, depth = null) {
   const done = /* @__PURE__ */ new Set();
   for (const r of rects) {
     for (const t of tilesInRect({ x: r.x - apply.offset.x, y: r.y - apply.offset.y, width: r.width, height: r.height })) {
-      const key = tileKey(t.tx, t.ty);
-      if (done.has(key)) continue;
-      done.add(key);
+      const key2 = tileKey(t.tx, t.ty);
+      if (done.has(key2)) continue;
+      done.add(key2);
       if (depth) {
         const ch = base.channels;
-        const d = applyStrokeToDeepTile(coverage, tileSamples(base.tiles.get(key), ch, depth, base.defaultValue), t.tx, t.ty, apply, { channels: ch });
+        const d = applyStrokeToDeepTile(coverage, tileSamples(base.tiles.get(key2), ch, depth, base.defaultValue), t.tx, t.ty, apply, { channels: ch });
         const tile2 = deepTile(d, ch, base.defaultValue);
-        if (tile2) tiles.set(key, tile2);
-        else tiles.delete(key);
+        if (tile2) tiles.set(key2, tile2);
+        else tiles.delete(key2);
         continue;
       }
-      const src = base.tiles.get(key)?.data ?? defaultTile(base);
+      const src = base.tiles.get(key2)?.data ?? defaultTile(base);
       const data = applyStrokeToTile(coverage, src, base.channels, t.tx, t.ty, apply);
       const tile = finishTile(data, base.channels, base.defaultValue);
-      if (tile) tiles.set(key, tile);
-      else tiles.delete(key);
+      if (tile) tiles.set(key2, tile);
+      else tiles.delete(key2);
     }
   }
   return new TiledSurface(base.channels, tiles, base.defaultValue);
@@ -4802,19 +5289,19 @@ var PaintStrokeSession = class {
   work = /* @__PURE__ */ new Map();
   workRead = /* @__PURE__ */ new Map();
   /** The pre-stroke tile as a float working tile (cached; `null`: transparent). */
-  readWork(key) {
-    if (!this.workRead.has(key)) this.workRead.set(key, workTileOf(this.base.tiles.get(key)));
-    return this.workRead.get(key);
+  readWork(key2) {
+    if (!this.workRead.has(key2)) this.workRead.set(key2, workTileOf(this.base.tiles.get(key2)));
+    return this.workRead.get(key2);
   }
   /** Clone, healing and the spot-heal trail at depth: `paint` through the coverage on the float working tile. */
-  retouchDeepTile(key, tx, ty, paint, options) {
+  retouchDeepTile(key2, tx, ty, paint, options) {
     const r = this.retouch;
-    const read = this.readWork(key);
+    const read = this.readWork(key2);
     const out = applyRetouchToTile(this.stroke.coverage, read ?? new Float32Array(TILE * TILE * 4), 4, tx, ty, paint, r.apply, options);
-    this.work.set(key, out);
-    const d = deepOfWorkTile(out, this.deep, read, this.base.tiles.get(key));
-    this.liveDeep.set(key, d);
-    this.live.set(key, { data: proxyOf(d, 4), uniform: null, deep: d });
+    this.work.set(key2, out);
+    const d = deepOfWorkTile(out, this.deep, read, this.base.tiles.get(key2));
+    this.liveDeep.set(key2, d);
+    this.live.set(key2, { data: proxyOf(d, 4), uniform: null, deep: d });
     return d;
   }
   /** The new tile of a coverage stroke over the pre-stroke tile `src`. */
@@ -4828,23 +5315,23 @@ var PaintStrokeSession = class {
     const a = this.apply;
     const depth = this.dabDeep;
     if (depth) {
-      const read = (key) => this.readWork(key);
+      const read = (key2) => this.readWork(key2);
       return {
         offset: a.offset,
         lockTransparency: a.lockTransparency,
         selection: a.selection,
         readTile: (tx, ty) => {
-          const key = tileKey(tx, ty);
-          return this.work.get(key) ?? read(key);
+          const key2 = tileKey(tx, ty);
+          return this.work.get(key2) ?? read(key2);
         },
         writeTile: (tx, ty) => {
-          const key = tileKey(tx, ty);
-          if (!this.touched.has(key)) {
-            this.work.set(key, read(key)?.slice() ?? new Float32Array(TILE * TILE * 4));
-            this.touched.add(key);
+          const key2 = tileKey(tx, ty);
+          if (!this.touched.has(key2)) {
+            this.work.set(key2, read(key2)?.slice() ?? new Float32Array(TILE * TILE * 4));
+            this.touched.add(key2);
           }
-          this.fresh.add(key);
-          return this.work.get(key);
+          this.fresh.add(key2);
+          return this.work.get(key2);
         }
       };
     }
@@ -4854,14 +5341,14 @@ var PaintStrokeSession = class {
       selection: a.selection,
       readTile: (tx, ty) => this.live.get(tileKey(tx, ty))?.data ?? (this.base.defaultValue ? defaultTile(this.base) : null),
       writeTile: (tx, ty) => {
-        const key = tileKey(tx, ty);
-        if (!this.touched.has(key)) {
-          const src = this.base.tiles.get(key)?.data ?? defaultTile(this.base);
-          this.live.set(key, { data: new Uint8ClampedArray(src), uniform: null });
-          this.touched.add(key);
+        const key2 = tileKey(tx, ty);
+        if (!this.touched.has(key2)) {
+          const src = this.base.tiles.get(key2)?.data ?? defaultTile(this.base);
+          this.live.set(key2, { data: new Uint8ClampedArray(src), uniform: null });
+          this.touched.add(key2);
         }
-        this.fresh.add(key);
-        return this.live.get(key).data;
+        this.fresh.add(key2);
+        return this.live.get(key2).data;
       }
     };
   }
@@ -4885,49 +5372,49 @@ var PaintStrokeSession = class {
     const ch = this.base.channels;
     if (this.mixer) {
       if (this.dabDeep) {
-        for (const key of this.fresh) {
-          const d = deepOfWorkTile(this.work.get(key), this.dabDeep, this.workRead.get(key) ?? null, this.base.tiles.get(key));
-          this.liveDeep.set(key, d);
-          this.live.set(key, { data: proxyOf(d, 4), uniform: null, deep: d });
+        for (const key2 of this.fresh) {
+          const d = deepOfWorkTile(this.work.get(key2), this.dabDeep, this.workRead.get(key2) ?? null, this.base.tiles.get(key2));
+          this.liveDeep.set(key2, d);
+          this.live.set(key2, { data: proxyOf(d, 4), uniform: null, deep: d });
         }
-      } else for (const key of this.fresh) this.live.set(key, { data: this.live.get(key).data, uniform: null });
+      } else for (const key2 of this.fresh) this.live.set(key2, { data: this.live.get(key2).data, uniform: null });
       this.fresh.clear();
       this.controller._strokeUpdate(this.target.id, this.target.channel, new TiledSurface(ch, new Map(this.live), this.base.defaultValue), rects);
       return;
     }
     const stroke = this.stroke;
-    const regions = /* @__PURE__ */ new Map();
+    const regions2 = /* @__PURE__ */ new Map();
     for (const r of rects) {
       for (const t of tilesInRect({ x: r.x - this.apply.offset.x, y: r.y - this.apply.offset.y, width: r.width, height: r.height })) {
-        const key = tileKey(t.tx, t.ty);
-        const cur = regions.get(key);
-        regions.set(key, { tx: t.tx, ty: t.ty, r: cur ? unionRect(cur.r, r) : r });
+        const key2 = tileKey(t.tx, t.ty);
+        const cur = regions2.get(key2);
+        regions2.set(key2, { tx: t.tx, ty: t.ty, r: cur ? unionRect(cur.r, r) : r });
       }
     }
-    for (const [key, { tx, ty, r }] of regions) {
+    for (const [key2, { tx, ty, r }] of regions2) {
       if (this.deep) {
         const rt = this.retouch;
         const paint = rt?.kind === "coverage" ? rt.paint() : null;
         if (paint && paint.kind !== "tone") {
-          const prevWork = this.touched.has(key) ? this.work.get(key) : void 0;
-          this.touched.add(key);
-          this.retouchDeepTile(key, tx, ty, paint, prevWork ? { into: prevWork, region: r } : {});
+          const prevWork = this.touched.has(key2) ? this.work.get(key2) : void 0;
+          this.touched.add(key2);
+          this.retouchDeepTile(key2, tx, ty, paint, prevWork ? { into: prevWork, region: r } : {});
           continue;
         }
-        const src2 = tileSamples(this.base.tiles.get(key), ch, this.deep, this.base.defaultValue);
-        const prev2 = this.touched.has(key) ? this.liveDeep.get(key) : void 0;
-        this.touched.add(key);
+        const src2 = tileSamples(this.base.tiles.get(key2), ch, this.deep, this.base.defaultValue);
+        const prev2 = this.touched.has(key2) ? this.liveDeep.get(key2) : void 0;
+        this.touched.add(key2);
         const opts = prev2 ? { into: prev2, region: r, channels: ch } : { channels: ch };
         const d = rt?.kind === "coverage" && paint?.kind === "tone" ? applyToneToDeepTile(stroke.coverage, src2, tx, ty, paint.tone, rt.apply, opts) : applyStrokeToDeepTile(stroke.coverage, src2, tx, ty, this.apply, opts);
-        this.liveDeep.set(key, d);
-        this.live.set(key, { data: proxyOf(d, ch), uniform: null, deep: d });
+        this.liveDeep.set(key2, d);
+        this.live.set(key2, { data: proxyOf(d, ch), uniform: null, deep: d });
         continue;
       }
-      const src = this.base.tiles.get(key)?.data ?? defaultTile(this.base);
-      const prev = this.touched.has(key) ? this.live.get(key)?.data : void 0;
-      this.touched.add(key);
+      const src = this.base.tiles.get(key2)?.data ?? defaultTile(this.base);
+      const prev = this.touched.has(key2) ? this.live.get(key2)?.data : void 0;
+      this.touched.add(key2);
       const data = this.compositeTile(src, tx, ty, prev ? { into: prev, region: r } : {});
-      this.live.set(key, { data, uniform: null });
+      this.live.set(key2, { data, uniform: null });
     }
     this.controller._strokeUpdate(this.target.id, this.target.channel, new TiledSurface(ch, new Map(this.live), this.base.defaultValue), rects);
   }
@@ -4944,26 +5431,26 @@ var PaintStrokeSession = class {
     if (r?.kind === "coverage" && r.finalPaint) {
       const final = r.finalPaint(this.stroke.coverage);
       if (final) {
-        for (const key of this.touched) {
-          const { tx, ty } = tileCoord(key);
+        for (const key2 of this.touched) {
+          const { tx, ty } = tileCoord(key2);
           if (this.deep) {
-            this.retouchDeepTile(key, tx, ty, final, {});
+            this.retouchDeepTile(key2, tx, ty, final, {});
             continue;
           }
-          const src = this.base.tiles.get(key)?.data ?? defaultTile(this.base);
-          this.live.set(key, { data: this.compositeTile(src, tx, ty, {}, final), uniform: null });
+          const src = this.base.tiles.get(key2)?.data ?? defaultTile(this.base);
+          this.live.set(key2, { data: this.compositeTile(src, tx, ty, {}, final), uniform: null });
         }
       }
     }
     const tiles = new Map(this.base.tiles);
     let changed = false;
-    for (const key of this.touched) {
-      const live = this.live.get(key);
-      const deep = this.liveDeep.get(key);
+    for (const key2 of this.touched) {
+      const live = this.live.get(key2);
+      const deep = this.liveDeep.get(key2);
       const tile = deep ? deepTile(deep, ch, this.base.defaultValue) : finishTile(live.data, ch, this.base.defaultValue);
-      const prev = this.base.tiles.get(key);
-      if (tile) tiles.set(key, tile);
-      else tiles.delete(key);
+      const prev = this.base.tiles.get(key2);
+      if (tile) tiles.set(key2, tile);
+      else tiles.delete(key2);
       if (!sameTile(prev, tile)) changed = true;
     }
     const surface = changed ? new TiledSurface(ch, tiles, this.base.defaultValue) : null;
@@ -4982,9 +5469,9 @@ var PaintStrokeSession = class {
     this.controller._strokeCommit(this.before, this.target.id, this.target.channel, null);
   }
 };
-function workRegionOf(surface, rect, depth) {
-  if (!depth) return Float32Array.from(readRegion(surface, rect));
-  const d = readDeepRegion(surface, rect, depth);
+function workRegionOf(surface, rect2, depth) {
+  if (!depth) return Float32Array.from(readRegion(surface, rect2));
+  const d = readDeepRegion(surface, rect2, depth);
   const out = new Float32Array(d.length);
   if (d instanceof Uint16Array) {
     for (let i = 0; i < d.length; i++) out[i] = d[i] / 257;
@@ -5671,9 +6158,9 @@ var ImageEditorController = class {
   /** Recomputes the compatibility views (`adjustments`, `depthMask`, `annotations`) when the stack changed. */
   syncViews() {
     const s = this.state;
-    const key = [s.layers, s.outputOpacity, s.legacyOutputBlur, s.activeLayerId, s.imageDimensions.width, s.imageDimensions.height];
-    if (key.length === this.viewKey.length && key.every((v, i) => v === this.viewKey[i])) return;
-    this.viewKey = key;
+    const key2 = [s.layers, s.outputOpacity, s.legacyOutputBlur, s.activeLayerId, s.imageDimensions.width, s.imageDimensions.height];
+    if (key2.length === this.viewKey.length && key2.every((v, i) => v === this.viewKey[i])) return;
+    this.viewKey = key2;
     const { width, height } = this.naturalSize;
     const view = legacyView(this.stack(), width, height, s.activeLayerId);
     s.adjustments = view.adjustments;
@@ -6000,7 +6487,7 @@ var ImageEditorController = class {
   getLayerFrame(id) {
     const layer = this.getLayer(id);
     if (!layer) return null;
-    const rect = (b2) => [
+    const rect2 = (b2) => [
       { x: b2.x, y: b2.y },
       { x: b2.x + b2.width, y: b2.y },
       { x: b2.x + b2.width, y: b2.y + b2.height },
@@ -6015,10 +6502,10 @@ var ImageEditorController = class {
     }
     if (layer.type === "shape") {
       const g = shapeGeometryBounds(layer);
-      return g ? rect(g) : null;
+      return g ? rect2(g) : null;
     }
     const b = this.getLayerBounds(id);
-    return b ? rect(b) : null;
+    return b ? rect2(b) : null;
   }
   /**
    * Hit-tests the layer stack at `point` (in document space) and returns the id of the topmost
@@ -6099,9 +6586,9 @@ var ImageEditorController = class {
    * and are left out): `rect` (default: the canvas) as RGBA, straight alpha. Crop, rotation and
    * output opacity are not applied. With `layerIds`, only those layers are composited.
    */
-  compositePixels(rect, options = {}) {
+  compositePixels(rect2, options = {}) {
     const { width, height } = this.naturalSize;
-    const r = rect ?? { x: 0, y: 0, width, height };
+    const r = rect2 ?? { x: 0, y: 0, width, height };
     let layers = this.state.layers;
     if (options.layerIds) {
       const keep = new Set(options.layerIds);
@@ -6125,12 +6612,12 @@ var ImageEditorController = class {
   nextSourceId = 1;
   /** Changes whenever the Background's source pixels can have changed. */
   sourceVersion() {
-    const key = this.samplePixelsOverride ? this.samplePixels : this.imageElement ?? this.samplePixels;
-    if (!key) return "0";
-    let id = this.sourceIds.get(key);
+    const key2 = this.samplePixelsOverride ? this.samplePixels : this.imageElement ?? this.samplePixels;
+    if (!key2) return "0";
+    let id = this.sourceIds.get(key2);
     if (!id) {
       id = this.nextSourceId++;
-      this.sourceIds.set(key, id);
+      this.sourceIds.set(key2, id);
     }
     return String(id);
   }
@@ -6572,8 +7059,8 @@ var ImageEditorController = class {
     this.state.activePathId = id;
     this.notify();
   }
-  commitPaths(next, active) {
-    this.recordHistory();
+  commitPaths(next, active, commitToHistory = true) {
+    if (commitToHistory) this.recordHistory();
     if (next.length) this.state.paths = next;
     else delete this.state.paths;
     if (active !== void 0) this.state.activePathId = active;
@@ -6609,6 +7096,64 @@ var ImageEditorController = class {
     this.commitPaths(this.getPaths().map((p) => p.id === id ? path : p));
     return path;
   }
+  /**
+   * What the path tools (Path Selection, Direct Selection, Pen) edit: the active path in the Paths
+   * panel, else the active layer when it is a shape, else the active layer's vector mask; null
+   * when there is none of these (the Pen then starts a new Work Path).
+   */
+  pathEditTarget() {
+    const id = this.state.activePathId;
+    if (id && this.getPath(id)) return { kind: "path", id };
+    const layer = this.getActiveLayer();
+    if (!layer) return null;
+    if (layer.type === "shape") return { kind: "shape", layerId: layer.id };
+    if (layer.vectorMask) return { kind: "vector-mask", layerId: layer.id };
+    return null;
+  }
+  /** The components a path tool target holds (document pixels). Throws for a target that is gone. */
+  getPathEditComponents(target) {
+    if (target.kind === "path") return this.requirePath(target.id).components;
+    if (target.kind === "shape") return requireShapeLayer(this.state.layers, target.layerId).components;
+    return this.requireVectorMask(target.layerId).vm.components;
+  }
+  /**
+   * Replaces a path tool target's components: one undo step, or none with `commitToHistory` false
+   * (the later moves of a drag whose first move recorded one). A component that still has its
+   * `live` shape is kept as given (drop `live` from one whose anchors changed); a shape layer keeps
+   * at least one component.
+   */
+  setPathEditComponents(target, components, commitToHistory = true) {
+    this.getPathEditComponents(target);
+    const next = components.map(
+      (c, i) => c.live ? { ...c } : this.componentFrom({ op: c.op, subpaths: c.subpaths.filter((sp) => sp.anchors.length) }, `components[${i}].`)
+    );
+    if (target.kind === "path") {
+      this.commitPaths(this.getPaths().map((p) => p.id === target.id ? { ...p, components: next } : p), void 0, commitToHistory);
+    } else if (target.kind === "shape") {
+      if (!next.length) throw new LayerOperationError("A shape needs at least one component; delete the layer instead (delete_layer).");
+      const { layers } = updateShapeLayer(this.state.layers, target.layerId, () => ({ components: next }), this.shapeEnv(), "edit its path");
+      this.commitLayers(layers, void 0, commitToHistory);
+    } else {
+      const { vm } = this.requireVectorMask(target.layerId);
+      this.commitLayers(mapLayer(this.state.layers, target.layerId, (l) => ({ ...l, vectorMask: { ...vm, components: next } })), void 0, commitToHistory);
+    }
+  }
+  /**
+   * The Pen with no path to add to: a new Work Path from `components` (replacing the last one,
+   * unless it was saved), made the active path. One undo step. Returns the path.
+   */
+  startWorkPath(components) {
+    const paths = this.getPaths();
+    const old = paths.find((p) => p.work);
+    const work = {
+      id: old?.id ?? newPathId(),
+      name: WORK_PATH_NAME,
+      components: components.map((c, i) => this.componentFrom({ op: c.op, subpaths: c.subpaths }, `components[${i}].`)),
+      work: true
+    };
+    this.commitPaths(old ? paths.map((p) => p === old ? work : p) : [...paths, work], work.id);
+    return work;
+  }
   /** Renames a path; renaming the Work Path saves it (Photoshop's Save Path). One undo step. */
   renamePath(id, name) {
     const old = this.requirePath(id);
@@ -7485,7 +8030,7 @@ var ImageEditorController = class {
     return this.getGlobalLight();
   }
   /** Composites `layers` (in isolation) over `rect` into a surface, loading depth maps first. */
-  async compositeToSurface(layers, rect) {
+  async compositeToSurface(layers, rect2) {
     const { width, height } = this.naturalSize;
     if (flattenLayers(layers).some((l) => l.type === "annotation" && l.visible) && !this.renderer.canRasterize()) {
       throw new LayerOperationError("Merging annotation layers needs a canvas (a browser); hide or delete them first, or merge in the browser.");
@@ -7494,20 +8039,20 @@ var ImageEditorController = class {
     const sources = this.renderer.compositorSources(width, height);
     const depth = this.bitDepth;
     if (depth !== 8) {
-      const samples = workingToSamples(compositeDeep(layers, rect, sources, depth), depth);
-      return surfaceFromDeepPixels({ width: rect.width, height: rect.height, data: samples }, 4, rect.x, rect.y);
+      const samples = workingToSamples(compositeDeep(layers, rect2, sources, depth), depth);
+      return surfaceFromDeepPixels({ width: rect2.width, height: rect2.height, data: samples }, 4, rect2.x, rect2.y);
     }
-    const data = new LayerCompositor().composite(layers, rect, sources);
-    return surfaceFromPixels({ width: rect.width, height: rect.height, data }, 4, rect.x, rect.y);
+    const data = new LayerCompositor().composite(layers, rect2, sources);
+    return surfaceFromPixels({ width: rect2.width, height: rect2.height, data }, 4, rect2.x, rect2.y);
   }
   /**
    * The composite of the layer stack at the document's bit depth (as `compositePixels`, no
    * canvas): 16-bit sRGB samples, or 32-bit linear float, over `rect` (default the canvas). At 8
    * bits, the 8-bit composite widened to 16 bits.
    */
-  compositeDeepPixels(rect) {
+  compositeDeepPixels(rect2) {
     const { width, height } = this.naturalSize;
-    const r = rect ?? { x: 0, y: 0, width, height };
+    const r = rect2 ?? { x: 0, y: 0, width, height };
     const depth = this.bitDepth;
     if (depth === 8) return { width: r.width, height: r.height, depth: 16, data: to16From8(this.compositePixels(r).data) };
     const data = workingToSamples(compositeDeep(this.state.layers, r, this.compositorSources(), depth), depth);
@@ -7545,12 +8090,12 @@ var ImageEditorController = class {
     if (!upper.visible) throw new LayerOperationError(`Layer "${upper.name || id}" is hidden; show it or delete it instead of merging.`);
     requireUnlocked(upper, "all", "merge it");
     requireUnlocked(lower, "pixels", "merge into it");
-    let rect = unionRect(this.paintBounds(lower), upper.type === "adjustment" ? null : this.paintBounds(upper)) ?? { x: 0, y: 0, width: 1, height: 1 };
+    let rect2 = unionRect(this.paintBounds(lower), upper.type === "adjustment" ? null : this.paintBounds(upper)) ?? { x: 0, y: 0, width: 1, height: 1 };
     const reach = Math.max(effectsMargin(lower.effects), upper.type === "adjustment" ? 0 : effectsMargin(upper.effects));
-    if (reach) rect = { x: rect.x - reach, y: rect.y - reach, width: rect.width + 2 * reach, height: rect.height + 2 * reach };
+    if (reach) rect2 = { x: rect2.x - reach, y: rect2.y - reach, width: rect2.width + 2 * reach, height: rect2.height + 2 * reach };
     const base = { ...lower, blend: "normal", opacity: 1 };
     delete base.clipped;
-    const surface = await this.compositeToSurface([base, upper], rect);
+    const surface = await this.compositeToSurface([base, upper], rect2);
     const merged = { ...lower, surface, offset: { x: 0, y: 0 } };
     delete merged.mask;
     delete merged.fillOpacity;
@@ -7632,9 +8177,9 @@ var ImageEditorController = class {
     if (!surface) return null;
     const ox = layer.type === "pixel" ? layer.offset.x : 0;
     const oy = layer.type === "pixel" ? layer.offset.y : 0;
-    const key = `${tw}x${th}:${ox},${oy}`;
+    const key2 = `${tw}x${th}:${ox},${oy}`;
     let byKey = this.thumbCache.get(surface);
-    const hit = byKey?.get(key);
+    const hit = byKey?.get(key2);
     if (hit) return hit;
     const out = new Uint8ClampedArray(tw * th * 4);
     for (let y = 0; y < th; y++) {
@@ -7654,7 +8199,7 @@ var ImageEditorController = class {
       byKey = /* @__PURE__ */ new Map();
       this.thumbCache.set(surface, byKey);
     }
-    byKey.set(key, thumb);
+    byKey.set(key2, thumb);
     return thumb;
   }
   /**
@@ -8249,27 +8794,27 @@ var ImageEditorController = class {
   copyPixels(options = {}) {
     const { width, height } = this.naturalSize;
     const sel = this.state.selection?.bounds ? this.state.selection : null;
-    const rect = sel?.bounds ?? { x: 0, y: 0, width, height };
+    const rect2 = sel?.bounds ?? { x: 0, y: 0, width, height };
     let data;
     if (options.merged) {
-      data = new Uint8ClampedArray(this.compositePixels(rect).data);
+      data = new Uint8ClampedArray(this.compositePixels(rect2).data);
     } else {
       const id = options.layerId ?? this.state.activeLayerId;
       if (!id) throw new LayerOperationError("No layer given and none is active; pass layerId, or merged: true to copy the visible image.");
       const layer = requireLayer(this.state.layers, id).layer;
       if (layer.type !== "pixel") throw new LayerOperationError(`Layer "${layer.name || id}" is not a pixel layer; copy merged, or rasterize it first.`);
-      data = readRegion(this.surfaceOf(layer), { x: rect.x - layer.offset.x, y: rect.y - layer.offset.y, width: rect.width, height: rect.height });
+      data = readRegion(this.surfaceOf(layer), { x: rect2.x - layer.offset.x, y: rect2.y - layer.offset.y, width: rect2.width, height: rect2.height });
     }
     if (sel) {
-      for (let y = 0; y < rect.height; y++) {
-        for (let x = 0; x < rect.width; x++) {
-          const k = sel.data[(rect.y + y) * sel.width + rect.x + x];
-          const p = (y * rect.width + x) * 4 + 3;
+      for (let y = 0; y < rect2.height; y++) {
+        for (let x = 0; x < rect2.width; x++) {
+          const k = sel.data[(rect2.y + y) * sel.width + rect2.x + x];
+          const p = (y * rect2.width + x) * 4 + 3;
           data[p] = Math.round(data[p] * k / 255);
         }
       }
     }
-    this.clipboard = { width: rect.width, height: rect.height, x: rect.x, y: rect.y, data };
+    this.clipboard = { width: rect2.width, height: rect2.height, x: rect2.x, y: rect2.y, data };
     return this.clipboard;
   }
   /** Edit › Cut: Copy, then clear the selected pixels, as one undo step. */
@@ -8753,8 +9298,8 @@ var ImageEditorController = class {
     if (!Number.isFinite(position) || at < 0 || at >= max) {
       throw new RangeError(`${orientation === "row" ? "y" : "x"} ${position} is outside the image (0..${max - 1}).`);
     }
-    const rect = orientation === "row" ? { x: 0, y: at, width, height: 1 } : { x: at, y: 0, width: 1, height };
-    return this.shapeCommand(rectSelection(width, height, rect, { antiAlias: false }), options);
+    const rect2 = orientation === "row" ? { x: 0, y: at, width, height: 1 } : { x: at, y: 0, width: 1, height };
+    return this.shapeCommand(rectSelection(width, height, rect2, { antiAlias: false }), options);
   }
   /** Select › Grow: adds connected pixels within `tolerance` of a selected colour (one undo step). */
   async growSelection(options = {}) {
@@ -8810,14 +9355,14 @@ var ImageEditorController = class {
     return this.setSelection(shaped, options.mode ?? "replace");
   }
   /** Rectangular marquee in natural image pixels. */
-  selectRect(rect, options = {}) {
+  selectRect(rect2, options = {}) {
     const { width, height } = this.naturalSize;
-    return this.shapeCommand(rectSelection(width, height, rect, options), options);
+    return this.shapeCommand(rectSelection(width, height, rect2, options), options);
   }
   /** Elliptical marquee inscribed in `rect`. */
-  selectEllipse(rect, options = {}) {
+  selectEllipse(rect2, options = {}) {
     const { width, height } = this.naturalSize;
-    return this.shapeCommand(ellipseSelection(width, height, rect, options), options);
+    return this.shapeCommand(ellipseSelection(width, height, rect2, options), options);
   }
   /** Lasso / polygonal lasso. */
   selectPolygon(points, options = {}) {
@@ -9540,6 +10085,44 @@ var ImageEditorController = class {
     if (!sel) return false;
     return this.setSelection(invert2 ? invertSelection(sel) : sel, mode);
   }
+  /**
+   * A measured report on a mask's edge (`inspect_mask_edge`): the selection (default), a layer's
+   * painted mask or its vector mask (its path, without density or feather). Halo and alignment are
+   * measured against the layer's own pixels for a pixel layer's masks, else the composite.
+   * Read-only. Throws for an empty selection or a layer without that mask.
+   */
+  inspectMaskEdge(target = "selection", options = {}) {
+    const { width, height } = this.naturalSize;
+    let mask;
+    let layer;
+    if (target === "selection") {
+      mask = this.getSelection();
+      if (!mask?.bounds) throw new LayerOperationError("Nothing is selected: make a selection first, or inspect a layer-mask or vector-mask with layerId.");
+    } else if (target === "layer-mask" || target === "vector-mask") {
+      if (!options.layerId) throw new LayerOperationError(`A ${target} needs layerId (see list_layers).`);
+      layer = this.getLayer(options.layerId);
+      if (!layer) throw new LayerOperationError(`There is no layer "${options.layerId}" (see list_layers).`);
+      if (target === "layer-mask") {
+        mask = this.layerMaskCoverage(layer.id);
+        if (!mask) throw new LayerOperationError(`Layer "${layer.name || layer.id}" has no painted mask; add one with add_layer_mask, or inspect its vector-mask.`);
+      } else {
+        const { vm } = this.requireVectorMask(layer.id);
+        mask = pathToSelection(vm.components, width, height, { fillRule: vm.fillRule });
+        if (vm.inverted) mask = invertSelection(mask);
+      }
+      if (!mask.bounds) throw new LayerOperationError(`The ${target} of "${layer.name || layer.id}" hides everything: there is no edge to inspect.`);
+    } else {
+      throw new LayerOperationError(`Unknown target "${String(target)}". Use selection, layer-mask or vector-mask.`);
+    }
+    const b = mask.bounds;
+    const x = Math.max(0, b.x - 8);
+    const y = Math.max(0, b.y - 8);
+    const region = { x, y, width: Math.min(width, b.x + b.width + 8) - x, height: Math.min(height, b.y + b.height + 8) - y };
+    const own = layer?.type === "pixel" ? this.getLayerPixels(layer.id) : null;
+    const image = own ?? { ...this.compositePixels(region), x: region.x, y: region.y };
+    const report = inspectMaskEdge(mask, image, options);
+    return { target, ...layer ? { layerId: layer.id } : {}, ...report };
+  }
   /** A layer's painted mask over the canvas as a selection mask; null without one (or for a depth mask). */
   layerMaskCoverage(layerId) {
     const layer = this.getLayer(layerId);
@@ -10036,15 +10619,15 @@ var ImageEditorController = class {
     let mask;
     if (!b || x1 <= x0 || y1 <= y0) mask = createSelectionMask(width, height);
     else {
-      const rect = { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
-      const rgba = readRegion(layer.surface, rect);
-      const bytes = new Uint8Array(rect.width * rect.height);
+      const rect2 = { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
+      const rgba = readRegion(layer.surface, rect2);
+      const bytes = new Uint8Array(rect2.width * rect2.height);
       const hard = init.antiAlias === false;
       for (let i = 0; i < bytes.length; i++) {
         const a = rgba[i * 4 + 3];
         bytes[i] = hard ? a >= 128 ? 255 : 0 : a;
       }
-      mask = selectionFromRegion(width, height, rect, bytes);
+      mask = selectionFromRegion(width, height, rect2, bytes);
     }
     if ((init.feather ?? 0) > 0 && mask.bounds) mask = modifySelection(mask, "feather", init.feather);
     return this.setSelection(mask.bounds ? mask : null, init.mode ?? "replace");
@@ -10403,8 +10986,8 @@ var ImageEditorController = class {
       delete content.mask;
       delete content.clipped;
       delete content.fillOpacity;
-      const rect = spatial ? canvas : this.getLayerBounds(id) ?? canvas;
-      const surface = await this.compositeToSurface([content], rect);
+      const rect2 = spatial ? canvas : this.getLayerBounds(id) ?? canvas;
+      const surface = await this.compositeToSurface([content], rect2);
       next = { ...layer, surface, offset: { x: 0, y: 0 } };
       delete next.filters;
       delete next.source;
@@ -10589,7 +11172,7 @@ var ImageEditorController = class {
     }
     if (src.colorSpace !== "rgb") throw new LayerOperationError("Colours are given as #rrggbb, so the source profile must be RGB.");
     const t = Transform.create(src, dst, { intent: options.intent ?? "relative", bpc: options.bpc ?? true });
-    const toLab = Transform.create(src, builtinProfile("lab-d50"), { intent: "relative", bpc: false });
+    const toLab2 = Transform.create(src, builtinProfile("lab-d50"), { intent: "relative", bpc: false });
     return colors.map((input) => {
       const m = /^#?([0-9a-f]{6})$/i.exec(input.trim());
       if (!m) throw new LayerOperationError(`Invalid colour "${input}"; use #rrggbb.`);
@@ -10599,7 +11182,7 @@ var ImageEditorController = class {
       t.eval(rgb, out);
       const values = Array.from(out.subarray(0, t.outputs), (v) => Math.round(Math.min(1, Math.max(0, v)) * 1e4) / 1e4);
       const l = new Float32Array(3);
-      toLab.eval(rgb, l);
+      toLab2.eval(rgb, l);
       const lab = [Math.round(l[0] * 1e4) / 100, Math.round((l[1] * 255 - 128) * 100) / 100, Math.round((l[2] * 255 - 128) * 100) / 100];
       const res = { input, values, lab };
       if (dst.colorSpace === "rgb") res.hex = `#${values.map((v) => Math.round(v * 255).toString(16).padStart(2, "0")).join("")}`;
@@ -12046,7 +12629,7 @@ function layersOf(args) {
   add2(args.layerId);
   add2(args.id);
   add2(args.target);
-  for (const key of ["ids", "layerIds"]) if (Array.isArray(args[key])) args[key].forEach(add2);
+  for (const key2 of ["ids", "layerIds"]) if (Array.isArray(args[key2])) args[key2].forEach(add2);
   return out.slice(0, 6);
 }
 function planImageToolPlayback(tool, args) {
@@ -12059,9 +12642,9 @@ function planImageToolPlayback(tool, args) {
   else if (box) steps.push({ type: "move", to: box.from }, { type: "press" }, { type: "drag", to: box.to }, { type: "release" });
   else if (num(args.x) && num(args.y)) steps.push({ type: "move", to: { x: args.x, y: args.y } }, { type: "press" }, { type: "release" });
   else if (tool === "set_adjustments" && args.values && typeof args.values === "object") {
-    for (const key of Object.keys(args.values).slice(0, 4)) {
-      const m = /^layers\.([^.]+)\.(.+)$/.exec(key);
-      steps.push({ type: "target", ref: m ? { kind: "control", id: m[2] } : { kind: "control", id: key } });
+    for (const key2 of Object.keys(args.values).slice(0, 4)) {
+      const m = /^layers\.([^.]+)\.(.+)$/.exec(key2);
+      steps.push({ type: "target", ref: m ? { kind: "control", id: m[2] } : { kind: "control", id: key2 } });
     }
   } else for (const id of layersOf(args)) steps.push({ type: "target", ref: { kind: IMAGE_PLAYBACK_KIND, id } });
   if (typeof args.text === "string" && args.text.trim()) {
@@ -12237,10 +12820,10 @@ function sampleOptions(args) {
   return { sampleMerged: args.sampleMerged === true, sample: args.sample ?? "composite" };
 }
 function rectOf(args) {
-  const rect = { x: num2(args.x, NaN), y: num2(args.y, NaN), width: num2(args.width, NaN), height: num2(args.height, NaN) };
-  if (![rect.x, rect.y, rect.width, rect.height].every(Number.isFinite)) throw new Error("Pass numeric x, y, width and height in natural image pixels.");
-  if (rect.width <= 0 || rect.height <= 0) throw new Error("width and height must be greater than 0.");
-  return rect;
+  const rect2 = { x: num2(args.x, NaN), y: num2(args.y, NaN), width: num2(args.width, NaN), height: num2(args.height, NaN) };
+  if (![rect2.x, rect2.y, rect2.width, rect2.height].every(Number.isFinite)) throw new Error("Pass numeric x, y, width and height in natural image pixels.");
+  if (rect2.width <= 0 || rect2.height <= 0) throw new Error("width and height must be greater than 0.");
+  return rect2;
 }
 function summary(controller) {
   const sel = controller.getSelection();
@@ -12271,6 +12854,26 @@ function createImageSelectionTools(controller) {
     annotations: { title: "Read the selection", readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false },
     handler: () => summary(controller)
   };
+  const inspectEdge = {
+    name: "inspect_mask_edge",
+    title: "Inspect a mask edge",
+    description: "Measures the edge of the selection (default), a layer's painted mask (layer-mask) or its vector mask (vector-mask), so you can check it without looking. Returns haloScore 0-1 (background colour left just inside the edge; worse above 0.35), edgeAlignment 0-1 (share of the edge on strong image edges; worse below 0.5), jaggedness (outline turning in radians per 100 px beyond what closing it needs; smooth outlines score under 3, worse above 15), softFraction 0-1 (share of edge pixels partly selected), holes and islands (count, total area, the 10 largest with bounds), worst (up to 5 regions with a reason, ready for capture_view rect) and issues (findings with a suggested fix; empty when clean). Measures a pixel layer's masks against its own pixels, otherwise the composite. Read-only: inspect, fix the issues, inspect again.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        target: { type: "string", enum: ["selection", "layer-mask", "vector-mask"], description: "What to inspect (default selection). layer-mask and vector-mask need layerId." },
+        layerId: { type: "string", description: "The layer whose mask to inspect (see list_layers); only with layer-mask or vector-mask." },
+        minArea: { type: "number", minimum: 1, maximum: 1e6, description: "Holes and islands smaller than this many pixels are left out (default 16)." }
+      },
+      additionalProperties: false
+    },
+    annotations: { title: "Inspect a mask edge", readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false },
+    handler: ({ target, layerId, minArea }) => {
+      const t = target ?? "selection";
+      if (t === "selection" && layerId !== void 0) throw new Error("layerId is only for target layer-mask or vector-mask; leave it out to inspect the selection.");
+      return controller.inspectMaskEdge(t, { layerId, minArea });
+    }
+  };
   const selectRegion = {
     name: "select_region",
     title: "Select a region",
@@ -12315,12 +12918,12 @@ function createImageSelectionTools(controller) {
           break;
         case "rect":
         case "ellipse": {
-          const rect = { x: num2(x, NaN), y: num2(y, NaN), width: num2(width, NaN), height: num2(height, NaN) };
-          if (![rect.x, rect.y, rect.width, rect.height].every(Number.isFinite)) {
+          const rect2 = { x: num2(x, NaN), y: num2(y, NaN), width: num2(width, NaN), height: num2(height, NaN) };
+          if (![rect2.x, rect2.y, rect2.width, rect2.height].every(Number.isFinite)) {
             throw new Error("rect and ellipse need numeric x, y, width and height.");
           }
-          if (shape === "rect") controller.selectRect(rect, opts);
-          else controller.selectEllipse(rect, opts);
+          if (shape === "rect") controller.selectRect(rect2, opts);
+          else controller.selectEllipse(rect2, opts);
           break;
         }
         case "polygon": {
@@ -12691,10 +13294,10 @@ function createImageSelectionTools(controller) {
     },
     annotations: { ...writeAnnotations("Object Selection"), openWorldHint: true },
     handler: async (args, context) => {
-      const rect = args.rect;
+      const rect2 = args.rect;
       const point = args.point;
-      if (!rect && !point) throw new Error("Pass rect (a box around the object) or point (a point on it).");
-      if (rect && point) throw new Error("Pass rect or point, not both.");
+      if (!rect2 && !point) throw new Error("Pass rect (a box around the object) or point (a point on it).");
+      if (rect2 && point) throw new Error("Pass rect or point, not both.");
       const options = {
         mode: parseSelectionMode(args.mode),
         sampleAllLayers: args.sampleAllLayers,
@@ -12702,7 +13305,7 @@ function createImageSelectionTools(controller) {
         useModel: args.useModel,
         signal: context?.signal
       };
-      const { method } = rect ? await controller.selectObject({ rect: { x: num2(rect.x, NaN), y: num2(rect.y, NaN), width: num2(rect.width, NaN), height: num2(rect.height, NaN) } }, options) : await controller.selectObject({ point: { x: num2(point.x, NaN), y: num2(point.y, NaN) } }, options);
+      const { method } = rect2 ? await controller.selectObject({ rect: { x: num2(rect2.x, NaN), y: num2(rect2.y, NaN), width: num2(rect2.width, NaN), height: num2(rect2.height, NaN) } }, options) : await controller.selectObject({ point: { x: num2(point.x, NaN), y: num2(point.y, NaN) } }, options);
       return { ...summary(controller), method };
     }
   };
@@ -13316,6 +13919,7 @@ function createImageSelectionTools(controller) {
   };
   return [
     getSelection,
+    inspectEdge,
     selectAll,
     deselect,
     invert2,
@@ -13454,7 +14058,7 @@ async function renderImageRegion(controller, request) {
   out.height = request.height;
   const context = out.getContext("2d");
   if (!context) throw new Error(NO_CANVAS);
-  const { rect } = request;
+  const { rect: rect2 } = request;
   context.imageSmoothingEnabled = request.scale < 1;
   if (request.format === "jpeg") {
     context.fillStyle = "#ffffff";
@@ -13462,22 +14066,22 @@ async function renderImageRegion(controller, request) {
   }
   const kx = view.width / state.imageDimensions.width;
   const ky = view.height / state.imageDimensions.height;
-  context.drawImage(view, rect.x * kx, rect.y * ky, rect.width * kx, rect.height * ky, 0, 0, out.width, out.height);
+  context.drawImage(view, rect2.x * kx, rect2.y * ky, rect2.width * kx, rect2.height * ky, 0, 0, out.width, out.height);
   if (request.includeOverlays) {
     const s = request.scale;
     const maskView = maskViewCanvas(controller, document);
-    if (maskView) context.drawImage(maskView, rect.x, rect.y, rect.width, rect.height, 0, 0, out.width, out.height);
+    if (maskView) context.drawImage(maskView, rect2.x, rect2.y, rect2.width, rect2.height, 0, 0, out.width, out.height);
     const selection = state.selection;
     if (selection?.bounds && selection.width === state.imageDimensions.width && selection.height === state.imageDimensions.height) {
       const shade = selectionShade(selection, document);
-      if (shade) context.drawImage(shade, rect.x, rect.y, rect.width, rect.height, 0, 0, out.width, out.height);
+      if (shade) context.drawImage(shade, rect2.x, rect2.y, rect2.width, rect2.height, 0, 0, out.width, out.height);
     }
     if (state.crop) {
       context.save();
       context.strokeStyle = "#ffd400";
       context.lineWidth = 2;
       context.setLineDash([6, 4]);
-      context.strokeRect((state.crop.x - rect.x) * s, (state.crop.y - rect.y) * s, state.crop.width * s, state.crop.height * s);
+      context.strokeRect((state.crop.x - rect2.x) * s, (state.crop.y - rect2.y) * s, state.crop.width * s, state.crop.height * s);
       context.restore();
     }
   }
@@ -14779,19 +15383,19 @@ var SelectionGesture = class {
     const { tool } = this.getOptions();
     if (tool === "quick") return null;
     if (tool === "lasso") return this.points.length > 1 ? this.points.slice() : null;
-    const rect = normalizeRect({
+    const rect2 = normalizeRect({
       x: this.start.x,
       y: this.start.y,
       width: this.current.x - this.start.x,
       height: this.current.y - this.start.y
     });
-    if (rect.width < 1 && rect.height < 1) return null;
-    if (tool === "ellipse") return ellipsePoints(rect);
+    if (rect2.width < 1 && rect2.height < 1) return null;
+    if (tool === "ellipse") return ellipsePoints(rect2);
     return [
-      { x: rect.x, y: rect.y },
-      { x: rect.x + rect.width, y: rect.y },
-      { x: rect.x + rect.width, y: rect.y + rect.height },
-      { x: rect.x, y: rect.y + rect.height }
+      { x: rect2.x, y: rect2.y },
+      { x: rect2.x + rect2.width, y: rect2.y },
+      { x: rect2.x + rect2.width, y: rect2.y + rect2.height },
+      { x: rect2.x, y: rect2.y + rect2.height }
     ];
   }
   /** Pointer down. Resolves once a wand click has been applied. */
@@ -14947,11 +15551,11 @@ var SelectionGesture = class {
     const options = this.getOptions();
     const mode = selectionModeFromModifiers(modifiers ?? this.modifiers, options.mode);
     if (options.tool === "object") {
-      const rect2 = normalizeRect({ x: this.start.x, y: this.start.y, width: this.current.x - this.start.x, height: this.current.y - this.start.y });
+      const rect3 = normalizeRect({ x: this.start.x, y: this.start.y, width: this.current.x - this.start.x, height: this.current.y - this.start.y });
       this.start = null;
       this.current = null;
       this.points = [];
-      const target = rect2.width >= 4 && rect2.height >= 4 ? { rect: rect2 } : { point: { x: rect2.x + rect2.width / 2, y: rect2.y + rect2.height / 2 } };
+      const target = rect3.width >= 4 && rect3.height >= 4 ? { rect: rect3 } : { point: { x: rect3.x + rect3.width / 2, y: rect3.y + rect3.height / 2 } };
       this.pending = this.controller.selectObject(target, { mode, sampleAllLayers: options.objectSampleAll ?? true, enhanceEdge: options.objectEnhance ?? false }).then(
         () => void 0,
         (err) => {
@@ -14981,7 +15585,7 @@ var SelectionGesture = class {
       return false;
     }
     const path = this.draftPath;
-    const rect = normalizeRect({
+    const rect2 = normalizeRect({
       x: this.start.x,
       y: this.start.y,
       width: this.current.x - this.start.x,
@@ -14993,7 +15597,7 @@ var SelectionGesture = class {
     if (!path) return mode === "replace" ? this.controller.deselect() : false;
     const opts = { mode, antiAlias: options.antiAlias, feather: options.feather ?? 0 };
     if (options.tool === "lasso") return path.length >= 3 ? this.controller.selectPolygon(path, opts) : false;
-    return options.tool === "ellipse" ? this.controller.selectEllipse(rect, opts) : this.controller.selectRect(rect, opts);
+    return options.tool === "ellipse" ? this.controller.selectEllipse(rect2, opts) : this.controller.selectRect(rect2, opts);
   }
   /** Closes a polygonal lasso and selects it. Returns true when the selection changed. */
   close() {
@@ -15017,11 +15621,11 @@ var SelectionGesture = class {
    * Keys for a polygonal lasso being drawn: Enter closes it, Escape cancels, Backspace / Delete
    * removes the last corner. Returns true when the key was used (the host prevents its default).
    */
-  key(key) {
+  key(key2) {
     if (!this.polygon && !this.magnetic) return false;
-    if (key === "Enter") this.close();
-    else if (key === "Escape") this.cancel();
-    else if (key === "Backspace" || key === "Delete") {
+    if (key2 === "Enter") this.close();
+    else if (key2 === "Escape") this.cancel();
+    else if (key2 === "Backspace" || key2 === "Delete") {
       const m = this.magnetic;
       if (m) {
         m.anchors.pop();
@@ -15121,7 +15725,7 @@ var SelectionGesture = class {
 };
 function handleSelectionShortcut(controller, e, onError) {
   if (!(e.ctrlKey || e.metaKey)) return false;
-  const key = e.key.toLowerCase();
+  const key2 = e.key.toLowerCase();
   const run = (fn) => {
     try {
       fn();
@@ -15130,11 +15734,11 @@ function handleSelectionShortcut(controller, e, onError) {
     }
     return true;
   };
-  if (key === "c") return run(() => controller.copyPixels({ merged: Boolean(e.shiftKey) }));
-  if (key === "x" && !e.shiftKey) return run(() => controller.cutPixels());
-  if (key === "v") return run(() => controller.pastePixels(e.shiftKey && e.altKey ? "into" : e.shiftKey ? "in-place" : "new-layer"));
-  if (key === "d") return run(() => e.shiftKey ? controller.reselect() : controller.deselect());
-  if (key === "i" && e.shiftKey) return run(() => controller.invertSelection());
+  if (key2 === "c") return run(() => controller.copyPixels({ merged: Boolean(e.shiftKey) }));
+  if (key2 === "x" && !e.shiftKey) return run(() => controller.cutPixels());
+  if (key2 === "v") return run(() => controller.pastePixels(e.shiftKey && e.altKey ? "into" : e.shiftKey ? "in-place" : "new-layer"));
+  if (key2 === "d") return run(() => e.shiftKey ? controller.reselect() : controller.deselect());
+  if (key2 === "i" && e.shiftKey) return run(() => controller.invertSelection());
   return false;
 }
 function handleMaskViewKey(controller, e) {
@@ -15284,14 +15888,14 @@ function handlePaintShortcut(controller, e) {
   if (e.ctrlKey || e.metaKey || e.altKey || isTyping(e.target)) return false;
   const brush = controller.getState().paint.brush;
   const set = (b) => controller.setPaintOptions({ brush: b });
-  const key = e.key;
+  const key2 = e.key;
   if (handleMaskViewKey(controller, e)) return true;
-  switch (key.toLowerCase()) {
+  switch (key2.toLowerCase()) {
     case "q":
       controller.setQuickMaskMode(!controller.quickMaskEditing);
       return true;
     case "b":
-      controller.setTool(e.shiftKey || key === "B" ? "mixer" : "brush");
+      controller.setTool(e.shiftKey || key2 === "B" ? "mixer" : "brush");
       return true;
     case "e":
       controller.setTool("eraser");
@@ -15303,11 +15907,11 @@ function handlePaintShortcut(controller, e) {
       controller.setTool("clone");
       return true;
     case "j":
-      controller.setTool(e.shiftKey || key === "J" ? controller.getState().activeTool === "heal" ? "spot-heal" : "heal" : "spot-heal");
+      controller.setTool(e.shiftKey || key2 === "J" ? controller.getState().activeTool === "heal" ? "spot-heal" : "heal" : "spot-heal");
       return true;
     case "o": {
       const cur = controller.getState().activeTool;
-      const next = e.shiftKey || key === "O" ? cur === "dodge" ? "burn" : cur === "burn" ? "sponge" : "dodge" : "dodge";
+      const next = e.shiftKey || key2 === "O" ? cur === "dodge" ? "burn" : cur === "burn" ? "sponge" : "dodge" : "dodge";
       controller.setTool(next);
       return true;
     }
@@ -15321,18 +15925,18 @@ function handlePaintShortcut(controller, e) {
       controller.swapPaintColors();
       return true;
   }
-  if (key === "[" || key === "{") {
-    if (e.shiftKey || key === "{") set({ hardness: Math.max(0, Math.round((brush.hardness - 0.25) * 4) / 4) });
+  if (key2 === "[" || key2 === "{") {
+    if (e.shiftKey || key2 === "{") set({ hardness: Math.max(0, Math.round((brush.hardness - 0.25) * 4) / 4) });
     else set({ size: Math.max(1, brush.size - sizeStep(brush.size - 1)) });
     return true;
   }
-  if (key === "]" || key === "}") {
-    if (e.shiftKey || key === "}") set({ hardness: Math.min(1, Math.round((brush.hardness + 0.25) * 4) / 4) });
+  if (key2 === "]" || key2 === "}") {
+    if (e.shiftKey || key2 === "}") set({ hardness: Math.min(1, Math.round((brush.hardness + 0.25) * 4) / 4) });
     else set({ size: Math.min(MAX_BRUSH_SIZE, brush.size + sizeStep(brush.size)) });
     return true;
   }
-  if (/^[0-9]$/.test(key) && isPaintTool(controller.getState().activeTool)) {
-    set({ opacity: key === "0" ? 1 : Number(key) / 10 });
+  if (/^[0-9]$/.test(key2) && isPaintTool(controller.getState().activeTool)) {
+    set({ opacity: key2 === "0" ? 1 : Number(key2) / 10 });
     return true;
   }
   return false;
@@ -18136,11 +18740,11 @@ function scalePixels(pixels, w, h) {
   return { width: w, height: h, data: out };
 }
 function scaleEdit(edit, s) {
-  const pt = (p) => ({ x: p.x * s, y: p.y * s });
+  const pt2 = (p) => ({ x: p.x * s, y: p.y * s });
   if (edit.kind === "object") {
-    return { ...edit, rect: edit.rect && { x: edit.rect.x * s, y: edit.rect.y * s, width: edit.rect.width * s, height: edit.rect.height * s }, point: edit.point && pt(edit.point) };
+    return { ...edit, rect: edit.rect && { x: edit.rect.x * s, y: edit.rect.y * s, width: edit.rect.width * s, height: edit.rect.height * s }, point: edit.point && pt2(edit.point) };
   }
-  const scaled = { ...edit, points: edit.points.map(pt) };
+  const scaled = { ...edit, points: edit.points.map(pt2) };
   if ("size" in edit && edit.size !== void 0) scaled.size = Math.max(1, edit.size * s);
   return scaled;
 }
@@ -18432,8 +19036,8 @@ var SelectAndMaskSession = class {
     if (!live || !this.dragStart) return;
     if (live.kind === "object") {
       const a = this.dragStart;
-      const rect = { x: Math.min(a.x, point.x), y: Math.min(a.y, point.y), width: Math.abs(point.x - a.x), height: Math.abs(point.y - a.y) };
-      this.live = rect.width >= 4 && rect.height >= 4 ? { kind: "object", rect, mode: live.mode } : { kind: "object", point: a, mode: live.mode };
+      const rect2 = { x: Math.min(a.x, point.x), y: Math.min(a.y, point.y), width: Math.abs(point.x - a.x), height: Math.abs(point.y - a.y) };
+      this.live = rect2.width >= 4 && rect2.height >= 4 ? { kind: "object", rect: rect2, mode: live.mode } : { kind: "object", point: a, mode: live.mode };
       return;
     }
     const last = live.points[live.points.length - 1];
@@ -18470,8 +19074,8 @@ var SelectAndMaskSession = class {
    * Show Original), J (Show Edge), P (Show Original), a tool letter, [ and ] (brush size).
    * Returns true when the key was used.
    */
-  handleKey(key) {
-    const k = key.toLowerCase();
+  handleKey(key2) {
+    const k = key2.toLowerCase();
     const view = SELECT_AND_MASK_VIEWS.find((v) => v.key === k);
     if (view) {
       this.update({ view: view.id });
@@ -18549,10 +19153,10 @@ function resolveMosaicRegionBounds(region, imgWidth, imgHeight) {
   if (x1 <= x0 || y1 <= y0) return null;
   return { x0, y0, x1, y1 };
 }
-function applyRegionMosaic(imageData, regions, blockSize = 12) {
+function applyRegionMosaic(imageData, regions2, blockSize = 12) {
   const { data, width, height } = imageData;
   const step = Math.max(2, Math.round(blockSize));
-  for (const region of regions) {
+  for (const region of regions2) {
     const bounds = resolveMosaicRegionBounds(region, width, height);
     if (!bounds) continue;
     const { x0, y0, x1, y1 } = bounds;
@@ -18594,10 +19198,10 @@ function applyRegionMosaic(imageData, regions, blockSize = 12) {
   }
   return imageData;
 }
-function applyRegionBlur(imageData, regions, radius = 10) {
+function applyRegionBlur(imageData, regions2, radius = 10) {
   const { data, width, height } = imageData;
   const rad = Math.max(1, Math.min(64, Math.round(radius)));
-  for (const region of regions) {
+  for (const region of regions2) {
     const bounds = resolveMosaicRegionBounds(region, width, height);
     if (!bounds) continue;
     const { x0, y0, x1, y1 } = bounds;
@@ -19148,9 +19752,9 @@ function gradientControls(prefix, g) {
     { key: `${prefix}.align`, label: "Align with layer", type: "checkbox", value: g.align }
   ];
 }
-var px = (key, label, value, max = 250) => ({ key, label, type: "range", min: 0, max, step: 1, value, unit: "px" });
-var pct = (key, label, value, min = 0, max = 1) => ({ key, label, type: "range", min, max, step: 0.01, value, percent: true, unit: "%" });
-var deg = (key, label, value, min = -180, max = 180) => ({ key, label, type: "range", min, max, step: 1, value, unit: "\xB0" });
+var px = (key2, label, value, max = 250) => ({ key: key2, label, type: "range", min: 0, max, step: 1, value, unit: "px" });
+var pct = (key2, label, value, min = 0, max = 1) => ({ key: key2, label, type: "range", min, max, step: 0.01, value, percent: true, unit: "%" });
+var deg = (key2, label, value, min = -180, max = 180) => ({ key: key2, label, type: "range", min, max, step: 1, value, unit: "\xB0" });
 function layerEffectControls(e, patterns = []) {
   const blended = e.kind === "bevel-emboss" ? [] : [
     { key: "blend", label: "Blend mode", type: "select", value: e.blend, options: BLENDS },
@@ -19235,8 +19839,8 @@ function fillOfType(current, type, patterns) {
   if (type === "pattern") return { type: "pattern", patternId: patterns[0]?.id ?? "checker", scale: 1 };
   return { type: "color", color: current.type === "color" ? current.color : "#000000" };
 }
-function effectControlChange(effect, key, value, patterns = []) {
-  const [top, ...rest] = key.split(".");
+function effectControlChange(effect, key2, value, patterns = []) {
+  const [top, ...rest] = key2.split(".");
   if (top === "fill" && rest[0] === "type") return { fill: fillOfType(effect.fill, String(value), patterns) };
   if (top === "patternId" && !rest.length) {
     const name = patternOptions(patterns).find((o) => o.value === value)?.label;
@@ -20088,7 +20692,9 @@ var IMAGE_TOOL_GROUPS = [
   { id: "focus", label: "Blur & Sharpen", tools: ["blur", "sharpen", "smudge"] },
   { id: "tone", label: "Dodge & Burn", tools: ["dodge", "burn", "sponge"] },
   { id: "shape", label: "Shape", tools: ["shape"] },
+  { id: "pen", label: "Pen", tools: ["path-pen"] },
   { id: "type", label: "Type", tools: ["type"] },
+  { id: "path-select", label: "Path Selection", tools: ["path-select", "direct-select"] },
   { id: "annotate", label: "Annotate", tools: ["pen", "line", "arrow", "rect", "circle"] }
 ];
 function imageToolGroup(tool) {
@@ -20099,7 +20705,10 @@ var OTHER_TOOL_LABELS = {
   crop: "Crop",
   shape: "Shape",
   type: "Type",
-  pen: "Pen",
+  "path-pen": "Pen",
+  "path-select": "Path Selection",
+  "direct-select": "Direct Selection",
+  pen: "Freehand",
   line: "Line",
   arrow: "Arrow",
   rect: "Rectangle",
@@ -20115,10 +20724,13 @@ var IMAGE_TOOL_SHORTCUTS = {
   select: "M",
   crop: "C",
   shape: "U",
-  type: "T"
+  type: "T",
+  "path-pen": "P",
+  "path-select": "A",
+  "direct-select": "Shift+A"
 };
-function imageToolForShortcut(key, shift = false) {
-  const shortcut = `${shift ? "Shift+" : ""}${key.toUpperCase()}`;
+function imageToolForShortcut(key2, shift = false) {
+  const shortcut = `${shift ? "Shift+" : ""}${key2.toUpperCase()}`;
   for (const group of IMAGE_TOOL_GROUPS) {
     for (const tool of group.tools) if (IMAGE_TOOL_SHORTCUTS[tool] === shortcut) return tool;
   }
@@ -20175,6 +20787,422 @@ function createImageEditorDocument(controller, options = {}) {
   });
 }
 
+// src/image-editor/path-edit.ts
+var PATH_EDIT_TOOLS = ["path-select", "direct-select", "path-pen"];
+function isPathEditTool(tool) {
+  return PATH_EDIT_TOOLS.includes(tool);
+}
+var key = (r) => `${r.component}:${r.subpath}:${r.anchor}`;
+var parseKey = (k) => {
+  const [component, subpath, anchor] = k.split(":").map(Number);
+  return { component, subpath, anchor };
+};
+var pt = (p) => ({ x: p.x, y: p.y });
+var cloneComponents = (cs) => cs.map((c) => ({ op: c.op, subpaths: c.subpaths.map((sp) => ({ anchors: sp.anchors.map(cloneAnchor), closed: sp.closed })), ...c.live ? { live: c.live } : {} }));
+var sameTarget = (a, b) => !!a && !!b && a.kind === b.kind && (a.kind === "path" ? a.id === b.id : a.layerId === b.layerId);
+var PathEditGesture = class {
+  constructor(controller) {
+    this.controller = controller;
+  }
+  controller;
+  /** Selected anchors, as `component:subpath:anchor` keys. */
+  selected = /* @__PURE__ */ new Set();
+  target = null;
+  drag = null;
+  /** The Pen's open subpath being drawn. */
+  drawing = null;
+  pointer = null;
+  scale = 1;
+  error = null;
+  /** Screen pixels per document pixel (the viewport projection's scale). */
+  setView(scale) {
+    if (scale > 0 && Number.isFinite(scale)) this.scale = scale;
+  }
+  get active() {
+    return this.drag !== null;
+  }
+  /** The anchors selected now (on the current target). */
+  get selection() {
+    return [...this.selected].map(parseKey);
+  }
+  /** True while the Pen has an open subpath it adds to. */
+  get isDrawing() {
+    return this.drawing !== null;
+  }
+  get tolerance() {
+    return 6 / this.scale;
+  }
+  /** The target's components, or null (and the selection dropped) when the target changed or is gone. */
+  components() {
+    const target = this.controller.pathEditTarget();
+    if (!sameTarget(target, this.target)) {
+      this.target = target;
+      this.selected.clear();
+      this.drawing = null;
+    }
+    if (!target) return null;
+    let cs;
+    try {
+      cs = this.controller.getPathEditComponents(target);
+    } catch {
+      return null;
+    }
+    for (const k of [...this.selected]) {
+      const r = parseKey(k);
+      if (!cs[r.component]?.subpaths[r.subpath]?.anchors[r.anchor]) this.selected.delete(k);
+    }
+    const d = this.drawing;
+    if (d && (!cs[d.component]?.subpaths[d.subpath] || cs[d.component].subpaths[d.subpath].closed)) this.drawing = null;
+    return cs;
+  }
+  anchorAt(cs, p) {
+    const tol = this.tolerance;
+    let best = null;
+    let bestD = tol;
+    cs.forEach(
+      (c, ci) => c.subpaths.forEach(
+        (sp, si) => sp.anchors.forEach((a, ai) => {
+          const d = Math.hypot(a.x - p.x, a.y - p.y);
+          if (d <= bestD) {
+            bestD = d;
+            best = { component: ci, subpath: si, anchor: ai };
+          }
+        })
+      )
+    );
+    return best;
+  }
+  /** A handle of a selected anchor near `p`. */
+  handleAt(cs, p) {
+    const tol = this.tolerance;
+    for (const r of this.selection) {
+      const a = cs[r.component].subpaths[r.subpath].anchors[r.anchor];
+      for (const side of ["out", "in"]) {
+        const h = a[side];
+        if (h && Math.hypot(h.x - p.x, h.y - p.y) <= tol) return { ref: r, side };
+      }
+    }
+    return null;
+  }
+  /** The segment near `p`: its first anchor (as `anchor`) and the parameter on it. */
+  segmentAt(cs, p) {
+    let best = null;
+    let bestD = this.tolerance;
+    cs.forEach(
+      (c, ci) => c.subpaths.forEach((sp, si) => {
+        for (let i = 0; i < subpathSegmentCount(sp); i++) {
+          const { t, distance } = segmentNearest(subpathSegment(sp, i), [p.x, p.y]);
+          if (distance <= bestD) {
+            bestD = distance;
+            best = { ref: { component: ci, subpath: si, anchor: i }, t };
+          }
+        }
+      })
+    );
+    return best;
+  }
+  /** The component under `p`: on its outline, or inside its fill. */
+  componentAt(cs, p) {
+    const seg = this.segmentAt(cs, p) ?? (this.anchorAt(cs, p) ? { ref: this.anchorAt(cs, p) } : null);
+    if (seg) return seg.ref.component;
+    for (let i = cs.length - 1; i >= 0; i--) {
+      const closed = cs[i].subpaths.filter((sp) => sp.anchors.length > 2);
+      if (closed.length && pointInBezierPath(subpathsToBezier(closed), [p.x, p.y])) return i;
+    }
+    return null;
+  }
+  selectComponent(cs, ci) {
+    cs[ci].subpaths.forEach((sp, si) => sp.anchors.forEach((_, ai) => this.selected.add(key({ component: ci, subpath: si, anchor: ai }))));
+  }
+  commit(cs, record) {
+    if (!this.target) return false;
+    try {
+      this.controller.setPathEditComponents(this.target, cs, record);
+      return true;
+    } catch (e) {
+      this.error = e instanceof Error ? e.message : String(e);
+      return false;
+    }
+  }
+  down(p, tool, mods = {}) {
+    this.error = null;
+    this.pointer = pt(p);
+    const cs = this.components();
+    if (tool === "path-pen") return this.penDown(cs, p, mods);
+    if (!cs) {
+      this.error = "There is no path to edit: pick a path in the Paths panel, a shape layer, or a layer with a vector mask (or draw one with the Pen).";
+      return;
+    }
+    if (tool === "path-select") {
+      const ci = this.componentAt(cs, p);
+      if (ci === null) {
+        this.drag = { kind: "marquee", start: pt(p), end: pt(p), keep: mods.shift ? new Set(this.selected) : /* @__PURE__ */ new Set() };
+        if (!mods.shift) this.selected.clear();
+        return;
+      }
+      const ref = { component: ci, subpath: 0, anchor: 0 };
+      if (!mods.shift && !this.selected.has(key(ref))) this.selected.clear();
+      this.selectComponent(cs, ci);
+      this.drag = { kind: "anchors", start: pt(p), base: cloneComponents(cs), moved: false };
+      return;
+    }
+    const handle = this.handleAt(cs, p);
+    if (handle) {
+      this.drag = { kind: "handle", ...handle, base: cloneComponents(cs), breakHandles: !!mods.alt, moved: false };
+      return;
+    }
+    const anchor = this.anchorAt(cs, p);
+    if (anchor) {
+      if (mods.alt) return this.convert(cs, anchor);
+      const k = key(anchor);
+      if (mods.shift) {
+        if (this.selected.has(k)) this.selected.delete(k);
+        else this.selected.add(k);
+      } else if (!this.selected.has(k)) {
+        this.selected.clear();
+        this.selected.add(k);
+      }
+      this.drag = { kind: "anchors", start: pt(p), base: cloneComponents(cs), moved: false };
+      return;
+    }
+    const seg = this.segmentAt(cs, p);
+    if (seg) {
+      if (!mods.shift) this.selected.clear();
+      this.drag = { kind: "segment", ...seg, base: cloneComponents(cs), moved: false };
+      return;
+    }
+    this.drag = { kind: "marquee", start: pt(p), end: pt(p), keep: mods.shift ? new Set(this.selected) : /* @__PURE__ */ new Set() };
+    if (!mods.shift) this.selected.clear();
+  }
+  /** Alt-click: a corner anchor becomes smooth, a smooth one a corner (one undo step). */
+  convert(cs, r) {
+    const next = cloneComponents(cs);
+    const c = next[r.component];
+    const sp = c.subpaths[r.subpath];
+    const a = sp.anchors[r.anchor];
+    const type = inferAnchorType(a) === "corner" && !a.in && !a.out ? "smooth" : "corner";
+    c.subpaths[r.subpath] = convertAnchor(sp, r.anchor, type);
+    delete c.live;
+    this.selected.clear();
+    this.selected.add(key(r));
+    this.commit(next, true);
+  }
+  penDown(cs, p, mods) {
+    const d = this.drawing;
+    if (cs && d) {
+      const next = cloneComponents(cs);
+      const c = next[d.component];
+      const sp = c.subpaths[d.subpath];
+      const first = sp.anchors[0];
+      delete c.live;
+      if (sp.anchors.length > 1 && Math.hypot(first.x - p.x, first.y - p.y) <= this.tolerance) {
+        sp.closed = true;
+        this.drawing = null;
+        const ref3 = { component: d.component, subpath: d.subpath, anchor: 0 };
+        if (this.commit(next, true)) this.drag = { kind: "pen", ref: ref3, base: next };
+        return;
+      }
+      sp.anchors.push({ x: p.x, y: p.y });
+      const ref2 = { component: d.component, subpath: d.subpath, anchor: sp.anchors.length - 1 };
+      this.selected = /* @__PURE__ */ new Set([key(ref2)]);
+      if (this.commit(next, true)) this.drag = { kind: "pen", ref: ref2, base: next };
+      return;
+    }
+    if (cs) {
+      const anchor = this.anchorAt(cs, p);
+      if (anchor && mods.alt) return this.convert(cs, anchor);
+      if (anchor) {
+        const next = cloneComponents(cs);
+        const c = next[anchor.component];
+        const sp = c.subpaths[anchor.subpath];
+        delete c.live;
+        c.subpaths[anchor.subpath] = sp.anchors.length > 2 ? removeAnchorsKeepingShape(sp, [anchor.anchor]) : removeAnchors(sp, [anchor.anchor]);
+        this.selected.clear();
+        this.commit(prune(next), true);
+        return;
+      }
+      const seg = this.segmentAt(cs, p);
+      if (seg) {
+        const next = cloneComponents(cs);
+        const c = next[seg.ref.component];
+        const { subpath, index } = insertAnchor(c.subpaths[seg.ref.subpath], seg.ref.anchor, seg.t);
+        c.subpaths[seg.ref.subpath] = subpath;
+        delete c.live;
+        this.selected = /* @__PURE__ */ new Set([key({ ...seg.ref, anchor: index })]);
+        this.commit(next, true);
+        return;
+      }
+    }
+    const start = { anchors: [{ x: p.x, y: p.y }], closed: false };
+    if (!this.target || !cs) {
+      try {
+        const path = this.controller.startWorkPath([{ op: "combine", subpaths: [start] }]);
+        this.target = { kind: "path", id: path.id };
+      } catch (e) {
+        this.error = e instanceof Error ? e.message : String(e);
+        return;
+      }
+      this.drawing = { component: 0, subpath: 0 };
+    } else {
+      const next = cloneComponents(cs);
+      if (!next.length) next.push({ op: "combine", subpaths: [] });
+      const ci = next.length - 1;
+      delete next[ci].live;
+      next[ci].subpaths.push(start);
+      if (!this.commit(next, true)) return;
+      this.drawing = { component: ci, subpath: next[ci].subpaths.length - 1 };
+    }
+    const ref = { component: this.drawing.component, subpath: this.drawing.subpath, anchor: 0 };
+    this.selected = /* @__PURE__ */ new Set([key(ref)]);
+    this.drag = { kind: "pen", ref, base: cloneComponents(this.controller.getPathEditComponents(this.target)) };
+  }
+  move(p, mods = {}) {
+    this.pointer = pt(p);
+    const g = this.drag;
+    if (!g) return;
+    if (g.kind === "marquee") {
+      g.end = pt(p);
+      const box = rect(g.start, g.end);
+      const cs = this.target ? this.controller.getPathEditComponents(this.target) : [];
+      this.selected = new Set(g.keep);
+      cs.forEach(
+        (c, ci) => c.subpaths.forEach(
+          (sp, si) => sp.anchors.forEach((a, ai) => {
+            if (a.x >= box.x && a.x <= box.x + box.width && a.y >= box.y && a.y <= box.y + box.height) this.selected.add(key({ component: ci, subpath: si, anchor: ai }));
+          })
+        )
+      );
+      return;
+    }
+    const next = cloneComponents(g.base);
+    if (g.kind === "anchors") {
+      let dx = p.x - g.start.x;
+      let dy = p.y - g.start.y;
+      if (!g.moved && Math.hypot(dx, dy) < 1 / this.scale) return;
+      if (mods.shift) {
+        if (Math.abs(dx) > Math.abs(dy)) dy = 0;
+        else dx = 0;
+      }
+      for (const r of this.selection) {
+        const c = next[r.component];
+        c.subpaths[r.subpath].anchors[r.anchor] = translateAnchor(c.subpaths[r.subpath].anchors[r.anchor], dx, dy);
+        delete c.live;
+      }
+    } else if (g.kind === "handle") {
+      const c = next[g.ref.component];
+      const a = c.subpaths[g.ref.subpath].anchors[g.ref.anchor];
+      const typed = { ...a, type: a.type ?? inferAnchorType(a) };
+      const moved = moveAnchorHandle(typed, g.side, p, g.breakHandles);
+      delete moved.type;
+      c.subpaths[g.ref.subpath].anchors[g.ref.anchor] = moved;
+      delete c.live;
+    } else if (g.kind === "segment") {
+      const c = next[g.ref.component];
+      c.subpaths[g.ref.subpath] = bendSegment(c.subpaths[g.ref.subpath], g.ref.anchor, g.t, p);
+      delete c.live;
+    } else {
+      const c = next[g.ref.component];
+      const a = c.subpaths[g.ref.subpath].anchors[g.ref.anchor];
+      if (Math.hypot(p.x - a.x, p.y - a.y) < 1 / this.scale) return;
+      a.out = { x: p.x, y: p.y };
+      a.in = { x: 2 * a.x - p.x, y: 2 * a.y - p.y };
+      delete c.live;
+      this.commit(next, false);
+      return;
+    }
+    if (this.commit(next, !g.moved)) g.moved = true;
+  }
+  /** The pointer moving with no button down (the Pen's preview of its next segment). */
+  hover(p) {
+    this.pointer = pt(p);
+  }
+  up() {
+    this.drag = null;
+  }
+  /** Ends the Pen's subpath (left open). */
+  finish() {
+    this.drawing = null;
+    this.drag = null;
+  }
+  cancel() {
+    this.drag = null;
+    this.drawing = null;
+    this.selected.clear();
+  }
+  /**
+   * Keys: Delete / Backspace remove the selected anchors (one undo step), Enter and Escape end the
+   * Pen's subpath, Escape also deselects. Returns true when the key was handled.
+   */
+  key(k) {
+    if (k === "Enter" && this.drawing) {
+      this.finish();
+      return true;
+    }
+    if (k === "Escape") {
+      if (!this.drawing && !this.selected.size) return false;
+      this.drawing = null;
+      this.selected.clear();
+      return true;
+    }
+    if ((k === "Delete" || k === "Backspace") && this.selected.size && !this.drawing) {
+      const cs = this.components();
+      if (!cs) return false;
+      const next = cloneComponents(cs);
+      const bySub = /* @__PURE__ */ new Map();
+      for (const r of this.selection) {
+        const sk = `${r.component}:${r.subpath}`;
+        bySub.set(sk, [...bySub.get(sk) ?? [], r.anchor]);
+      }
+      for (const [sk, indices] of bySub) {
+        const [ci, si] = sk.split(":").map(Number);
+        next[ci].subpaths[si] = removeAnchors(next[ci].subpaths[si], indices);
+        delete next[ci].live;
+      }
+      this.selected.clear();
+      this.commit(prune(next), true);
+      return true;
+    }
+    return false;
+  }
+  /** What to draw (`RenderOptions.pathEdit`) for `tool`, or null when there is no target. */
+  overlay(tool) {
+    const cs = this.components();
+    if (!cs) return null;
+    const curves = [];
+    const anchors = [];
+    const handles = [];
+    const selectedComponents = new Set(this.selection.map((r) => r.component));
+    cs.forEach(
+      (c, ci) => c.subpaths.forEach((sp, si) => {
+        for (let i = 0; i < subpathSegmentCount(sp); i++) curves.push(subpathSegment(sp, i).map(([x, y]) => ({ x, y })));
+        sp.anchors.forEach((a, ai) => {
+          const selected = this.selected.has(key({ component: ci, subpath: si, anchor: ai }));
+          if (tool === "path-select" && !selectedComponents.has(ci)) return;
+          anchors.push({ point: pt(a), selected });
+          if (!selected || tool === "path-select") return;
+          for (const side of ["in", "out"]) if (a[side]) handles.push({ point: pt(a[side]), anchor: pt(a) });
+        });
+      })
+    );
+    let preview = null;
+    const d = this.drawing;
+    if (tool === "path-pen" && d && this.pointer && !this.drag) {
+      const sp = cs[d.component]?.subpaths[d.subpath];
+      const last = sp?.anchors[sp.anchors.length - 1];
+      if (last) preview = last.out ? [pt(last), pt(last.out), this.pointer, this.pointer] : [pt(last), this.pointer];
+    }
+    const marquee = this.drag?.kind === "marquee" ? rect(this.drag.start, this.drag.end) : null;
+    return { curves, anchors, handles, marquee, preview };
+  }
+};
+function rect(a, b) {
+  return { x: Math.min(a.x, b.x), y: Math.min(a.y, b.y), width: Math.abs(b.x - a.x), height: Math.abs(b.y - a.y) };
+}
+function prune(cs) {
+  for (const c of cs) c.subpaths = c.subpaths.filter((sp) => sp.anchors.length);
+  return cs.filter((c) => c.subpaths.length);
+}
+
 // src/image-editor/content-aware-fill-session.ts
 var CONTENT_AWARE_FILL_TOOLS = [
   { id: "sampling-brush", label: "Sampling Brush", key: "b" },
@@ -20466,8 +21494,8 @@ var ContentAwareFillSession = class _ContentAwareFillSession {
   /**
    * Keys: B, H, Z for the tools, [ and ] for the brush size. Returns true when the key was used.
    */
-  handleKey(key) {
-    const k = key.toLowerCase();
+  handleKey(key2) {
+    const k = key2.toLowerCase();
     const tool = CONTENT_AWARE_FILL_TOOLS.find((t) => t.key === k);
     if (tool) {
       this.update({ tool: tool.id });
@@ -20607,6 +21635,7 @@ export {
   LayerEffectError,
   LayerOperationError,
   MARCHING_ANTS_STEP_MS,
+  MASK_EDGE_THRESHOLDS,
   MASK_FILE_ACCEPT,
   MAX_BATCH,
   MAX_BRUSH_SIZE,
@@ -20646,6 +21675,7 @@ export {
   PARAM,
   PARAM_FLOATS,
   PASTE_MODES,
+  PATH_EDIT_TOOLS,
   PATTERN_BLOCK_KEYS,
   PIGMENT_BANDS,
   PIGMENT_CHANNELS,
@@ -20675,6 +21705,7 @@ export {
   PaintSourceError,
   PaintStrokeSession,
   PaperGrain,
+  PathEditGesture,
   PatternPlacement,
   PatternTile,
   PsdError,
@@ -21099,6 +22130,7 @@ export {
   inflateRaw,
   insertCurvePoint,
   insertLayer,
+  inspectMaskEdge,
   instancesOf,
   invertHomography,
   invertMatrix3,
@@ -21122,6 +22154,7 @@ export {
   isPaintTool,
   isPaintableLayer,
   isPainterlyBlendMode,
+  isPathEditTool,
   isPng,
   isQuarterTurn,
   isQuarterTurnSwapped,