@pixerate/editor 0.188.0 → 0.189.0

package/dist/image-editor/index.js

@@ -196,6 +196,7 @@ import {
   layerMaskCoverage,
   layerMaskFromSelection,
   layerMaskKey,
+  layerMaskSelection,
   layerName,
   layerTree,
   layerTypeLabel,
@@ -372,7 +373,7 @@ import {
   writePsd,
   xyToTempTint,
   xyToUv
-} from "../chunk-IGMNJM2H.js";
+} from "../chunk-ZEHTUR7Z.js";
 import {
   parseCssColor
 } from "../chunk-3CI7FRMK.js";
@@ -1365,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) {
@@ -1804,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}`;
@@ -8351,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() {
@@ -12087,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);
@@ -12109,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);
@@ -12136,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)
   };
@@ -12824,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",
@@ -12964,6 +13083,7 @@ function createImageLayerTools(controller) {
     addMask,
     applyMask,
     removeMask,
+    maskView,
     maskProps,
     viaCopy,
     rasterize,
@@ -13304,201 +13424,452 @@ 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;
-  move = null;
-  /** The last refusal (e.g. "layer is locked"), for the editor to show. */
+  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 Boolean(this.stroke || this.move);
+    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;
+  get active() {
+    return Boolean(this.stroke || this.move);
   }
   down(sample) {
     this.error = null;
@@ -15837,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) {
@@ -16253,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 {
@@ -18195,6 +18329,7 @@ export {
   growSelection,
   guidePlanes,
   guidedFilterColor,
+  handleMaskViewKey,
   handlePaintShortcut,
   handleQuickMaskKey,
   handleSelectionShortcut,
@@ -18285,6 +18420,7 @@ export {
   layerMaskCoverage,
   layerMaskFromSelection,
   layerMaskKey,
+  layerMaskSelection,
   layerMenu,
   layerName,
   layerPanelRows,