@pixerate/editor 0.211.0 → 0.213.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);
     }
@@ -2547,12 +2617,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 +2661,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 +2759,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 +2771,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];
@@ -3885,29 +3955,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 +3998,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 +4626,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 +4719,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 +4746,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 +4769,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 +4786,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 +4872,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 +4898,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 +4924,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,12 +4955,12 @@ 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;
@@ -4899,35 +4969,35 @@ var PaintStrokeSession = class {
     const regions = /* @__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 = regions.get(key2);
+        regions.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 regions) {
       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 +5014,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 +5052,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 +5741,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 +6070,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 +6085,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 +6169,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 +6195,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 +6642,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 +6679,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 +7613,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 +7622,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 +7673,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 +7760,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 +7782,7 @@ var ImageEditorController = class {
       byKey = /* @__PURE__ */ new Map();
       this.thumbCache.set(surface, byKey);
     }
-    byKey.set(key, thumb);
+    byKey.set(key2, thumb);
     return thumb;
   }
   /**
@@ -8139,7 +8267,9 @@ var ImageEditorController = class {
     if (!sel?.bounds) throw new LayerOperationError("Nothing is selected; select what to remove, then fill it.");
     if (this.bitDepth !== 8) throw new LayerOperationError("Content-Aware Fill works on 8-bit documents for now; set_bit_depth 8 first, or use spot_heal.");
     const output = options.output ?? "current";
-    if (output !== "current" && output !== "new-layer") throw new LayerOperationError(`Unknown output "${String(output)}"; use current or new-layer.`);
+    if (output !== "current" && output !== "new-layer" && output !== "duplicate-layer") {
+      throw new LayerOperationError(`Unknown output "${String(output)}"; use current, new-layer or duplicate-layer.`);
+    }
     const target = this.paintTarget(options.layerId, "pixels", "fill");
     const { width, height } = this.naturalSize;
     const b = sel.bounds;
@@ -8216,6 +8346,13 @@ var ImageEditorController = class {
     }
     const layerRect = { x: win.x - target.offset.x, y: win.y - target.offset.y, width: win.width, height: win.height };
     const surface = writeRegion(target.surface, layerRect, out);
+    if (output === "duplicate-layer") {
+      return this.asOneStep(() => {
+        const copy = this.duplicateLayer(target.id);
+        this.commitLayers(mapLayer(this.state.layers, copy, (l) => this.withSurface(l, "pixels", surface)));
+        return { layerId: copy, bounds: { ...b }, output };
+      });
+    }
     this.commitLayers(mapLayer(this.state.layers, target.id, (l) => this.withSurface(l, "pixels", surface)));
     return { layerId: target.id, bounds: { ...b }, output };
   }
@@ -8240,27 +8377,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. */
@@ -8744,8 +8881,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 = {}) {
@@ -8801,14 +8938,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 = {}) {
@@ -10027,15 +10164,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");
@@ -10394,8 +10531,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;
@@ -12037,7 +12174,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) {
@@ -12050,9 +12187,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()) {
@@ -12228,10 +12365,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();
@@ -12306,12 +12443,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": {
@@ -12682,10 +12819,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,
@@ -12693,7 +12830,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 };
     }
   };
@@ -13075,7 +13212,7 @@ function createImageSelectionTools(controller) {
     inputSchema: {
       type: "object",
       properties: {
-        output: { type: "string", enum: ["new-layer", "current"], description: "new-layer or current (default current)." },
+        output: { type: "string", enum: ["new-layer", "current", "duplicate-layer"], description: "new-layer (the fill alone on a layer above), current (into the layer) or duplicate-layer (into a copy of the layer, above it); default current." },
         sampleRadius: { type: "number", minimum: 32, maximum: 4e3, description: "Sample within this many pixels of the selection (default its larger side)." },
         seed: { type: "integer", minimum: 0, description: "Random seed; another seed gives another fill to choose from (default 0)." },
         sampleRects: { type: "array", minItems: 1, items: rectSchemaStrict, description: "Sample only from these rectangles (natural image pixels), instead of the ring around the selection." },
@@ -13445,7 +13582,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";
@@ -13453,22 +13590,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();
     }
   }
@@ -14770,19 +14907,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. */
@@ -14938,11 +15075,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) => {
@@ -14972,7 +15109,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,
@@ -14984,7 +15121,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() {
@@ -15008,11 +15145,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();
@@ -15112,7 +15249,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();
@@ -15121,11 +15258,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) {
@@ -15275,14 +15412,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");
@@ -15294,11 +15431,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;
     }
@@ -15312,18 +15449,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;
@@ -18127,11 +18264,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;
 }
@@ -18423,8 +18560,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];
@@ -18461,8 +18598,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 });
@@ -19139,9 +19276,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 },
@@ -19226,8 +19363,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;
@@ -20079,7 +20216,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) {
@@ -20090,7 +20229,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",
@@ -20106,10 +20248,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;
   }
