@pixerate/editor 0.38.0 → 0.40.0

package/dist/vector/index.js

@@ -8,12 +8,14 @@ import {
   closeContour,
   contourSignedArea,
   contoursToPath,
+  cutOutPiece,
   distanceToBezierPath,
   fitCubicWithTangents,
   fitCubics,
   flattenChain,
   formatNumber,
   gradientToSvgDef,
+  hatchPath,
   isStraightCubic,
   normalizeBezierPath,
   outlineStroke,
@@ -36,7 +38,7 @@ import {
   transformBezierPath,
   trimSegments,
   windingNumber
-} from "../chunk-ZCCU3VNI.js";
+} from "../chunk-3LHWTGHW.js";
 
 // src/vector/types.ts
 var VECTOR_CORNER_KINDS = ["round", "inverted", "chamfer"];
@@ -827,7 +829,11 @@ var capExtent = (style, width) => style.strokeLinecap === "round" || style.strok
 function arrowheadWeight(style, end) {
   const scale = end === "start" ? style.startArrowScale : style.endArrowScale;
   const s = typeof scale === "number" && scale > 0 && Number.isFinite(scale) ? scale : 1;
-  return Math.max(0.25, (style.strokeWidth ?? 1) * s);
+  const width = style.strokeWidth ?? 1;
+  const profile = strokeWidthProfileOf(style);
+  const at2 = profile ? widthProfileAt(profile, end === "start" ? 0 : 1) : null;
+  const here = at2 ? Math.max(width, width * (at2.left + at2.right) / 2) : width;
+  return Math.max(0.25, here * s);
 }
 function arrowheadInset(kind, hw, cap) {
   const l = 4 * hw;
@@ -3815,29 +3821,48 @@ function vectorShapeBuilderMap(entries) {
   });
   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) };
+  let chains = null;
+  const runs = (line2) => (chains ??= map.chains()).filter((c) => lines[c.source] === line2 && !(line2 && c.closed)).map((c) => {
+    const path = contoursToPath([{ segments: c.segments, closed: c.closed }]);
+    return { path, segments: c.segments, closed: c.closed, source: c.source, bounds: bezierPathBounds(path) };
   });
-  return { entries: [...entries], map, lines, pieces };
+  const pieces = lines.some(Boolean) ? runs(true) : [];
+  let edges = null;
+  let size = 0;
+  for (const input of inputs) {
+    const b = bezierPathBounds(input.path);
+    if (b) size = Math.max(size, b.maxX - b.minX, b.maxY - b.minY);
+  }
+  return {
+    entries: [...entries],
+    map,
+    lines,
+    pieces,
+    get edges() {
+      return edges ??= runs(false);
+    },
+    tolerance: 0.2 * Math.max(size / 2e3, 0.25)
+  };
 }
