@pixerate/editor 0.178.0 → 0.180.0

package/dist/image-editor/index.js

@@ -948,6 +948,24 @@ function quickMaskPixels(mask, style = {}) {
   }
   return out;
 }
+var MARCHING_ANTS_STEP_MS = 100;
+function prefersReducedMotion() {
+  try {
+    return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+function startMarchingAnts(tick, stepMs = MARCHING_ANTS_STEP_MS) {
+  if (prefersReducedMotion()) return () => {
+  };
+  let offset = 0;
+  const id = setInterval(() => {
+    offset = (offset + 1) % 8;
+    tick(offset);
+  }, stepMs);
+  return () => clearInterval(id);
+}
 
 // src/image-editor/layers/render.ts
 function isQuarterTurn(rotate) {
@@ -1353,8 +1371,8 @@ var ImageEditorRenderer = class {
         ctx.rect(region.x, region.y, region.width, region.height);
         ctx.clip();
         if (state.selection?.bounds && display === "quickMask") this.drawQuickMask(ctx, state.selection);
-        else if (state.selection?.bounds && display === "ants") this.drawAnts(ctx, state.selection, projection.scale, options.antsOffset ?? 0);
-        if (options.draftSelectionPath?.length) this.drawDraftPath(ctx, options.draftSelectionPath, projection.scale);
+        else if (state.selection?.bounds && display === "ants") this.drawAnts(ctx, state.selection, projection.scale / u, options.antsOffset ?? 0);
+        if (options.draftSelectionPath?.length) this.drawDraftPath(ctx, options.draftSelectionPath, projection.scale / u);
       } catch {
       }
       ctx.restore();
@@ -1460,6 +1478,12 @@ var ImageEditorRenderer = class {
           outline.forEach((p, i) => i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y));
           ctx.closePath();
         }
+        const rotate = t.rotate && t.outline.length >= 2 ? scr(t.rotate) : null;
+        if (rotate) {
+          const n = scr({ x: (t.outline[0].x + t.outline[1].x) / 2, y: (t.outline[0].y + t.outline[1].y) / 2 });
+          ctx.moveTo(n.x, n.y);
+          ctx.lineTo(rotate.x, rotate.y);
+        }
         ctx.lineWidth = 3 * u;
         ctx.strokeStyle = "rgba(0,0,0,0.25)";
         ctx.stroke();
@@ -1467,6 +1491,15 @@ var ImageEditorRenderer = class {
         ctx.strokeStyle = "#ffffff";
         ctx.stroke();
         drawOverlayHandles(ctx, [...t.handles, ...t.warp?.anchors ?? []].map(scr), u);
+        if (rotate) {
+          ctx.beginPath();
+          ctx.arc(rotate.x, rotate.y, 5 * u, 0, Math.PI * 2);
+          ctx.fillStyle = "#ffffff";
+          ctx.fill();
+          ctx.lineWidth = 1.5 * u;
+          ctx.strokeStyle = OVERLAY_HANDLE_EDGE;
+          ctx.stroke();
+        }
         for (const h of (t.warp?.handles ?? []).map((w) => scr(w.point))) {
           ctx.beginPath();
           ctx.arc(h.x, h.y, 3.5 * u, 0, Math.PI * 2);
@@ -1757,7 +1790,10 @@ var ImageEditorRenderer = class {
     }
     ctx.drawImage(canvas, 0, 0, selection.width, selection.height);
   }
-  /** Marching ants: a white line under a black dashed one, one screen pixel wide. */
+  /**
+   * Marching ants: a white line under a black dashed one, one screen pixel wide. `scale` is
+   * screen pixels per natural pixel (the projection scale times the host's CSS scale).
+   */
   drawAnts(ctx, selection, scale, offset) {
     let segs = this.outlineCache.get(selection);
     if (!segs) {
@@ -3067,6 +3103,35 @@ function hueRange(pixels, center) {
   return createSelectionMask(pixels.width, pixels.height, out);
 }
 
+// src/image-editor/selection/segmentation.ts
+var isPoint = (p) => !!p && typeof p === "object" && Number.isFinite(p.x) && Number.isFinite(p.y);
+function polygonsOf(result) {
+  const p = result.polygon;
+  if (!Array.isArray(p) || !p.length) return [];
+  const rings = Array.isArray(p[0]) ? p : [p];
+  return rings.map((ring) => Array.isArray(ring) ? ring.filter(isPoint) : []).filter((ring) => ring.length >= 3);
+}
+function segmentToSelection(width, height, result) {
+  let out = null;
+  for (const ring of polygonsOf(result)) {
+    out = combineSelections(out, polygonSelection(width, height, ring), "add");
+  }
+  if (result.mask && result.mask.width > 0 && result.mask.height > 0) {
+    const raw = selectionFromPixels(result.mask, { channel: "luminance" });
+    const sized = raw.width === width && raw.height === height ? raw : resizeSelection(raw, width, height);
+    out = combineSelections(out, sized, "add");
+  }
+  return out?.bounds ? out : null;
+}
+function segmentsToSelection(width, height, results) {
+  let out = null;
+  for (const r of results) {
+    const sel = segmentToSelection(width, height, r);
+    if (sel) out = combineSelections(out, sel, "add");
+  }
+  return out;
+}
+
 // src/image-editor/selection/refine.ts
 var DEFAULT_REFINE_EDGE_PARAMS = {
   radius: 0,
@@ -4654,6 +4719,8 @@ var ImageEditorController = class {
   viewKey = [];
   /** For `compositePixels` and mask evaluation (the renderer keeps its own for the viewport). */
   compositor = new LayerCompositor();
+  /** The segmentation provider behind `selectSubject` (see `setSegmentationProvider`). */
+  segmentation = null;
   /** The effects provider slot (see `setEffectsProvider`). */
   effects = new EffectsSlot();
   /** Renders provider effects: effect smart filter results and effect layers. */
@@ -4663,6 +4730,7 @@ var ImageEditorController = class {
     this.effects.subscribe(() => this.queueEffectRefresh("all"));
     this.effectsEngine.subscribe(() => this.queueEffectRefresh("incomplete"));
     if (options.effects) this.effects.set(options.effects);
+    if (options.segmentation) this.segmentation = options.segmentation;
     this.maxHistoryDepth = options.maxHistoryDepth ?? 50;
     if (options.textShaper !== void 0) this.textShaperValue = options.textShaper;
     this.maxHistoryBytes = options.maxHistoryBytes ?? 512 * 1024 * 1024;
@@ -4844,6 +4912,16 @@ var ImageEditorController = class {
     this.state.layers = next;
     this.notify();
   }
+  /** The registered segmentation provider, or `null` (then `selectSubject` is unavailable). */
+  get segmentationProvider() {
+    return this.segmentation;
+  }
+  /** Registers (or with `null` removes) the segmentation provider. Not an edit: no undo step. */
+  setSegmentationProvider(provider) {
+    if (this.segmentation === provider) return;
+    this.segmentation = provider;
+    this.notify();
+  }
   /** The registered effects provider, or `null`. */
   get effectsProvider() {
     return this.effects.provider;
@@ -7600,23 +7678,50 @@ var ImageEditorController = class {
    * RGBA pixels, by luminance (white = selected) or a channel. Any size; it is resampled.
    */
   async loadSelectionFromImage(source, options = {}) {
-    let pixels;
-    if (typeof source === "string") {
-      const img = await this.renderer.imageCache.get(source);
-      const w = img.naturalWidth || img.width;
-      const h = img.naturalHeight || img.height;
-      const canvas = this.renderer.createCanvas(w, h);
-      const ctx = canvas.getContext("2d");
-      if (ctx) ctx.drawImage(img, 0, 0, w, h);
-      const data = ctx?.getImageData?.(0, 0, w, h);
-      if (!data) throw new Error("The mask image pixels are not available (no canvas access); pass pixels.");
-      pixels = { width: w, height: h, data: data.data };
-    } else {
-      pixels = source;
-    }
+    const pixels = await this.decodeMaskImage(source);
     this.setSelection(selectionFromPixels(pixels, options), options.mode ?? "replace");
     return this.getSelection();
   }
+  /** A mask image (data URL / URL, or pixels as they are) as RGBA pixels. */
+  async decodeMaskImage(source) {
+    if (typeof source !== "string") return source;
+    const img = await this.renderer.imageCache.get(source);
+    const w = img.naturalWidth || img.width;
+    const h = img.naturalHeight || img.height;
+    const canvas = this.renderer.createCanvas(w, h);
+    const ctx = canvas.getContext("2d");
+    if (ctx) ctx.drawImage(img, 0, 0, w, h);
+    const data = ctx?.getImageData?.(0, 0, w, h);
+    if (!data) throw new Error("The mask image pixels are not available (no canvas access); pass pixels.");
+    return { width: w, height: h, data: data.data };
+  }
+  /**
+   * Select › Subject: asks the segmentation provider for the objects matching `target` ("the
+   * dog", "the sky") in the flattened image and selects their shapes, combined with the
+   * selection by `mode`, as one undo step. Returns what was found (labels and bounds in natural
+   * pixels); an empty list leaves the selection as it was. Throws without a provider.
+   */
+  async selectSubject(target, options = {}) {
+    const provider = this.segmentation;
+    if (!provider) throw new Error("Select Subject needs a segmentation provider (setSegmentationProvider).");
+    const description = target.trim();
+    if (!description) throw new Error("Describe the subject to select.");
+    const { width, height } = this.naturalSize;
+    const image = await this.toDataURL({ format: "image/png" });
+    const results = await provider.segment({ image, width, height, target: description, maxSegments: options.maxSegments, signal: options.signal });
+    options.signal?.throwIfAborted();
+    const decoded = [];
+    for (const r of results ?? []) {
+      decoded.push({ ...r, mask: r.mask !== void 0 ? await this.decodeMaskImage(r.mask) : void 0 });
+    }
+    const segments = decoded.map((r) => {
+      const one = segmentsToSelection(width, height, [r]);
+      return { label: r.label || description, bounds: one?.bounds ?? null, ...r.score !== void 0 ? { score: r.score } : {} };
+    });
+    const mask = segmentsToSelection(width, height, decoded);
+    if (mask) this.shapeCommand(mask, options);
+    return { segments: segments.filter((s) => s.bounds) };
+  }
   /** Quick Mask view (tints the unselected area). View state: no undo step. */
   setQuickMask(on) {
     if (Boolean(this.state.quickMask) === on) return;
@@ -10007,7 +10112,7 @@ var DEPTH_MASK_CONTROLS = [
 // src/image-editor/playback.ts
 var IMAGE_PLAYBACK_KIND = "layer";
 var PAINT = /^(paint_stroke|clone_stamp|heal_brush|spot_heal|dodge|burn|sponge|smudge|blur_stroke|sharpen_stroke|history_brush|set_clone_source|set_clone_transform|fill_pixels|clear_pixels|set_paint|set_retouch_options|load_mixer_brush|clean_mixer_brush)$/;
-var SELECT = /^(select_region|select_by_color|modify_selection|refine_selection|transform_selection|apply_selection_as_mask|layer_via_copy)$/;
+var SELECT = /^(select_region|select_subject|select_by_color|modify_selection|refine_selection|transform_selection|apply_selection_as_mask|layer_via_copy)$/;
 var ANNOTATE = /^(add_shape_layer|update_shape|add_shape_component|set_shape_component|remove_shape_component|merge_shape_components|add_text_layer|set_text|set_text_style|set_paragraph_style|set_text_frame|convert_text_to_shape)$/;
 var CROP = /^(set_crop|reset_crop|set_rotation|flip_image|transform_layer|warp_layer|flip_layer|offset_layer)$/;
 var ADJUST = /^(set_adjustments|add_adjustment_layer|update_adjustment_layer|remove_adjustment_layer|move_adjustment_layer)$/;
@@ -10028,7 +10133,7 @@ function createImagePlaybackLocator(controller) {
   };
 }
 var num = (v) => typeof v === "number" && Number.isFinite(v);
-var isPoint = (p) => !!p && typeof p === "object" && num(p.x) && num(p.y);
+var isPoint2 = (p) => !!p && typeof p === "object" && num(p.x) && num(p.y);
 function trace(points, max = 32) {
   const list = points.length <= max ? points : Array.from({ length: max }, (_, i) => points[Math.round(i * (points.length - 1) / (max - 1))]);
   if (!list.length) return [];
@@ -10064,7 +10169,7 @@ function planImageToolPlayback(tool, args) {
   const steps = [];
   const panel = imagePlaybackPanel(tool);
   if (panel) steps.push({ type: "open", ref: { kind: "panel", id: panel } });
-  const points = Array.isArray(args.points) ? args.points.filter(isPoint) : [];
+  const points = Array.isArray(args.points) ? args.points.filter(isPoint2) : [];
   const box = boxOf(args);
   if (points.length) steps.push(...trace(points));
   else if (box) steps.push({ type: "move", to: box.from }, { type: "press" }, { type: "drag", to: box.to }, { type: "release" });
@@ -10197,15 +10302,26 @@ function createImageSelectionTools(controller) {
   const selectRegion = {
     name: "select_region",
     title: "Select a region",
-    description: 'Selects a rectangle or ellipse (x, y, width, height in natural image pixels), everything ("all"), nothing ("none") or the inverse of the current selection ("invert"). One undoable step.',
+    description: 'Selects a rectangle or ellipse (x, y, width, height in natural image pixels), a polygon (the lasso: points along an outline, closed automatically), everything ("all"), nothing ("none") or the inverse of the current selection ("invert"). To cut out a subject, trace its contour with polygon (then refine_selection for soft edges such as fur or foliage) rather than selecting its bounding box. One undoable step.',
     inputSchema: {
       type: "object",
       properties: {
-        shape: { type: "string", enum: ["rect", "ellipse", "all", "none", "invert"], description: "What to select." },
+        shape: { type: "string", enum: ["rect", "ellipse", "polygon", "all", "none", "invert"], description: "What to select." },
         x: { type: "number", description: "rect / ellipse: left edge in natural image pixels." },
         y: { type: "number", description: "rect / ellipse: top edge in natural image pixels." },
         width: { type: "number", description: "rect / ellipse: width in natural image pixels." },
         height: { type: "number", description: "rect / ellipse: height in natural image pixels." },
+        points: {
+          type: "array",
+          minItems: 3,
+          items: {
+            type: "object",
+            properties: { x: { type: "number" }, y: { type: "number" } },
+            required: ["x", "y"],
+            additionalProperties: false
+          },
+          description: "polygon: at least 3 vertices along the outline, in order, in natural image pixels. Follow the edge closely; more points give a tighter contour."
+        },
         mode: modeSchema,
         feather: { type: "number", minimum: 0, description: "Feather radius in pixels (default 0)." }
       },
@@ -10213,7 +10329,7 @@ function createImageSelectionTools(controller) {
       additionalProperties: false
     },
     annotations: writeAnnotations("Select a region", true),
-    handler: ({ shape, x, y, width, height, mode, feather }) => {
+    handler: ({ shape, x, y, width, height, points, mode, feather }) => {
       const opts = { mode: parseSelectionMode(mode), feather: num2(feather, 0) };
       switch (shape) {
         case "all":
@@ -10235,8 +10351,16 @@ function createImageSelectionTools(controller) {
           else controller.selectEllipse(rect, opts);
           break;
         }
+        case "polygon": {
+          const list = Array.isArray(points) ? points.map((p) => ({ x: num2(p?.x, NaN), y: num2(p?.y, NaN) })) : [];
+          if (list.length < 3 || !list.every((p) => Number.isFinite(p.x) && Number.isFinite(p.y))) {
+            throw new Error("polygon needs points: at least 3 { x, y } vertices.");
+          }
+          controller.selectPolygon(list, opts);
+          break;
+        }
         default:
-          throw new Error(`Unknown shape "${String(shape)}". Use rect, ellipse, all, none or invert.`);
+          throw new Error(`Unknown shape "${String(shape)}". Use rect, ellipse, polygon, all, none or invert.`);
       }
       return summary(controller);
     }
@@ -10376,6 +10500,53 @@ function createImageSelectionTools(controller) {
   };
   return [getSelection, selectRegion, selectByColor, modify, refine, applyMask];
 }
+function createImageSubjectSelectionTool(controller) {
+  return {
+    name: "select_subject",
+    title: "Select a subject",
+    description: 'Select \u203A Subject: an AI segmentation model finds the objects matching target (a description such as "the dog", "the house", "the sky") in the flattened image and selects their outlines, combined with the selection by mode. Use it to cut a subject out by its contour (then layer_via_copy for a layer of just that subject); describe one object precisely to get only that one. One undoable step. Returns the selection and the objects found (label, bounds); none found leaves the selection unchanged.',
+    inputSchema: {
+      type: "object",
+      properties: {
+        target: { type: "string", minLength: 1, description: "What to select, in words." },
+        maxSegments: {
+          type: "integer",
+          minimum: 1,
+          maximum: 32,
+          description: "Select at most this many matching objects (default the model\u2019s; 1 for a single subject)."
+        },
+        mode: modeSchema,
+        feather: { type: "number", minimum: 0, description: "Feather radius in pixels (default 0)." }
+      },
+      required: ["target"],
+      additionalProperties: false
+    },
+    annotations: { ...writeAnnotations("Select a subject"), openWorldHint: true },
+    handler: async ({ target, maxSegments, mode, feather }) => {
+      if (typeof target !== "string" || !target.trim()) throw new Error("target must describe what to select.");
+      const { segments } = await controller.selectSubject(target, {
+        mode: parseSelectionMode(mode),
+        feather: num2(feather, 0),
+        maxSegments: typeof maxSegments === "number" ? Math.max(1, Math.round(maxSegments)) : void 0
+      });
+      return { ...summary(controller), found: segments };
+    }
+  };
+}
+function createImageSegmentationToolProvider(controller, options = {}) {
+  const tool = createImageSubjectSelectionTool(controller);
+  return withImagePlayback(
+    {
+      id: options.id ?? "image-segmentation",
+      namespace: options.namespace,
+      title: "Image segmentation",
+      description: "Select \u203A Subject: select objects in the image by description through an AI segmentation model.",
+      skill: "pixerate-image-editor",
+      tools: () => controller.segmentationProvider ? [tool] : []
+    },
+    options.playbackSurface
+  );
+}
 
 // src/image-editor/capture.ts
 var NO_CANVAS = "Rendering is not available in this environment.";
@@ -11161,7 +11332,7 @@ function createImageLayerTools(controller) {
   const viaCopy = {
     name: "layer_via_copy",
     title: "New layer from the selection",
-    description: "Layer via Copy: copies the selected pixels of a pixel layer (layerId, default the active layer) to a new layer directly above it and makes it active. cut: true also removes them from the source (Layer via Cut). Needs a selection. One undo step. Returns the new layer.",
+    description: "Layer via Copy: copies the selected pixels of a pixel layer (layerId, default the active layer) to a new layer directly above it and makes it active. cut: true also removes them from the source (Layer via Cut). Needs a selection; the new layer takes the selection\u2019s shape, so select the subject\u2019s outline (select_region polygon, select_by_color) to isolate it, not its bounding box. One undo step. Returns the new layer.",
     inputSchema: {
       type: "object",
       properties: {
@@ -14731,6 +14902,7 @@ function layerPanels(layer, options = {}) {
   if (layer.mask) {
     panels.push({ id: "mask", title: "Mask Options" });
   }
+  panels.push({ id: "selection", title: "Selection" });
   return panels;
 }
 
@@ -14967,6 +15139,7 @@ async function downloadPsd(controller, name = "image") {
 }
 
 // src/image-editor/layers/transform-ui.ts
+var TRANSFORM_ROTATE_HANDLE_OFFSET = 24;
 var CORNERS = ["nw", "ne", "se", "sw"];
 var SIDES = ["n", "e", "s", "w"];
 var CORNER_INDEX = { nw: 0, ne: 1, se: 2, sw: 3 };
@@ -15019,9 +15192,18 @@ var CURSOR = {
   e: "ew-resize",
   w: "ew-resize",
   reference: "move",
+  rotate: "grab",
   inside: "move",
   outside: "alias"
 };
+function rotateHandleAt(nw, ne, centre, offset) {
+  const len = Math.hypot(ne.x - nw.x, ne.y - nw.y);
+  if (!(offset > 0) || !len) return void 0;
+  const n = { x: (nw.x + ne.x) / 2, y: (nw.y + ne.y) / 2 };
+  let dir = { x: (ne.y - nw.y) / len, y: -(ne.x - nw.x) / len };
+  if (dir.x * (centre.x - n.x) + dir.y * (centre.y - n.y) > 0) dir = { x: -dir.x, y: -dir.y };
+  return { x: n.x + dir.x * offset, y: n.y + dir.y * offset };
+}
 var meshIndex = (h) => h && h.startsWith("mesh:") ? Number(h.slice(5)) : -1;
 var mod = (m) => Boolean(m.ctrlKey || m.metaKey);
 var add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y });
@@ -15054,30 +15236,38 @@ function insidePolygon(poly, p) {
   }
   return inside;
 }
-function quadFrameOverlay(corners, handles = true) {
+function quadFrameOverlay(corners, handles = true, rotateOffset = 0) {
   const [nw, ne, se, sw] = corners;
   const mid = (a, b) => ({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 });
   const at = { nw, ne, se, sw, n: mid(nw, ne), e: mid(ne, se), s: mid(se, sw), w: mid(sw, nw) };
+  const reference = mid(nw, se);
+  const rotate = handles ? rotateHandleAt(nw, ne, reference, rotateOffset) : void 0;
   return {
     outline: CORNERS.map((id) => ({ ...at[id] })),
     handles: handles ? [...CORNERS, ...SIDES].map((id) => ({ id, x: at[id].x, y: at[id].y })) : [],
-    reference: mid(nw, se)
+    reference,
+    ...rotate ? { rotate } : {}
   };
 }
+function nearestHandle(overlay, p, tolerance) {
+  let handle = null;
+  let distance = tolerance;
+  const points = overlay.rotate ? [...overlay.handles, { id: "rotate", ...overlay.rotate }] : overlay.handles;
+  for (const h of points) {
+    const d = Math.hypot(h.x - p.x, h.y - p.y);
+    if (d <= distance) {
+      handle = h.id;
+      distance = d;
+    }
+  }
+  return { handle, distance };
+}
 function boxFrameOverlay(box, handles = true) {
   const { x, y, width: w, height: h } = box;
   return quadFrameOverlay([{ x, y }, { x: x + w, y }, { x: x + w, y: y + h }, { x, y: y + h }], handles);
 }
 function boxFrameHit(overlay, p, tolerance, band) {
-  let best = null;
-  let bestD = tolerance;
-  for (const h of overlay.handles) {
-    const d = Math.hypot(h.x - p.x, h.y - p.y);
-    if (d <= bestD) {
-      best = h.id;
-      bestD = d;
-    }
-  }
+  const best = nearestHandle(overlay, p, tolerance).handle;
   if (best) return best;
   if (insideQuad(overlay.outline, p)) return "inside";
   const o = overlay.outline;
@@ -15246,12 +15436,15 @@ var FreeTransformTool = class {
       return { id, x: p.x, y: p.y };
     });
     const out = { outline: this.corners.map((p) => ({ x: p.x, y: p.y })), handles, reference: this.referencePoint() ?? { x: 0, y: 0 } };
+    const rotate = rotateHandleAt(handles[0], handles[1], applyHomography(h, { x: s.box.x + s.box.width / 2, y: s.box.y + s.box.height / 2 }) ?? out.reference, TRANSFORM_ROTATE_HANDLE_OFFSET / this.viewScale);
+    if (rotate) out.rotate = rotate;
     if (this.modeValue === "warp" && this.mesh) {
       const m = this.mesh;
       const at = (p) => applyHomography(h, p) ?? p;
       const pts = m.points.map(at);
       const edit = warpMeshEditPoints(m);
       out.handles = [];
+      delete out.rotate;
       out.outline = warpMeshGridCurves({ ...m, points: pts }).length ? this.meshOutline(pts, m) : out.outline;
       out.warp = {
         curves: warpMeshGridCurves({ ...m, points: pts }),
@@ -15293,15 +15486,7 @@ var FreeTransformTool = class {
       if (best2 >= 0) return `mesh:${best2}`;
       return insidePolygon(o.outline, p) ? "inside" : "outside";
     }
-    let best = null;
-    let bestD = tolerance;
-    for (const h of o.handles) {
-      const d = Math.hypot(h.x - p.x, h.y - p.y);
-      if (d <= bestD) {
-        best = h.id;
-        bestD = d;
-      }
-    }
+    let { handle: best, distance: bestD } = nearestHandle(o, p, tolerance);
     if (Math.hypot(o.reference.x - p.x, o.reference.y - p.y) < bestD) best = "reference";
     if (best) return best;
     return insideQuad(o.outline, p) ? "inside" : "outside";
@@ -15383,7 +15568,7 @@ var FreeTransformTool = class {
     const handle = d.handle;
     const isCorner = handle in CORNER_INDEX;
     const isSide = handle in SIDE_CORNERS;
-    const rotating = handle === "outside" || this.modeValue === "rotate" && (isCorner || isSide);
+    const rotating = handle === "outside" || handle === "rotate" || this.modeValue === "rotate" && (isCorner || isSide);
     if (handle === "inside") {
       if (m.shiftKey) delta = Math.abs(delta.x) >= Math.abs(delta.y) ? { x: delta.x, y: 0 } : { x: 0, y: delta.y };
       return map((q2) => add(q2, delta));
@@ -15852,6 +16037,7 @@ export {
   LayerCompositor,
   LayerEffectError,
   LayerOperationError,
+  MARCHING_ANTS_STEP_MS,
   MAX_BATCH,
   MAX_BRUSH_SIZE,
   MAX_CANVAS_BACKING_SIDE,
@@ -15961,6 +16147,7 @@ export {
   TONE_RANGES,
   TONE_RANGE_PRESETS,
   TRANSFORM_ANCHORS,
+  TRANSFORM_ROTATE_HANDLE_OFFSET,
   TextEditSession,
   TileMedium,
   TilePixelSource,
@@ -16130,9 +16317,11 @@ export {
   createImagePlaybackLocator,
   createImagePsdTools,
   createImageRetouchTools,
+  createImageSegmentationToolProvider,
   createImageSelectionTools,
   createImageShapeTools,
   createImageSmartObjectTools,
+  createImageSubjectSelectionTool,
   createImageTransformTools,
   createImageTypeTools,
   createMetricTextShaper,
@@ -16573,6 +16762,8 @@ export {
   scalePaintGradient,
   seamlessClone,
   seedFromString,
+  segmentToSelection,
+  segmentsToSelection,
   selectionArea,
   selectionFromCoverage,
   selectionFromPixels,
@@ -16630,6 +16821,7 @@ export {
   srgbEncode,
   srgbToLinear,
   standardBlendMode,
+  startMarchingAnts,
   stepSlotTs,
   strokeGrainCatch,
   styleAt,

package/dist/image-editor/layers/panel.d.cts

@@ -123,6 +123,7 @@ export interface LayerPanelsOptions {
  *
  * `properties` ("Layer Properties") is first for every layer and includes the layer's Layer Style
  * (drop shadow, stroke, glow…: `layerEffectsPanel`) for layers that can take one, with or without a
- * provider. There is no separate `effects` (Layer Effects) or `smart-filters` panel.
+ * provider. There is no separate `effects` (Layer Effects) or `smart-filters` panel. `selection`
+ * is last for every layer, and with no active layer follows `canvas-size`.
  */
 export declare function layerPanels(layer: ImageLayer | null, options?: LayerPanelsOptions): LayerPanelDescriptor[];

package/dist/image-editor/layers/panel.d.ts

@@ -123,6 +123,7 @@ export interface LayerPanelsOptions {
  *
  * `properties` ("Layer Properties") is first for every layer and includes the layer's Layer Style
  * (drop shadow, stroke, glow…: `layerEffectsPanel`) for layers that can take one, with or without a
- * provider. There is no separate `effects` (Layer Effects) or `smart-filters` panel.
+ * provider. There is no separate `effects` (Layer Effects) or `smart-filters` panel. `selection`
+ * is last for every layer, and with no active layer follows `canvas-size`.
  */
 export declare function layerPanels(layer: ImageLayer | null, options?: LayerPanelsOptions): LayerPanelDescriptor[];

package/dist/image-editor/layers/transform-ui.d.cts

@@ -10,8 +10,9 @@
  *   proportional; side: scale one axis;
  * - Mod (Ctrl / Cmd) + corner: distort that corner; Mod + side: skew along the side (Alt: about
  *   the centre); Mod + Alt + Shift + corner: perspective;
- * - outside the box: rotate about the reference point (Shift: 15° steps); inside: move (Shift:
- *   along one axis); the reference point: move it;
+ * - the rotate handle on its stem above the top edge, or outside the box: rotate about the
+ *   reference point (Shift: 15° steps); inside: move (Shift: along one axis); the reference
+ *   point: move it;
  * - the mode switch (rotate, skew, distort, perspective) makes every handle do that;
  * - Warp: drag a mesh anchor or handle (the grid stays smooth across its lines), or anywhere
  *   inside to pull the surface; presets and the grid size come from the options bar. The warp is
@@ -26,7 +27,9 @@ import type { Interpolation } from '../../raster/transform.cjs';
 import type { CropBox, ImagePoint } from '../types.cjs';
 import type { ShortcutEvent } from './paint-ui.cjs';
 /** What a pointer is over (`mesh:<index>`: a warp mesh control point). */
-export type TransformHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'reference' | 'inside' | 'outside' | `mesh:${number}`;
+export type TransformHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'rotate' | 'reference' | 'inside' | 'outside' | `mesh:${number}`;
+/** Screen pixels from the top edge's midpoint to the rotate handle (as the vector editor's). */
+export declare const TRANSFORM_ROTATE_HANDLE_OFFSET = 24;
 export interface TransformModifiers {
     shiftKey?: boolean;
     altKey?: boolean;
@@ -115,6 +118,8 @@ export interface TransformOverlay {
         y: number;
     }>;
     reference: ImagePoint;
+    /** The rotate handle, on a stem out from the top edge's midpoint (none without handles or in Warp mode). */
+    rotate?: ImagePoint;
     /** In Warp mode: the mesh's grid lines as cubics, its anchors, and its handles with the anchor each belongs to. */
     warp?: {
         curves: ImagePoint[][];
@@ -135,14 +140,17 @@ export interface FreeTransformToolOptions {
  * A Free Transform frame with no transform open (a host's selected-layer frame) from where its
  * corners lie (top-left, top-right, bottom-right, bottom-left, as `getLayerFrame` gives them): the
  * outline, the eight handles (none with `handles = false`, e.g. for a layer locked in place) and the
- * centre as the reference point. Same shape and handle order as `FreeTransformTool.overlay`.
+ * centre as the reference point. With handles and a `rotateOffset` (document pixels, usually
+ * `TRANSFORM_ROTATE_HANDLE_OFFSET / scale`) it also has the rotate handle. Same shape and handle
+ * order as `FreeTransformTool.overlay`.
  */
-export declare function quadFrameOverlay(corners: readonly ImagePoint[], handles?: boolean): TransformOverlay;
+export declare function quadFrameOverlay(corners: readonly ImagePoint[], handles?: boolean, rotateOffset?: number): TransformOverlay;
 /** `quadFrameOverlay` for an axis-aligned box. */
 export declare function boxFrameOverlay(box: CropBox, handles?: boolean): TransformOverlay;
 /**
- * What a document point is over on a frame from `quadFrameOverlay`: a handle (within `tolerance`),
- * `inside`, `outside` within `band` of the outline (where a drag rotates), or `null` beyond that.
+ * What a document point is over on a frame from `quadFrameOverlay`: a handle or the rotate handle
+ * (within `tolerance`), `inside`, `outside` within `band` of the outline (where a drag rotates), or
+ * `null` beyond that.
  */
 export declare function boxFrameHit(overlay: TransformOverlay, p: ImagePoint, tolerance: number, band: number): TransformHandle | null;
 /**

package/dist/image-editor/layers/transform-ui.d.ts

@@ -10,8 +10,9 @@
  *   proportional; side: scale one axis;
  * - Mod (Ctrl / Cmd) + corner: distort that corner; Mod + side: skew along the side (Alt: about
  *   the centre); Mod + Alt + Shift + corner: perspective;
- * - outside the box: rotate about the reference point (Shift: 15° steps); inside: move (Shift:
- *   along one axis); the reference point: move it;
+ * - the rotate handle on its stem above the top edge, or outside the box: rotate about the
+ *   reference point (Shift: 15° steps); inside: move (Shift: along one axis); the reference
+ *   point: move it;
  * - the mode switch (rotate, skew, distort, perspective) makes every handle do that;
  * - Warp: drag a mesh anchor or handle (the grid stays smooth across its lines), or anywhere
  *   inside to pull the surface; presets and the grid size come from the options bar. The warp is
@@ -26,7 +27,9 @@ import type { Interpolation } from '../../raster/transform.js';
 import type { CropBox, ImagePoint } from '../types.js';
 import type { ShortcutEvent } from './paint-ui.js';
 /** What a pointer is over (`mesh:<index>`: a warp mesh control point). */
-export type TransformHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'reference' | 'inside' | 'outside' | `mesh:${number}`;
+export type TransformHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'rotate' | 'reference' | 'inside' | 'outside' | `mesh:${number}`;
+/** Screen pixels from the top edge's midpoint to the rotate handle (as the vector editor's). */
+export declare const TRANSFORM_ROTATE_HANDLE_OFFSET = 24;
 export interface TransformModifiers {
     shiftKey?: boolean;
     altKey?: boolean;
@@ -115,6 +118,8 @@ export interface TransformOverlay {
         y: number;
     }>;
     reference: ImagePoint;
+    /** The rotate handle, on a stem out from the top edge's midpoint (none without handles or in Warp mode). */
+    rotate?: ImagePoint;
     /** In Warp mode: the mesh's grid lines as cubics, its anchors, and its handles with the anchor each belongs to. */
     warp?: {
         curves: ImagePoint[][];
@@ -135,14 +140,17 @@ export interface FreeTransformToolOptions {
  * A Free Transform frame with no transform open (a host's selected-layer frame) from where its
  * corners lie (top-left, top-right, bottom-right, bottom-left, as `getLayerFrame` gives them): the
  * outline, the eight handles (none with `handles = false`, e.g. for a layer locked in place) and the
- * centre as the reference point. Same shape and handle order as `FreeTransformTool.overlay`.
+ * centre as the reference point. With handles and a `rotateOffset` (document pixels, usually
+ * `TRANSFORM_ROTATE_HANDLE_OFFSET / scale`) it also has the rotate handle. Same shape and handle
+ * order as `FreeTransformTool.overlay`.
  */
-export declare function quadFrameOverlay(corners: readonly ImagePoint[], handles?: boolean): TransformOverlay;
+export declare function quadFrameOverlay(corners: readonly ImagePoint[], handles?: boolean, rotateOffset?: number): TransformOverlay;
 /** `quadFrameOverlay` for an axis-aligned box. */
 export declare function boxFrameOverlay(box: CropBox, handles?: boolean): TransformOverlay;
 /**
- * What a document point is over on a frame from `quadFrameOverlay`: a handle (within `tolerance`),
- * `inside`, `outside` within `band` of the outline (where a drag rotates), or `null` beyond that.
+ * What a document point is over on a frame from `quadFrameOverlay`: a handle or the rotate handle
+ * (within `tolerance`), `inside`, `outside` within `band` of the outline (where a drag rotates), or
+ * `null` beyond that.
  */
 export declare function boxFrameHit(overlay: TransformOverlay, p: ImagePoint, tolerance: number, band: number): TransformHandle | null;
 /**