@pixerate/editor 0.187.0 → 0.189.0

package/dist/image-editor/index.js

@@ -196,6 +196,7 @@ import {
   layerMaskCoverage,
   layerMaskFromSelection,
   layerMaskKey,
+  layerMaskSelection,
   layerName,
   layerTree,
   layerTypeLabel,
@@ -298,6 +299,8 @@ import {
   selectionArea,
   selectionFromCoverage,
   selectionFromPixels,
+  selectionFromRegion,
+  selectionFromTiles,
   selectionToCoverage,
   selectionToPixels,
   selectionValueAt,
@@ -370,7 +373,7 @@ import {
   writePsd,
   xyToTempTint,
   xyToUv
-} from "../chunk-FW7N64XK.js";
+} from "../chunk-ZEHTUR7Z.js";
 import {
   parseCssColor
 } from "../chunk-3CI7FRMK.js";
@@ -1363,6 +1366,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) {
@@ -1802,6 +1823,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}`;
@@ -2835,8 +2882,33 @@ var TypeToolGesture = class {
 
 // src/image-editor/selection/shapes.ts
 function polygonCoverage(points, width, height, antiAlias = true) {
+  const { box, coverage } = polygonCoverageBox(points, width, height, antiAlias);
+  if (!box || box.width === width && box.height === height) return box ? coverage : new Float32Array(width * height);
   const m = new Float32Array(width * height);
-  if (points.length < 3 || width <= 0 || height <= 0) return m;
+  for (let y = 0; y < box.height; y++) m.set(coverage.subarray(y * box.width, (y + 1) * box.width), (box.y + y) * width + box.x);
+  return m;
+}
+function polygonCoverageBox(points, width, height, antiAlias = true) {
+  const none = { box: null, coverage: new Float32Array(0) };
+  if (points.length < 3 || width <= 0 || height <= 0) return none;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const p of points) {
+    if (!Number.isFinite(p.x) || !Number.isFinite(p.y)) continue;
+    minX = Math.min(minX, p.x);
+    minY = Math.min(minY, p.y);
+    maxX = Math.max(maxX, p.x);
+    maxY = Math.max(maxY, p.y);
+  }
+  const bx0 = Math.max(0, Math.floor(minX));
+  const by0 = Math.max(0, Math.floor(minY));
+  const bx1 = Math.min(width, Math.ceil(maxX));
+  const by1 = Math.min(height, Math.ceil(maxY));
+  if (!(bx1 > bx0 && by1 > by0)) return none;
+  const bw = bx1 - bx0;
+  const m = new Float32Array(bw * (by1 - by0));
   const sub2 = antiAlias ? 4 : 1;
   const edges = [];
   for (let i = 0; i < points.length; i++) {
@@ -2850,8 +2922,8 @@ function polygonCoverage(points, width, height, antiAlias = true) {
   let next = 0;
   let active = [];
   const xs = [];
-  for (let py = 0; py < height; py++) {
-    const row = py * width;
+  for (let py = by0; py < by1; py++) {
+    const row = (py - by0) * bw - bx0;
     for (let s = 0; s < sub2; s++) {
       const y = py + (s + 0.5) / sub2;
       while (next < edges.length && edges[next].top <= y) active.push(edges[next++]);
@@ -2881,15 +2953,14 @@ function polygonCoverage(points, width, height, antiAlias = true) {
     }
   }
   for (let i = 0; i < m.length; i++) if (m[i] > 1) m[i] = 1;
-  return m;
+  return { box: { x: bx0, y: by0, width: bw, height: by1 - by0 }, coverage: m };
 }
-function toMask(width, height, coverage) {
+function polygonSelection(width, height, points, options = {}) {
+  const { box, coverage } = polygonCoverageBox(points, width, height, options.antiAlias ?? true);
+  if (!box) return createSelectionMask(width, height);
   const out = new Uint8Array(coverage.length);
   for (let i = 0; i < out.length; i++) out[i] = coverageToByte(coverage[i]);
-  return createSelectionMask(width, height, out);
-}
-function polygonSelection(width, height, points, options = {}) {
-  return toMask(width, height, polygonCoverage(points, width, height, options.antiAlias ?? true));
+  return selectionFromRegion(width, height, box, out);
 }
 function normalizeRect(rect) {
   const x = rect.width < 0 ? rect.x + rect.width : rect.x;
@@ -3531,9 +3602,7 @@ function selectionRing(sel, width, location) {
 var DEFAULT_CHANNEL_COLOR = "#ff0000";
 function describeChannel(channel) {
   const { mask, ...rest } = channel;
-  let sum = 0;
-  for (let i = 0; i < mask.data.length; i++) sum += mask.data[i];
-  const percent = Math.round(sum / 255 / Math.max(1, mask.data.length) * 1e4) / 100;
+  const percent = Math.round(selectionArea(mask) / Math.max(1, mask.width * mask.height) * 1e4) / 100;
   return { ...rest, bounds: mask.bounds, percent };
 }
 function serializeChannels(channels) {
@@ -4144,8 +4213,7 @@ var FreeTransformSession = class {
       const result = part.base ? compositeSurfaceOver(part.base, moved) : moved;
       if (part.what === "selection") {
         const { width, height } = this.host.canvas();
-        const data = new Uint8Array(readRegion(result, { x: 0, y: 0, width, height }).buffer);
-        const next = createSelectionMask(width, height, data);
+        const next = selectionFromTiles(width, height, result);
         selection = next.bounds ? next : null;
       } else if (part.what === "pixels") {
         layers = mapLayer(layers, targetId, (l) => {
@@ -5471,14 +5539,18 @@ var ImageEditorController = class {
     this.trimHistoryBytes();
   }
   /**
-   * Bytes of pixel tiles held only by undo / redo steps (not by the current state). The oldest
-   * undo steps are dropped while it exceeds `maxHistoryBytes`.
+   * Bytes of pixel, selection and channel tiles held only by undo / redo steps (not by the
+   * current state). The oldest undo steps are dropped while it exceeds `maxHistoryBytes`.
    */
   get historyBytes() {
     const live = /* @__PURE__ */ new Set();
     collectStateTiles(this.state.layers, live);
+    collectSelectionTiles(this.state.selection, this.state.channels, live);
     const held = /* @__PURE__ */ new Set();
-    for (const e of [...this.undoStack, ...this.redoStack]) collectStateTiles(e.layers, held);
+    for (const e of [...this.undoStack, ...this.redoStack]) {
+      collectStateTiles(e.layers, held);
+      collectSelectionTiles(e.selection, e.channels, held);
+    }
     let n = 0;
     for (const t of held) if (!live.has(t)) n += t.data.byteLength;
     return n;
@@ -7376,7 +7448,7 @@ var ImageEditorController = class {
   /** @internal Shows a stroke's live surface (no history). */
   _strokeUpdate(layerId, channel, surface, rects) {
     if (channel === "quick-mask") {
-      this.state.selection = this.selectionFromSurface(surface, this.state.selection ?? null, rects);
+      this.state.selection = this.selectionFromSurface(surface);
       this.notify();
       return;
     }
@@ -8324,6 +8396,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() {
@@ -8454,35 +8561,18 @@ var ImageEditorController = class {
     const { width, height } = this.naturalSize;
     const sel = this.state.selection;
     if (!sel?.bounds) return emptySurface(1, 0);
-    const sized = sel.width === width && sel.height === height ? sel : resizeSelection(sel, width, height);
-    return surfaceFromPixels({ width, height, data: sized.data }, 1, 0, 0, 0);
+    return (sel.width === width && sel.height === height ? sel : resizeSelection(sel, width, height)).surface;
   }
-  /** The selection a painted Quick Mask surface stands for (`rects` changed since `base`). */
-  selectionFromSurface(surface, base = null, rects) {
+  /** The selection a painted Quick Mask surface stands for (it shares the surface's tiles). */
+  selectionFromSurface(surface) {
     const { width, height } = this.naturalSize;
-    let data;
-    if (base && rects && base.width === width && base.height === height) {
-      data = new Uint8Array(base.data);
-      for (const r of rects) {
-        const x0 = Math.max(0, Math.floor(r.x));
-        const y0 = Math.max(0, Math.floor(r.y));
-        const x1 = Math.min(width, Math.ceil(r.x + r.width));
-        const y1 = Math.min(height, Math.ceil(r.y + r.height));
-        if (x1 <= x0 || y1 <= y0) continue;
-        const part = readRegion(surface, { x: x0, y: y0, width: x1 - x0, height: y1 - y0 });
-        for (let y = y0; y < y1; y++) data.set(part.subarray((y - y0) * (x1 - x0), (y - y0 + 1) * (x1 - x0)), y * width + x0);
-      }
-    } else {
-      const all = readRegion(surface, { x: 0, y: 0, width, height });
-      data = new Uint8Array(all.buffer, all.byteOffset, all.length);
-    }
-    return normalizeSelection(createSelectionMask(width, height, data));
+    return normalizeSelection(selectionFromTiles(width, height, surface));
   }
   // --- Layer masks ---
   maskFromSelection(sel, props = {}) {
     const { width, height } = this.naturalSize;
     const sized = sel.width === width && sel.height === height ? sel : resizeSelection(sel, width, height);
-    const mask = { surface: surfaceFromPixels({ width, height, data: sized.data }, 1, 0, 0, 0), defaultValue: 0 };
+    const mask = { surface: sized.surface, defaultValue: 0 };
     return withMaskProps(mask, props);
   }
   /**
@@ -10154,6 +10244,10 @@ function isOpaqueInside(surface, width, height) {
   }
   return true;
 }
+function collectSelectionTiles(selection, channels, into) {
+  if (selection) collectTiles(selection.surface, into);
+  for (const c of channels ?? []) collectTiles(c.mask.surface, into);
+}
 function collectStateTiles(layers, into) {
   for (const l of flattenLayers(layers)) {
     if (l.type === "pixel" && l.source !== "document") collectTiles(l.surface, into);
@@ -11063,9 +11157,7 @@ var REFINE_EDGE_CONTROLS = [
 ];
 function describeSelection(mask) {
   if (!mask || !mask.bounds) return "No selection";
-  let sum = 0;
-  for (let i = 0; i < mask.data.length; i++) sum += mask.data[i];
-  const pct2 = sum / 255 / mask.data.length * 100;
+  const pct2 = selectionArea(mask) / (mask.width * mask.height) * 100;
   const shown = pct2 >= 10 ? Math.round(pct2) : Math.round(pct2 * 10) / 10;
   return `${mask.bounds.width} \xD7 ${mask.bounds.height} px selected (${shown}% of the image)`;
 }
@@ -12075,6 +12167,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);
@@ -12097,6 +12205,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);
@@ -12124,7 +12234,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)
   };
@@ -12812,6 +12922,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",
@@ -12952,6 +13083,7 @@ function createImageLayerTools(controller) {
     addMask,
     applyMask,
     removeMask,
+    maskView,
     maskProps,
     viaCopy,
     rasterize,
@@ -13292,196 +13424,447 @@ 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 });
-}
-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;
-  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;
-  }
-  if (key === "[" || key === "{") {
-    if (e.shiftKey || key === "{") set({ hardness: Math.max(0, Math.round((brush.hardness - 0.25) * 4) / 4) });
-    else set({ size: Math.max(1, brush.size - sizeStep(brush.size - 1)) });
-    return true;
-  }
-  if (key === "]" || key === "}") {
-    if (e.shiftKey || key === "}") set({ hardness: Math.min(1, Math.round((brush.hardness + 0.25) * 4) / 4) });
-    else set({ size: Math.min(MAX_BRUSH_SIZE, brush.size + sizeStep(brush.size)) });
-    return true;
-  }
-  if (/^[0-9]$/.test(key) && isPaintTool(controller.getState().activeTool)) {
-    set({ opacity: key === "0" ? 1 : Number(key) / 10 });
-    return true;
-  }
-  return false;
+// 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 PaintGesture = class {
-  constructor(controller) {
+var SelectionGesture = class {
+  constructor(controller, getOptions) {
     this.controller = controller;
+    this.getOptions = getOptions;
   }
   controller;
-  stroke = null;
+  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;
+  }
+  if (key === "[" || key === "{") {
+    if (e.shiftKey || key === "{") set({ hardness: Math.max(0, Math.round((brush.hardness - 0.25) * 4) / 4) });
+    else set({ size: Math.max(1, brush.size - sizeStep(brush.size - 1)) });
+    return true;
+  }
+  if (key === "]" || key === "}") {
+    if (e.shiftKey || key === "}") set({ hardness: Math.min(1, Math.round((brush.hardness + 0.25) * 4) / 4) });
+    else set({ size: Math.min(MAX_BRUSH_SIZE, brush.size + sizeStep(brush.size)) });
+    return true;
+  }
+  if (/^[0-9]$/.test(key) && isPaintTool(controller.getState().activeTool)) {
+    set({ opacity: key === "0" ? 1 : Number(key) / 10 });
+    return true;
+  }
+  return false;
+}
+var PaintGesture = class {
+  constructor(controller) {
+    this.controller = controller;
+  }
+  controller;
+  stroke = null;
   move = null;
   /** The last refusal (e.g. "layer is locked"), for the editor to show. */
   error = null;
@@ -15825,247 +16208,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) {
@@ -16241,6 +16383,10 @@ 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 {
@@ -18183,6 +18329,7 @@ export {
   growSelection,
   guidePlanes,
   guidedFilterColor,
+  handleMaskViewKey,
   handlePaintShortcut,
   handleQuickMaskKey,
   handleSelectionShortcut,
@@ -18273,6 +18420,7 @@ export {
   layerMaskCoverage,
   layerMaskFromSelection,
   layerMaskKey,
+  layerMaskSelection,
   layerMenu,
   layerName,
   layerPanelRows,
@@ -18410,6 +18558,7 @@ export {
   pointerStrokeSample,
   pointerStrokeSamples,
   polygonCoverage,
+  polygonCoverageBox,
   polygonSelection,
   posterizeValue,
   presetWarp,
@@ -18509,6 +18658,8 @@ export {
   selectionArea,
   selectionFromCoverage,
   selectionFromPixels,
+  selectionFromRegion,
+  selectionFromTiles,
   selectionModeFromModifiers,
   selectionOutline,
   selectionRing,