@@ -20166,6 +20311,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" },
@@ -20188,7 +20749,7 @@ var DEFAULT_CONTENT_AWARE_FILL_SETTINGS = {
   output: "new-layer",
   livePreview: true
 };
-var ContentAwareFillSession = class {
+var ContentAwareFillSession = class _ContentAwareFillSession {
   constructor(controller) {
     this.controller = controller;
   }
@@ -20224,16 +20785,21 @@ var ContentAwareFillSession = class {
     this.revision++;
     for (const l of this.listeners) l();
   }
+  /** Images up to this many pixels show (and can be sampled) whole in the workspace. */
+  static WHOLE_IMAGE_PIXELS = 4e6;
+  /** Room around the selection the window holds, in px each way. */
+  margin = 0;
   /**
-   * Reads the layer around the selection and makes the first preview. The window holds the
-   * selection and room around it to sample from (its larger side, at least 64 px, each way).
+   * Reads the layer and makes the first preview. The window is the whole image up to
+   * {@link WHOLE_IMAGE_PIXELS}; on a larger one it holds the selection and room around it (twice
+   * its larger side, at least 256 px, each way), and {@link expandView} widens it.
    */
   async open() {
     try {
-      const sel = this.controller.getSelection();
-      const b = sel?.bounds;
-      const margin = b ? Math.max(64, Math.max(b.width, b.height)) : 64;
-      this.plan = this.controller.prepareContentAwareFill({ sampleRadius: margin });
+      const { width, height } = this.controller.getState().imageDimensions;
+      const b = this.controller.getSelection()?.bounds;
+      this.margin = width * height <= _ContentAwareFillSession.WHOLE_IMAGE_PIXELS ? Math.max(width, height) : Math.max(256, 2 * Math.max(b?.width ?? 0, b?.height ?? 0));
+      this.plan = this.controller.prepareContentAwareFill({ sampleRadius: this.margin });
     } catch (err) {
       this.error = err instanceof Error ? err.message : String(err);
       this.emit();
@@ -20247,6 +20813,42 @@ var ContentAwareFillSession = class {
     await this.refresh();
     return true;
   }
+  /** Whether the window shows the whole image (else {@link expandView} can widen it). */
+  get showsWholeImage() {
+    const { width, height } = this.controller.getState().imageDimensions;
+    const w = this.win;
+    return !w || w.x === 0 && w.y === 0 && w.width >= width && w.height >= height;
+  }
+  /**
+   * Doubles the room around the selection (up to the whole image), keeping what was painted; a
+   * preset fills the new room as it would. Returns false when the whole image already shows.
+   */
+  expandView() {
+    if (!this.win || this.showsWholeImage) return false;
+    const { width, height } = this.controller.getState().imageDimensions;
+    const old = { win: this.win, area: this.area };
+    this.margin = Math.min(Math.max(width, height), this.margin * 2);
+    const plan = this.controller.prepareContentAwareFill({ layerId: this.plan.layerId, sampleRadius: this.margin });
+    this.plan = plan;
+    this.win = plan.window;
+    this.before = plan.before;
+    this.hole = plan.hole;
+    const mode = this.settingsValue.sampling;
+    this.area = null;
+    this.applySampling(mode === "custom" ? "auto" : mode);
+    if (mode === "custom") {
+      const area = new Uint8Array(plan.window.width * plan.window.height);
+      for (let y = 0; y < old.win.height; y++) {
+        const src = y * old.win.width;
+        const dst = (old.win.y - plan.window.y + y) * plan.window.width + (old.win.x - plan.window.x);
+        area.set(old.area.subarray(src, src + old.win.width), dst);
+      }
+      this.area = area;
+    }
+    this.emit();
+    if (this.settingsValue.livePreview) void this.refresh();
+    return true;
+  }
   /** Sets the area to a preset: Auto (a band around the selection), Rectangular (the whole window). */
   applySampling(mode) {
     const win = this.win;
@@ -20416,8 +21018,8 @@ var ContentAwareFillSession = class {
   /**
    * 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 });
@@ -20596,6 +21198,7 @@ export {
   PARAM,
   PARAM_FLOATS,
   PASTE_MODES,
+  PATH_EDIT_TOOLS,
   PATTERN_BLOCK_KEYS,
   PIGMENT_BANDS,
   PIGMENT_CHANNELS,
@@ -20625,6 +21228,7 @@ export {
   PaintSourceError,
   PaintStrokeSession,
   PaperGrain,
+  PathEditGesture,
   PatternPlacement,
   PatternTile,
   PsdError,
@@ -21072,6 +21676,7 @@ export {
   isPaintTool,
   isPaintableLayer,
   isPainterlyBlendMode,
+  isPathEditTool,
   isPng,
   isQuarterTurn,
   isQuarterTurnSwapped,