@pixerate/editor 0.209.0 → 0.211.0

package/dist/image-editor/index.js

@@ -52,7 +52,7 @@ import {
   workImage,
   workLuma,
   workPlanes
-} from "../chunk-DWYQPL2A.js";
+} from "../chunk-LQ5SALHK.js";
 import {
   ADJUSTMENT_KEYS,
   ADJUSTMENT_KINDS,
@@ -301,6 +301,7 @@ import {
   rasterizeCoverage,
   rasterizeSmartObject,
   readPsd,
+  readShapeComponents,
   referencePoint,
   removeAlpha,
   removeLayer,
@@ -401,7 +402,7 @@ import {
   writePsd,
   xyToTempTint,
   xyToUv
-} from "../chunk-KFIOEOCQ.js";
+} from "../chunk-W3TOZTL7.js";
 import {
   parseCssColor
 } from "../chunk-3CI7FRMK.js";
@@ -523,33 +524,35 @@ import {
   TransformedPixelSource,
   applyRetouchToTile,
   applyToneToDeepTile,
-  bestOffset,
   boxBlurPixels,
   cloneSamplePoint,
-  contentAwareFill,
-  dilateMask,
   dodgeBurn,
   dodgeBurnCurve,
   healPixels,
   isIdentityCloneTransform,
   luma,
-  maskBounds,
-  membraneFill,
   normalizeRetouch,
   perDabStrength,
   readSourceRegion,
   retouchFilter,
   rgbaViewOfGrey,
   saturationOf,
-  seamlessClone,
   smudgeEffect,
-  solveMembrane,
   sponge,
   spongeEffect,
   spotHealPixels,
   spotHealWindow,
   toneOf
-} from "../chunk-USQCKRZG.js";
+} from "../chunk-ZGJGSCUW.js";
+import {
+  bestOffset,
+  contentAwareFill,
+  dilateMask,
+  maskBounds,
+  membraneFill,
+  seamlessClone,
+  solveMembrane
+} from "../chunk-XI2NV5U7.js";
 import {
   BODY_SCATTER,
   DEFAULT_FLOW,
@@ -1475,8 +1478,9 @@ var ImageEditorRenderer = class {
       ctx.restore();
     }
     const { width: iw, height: ih } = state.imageDimensions;
-    const quickMaskSel = display === "quickMask" && state.quickMaskEditing && !state.selection?.bounds ? this.emptyMask(Math.round(iw), Math.round(ih)) : null;
-    if (state.selection?.bounds && display !== "none" || quickMaskSel || options.draftSelectionPath?.length) {
+    const shownSel = state.selectionPreview !== void 0 ? state.selectionPreview : state.selection;
+    const quickMaskSel = display === "quickMask" && state.quickMaskEditing && !shownSel?.bounds ? this.emptyMask(Math.round(iw), Math.round(ih)) : null;
+    if (shownSel?.bounds && display !== "none" || quickMaskSel || options.draftSelectionPath?.length) {
       ctx.save();
       try {
         applyImageProjectionToContext(ctx, projection);
@@ -1484,8 +1488,8 @@ var ImageEditorRenderer = class {
         ctx.rect(region.x, region.y, region.width, region.height);
         ctx.clip();
         if (quickMaskSel) this.drawQuickMask(ctx, quickMaskSel);
-        else if (state.selection?.bounds && display === "quickMask") this.drawQuickMask(ctx, state.selection);
-        else if (state.selection?.bounds && display === "ants") this.drawAnts(ctx, state.selection, projection.scale / u, options.antsOffset ?? 0);
+        else if (shownSel?.bounds && display === "quickMask") this.drawQuickMask(ctx, shownSel);
+        else if (shownSel?.bounds && display === "ants") this.drawAnts(ctx, shownSel, projection.scale / u, options.antsOffset ?? 0);
         if (options.draftSelectionPath?.length) this.drawDraftPath(ctx, options.draftSelectionPath, projection.scale / u);
       } catch {
       }
@@ -2859,6 +2863,58 @@ function magneticAnchorSpacing(frequency = 57) {
   return 8 + (100 - f);
 }
 
+// src/image-editor/paths.ts
+var WORK_PATH_NAME = "Work Path";
+var counter = 0;
+function newPathId() {
+  counter = (counter + 1) % 1e6;
+  return `path-${Date.now().toString(36)}-${counter.toString(36)}`;
+}
+function pathSvgData(path) {
+  return subpathsToSvgPath(path.components.flatMap((c) => c.subpaths));
+}
+function pathBounds(path) {
+  return vectorMaskBounds({ components: path.components });
+}
+function pathAnchorCount(path) {
+  return path.components.reduce((n, c) => n + c.subpaths.reduce((m, sp) => m + sp.anchors.length, 0), 0);
+}
+function serializePaths(paths) {
+  return paths.map((p) => ({
+    id: p.id,
+    name: p.name,
+    components: JSON.parse(JSON.stringify(p.components)),
+    ...p.fillRule === "evenodd" ? { fillRule: "evenodd" } : {},
+    ...p.work ? { work: true } : {}
+  }));
+}
+function readPaths(stored, problems = []) {
+  if (!Array.isArray(stored)) return [];
+  const out = [];
+  const ids = /* @__PURE__ */ new Set();
+  let work = false;
+  for (const [i, raw] of stored.entries()) {
+    const r = raw;
+    const name = typeof r?.name === "string" && r.name.trim() ? r.name.trim() : `Path ${i + 1}`;
+    try {
+      const components = readShapeComponents(r?.components);
+      let id = typeof r?.id === "string" && r.id ? r.id : newPathId();
+      if (ids.has(id)) id = newPathId();
+      ids.add(id);
+      const path = { id, name, components };
+      if (r?.fillRule === "evenodd") path.fillRule = "evenodd";
+      if (r?.work === true && !work) {
+        path.work = true;
+        work = true;
+      }
+      out.push(path);
+    } catch (err) {
+      problems.push(`Path "${name}" could not be read (${err instanceof Error ? err.message : String(err)}) and was left out.`);
+    }
+  }
+  return out;
+}
+
 // src/image-editor/layers/shape-type-ui.ts
 var DEFAULT_SHAPE_TOOL_OPTIONS = {
   kind: "rect",
@@ -5641,6 +5697,7 @@ var ImageEditorController = class {
       outputOpacity: s.outputOpacity,
       selection: s.selection ?? null,
       ...s.channels?.length ? { channels: s.channels } : {},
+      ...s.paths?.length ? { paths: s.paths } : {},
       source: {
         sourceUrl: s.sourceUrl,
         element: this.imageElement,
@@ -5678,6 +5735,9 @@ var ImageEditorController = class {
     s.selection = entry.selection;
     if (entry.channels?.length) s.channels = entry.channels;
     else delete s.channels;
+    if (entry.paths?.length) s.paths = entry.paths;
+    else delete s.paths;
+    if (s.activePathId && !s.paths?.some((p) => p.id === s.activePathId)) s.activePathId = null;
     if (this.imageElement !== entry.source.element && !this.samplePixelsOverride) this.samplePixels = null;
     this.imageElement = entry.source.element;
     s.sourceUrl = entry.source.sourceUrl;
@@ -6489,6 +6549,138 @@ var ImageEditorController = class {
     const mask = pathToSelection(components, width, height, { ...options, fillRule: path.fillRule ?? options.fillRule });
     return this.setSelection(mask, options.mode ?? "replace");
   }
+  // --- Document paths (the Paths panel) ---
+  /** The document's paths: saved paths and the Work Path, in panel order. */
+  getPaths() {
+    return this.state.paths ?? [];
+  }
+  getPath(id) {
+    return this.state.paths?.find((p) => p.id === id) ?? null;
+  }
+  requirePath(id) {
+    const path = this.getPath(id);
+    if (!path) {
+      const ids = this.getPaths().map((p) => `${p.id} (${p.name})`);
+      throw new LayerOperationError(`There is no path "${id}"; the paths are ${ids.join(", ") || "none (make a work path from a selection, or add one)"}.`);
+    }
+    return path;
+  }
+  /** Selects a path in the Paths panel (or none). View state: no undo step. */
+  setActivePath(id) {
+    if (id !== null) this.requirePath(id);
+    if ((this.state.activePathId ?? null) === id) return;
+    this.state.activePathId = id;
+    this.notify();
+  }
+  commitPaths(next, active) {
+    this.recordHistory();
+    if (next.length) this.state.paths = next;
+    else delete this.state.paths;
+    if (active !== void 0) this.state.activePathId = active;
+    else if (this.state.activePathId && !next.some((p) => p.id === this.state.activePathId)) this.state.activePathId = null;
+    this.notify();
+  }
+  /**
+   * Paths › Make Work Path: the selection's outline, traced, becomes the Work Path (replacing the
+   * last one, unless it was saved). One undo step. Returns the path.
+   */
+  makeWorkPath(options = {}) {
+    const subpaths = this.traceSelection(options);
+    const paths = this.getPaths();
+    const old = paths.find((p) => p.work);
+    const work = { id: old?.id ?? newPathId(), name: WORK_PATH_NAME, components: [{ op: "combine", subpaths }], fillRule: "evenodd", work: true };
+    this.commitPaths(old ? paths.map((p) => p === old ? work : p) : [...paths, work], work.id);
+    return work;
+  }
+  /** A new saved path from geometry (`shape`, `subpaths` or `components`). One undo step. */
+  addPath(input) {
+    const paths = this.getPaths();
+    const path = { id: newPathId(), name: input.name?.trim() || `Path ${paths.filter((p) => !p.work).length + 1}`, components: this.vectorMaskComponents(input) };
+    if (input.fillRule === "evenodd") path.fillRule = "evenodd";
+    this.commitPaths([...paths.filter((p) => !p.work), path, ...paths.filter((p) => p.work)], path.id);
+    return path;
+  }
+  /** Replaces a path's geometry (its name is kept). One undo step. */
+  setPathGeometry(id, input) {
+    const old = this.requirePath(id);
+    const path = { ...old, components: this.vectorMaskComponents(input) };
+    if (input.fillRule === "evenodd") path.fillRule = "evenodd";
+    else if (input.fillRule === "nonzero") delete path.fillRule;
+    this.commitPaths(this.getPaths().map((p) => p.id === id ? path : p));
+    return path;
+  }
+  /** Renames a path; renaming the Work Path saves it (Photoshop's Save Path). One undo step. */
+  renamePath(id, name) {
+    const old = this.requirePath(id);
+    const trimmed = name.trim();
+    if (!trimmed) throw new LayerOperationError("A path needs a name.");
+    const path = { ...old, name: trimmed };
+    delete path.work;
+    this.commitPaths(this.getPaths().map((p) => p.id === id ? path : p));
+    return path;
+  }
+  /** Duplicates a path as a saved path. One undo step. */
+  duplicatePath(id, name) {
+    const old = this.requirePath(id);
+    const copy = { ...old, id: newPathId(), name: name?.trim() || `${old.name} copy`, components: JSON.parse(JSON.stringify(old.components)) };
+    delete copy.work;
+    const paths = this.getPaths();
+    this.commitPaths([...paths.filter((p) => !p.work), copy, ...paths.filter((p) => p.work)], copy.id);
+    return copy;
+  }
+  /** Deletes a path. One undo step. */
+  deletePath(id) {
+    this.requirePath(id);
+    this.commitPaths(this.getPaths().filter((p) => p.id !== id));
+  }
+  /** The area a path fills over the image, as a selection mask. */
+  pathArea(path, options = {}) {
+    const { width, height } = this.naturalSize;
+    return pathToSelection(path.components, width, height, { ...options, fillRule: path.fillRule ?? options.fillRule });
+  }
+  /** Paths › Make Selection: loads a path as the selection, combined by `mode`. One undo step. */
+  loadPathAsSelection(id, options = {}) {
+    if (options.feather !== void 0 && !(options.feather >= 0 && options.feather <= 1e3)) throw new LayerOperationError("feather must be from 0 to 1000 px.");
+    return this.setSelection(this.pathArea(this.requirePath(id), options), options.mode ?? "replace");
+  }
+  /**
+   * Paths › Fill Path: fills the path's area on a pixel layer (default the active one) with a
+   * colour (default the foreground). The selection is not changed. One undo step.
+   */
+  fillPath(id, options = {}) {
+    const area = this.pathArea(this.requirePath(id));
+    if (!area.bounds) throw new LayerOperationError("The path encloses no area to fill.");
+    return this.withSelection(area, () => this.fillPixels({ ...options, useSelection: true }));
+  }
+  /**
+   * Paths › Stroke Path: strokes along the path's outline on a pixel layer (default the active
+   * one), `width` px wide and centred on it. The selection is not changed. One undo step.
+   */
+  strokePath(id, options) {
+    const area = this.pathArea(this.requirePath(id), { antiAlias: true });
+    if (!area.bounds) throw new LayerOperationError("The path encloses no area; stroke a closed path.");
+    return this.withSelection(area, () => this.strokeSelection({ ...options, location: "center" }));
+  }
+  /** Paths › Add Vector Mask: masks a layer (default the active one) with a document path. One undo step. */
+  addVectorMaskFromPath(pathId, layerId) {
+    const path = this.requirePath(pathId);
+    const id = layerId ?? this.state.activeLayerId;
+    if (!id) throw new LayerOperationError("No layer given and none is active; pass layerId (see list_layers).");
+    return this.addVectorMask(id, "path", { components: path.components.map((c) => ({ op: c.op, subpaths: c.subpaths })), ...path.fillRule ? { fillRule: path.fillRule } : {} });
+  }
+  /** Runs `fn` with `mask` as the selection, then puts the selection back, all as one undo step. */
+  withSelection(mask, fn) {
+    return this.asOneStep(() => {
+      const before = this.state.selection ?? null;
+      this.state.selection = mask;
+      try {
+        return fn();
+      } finally {
+        this.state.selection = before;
+        this.notify();
+      }
+    });
+  }
   /** Replaces a vector mask's path (its properties are kept). One undo step. Returns the vector mask. */
   setVectorMaskPath(id, path) {
     const { vm } = this.requireVectorMask(id);
@@ -7903,9 +8095,46 @@ var ImageEditorController = class {
    * (PatchMatch, as the Spot Healing Brush's content-aware mode), blended by the selection's
    * coverage. `output` `current` paints into the layer; `new-layer` puts the fill on a new layer
    * above it. Samples within `sampleRadius` px of the selection (default its larger side, at
-   * least 32). Deterministic for a `seed`. One undo step. 8-bit documents only for now.
+   * least 32), or from the given sampling area. Deterministic for a `seed`. One undo step.
+   * 8-bit documents only for now. Runs here; see `contentAwareFillAsync` for the worker.
    */
   contentAwareFill(options = {}) {
+    const plan = this.prepareContentAwareFill(options);
+    const filled = contentAwareFill(plan.window.width, plan.window.height, 4, plan.before, plan.hole, { seed: options.seed ?? 0, exclude: plan.exclude });
+    return this.applyContentAwareFill(plan, Uint8ClampedArray.from(filled), options.output ?? "current");
+  }
+  /**
+   * `contentAwareFill` with the synthesis in the selection worker when there is one, with
+   * `signal` and `onProgress`. The layer is checked again before the result lands.
+   */
+  async contentAwareFillAsync(options = {}) {
+    const plan = this.prepareContentAwareFill(options);
+    const filled = await this.synthesiseFill(plan, options.seed ?? 0, options);
+    return this.applyContentAwareFill(plan, filled, options.output ?? "current");
+  }
+  /**
+   * The fill without changing anything: the window, its pixels before and after (RGBA, the fill
+   * blended by the selection's coverage) and the sampling area used, for a preview.
+   */
+  async previewContentAwareFill(options = {}) {
+    const plan = this.prepareContentAwareFill(options);
+    const filled = await this.synthesiseFill(plan, options.seed ?? 0, options);
+    return { plan, after: this.blendFill(plan, filled, "current") };
+  }
+  async synthesiseFill(plan, seed, options) {
+    const { width, height } = plan.window;
+    const { pixels } = await this.runSelectionJob(
+      { op: "fill", hole: plan.hole, exclude: plan.exclude, seed },
+      { width, height, data: plan.before },
+      options
+    );
+    return pixels;
+  }
+  /**
+   * Checks and gathers what a Content-Aware Fill needs: the selection, the 8-bit pixel layer, the
+   * window around the selection (and the sampling area), and which pixels it may copy from.
+   */
+  prepareContentAwareFill(options = {}) {
     const sel = this.state.selection;
     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.");
@@ -7914,33 +8143,70 @@ var ImageEditorController = class {
     const target = this.paintTarget(options.layerId, "pixels", "fill");
     const { width, height } = this.naturalSize;
     const b = sel.bounds;
-    const margin = Math.max(32, Math.round(options.sampleRadius ?? Math.max(b.width, b.height)));
-    const x0 = Math.max(0, b.x - margin);
-    const y0 = Math.max(0, b.y - margin);
-    const win = { x: x0, y: y0, width: Math.min(width, b.x + b.width + margin) - x0, height: Math.min(height, b.y + b.height + margin) - y0 };
-    if (win.width * win.height > 16e6) throw new LayerOperationError("The area to fill and sample is too large (over 16 MP); fill a smaller selection or lower sampleRadius.");
-    const layerRect = { x: win.x - target.offset.x, y: win.y - target.offset.y, width: win.width, height: win.height };
-    const before = readRegion(target.surface, layerRect);
-    const img = new Float32Array(before.length);
-    for (let i = 0; i < before.length; i++) img[i] = before[i];
-    const coverage = new Float32Array(win.width * win.height);
-    const hole = new Uint8Array(win.width * win.height);
+    let area = options.samplingArea ?? null;
+    if (!area && options.samplingChannelId) area = this.requireChannel(options.samplingChannelId).mask;
+    if (!area && options.sampleRects?.length) {
+      for (const r of options.sampleRects) area = combineSelections(area, rectSelection(width, height, r, { antiAlias: false }), "add");
+    }
+    if (area && !area.bounds) throw new LayerOperationError("The sampling area is empty; paint or give an area to sample from.");
+    let win;
+    if (area?.bounds) {
+      const a = area.bounds;
+      const x0 = Math.max(0, Math.min(b.x - 8, a.x));
+      const y0 = Math.max(0, Math.min(b.y - 8, a.y));
+      win = { x: x0, y: y0, width: Math.min(width, Math.max(b.x + b.width + 8, a.x + a.width)) - x0, height: Math.min(height, Math.max(b.y + b.height + 8, a.y + a.height)) - y0 };
+    } else {
+      const margin = Math.max(32, Math.round(options.sampleRadius ?? Math.max(b.width, b.height)));
+      const x0 = Math.max(0, b.x - margin);
+      const y0 = Math.max(0, b.y - margin);
+      win = { x: x0, y: y0, width: Math.min(width, b.x + b.width + margin) - x0, height: Math.min(height, b.y + b.height + margin) - y0 };
+    }
+    if (win.width * win.height > 16e6) throw new LayerOperationError("The area to fill and sample is too large (over 16 MP); fill a smaller selection or sample from a smaller area.");
+    const before = readRegion(target.surface, { x: win.x - target.offset.x, y: win.y - target.offset.y, width: win.width, height: win.height });
+    const n = win.width * win.height;
+    const coverage = new Uint8Array(n);
+    const hole = new Uint8Array(n);
+    const selData = sel.data;
     for (let y = 0; y < win.height; y++) {
       for (let x = 0; x < win.width; x++) {
-        const c = sel.data[(win.y + y) * sel.width + win.x + x] / 255;
+        const c = selData[(win.y + y) * sel.width + win.x + x];
         coverage[y * win.width + x] = c;
         hole[y * win.width + x] = c > 0 ? 1 : 0;
       }
     }
-    const filled = contentAwareFill(win.width, win.height, 4, img, hole, { seed: options.seed ?? 0 });
+    let exclude = null;
+    if (area || options.excludeRects?.length) {
+      exclude = new Uint8Array(n);
+      if (area) {
+        const ad = area.data;
+        for (let y = 0; y < win.height; y++) for (let x = 0; x < win.width; x++) if (ad[(win.y + y) * width + win.x + x] < 128) exclude[y * win.width + x] = 1;
+      }
+      for (const r of options.excludeRects ?? []) {
+        for (let y = Math.max(0, Math.floor(r.y) - win.y); y < Math.min(win.height, Math.ceil(r.y + r.height) - win.y); y++) {
+          for (let x = Math.max(0, Math.floor(r.x) - win.x); x < Math.min(win.width, Math.ceil(r.x + r.width) - win.x); x++) exclude[y * win.width + x] = 1;
+        }
+      }
+    }
+    return { layerId: target.id, window: win, bounds: { ...b }, before, hole, coverage, exclude };
+  }
+  /** The window's pixels with `filled` blended in by the coverage (`current`), or the fill alone, its alpha by the coverage (`new-layer`). */
+  blendFill(plan, filled, output) {
+    const { before, coverage } = plan;
     const out = new Uint8ClampedArray(before.length);
     for (let i = 0; i < coverage.length; i++) {
-      const k = coverage[i];
+      const k = coverage[i] / 255;
       for (let c = 0; c < 4; c++) {
         const p = i * 4 + c;
         out[p] = output === "new-layer" ? c === 3 ? Math.round(filled[p] * k) : filled[p] : before[p] + (filled[p] - before[p]) * k;
       }
     }
+    return out;
+  }
+  /** Puts a computed fill into the document as one undo step. */
+  applyContentAwareFill(plan, filled, output) {
+    const target = this.paintTarget(plan.layerId, "pixels", "fill");
+    const { window: win, bounds: b } = plan;
+    const out = this.blendFill(plan, filled, output);
     if (output === "new-layer") {
       const crop = { x: b.x - win.x, y: b.y - win.y, width: b.width, height: b.height };
       const data = new Uint8ClampedArray(b.width * b.height * 4);
@@ -7948,6 +8214,7 @@ var ImageEditorController = class {
       const id = this.addPixelLayer({ name: "Content-Aware Fill", pixels: { width: b.width, height: b.height, data }, x: b.x, y: b.y, aboveId: target.id });
       return { layerId: id, bounds: { ...b }, output };
     }
+    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);
     this.commitLayers(mapLayer(this.state.layers, target.id, (l) => this.withSurface(l, "pixels", surface)));
     return { layerId: target.id, bounds: { ...b }, output };
@@ -8434,6 +8701,17 @@ var ImageEditorController = class {
     this.notify();
     return true;
   }
+  /**
+   * Shows `mask` in place of the selection while a gesture runs (Quick Selection as the brush
+   * moves; `null` shows nothing selected), or with `undefined` stops. View state only: no undo
+   * step, not saved.
+   */
+  setSelectionPreview(mask) {
+    if (this.state.selectionPreview === mask) return;
+    if (mask === void 0) delete this.state.selectionPreview;
+    else this.state.selectionPreview = mask;
+    this.notify();
+  }
   /** Select › All. */
   selectAll() {
     const { width, height } = this.naturalSize;
@@ -10405,6 +10683,10 @@ var ImageEditorController = class {
     }));
     if (psdChannels.length) s.channels = psdChannels;
     else delete s.channels;
+    const psdPaths = (result.paths ?? []).map((p) => ({ id: newPathId(), name: p.name, components: p.components, ...p.work ? { work: true } : {} }));
+    if (psdPaths.length) s.paths = psdPaths;
+    else delete s.paths;
+    s.activePathId = null;
     s.selectedAnnotationId = null;
     s.activeLayerId = defaultActiveLayerId(s.layers);
     s.activeTarget = "pixels";
@@ -10602,7 +10884,7 @@ var ImageEditorController = class {
       opacity: c.opacity,
       indicates: c.indicates
     }));
-    const result = exportPsd({ width, height, layers: prepared, merged, mergedDeep, resolution: this.psdResolution, patterns: this.state.patterns, globalLight: this.state.globalLight, depth, alphaChannels, ...color });
+    const result = exportPsd({ width, height, layers: prepared, merged, mergedDeep, resolution: this.psdResolution, patterns: this.state.patterns, globalLight: this.state.globalLight, depth, alphaChannels, paths: this.getPaths(), ...color });
     warnings.push(...result.warnings);
     return { bytes: result.bytes, warnings, psb: result.psb, width, height };
   }
@@ -10676,6 +10958,7 @@ var ImageEditorController = class {
       out = this.serializeState();
       if (this.state.selection?.bounds) out.selection = serializeSelection(this.state.selection);
       if (this.state.channels?.length) out.channels = serializeChannels(this.state.channels);
+      if (this.state.paths?.length) out.paths = serializePaths(this.state.paths);
     } finally {
       if (root) {
         this.state = current;
@@ -10720,6 +11003,10 @@ var ImageEditorController = class {
     const channels = deserializeChannels(data.channels, this.naturalSize, problems);
     if (channels.length) this.state.channels = channels;
     else delete this.state.channels;
+    const paths = readPaths(data.paths, problems);
+    if (paths.length) this.state.paths = paths;
+    else delete this.state.paths;
+    this.state.activePathId = null;
     if (problems.length) this.lastLoadProblems = [...this.lastLoadProblems, ...problems];
     this.notify();
   }
@@ -11696,7 +11983,7 @@ var DEPTH_MASK_CONTROLS = [
 // src/image-editor/playback.ts
 var IMAGE_PLAYBACK_KIND = "layer";
 var PAINT = /^(paint_stroke|clone_stamp|heal_brush|spot_heal|dodge|burn|sponge|smudge|blur_stroke|sharpen_stroke|history_brush|set_clone_source|set_clone_transform|fill_pixels|clear_pixels|set_paint|set_retouch_options|load_mixer_brush|clean_mixer_brush)$/;
-var SELECT = /^(select_region|select_subject|select_by_color|select_all|deselect|invert_selection|select_rect|select_ellipse|select_polygon|quick_select|select_object|select_focus_area|select_sky|select_line|magic_wand|grow_selection|select_similar|reselect|select_layer_transparency|select_color_range|load_selection_from_image|load_selection_from_mask|set_selection_display|modify_selection|refine_selection|transform_selection|apply_selection_as_mask|layer_via_copy|stroke_selection|content_aware_fill|copy_pixels|cut_pixels|paste_pixels|save_selection|load_selection_from_channel|set_channel_properties|duplicate_channel|delete_channel|load_channel_from_image|set_quick_mask|path_to_selection|select_text_shape)$/;
+var SELECT = /^(make_work_path|add_path|set_path_geometry|rename_path|duplicate_path|delete_path|fill_path|stroke_path|select_region|select_subject|select_by_color|select_all|deselect|invert_selection|select_rect|select_ellipse|select_polygon|quick_select|select_object|select_focus_area|select_sky|select_line|magic_wand|grow_selection|select_similar|reselect|select_layer_transparency|select_color_range|load_selection_from_image|load_selection_from_mask|set_selection_display|modify_selection|refine_selection|transform_selection|apply_selection_as_mask|layer_via_copy|stroke_selection|content_aware_fill|copy_pixels|cut_pixels|paste_pixels|save_selection|load_selection_from_channel|set_channel_properties|duplicate_channel|delete_channel|load_channel_from_image|set_quick_mask|path_to_selection|select_text_shape)$/;
 var ANNOTATE = /^(add_shape_layer|update_shape|add_shape_component|set_shape_component|remove_shape_component|merge_shape_components|add_text_layer|set_text|set_text_style|set_paragraph_style|set_text_frame|set_text_orientation|convert_text_to_shape)$/;
 var CROP = /^(set_crop|crop_to_selection|reset_crop|set_rotation|flip_image|transform_layer|warp_layer|flip_layer|offset_layer)$/;
 var ADJUST = /^(set_adjustments|add_adjustment_layer|update_adjustment_layer|remove_adjustment_layer|move_adjustment_layer)$/;
@@ -11924,6 +12211,13 @@ var rectProperties = {
   width: { type: "number", exclusiveMinimum: 0, description: "Width in natural image pixels." },
   height: { type: "number", exclusiveMinimum: 0, description: "Height in natural image pixels." }
 };
+var rectSchemaStrict = {
+  type: "object",
+  properties: rectProperties,
+  required: ["x", "y", "width", "height"],
+  additionalProperties: false,
+  description: "A rectangle in natural image pixels."
+};
 function shapeOptions(args) {
   return { mode: parseSelectionMode(args.mode), feather: num2(args.feather, 0), antiAlias: args.antiAlias !== false };
 }
@@ -12777,25 +13071,33 @@ function createImageSelectionTools(controller) {
   const fillTool = {
     name: "content_aware_fill",
     title: "Content-Aware Fill",
-    description: "Edit \u203A Content-Aware Fill: removes what is selected by filling it with texture and edges synthesised from around it (on a pixel layer, default the active one). Select the object with a small margin (expand 2\u20134 px) first. output current paints into the layer; new-layer puts the fill on its own layer above it, so it can be masked or removed (recommended). sampleRadius limits where it samples from. Deterministic for a seed. 8-bit documents. One undo step. Returns the layer id and filled bounds.",
+    description: "Edit \u203A Content-Aware Fill: removes what is selected by filling it with texture and edges synthesised from around it (on a pixel layer, default the active one). Select the object with a small margin (expand 2\u20134 px) first. output current paints into the layer; new-layer puts the fill on its own layer above it, so it can be masked or removed (recommended). sampleRadius limits where it samples from; sampleRects (only these areas), samplingChannelId (a saved alpha channel) and excludeRects (never these, e.g. another object that would be copied in) set the sampling area as the Content-Aware Fill workspace does. Deterministic for a seed. 8-bit documents. One undo step. Returns the layer id and filled bounds.",
     inputSchema: {
       type: "object",
       properties: {
         output: { type: "string", enum: ["new-layer", "current"], description: "new-layer or current (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." },
+        excludeRects: { type: "array", minItems: 1, items: rectSchemaStrict, description: "Never sample from these rectangles (natural image pixels)." },
+        samplingChannelId: { type: "string", description: "Sample only where this alpha channel is selected (see list_channels)." },
         layerId: layerIdSchema
       },
       additionalProperties: false
     },
     annotations: writeAnnotations("Content-Aware Fill"),
-    handler: (args) => {
+    handler: async (args, context) => {
       if (!controller.getSelection()) throw new Error("Nothing is selected; select what to remove first.");
-      return controller.contentAwareFill({
+      const rects = (v) => Array.isArray(v) ? v.map((r) => ({ x: num2(r?.x, NaN), y: num2(r?.y, NaN), width: num2(r?.width, NaN), height: num2(r?.height, NaN) })) : void 0;
+      return controller.contentAwareFillAsync({
         output: args.output,
         sampleRadius: args.sampleRadius,
         seed: args.seed,
-        layerId: requireLayerId(args.layerId)
+        layerId: requireLayerId(args.layerId),
+        sampleRects: rects(args.sampleRects),
+        excludeRects: rects(args.excludeRects),
+        samplingChannelId: typeof args.samplingChannelId === "string" ? args.samplingChannelId : void 0,
+        signal: context?.signal
       });
     }
   };
@@ -14405,6 +14707,9 @@ var SelectionGesture = class {
   /** The last error (e.g. pixels unavailable for the wand), for the UI to show. */
   error = null;
   pending = Promise.resolve();
+  /** Quick Selection while dragging: the selection before the stroke, how the stroke combines, the pixels. */
+  quick = null;
+  livePreviews = Promise.resolve();
   get active() {
     return this.start !== null || this.polygon !== null || this.magnetic !== null;
   }
@@ -14412,6 +14717,46 @@ var SelectionGesture = class {
   get settled() {
     return this.pending;
   }
+  /** Resolves once no live Quick Selection preview is being computed. */
+  get previewed() {
+    return this.livePreviews;
+  }
+  /** Grows the Quick Selection preview to the stroke so far: one at a time, the newest points following. */
+  growPreview() {
+    const q = this.quick;
+    if (!q) return;
+    if (q.running) {
+      q.dirty = true;
+      return;
+    }
+    q.running = true;
+    this.livePreviews = (async () => {
+      do {
+        q.dirty = false;
+        const stroke = this.points.slice();
+        const options = this.getOptions();
+        try {
+          const pixels = await q.pixels;
+          if (!pixels || this.quick !== q) break;
+          const { mask } = await this.controller.runSelectionJob(
+            {
+              op: "quick",
+              stroke,
+              size: options.quickSize ?? 30,
+              grow: q.mode === "add",
+              enhanceEdge: options.quickEnhance ?? false,
+              selection: q.mode === "add" && q.base?.bounds ? serializeMask(q.base) : null
+            },
+            pixels
+          );
+          if (this.quick === q) this.controller.setSelectionPreview(combineSelections(q.base, mask, q.mode));
+        } catch {
+          break;
+        }
+      } while (q.dirty && this.quick === q);
+      q.running = false;
+    })();
+  }
   /** The anchors of a Magnetic Lasso being drawn (empty otherwise). */
   get magneticAnchors() {
     const m = this.magnetic;
@@ -14423,7 +14768,8 @@ var SelectionGesture = class {
     if (this.polygon) return this.current ? [...this.polygon, this.current] : this.polygon.slice();
     if (!this.start || !this.current) return null;
     const { tool } = this.getOptions();
-    if (tool === "lasso" || tool === "quick") return this.points.length > 1 ? this.points.slice() : null;
+    if (tool === "quick") return null;
+    if (tool === "lasso") return this.points.length > 1 ? this.points.slice() : null;
     const rect = normalizeRect({
       x: this.start.x,
       y: this.start.y,
@@ -14536,6 +14882,18 @@ var SelectionGesture = class {
     this.start = point;
     this.current = point;
     this.points = [point];
+    if (options.tool === "quick") {
+      const picked = selectionModeFromModifiers(modifiers, options.mode);
+      const base = this.controller.getSelection();
+      this.quick = {
+        base,
+        mode: picked === "replace" && base ? "add" : picked,
+        pixels: this.controller.getSamplePixels({ sample: options.quickSampleAll === false ? "active-layer" : "composite" }).catch(() => null),
+        running: false,
+        dirty: false
+      };
+      this.growPreview();
+    }
   }
   /** Pointer move; returns true when the draft changed (re-render). */
   move(point, modifiers = {}) {
@@ -14562,6 +14920,7 @@ var SelectionGesture = class {
       const last = this.points[this.points.length - 1];
       if (Math.hypot(point.x - last.x, point.y - last.y) < 0.5) return false;
       this.points.push(point);
+      if (drawn === "quick") this.growPreview();
     }
     return true;
   }
@@ -14597,7 +14956,8 @@ var SelectionGesture = class {
       this.start = null;
       this.current = null;
       this.points = [];
-      const strokeMode = mode === "replace" && this.controller.getSelection() ? "add" : mode;
+      const strokeMode = this.quick?.mode ?? (mode === "replace" && this.controller.getSelection() ? "add" : mode);
+      this.quick = null;
       this.pending = this.controller.quickSelect([stroke], {
         size: options.quickSize ?? 30,
         mode: strokeMode,
@@ -14608,7 +14968,7 @@ var SelectionGesture = class {
         (err) => {
           this.error = err instanceof Error ? err.message : String(err);
         }
-      );
+      ).finally(() => this.controller.setSelectionPreview(void 0));
       return false;
     }
     const path = this.draftPath;
@@ -14737,6 +15097,10 @@ var SelectionGesture = class {
   }
   /** Abandons a drag (or a polygonal lasso) without changing the selection. */
   cancel() {
+    if (this.quick) {
+      this.quick = null;
+      this.controller.setSelectionPreview(void 0);
+    }
     this.start = null;
     this.current = null;
     this.points = [];
@@ -16853,6 +17217,19 @@ function createImageShapeTools(controller) {
     fillRule: { type: "string", enum: ["nonzero", "evenodd"], description: "Winding rule within a component (default nonzero)." }
   };
   const LAYER = { type: "string", minLength: 1, description: "The layer (see list_layers). Not a shape layer: its path already is its vector mask." };
+  const PATH_ID = { type: "string", minLength: 1, description: "A document path id from list_paths." };
+  const fromPathId = (args) => {
+    if (args.pathId === void 0) return null;
+    const own = Object.keys(PATH_PROPS).filter((k) => args[k] !== void 0);
+    if (own.length) throw new Error(`Give pathId or ${own.join(" / ")}, not both.`);
+    const path = controller.getPath(String(args.pathId));
+    if (!path) throw new Error(`No path "${String(args.pathId)}". Call list_paths for ids.`);
+    return { components: path.components.map((c) => ({ op: c.op, subpaths: c.subpaths })), ...path.fillRule ? { fillRule: path.fillRule } : {} };
+  };
+  const pathSummary = (id) => {
+    const p = controller.getPath(id);
+    return { id: p.id, name: p.name, work: Boolean(p.work), fillRule: p.fillRule ?? "nonzero", anchors: pathAnchorCount(p), bounds: pathBounds(p) };
+  };
   const TRACE_PROPS = {
     tolerance: { type: "number", minimum: 0.1, maximum: 10, description: "How far (px) the path may stray from the selection edge (default 0.5; lower is tighter, more anchors)." },
     cornerRoundness: { type: "number", minimum: 0, maximum: 1, description: "0: straight sides and sharp corners; 1: as smooth as the outline allows (default 0.5)." },
@@ -16884,6 +17261,7 @@ function createImageShapeTools(controller) {
       type: "object",
       $defs: DEFS2,
       properties: {
+        pathId: { ...PATH_ID, description: "A document path from list_paths, instead of shape / subpaths / components." },
         ...PATH_PROPS,
         feather: { type: "number", minimum: 0, maximum: 1e3, description: "Feather radius in px (default 0)." },
         antiAlias: { type: "boolean", description: "Soft edges (default true); false makes every pixel fully in or out." },
@@ -16894,7 +17272,7 @@ function createImageShapeTools(controller) {
     annotations: { title: "Make a selection from a path", ...WRITE8 },
     handler: (args) => {
       const mode = args.mode;
-      controller.pathToSelection(pathSpec(args), { feather: args.feather, antiAlias: args.antiAlias, mode });
+      controller.pathToSelection(fromPathId(args) ?? pathSpec(args), { feather: args.feather, antiAlias: args.antiAlias, mode });
       const sel = controller.getSelection();
       return { empty: !sel, bounds: sel?.bounds ?? null, area: Math.round(sel ? selectionArea(sel) : 0) };
     }
@@ -16916,7 +17294,8 @@ function createImageShapeTools(controller) {
       $defs: DEFS2,
       properties: {
         layerId: LAYER,
-        from: { type: "string", enum: ["path", "selection", "reveal-all", "hide-all"], description: "path (default when a shape, subpaths or components are given), selection (trace the current selection), reveal-all or hide-all (an empty path)." },
+        from: { type: "string", enum: ["path", "selection", "reveal-all", "hide-all"], description: "path (default when a shape, subpaths, components or pathId are given), selection (trace the current selection), reveal-all or hide-all (an empty path)." },
+        pathId: { ...PATH_ID, description: "A document path from list_paths to use as the mask (Paths \u203A Add Vector Mask), instead of shape / subpaths / components." },
         ...PATH_PROPS,
         ...TRACE_PROPS
       },
@@ -16926,7 +17305,7 @@ function createImageShapeTools(controller) {
     annotations: { title: "Add a vector mask", ...WRITE8 },
     handler: (args) => {
       const id = layerArg(args.layerId);
-      const spec = pathSpec(args);
+      const spec = fromPathId(args) ?? pathSpec(args);
       const hasPath = spec.components?.length || spec.shape !== void 0 || spec.subpaths !== void 0;
       const from = args.from ?? (hasPath ? "path" : "reveal-all");
       if (from !== "selection" && TRACE_KEYS.some((k) => args[k] !== void 0)) throw new Error("tolerance, cornerRoundness and minArea apply only to from selection.");
@@ -16994,7 +17373,139 @@ function createImageShapeTools(controller) {
       return { layerId: id, vectorMask: null };
     }
   };
-  return [get, add2, update, setComponent, addComponent, removeComponent, merge, getVectorMask, addVectorMask, setVectorMaskPath, setVectorMaskProps, rasterizeVectorMask, removeVectorMask, selectionToPath, pathToSelection2];
+  const listPaths = {
+    name: "list_paths",
+    title: "List document paths",
+    description: "Paths panel: the document's saved paths and its Work Path (paths kept with the document, on no layer), each with id, name, work (true for the Work Path, which the next make_work_path replaces), fill rule, anchor count and bounds, and which is active. Use the ids with path_to_selection, add_vector_mask, fill_path, stroke_path and the other path tools.",
+    inputSchema: { type: "object", properties: {}, additionalProperties: false },
+    annotations: { title: "List document paths", ...READ10 },
+    handler: () => ({ paths: controller.getPaths().map((p) => pathSummary(p.id)), activePathId: controller.getState().activePathId ?? null })
+  };
+  const getPath2 = {
+    name: "get_path",
+    title: "Read a document path",
+    description: "Reads a document path: its summary, svg (compact SVG path data) and components (op, subpaths of anchors with handles, in document pixels), ready to edit and pass back to set_path_geometry.",
+    inputSchema: { type: "object", properties: { pathId: PATH_ID }, required: ["pathId"], additionalProperties: false },
+    annotations: { title: "Read a document path", ...READ10 },
+    handler: ({ pathId }) => {
+      const p = controller.getPath(String(pathId));
+      if (!p) throw new Error(`No path "${String(pathId)}". Call list_paths for ids.`);
+      return { path: { ...pathSummary(p.id), svg: pathSvgData(p), components: p.components } };
+    }
+  };
+  const makeWorkPath = {
+    name: "make_work_path",
+    title: "Make a work path from the selection",
+    description: "Paths \u203A Make Work Path: traces the selection's outline (within tolerance px) into the Work Path, replacing the last Work Path unless it was saved (rename_path saves it). Use it to keep a selection as an editable, resolution-independent outline. One undo step. Returns the path.",
+    inputSchema: { type: "object", properties: { ...TRACE_PROPS }, additionalProperties: false },
+    annotations: { title: "Make a work path from the selection", ...WRITE8 },
+    handler: (args) => ({ path: pathSummary(controller.makeWorkPath(traceOptions(args)).id) })
+  };
+  const addPath = {
+    name: "add_path",
+    title: "Add a document path",
+    description: "Adds a saved document path from a live shape, free subpaths or SVG path data, or components (document pixels), as add_shape_layer takes them. One undo step. Returns the path.",
+    inputSchema: {
+      type: "object",
+      $defs: DEFS2,
+      properties: { name: { type: "string", description: 'The path name (default "Path n").' }, ...PATH_PROPS },
+      additionalProperties: false
+    },
+    annotations: { title: "Add a document path", ...WRITE8 },
+    handler: (args) => {
+      const spec = pathSpec(args);
+      if (!spec.components?.length && spec.shape === void 0 && spec.subpaths === void 0) throw new Error("Give the path as shape, subpaths or components.");
+      return { path: pathSummary(controller.addPath({ ...spec, name: args.name }).id) };
+    }
+  };
+  const setPathGeometry = {
+    name: "set_path_geometry",
+    title: "Replace a document path",
+    description: "Replaces a document path's geometry (shape, subpaths or components, document pixels); its name is kept. Read it with get_path first to change part of it. One undo step. Returns the path.",
+    inputSchema: { type: "object", $defs: DEFS2, properties: { pathId: PATH_ID, ...PATH_PROPS }, required: ["pathId"], additionalProperties: false },
+    annotations: { title: "Replace a document path", ...WRITE_IDEMPOTENT5 },
+    handler: (args) => ({ path: pathSummary(controller.setPathGeometry(String(args.pathId), pathSpec(args)).id) })
+  };
+  const renamePath = {
+    name: "rename_path",
+    title: "Rename or save a path",
+    description: "Renames a document path. Renaming the Work Path saves it (Paths \u203A Save Path), so make_work_path no longer replaces it. One undo step. Returns the path.",
+    inputSchema: { type: "object", properties: { pathId: PATH_ID, name: { type: "string", minLength: 1, description: "The new name." } }, required: ["pathId", "name"], additionalProperties: false },
+    annotations: { title: "Rename or save a path", ...WRITE_IDEMPOTENT5 },
+    handler: ({ pathId, name }) => ({ path: pathSummary(controller.renamePath(String(pathId), String(name)).id) })
+  };
+  const duplicatePath = {
+    name: "duplicate_path",
+    title: "Duplicate a path",
+    description: 'Duplicates a document path as a saved path (default name "<name> copy"). One undo step. Returns the new path.',
+    inputSchema: { type: "object", properties: { pathId: PATH_ID, name: { type: "string", description: "The copy's name." } }, required: ["pathId"], additionalProperties: false },
+    annotations: { title: "Duplicate a path", ...WRITE8 },
+    handler: ({ pathId, name }) => ({ path: pathSummary(controller.duplicatePath(String(pathId), name).id) })
+  };
+  const deletePath = {
+    name: "delete_path",
+    title: "Delete a path",
+    description: "Deletes a document path (undo_image brings it back). Returns the remaining paths.",
+    inputSchema: { type: "object", properties: { pathId: PATH_ID }, required: ["pathId"], additionalProperties: false },
+    annotations: { title: "Delete a path", ...DESTRUCTIVE6 },
+    handler: ({ pathId }) => {
+      controller.deletePath(String(pathId));
+      return { paths: controller.getPaths().map((p) => pathSummary(p.id)) };
+    }
+  };
+  const PAINT_PROPS = {
+    layerId: { type: "string", description: "The pixel layer to paint on (default the active layer)." },
+    color: { type: "string", description: "A CSS colour such as #ff0000 (default the foreground colour)." },
+    opacity: { type: "number", minimum: 0, maximum: 1, description: "Opacity 0..1 (default 1)." }
+  };
+  const fillPath = {
+    name: "fill_path",
+    title: "Fill a path",
+    description: "Paths \u203A Fill Path: fills the area a document path encloses on a pixel layer with a colour. The selection is not changed. One undo step. Returns what was painted.",
+    inputSchema: { type: "object", properties: { pathId: PATH_ID, ...PAINT_PROPS }, required: ["pathId"], additionalProperties: false },
+    annotations: { title: "Fill a path", ...WRITE8 },
+    handler: (args) => controller.fillPath(String(args.pathId), { layerId: args.layerId, color: args.color, opacity: args.opacity })
+  };
+  const strokePath = {
+    name: "stroke_path",
+    title: "Stroke a path",
+    description: "Paths \u203A Stroke Path: strokes along a document path's outline on a pixel layer, width px wide and centred on it. The selection is not changed. One undo step. Returns what was painted.",
+    inputSchema: {
+      type: "object",
+      properties: { pathId: PATH_ID, width: { type: "number", exclusiveMinimum: 0, maximum: 250, description: "Stroke width in px." }, ...PAINT_PROPS },
+      required: ["pathId", "width"],
+      additionalProperties: false
+    },
+    annotations: { title: "Stroke a path", ...WRITE8 },
+    handler: (args) => controller.strokePath(String(args.pathId), { width: args.width, layerId: args.layerId, color: args.color, opacity: args.opacity })
+  };
+  return [
+    get,
+    add2,
+    update,
+    setComponent,
+    addComponent,
+    removeComponent,
+    merge,
+    getVectorMask,
+    addVectorMask,
+    setVectorMaskPath,
+    setVectorMaskProps,
+    rasterizeVectorMask,
+    removeVectorMask,
+    selectionToPath,
+    pathToSelection2,
+    listPaths,
+    getPath2,
+    makeWorkPath,
+    addPath,
+    setPathGeometry,
+    renamePath,
+    duplicatePath,
+    deletePath,
+    fillPath,
+    strokePath
+  ];
 }
 
 // src/image-editor/type-tools.ts
@@ -17641,6 +18152,9 @@ var SelectAndMaskSession = class {
   dragStart = null;
   pixels = null;
   previewPixels = null;
+  /** The layers below the active one, composited (On Layers shows them where nothing is selected). */
+  below = null;
+  belowPreview = null;
   base;
   previewMask = null;
   baseMask = null;
@@ -17672,10 +18186,24 @@ var SelectAndMaskSession = class {
       this.emit();
       return false;
     }
+    this.below = this.layersBelow();
     this.rescale();
     this.recompute();
     return true;
   }
+  /** The visible layers under the active one, composited at full size, or null when there are none. */
+  layersBelow() {
+    const active = this.controller.getState().activeLayerId;
+    const flat = flattenLayers(this.controller.getLayers()).filter((l) => l.type !== "group");
+    const at = flat.findIndex((l) => l.id === active);
+    const ids = (at > 0 ? flat.slice(0, at) : []).filter((l) => l.visible).map((l) => l.id);
+    if (!ids.length) return null;
+    try {
+      return this.controller.compositePixels(void 0, { layerIds: ids });
+    } catch {
+      return null;
+    }
+  }
   subscribe(listener) {
     this.listeners.add(listener);
     return () => this.listeners.delete(listener);
@@ -17708,6 +18236,7 @@ var SelectAndMaskSession = class {
     const w = Math.max(1, Math.round(px2.width * s));
     const h = Math.max(1, Math.round(px2.height * s));
     this.previewPixels = scalePixels(px2, w, h);
+    this.belowPreview = this.below ? scalePixels(this.below, w, h) : null;
     this.baseMask = this.base?.bounds ? s === 1 ? this.base : resizeSelection(this.base, w, h) : null;
   }
   /**
@@ -17831,6 +18360,20 @@ var SelectAndMaskSession = class {
           }
           break;
         }
+        case "on-layers": {
+          const under = this.belowPreview?.data;
+          let ur = checker;
+          let ug = checker;
+          let ub = checker;
+          if (under) {
+            const ua = under[p + 3] / 255;
+            ur = under[p] * ua + checker * (1 - ua);
+            ug = under[p + 1] * ua + checker * (1 - ua);
+            ub = under[p + 2] * ua + checker * (1 - ua);
+          }
+          o = [r + (ur - r) * hide, g + (ug - g) * hide, b + (ub - b) * hide];
+          break;
+        }
         default:
           o = [r + (checker - r) * hide, g + (checker - g) * hide, b + (checker - b) * hide];
       }
@@ -19622,6 +20165,278 @@ function createImageEditorDocument(controller, options = {}) {
     }
   });
 }
+
+// src/image-editor/content-aware-fill-session.ts
+var CONTENT_AWARE_FILL_TOOLS = [
+  { id: "sampling-brush", label: "Sampling Brush", key: "b" },
+  { id: "hand", label: "Hand", key: "h" },
+  { id: "zoom", label: "Zoom", key: "z" }
+];
+var CONTENT_AWARE_FILL_SAMPLING = [
+  { id: "auto", label: "Auto" },
+  { id: "rectangular", label: "Rectangular" },
+  { id: "custom", label: "Custom" }
+];
+var DEFAULT_CONTENT_AWARE_FILL_SETTINGS = {
+  sampling: "auto",
+  showSampling: true,
+  opacity: 0.5,
+  tool: "sampling-brush",
+  brushSize: 40,
+  brushMode: "add",
+  seed: 0,
+  output: "new-layer",
+  livePreview: true
+};
+var ContentAwareFillSession = class {
+  constructor(controller) {
+    this.controller = controller;
+  }
+  controller;
+  settingsValue = { ...DEFAULT_CONTENT_AWARE_FILL_SETTINGS };
+  plan = null;
+  /** The source view's window (document pixels): the selection with room around it to sample. */
+  win = null;
+  before = null;
+  hole = null;
+  /** 1 where the fill may copy from, per window pixel. */
+  area = null;
+  after = null;
+  lastPoint = null;
+  listeners = /* @__PURE__ */ new Set();
+  dirty = false;
+  /** Why the workspace can't fill (nothing selected, not a pixel layer), for the UI. */
+  error = null;
+  computing = false;
+  revision = 0;
+  get settings() {
+    return this.settingsValue;
+  }
+  /** The source view's window in document pixels (`null` until opened). */
+  get window() {
+    return this.win;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  emit() {
+    this.revision++;
+    for (const l of this.listeners) l();
+  }
+  /**
+   * 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).
+   */
+  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 });
+    } catch (err) {
+      this.error = err instanceof Error ? err.message : String(err);
+      this.emit();
+      return false;
+    }
+    this.win = this.plan.window;
+    this.before = this.plan.before;
+    this.hole = this.plan.hole;
+    this.applySampling("auto");
+    this.emit();
+    await 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;
+    const hole = this.hole;
+    const n = win.width * win.height;
+    const area = this.area && mode === "custom" ? this.area : new Uint8Array(n);
+    if (mode === "rectangular") {
+      for (let i = 0; i < n; i++) area[i] = hole[i] ? 0 : 1;
+    } else if (mode === "auto") {
+      const b = this.plan.bounds;
+      const reach = Math.max(24, Math.max(b.width, b.height) / 2);
+      const d = distanceTransform(hole, win.width, win.height);
+      for (let i = 0; i < n; i++) area[i] = !hole[i] && d[i] <= reach ? 1 : 0;
+    }
+    this.area = area;
+  }
+  /** Changes settings; a sampling preset replaces the area, and the preview follows when live. */
+  update(changes) {
+    const prev = this.settingsValue;
+    this.settingsValue = { ...prev, ...changes };
+    if (!this.win) {
+      this.emit();
+      return;
+    }
+    if (changes.sampling && changes.sampling !== prev.sampling && changes.sampling !== "custom") this.applySampling(changes.sampling);
+    this.emit();
+    const fillChanged = changes.sampling !== void 0 || changes.seed !== void 0;
+    if (fillChanged && this.settingsValue.livePreview) void this.refresh();
+  }
+  /** The sampling area as a selection of the whole image (what OK samples from). */
+  samplingMask() {
+    if (!this.win || !this.area) return null;
+    const { width, height } = this.controller.getState().imageDimensions;
+    const bytes = new Uint8Array(this.area.length);
+    for (let i = 0; i < bytes.length; i++) bytes[i] = this.area[i] ? 255 : 0;
+    return selectionFromRegion(width, height, this.win, bytes);
+  }
+  /** Whether (x, y) in document pixels is in the sampling area. */
+  samplesAt(x, y) {
+    const win = this.win;
+    if (!win || !this.area) return false;
+    const xi = Math.floor(x - win.x);
+    const yi = Math.floor(y - win.y);
+    if (xi < 0 || yi < 0 || xi >= win.width || yi >= win.height) return false;
+    return this.area[yi * win.width + xi] === 1;
+  }
+  /** Paints the sampling area with the brush along a stroke segment (document pixels). */
+  paint(from, to, add2) {
+    const win = this.win;
+    const area = this.area;
+    const hole = this.hole;
+    const r = Math.max(0.5, this.settingsValue.brushSize / 2);
+    const x0 = Math.max(0, Math.floor(Math.min(from.x, to.x) - r - win.x));
+    const y0 = Math.max(0, Math.floor(Math.min(from.y, to.y) - r - win.y));
+    const x1 = Math.min(win.width - 1, Math.ceil(Math.max(from.x, to.x) + r - win.x));
+    const y1 = Math.min(win.height - 1, Math.ceil(Math.max(from.y, to.y) + r - win.y));
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const len2 = dx * dx + dy * dy;
+    for (let y = y0; y <= y1; y++) {
+      for (let x = x0; x <= x1; x++) {
+        const px2 = win.x + x + 0.5 - from.x;
+        const py = win.y + y + 0.5 - from.y;
+        const t = len2 > 0 ? Math.min(1, Math.max(0, (px2 * dx + py * dy) / len2)) : 0;
+        if ((px2 - t * dx) ** 2 + (py - t * dy) ** 2 > r * r) continue;
+        const i = y * win.width + x;
+        area[i] = add2 && !hole[i] ? 1 : 0;
+      }
+    }
+  }
+  /** Pointer down with the Sampling Brush (Alt flips add and subtract). Returns false for other tools. */
+  begin(point, modifiers = {}) {
+    if (this.settingsValue.tool !== "sampling-brush" || !this.win) return false;
+    const add2 = this.settingsValue.brushMode === "add" !== Boolean(modifiers.altKey);
+    this.settingsValue = { ...this.settingsValue, sampling: "custom" };
+    this.lastPoint = point;
+    this.strokeAdds = add2;
+    this.paint(point, point, add2);
+    this.emit();
+    return true;
+  }
+  strokeAdds = true;
+  move(point) {
+    if (!this.lastPoint) return;
+    this.paint(this.lastPoint, point, this.strokeAdds);
+    this.lastPoint = point;
+    this.emit();
+  }
+  /** Pointer up: the preview follows the new area when live. */
+  end() {
+    if (!this.lastPoint) return;
+    this.lastPoint = null;
+    if (this.settingsValue.livePreview) void this.refresh();
+  }
+  /** Recomputes the preview: one at a time, the newest area following when one is running. */
+  async refresh() {
+    if (!this.win) return;
+    if (this.computing) {
+      this.dirty = true;
+      return;
+    }
+    this.computing = true;
+    this.emit();
+    do {
+      this.dirty = false;
+      try {
+        const area = this.samplingMask();
+        if (!area?.bounds) throw new Error("The sampling area is empty; paint where the fill may copy from.");
+        const { plan, after } = await this.controller.previewContentAwareFill({ layerId: this.plan.layerId, samplingArea: area, seed: this.settingsValue.seed });
+        const win = this.win;
+        const out = Uint8ClampedArray.from(this.before);
+        const pw = plan.window;
+        for (let y = 0; y < pw.height; y++) {
+          out.set(after.subarray(y * pw.width * 4, (y + 1) * pw.width * 4), ((pw.y - win.y + y) * win.width + (pw.x - win.x)) * 4);
+        }
+        this.after = out;
+        this.error = null;
+      } catch (err) {
+        this.after = null;
+        this.error = err instanceof Error ? err.message : String(err);
+      }
+      this.emit();
+    } while (this.dirty);
+    this.computing = false;
+    this.emit();
+  }
+  /** Resolves once no preview is being computed. */
+  async idle() {
+    while (this.computing) await new Promise((r) => setTimeout(r, 5));
+  }
+  /** The source view: the layer's pixels, the selection tinted red, the sampling area green. RGBA at the window's size. */
+  renderSource() {
+    if (!this.before || !this.area || !this.hole) return new Uint8ClampedArray(0);
+    const out = Uint8ClampedArray.from(this.before);
+    const k = this.settingsValue.showSampling ? Math.min(1, Math.max(0, this.settingsValue.opacity)) : 0;
+    for (let i = 0; i < this.area.length; i++) {
+      const p = i * 4;
+      if (this.hole[i]) {
+        out[p] = out[p] + (220 - out[p]) * 0.5;
+        out[p + 1] *= 0.5;
+        out[p + 2] *= 0.5;
+      } else if (this.area[i] && k) {
+        out[p] *= 1 - k;
+        out[p + 1] = out[p + 1] + (200 - out[p + 1]) * k;
+        out[p + 2] *= 1 - k;
+      }
+      out[p + 3] = 255;
+    }
+    return out;
+  }
+  /** The preview: the window with the fill in place (the source until the first preview). */
+  renderPreview() {
+    const src = this.after ?? this.before;
+    if (!src) return new Uint8ClampedArray(0);
+    const out = Uint8ClampedArray.from(src);
+    for (let i = 3; i < out.length; i += 4) out[i] = 255;
+    return out;
+  }
+  /** Clears painting and goes back to Auto. */
+  reset() {
+    if (!this.win) return;
+    this.settingsValue = { ...DEFAULT_CONTENT_AWARE_FILL_SETTINGS, tool: this.settingsValue.tool };
+    this.applySampling("auto");
+    this.emit();
+    if (this.settingsValue.livePreview) void this.refresh();
+  }
+  /**
+   * 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();
+    const tool = CONTENT_AWARE_FILL_TOOLS.find((t) => t.key === k);
+    if (tool) {
+      this.update({ tool: tool.id });
+      return true;
+    }
+    if (k === "[" || k === "]") {
+      const size = this.settingsValue.brushSize;
+      this.update({ brushSize: Math.max(1, Math.round(k === "]" ? size * 1.25 : size / 1.25)) });
+      return true;
+    }
+    return false;
+  }
+  /** OK: fills with this sampling area, seed and output as one undo step. */
+  async commit(options = {}) {
+    const area = this.samplingMask();
+    if (!this.plan || !area?.bounds) throw new Error(this.error ?? "The sampling area is empty; paint where the fill may copy from.");
+    return this.controller.contentAwareFillAsync({ layerId: this.plan.layerId, samplingArea: area, seed: this.settingsValue.seed, output: this.settingsValue.output, signal: options.signal });
+  }
+};
 export {
   ADJUSTMENT_KEYS,
   ADJUSTMENT_KINDS,
@@ -19647,7 +20462,10 @@ export {
   COLOR_MODE_OPTIONS,
   COLOR_RANGE_PRESETS,
   COLOR_RANGE_PRESET_LABELS,
+  CONTENT_AWARE_FILL_SAMPLING,
+  CONTENT_AWARE_FILL_TOOLS,
   ColorGmm,
+  ContentAwareFillSession,
   CoverageMap,
   D50,
   D65,
@@ -19657,6 +20475,7 @@ export {
   DEFAULT_BRUSH,
   DEFAULT_CANVAS_VIEWPORT,
   DEFAULT_CHANNEL_COLOR,
+  DEFAULT_CONTENT_AWARE_FILL_SETTINGS,
   DEFAULT_DEPTH_MASK,
   DEFAULT_FLOW,
   DEFAULT_GLOBAL_LIGHT,
@@ -19882,6 +20701,7 @@ export {
   WGSL_SHADE,
   WGSL_STEP,
   WORKING_SPACE_OPTIONS,
+  WORK_PATH_NAME,
   WORK_SIZE,
   WetGpuEngine,
   WetMedium,
@@ -20347,6 +21167,7 @@ export {
   newEffectId,
   newLayerId,
   newLayerOptions,
+  newPathId,
   normalizeAdjustmentLayer,
   normalizeAdjustmentLayers,
   normalizeAngle,
@@ -20403,8 +21224,11 @@ export {
   parseVersionedDescriptor,
   patchParagraphStyle,
   patchTextStyle,
+  pathAnchorCount,
+  pathBounds,
   pathStrokeCoverage,
   pathStrokeDabs,
+  pathSvgData,
   pathToSelection,
   perDabStrength,
   photoFilterMatrix,
@@ -20457,9 +21281,11 @@ export {
   readAdjustmentControls,
   readDeepRegion,
   readPaintSource,
+  readPaths,
   readPixel,
   readPsd,
   readRegion,
+  readShapeComponents,
   readSourceRegion,
   rectSelection,
   rectToQuad,
@@ -20548,6 +21374,7 @@ export {
   serializeLayers,
   serializeLayersExternal,
   serializeMask,
+  serializePaths,
   serializePatterns,
   serializeSelection,
   setCloneTransformValue,