@pixerate/editor 0.188.0 → 0.190.0

package/dist/image-editor/index.js

@@ -99,6 +99,7 @@ import {
   combineSelections,
   compileAdjustmentLayer,
   componentPath,
+  componentsCoverage,
   compositeDeep,
   computeSelectionBounds,
   contentsBox,
@@ -137,6 +138,7 @@ import {
   distanceTransform,
   documentContents,
   duplicateLayer,
+  effectiveLayerMask,
   encodeDeepSurface,
   encodeRle,
   encodeSelectionRle,
@@ -148,6 +150,7 @@ import {
   filterMaskCoverage,
   flattenPath,
   flipCorners,
+  followLayerMove,
   fullSelection,
   geometryHomography,
   getAnnotationBounds,
@@ -177,6 +180,7 @@ import {
   invertMatrix3,
   invertSelection,
   isActiveFilter,
+  isActiveVectorMask,
   isAdjustmentKind,
   isContentsDecoded,
   isDefaultDepthMask,
@@ -196,6 +200,7 @@ import {
   layerMaskCoverage,
   layerMaskFromSelection,
   layerMaskKey,
+  layerMaskSelection,
   layerName,
   layerTree,
   layerTypeLabel,
@@ -236,6 +241,7 @@ import {
   offsetLayer,
   offsetShape,
   offsetSmartObject,
+  offsetVectorMask,
   parseAdjustmentBlock,
   parseBlend,
   parseLfx2,
@@ -289,6 +295,7 @@ import {
   rerenderText,
   resizeSelection,
   resolveExternalAssets,
+  resolveVectorMasks,
   rgbToGray,
   rgbToHsl,
   runLayerFilters,
@@ -340,6 +347,7 @@ import {
   transformMap,
   transformShapeComponents,
   transformTypeLayer,
+  transformVectorMask,
   transformedBox,
   transformedPoint,
   translateLayer,
@@ -358,6 +366,9 @@ import {
   updateTypeLayer,
   userErrorMessage,
   uvToXy,
+  vectorMaskBounds,
+  vectorMaskCoverage,
+  vectorMaskThumbnail,
   versionedDescriptorBytes,
   vibranceLinear,
   vibrancePixel,
@@ -372,7 +383,7 @@ import {
   writePsd,
   xyToTempTint,
   xyToUv
-} from "../chunk-IGMNJM2H.js";
+} from "../chunk-7ZWLDVFH.js";
 import {
   parseCssColor
 } from "../chunk-3CI7FRMK.js";
@@ -1365,6 +1376,24 @@ var ImageEditorRenderer = class {
       }
       ctx.restore();
     }
+    const maskView = state.maskView;
+    if (maskView) {
+      const layer = flattenLayers(state.layers ?? []).find((l) => l.id === maskView.layerId);
+      const mask = layer ? this.maskViewSelection(layer, Math.round(state.imageDimensions.width), Math.round(state.imageDimensions.height)) : null;
+      if (mask) {
+        ctx.save();
+        try {
+          applyImageProjectionToContext(ctx, projection);
+          ctx.beginPath();
+          ctx.rect(region.x, region.y, region.width, region.height);
+          ctx.clip();
+          if (maskView.mode === "gray") this.drawMaskGray(ctx, mask);
+          else this.drawMaskOverlay(ctx, mask, { color: [255, 0, 0], opacity: 0.5, indicates: "masked" });
+        } catch {
+        }
+        ctx.restore();
+      }
+    }
     const display = options.selectionDisplay ?? state.selectionDisplay ?? (state.quickMask ? "quickMask" : "ants");
     const shownChannels = (state.channels ?? []).filter((c) => c.visible);
     if (shownChannels.length) {
@@ -1804,6 +1833,32 @@ var ImageEditorRenderer = class {
     return this.emptyMaskCache;
   }
   overlayCache = /* @__PURE__ */ new WeakMap();
+  maskViewCache = /* @__PURE__ */ new WeakMap();
+  grayCache = /* @__PURE__ */ new WeakMap();
+  /** 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 cached = this.maskViewCache.get(layer.mask.surface);
+    if (cached?.key === key) return cached.mask;
+    const mask = layerMaskSelection(layer, width, height);
+    if (mask) this.maskViewCache.set(layer.mask.surface, { key, mask });
+    return mask;
+  }
+  /** A mask alone in grey (white = revealed), opaque, drawn in natural image space. */
+  drawMaskGray(ctx, mask) {
+    let canvas = this.grayCache.get(mask);
+    if (!canvas) {
+      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(selectionToPixels(mask, "gray").data);
+      mctx.putImageData(img, 0, 0);
+      this.grayCache.set(mask, canvas);
+    }
+    ctx.drawImage(canvas, 0, 0, mask.width, mask.height);
+  }
   /** 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}`;
@@ -4119,6 +4174,24 @@ var FreeTransformSession = class {
   }
   /** Resamples every part for the current geometry and shows it (or returns it, for commit). */
   resample(final, preview = {}) {
+    const out = this.resampleContent(final, preview);
+    return { ...out, layers: this.moveVectorMask(out.layers) };
+  }
+  /** A linked vector mask follows the layer's content through the same document-space map. */
+  moveVectorMask(layers) {
+    const g = this.geometryValue;
+    if (!this.layerId || this.copyId || !this.moves.includes("pixels") || isIdentityTransform(g)) return layers;
+    const vm = findLayer(layers, this.layerId)?.layer.vectorMask;
+    if (!vm || vm.linked === false) return layers;
+    const warp = hasWarp(g);
+    const f = warp ? transformMap(g) : null;
+    const h = warp ? null : geometryHomography(g);
+    const affine = !warp && h && Math.abs(h[6]) < 1e-12 && Math.abs(h[7]) < 1e-12 && Math.abs(h[8] - 1) < 1e-12 ? [h[0], h[3], h[1], h[4], h[2], h[5]] : void 0;
+    const map = (p) => (f ? f(p) : h ? applyHomography(h, p) : p) ?? p;
+    const moved = transformVectorMask(vm, map, affine);
+    return mapLayer(layers, this.layerId, (l) => ({ ...l, vectorMask: moved }));
+  }
+  resampleContent(final, preview = {}) {
     if (this.smart) return { layers: this.resampleSmart(final, preview), selection: this.startSelection };
     if (this.typeTarget) return { layers: this.resampleType(), selection: this.startSelection };
     const g = this.geometryValue;
@@ -6122,6 +6195,7 @@ var ImageEditorController = class {
       let moved = { ...transformTypeLayer(layer, [1, 0, 0, 1, mx, my]), surface: translateSurface(layer.surface, mx, my) };
       const mask = layer.mask;
       if (mask && mask.linked !== false && !mask.source && (mx || my)) moved = { ...moved, mask: { ...mask, surface: translateSurface(mask.surface, mx, my) } };
+      moved = followLayerMove(moved, mx, my);
       this.commitLayers(mapLayer(this.state.layers, id, () => moved), void 0, commitToHistory);
       const t = moved.transform ?? [1, 0, 0, 1, 0, 0];
       return { offset: { x: Math.round(t[4]), y: Math.round(t[5]) }, bounds: this.getLayerBounds(id) };
@@ -6173,6 +6247,139 @@ var ImageEditorController = class {
       if (this.state.activeLayerId === id) this.state.activeTarget = "pixels";
     });
   }
+  // --- Vector masks ---
+  /** The layer for a vector mask command: not a shape layer (its path is its vector mask), not a depth-masked one. */
+  vectorMaskLayer(id) {
+    const layer = requireLayer(this.state.layers, id).layer;
+    const name = layer.name || id;
+    if (layer.type === "shape") throw new LayerOperationError(`Layer "${name}" is a shape layer, whose path already is its vector mask; change it with set_shape_component, or rasterize the layer first.`);
+    if (layer.mask?.source) throw new LayerOperationError(`Layer "${name}" has a depth mask, which cannot be combined with a vector mask; remove the depth mask first.`);
+    return layer;
+  }
+  requireVectorMask(id) {
+    const layer = this.vectorMaskLayer(id);
+    if (!layer.vectorMask) throw new LayerOperationError(`Layer "${layer.name || id}" has no vector mask; add one with add_vector_mask.`);
+    return { layer, vm: layer.vectorMask };
+  }
+  /** Components from a path spec: `components`, or one `shape` / `subpaths`. */
+  vectorMaskComponents(path) {
+    if (path.components?.length && (path.shape !== void 0 || path.subpaths !== void 0)) throw new LayerOperationError("Give components, or shape / subpaths, not both.");
+    if (path.fillRule !== void 0 && path.fillRule !== "nonzero" && path.fillRule !== "evenodd") throw new LayerOperationError("fillRule must be nonzero or evenodd.");
+    const specs = path.components?.length ? path.components : [path];
+    return specs.map((c, i) => this.componentFrom(c, path.components?.length ? `components[${i}].` : ""));
+  }
+  /**
+   * Layer › Vector Mask: `reveal-all` (an empty path showing everything), `hide-all` (an empty path
+   * hiding everything) or `path` (reveals inside the path given). Replaces an existing vector mask;
+   * the raster mask is kept and both apply. One undo step. Returns the vector mask.
+   */
+  addVectorMask(id, from = "reveal-all", path = {}) {
+    this.vectorMaskLayer(id);
+    let vm;
+    if (from === "path") {
+      vm = { components: this.vectorMaskComponents(path) };
+      if (path.fillRule === "evenodd") vm.fillRule = "evenodd";
+    } else if (from === "reveal-all" || from === "hide-all") {
+      if (path.components?.length || path.shape !== void 0 || path.subpaths !== void 0) throw new LayerOperationError(`A ${from} vector mask starts empty; use from path to give a path.`);
+      vm = { components: [], ...from === "reveal-all" ? { inverted: true } : {} };
+    } else {
+      throw new LayerOperationError(`Unknown vector mask source "${String(from)}". Use reveal-all, hide-all or path.`);
+    }
+    this.commitLayers(mapLayer(this.state.layers, id, (l) => ({ ...l, vectorMask: vm })));
+    return vm;
+  }
+  /** 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);
+    const next = { ...vm, components: this.vectorMaskComponents(path) };
+    if (path.fillRule === "evenodd") next.fillRule = "evenodd";
+    else if (path.fillRule === "nonzero") delete next.fillRule;
+    this.commitLayers(mapLayer(this.state.layers, id, (l) => ({ ...l, vectorMask: next })));
+    return next;
+  }
+  /** Changes a vector mask's enabled, linked, inverted, density or feather (the path is kept). One undo step. */
+  setVectorMaskProps(id, props) {
+    const { vm } = this.requireVectorMask(id);
+    if (props.density !== void 0 && !(props.density >= 0 && props.density <= 1)) throw new LayerOperationError("density must be from 0 to 1.");
+    if (props.feather !== void 0 && !(props.feather >= 0 && props.feather <= 1e3)) throw new LayerOperationError("feather must be from 0 to 1000 px.");
+    const next = { ...vm };
+    for (const k of ["enabled", "linked", "inverted"]) {
+      if (props[k] === void 0) continue;
+      if (typeof props[k] !== "boolean") throw new LayerOperationError(`${k} must be true or false.`);
+      if (k === "inverted" ? props[k] : !props[k]) next[k] = k === "inverted";
+      else delete next[k];
+    }
+    if (props.density !== void 0) {
+      if (props.density === 1) delete next.density;
+      else next.density = props.density;
+    }
+    if (props.feather !== void 0) {
+      if (props.feather === 0) delete next.feather;
+      else next.feather = props.feather;
+    }
+    this.commitLayers(mapLayer(this.state.layers, id, (l) => ({ ...l, vectorMask: next })));
+    return next;
+  }
+  /** Deletes a layer's vector mask (one undo step). */
+  removeVectorMask(id) {
+    this.requireVectorMask(id);
+    this.commitLayers(
+      mapLayer(this.state.layers, id, (l) => {
+        const next = { ...l };
+        delete next.vectorMask;
+        return next;
+      })
+    );
+  }
+  /**
+   * Layer › Rasterize › Vector Mask: multiplies the path (with its density and feather) into the
+   * layer's raster mask, adding one when there is none, and removes the vector mask. The raster
+   * mask keeps its own properties. One undo step. Returns the raster mask.
+   */
+  rasterizeVectorMask(id) {
+    const { layer } = this.requireVectorMask(id);
+    const { width, height } = this.canvasSize;
+    const raster = layer.mask;
+    const plain3 = { ...layer, vectorMask: { ...layer.vectorMask, enabled: true }, mask: raster ? { surface: raster.surface, defaultValue: raster.defaultValue } : void 0 };
+    const baked = effectiveLayerMask(plain3, width, height);
+    const mask = raster ? { ...raster, surface: baked.surface, defaultValue: baked.defaultValue } : baked;
+    this.commitLayers(
+      mapLayer(this.state.layers, id, (l) => {
+        const next = { ...l, mask };
+        delete next.vectorMask;
+        return next;
+      })
+    );
+    return mask;
+  }
+  /** Load Selection from a vector mask's path (density and feather are not applied), inverted with `invert`. */
+  selectionFromVectorMask(id, mode = "replace", invert2 = false) {
+    const { vm } = this.requireVectorMask(id);
+    const { width, height } = this.naturalSize;
+    const cov = componentsCoverage(vm.components, { x: 0, y: 0, width, height }, vm.fillRule ?? "nonzero", vm.inverted === true !== invert2);
+    const bytes = new Uint8Array(cov.length);
+    for (let i = 0; i < cov.length; i++) bytes[i] = Math.round(Math.min(1, Math.max(0, cov[i])) * 255);
+    return this.setSelection(createSelectionMask(width, height, bytes), mode);
+  }
+  /** A layer's vector mask with its paths (rounded), or `null` without one. */
+  getVectorMask(id) {
+    const layer = requireLayer(this.state.layers, id).layer;
+    const vm = layer.vectorMask;
+    if (!vm) return null;
+    const b = vectorMaskBounds(vm);
+    const r = (n) => Math.round(n * 1e3) / 1e3;
+    return {
+      layerId: id,
+      enabled: vm.enabled !== false,
+      linked: vm.linked !== false,
+      inverted: vm.inverted === true,
+      fillRule: vm.fillRule ?? "nonzero",
+      density: vm.density ?? 1,
+      feather: vm.feather ?? 0,
+      bounds: b ? { x: r(b.x), y: r(b.y), width: r(b.width), height: r(b.height) } : null,
+      components: vm.components.map((c, index) => ({ index, op: c.op, live: c.live ? JSON.parse(JSON.stringify(c.live)) : null, subpaths: roundSubpaths(c.subpaths) }))
+    };
+  }
   /** Changes any layer mask's density, feather, enabled or linked flag (pixels kept). Returns the mask. */
   setLayerMaskProps(id, props, commitToHistory = true) {
     const layer = requireLayer(this.state.layers, id).layer;
@@ -8351,6 +8558,41 @@ var ImageEditorController = class {
     this.state.quickMask = display === "quickMask";
     this.notify();
   }
+  // --- Mask views ---
+  /** The layer mask shown on the canvas, or `null` (see `setMaskView`). */
+  getMaskView() {
+    const view = this.state.maskView;
+    if (!view) return null;
+    const layer = this.getLayer(view.layerId);
+    return layer?.mask && !layer.mask.source ? view : null;
+  }
+  /**
+   * Shows a layer's mask on the canvas: `gray` alone in grey (Alt-click the mask thumbnail),
+   * `overlay` as a red tint over what it hides (the \ key), `off` back to the image. The layer
+   * defaults to the active one. View state: no undo step, not saved. Throws when the layer has
+   * no painted mask.
+   */
+  setMaskView(mode, layerId) {
+    if (mode !== "off" && mode !== "gray" && mode !== "overlay") throw new Error(`Unknown mask view "${String(mode)}". Use gray, overlay or off.`);
+    if (mode === "off") {
+      if (this.state.maskView) {
+        this.state.maskView = null;
+        this.notify();
+      }
+      return null;
+    }
+    const id = layerId ?? this.state.activeLayerId;
+    if (!id) throw new LayerOperationError("No layer given and none is active; pass layerId (see list_layers).");
+    const layer = requireLayer(this.state.layers, id).layer;
+    if (!layer.mask) throw new LayerOperationError(`Layer "${layer.name || id}" has no mask to show; add one with add_layer_mask.`);
+    if (layer.mask.source) throw new LayerOperationError(`Layer "${layer.name || id}" has a depth mask, which is computed, not painted, so it has no mask view.`);
+    const cur = this.state.maskView;
+    if (cur?.layerId !== id || cur.mode !== mode) {
+      this.state.maskView = { layerId: id, mode };
+      this.notify();
+    }
+    return this.state.maskView;
+  }
   // --- Alpha channels ---
   /** The alpha channels (saved selections), in panel order. */
   getChannels() {
@@ -11578,11 +11820,12 @@ function createImageSelectionTools(controller) {
   const loadFromMask = {
     name: "load_selection_from_mask",
     title: "Load a selection from a layer mask",
-    description: "Load Selection from a layer's mask (Ctrl/\u2318-click its mask thumbnail): the mask's pixels become the selection, combined by mode (density and feather are not applied). Use it to reuse a mask on another layer or to edit it as a selection. Fails when the layer has no painted mask. One undoable step. Returns the selection.",
+    description: "Load Selection from a layer's mask (Ctrl/\u2318-click its mask thumbnail): the raster mask's pixels, or with source vector the vector mask's path, become the selection, combined by mode (density and feather are not applied). Use it to reuse a mask on another layer or to edit it as a selection. Fails when the layer has no such mask. One undoable step. Returns the selection.",
     inputSchema: {
       type: "object",
       properties: {
         layerId: { type: "string", minLength: 1, description: "The layer whose mask to load (see list_layers)." },
+        source: { type: "string", enum: ["pixels", "vector"], description: "pixels: the raster (layer) mask (default); vector: the vector mask's path." },
         invert: { type: "boolean", description: "Select what the mask hides instead (default false)." },
         mode: modeSchema
       },
@@ -11594,6 +11837,11 @@ function createImageSelectionTools(controller) {
       const id = String(args.layerId ?? "");
       const layer = controller.getLayer(id);
       if (!layer) throw new Error(`No layer "${id}". Call list_layers for ids.`);
+      if (args.source === "vector") {
+        if (!layer.vectorMask) throw new Error(`Layer "${id}" has no vector mask. Add one with add_vector_mask, or load its pixels mask (source pixels).`);
+        controller.selectionFromVectorMask(id, parseSelectionMode(args.mode), args.invert === true);
+        return summary(controller);
+      }
       if (!layer.mask) throw new Error(`Layer "${id}" has no mask. Add one with add_layer_mask, or pick a layer with a mask.`);
       if (layer.mask.source) throw new Error(`Layer "${id}" has a computed (depth) mask, not a painted one, so it cannot be loaded as a selection.`);
       controller.selectionFromLayerMask(id, parseSelectionMode(args.mode), args.invert === true);
@@ -12087,6 +12335,22 @@ function selectionShade(selection, doc) {
   context.putImageData(pixels, 0, 0);
   return canvas;
 }
+function maskViewCanvas(controller, doc) {
+  const view = controller.getMaskView();
+  const layer = view ? controller.getLayer(view.layerId) : null;
+  const { width, height } = controller.getState().imageDimensions;
+  const mask = layer ? layerMaskSelection(layer, Math.round(width), Math.round(height)) : null;
+  if (!view || !mask) return null;
+  const canvas = doc.createElement("canvas");
+  canvas.width = mask.width;
+  canvas.height = mask.height;
+  const context = canvas.getContext("2d");
+  if (!context) return null;
+  const pixels = context.createImageData(mask.width, mask.height);
+  pixels.data.set(view.mode === "gray" ? selectionToPixels(mask, "gray").data : quickMaskPixels(mask));
+  context.putImageData(pixels, 0, 0);
+  return canvas;
+}
 async function renderImageRegion(controller, request) {
   const state = controller.getState();
   const k = Math.min(1, request.scale);
@@ -12109,6 +12373,8 @@ async function renderImageRegion(controller, request) {
   context.drawImage(view, rect.x * kx, rect.y * ky, rect.width * kx, rect.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);
     const selection = state.selection;
     if (selection?.bounds && selection.width === state.imageDimensions.width && selection.height === state.imageDimensions.height) {
       const shade = selectionShade(selection, document);
@@ -12136,7 +12402,7 @@ function createImageCaptureSurface(controller) {
     units: "image pixels",
     content: whole,
     selection: () => ({ rect: controller.getState().selection?.bounds ?? null }),
-    overlays: "a shade over unselected pixels and the crop box outline",
+    overlays: "a shade over unselected pixels, the crop box outline and a layer mask view (set_mask_view)",
     maxScale: 8,
     render: (request) => renderImageRegion(controller, request)
   };
@@ -12442,6 +12708,7 @@ function describeLayer(layer, activeId, boundsOf) {
     clipped: Boolean(layer.clipped),
     locks: layer.locks ? { ...layer.locks } : {},
     mask: maskSummary(layer.mask),
+    vectorMask: layer.vectorMask ? { enabled: layer.vectorMask.enabled !== false, linked: layer.vectorMask.linked !== false, inverted: layer.vectorMask.inverted === true, components: layer.vectorMask.components.length, bounds: vectorMaskBounds(layer.vectorMask) } : null,
     effects: layer.effects ? { enabled: layer.effects.enabled, scale: layer.effects.scale ?? 1, items: layer.effects.items.map((e) => ({ id: e.id, kind: e.kind, enabled: e.enabled })) } : null,
     active: layer.id === activeId
   };
@@ -12824,6 +13091,27 @@ function createImageLayerTools(controller) {
       return { layer: describe(id) };
     }
   };
+  const maskView = {
+    name: "set_mask_view",
+    title: "Show a layer mask",
+    description: "Shows a layer's mask on the canvas to check it: gray (the mask alone, white = revealed, as Alt-clicking its thumbnail does), overlay (a red tint over what it hides, as the backslash key does) or off (the image again). It changes only the view: no undo step, nothing saved, and render_preview and exports still show the image. Look with capture_view includeOverlays true, then turn it off. Fails when the layer has no painted mask. Returns the view.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        view: { type: "string", enum: ["gray", "overlay", "off"], description: "gray, overlay or off." },
+        layerId: { ...LAYER_ID2, description: "The layer whose mask to show (default the active layer; see list_layers). Ignored for off." }
+      },
+      required: ["view"],
+      additionalProperties: false
+    },
+    annotations: { title: "Show a layer mask", ...WRITE_IDEMPOTENT2 },
+    handler: ({ view, layerId }) => {
+      if (view !== "gray" && view !== "overlay" && view !== "off") throw new Error(`Unknown view "${String(view)}". Use gray, overlay or off.`);
+      const id = view === "off" || layerId === void 0 ? void 0 : exists(layerId);
+      const shown = controller.setMaskView(view, id);
+      return { view: shown?.mode ?? "off", layerId: shown?.layerId ?? null };
+    }
+  };
   const maskProps = {
     name: "set_layer_mask_properties",
     title: "Set layer mask properties",
@@ -12964,6 +13252,7 @@ function createImageLayerTools(controller) {
     addMask,
     applyMask,
     removeMask,
+    maskView,
     maskProps,
     viaCopy,
     rasterize,
@@ -13304,171 +13593,422 @@ function createImageEffectTools(controller) {
   return [list, add2, update, remove, setEnabled, light];
 }
 
-// src/image-editor/layers/paint-ui.ts
-var plain2 = { kind: "plain" };
-var BRUSH_OPTION_CONTROLS = [
-  { id: "size", label: "Size", section: "layer", min: 1, max: 500, step: 1, default: 20, decimals: 0, track: plain2, unit: "px" },
-  { id: "hardness", label: "Hardness", section: "layer", min: 0, max: 1, step: 0.01, default: 1, decimals: 0, track: plain2, displayScale: 100, unit: "%" },
-  { id: "opacity", label: "Opacity", section: "layer", min: 0, max: 1, step: 0.01, default: 1, decimals: 0, track: plain2, displayScale: 100, unit: "%" },
-  { id: "flow", label: "Flow", section: "layer", min: 0, max: 1, step: 0.01, default: 1, decimals: 0, track: plain2, displayScale: 100, unit: "%" },
-  { id: "smoothing", label: "Smoothing", section: "layer", min: 0, max: 0.95, step: 0.01, default: 0, decimals: 0, track: plain2, displayScale: 100, unit: "%" }
-];
-var MIXER_OPTION_CONTROLS = [
-  { id: "wet", label: "Wet", section: "layer", min: 0, max: 1, step: 0.01, default: 0.5, decimals: 0, track: plain2, displayScale: 100, unit: "%" },
-  { id: "load", label: "Load", section: "layer", min: 0, max: 1, step: 0.01, default: 0.5, decimals: 0, track: plain2, displayScale: 100, unit: "%" },
-  { id: "mix", label: "Mix", section: "layer", min: 0, max: 1, step: 0.01, default: 0.5, decimals: 0, track: plain2, displayScale: 100, unit: "%" }
-];
-var MIXER_MIXING_OPTIONS = [
-  { id: "rgb", label: "RGB", title: "Mix colours as RGB averages" },
-  { id: "pigment", label: "Pigment", title: "Mix colours like paint: blue and yellow make green" }
-];
-var PAINT_TOOLS = [
-  { id: "move", label: "Move", shortcut: "V" },
-  { id: "brush", label: "Brush", shortcut: "B" },
-  { id: "mixer", label: "Mixer", shortcut: "Shift+B" },
-  { id: "eraser", label: "Eraser", shortcut: "E" },
-  { id: "clone", label: "Clone", shortcut: "S" },
-  { id: "heal", label: "Heal", shortcut: "Shift+J" },
-  { id: "spot-heal", label: "Spot Heal", shortcut: "J" },
-  { id: "smudge", label: "Smudge", shortcut: "" },
-  { id: "dodge", label: "Dodge", shortcut: "O" },
-  { id: "burn", label: "Burn", shortcut: "Shift+O" },
-  { id: "sponge", label: "Sponge", shortcut: "Shift+O" },
-  { id: "blur", label: "Blur", shortcut: "" },
-  { id: "sharpen", label: "Sharpen", shortcut: "" },
-  { id: "history", label: "History", shortcut: "Y" }
-];
-var isPaintTool = (tool) => PAINT_TOOLS.some((t) => t.id === tool);
-var isRetouchPaintTool = (tool) => tool === "clone" || tool === "heal" || tool === "spot-heal" || tool === "smudge" || tool === "dodge" || tool === "burn" || tool === "sponge" || tool === "blur" || tool === "sharpen" || tool === "history";
-var RETOUCH_OPTION_CONTROLS = [
-  { id: "exposure", label: "Exposure", section: "layer", min: 0, max: 1, step: 0.01, default: 0.5, decimals: 0, track: plain2, displayScale: 100, unit: "%", tools: ["dodge", "burn"] },
-  { id: "strength", label: "Strength", section: "layer", min: 0, max: 1, step: 0.01, default: 0.5, decimals: 0, track: plain2, displayScale: 100, unit: "%", tools: ["smudge", "blur", "sharpen"] },
-  { id: "historySteps", label: "Steps back", section: "layer", min: 0, max: 50, step: 1, default: 0, decimals: 0, track: plain2, unit: "", tools: ["history"] }
-];
-var CLONE_TRANSFORM_CONTROLS = [
-  { id: "width", label: "Source W", section: "layer", min: 1, max: 400, step: 1, default: 100, decimals: 0, track: plain2, unit: "%" },
-  { id: "height", label: "Source H", section: "layer", min: 1, max: 400, step: 1, default: 100, decimals: 0, track: plain2, unit: "%" },
-  { id: "angle", label: "Source angle", section: "layer", min: -180, max: 180, step: 1, default: 0, decimals: 0, track: plain2, unit: "\xB0" }
-];
-function cloneTransformView(controller) {
-  const t = controller.getState().paint.cloneTransform;
-  return {
-    width: Math.round(Math.abs(t.scaleX) * 100),
-    height: Math.round(Math.abs(t.scaleY) * 100),
-    angle: t.rotate,
-    flipH: t.scaleX < 0,
-    flipV: t.scaleY < 0,
-    identity: t.scaleX === 1 && t.scaleY === 1 && t.rotate === 0
-  };
-}
-function setCloneTransformValue(controller, id, value) {
-  const t = controller.getState().paint.cloneTransform;
-  if (id === "width") controller.setCloneTransform({ scaleX: Math.sign(t.scaleX) * (value ?? 100) / 100 });
-  else if (id === "height") controller.setCloneTransform({ scaleY: Math.sign(t.scaleY) * (value ?? 100) / 100 });
-  else if (id === "angle") controller.setCloneTransform({ rotate: value ?? 0 });
-  else if (id === "flipH") controller.setCloneTransform({ scaleX: -t.scaleX });
-  else controller.setCloneTransform({ scaleY: -t.scaleY });
+// src/image-editor/selection/gesture.ts
+function snapTo45(from, point) {
+  const dx = point.x - from.x;
+  const dy = point.y - from.y;
+  const len = Math.hypot(dx, dy);
+  if (len === 0) return point;
+  const a = Math.round(Math.atan2(dy, dx) / (Math.PI / 4)) * (Math.PI / 4);
+  return { x: from.x + Math.cos(a) * len, y: from.y + Math.sin(a) * len };
 }
-var RETOUCH_CHOICES = [
-  {
-    id: "sample",
-    label: "Sample",
-    tools: ["clone", "heal", "spot-heal"],
-    options: [
-      { id: "current", label: "Current", title: "Sample the layer being retouched" },
-      { id: "current-below", label: "Current & Below", title: "Sample this layer and the layers under it" },
-      { id: "all", label: "All", title: "Sample every layer (retouch onto an empty layer)" }
-    ]
-  },
-  {
-    id: "spotType",
-    label: "Type",
-    tools: ["spot-heal"],
-    options: [
-      { id: "proximity-match", label: "Proximity Match", title: "Copy the best matching patch nearby" },
-      { id: "content-aware", label: "Content-Aware", title: "Synthesise texture and edges from patches around the spot" },
-      { id: "smooth", label: "Smooth", title: "Fill smoothly from the edges" }
-    ]
-  },
-  {
-    id: "range",
-    label: "Range",
-    tools: ["dodge", "burn"],
-    options: [
-      { id: "shadows", label: "Shadows", title: "Change the dark tones most" },
-      { id: "midtones", label: "Midtones", title: "Change the middle tones most" },
-      { id: "highlights", label: "Highlights", title: "Change the light tones most" }
-    ]
-  },
-  {
-    id: "spongeMode",
-    label: "Mode",
-    tools: ["sponge"],
-    options: [
-      { id: "desaturate", label: "Desaturate", title: "Take colour out" },
-      { id: "saturate", label: "Saturate", title: "Add colour" }
-    ]
+var SelectionGesture = class {
+  constructor(controller, getOptions) {
+    this.controller = controller;
+    this.getOptions = getOptions;
   }
-];
-var RETOUCH_TOGGLES = [
-  { id: "aligned", label: "Aligned", tools: ["clone", "heal"] },
-  { id: "protectTones", label: "Protect tones", tools: ["dodge", "burn"] },
-  { id: "vibrance", label: "Vibrance", tools: ["sponge"] }
-];
-function setRetouchChoice(controller, id, value) {
-  controller.setPaintOptions({ retouch: { [id]: value } });
-}
-function cloneSourceLabel(controller) {
-  const cs = controller.getState().paint.cloneSource;
-  return cs ? `Source ${cs.x}, ${cs.y}${cs.offset ? ` (offset ${cs.offset.x}, ${cs.offset.y})` : ""}` : "Alt-click to set the source";
-}
-function rgbUnitToHex(c) {
-  return `#${c.map((v) => Math.round(Math.min(1, Math.max(0, v)) * 255).toString(16).padStart(2, "0")).join("")}`;
-}
-function sizeStep(size) {
-  return size < 10 ? 1 : size < 50 ? 5 : size < 100 ? 10 : size < 200 ? 25 : size < 500 ? 50 : 100;
-}
-var isTyping = (t) => {
-  const el = t;
-  return Boolean(el && (el.isContentEditable || el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT"));
-};
-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;
-  switch (key.toLowerCase()) {
-    case "q":
-      controller.setQuickMaskMode(!controller.quickMaskEditing);
-      return true;
-    case "b":
-      controller.setTool(e.shiftKey || key === "B" ? "mixer" : "brush");
-      return true;
-    case "e":
-      controller.setTool("eraser");
-      return true;
-    case "v":
-      controller.setTool("move");
-      return true;
-    case "s":
-      controller.setTool("clone");
-      return true;
-    case "j":
-      controller.setTool(e.shiftKey || key === "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";
-      controller.setTool(next);
-      return true;
-    }
-    case "y":
-      controller.setTool("history");
-      return true;
-    case "d":
-      controller.resetPaintColors();
-      return true;
-    case "x":
+  controller;
+  getOptions;
+  start = null;
+  points = [];
+  current = null;
+  modifiers = {};
+  /** Polygonal lasso corners while one is being drawn. */
+  polygon = null;
+  pressedAt = null;
+  freehand = false;
+  /** A click this close to the first corner (natural pixels) closes a polygonal lasso. */
+  closeRadius = 8;
+  /** The last error (e.g. pixels unavailable for the wand), for the UI to show. */
+  error = null;
+  get active() {
+    return this.start !== null || this.polygon !== null;
+  }
+  /** The outline of the shape being drawn, or `null`. */
+  get draftPath() {
+    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") return this.points.length > 1 ? this.points.slice() : null;
+    const rect = 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);
+    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 }
+    ];
+  }
+  /** Pointer down. Resolves once a wand click has been applied. */
+  async begin(point, modifiers = {}) {
+    const options = this.getOptions();
+    this.error = null;
+    if (this.polygon && options.tool !== "polygon") this.cancel();
+    if (options.tool === "polygon") {
+      this.pressedAt = point;
+      this.freehand = false;
+      if (!this.polygon) {
+        this.modifiers = modifiers;
+        this.polygon = [point];
+        this.current = point;
+        return;
+      }
+      const last = this.polygon[this.polygon.length - 1];
+      const p = modifiers.shiftKey ? snapTo45(last, point) : point;
+      const first = this.polygon[0];
+      if (this.polygon.length >= 3 && Math.hypot(p.x - first.x, p.y - first.y) <= this.closeRadius) {
+        this.close();
+        return;
+      }
+      if (Math.hypot(p.x - last.x, p.y - last.y) >= 0.5) this.polygon.push(p);
+      this.current = p;
+      if ((modifiers.detail ?? 1) >= 2) this.close();
+      return;
+    }
+    this.modifiers = modifiers;
+    if (options.tool === "row" || options.tool === "column") {
+      this.start = null;
+      try {
+        this.controller.selectLine(options.tool, options.tool === "row" ? point.y : point.x, {
+          mode: selectionModeFromModifiers(modifiers, options.mode),
+          feather: options.feather ?? 0
+        });
+      } catch (err) {
+        this.error = err instanceof Error ? err.message : String(err);
+      }
+      return;
+    }
+    if (options.tool === "wand" || options.tool === "range") {
+      this.start = null;
+      const common = {
+        sampleMerged: options.sampleMerged,
+        sample: options.sample,
+        feather: options.feather ?? 0,
+        mode: selectionModeFromModifiers(modifiers, options.mode)
+      };
+      try {
+        if (options.tool === "range") {
+          const pixels = await this.controller.getSamplePixels(common);
+          if (!pixels) throw new Error("The image pixels are not available to sample.");
+          const x = Math.min(pixels.width - 1, Math.max(0, Math.floor(point.x)));
+          const y = Math.min(pixels.height - 1, Math.max(0, Math.floor(point.y)));
+          const p = (y * pixels.width + x) * 4;
+          const color = [pixels.data[p], pixels.data[p + 1], pixels.data[p + 2]];
+          await this.controller.selectColorRange([{ color, at: point }], {
+            ...common,
+            fuzziness: options.fuzziness ?? 40,
+            localized: options.localized ? options.localized : void 0,
+            invert: options.rangeInvert ?? false
+          });
+          return;
+        }
+        await this.controller.magicWand(point, {
+          ...common,
+          tolerance: options.tolerance,
+          contiguous: options.contiguous,
+          antiAlias: options.antiAlias,
+          distance: options.distance
+        });
+      } catch (err) {
+        this.error = err instanceof Error ? err.message : String(err);
+      }
+      return;
+    }
+    this.start = point;
+    this.current = point;
+    this.points = [point];
+  }
+  /** Pointer move; returns true when the draft changed (re-render). */
+  move(point, modifiers = {}) {
+    if (this.polygon) {
+      const last = this.polygon[this.polygon.length - 1];
+      if (this.pressedAt && (this.freehand || Math.hypot(point.x - this.pressedAt.x, point.y - this.pressedAt.y) >= 3)) {
+        this.freehand = true;
+        if (Math.hypot(point.x - last.x, point.y - last.y) >= 0.5) this.polygon.push(point);
+        this.current = null;
+        return true;
+      }
+      this.current = modifiers.shiftKey ? snapTo45(last, point) : point;
+      return true;
+    }
+    if (!this.start) return false;
+    this.current = point;
+    if (this.getOptions().tool === "lasso") {
+      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);
+    }
+    return true;
+  }
+  /** Pointer up: commits the shape. Returns true when the selection changed. */
+  end(point, modifiers) {
+    if (this.polygon) {
+      if (point && this.freehand) this.move(point);
+      this.pressedAt = null;
+      this.freehand = false;
+      return false;
+    }
+    if (!this.start) return false;
+    if (point) this.move(point);
+    const options = this.getOptions();
+    const mode = selectionModeFromModifiers(modifiers ?? this.modifiers, options.mode);
+    const path = this.draftPath;
+    const rect = 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 = [];
+    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);
+  }
+  /** Closes a polygonal lasso and selects it. Returns true when the selection changed. */
+  close() {
+    const polygon = this.polygon;
+    if (!polygon) return false;
+    const options = this.getOptions();
+    this.cancel();
+    if (polygon.length < 3) return false;
+    return this.controller.selectPolygon(polygon, {
+      mode: selectionModeFromModifiers(this.modifiers, options.mode),
+      antiAlias: options.antiAlias,
+      feather: options.feather ?? 0
+    });
+  }
+  /**
+   * 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) {
+    if (!this.polygon) return false;
+    if (key === "Enter") this.close();
+    else if (key === "Escape") this.cancel();
+    else if (key === "Backspace" || key === "Delete") {
+      this.polygon.pop();
+      if (!this.polygon.length) this.cancel();
+    } else return false;
+    return true;
+  }
+  /** Abandons a drag (or a polygonal lasso) without changing the selection. */
+  cancel() {
+    this.start = null;
+    this.current = null;
+    this.points = [];
+    this.polygon = null;
+    this.pressedAt = null;
+    this.freehand = false;
+  }
+};
+function handleSelectionShortcut(controller, e, onError) {
+  if (!(e.ctrlKey || e.metaKey)) return false;
+  const key = e.key.toLowerCase();
+  const run = (fn) => {
+    try {
+      fn();
+    } catch (err) {
+      onError?.(err instanceof Error ? err.message : String(err));
+    }
+    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());
+  return false;
+}
+function handleMaskViewKey(controller, e) {
+  if (e.ctrlKey || e.metaKey || e.altKey || e.key !== "\\") return false;
+  const id = controller.getState().activeLayerId;
+  const layer = id ? controller.getLayer(id) : null;
+  if (!layer?.mask || layer.mask.source) return false;
+  const view = controller.getMaskView();
+  controller.setMaskView(view?.layerId === layer.id && view.mode === "overlay" ? "off" : "overlay", layer.id);
+  return true;
+}
+function handleQuickMaskKey(controller, e) {
+  if (e.ctrlKey || e.metaKey || e.altKey || e.key.toLowerCase() !== "q") return false;
+  controller.setQuickMaskMode(!controller.quickMaskEditing);
+  return true;
+}
+
+// src/image-editor/layers/paint-ui.ts
+var plain2 = { kind: "plain" };
+var BRUSH_OPTION_CONTROLS = [
+  { id: "size", label: "Size", section: "layer", min: 1, max: 500, step: 1, default: 20, decimals: 0, track: plain2, unit: "px" },
+  { id: "hardness", label: "Hardness", section: "layer", min: 0, max: 1, step: 0.01, default: 1, decimals: 0, track: plain2, displayScale: 100, unit: "%" },
+  { id: "opacity", label: "Opacity", section: "layer", min: 0, max: 1, step: 0.01, default: 1, decimals: 0, track: plain2, displayScale: 100, unit: "%" },
+  { id: "flow", label: "Flow", section: "layer", min: 0, max: 1, step: 0.01, default: 1, decimals: 0, track: plain2, displayScale: 100, unit: "%" },
+  { id: "smoothing", label: "Smoothing", section: "layer", min: 0, max: 0.95, step: 0.01, default: 0, decimals: 0, track: plain2, displayScale: 100, unit: "%" }
+];
+var MIXER_OPTION_CONTROLS = [
+  { id: "wet", label: "Wet", section: "layer", min: 0, max: 1, step: 0.01, default: 0.5, decimals: 0, track: plain2, displayScale: 100, unit: "%" },
+  { id: "load", label: "Load", section: "layer", min: 0, max: 1, step: 0.01, default: 0.5, decimals: 0, track: plain2, displayScale: 100, unit: "%" },
+  { id: "mix", label: "Mix", section: "layer", min: 0, max: 1, step: 0.01, default: 0.5, decimals: 0, track: plain2, displayScale: 100, unit: "%" }
+];
+var MIXER_MIXING_OPTIONS = [
+  { id: "rgb", label: "RGB", title: "Mix colours as RGB averages" },
+  { id: "pigment", label: "Pigment", title: "Mix colours like paint: blue and yellow make green" }
+];
+var PAINT_TOOLS = [
+  { id: "move", label: "Move", shortcut: "V" },
+  { id: "brush", label: "Brush", shortcut: "B" },
+  { id: "mixer", label: "Mixer", shortcut: "Shift+B" },
+  { id: "eraser", label: "Eraser", shortcut: "E" },
+  { id: "clone", label: "Clone", shortcut: "S" },
+  { id: "heal", label: "Heal", shortcut: "Shift+J" },
+  { id: "spot-heal", label: "Spot Heal", shortcut: "J" },
+  { id: "smudge", label: "Smudge", shortcut: "" },
+  { id: "dodge", label: "Dodge", shortcut: "O" },
+  { id: "burn", label: "Burn", shortcut: "Shift+O" },
+  { id: "sponge", label: "Sponge", shortcut: "Shift+O" },
+  { id: "blur", label: "Blur", shortcut: "" },
+  { id: "sharpen", label: "Sharpen", shortcut: "" },
+  { id: "history", label: "History", shortcut: "Y" }
+];
+var isPaintTool = (tool) => PAINT_TOOLS.some((t) => t.id === tool);
+var isRetouchPaintTool = (tool) => tool === "clone" || tool === "heal" || tool === "spot-heal" || tool === "smudge" || tool === "dodge" || tool === "burn" || tool === "sponge" || tool === "blur" || tool === "sharpen" || tool === "history";
+var RETOUCH_OPTION_CONTROLS = [
+  { id: "exposure", label: "Exposure", section: "layer", min: 0, max: 1, step: 0.01, default: 0.5, decimals: 0, track: plain2, displayScale: 100, unit: "%", tools: ["dodge", "burn"] },
+  { id: "strength", label: "Strength", section: "layer", min: 0, max: 1, step: 0.01, default: 0.5, decimals: 0, track: plain2, displayScale: 100, unit: "%", tools: ["smudge", "blur", "sharpen"] },
+  { id: "historySteps", label: "Steps back", section: "layer", min: 0, max: 50, step: 1, default: 0, decimals: 0, track: plain2, unit: "", tools: ["history"] }
+];
+var CLONE_TRANSFORM_CONTROLS = [
+  { id: "width", label: "Source W", section: "layer", min: 1, max: 400, step: 1, default: 100, decimals: 0, track: plain2, unit: "%" },
+  { id: "height", label: "Source H", section: "layer", min: 1, max: 400, step: 1, default: 100, decimals: 0, track: plain2, unit: "%" },
+  { id: "angle", label: "Source angle", section: "layer", min: -180, max: 180, step: 1, default: 0, decimals: 0, track: plain2, unit: "\xB0" }
+];
+function cloneTransformView(controller) {
+  const t = controller.getState().paint.cloneTransform;
+  return {
+    width: Math.round(Math.abs(t.scaleX) * 100),
+    height: Math.round(Math.abs(t.scaleY) * 100),
+    angle: t.rotate,
+    flipH: t.scaleX < 0,
+    flipV: t.scaleY < 0,
+    identity: t.scaleX === 1 && t.scaleY === 1 && t.rotate === 0
+  };
+}
+function setCloneTransformValue(controller, id, value) {
+  const t = controller.getState().paint.cloneTransform;
+  if (id === "width") controller.setCloneTransform({ scaleX: Math.sign(t.scaleX) * (value ?? 100) / 100 });
+  else if (id === "height") controller.setCloneTransform({ scaleY: Math.sign(t.scaleY) * (value ?? 100) / 100 });
+  else if (id === "angle") controller.setCloneTransform({ rotate: value ?? 0 });
+  else if (id === "flipH") controller.setCloneTransform({ scaleX: -t.scaleX });
+  else controller.setCloneTransform({ scaleY: -t.scaleY });
+}
+var RETOUCH_CHOICES = [
+  {
+    id: "sample",
+    label: "Sample",
+    tools: ["clone", "heal", "spot-heal"],
+    options: [
+      { id: "current", label: "Current", title: "Sample the layer being retouched" },
+      { id: "current-below", label: "Current & Below", title: "Sample this layer and the layers under it" },
+      { id: "all", label: "All", title: "Sample every layer (retouch onto an empty layer)" }
+    ]
+  },
+  {
+    id: "spotType",
+    label: "Type",
+    tools: ["spot-heal"],
+    options: [
+      { id: "proximity-match", label: "Proximity Match", title: "Copy the best matching patch nearby" },
+      { id: "content-aware", label: "Content-Aware", title: "Synthesise texture and edges from patches around the spot" },
+      { id: "smooth", label: "Smooth", title: "Fill smoothly from the edges" }
+    ]
+  },
+  {
+    id: "range",
+    label: "Range",
+    tools: ["dodge", "burn"],
+    options: [
+      { id: "shadows", label: "Shadows", title: "Change the dark tones most" },
+      { id: "midtones", label: "Midtones", title: "Change the middle tones most" },
+      { id: "highlights", label: "Highlights", title: "Change the light tones most" }
+    ]
+  },
+  {
+    id: "spongeMode",
+    label: "Mode",
+    tools: ["sponge"],
+    options: [
+      { id: "desaturate", label: "Desaturate", title: "Take colour out" },
+      { id: "saturate", label: "Saturate", title: "Add colour" }
+    ]
+  }
+];
+var RETOUCH_TOGGLES = [
+  { id: "aligned", label: "Aligned", tools: ["clone", "heal"] },
+  { id: "protectTones", label: "Protect tones", tools: ["dodge", "burn"] },
+  { id: "vibrance", label: "Vibrance", tools: ["sponge"] }
+];
+function setRetouchChoice(controller, id, value) {
+  controller.setPaintOptions({ retouch: { [id]: value } });
+}
+function cloneSourceLabel(controller) {
+  const cs = controller.getState().paint.cloneSource;
+  return cs ? `Source ${cs.x}, ${cs.y}${cs.offset ? ` (offset ${cs.offset.x}, ${cs.offset.y})` : ""}` : "Alt-click to set the source";
+}
+function rgbUnitToHex(c) {
+  return `#${c.map((v) => Math.round(Math.min(1, Math.max(0, v)) * 255).toString(16).padStart(2, "0")).join("")}`;
+}
+function sizeStep(size) {
+  return size < 10 ? 1 : size < 50 ? 5 : size < 100 ? 10 : size < 200 ? 25 : size < 500 ? 50 : 100;
+}
+var isTyping = (t) => {
+  const el = t;
+  return Boolean(el && (el.isContentEditable || el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT"));
+};
+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;
+  if (handleMaskViewKey(controller, e)) return true;
+  switch (key.toLowerCase()) {
+    case "q":
+      controller.setQuickMaskMode(!controller.quickMaskEditing);
+      return true;
+    case "b":
+      controller.setTool(e.shiftKey || key === "B" ? "mixer" : "brush");
+      return true;
+    case "e":
+      controller.setTool("eraser");
+      return true;
+    case "v":
+      controller.setTool("move");
+      return true;
+    case "s":
+      controller.setTool("clone");
+      return true;
+    case "j":
+      controller.setTool(e.shiftKey || key === "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";
+      controller.setTool(next);
+      return true;
+    }
+    case "y":
+      controller.setTool("history");
+      return true;
+    case "d":
+      controller.resetPaintColors();
+      return true;
+    case "x":
       controller.swapPaintColors();
       return true;
   }
@@ -15347,15 +15887,130 @@ function createImageShapeTools(controller) {
     annotations: { title: "Delete a shape component", ...DESTRUCTIVE6 },
     handler: ({ layerId, componentIndex }) => controller.removeShapeComponent(shapeId(layerId), componentIndex)
   };
-  const merge = {
-    name: "merge_shape_components",
-    title: "Merge shape components",
-    description: "Merge Shape Components: the area a shape\u2019s components combine to (after their path operations) becomes one plain component; live shapes become paths. The look is unchanged. One undo step. Returns the shape.",
-    inputSchema: { type: "object", properties: { layerId: LAYER_ID5 }, required: ["layerId"], additionalProperties: false },
-    annotations: { title: "Merge shape components", ...DESTRUCTIVE6 },
-    handler: ({ layerId }) => controller.mergeShapeComponents(shapeId(layerId))
+  const merge = {
+    name: "merge_shape_components",
+    title: "Merge shape components",
+    description: "Merge Shape Components: the area a shape\u2019s components combine to (after their path operations) becomes one plain component; live shapes become paths. The look is unchanged. One undo step. Returns the shape.",
+    inputSchema: { type: "object", properties: { layerId: LAYER_ID5 }, required: ["layerId"], additionalProperties: false },
+    annotations: { title: "Merge shape components", ...DESTRUCTIVE6 },
+    handler: ({ layerId }) => controller.mergeShapeComponents(shapeId(layerId))
+  };
+  const layerArg = (v) => {
+    const id = String(v ?? "");
+    if (!controller.getLayer(id)) throw new Error(`No layer "${id}". Call list_layers for ids.`);
+    return id;
+  };
+  const pathSpec = (args) => {
+    const spec = { ...geometry(args) };
+    if (args.components !== void 0) spec.components = args.components.map(geometry);
+    if (args.fillRule !== void 0) spec.fillRule = args.fillRule;
+    return spec;
+  };
+  const PATH_PROPS = {
+    ...GEOMETRY2,
+    components: {
+      type: "array",
+      minItems: 1,
+      description: "Several components instead of shape / subpaths, bottom first, each with its path operation (combine, subtract, intersect, exclude).",
+      items: { type: "object", description: "One component.", properties: { ...GEOMETRY2, op: OP }, additionalProperties: false }
+    },
+    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 getVectorMask = {
+    name: "get_vector_mask",
+    title: "Read a vector mask",
+    description: "Reads a layer's vector mask: enabled, linked, inverted, fill rule, density, feather, the bounds of its path and its components (op, live shape, subpaths in document pixels). Use it before set_vector_mask_path to edit the path. Returns null when the layer has none.",
+    inputSchema: { type: "object", properties: { layerId: LAYER }, required: ["layerId"], additionalProperties: false },
+    annotations: { title: "Read a vector mask", ...READ10 },
+    handler: ({ layerId }) => ({ vectorMask: controller.getVectorMask(layerArg(layerId)) })
+  };
+  const addVectorMask = {
+    name: "add_vector_mask",
+    title: "Add a vector mask",
+    description: "Layer \u203A Vector Mask: a path that reveals the layer inside it and stays sharp at any size, on top of any raster mask (both apply). from path takes a live shape, free subpaths or components like add_shape_layer; reveal-all and hide-all start with an empty path. Use it for hard-edged geometric or traced cutouts that must stay editable; use add_layer_mask for soft or painted ones. A linked vector mask moves and transforms with the layer. Replaces an existing vector mask. One undo step. Returns the vector mask.",
+    inputSchema: {
+      type: "object",
+      $defs: DEFS2,
+      properties: {
+        layerId: LAYER,
+        from: { type: "string", enum: ["path", "reveal-all", "hide-all"], description: "path (default when a shape, subpaths or components are given), reveal-all or hide-all (an empty path)." },
+        ...PATH_PROPS
+      },
+      required: ["layerId"],
+      additionalProperties: false
+    },
+    annotations: { title: "Add a vector mask", ...WRITE8 },
+    handler: (args) => {
+      const id = layerArg(args.layerId);
+      const spec = pathSpec(args);
+      const hasPath = spec.components?.length || spec.shape !== void 0 || spec.subpaths !== void 0;
+      const from = args.from ?? (hasPath ? "path" : "reveal-all");
+      controller.addVectorMask(id, from, spec);
+      return { vectorMask: controller.getVectorMask(id) };
+    }
+  };
+  const setVectorMaskPath = {
+    name: "set_vector_mask_path",
+    title: "Replace a vector mask path",
+    description: "Replaces the path of a layer's vector mask (shape, subpaths or components, document pixels); enabled, linked, inverted, density and feather are kept. Read the current path with get_vector_mask first to change part of it. One undo step. Returns the vector mask.",
+    inputSchema: { type: "object", $defs: DEFS2, properties: { layerId: LAYER, ...PATH_PROPS }, required: ["layerId"], additionalProperties: false },
+    annotations: { title: "Replace a vector mask path", ...WRITE_IDEMPOTENT5 },
+    handler: (args) => {
+      const id = layerArg(args.layerId);
+      controller.setVectorMaskPath(id, pathSpec(args));
+      return { vectorMask: controller.getVectorMask(id) };
+    }
+  };
+  const setVectorMaskProps = {
+    name: "set_vector_mask_properties",
+    title: "Set vector mask properties",
+    description: "Changes a layer's vector mask without touching its path: enabled (false ignores it), linked (false: it stays put when the layer moves or transforms), inverted (reveal outside the path), density 0..1 and feather in px (soften the edge without losing the path). One undo step. Returns the vector mask.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        layerId: LAYER,
+        enabled: { type: "boolean", description: "false ignores the vector mask but keeps it." },
+        linked: { type: "boolean", description: "false keeps the path in place when the layer moves or transforms." },
+        inverted: { type: "boolean", description: "true reveals outside the path instead." },
+        density: { type: "number", minimum: 0, maximum: 1, description: "Density 0..1 (default 1): at 0.5 the hidden area still shows half." },
+        feather: { type: "number", minimum: 0, maximum: 1e3, description: "Feather \u03C3 in px (default 0)." }
+      },
+      required: ["layerId"],
+      additionalProperties: false
+    },
+    annotations: { title: "Set vector mask properties", ...WRITE_IDEMPOTENT5 },
+    handler: ({ layerId, ...props }) => {
+      const id = layerArg(layerId);
+      controller.setVectorMaskProps(id, props);
+      return { vectorMask: controller.getVectorMask(id) };
+    }
+  };
+  const rasterizeVectorMask = {
+    name: "rasterize_vector_mask",
+    title: "Rasterize a vector mask",
+    description: "Layer \u203A Rasterize \u203A Vector Mask: multiplies the path (with its density and feather) into the layer's raster mask, adding one if needed, and removes the vector mask, so the mask can be painted. The path can no longer be edited (undo_image brings it back). One undo step. Returns the layer's raster mask summary.",
+    inputSchema: { type: "object", properties: { layerId: LAYER }, required: ["layerId"], additionalProperties: false },
+    annotations: { title: "Rasterize a vector mask", ...DESTRUCTIVE6 },
+    handler: ({ layerId }) => {
+      const id = layerArg(layerId);
+      const mask = controller.rasterizeVectorMask(id);
+      return { layerId: id, mask: { defaultValue: mask.defaultValue, density: mask.density ?? 1, feather: mask.feather ?? 0, enabled: mask.enabled !== false } };
+    }
+  };
+  const removeVectorMask = {
+    name: "remove_vector_mask",
+    title: "Delete a vector mask",
+    description: "Deletes a layer's vector mask without applying it (the raster mask, if any, stays). Disable it instead with set_vector_mask_properties enabled false to keep it. One undo step. Returns the layer id.",
+    inputSchema: { type: "object", properties: { layerId: LAYER }, required: ["layerId"], additionalProperties: false },
+    annotations: { title: "Delete a vector mask", ...DESTRUCTIVE6 },
+    handler: ({ layerId }) => {
+      const id = layerArg(layerId);
+      controller.removeVectorMask(id);
+      return { layerId: id, vectorMask: null };
+    }
   };
-  return [get, add2, update, setComponent, addComponent, removeComponent, merge];
+  return [get, add2, update, setComponent, addComponent, removeComponent, merge, getVectorMask, addVectorMask, setVectorMaskPath, setVectorMaskProps, rasterizeVectorMask, removeVectorMask];
 }
 
 // src/image-editor/type-tools.ts
@@ -15837,247 +16492,6 @@ function removeCurvePoint(points, index) {
 }
 var round22 = (v) => Math.round(v * 100) / 100;
 
-// src/image-editor/selection/gesture.ts
-function snapTo45(from, point) {
-  const dx = point.x - from.x;
-  const dy = point.y - from.y;
-  const len = Math.hypot(dx, dy);
-  if (len === 0) return point;
-  const a = Math.round(Math.atan2(dy, dx) / (Math.PI / 4)) * (Math.PI / 4);
-  return { x: from.x + Math.cos(a) * len, y: from.y + Math.sin(a) * len };
-}
-var SelectionGesture = class {
-  constructor(controller, getOptions) {
-    this.controller = controller;
-    this.getOptions = getOptions;
-  }
-  controller;
-  getOptions;
-  start = null;
-  points = [];
-  current = null;
-  modifiers = {};
-  /** Polygonal lasso corners while one is being drawn. */
-  polygon = null;
-  pressedAt = null;
-  freehand = false;
-  /** A click this close to the first corner (natural pixels) closes a polygonal lasso. */
-  closeRadius = 8;
-  /** The last error (e.g. pixels unavailable for the wand), for the UI to show. */
-  error = null;
-  get active() {
-    return this.start !== null || this.polygon !== null;
-  }
-  /** The outline of the shape being drawn, or `null`. */
-  get draftPath() {
-    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") return this.points.length > 1 ? this.points.slice() : null;
-    const rect = 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);
-    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 }
-    ];
-  }
-  /** Pointer down. Resolves once a wand click has been applied. */
-  async begin(point, modifiers = {}) {
-    const options = this.getOptions();
-    this.error = null;
-    if (this.polygon && options.tool !== "polygon") this.cancel();
-    if (options.tool === "polygon") {
-      this.pressedAt = point;
-      this.freehand = false;
-      if (!this.polygon) {
-        this.modifiers = modifiers;
-        this.polygon = [point];
-        this.current = point;
-        return;
-      }
-      const last = this.polygon[this.polygon.length - 1];
-      const p = modifiers.shiftKey ? snapTo45(last, point) : point;
-      const first = this.polygon[0];
-      if (this.polygon.length >= 3 && Math.hypot(p.x - first.x, p.y - first.y) <= this.closeRadius) {
-        this.close();
-        return;
-      }
-      if (Math.hypot(p.x - last.x, p.y - last.y) >= 0.5) this.polygon.push(p);
-      this.current = p;
-      if ((modifiers.detail ?? 1) >= 2) this.close();
-      return;
-    }
-    this.modifiers = modifiers;
-    if (options.tool === "row" || options.tool === "column") {
-      this.start = null;
-      try {
-        this.controller.selectLine(options.tool, options.tool === "row" ? point.y : point.x, {
-          mode: selectionModeFromModifiers(modifiers, options.mode),
-          feather: options.feather ?? 0
-        });
-      } catch (err) {
-        this.error = err instanceof Error ? err.message : String(err);
-      }
-      return;
-    }
-    if (options.tool === "wand" || options.tool === "range") {
-      this.start = null;
-      const common = {
-        sampleMerged: options.sampleMerged,
-        sample: options.sample,
-        feather: options.feather ?? 0,
-        mode: selectionModeFromModifiers(modifiers, options.mode)
-      };
-      try {
-        if (options.tool === "range") {
-          const pixels = await this.controller.getSamplePixels(common);
-          if (!pixels) throw new Error("The image pixels are not available to sample.");
-          const x = Math.min(pixels.width - 1, Math.max(0, Math.floor(point.x)));
-          const y = Math.min(pixels.height - 1, Math.max(0, Math.floor(point.y)));
-          const p = (y * pixels.width + x) * 4;
-          const color = [pixels.data[p], pixels.data[p + 1], pixels.data[p + 2]];
-          await this.controller.selectColorRange([{ color, at: point }], {
-            ...common,
-            fuzziness: options.fuzziness ?? 40,
-            localized: options.localized ? options.localized : void 0,
-            invert: options.rangeInvert ?? false
-          });
-          return;
-        }
-        await this.controller.magicWand(point, {
-          ...common,
-          tolerance: options.tolerance,
-          contiguous: options.contiguous,
-          antiAlias: options.antiAlias,
-          distance: options.distance
-        });
-      } catch (err) {
-        this.error = err instanceof Error ? err.message : String(err);
-      }
-      return;
-    }
-    this.start = point;
-    this.current = point;
-    this.points = [point];
-  }
-  /** Pointer move; returns true when the draft changed (re-render). */
-  move(point, modifiers = {}) {
-    if (this.polygon) {
-      const last = this.polygon[this.polygon.length - 1];
-      if (this.pressedAt && (this.freehand || Math.hypot(point.x - this.pressedAt.x, point.y - this.pressedAt.y) >= 3)) {
-        this.freehand = true;
-        if (Math.hypot(point.x - last.x, point.y - last.y) >= 0.5) this.polygon.push(point);
-        this.current = null;
-        return true;
-      }
-      this.current = modifiers.shiftKey ? snapTo45(last, point) : point;
-      return true;
-    }
-    if (!this.start) return false;
-    this.current = point;
-    if (this.getOptions().tool === "lasso") {
-      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);
-    }
-    return true;
-  }
-  /** Pointer up: commits the shape. Returns true when the selection changed. */
-  end(point, modifiers) {
-    if (this.polygon) {
-      if (point && this.freehand) this.move(point);
-      this.pressedAt = null;
-      this.freehand = false;
-      return false;
-    }
-    if (!this.start) return false;
-    if (point) this.move(point);
-    const options = this.getOptions();
-    const mode = selectionModeFromModifiers(modifiers ?? this.modifiers, options.mode);
-    const path = this.draftPath;
-    const rect = 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 = [];
-    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);
-  }
-  /** Closes a polygonal lasso and selects it. Returns true when the selection changed. */
-  close() {
-    const polygon = this.polygon;
-    if (!polygon) return false;
-    const options = this.getOptions();
-    this.cancel();
-    if (polygon.length < 3) return false;
-    return this.controller.selectPolygon(polygon, {
-      mode: selectionModeFromModifiers(this.modifiers, options.mode),
-      antiAlias: options.antiAlias,
-      feather: options.feather ?? 0
-    });
-  }
-  /**
-   * 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) {
-    if (!this.polygon) return false;
-    if (key === "Enter") this.close();
-    else if (key === "Escape") this.cancel();
-    else if (key === "Backspace" || key === "Delete") {
-      this.polygon.pop();
-      if (!this.polygon.length) this.cancel();
-    } else return false;
-    return true;
-  }
-  /** Abandons a drag (or a polygonal lasso) without changing the selection. */
-  cancel() {
-    this.start = null;
-    this.current = null;
-    this.points = [];
-    this.polygon = null;
-    this.pressedAt = null;
-    this.freehand = false;
-  }
-};
-function handleSelectionShortcut(controller, e, onError) {
-  if (!(e.ctrlKey || e.metaKey)) return false;
-  const key = e.key.toLowerCase();
-  const run = (fn) => {
-    try {
-      fn();
-    } catch (err) {
-      onError?.(err instanceof Error ? err.message : String(err));
-    }
-    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());
-  return false;
-}
-function handleQuickMaskKey(controller, e) {
-  if (e.ctrlKey || e.metaKey || e.altKey || e.key.toLowerCase() !== "q") return false;
-  controller.setQuickMaskMode(!controller.quickMaskEditing);
-  return true;
-}
-
 // src/image-editor/selection/mask-files.ts
 var MASK_FILE_ACCEPT = "image/png,image/jpeg,image/webp,image/gif,image/bmp";
 function blobDataUrl(file) {
@@ -16253,12 +16667,21 @@ function maskThumbnailClick(controller, layer, e) {
   if (!layer.mask) return;
   if (e.ctrlKey || e.metaKey) {
     controller.selectionFromLayerMask(layer.id, selectionModeFromModifiers(e, "replace"));
+  } else if (e.altKey && !layer.mask.source) {
+    const mode = e.shiftKey ? "overlay" : "gray";
+    const view = controller.getMaskView();
+    controller.setMaskView(view?.layerId === layer.id && view.mode === mode ? "off" : mode, layer.id);
   } else if (e.shiftKey) {
     controller.setLayerMaskProps(layer.id, { enabled: layer.mask.enabled === false });
   } else {
     controller.setActiveLayer(layer.id, "mask");
   }
 }
+function vectorMaskThumbnailClick(controller, layer, e) {
+  if (!layer.vectorMask) return;
+  if (e.ctrlKey || e.metaKey) controller.selectionFromVectorMask(layer.id, selectionModeFromModifiers(e, "replace"));
+  else if (e.shiftKey) controller.setVectorMaskProps(layer.id, { enabled: layer.vectorMask.enabled === false });
+}
 function layerThumbnailClick(controller, layer, e) {
   if (!(e.ctrlKey || e.metaKey)) return false;
   controller.selectLayerTransparency(layer.id, { mode: selectionModeFromModifiers(e, "replace") });
@@ -16357,6 +16780,11 @@ function layerMenu(controller) {
     { action: "delete-mask", label: "Delete Layer Mask", enabled: Boolean(active?.mask) },
     { action: "toggle-mask", label: active?.mask?.enabled === false ? "Enable Layer Mask" : "Disable Layer Mask", enabled: Boolean(active?.mask) },
     { action: "toggle-mask-link", label: active?.mask?.linked === false ? "Link Layer Mask" : "Unlink Layer Mask", enabled: Boolean(active?.mask && !active.mask.source) },
+    { action: "add-vector-mask", label: "Add Vector Mask (Reveal All)", enabled: Boolean(active && active.type !== "shape" && !active.mask?.source) },
+    { action: "add-vector-mask-hide", label: "Add Vector Mask (Hide All)", enabled: Boolean(active && active.type !== "shape" && !active.mask?.source) },
+    { action: "delete-vector-mask", label: "Delete Vector Mask", enabled: Boolean(active?.vectorMask) },
+    { action: "toggle-vector-mask", label: active?.vectorMask?.enabled === false ? "Enable Vector Mask" : "Disable Vector Mask", enabled: Boolean(active?.vectorMask) },
+    { action: "rasterize-vector-mask", label: "Rasterize Vector Mask", enabled: Boolean(active?.vectorMask) },
     { action: "rasterize", label: "Rasterize Layer", enabled: active?.type === "annotation" || active?.type === "smart" || active?.type === "shape" || active?.type === "type" || isPixel && Boolean(active?.type === "pixel" && active.filters?.length) },
     { action: "convert-smart", label: "Convert to Smart Object", enabled: Boolean(active && active.type !== "annotation") },
     { action: "edit-contents", label: "Edit Contents", enabled: active?.type === "smart" },
@@ -16428,6 +16856,19 @@ async function runLayerMenuAction(controller, action) {
       case "toggle-mask-link":
         if (id && active?.mask) controller.setLayerMaskProps(id, { linked: active.mask.linked === false });
         break;
+      case "add-vector-mask":
+      case "add-vector-mask-hide":
+        if (id) controller.addVectorMask(id, action === "add-vector-mask" ? "reveal-all" : "hide-all");
+        break;
+      case "delete-vector-mask":
+        if (id) controller.removeVectorMask(id);
+        break;
+      case "toggle-vector-mask":
+        if (id && active?.vectorMask) controller.setVectorMaskProps(id, { enabled: active.vectorMask.enabled === false });
+        break;
+      case "rasterize-vector-mask":
+        if (id) controller.rasterizeVectorMask(id);
+        break;
       case "rasterize":
         if (id) await controller.rasterizeLayer(id);
         break;
@@ -18020,6 +18461,7 @@ export {
   combineSelections,
   compileAdjustmentLayer,
   componentPath,
+  componentsCoverage,
   compositeDeep,
   compositeSurfaceOver,
   computeHistogram,
@@ -18139,6 +18581,7 @@ export {
   effectLayerTiming,
   effectPixelsToSurface,
   effectReach,
+  effectiveLayerMask,
   effectiveProof,
   effectsFingerprint,
   effectsMargin,
@@ -18175,6 +18618,7 @@ export {
   flattenPath,
   flipCorners,
   flowField,
+  followLayerMove,
   fontOf,
   formatControlValue,
   fullSelection,
@@ -18195,6 +18639,7 @@ export {
   growSelection,
   guidePlanes,
   guidedFilterColor,
+  handleMaskViewKey,
   handlePaintShortcut,
   handleQuickMaskKey,
   handleSelectionShortcut,
@@ -18238,6 +18683,7 @@ export {
   invertMatrix3,
   invertSelection,
   isActiveFilter,
+  isActiveVectorMask,
   isAdjustmentKind,
   isBitDepth,
   isBlendMode,
@@ -18285,6 +18731,7 @@ export {
   layerMaskCoverage,
   layerMaskFromSelection,
   layerMaskKey,
+  layerMaskSelection,
   layerMenu,
   layerName,
   layerPanelRows,
@@ -18376,6 +18823,7 @@ export {
   offsetLayer,
   offsetShape,
   offsetSmartObject,
+  offsetVectorMask,
   openMaskFile,
   openPsdFile,
   packRgba,
@@ -18496,6 +18944,7 @@ export {
   resolveMosaicRegionBounds,
   resolvePaintGradient,
   resolveProfile,
+  resolveVectorMasks,
   restyleRange,
   retouchFilter,
   reversePaintGradient,
@@ -18625,6 +19074,7 @@ export {
   transformShapeComponents,
   transformSurface,
   transformTypeLayer,
+  transformVectorMask,
   transformedBounds,
   transformedBox,
   transformedPoint,
@@ -18651,6 +19101,10 @@ export {
   validateEffectGradient,
   validateLayerEffect,
   validateLayerEffects,
+  vectorMaskBounds,
+  vectorMaskCoverage,
+  vectorMaskThumbnail,
+  vectorMaskThumbnailClick,
   versionedDescriptorBytes,
   vibranceLinear,
   vibrancePixel,