@pixerate/editor 0.37.0 → 0.38.0

package/dist/vector/index.js

@@ -2,6 +2,7 @@ import {
   HistoryManager
 } from "../chunk-QVZZGT4X.js";
 import {
+  PlanarMap,
   bezierPathBounds,
   bezierPathToSvg,
   closeContour,
@@ -18,6 +19,7 @@ import {
   outlineStroke,
   pathBoolean,
   pathToContours,
+  pathfinder,
   pointInBezierPath,
   polygonBoolean,
   segmentBounds,
@@ -34,13 +36,30 @@ import {
   transformBezierPath,
   trimSegments,
   windingNumber
-} from "../chunk-HPEKB352.js";
+} from "../chunk-ZCCU3VNI.js";
 
 // src/vector/types.ts
 var VECTOR_CORNER_KINDS = ["round", "inverted", "chamfer"];
 var VECTOR_ARROWHEADS = ["triangle", "arrow", "open", "circle", "square", "bar"];
-var VECTOR_TOOLS = ["select", "direct", "pen", "pencil", "rect", "ellipse", "polygon", "star", "line", "scissors", "knife", "eraser", "width"];
+var VECTOR_TOOLS = [
+  "select",
+  "direct",
+  "pen",
+  "pencil",
+  "rect",
+  "ellipse",
+  "polygon",
+  "star",
+  "line",
+  "scissors",
+  "knife",
+  "eraser",
+  "width",
+  "shapeBuilder",
+  "paintBucket"
+];
 var VECTOR_TRANSFORM_HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w", "rotate"];
+var VECTOR_PATHFINDER_OPERATIONS = ["divide", "trim", "merge", "crop", "outline", "minusBack"];
 
 // src/vector/corners.ts
 var EPS = 1e-9;
@@ -344,14 +363,14 @@ function mirrorWidthProfile(points) {
 function editable(points) {
   return points?.length ? points.map((p) => ({ ...p })) : [sym(0, 1), sym(1, 1)];
 }
-function insertWidthPoint(points, t, sides = {}, options = {}) {
+function insertWidthPoint(points, t, sides2 = {}, options = {}) {
   const pts = editable(points);
   const tt = Math.min(Math.max(Number.isFinite(t) ? t : 0, 0), 1);
   const here = widthProfileAt(points?.length ? points : null, tt);
   const p = {
     t: tt,
-    left: clean(sides.left, VECTOR_WIDTH_PROFILE_MAX_SCALE) ?? here.left,
-    right: clean(sides.right, VECTOR_WIDTH_PROFILE_MAX_SCALE) ?? here.right
+    left: clean(sides2.left, VECTOR_WIDTH_PROFILE_MAX_SCALE) ?? here.left,
+    right: clean(sides2.right, VECTOR_WIDTH_PROFILE_MAX_SCALE) ?? here.right
   };
   const same = pts.findIndex((q) => Math.abs(q.t - tt) <= VECTOR_WIDTH_SAME_T);
   if (same >= 0 && !options.step) {
@@ -581,7 +600,7 @@ function variableStrokeRings(path, options) {
     const poly = flatten(contour.segments, contour.closed, Math.min(tol, half) / 4);
     if (!poly) continue;
     const len2 = poly.s[poly.s.length - 1];
-    const sides = (s) => {
+    const sides2 = (s) => {
       const w = widthProfileAt(options.profile, s / len2);
       return [w.left * half, w.right * half];
     };
@@ -595,7 +614,7 @@ function variableStrokeRings(path, options) {
       pts.push({ p: pb, s: b, corner: false });
       const run = pts.filter((q, i) => i === 0 || dist(q.p, pts[i - 1].p) > 1e-9);
       if (run.length < 2) {
-        const [l, r] = sides(a);
+        const [l, r] = sides2(a);
         const w2 = (l + r) / 2;
         if (cap === "round" && w2 > 0) rings.push([[pa[0] + w2, pa[1]], ...arcPoints(pa, 0, 2 * Math.PI, w2, w2, tol)]);
         continue;
@@ -605,7 +624,7 @@ function variableStrokeRings(path, options) {
       const dirs = [];
       for (let i = 0; i < m; i++) dirs.push(unitOf(sub2(run[i + 1].p, run[i].p)));
       const normals = dirs.map(leftNormal);
-      const w = run.map((q) => sides(q.s));
+      const w = run.map((q) => sides2(q.s));
       const side = (sigma) => {
         const k = sigma > 0 ? 0 : 1;
         const S = (i) => along(run[i].p, normals[i], sigma * w[i][k]);
@@ -1474,8 +1493,8 @@ function ellipseSubpath(b) {
     ]
   };
 }
-function polygonSubpath(b, sides = 6) {
-  const n = Math.max(3, Math.round(sides));
+function polygonSubpath(b, sides2 = 6) {
+  const n = Math.max(3, Math.round(sides2));
   const cx = b.x + b.width / 2;
   const cy = b.y + b.height / 2;
   const anchors = [];
@@ -3157,13 +3176,13 @@ function loopSample(l) {
 }
 var contains2 = (l, p) => windingNumber([l.segs], p) !== 0;
 function groupFaces(loops) {
-  const usable = loops.filter((l) => l.segs.length && Math.abs(loopArea(l)) > 1e-12);
-  if (!usable.length) return [];
-  const largest = usable.reduce((a, b) => Math.abs(loopArea(b)) > Math.abs(loopArea(a)) ? b : a);
+  const usable2 = loops.filter((l) => l.segs.length && Math.abs(loopArea(l)) > 1e-12);
+  if (!usable2.length) return [];
+  const largest = usable2.reduce((a, b) => Math.abs(loopArea(b)) > Math.abs(loopArea(a)) ? b : a);
   const sign = Math.sign(loopArea(largest));
-  const outers = usable.filter((l) => Math.sign(loopArea(l)) === sign).sort((a, b) => Math.abs(loopArea(a)) - Math.abs(loopArea(b)));
+  const outers = usable2.filter((l) => Math.sign(loopArea(l)) === sign).sort((a, b) => Math.abs(loopArea(a)) - Math.abs(loopArea(b)));
   const faces = new Map(outers.map((o) => [o, { loops: [o] }]));
-  for (const hole of usable.filter((l) => Math.sign(loopArea(l)) !== sign)) {
+  for (const hole of usable2.filter((l) => Math.sign(loopArea(l)) !== sign)) {
     const p = loopSample(hole);
     const parent = outers.find((o) => Math.abs(loopArea(o)) > Math.abs(loopArea(hole)) && contains2(o, p));
     if (parent) faces.get(parent).loops.push(hole);
@@ -3715,15 +3734,187 @@ function recognizeInkShape(points, options = {}) {
   return roundish && rms < 0.1 ? ellipse() : null;
 }
 
+// src/vector/builder.ts
+function vectorPathEntries(doc, roots, options = {}) {
+  const out = [];
+  const visit = (node, parent, inside) => {
+    if (node.visible === false || node.locked && !options.locked) return;
+    const picked = inside || roots === null || roots.includes(node.id);
+    if (node.type === "group") {
+      const m = multiplyMatrices(nodeMatrix(node), parent);
+      for (const c of node.children) visit(c, m, picked);
+    } else if (picked) out.push({ node, parent });
+  };
+  for (const n of doc.nodes) visit(n, IDENTITY_MATRIX, false);
+  return out;
+}
+var usable = (sp) => sp.anchors.length > 1;
+function worldOf(entry, subpaths) {
+  return vectorPathWorldBezier({ ...entry.node, subpaths }, entry.parent);
+}
+function subpathEnclosesArea(sp) {
+  const contour = pathToContours(subpathsToBezier([{ ...sp, closed: true }]))[0];
+  if (!contour) return false;
+  const segs = closeContour(contour, true);
+  const b = bezierPathBounds(contoursToPath([{ segments: segs, closed: true }]));
+  if (!b) return false;
+  const w = b.maxX - b.minX;
+  const h = b.maxY - b.minY;
+  return Math.abs(contourSignedArea(segs)) > 1e-9 * (w * w + h * h);
+}
+var paintKey = (paint) => typeof paint === "string" ? paint.trim().toLowerCase() : JSON.stringify(paint ?? null);
+function vectorPathfinderShape(entry, op) {
+  const { node } = entry;
+  const subpaths = node.subpaths.filter(usable);
+  const closed = subpaths.map((s) => ({ ...s, closed: true }));
+  const fillRule = node.fillRule ?? "nonzero";
+  if (hasPaint(node.fill)) return { path: worldOf(entry, closed), fillRule, key: `fill:${paintKey(node.fill)}`, paint: "fill" };
+  const open = subpaths.length > 0 && subpaths.every((s) => !s.closed);
+  if (op === "divide" && open) return { path: worldOf(entry, subpaths), line: true, paint: "line" };
+  if (hasPaint(node.stroke) && (node.strokeWidth ?? 1) > 0) {
+    const path = vectorStrokeOutline({ ...node, subpaths }, entry.parent);
+    return { path, fillRule: "nonzero", key: `fill:${paintKey(node.stroke)}`, paint: "stroke" };
+  }
+  return { path: worldOf(entry, closed), fillRule, key: "none", paint: "outline" };
+}
+var STROKE_KEYS = [
+  "stroke",
+  "strokeWidth",
+  "strokeLinecap",
+  "strokeLinejoin",
+  "strokeDasharray",
+  "strokeAlign",
+  "startArrow",
+  "endArrow",
+  "arrowAlign",
+  "startArrowScale",
+  "endArrowScale",
+  "strokeWidthProfile"
+];
+function vectorResultStyle(node, paint, edge = false) {
+  const { id: _id, subpaths: _s, transform: _t, ...rest } = node;
+  const base = { ...rest, fillRule: "nonzero" };
+  if (edge) {
+    for (const k of STROKE_KEYS) delete base[k];
+    const stroke = paint === "stroke" || !hasPaint(node.fill) ? node.stroke : node.fill;
+    return { ...base, fill: null, stroke: stroke ?? "#000000", strokeWidth: node.strokeWidth ?? 1 };
+  }
+  if (paint === "stroke") {
+    for (const k of STROKE_KEYS) delete base[k];
+    return { ...base, fill: node.stroke ?? null, stroke: null };
+  }
+  return base;
+}
+function vectorShapeBuilderMap(entries) {
+  const lines = [];
+  const inputs = entries.map((entry) => {
+    const filled = hasPaint(entry.node.fill);
+    const subpaths = entry.node.subpaths.filter(usable).map((sp) => !sp.closed && filled && subpathEnclosesArea(sp) ? { ...sp, closed: true } : sp);
+    lines.push(!subpaths.some((s) => s.closed));
+    return { path: worldOf(entry, subpaths), fillRule: entry.node.fillRule ?? "nonzero" };
+  });
+  const map = PlanarMap.build(inputs);
+  if (!map) return null;
+  const pieces = map.chains().filter((c) => lines[c.source] && !c.closed).map((c) => {
+    const path = contoursToPath([{ segments: c.segments, closed: false }]);
+    return { path, segments: c.segments, source: c.source, bounds: bezierPathBounds(path) };
+  });
+  return { entries: [...entries], map, lines, pieces };
+}
+function vectorShapeBuilderHit(m, p, lineTolerance = null) {
+  const point = [p.x, p.y];
+  if (lineTolerance !== null && lineTolerance > 0) {
+    let best = -1;
+    let bestD = lineTolerance;
+    m.pieces.forEach((piece, i) => {
+      const b = piece.bounds;
+      if (p.x < b.minX - bestD || p.x > b.maxX + bestD || p.y < b.minY - bestD || p.y > b.maxY + bestD) return;
+      const d = distanceToBezierPath(piece.path, point);
+      if (d <= bestD) {
+        best = i;
+        bestD = d;
+      }
+    });
+    if (best >= 0) return { line: best };
+  }
+  const face = m.map.faceAt(point);
+  return face >= 0 ? { face } : null;
+}
+function samplePolyline(points, step) {
+  const out = [];
+  const s = Math.max(step, 1e-3);
+  points.forEach((p, i) => {
+    if (i > 0) {
+      const a = points[i - 1];
+      const n = Math.min(4e3, Math.ceil(Math.hypot(p.x - a.x, p.y - a.y) / s));
+      for (let k = 1; k < n; k++) out.push({ x: a.x + (p.x - a.x) * k / n, y: a.y + (p.y - a.y) * k / n });
+    }
+    out.push(p);
+  });
+  return out;
+}
+function addBuilderHit(touched, hit) {
+  if (!hit) return false;
+  const [list, i] = "face" in hit ? [touched.faces, hit.face] : [touched.lines, hit.line];
+  if (list.includes(i)) return false;
+  list.push(i);
+  return true;
+}
+function sides(m, piece) {
+  const seg = piece.segments[Math.floor(piece.segments.length / 2)];
+  const mid = segmentPoint(seg, 0.5);
+  const t = segmentTangent(seg, 0.5);
+  const chord = Math.hypot(seg[seg.length - 1][0] - seg[0][0], seg[seg.length - 1][1] - seg[0][1]);
+  const off = Math.max(1e-6, Math.min(0.05, 0.05 * chord));
+  return [m.map.faceAt([mid[0] - t[1] * off, mid[1] + t[0] * off]), m.map.faceAt([mid[0] + t[1] * off, mid[1] - t[0] * off])];
+}
+function planShapeBuilder(m, touched, erase) {
+  const replace = /* @__PURE__ */ new Map();
+  const picked = new Set(touched.faces);
+  const faces = m.map.faces;
+  const sourcesOf = faces.map((_, i) => m.map.faceSources(i));
+  m.entries.forEach((_, i) => {
+    if (m.lines[i]) {
+      const own = m.pieces.flatMap((piece, k) => piece.source === i ? [k] : []);
+      const keep = own.filter((k) => !touched.lines.includes(k) && !sides(m, m.pieces[k]).every((f) => f >= 0 && picked.has(f)));
+      if (keep.length === own.length) return;
+      replace.set(i, keep.length ? { kind: "pieces", paths: keep.map((k) => m.pieces[k].path) } : null);
+      return;
+    }
+    if (!touched.faces.some((f) => sourcesOf[f].includes(i))) return;
+    const kept = faces.flatMap((_2, f) => sourcesOf[f].includes(i) && !picked.has(f) ? [f] : []);
+    const rest = kept.length ? m.map.merge(kept) : [];
+    replace.set(i, rest.length ? { kind: "fill", path: rest } : null);
+  });
+  let merged = null;
+  if (!erase && touched.faces.length) {
+    const path = m.map.merge(touched.faces);
+    const covered = touched.faces.map((f) => sourcesOf[f]).find((s) => s.length);
+    const lastShape = m.lines.lastIndexOf(false);
+    const style = covered ? covered[covered.length - 1] : lastShape >= 0 ? lastShape : m.entries.length - 1;
+    if (path.length) merged = { path, style, currentFill: !covered };
+  }
+  return { replace, merged };
+}
+function vectorFillMap(doc, gap = 0) {
+  const entries = vectorPathEntries(doc, null, { locked: true });
+  return PlanarMap.build(
+    entries.map((e) => ({ path: worldOf(e, e.node.subpaths.filter(usable)), fills: false })),
+    { gap, maxSegments: 2e4 }
+  );
+}
+
 // src/vector/controller.ts
 var DEFAULT_VECTOR_SNAP = { grid: 0, objects: true, guides: true, threshold: 5, angles: VECTOR_CONSTRUCTION_ANGLES };
+var VECTOR_FILL_GAP = 6;
 var DEFAULT_VECTOR_PATH_EDIT = {
   keepShapeOnDelete: true,
   curvatureMoves: false,
   pencilSmoothing: 0,
   recognizeShapes: false,
   eraserSize: 10,
-  pencilPressure: "pen"
+  pencilPressure: "pen",
+  fillGap: 0
 };
 var VECTOR_PENCIL_STRING_PX = 100;
 var VECTOR_STYLE_KEYS = [
@@ -3962,9 +4153,27 @@ var TOOL_LABELS = {
   scissors: "Scissors",
   knife: "Knife",
   eraser: "Eraser",
-  width: "Width"
+  width: "Width",
+  shapeBuilder: "Shape Builder",
+  paintBucket: "Paint Bucket"
+};
+var TOOL_KEYS = {
+  v: "select",
+  a: "direct",
+  p: "pen",
+  n: "pencil",
+  r: "rect",
+  o: "ellipse",
+  y: "polygon",
+  s: "star",
+  l: "line",
+  c: "scissors",
+  k: "knife",
+  e: "eraser",
+  w: "width",
+  m: "shapeBuilder",
+  b: "paintBucket"
 };
-var TOOL_KEYS = { v: "select", a: "direct", p: "pen", n: "pencil", r: "rect", o: "ellipse", y: "polygon", s: "star", l: "line", c: "scissors", k: "knife", e: "eraser", w: "width" };
 function vectorToolLabel(tool) {
   return TOOL_LABELS[tool];
 }
@@ -3981,7 +4190,9 @@ var VECTOR_TOOL_SHORTCUTS = {
   scissors: "C",
   knife: "K",
   eraser: "E",
-  width: "W"
+  width: "W",
+  shapeBuilder: "M",
+  paintBucket: "B"
 };
 var VECTOR_TOOL_GLYPHS = {
   select: "\u2196",
@@ -3996,7 +4207,9 @@ var VECTOR_TOOL_GLYPHS = {
   scissors: "\u2702",
   knife: "\u27CB",
   eraser: "\u232B",
-  width: "\u21F9"
+  width: "\u21F9",
+  shapeBuilder: "\u2295",
+  paintBucket: "\u25CD"
 };
 var SHAPE_TOOLS = /* @__PURE__ */ new Set(["rect", "ellipse", "polygon", "star", "line"]);
 var BOOLEAN_OPS = {
@@ -4006,6 +4219,14 @@ var BOOLEAN_OPS = {
   exclude: "xor"
 };
 var BOOLEAN_LABELS = { union: "Union", subtract: "Subtract", intersect: "Intersect", exclude: "Exclude" };
+var VECTOR_PATHFINDER_LABELS = {
+  divide: "Divide",
+  trim: "Trim",
+  merge: "Merge",
+  crop: "Crop",
+  outline: "Outline",
+  minusBack: "Minus Back"
+};
 function mapTree(nodes, fn) {
   let changed = false;
   const out = [];
@@ -4070,6 +4291,13 @@ var VectorEditorController = class {
   hoverTargets = null;
   spaceHeld = false;
   clipboard = null;
+  /** Shape Builder map of the selection, kept while the document and the selection stay the same. */
+  builderCache = null;
+  /** Paint bucket map of the visible outlines. */
+  fillCache = null;
+  builderPreview = null;
+  /** What the highlight shows, to skip notifying when the pointer stays over the same face. */
+  builderHoverKey = null;
   createId;
   onChange;
   listeners = /* @__PURE__ */ new Set();
@@ -4144,6 +4372,7 @@ var VectorEditorController = class {
       interaction: this.interaction,
       pen: this.pen,
       pointer: this.pointer,
+      builder: this.builderPreview,
       canUndo: h.canUndo,
       canRedo: h.canRedo,
       undoLabel: h.undoName,
@@ -4202,6 +4431,11 @@ var VectorEditorController = class {
         if (this.drag?.kind === "width") return this.drag.mode === "move" ? "grabbing" : "ew-resize";
         if (h?.widthPoint) return h.widthPoint.part === "center" ? "grab" : "ew-resize";
         return h?.strokeSpot ? "copy" : "default";
+      case "shapeBuilder":
+        if (!this.builderPreview?.faces.length && !this.builderPreview?.lines.length) return "crosshair";
+        return this.builderPreview.mode === "erase" ? "not-allowed" : "cell";
+      case "paintBucket":
+        return this.builderPreview ? "cell" : "crosshair";
       default:
         return "crosshair";
     }
@@ -4328,6 +4562,8 @@ var VectorEditorController = class {
     this.hover = null;
     this.guides = null;
     this.widthPoint = null;
+    this.builderPreview = null;
+    this.builderHoverKey = null;
     if (tool !== "direct") {
       this.anchors = [];
       this.editingId = null;
@@ -5115,6 +5351,248 @@ var VectorEditorController = class {
     return { ok: true };
   }
   // -------------------------------------------------------------------------
+  // Pathfinder, Shape Builder and paint bucket
+  // -------------------------------------------------------------------------
+  /**
+   * Pathfinder: Divide, Trim, Merge, Crop, Outline or Minus Back over the selected (or given)
+   * paths, in document space (rotated nodes and groups included, live corners cut). Unfilled
+   * stroked paths take part as the area their stroke paints (Divide: open ones cut instead).
+   * The results replace the operands at the place of the top-most one, grouped when there are
+   * several; each keeps the style of the operand whose area it is. Returns the new path ids,
+   * or an empty list when nothing came out.
+   */
+  pathfinder(op, options = {}) {
+    const roots = options.ids ?? this.selectedRoots();
+    const entries = vectorPathEntries(this.doc, roots);
+    if (entries.length < (op === "divide" || op === "outline" ? 1 : 2)) return [];
+    const shapes = entries.map((e) => vectorPathfinderShape(e, op));
+    const result = pathfinder(op, shapes);
+    if (result.error || !result.pieces.length) return [];
+    const last = entries[entries.length - 1].node.id;
+    const topRoot = [...roots].reverse().find((r) => {
+      const n = this.getNode(r);
+      return !!n && !!findVectorNode([n], last);
+    }) ?? last;
+    const nodes = [];
+    for (const piece of result.pieces) {
+      const subpaths = bezierToSubpaths(this.intoParentSpace(topRoot, piece.path)).map((sp) => piece.open ? { ...sp, closed: false } : sp);
+      if (!subpaths.length) continue;
+      const source = entries[piece.source].node;
+      const style = vectorResultStyle(source, shapes[piece.source].paint, op === "outline");
+      nodes.push({ ...style, type: "path", id: this.newId(), name: source.name ?? "Path", subpaths });
+    }
+    if (!nodes.length) return [];
+    const label = VECTOR_PATHFINDER_LABELS[op];
+    const container = nodes.length > 1 ? { id: this.newId(), type: "group", name: label, children: nodes } : nodes[0];
+    const drop = /* @__PURE__ */ new Set([...entries.map((e) => e.node.id), ...roots]);
+    this.change(label, () => {
+      this.setDoc(mapTree(this.doc.nodes, (n) => n.id === topRoot ? container : drop.has(n.id) ? null : n));
+      this.selection = [container.id];
+      this.anchors = [];
+      this.editingId = null;
+    });
+    return nodes.map((n) => n.id);
+  }
+  /** The Shape Builder map of the selected (or given) paths, cached per document and selection. */
+  shapeBuilderMap(ids) {
+    const roots = ids ?? this.selectedRoots();
+    const key = roots.join("\0");
+    if (this.builderCache?.doc === this.doc && this.builderCache.key === key) return this.builderCache.map;
+    const entries = roots.length ? vectorPathEntries(this.doc, roots) : [];
+    const map = entries.length ? vectorShapeBuilderMap(entries) : null;
+    this.builderCache = { doc: this.doc, key, map };
+    return map;
+  }
+  /** The faces the Shape Builder offers for the selected (or given) paths (document units). */
+  getShapeBuilderFaces(options = {}) {
+    const m = this.shapeBuilderMap(options.ids);
+    if (!m) return [];
+    return m.map.faces.map((f, index) => {
+      const p = m.map.faceInterior(index);
+      return {
+        index,
+        d: bezierPathToSvg(f.path, { precision: 3 }),
+        area: f.area,
+        sources: m.map.faceSources(index).map((i) => m.entries[i].node.id),
+        point: p ? { x: p[0], y: p[1] } : null
+      };
+    });
+  }
+  /** Pick distance of the Shape Builder's erase for line pieces (document units). */
+  builderLineTolerance() {
+    return Math.max(this.hitRadius, 4) / this.viewport.zoom;
+  }
+  /**
+   * Shape Builder gesture along `points` (document units; one point is a click) over the faces
+   * the selected (or given) paths make. Merges the faces touched into one shape styled like the
+   * top-most shape over the first face (the current fill for a face only outlines enclose);
+   * with `erase` deletes them, and the pieces of unfilled open paths within `tolerance`. Every
+   * shape covering a touched face loses that area. One undo step.
+   */
+  shapeBuilder(points, options = {}) {
+    const none = (message) => ({ ok: false, message, merged: null, faces: 0, lines: 0 });
+    if (!points.length || !points.every((p) => Number.isFinite(p.x) && Number.isFinite(p.y))) return none("Give the points of the gesture.");
+    const m = this.shapeBuilderMap(options.ids);
+    if (!m) return none("Select paths that make faces.");
+    const erase = !!options.erase;
+    const tol = erase ? options.tolerance ?? this.builderLineTolerance() : null;
+    const touched = { faces: [], lines: [] };
+    const size = m.map.faces.reduce((s, f) => Math.max(s, f.bounds.maxX - f.bounds.minX, f.bounds.maxY - f.bounds.minY), 1);
+    for (const p of samplePolyline(points, Math.max(size / 2e3, 0.25 / this.viewport.zoom))) addBuilderHit(touched, vectorShapeBuilderHit(m, p, tol));
+    if (!touched.faces.length && !touched.lines.length) return none("There is no face under the pointer.");
+    return this.applyShapeBuilder(m, touched, erase);
+  }
+  applyShapeBuilder(m, touched, erase) {
+    const plan = planShapeBuilder(m, touched, erase);
+    let mergedId = null;
+    const created = /* @__PURE__ */ new Map();
+    this.change(erase ? "Shape Builder Delete" : "Shape Builder", () => {
+      let nodes = this.doc.nodes;
+      m.entries.forEach((entry, i) => {
+        const node = entry.node;
+        const toLocal = (path) => transformBezierPath(path, invertMatrix(multiplyMatrices(nodeMatrix(node), entry.parent)));
+        const list = [];
+        const r = plan.replace.get(i);
+        if (r === void 0) list.push(node);
+        else if (r?.kind === "fill") list.push({ ...node, fillRule: "nonzero", subpaths: bezierToSubpaths(toLocal(r.path)) });
+        else if (r?.kind === "pieces") {
+          r.paths.forEach(
+            (path, k) => list.push({ ...node, id: k === 0 ? node.id : this.newId(), subpaths: bezierToSubpaths(toLocal(path)).map((sp) => ({ ...sp, closed: false })) })
+          );
+        }
+        if (plan.merged && plan.merged.style === i) {
+          mergedId = this.newId();
+          const merged = {
+            ...vectorResultStyle(node, "fill"),
+            type: "path",
+            id: mergedId,
+            name: "Shape",
+            ...node.transform ? { transform: node.transform } : {},
+            subpaths: bezierToSubpaths(toLocal(plan.merged.path))
+          };
+          if (plan.merged.currentFill || !hasPaint(merged.fill)) merged.fill = hasPaint(this.defaults.fill) ? this.defaults.fill : "#808080";
+          list.push(merged);
+        }
+        if (r === void 0 && list.length === 1) return;
+        created.set(node.id, list.map((n) => n.id));
+        nodes = spliceTree(nodes, node.id, list);
+      });
+      this.setDoc(nodes);
+      const selection = this.selection.flatMap((id) => created.get(id) ?? [id]);
+      if (mergedId && !selection.includes(mergedId)) selection.push(mergedId);
+      this.selection = selection.filter((id, k) => !!this.getNode(id) && selection.indexOf(id) === k);
+      this.anchors = [];
+      this.editingId = null;
+    });
+    this.builderCache = null;
+    return { ok: true, merged: mergedId, faces: touched.faces.length, lines: touched.lines.length };
+  }
+  /** The paint bucket's map of the visible outlines, cached per document and gap. */
+  fillMap(gap) {
+    if (this.fillCache?.doc === this.doc && this.fillCache.gap === gap) return this.fillCache.map;
+    const map = vectorFillMap(this.doc, gap);
+    this.fillCache = { doc: this.doc, gap, map };
+    return map;
+  }
+  /**
+   * Paint bucket: the region the visible outlines enclose around `point` (document units),
+   * crossings split and islands left as holes, becomes a new path filled with the current fill
+   * default, placed just below the selection (or on top when nothing is selected). `gap`
+   * (default `editing.fillGap`) closes gaps up to that size between loose ends. Returns the new
+   * path's id, or null when nothing encloses the point.
+   */
+  fillRegion(point, options = {}) {
+    if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) return null;
+    const region = this.fillMap(options.gap ?? this.editing.fillGap)?.regionAt([point.x, point.y]);
+    if (!region?.length) return null;
+    let below = null;
+    const roots = new Set(this.selectedRoots());
+    walkVectorNodes(this.doc.nodes, (n) => {
+      if (!below && roots.has(n.id)) below = n.id;
+    });
+    const subpaths = bezierToSubpaths(below ? this.intoParentSpace(below, region) : region);
+    if (!subpaths.length) return null;
+    const id = this.newId();
+    const node = { id, type: "path", name: "Fill", ...this.styleFor(false), stroke: null, fillRule: "nonzero", subpaths };
+    if (!hasPaint(node.fill)) node.fill = "#808080";
+    const target = below;
+    this.change("Fill Region", () => {
+      if (target) {
+        const current = this.getNode(target);
+        this.setDoc(spliceTree(this.doc.nodes, target, [node, current]));
+      } else this.setDoc([...this.doc.nodes, node]);
+      if (!target) this.selection = [id];
+      this.anchors = [];
+      this.editingId = null;
+    });
+    return id;
+  }
+  /** Updates the Shape Builder / paint bucket highlight for the pointer at `p`; true when it changed. */
+  hoverBuilder(p, alt) {
+    if (this.tool === "paintBucket") {
+      const region = this.fillMap(this.editing.fillGap)?.regionAt([p.x, p.y]) ?? null;
+      const key2 = region ? bezierPathToSvg(region, { precision: 2 }) : null;
+      if (key2 === this.builderHoverKey) return false;
+      this.builderHoverKey = key2;
+      this.builderPreview = region ? { mode: "fill", faces: [region], lines: [], trail: null } : null;
+      return true;
+    }
+    const m = this.selectedRoots().length ? this.shapeBuilderMap() : null;
+    const hit = m ? vectorShapeBuilderHit(m, p, alt ? this.builderLineTolerance() : null) : null;
+    const key = hit ? `${alt ? "erase" : "merge"}:${JSON.stringify(hit)}` : null;
+    if (key === this.builderHoverKey) return false;
+    this.builderHoverKey = key;
+    this.builderPreview = hit && m ? this.builderPreviewOf(m, "face" in hit ? { faces: [hit.face], lines: [] } : { faces: [], lines: [hit.line] }, alt, null) : null;
+    return true;
+  }
+  builderPreviewOf(m, touched, erase, trail) {
+    const faces = m.map.faces;
+    return {
+      mode: erase ? "erase" : "merge",
+      faces: touched.faces.map((f) => faces[f].path),
+      lines: touched.lines.map((k) => m.pieces[k].path),
+      trail
+    };
+  }
+  downBuilder(p, input) {
+    this.builderHoverKey = null;
+    if (this.tool === "paintBucket") {
+      this.fillRegion(p);
+      this.builderPreview = null;
+      this.hoverBuilder(p, false);
+      this.notify();
+      return;
+    }
+    const m = this.selectedRoots().length ? this.shapeBuilderMap() : null;
+    if (!m) return;
+    const erase = !!input.alt;
+    const touched = { faces: [], lines: [] };
+    addBuilderHit(touched, vectorShapeBuilderHit(m, p, erase ? this.builderLineTolerance() : null));
+    this.drag = { kind: "builder", erase, points: [p], touched, map: m };
+    this.interaction = { type: "builder", mode: erase ? "erase" : "merge", points: [p] };
+    this.builderPreview = this.builderPreviewOf(m, touched, erase, [p]);
+    this.notify();
+  }
+  moveBuilder(drag, p) {
+    const last = drag.points[drag.points.length - 1];
+    if (Math.hypot(p.x - last.x, p.y - last.y) * this.viewport.zoom < 1) return;
+    const tol = drag.erase ? this.builderLineTolerance() : null;
+    for (const q of samplePolyline([last, p], 2 / this.viewport.zoom)) addBuilderHit(drag.touched, vectorShapeBuilderHit(drag.map, q, tol));
+    drag.points.push(p);
+    this.interaction = { type: "builder", mode: drag.erase ? "erase" : "merge", points: drag.points.slice() };
+    this.builderPreview = this.builderPreviewOf(drag.map, drag.touched, drag.erase, drag.points.slice());
+    this.notify();
+  }
+  upBuilder(drag) {
+    this.builderPreview = null;
+    this.builderHoverKey = null;
+    if (!drag.touched.faces.length && !drag.touched.lines.length) {
+      this.notify();
+      return;
+    }
+    this.applyShapeBuilder(drag.map, drag.touched, drag.erase);
+  }
+  // -------------------------------------------------------------------------
   // Anchor editing
   // -------------------------------------------------------------------------
   updateAnchors(doc, refs, fn) {
@@ -5651,8 +6129,8 @@ var VectorEditorController = class {
     if (!frame) return null;
     const { box, handles } = getVectorSelectionBoxGeometry(frame, this.viewport);
     const r = this.hitRadius + 2;
-    const usable = box.width < 2 * r || box.height < 2 * r ? handles.filter((h) => h.handle.length === 2 || h.handle === "rotate") : handles;
-    for (const h of usable) if (Math.hypot(h.screen.x - screen.x, h.screen.y - screen.y) <= r * Math.SQRT2) return h.handle;
+    const usable2 = box.width < 2 * r || box.height < 2 * r ? handles.filter((h) => h.handle.length === 2 || h.handle === "rotate") : handles;
+    for (const h of usable2) if (Math.hypot(h.screen.x - screen.x, h.screen.y - screen.y) <= r * Math.SQRT2) return h.handle;
     return null;
   }
   hitHandle(screen) {
@@ -5936,6 +6414,9 @@ var VectorEditorController = class {
         return this.downPencil(p, input);
       case "width":
         return this.downWidth(screen, p, input);
+      case "shapeBuilder":
+      case "paintBucket":
+        return this.downBuilder(p, input);
       case "scissors": {
         const seg = this.nearestOutline(p);
         if (seg) this.cutPathAt(seg.nodeId, seg.point);
@@ -6165,6 +6646,11 @@ var VectorEditorController = class {
   pointerMove(screen, input = {}) {
     const p = this.screenToDocument(screen);
     const drag = this.drag;
+    if (!drag && (this.tool === "shapeBuilder" || this.tool === "paintBucket")) {
+      this.pointer = p;
+      if (this.hoverBuilder(p, !!input.alt)) this.notify();
+      return;
+    }
     if (!drag) {
       const hover = this.computeHover(screen);
       const pointerMatters = this.tool === "pen" && !!this.pen;
@@ -6296,6 +6782,8 @@ var VectorEditorController = class {
         this.notify(true);
         return;
       }
+      case "builder":
+        return this.moveBuilder(drag, p);
       case "stroke": {
         const last = drag.points[drag.points.length - 1];
         if (Math.hypot(p.x - last.x, p.y - last.y) * this.viewport.zoom < 1.5) return;
@@ -6526,6 +7014,8 @@ var VectorEditorController = class {
         } else this.notify();
         return;
       }
+      case "builder":
+        return this.upBuilder(drag);
       case "stroke": {
         this.notify();
         if (drag.tool === "knife") this.knife(drag.points);
@@ -6597,7 +7087,8 @@ var VectorEditorController = class {
     this.drag = null;
     this.interaction = null;
     this.guides = null;
-    if (drag.kind === "pan") {
+    if (drag.kind === "pan" || drag.kind === "builder") {
+      if (drag.kind === "builder") this.builderPreview = null;
       this.notify();
       return;
     }
@@ -7006,7 +7497,19 @@ function getVectorOverlayRenderData(state) {
   const spot = state.tool === "width" && !it ? state.hover?.strokeSpot : null;
   const widthSpot = spot ? { ...sc(spot.point), left: sc(spot.left), right: sc(spot.right) } : null;
   if (it?.type === "width") status = it.mode === "move" ? "Move width point" : `W ${fmt(it.width)}`;
-  return { outlines, selectionBox, anchors, handles, marquee, penPreview, artboard, guides, status, toolStroke, pencilString, cutPoint, cornerWidgets, widthPoints, widthSpot };
+  let builder = null;
+  if (state.builder) {
+    const v2 = state.viewport;
+    const view = [v2.zoom, 0, 0, v2.zoom, v2.x, v2.y];
+    const d = (path) => bezierPathToSvg(transformBezierPath(path, view), { precision: 2 });
+    const trail = state.builder.trail && state.builder.trail.length > 1 ? state.builder.trail.map((q, i) => `${i ? "L" : "M"}${sc(q).x} ${sc(q).y}`).join("") : null;
+    builder = { mode: state.builder.mode, faces: state.builder.faces.map(d), lines: state.builder.lines.map(d), trail };
+    if (state.builder.mode !== "fill" && it?.type === "builder") {
+      const n = state.builder.faces.length;
+      status = state.builder.mode === "erase" ? `Delete ${n} ${n === 1 ? "face" : "faces"}` : `Merge ${n} ${n === 1 ? "face" : "faces"}`;
+    }
+  }
+  return { outlines, selectionBox, anchors, handles, marquee, penPreview, artboard, guides, status, toolStroke, pencilString, cutPoint, cornerWidgets, widthPoints, widthSpot, builder };
 }
 var VECTOR_OVERLAY_THEME = {
   accent: "#0ea5e9",
@@ -7022,7 +7525,12 @@ var VECTOR_OVERLAY_THEME = {
   /** Radius of a live corner widget (a ring with a dot). */
   cornerWidgetRadius: 4,
   /** Half the diagonal of a width point's diamond. */
-  widthPointSize: 5
+  widthPointSize: 5,
+  /** Shape Builder faces to merge and paint bucket regions. */
+  builderFill: "rgba(14, 165, 233, 0.22)",
+  /** Shape Builder faces and line pieces an Alt gesture deletes. */
+  builderErase: "#ef4444",
+  builderEraseFill: "rgba(239, 68, 68, 0.22)"
 };
 function vectorDiamondPath(x, y, r = VECTOR_OVERLAY_THEME.widthPointSize) {
   return `M${fmt(x)} ${fmt(y - r)}L${fmt(x + r)} ${fmt(y)}L${fmt(x)} ${fmt(y + r)}L${fmt(x - r)} ${fmt(y)}Z`;
@@ -7138,6 +7646,14 @@ var VECTOR_PATH_ACTIONS = [
   { id: "smooth", label: "\u223F", title: "Smooth", enabled: (s, p) => s + p > 0, run: (c) => c.smoothPaths() },
   { id: "outline", label: "\u22A1", title: "Outline Stroke", enabled: (s) => s > 0, run: (c) => c.outlineStroke() }
 ];
+var VECTOR_PATHFINDER_ACTIONS = [
+  { id: "divide", label: "\u229E", title: "Divide", min: 1 },
+  { id: "trim", label: "\u29C9", title: "Trim", min: 2 },
+  { id: "merge", label: "\u29C8", title: "Merge", min: 2 },
+  { id: "crop", label: "\u2317", title: "Crop", min: 2 },
+  { id: "outline", label: "\u2B1A", title: "Outline", min: 1 },
+  { id: "minusBack", label: "\u2296", title: "Minus Back", min: 2 }
+];
 var VECTOR_EDIT_TOGGLES = [
   { key: "keepShapeOnDelete", label: "Keep", title: "Keep shape when deleting points" },
   { key: "curvatureMoves", label: "Curv", title: "Curvature point moves (Alt flips while dragging)" },
@@ -7461,6 +7977,62 @@ function createVectorCommands(controller, options = {}) {
         return { id };
       }
     },
+    {
+      ...base,
+      id: `${prefix}pathfinder`,
+      label: "Pathfinder\u2026",
+      keywords: ["divide", "trim", "merge", "crop", "outline", "minus back", "split", "faces"],
+      description: "Pathfinder over the given paths (bottom to top): divide (every face its own shape, painted like the top-most shape over it; open unfilled paths cut), trim (hidden parts removed), merge (trim, then touching parts of one fill joined), crop (the top shape crops the others), outline (outlines cut into open strokes where they meet) or minusBack (the top shape minus everything below). Results replace the paths, grouped when there are several.",
+      params: { type: "object", properties: { operation: { type: "string", enum: [...VECTOR_PATHFINDER_OPERATIONS] }, ids: IDS }, required: ["operation"] },
+      undoable: true,
+      run: (_ctx, params) => {
+        if (!VECTOR_PATHFINDER_OPERATIONS.includes(params.operation)) fail(`Unknown Pathfinder operation "${params.operation}".`);
+        const created = controller.pathfinder(params.operation, { ids: ids(params) });
+        if (!created.length) fail("Nothing came out: select paths that overlap (two or more, except for divide and outline).");
+        return { ids: created, selection: [...controller.getState().selection] };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}shapeBuilderFaces`,
+      label: "List Shape Builder Faces",
+      keywords: ["shape builder", "regions", "faces", "planar"],
+      description: "Lists the faces the given paths divide the plane into: path data, area, a point inside and the ids of the paths filling each (empty when only outlines enclose it).",
+      params: { type: "object", properties: { ids: IDS } },
+      run: (_ctx, params) => ({ faces: controller.getShapeBuilderFaces({ ids: ids(params) }) })
+    },
+    {
+      ...base,
+      id: `${prefix}shapeBuilder`,
+      label: "Shape Builder",
+      keywords: ["merge faces", "build shape", "combine regions", "delete region"],
+      description: "Shape Builder gesture over the faces of the given paths: `points` is the pointer path in document units (one point is a click; [[x, y], \u2026]; use the points from shapeBuilderFaces). Merges the faces it touches into one shape, or with `erase: true` deletes them and the pieces of unfilled open paths within `tolerance`. Shapes covering those faces lose that area.",
+      params: {
+        type: "object",
+        properties: { points: POINTS, erase: { type: "boolean" }, tolerance: { type: "number", minimum: 0 }, ids: IDS },
+        required: ["points"]
+      },
+      undoable: true,
+      run: (_ctx, params) => {
+        const result = controller.shapeBuilder(params.points.map(([x, y]) => ({ x, y })), { ids: ids(params), erase: params.erase, tolerance: params.tolerance });
+        check(result);
+        return { merged: result.merged, faces: result.faces, lines: result.lines };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}fillRegion`,
+      label: "Fill Region",
+      keywords: ["paint bucket", "live paint", "fill area", "enclosed"],
+      description: "Paint bucket: fills the area the visible outlines enclose around `point` (crossings split, nested shapes left as holes) with a new path in the current fill, below the selection or on top. `gap` closes gaps up to that size between loose ends.",
+      params: { type: "object", properties: { point: { type: "array", items: { type: "number" }, minItems: 2, maxItems: 2, description: "[x, y] in document units." }, gap: { type: "number", minimum: 0 } }, required: ["point"] },
+      undoable: true,
+      run: (_ctx, params) => {
+        const id = controller.fillRegion({ x: params.point[0], y: params.point[1] }, { gap: params.gap });
+        if (!id) fail("No closed region surrounds that point.");
+        return { id };
+      }
+    },
     {
       ...base,
       id: `${prefix}align`,
@@ -7765,8 +8337,12 @@ export {
   VECTOR_CORNER_KIND_LABELS,
   VECTOR_CORNER_WIDGET_INSET,
   VECTOR_EDIT_TOGGLES,
+  VECTOR_FILL_GAP,
   VECTOR_INK_MAX_CORNERS,
   VECTOR_OVERLAY_THEME,
+  VECTOR_PATHFINDER_ACTIONS,
+  VECTOR_PATHFINDER_LABELS,
+  VECTOR_PATHFINDER_OPERATIONS,
   VECTOR_PATH_ACTIONS,
   VECTOR_PENCIL_STRING_PX,
   VECTOR_PRESSURE_NOMINAL,
@@ -7784,6 +8360,7 @@ export {
   VECTOR_WIDTH_SAME_T,
   VectorEditorController,
   VectorSnapTargets,
+  addBuilderHit,
   applyMatrix,
   applyMatrixLinear,
   applyVectorCornersAttribute,
@@ -7860,6 +8437,7 @@ export {
   nodeMatrix,
   parseSvgTransform,
   parseVectorSvg,
+  planShapeBuilder,
   polygonSubpath,
   polylineBounds,
   pressureWidthProfile,
@@ -7874,6 +8452,7 @@ export {
   reverseWidthProfile,
   rotateMatrix,
   roundSubpaths,
+  samplePolyline,
   sanitizeWidthProfile,
   scaleFor,
   scaleMatrix,
@@ -7887,6 +8466,7 @@ export {
   starSubpath,
   strokePositionPoint,
   strokeWidthProfileOf,
+  subpathEnclosesArea,
   subpathPointAt,
   subpathSegment,
   subpathSegmentCount,
@@ -7906,6 +8486,7 @@ export {
   vectorCornersAttribute,
   vectorDiamondPath,
   vectorDocumentToSvg,
+  vectorFillMap,
   vectorInkShapeName,
   vectorNodeBounds,
   vectorNodeRotation,
@@ -7914,8 +8495,13 @@ export {
   vectorPaintToSvg,
   vectorParentMatrix,
   vectorPathData,
+  vectorPathEntries,
   vectorPathWorldBezier,
+  vectorPathfinderShape,
   vectorResizeCursor,
+  vectorResultStyle,
+  vectorShapeBuilderHit,
+  vectorShapeBuilderMap,
   vectorStrokeLineArea,
   vectorStrokeOutline,
   vectorStrokeOutlinePath,