-function vectorShapeBuilderHit(m, p, lineTolerance = null) {
+function pieceNear(pieces, p, tol) {
   const point = [p.x, p.y];
+  let best = null;
+  pieces.forEach((piece, index) => {
+    const b = piece.bounds;
+    if (p.x < b.minX - tol || p.x > b.maxX + tol || p.y < b.minY - tol || p.y > b.maxY + tol) return;
+    const d = distanceToBezierPath(piece.path, point);
+    if (d <= tol && (!best || d < best.d)) best = { index, d };
+  });
+  return best;
+}
+function vectorShapeBuilderHit(m, p, lineTolerance = null) {
   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 line2 = pieceNear(m.pieces, p, lineTolerance);
+    const edge = pieceNear(m.edges, p, lineTolerance);
+    if (edge && (!line2 || edge.d < line2.d)) return { edge: edge.index };
+    if (line2) return { line: line2.index };
   }
-  const face = m.map.faceAt(point);
+  const face = m.map.faceAt([p.x, p.y]);
   return face >= 0 ? { face } : null;
 }
 function samplePolyline(points, step) {
@@ -3855,7 +3880,7 @@ function samplePolyline(points, step) {
 }
 function addBuilderHit(touched, hit) {
   if (!hit) return false;
-  const [list, i] = "face" in hit ? [touched.faces, hit.face] : [touched.lines, hit.line];
+  const [list, i] = "face" in hit ? [touched.faces, hit.face] : "line" in hit ? [touched.lines, hit.line] : [touched.edges, hit.edge];
   if (list.includes(i)) return false;
   list.push(i);
   return true;
@@ -3868,12 +3893,18 @@ function sides(m, piece) {
   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 vectorBuilderErasedEdges(m, touched) {
+  if (!touched.edges.length) return [];
+  const faces = new Set(touched.faces);
+  return touched.edges.filter((k) => m.edges[k] && !sides(m, m.edges[k]).some((f) => f >= 0 && faces.has(f)));
+}
 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) => {
+  const cuts = erase ? vectorBuilderErasedEdges(m, touched).map((k) => m.edges[k]) : [];
+  m.entries.forEach((entry, 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)));
@@ -3881,10 +3912,24 @@ function planShapeBuilder(m, touched, erase) {
       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);
+    const inUnion = touched.faces.some((f) => sourcesOf[f].includes(i));
+    if (!inUnion && !cuts.length) return;
+    let rest;
+    if (inUnion) {
+      const kept = faces.flatMap((_, f) => sourcesOf[f].includes(i) && !picked.has(f) ? [f] : []);
+      rest = kept.length ? m.map.merge(kept) : [];
+    } else rest = worldOf(entry, entry.node.subpaths.filter(usable));
+    const fillCloses = hasPaint(entry.node.fill);
+    let cut = false;
+    for (const piece of cuts) {
+      const r = rest.length ? cutOutPiece(rest, piece, fillCloses, m.tolerance) : null;
+      if (r) {
+        rest = r;
+        cut = true;
+      }
+    }
+    if (!inUnion && !cut) return;
+    replace.set(i, rest.length ? { kind: inUnion ? "fill" : "outline", path: rest } : null);
   });
   let merged = null;
   if (!erase && touched.faces.length) {
@@ -4037,6 +4082,12 @@ function vectorStrokeWidthGeometry(node) {
   const parts = vectorStrokeParts(subpathsToBezier(node.subpaths), node);
   return parts.line.length ? { line: parts.line, unit: parts.drawWidth / 2 } : null;
 }
+function shiftWidthPoints(profile, indices, dt) {
+  const moving = new Set(indices);
+  const tagged = profile.map((p, i) => ({ p: moving.has(i) ? { ...p, t: Math.min(Math.max(p.t + dt, 0), 1) } : { ...p }, i }));
+  tagged.sort((a, b) => a.p.t - b.p.t || a.i - b.i);
+  return { points: tagged.map((x) => x.p), renumber: new Map(tagged.map((x, k) => [x.i, k])) };
+}
 function getVectorWidthHandles(state) {
   if (state.tool !== "width") return [];
   const ids = /* @__PURE__ */ new Set();
@@ -4046,7 +4097,7 @@ function getVectorWidthHandles(state) {
   }
   if (state.hover?.nodeId) ids.add(state.hover.nodeId);
   if (state.interaction?.type === "width") ids.add(state.interaction.ref.nodeId);
-  if (state.selectedWidthPoint) ids.add(state.selectedWidthPoint.nodeId);
+  for (const r of state.selectedWidthPoints) ids.add(r.nodeId);
   const out = [];
   for (const id of ids) {
     const node = findVectorNode(state.document.nodes, id);
@@ -4065,7 +4116,6 @@ function getVectorWidthHandles(state) {
         const p = applyMatrix(m, c);
         const l = applyMatrix(m, { x: c.x + n.x * w.left * g.unit, y: c.y + n.y * w.left * g.unit });
         const r = applyMatrix(m, { x: c.x - n.x * w.right * g.unit, y: c.y - n.y * w.right * g.unit });
-        const sel = state.selectedWidthPoint;
         out.push({
           ref: { nodeId: id, index, subpath: sp },
           x: p.x,
@@ -4075,7 +4125,7 @@ function getVectorWidthHandles(state) {
           t: w.t,
           leftScale: w.left,
           rightScale: w.right,
-          selected: !!sel && sel.nodeId === id && sel.index === index
+          selected: state.selectedWidthPoints.some((r2) => r2.nodeId === id && r2.index === index)
         });
       });
     }
@@ -4271,7 +4321,8 @@ var VectorEditorController = class {
   doc;
   selection = [];
   anchors = [];
-  widthPoint = null;
+  widthPoints = [];
+  widthEdit = null;
   editingId = null;
   pen = null;
   tool;
@@ -4357,7 +4408,8 @@ var VectorEditorController = class {
       tool: this.tool,
       selection: this.selection,
       selectedAnchors: this.anchors,
-      selectedWidthPoint: this.widthPoint,
+      selectedWidthPoints: this.widthPoints,
+      widthPointEdit: this.widthEdit,
       editingId: this.editingId,
       selectionBounds: this.boundsOf(this.selection),
       selectionFrame: this.frameOf(this.selectedRoots()),
@@ -4428,7 +4480,7 @@ var VectorEditorController = class {
       case "pen":
         return h?.anchor ? "pointer" : "crosshair";
       case "width":
-        if (this.drag?.kind === "width") return this.drag.mode === "move" ? "grabbing" : "ew-resize";
+        if (this.drag?.kind === "width") return this.drag.mode === "width" ? "ew-resize" : "grabbing";
         if (h?.widthPoint) return h.widthPoint.part === "center" ? "grab" : "ew-resize";
         return h?.strokeSpot ? "copy" : "default";
       case "shapeBuilder":
@@ -4448,6 +4500,7 @@ var VectorEditorController = class {
   }
   restore(s) {
     const docChanged = s.doc !== this.doc || this.committing;
+    if (!this.committing) this.widthEdit = null;
     this.committing = false;
     this.applying = true;
     try {
@@ -4456,6 +4509,13 @@ var VectorEditorController = class {
       this.anchors = s.anchors.filter((r) => getAnchor(this.doc, r));
       this.editingId = s.editingId && this.getNode(s.editingId) ? s.editingId : null;
       this.pen = s.pen && this.getNode(s.pen.nodeId)?.subpaths?.[s.pen.subpath] ? s.pen : null;
+      if (this.widthPoints.length) {
+        const kept = this.widthPoints.filter((r) => {
+          const n = this.getNode(r.nodeId);
+          return n?.type === "path" && !!n.strokeWidthProfile?.[r.index];
+        });
+        if (kept.length !== this.widthPoints.length) this.widthPoints = kept;
+      }
     } finally {
       this.applying = false;
     }
@@ -4561,7 +4621,8 @@ var VectorEditorController = class {
     this.tool = tool;
     this.hover = null;
     this.guides = null;
-    this.widthPoint = null;
+    this.widthPoints = [];
+    this.widthEdit = null;
     this.builderPreview = null;
     this.builderHoverKey = null;
     if (tool !== "direct") {
@@ -4837,18 +4898,143 @@ var VectorEditorController = class {
       const p = profile;
       points = p.taper || p.wave ? generateWidthProfile(p) : [];
     }
-    this.widthPoint = null;
+    this.widthPoints = [];
+    this.widthEdit = null;
     return this.setStyle({ strokeWidthProfile: points.length ? points : null }, options.ids ?? this.selection, { label: points.length ? "Width Profile" : "Uniform Width" });
   }
-  /** Removes one width point of a path's profile (the width tool's Delete). */
+  /** Removes one width point of a path's profile. */
   removeWidthPoint(ref) {
-    const node = this.getNode(ref.nodeId);
-    if (node?.type !== "path" || !node.strokeWidthProfile?.[ref.index]) return { ok: false, message: "There is no such width point." };
-    const rest = removeWidthPoints(sanitizeWidthProfile(node.strokeWidthProfile), [ref.index]);
-    this.widthPoint = null;
-    this.change("Delete Width Point", () => this.replaceNode(node.id, withStyle(node, { strokeWidthProfile: rest.length ? rest : null })));
+    return this.removeWidthPoints([ref]);
+  }
+  /** Removes width points (default: the selected ones — the width tool's Delete), as one undo step. */
+  removeWidthPoints(refs = this.widthPoints) {
+    const byNode = /* @__PURE__ */ new Map();
+    for (const r of refs) {
+      const node = this.getNode(r.nodeId);
+      if (node?.type !== "path" || !node.strokeWidthProfile?.[r.index]) continue;
+      byNode.set(r.nodeId, [...byNode.get(r.nodeId) ?? [], r.index]);
+    }
+    if (!byNode.size) return { ok: false, message: "There is no such width point." };
+    const count = [...byNode.values()].reduce((n, l) => n + new Set(l).size, 0);
+    this.widthPoints = [];
+    this.widthEdit = null;
+    this.change(count > 1 ? "Delete Width Points" : "Delete Width Point", () => {
+      for (const [id, indices] of byNode) {
+        const node = this.getNode(id);
+        const rest = removeWidthPoints(sanitizeWidthProfile(node.strokeWidthProfile), indices);
+        this.replaceNode(id, withStyle(node, { strokeWidthProfile: rest.length ? rest : null }));
+      }
+    });
+    return { ok: true };
+  }
+  /** Selects width points (width tool); points on other paths than the first are dropped. */
+  selectWidthPoints(refs) {
+    const first = refs[0]?.nodeId;
+    const next = [];
+    for (const r of refs) {
+      if (r.nodeId !== first || next.some((q) => q.index === r.index)) continue;
+      const n = this.getNode(r.nodeId);
+      if (n?.type === "path" && n.strokeWidthProfile?.[r.index]) next.push({ nodeId: r.nodeId, index: r.index, subpath: r.subpath ?? 0 });
+    }
+    this.widthPoints = next;
+    this.notify();
+  }
+  /**
+   * Sets one width point numerically: `index` names an existing point of path `nodeId`, null
+   * (or left out) adds one at `values.t`. `left` / `right` are side widths in document units
+   * (how far the stroke reaches on each side of the path), `t` the position along each subpath
+   * (0–1). A point moved onto another one's `t` makes a step there. Selects the point and
+   * refreshes an open width-point editor; one undo step. Ported from ArtCraft vectorcraft's
+   * Width Point Edit dialog (`crates/tools/src/distort/width.rs`, MIT OR Apache-2.0).
+   */
+  setWidthPoint(target, values) {
+    const node = this.getNode(target.nodeId);
+    if (node?.type !== "path") return { ok: false, message: "There is no such path." };
+    const g = vectorStrokeWidthGeometry(node);
+    if (!g || !(g.unit > 0)) return { ok: false, message: "The path has no visible stroke." };
+    const num = (v2) => typeof v2 === "number" && Number.isFinite(v2) ? v2 : void 0;
+    const t = num(values.t);
+    const left = num(values.left);
+    const right = num(values.right);
+    const scale = (w) => w === void 0 ? void 0 : Math.max(0, w) / g.unit;
+    const profile = sanitizeWidthProfile(node.strokeWidthProfile);
+    let points;
+    let index;
+    const existing = target.index ?? null;
+    if (existing === null) {
+      if (t === void 0) return { ok: false, message: "A new width point needs a position t." };
+      if (profile.length >= VECTOR_WIDTH_PROFILE_MAX_POINTS) return { ok: false, message: "The profile has too many width points." };
+      ({ points, index } = insertWidthPoint(profile.length ? profile : null, t, { left: scale(left), right: scale(right) }, { step: true }));
+    } else {
+      const p = profile[existing];
+      if (!p) return { ok: false, message: "There is no such width point." };
+      const sides2 = { left: scale(left) ?? p.left, right: scale(right) ?? p.right };
+      const tt = t === void 0 ? p.t : Math.min(Math.max(t, 0), 1);
+      if (Math.abs(tt - p.t) <= VECTOR_WIDTH_SAME_T) {
+        points = setWidthPoint(profile, existing, sides2);
+        index = existing;
+      } else {
+        const rest = removeWidthPoints(profile, [existing]);
+        if (rest.length) ({ points, index } = insertWidthPoint(rest, tt, sides2, { step: true }));
+        else {
+          points = [{ t: tt, ...sides2 }];
+          index = 0;
+        }
+      }
+    }
+    const subpath = this.widthEdit?.nodeId === node.id ? this.widthEdit.subpath : this.widthPoints.find((r) => r.nodeId === node.id)?.subpath ?? 0;
+    const edit = this.widthEdit;
+    this.change("Width Point", () => this.replaceNode(node.id, withStyle(node, { strokeWidthProfile: points })));
+    this.widthPoints = [{ nodeId: node.id, index, subpath }];
+    if (edit?.nodeId === node.id && (edit.index === existing || existing === null)) this.widthEdit = this.widthEditFor(node.id, subpath, index, null);
+    this.notify();
     return { ok: true };
   }
+  /**
+   * Opens the width-point editor (what a double-click with the width tool does) on a width
+   * point, or on a spot of a stroke (`t` without `index`: applying it adds a point there).
+   * Returns false when the path has no visible stroke.
+   */
+  openWidthPointEdit(target) {
+    const edit = this.widthEditFor(target.nodeId, target.subpath ?? 0, target.index ?? null, target.t ?? null);
+    if (!edit) return false;
+    this.widthEdit = edit;
+    this.widthPoints = edit.index === null ? [] : [{ nodeId: edit.nodeId, index: edit.index, subpath: edit.subpath }];
+    this.notify();
+    return true;
+  }
+  /** Closes the width-point editor without changing anything. */
+  closeWidthPointEdit() {
+    if (!this.widthEdit) return;
+    this.widthEdit = null;
+    this.notify();
+  }
+  /** Applies `values` to the width point being edited (see `setWidthPoint`) and closes the editor. */
+  commitWidthPointEdit(values) {
+    const edit = this.widthEdit;
+    if (!edit) return { ok: false, message: "No width point is being edited." };
+    const r = this.setWidthPoint({ nodeId: edit.nodeId, index: edit.index }, edit.index === null ? { t: edit.t, ...values } : values);
+    if (r.ok) this.closeWidthPointEdit();
+    return r;
+  }
+  /** The editor's view of point `index` (or of the stroke at `t` when index is null) of `nodeId`. */
+  widthEditFor(nodeId, subpath, index, t) {
+    const node = this.getNode(nodeId);
+    if (node?.type !== "path") return null;
+    const g = vectorStrokeWidthGeometry(node);
+    if (!g) return null;
+    const profile = sanitizeWidthProfile(node.strokeWidthProfile);
+    const p = index === null ? null : profile[index];
+    if (index !== null && !p) return null;
+    const tt = p ? p.t : Math.min(Math.max(t ?? 0, 0), 1);
+    const sides2 = p ?? widthProfileAt(profile.length ? profile : null, tt);
+    const sp = Math.min(Math.max(0, subpath), Math.max(0, node.subpaths.length - 1));
+    const at2 = strokePositionPoint(g.line, sp, tt);
+    const round = (v2) => Math.round(v2 * 1e6) / 1e6;
+    const q = at2 ? applyMatrix(this.worldOf(nodeId), { x: at2.point[0], y: at2.point[1] }) : { x: 0, y: 0 };
+    const point = { x: round(q.x), y: round(q.y) };
+    return { nodeId, subpath: sp, index, t: round(tt), left: round(sides2.left * g.unit), right: round(sides2.right * g.unit), point };
+  }
   /**
    * Sets the live corner radius (and optionally the kind) of anchors: `refs`, else the selected
    * anchors (direct tool), else every anchor of the `ids` / selected paths. Radius 0 makes the
@@ -5426,20 +5612,23 @@ var VectorEditorController = class {
    * 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.
+   * with `erase` deletes them, the pieces of unfilled open paths and the edges of other outlines
+   * (cut where paths meet) within `tolerance`: a deleted edge opens a closed subpath there,
+   * splits an open one or takes a subpath it runs all the way round, and edges bounding a face
+   * deleted in the same gesture go with the face. Every shape covering a touched face loses
+   * that area; paths keep their own transforms. One undo step.
    */
   shapeBuilder(points, options = {}) {
-    const none = (message) => ({ ok: false, message, merged: null, faces: 0, lines: 0 });
+    const none = (message) => ({ ok: false, message, merged: null, faces: 0, lines: 0, edges: 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 touched = { faces: [], lines: [], edges: [] };
     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.");
+    if (!touched.faces.length && !touched.lines.length && !touched.edges.length) return none("There is no face under the pointer.");
     return this.applyShapeBuilder(m, touched, erase);
   }
   applyShapeBuilder(m, touched, erase) {
@@ -5455,6 +5644,7 @@ var VectorEditorController = class {
         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 === "outline") list.push({ ...node, 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 })) })
@@ -5485,7 +5675,7 @@ var VectorEditorController = class {
       this.editingId = null;
     });
     this.builderCache = null;
-    return { ok: true, merged: mergedId, faces: touched.faces.length, lines: touched.lines.length };
+    return { ok: true, merged: mergedId, faces: touched.faces.length, lines: touched.lines.length, edges: erase ? vectorBuilderErasedEdges(m, touched).length : 0 };
   }
   /** The paint bucket's map of the visible outlines, cached per document and gap. */
   fillMap(gap) {
@@ -5542,7 +5732,9 @@ var VectorEditorController = class {
     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;
+    const touched = { faces: [], lines: [], edges: [] };
+    addBuilderHit(touched, hit);
+    this.builderPreview = hit && m ? this.builderPreviewOf(m, touched, alt, null) : null;
     return true;
   }
   builderPreviewOf(m, touched, erase, trail) {
@@ -5550,7 +5742,8 @@ var VectorEditorController = class {
     return {
       mode: erase ? "erase" : "merge",
       faces: touched.faces.map((f) => faces[f].path),
-      lines: touched.lines.map((k) => m.pieces[k].path),
+      // Edges bounding a face touched too go with the face, so they are not shown apart.
+      lines: [...touched.lines.map((k) => m.pieces[k].path), ...erase ? vectorBuilderErasedEdges(m, touched).map((k) => m.edges[k].path) : []],
       trail
     };
   }
@@ -5566,7 +5759,7 @@ var VectorEditorController = class {
     const m = this.selectedRoots().length ? this.shapeBuilderMap() : null;
     if (!m) return;
     const erase = !!input.alt;
-    const touched = { faces: [], lines: [] };
+    const touched = { faces: [], lines: [], edges: [] };
     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] };
@@ -5586,7 +5779,7 @@ var VectorEditorController = class {
   upBuilder(drag) {
     this.builderPreview = null;
     this.builderHoverKey = null;
-    if (!drag.touched.faces.length && !drag.touched.lines.length) {
+    if (!drag.touched.faces.length && !drag.touched.lines.length && !drag.touched.edges.length) {
       this.notify();
       return;
     }
@@ -6250,13 +6443,19 @@ var VectorEditorController = class {
     }
   }
   widthView() {
-    return { document: this.doc, selection: this.selection, tool: this.tool, hover: this.hover, interaction: this.interaction, selectedWidthPoint: this.widthPoint };
+    return { document: this.doc, selection: this.selection, tool: this.tool, hover: this.hover, interaction: this.interaction, selectedWidthPoints: this.widthPoints };
   }
   /** The width point centre or side end under `screen` (width tool). */
   hitWidthHandle(screen) {
+    const shown = this.hitWidthHandleIn(screen, this.widthView());
+    if (shown) return shown;
+    const spot = this.strokeSpotAt(this.screenToDocument(screen));
+    return spot && spot.nodeId !== this.hover?.nodeId ? this.hitWidthHandleIn(screen, { ...this.widthView(), hover: { nodeId: spot.nodeId } }) : null;
+  }
+  hitWidthHandleIn(screen, view) {
     let best = null;
     let bestD = Infinity;
-    for (const h of getVectorWidthHandles(this.widthView())) {
+    for (const h of getVectorWidthHandles(view)) {
       for (const [part, q] of [["center", h], ["left", h.left], ["right", h.right]]) {
         const s = this.documentToScreen(q);
         const d = Math.hypot(s.x - screen.x, s.y - screen.y);
@@ -6309,11 +6508,10 @@ var VectorEditorController = class {
     const nodeId = hit?.ref.nodeId ?? spot?.nodeId;
     const node = nodeId ? this.getNode(nodeId) : void 0;
     const g = node?.type === "path" ? vectorStrokeWidthGeometry(node) : null;
+    if (this.widthEdit) this.widthEdit = null;
     if (!node || node.type !== "path" || !g) {
-      if (this.widthPoint) {
-        this.widthPoint = null;
-        this.notify();
-      }
+      if (!input.shift) this.widthPoints = [];
+      this.notify();
       return;
     }
     const before = this.snapshot();
@@ -6322,6 +6520,8 @@ var VectorEditorController = class {
     let ref;
     let mode = "width";
     let side = "both";
+    let group = [];
+    let shift = false;
     let t;
     let subpath;
     if (hit) {
@@ -6329,8 +6529,20 @@ var VectorEditorController = class {
       ref = { nodeId: node.id, index: hit.ref.index, subpath: hit.ref.subpath };
       t = profile[ref.index]?.t ?? 0;
       subpath = hit.ref.subpath;
-      if (hit.ref.part === "center") mode = "move";
+      if (hit.ref.part === "center") mode = input.alt && profile.length < VECTOR_WIDTH_PROFILE_MAX_POINTS ? "copy" : "move";
       else if (input.alt) side = hit.ref.part;
+      const same = this.widthPoints.length > 0 && this.widthPoints[0].nodeId === node.id;
+      const selected = same && this.widthPoints.some((r) => r.index === ref.index);
+      if (input.shift && mode !== "copy") {
+        if (selected) {
+          this.widthPoints = this.widthPoints.filter((r) => r.index !== ref.index);
+          this.notify();
+          return;
+        }
+        this.widthPoints = same ? [...this.widthPoints, ref] : [ref];
+        shift = true;
+      } else if (mode === "copy" || !selected) this.widthPoints = [ref];
+      if (mode !== "copy") group = this.widthPoints.filter((r) => r.index !== ref.index).map((r) => r.index);
     } else {
       const near2 = nearestStrokePosition(g.line, [local.x, local.y]);
       const inserted = insertWidthPoint(strokeWidthProfileOf(node), near2.t);
@@ -6339,17 +6551,21 @@ var VectorEditorController = class {
       t = near2.t;
       ref = { nodeId: node.id, index: inserted.index, subpath };
       if (input.alt) side = near2.side;
+      this.widthPoints = [ref];
     }
     const at2 = strokePositionPoint(g.line, subpath, t);
     if (!at2) return;
     const base = { ...this.doc, nodes: mapTree(this.doc.nodes, (n) => n.id === node.id ? { ...n, strokeWidthProfile: profile } : n) };
     this.doc = base;
-    this.widthPoint = { nodeId: node.id, index: ref.index, subpath };
     this.drag = {
       kind: "width",
       ref,
       mode,
       side,
+      source: ref.index,
+      group,
+      shift,
+      renumber: null,
       origin: { x: at2.point[0], y: at2.point[1] },
       normal: { x: at2.tangent[1], y: -at2.tangent[0] },
       unit: g.unit,
@@ -6364,6 +6580,31 @@ var VectorEditorController = class {
     this.interaction = { type: "width", ref, mode, width: (w.left + w.right) * g.unit };
     this.notify(!hit);
   }
+  /**
+   * A width-tool slide to `t` on the dragged point's subpath lands exactly on another width
+   * point (not `skip`) within the pick distance on screen: dropping a point onto another makes
+   * a discontinuous point (two points at one `t`, the width steps there).
+   */
+  snapWidthT(drag, node, line2, t, skip) {
+    const m = this.worldOf(node.id, drag.base);
+    const at2 = strokePositionPoint(line2, drag.ref.subpath, t);
+    if (!at2) return t;
+    const here = this.documentToScreen(applyMatrix(m, { x: at2.point[0], y: at2.point[1] }));
+    let best = t;
+    let bestD = this.hitRadius;
+    drag.profile.forEach((w, i) => {
+      if (i === skip || drag.group.includes(i)) return;
+      const q = strokePositionPoint(line2, drag.ref.subpath, w.t);
+      if (!q) return;
+      const s = this.documentToScreen(applyMatrix(m, { x: q.point[0], y: q.point[1] }));
+      const d = Math.hypot(s.x - here.x, s.y - here.y);
+      if (d <= bestD) {
+        best = w.t;
+        bestD = d;
+      }
+    });
+    return best;
+  }
   /** The nearest outline point of any visible, unlocked path within the pick distance of document point `p`. */
   nearestOutline(p) {
     let best = null;
@@ -6848,19 +7089,35 @@ var VectorEditorController = class {
         drag.moved = true;
         const node = findVectorNode(drag.base.nodes, drag.ref.nodeId);
         const local = this.toLocal(node.id, p, drag.base);
+        const src = drag.profile[drag.source];
         let profile;
-        if (drag.mode === "move") {
+        let index = drag.source;
+        if (drag.mode !== "width") {
           const g = vectorStrokeWidthGeometry(node);
           const near2 = g ? nearestStrokePosition(g.line, [local.x, local.y], drag.ref.subpath) : null;
-          if (!near2) return;
-          profile = setWidthPoint(drag.profile, drag.ref.index, { t: near2.t });
+          if (!g || !near2) return;
+          const t = drag.group.length ? near2.t : this.snapWidthT(drag, node, g.line, near2.t, drag.source);
+          if (drag.mode === "copy") {
+            ({ points: profile, index } = insertWidthPoint(drag.profile, t, { left: src.left, right: src.right }, { step: true }));
+          } else if (drag.group.length) {
+            const shifted = shiftWidthPoints(drag.profile, [drag.source, ...drag.group], t - src.t);
+            profile = shifted.points;
+            drag.renumber = shifted.renumber;
+            index = shifted.renumber.get(drag.source) ?? drag.source;
+          } else profile = setWidthPoint(drag.profile, drag.source, { t });
         } else {
           const off = ((local.x - drag.origin.x) * drag.normal.x + (local.y - drag.origin.y) * drag.normal.y) / drag.unit;
           const patch = drag.side === "both" ? { left: Math.abs(off), right: Math.abs(off) } : drag.side === "left" ? { left: Math.max(0, off) } : { right: Math.max(0, -off) };
-          profile = setWidthPoint(drag.profile, drag.ref.index, patch);
+          profile = setWidthPoint(drag.profile, drag.source, patch);
+          if (drag.group.length) {
+            const dl = profile[drag.source].left - src.left;
+            const dr = profile[drag.source].right - src.right;
+            for (const i of drag.group) profile = setWidthPoint(profile, i, { left: Math.max(0, drag.profile[i].left + dl), right: Math.max(0, drag.profile[i].right + dr) });
+          }
         }
         this.doc = { ...drag.base, nodes: mapTree(drag.base.nodes, (n) => n.id === node.id ? { ...n, strokeWidthProfile: profile } : n) };
-        const w = profile[drag.ref.index];
+        drag.ref = { ...drag.ref, index };
+        const w = profile[index];
         this.interaction = { type: "width", ref: drag.ref, mode: drag.mode, width: (w.left + w.right) * drag.unit };
         this.notify(true);
         return;
@@ -7006,12 +7263,23 @@ var VectorEditorController = class {
         return;
       }
       case "width": {
-        if (drag.moved) return this.commit(drag.mode === "move" ? "Move Width Point" : "Width Point", drag.before);
+        if (drag.moved) {
+          const several = drag.group.length > 0;
+          if (drag.mode === "copy") this.widthPoints = [drag.ref];
+          else if (drag.mode === "move" && several) {
+            this.widthPoints = [drag.source, ...drag.group].map((i) => ({ ...drag.ref, index: drag.renumber?.get(i) ?? i }));
+          } else if (!several) this.widthPoints = [drag.ref];
+          const label = drag.mode === "copy" ? "Copy Width Point" : drag.mode === "move" ? several ? "Move Width Points" : "Move Width Point" : several ? "Width Points" : "Width Point";
+          return this.commit(label, drag.before);
+        }
         if (drag.created) {
           this.doc = drag.before.doc;
-          this.widthPoint = null;
+          this.widthPoints = [];
           this.notify(true);
-        } else this.notify();
+        } else {
+          if (!drag.shift && drag.group.length) this.widthPoints = [drag.ref];
+          this.notify();
+        }
         return;
       }
       case "builder":
@@ -7100,7 +7368,10 @@ var VectorEditorController = class {
     }
     this.restore(drag.before);
   }
-  /** Double click: select tool enters path editing, direct tool toggles an anchor or adds one. */
+  /**
+   * Double click: select tool enters path editing, direct tool toggles an anchor or adds one,
+   * width tool opens the width-point editor (`widthPointEdit`).
+   */
   doubleClick(screen) {
     const p = this.screenToDocument(screen);
     if (this.tool === "select") {
@@ -7128,6 +7399,16 @@ var VectorEditorController = class {
       }
       return;
     }
+    if (this.tool === "width") {
+      const hit = this.hitWidthHandle(screen);
+      if (hit) {
+        this.openWidthPointEdit(hit.ref);
+        return;
+      }
+      const spot = this.strokeSpotAt(p);
+      if (spot) this.openWidthPointEdit({ nodeId: spot.nodeId, subpath: spot.subpath, t: spot.t });
+      return;
+    }
     if (this.tool === "pen") this.finishPath();
   }
   // -------------------------------------------------------------------------
@@ -7188,8 +7469,9 @@ var VectorEditorController = class {
     switch (key) {
       case "Escape":
         if (this.drag) this.cancelDrag();
-        else if (this.tool === "width" && this.widthPoint) {
-          this.widthPoint = null;
+        else if (this.widthEdit) this.closeWidthPointEdit();
+        else if (this.tool === "width" && this.widthPoints.length) {
+          this.widthPoints = [];
           this.notify();
         } else if (this.pen) this.finishPath();
         else if (this.tool === "direct" && this.anchors.length) {
@@ -7212,7 +7494,7 @@ var VectorEditorController = class {
         return false;
       case "Delete":
       case "Backspace":
-        if (this.tool === "width" && this.widthPoint) return this.removeWidthPoint(this.widthPoint).ok;
+        if (this.tool === "width" && this.widthPoints.length) return this.removeWidthPoints().ok;
         if (this.pen) {
           const node = this.getNode(this.pen.nodeId);
           const sp = node.subpaths[this.pen.subpath];
@@ -7323,6 +7605,7 @@ function pencilPressureProfile(points, pressures) {
 // src/vector/render.ts
 var fmt = (n) => Math.round(n * 100) / 100;
 var fmtMatrix = (m) => `matrix(${m.map((n) => Math.round(n * 1e6) / 1e6).join(" ")})`;
+var VECTOR_BUILDER_HATCH_GAP = 6;
 function renderNode(node, defs, idPrefix) {
   if (node.visible === false) return null;
   if (node.type === "group") {
@@ -7496,14 +7779,22 @@ 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)}`;
+  if (it?.type === "width") status = it.mode === "move" ? "Move width point" : it.mode === "copy" ? "Copy width point" : `W ${fmt(it.width)}`;
   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 svg = (path) => bezierPathToSvg(path, { precision: 2 });
+    const screen = state.builder.faces.map((f) => transformBezierPath(f, view));
+    const hatch = state.builder.mode !== "fill";
     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 };
+    builder = {
+      mode: state.builder.mode,
+      faces: screen.map(svg),
+      hatches: screen.map((f) => hatch ? svg(hatchPath(f, { gap: VECTOR_BUILDER_HATCH_GAP })) : ""),
+      lines: state.builder.lines.map((l) => svg(transformBezierPath(l, view))),
+      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"}`;
@@ -7530,7 +7821,9 @@ var VECTOR_OVERLAY_THEME = {
   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)"
+  builderEraseFill: "rgba(239, 68, 68, 0.22)",
+  /** Opacity of the hatch lines over Shape Builder faces (drawn in the face's outline colour). */
+  builderHatchOpacity: 0.6
 };
 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`;
@@ -7905,6 +8198,31 @@ function createVectorCommands(controller, options = {}) {
         return { ok: true, points: node?.type === "path" ? node.strokeWidthProfile ?? [] : [] };
       }
     },
+    {
+      ...base,
+      id: `${prefix}setWidthPoint`,
+      label: "Width Point\u2026",
+      keywords: ["width point", "variable width", "stroke width at", "taper", "profile"],
+      description: "Sets one width point of a path's stroke profile numerically: `index` names an existing point (see `vector.setWidthProfile`'s result), leave it out to add one at `t`. `left` / `right` are side widths in document units (how far the stroke reaches on each side), `t` the position along each subpath (0\u20131); a point moved onto another's `t` makes a step. Returns the profile.",
+      params: {
+        type: "object",
+        properties: {
+          id: { type: "string", description: "The path." },
+          index: { type: "integer", minimum: 0 },
+          t: { type: "number", minimum: 0, maximum: 1 },
+          left: { type: "number", minimum: 0 },
+          right: { type: "number", minimum: 0 }
+        },
+        required: ["id"]
+      },
+      undoable: true,
+      run: (_ctx, params) => {
+        if (!params?.id) fail("Pass the path `id`.");
+        check(controller.setWidthPoint({ nodeId: params.id, index: params.index ?? null }, { t: params.t, left: params.left, right: params.right }));
+        const node = controller.getNode(params.id);
+        return { ok: true, points: node?.type === "path" ? node.strokeWidthProfile ?? [] : [] };
+      }
+    },
     {
       ...base,
       id: `${prefix}outlineStroke`,
@@ -8006,7 +8324,7 @@ function createVectorCommands(controller, options = {}) {
       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.",
+      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, the pieces of unfilled open paths and the edges of other outlines (cut where paths meet) within `tolerance`; a deleted edge opens its path there, and edges bounding a deleted face go with it. Shapes covering those faces lose that area. Returns the counts of faces, line pieces and edges.",
       params: {
         type: "object",
         properties: { points: POINTS, erase: { type: "boolean" }, tolerance: { type: "number", minimum: 0 }, ids: IDS },
@@ -8016,7 +8334,7 @@ function createVectorCommands(controller, options = {}) {
       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 };
+        return { merged: result.merged, faces: result.faces, lines: result.lines, edges: result.edges };
       }
     },
     {
@@ -8331,6 +8649,7 @@ export {
   LazyMouse,
   VECTOR_ARROWHEADS,
   VECTOR_ARROWHEAD_LABELS,
+  VECTOR_BUILDER_HATCH_GAP,
   VECTOR_CLIPBOARD_TYPE,
   VECTOR_CONSTRUCTION_ANGLES,
   VECTOR_CORNER_KINDS,
@@ -8481,6 +8800,7 @@ export {
   unionBounds,
   variableStrokeOutline,
   variableStrokeRings,
+  vectorBuilderErasedEdges,
   vectorCornerAt,
   vectorCorners,
   vectorCornersAttribute,