@pixerate/editor 0.39.0 → 0.40.0

package/dist/vector/index.cjs

@@ -829,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, (_nullishCoalesce(style.strokeWidth, () => ( 1))) * s);
+  const width = _nullishCoalesce(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;
@@ -4078,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();
@@ -4087,7 +4097,7 @@ function getVectorWidthHandles(state) {
   }
   if (_optionalChain([state, 'access', _72 => _72.hover, 'optionalAccess', _73 => _73.nodeId])) ids.add(state.hover.nodeId);
   if (_optionalChain([state, 'access', _74 => _74.interaction, 'optionalAccess', _75 => _75.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);
@@ -4106,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,
@@ -4116,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)
         });
       });
     }
@@ -4312,43 +4321,44 @@ var VectorEditorController = (_class3 = class {
   
   __init9() {this.selection = []}
   __init10() {this.anchors = []}
-  __init11() {this.widthPoint = null}
-  __init12() {this.editingId = null}
-  __init13() {this.pen = null}
+  __init11() {this.widthPoints = []}
+  __init12() {this.widthEdit = null}
+  __init13() {this.editingId = null}
+  __init14() {this.pen = null}
   
   
   
   
   
   
-  __init14() {this.hover = null}
-  __init15() {this.pointer = null}
-  __init16() {this.drag = null}
-  __init17() {this.interaction = null}
-  __init18() {this.guides = null}
+  __init15() {this.hover = null}
+  __init16() {this.pointer = null}
+  __init17() {this.drag = null}
+  __init18() {this.interaction = null}
+  __init19() {this.guides = null}
   /** Whether the last `snapDrawn` landed on an object (guides may be hidden). */
-  __init19() {this.snappedToObject = false}
+  __init20() {this.snappedToObject = false}
   /** Drawing targets for hovering the pen and shape tools, kept while the document and the excluded path stay the same. */
-  __init20() {this.hoverTargets = null}
-  __init21() {this.spaceHeld = false}
-  __init22() {this.clipboard = null}
+  __init21() {this.hoverTargets = null}
+  __init22() {this.spaceHeld = false}
+  __init23() {this.clipboard = null}
   /** Shape Builder map of the selection, kept while the document and the selection stay the same. */
-  __init23() {this.builderCache = null}
+  __init24() {this.builderCache = null}
   /** Paint bucket map of the visible outlines. */
-  __init24() {this.fillCache = null}
-  __init25() {this.builderPreview = null}
+  __init25() {this.fillCache = null}
+  __init26() {this.builderPreview = null}
   /** What the highlight shows, to skip notifying when the pointer stays over the same face. */
-  __init26() {this.builderHoverKey = null}
+  __init27() {this.builderHoverKey = null}
   
   
-  __init27() {this.listeners = /* @__PURE__ */ new Set()}
-  __init28() {this.cleanups = []}
-  __init29() {this.applying = false}
+  __init28() {this.listeners = /* @__PURE__ */ new Set()}
+  __init29() {this.cleanups = []}
+  __init30() {this.applying = false}
   /** Set while a commit records a change that was already applied, so `restore` still reports it. */
-  __init30() {this.committing = false}
-  __init31() {this.revision = 0}
+  __init31() {this.committing = false}
+  __init32() {this.revision = 0}
   
-  constructor(options = {}) {;_class3.prototype.__init9.call(this);_class3.prototype.__init10.call(this);_class3.prototype.__init11.call(this);_class3.prototype.__init12.call(this);_class3.prototype.__init13.call(this);_class3.prototype.__init14.call(this);_class3.prototype.__init15.call(this);_class3.prototype.__init16.call(this);_class3.prototype.__init17.call(this);_class3.prototype.__init18.call(this);_class3.prototype.__init19.call(this);_class3.prototype.__init20.call(this);_class3.prototype.__init21.call(this);_class3.prototype.__init22.call(this);_class3.prototype.__init23.call(this);_class3.prototype.__init24.call(this);_class3.prototype.__init25.call(this);_class3.prototype.__init26.call(this);_class3.prototype.__init27.call(this);_class3.prototype.__init28.call(this);_class3.prototype.__init29.call(this);_class3.prototype.__init30.call(this);_class3.prototype.__init31.call(this);_class3.prototype.__init32.call(this);_class3.prototype.__init33.call(this);
+  constructor(options = {}) {;_class3.prototype.__init9.call(this);_class3.prototype.__init10.call(this);_class3.prototype.__init11.call(this);_class3.prototype.__init12.call(this);_class3.prototype.__init13.call(this);_class3.prototype.__init14.call(this);_class3.prototype.__init15.call(this);_class3.prototype.__init16.call(this);_class3.prototype.__init17.call(this);_class3.prototype.__init18.call(this);_class3.prototype.__init19.call(this);_class3.prototype.__init20.call(this);_class3.prototype.__init21.call(this);_class3.prototype.__init22.call(this);_class3.prototype.__init23.call(this);_class3.prototype.__init24.call(this);_class3.prototype.__init25.call(this);_class3.prototype.__init26.call(this);_class3.prototype.__init27.call(this);_class3.prototype.__init28.call(this);_class3.prototype.__init29.call(this);_class3.prototype.__init30.call(this);_class3.prototype.__init31.call(this);_class3.prototype.__init32.call(this);_class3.prototype.__init33.call(this);_class3.prototype.__init34.call(this);
     this.history = _nullishCoalesce(options.history, () => ( new (0, _chunkQKLRAA4Tcjs.HistoryManager)()));
     this.doc = options.document ? cloneVectorDocument(options.document) : { width: 800, height: 600, nodes: [] };
     this.tool = _nullishCoalesce(options.tool, () => ( "select"));
@@ -4377,9 +4387,9 @@ var VectorEditorController = (_class3 = class {
   // State
   // -------------------------------------------------------------------------
   /** The current snapshot (stable until the next change). */
-  __init32() {this.getState = () => this.state}
+  __init33() {this.getState = () => this.state}
   /** Calls `listener` after every change. Returns an unsubscribe function. */
-  __init33() {this.subscribe = (listener) => {
+  __init34() {this.subscribe = (listener) => {
     this.listeners.add(listener);
     return () => {
       this.listeners.delete(listener);
@@ -4398,7 +4408,8 @@ var VectorEditorController = (_class3 = 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()),
@@ -4469,7 +4480,7 @@ var VectorEditorController = (_class3 = class {
       case "pen":
         return _optionalChain([h, 'optionalAccess', _102 => _102.anchor]) ? "pointer" : "crosshair";
       case "width":
-        if (_optionalChain([this, 'access', _103 => _103.drag, 'optionalAccess', _104 => _104.kind]) === "width") return this.drag.mode === "move" ? "grabbing" : "ew-resize";
+        if (_optionalChain([this, 'access', _103 => _103.drag, 'optionalAccess', _104 => _104.kind]) === "width") return this.drag.mode === "width" ? "ew-resize" : "grabbing";
         if (_optionalChain([h, 'optionalAccess', _105 => _105.widthPoint])) return h.widthPoint.part === "center" ? "grab" : "ew-resize";
         return _optionalChain([h, 'optionalAccess', _106 => _106.strokeSpot]) ? "copy" : "default";
       case "shapeBuilder":
@@ -4489,6 +4500,7 @@ var VectorEditorController = (_class3 = class {
   }
   restore(s) {
     const docChanged = s.doc !== this.doc || this.committing;
+    if (!this.committing) this.widthEdit = null;
     this.committing = false;
     this.applying = true;
     try {
@@ -4497,6 +4509,13 @@ var VectorEditorController = (_class3 = 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 && _optionalChain([this, 'access', _113 => _113.getNode, 'call', _114 => _114(s.pen.nodeId), 'optionalAccess', _115 => _115.subpaths, 'optionalAccess', _116 => _116[s.pen.subpath]]) ? s.pen : null;
+      if (this.widthPoints.length) {
+        const kept = this.widthPoints.filter((r) => {
+          const n = this.getNode(r.nodeId);
+          return _optionalChain([n, 'optionalAccess', _117 => _117.type]) === "path" && !!_optionalChain([n, 'access', _118 => _118.strokeWidthProfile, 'optionalAccess', _119 => _119[r.index]]);
+        });
+        if (kept.length !== this.widthPoints.length) this.widthPoints = kept;
+      }
     } finally {
       this.applying = false;
     }
@@ -4602,7 +4621,8 @@ var VectorEditorController = (_class3 = 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") {
@@ -4663,7 +4683,7 @@ var VectorEditorController = (_class3 = class {
       if (res.kind) {
         this.snappedToObject = true;
         this.setGuides(res);
-        return _optionalChain([leave, 'optionalAccess', _117 => _117.constrain]) ? res.point : { x: res.x ? res.point.x : this.gridValue(res.point.x), y: res.y ? res.point.y : this.gridValue(res.point.y) };
+        return _optionalChain([leave, 'optionalAccess', _120 => _120.constrain]) ? res.point : { x: res.x ? res.point.x : this.gridValue(res.point.x), y: res.y ? res.point.y : this.gridValue(res.point.y) };
       }
     }
     this.setGuides(null);
@@ -4681,14 +4701,14 @@ var VectorEditorController = (_class3 = class {
   /** Where the pointer at `p` would place a point with the pen or a shape tool (and the guides showing why). */
   hoverSnap(p, input) {
     if (this.tool === "pen") {
-      const sp = this.pen ? _optionalChain([this, 'access', _118 => _118.getNode, 'call', _119 => _119(this.pen.nodeId), 'optionalAccess', _120 => _120.subpaths, 'access', _121 => _121[this.pen.subpath]]) : void 0;
-      if (this.pen && sp && _optionalChain([this, 'access', _122 => _122.hover, 'optionalAccess', _123 => _123.anchor])) {
+      const sp = this.pen ? _optionalChain([this, 'access', _121 => _121.getNode, 'call', _122 => _122(this.pen.nodeId), 'optionalAccess', _123 => _123.subpaths, 'access', _124 => _124[this.pen.subpath]]) : void 0;
+      if (this.pen && sp && _optionalChain([this, 'access', _125 => _125.hover, 'optionalAccess', _126 => _126.anchor])) {
         this.setGuides(null);
         return p;
       }
       const last = this.pen && sp ? getAnchorWorld(this.doc, { nodeId: this.pen.nodeId, subpath: this.pen.subpath, index: sp.anchors.length - 1 }) : void 0;
       const leave = last ? { at: { x: last.x, y: last.y }, constrain: input.shift ? "angle" : null } : null;
-      return this.snapDrawn(p, leave, input, () => this.drawingTargets(_nullishCoalesce(_optionalChain([this, 'access', _124 => _124.pen, 'optionalAccess', _125 => _125.nodeId]), () => ( null))));
+      return this.snapDrawn(p, leave, input, () => this.drawingTargets(_nullishCoalesce(_optionalChain([this, 'access', _127 => _127.pen, 'optionalAccess', _128 => _128.nodeId]), () => ( null))));
     }
     if (SHAPE_TOOLS.has(this.tool)) return this.snapDrawn(p, null, input, () => this.drawingTargets(null));
     this.setGuides(null);
@@ -4836,7 +4856,7 @@ var VectorEditorController = (_class3 = class {
     if (d.fillRule) out.fillRule = d.fillRule;
     if (d.strokeAlign && d.strokeAlign !== "center") out.strokeAlign = d.strokeAlign;
     for (const key of ["startArrow", "endArrow", "arrowAlign", "startArrowScale", "endArrowScale"]) if (d[key]) out[key] = d[key];
-    if (_optionalChain([d, 'access', _126 => _126.strokeWidthProfile, 'optionalAccess', _127 => _127.length])) out.strokeWidthProfile = d.strokeWidthProfile.map((p) => ({ ...p }));
+    if (_optionalChain([d, 'access', _129 => _129.strokeWidthProfile, 'optionalAccess', _130 => _130.length])) out.strokeWidthProfile = d.strokeWidthProfile.map((p) => ({ ...p }));
     return out;
   }
   /** Merges `patch` into a node (paths take style and geometry; groups name / visibility / opacity). */
@@ -4878,18 +4898,143 @@ var VectorEditorController = (_class3 = 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 }, _nullishCoalesce(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 (_optionalChain([node, 'optionalAccess', _128 => _128.type]) !== "path" || !_optionalChain([node, 'access', _129 => _129.strokeWidthProfile, 'optionalAccess', _130 => _130[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 (_optionalChain([node, 'optionalAccess', _131 => _131.type]) !== "path" || !_optionalChain([node, 'access', _132 => _132.strokeWidthProfile, 'optionalAccess', _133 => _133[r.index]])) continue;
+      byNode.set(r.nodeId, [..._nullishCoalesce(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 = _optionalChain([refs, 'access', _134 => _134[0], 'optionalAccess', _135 => _135.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 (_optionalChain([n, 'optionalAccess', _136 => _136.type]) === "path" && _optionalChain([n, 'access', _137 => _137.strokeWidthProfile, 'optionalAccess', _138 => _138[r.index]])) next.push({ nodeId: r.nodeId, index: r.index, subpath: _nullishCoalesce(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 (_optionalChain([node, 'optionalAccess', _139 => _139.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 = _nullishCoalesce(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: _nullishCoalesce(scale(left), () => ( p.left)), right: _nullishCoalesce(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 = _optionalChain([this, 'access', _140 => _140.widthEdit, 'optionalAccess', _141 => _141.nodeId]) === node.id ? this.widthEdit.subpath : _nullishCoalesce(_optionalChain([this, 'access', _142 => _142.widthPoints, 'access', _143 => _143.find, 'call', _144 => _144((r) => r.nodeId === node.id), 'optionalAccess', _145 => _145.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 (_optionalChain([edit, 'optionalAccess', _146 => _146.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, _nullishCoalesce(target.subpath, () => ( 0)), _nullishCoalesce(target.index, () => ( null)), _nullishCoalesce(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 (_optionalChain([node, 'optionalAccess', _147 => _147.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(_nullishCoalesce(t, () => ( 0)), 0), 1);
+    const sides2 = _nullishCoalesce(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
@@ -4909,7 +5054,7 @@ var VectorEditorController = (_class3 = class {
     const refs = this.cornerTargets(options);
     if (!refs.length) return { ok: false, message: "Nothing is selected." };
     this.change("Corner Kind", () => {
-      this.doc = this.updateAnchors(this.doc, refs, (a) => setAnchorCorner(a, _nullishCoalesce(_optionalChain([a, 'access', _131 => _131.corner, 'optionalAccess', _132 => _132.radius]), () => ( 0)), kind));
+      this.doc = this.updateAnchors(this.doc, refs, (a) => setAnchorCorner(a, _nullishCoalesce(_optionalChain([a, 'access', _148 => _148.corner, 'optionalAccess', _149 => _149.radius]), () => ( 0)), kind));
     });
     return { ok: true };
   }
@@ -5048,10 +5193,10 @@ var VectorEditorController = (_class3 = class {
     return this.selection.filter((id) => {
       let covered = false;
       const loc = locateVectorNode(this.doc.nodes, id);
-      let parent = _nullishCoalesce(_optionalChain([loc, 'optionalAccess', _133 => _133.parent]), () => ( null));
+      let parent = _nullishCoalesce(_optionalChain([loc, 'optionalAccess', _150 => _150.parent]), () => ( null));
       while (parent) {
         if (this.selection.includes(parent.id)) covered = true;
-        parent = _nullishCoalesce(_optionalChain([locateVectorNode, 'call', _134 => _134(this.doc.nodes, parent.id), 'optionalAccess', _135 => _135.parent]), () => ( null));
+        parent = _nullishCoalesce(_optionalChain([locateVectorNode, 'call', _151 => _151(this.doc.nodes, parent.id), 'optionalAccess', _152 => _152.parent]), () => ( null));
       }
       return !covered;
     });
@@ -5234,8 +5379,8 @@ var VectorEditorController = (_class3 = class {
     if (!ids.length) return null;
     const locs = ids.map((id2) => locateVectorNode(this.doc.nodes, id2));
     if (locs.some((l) => !l)) return null;
-    const parent = _nullishCoalesce(_optionalChain([locs, 'access', _136 => _136[0], 'access', _137 => _137.parent, 'optionalAccess', _138 => _138.id]), () => ( null));
-    if (locs.some((l) => (_nullishCoalesce(_optionalChain([l, 'access', _139 => _139.parent, 'optionalAccess', _140 => _140.id]), () => ( null))) !== parent)) return null;
+    const parent = _nullishCoalesce(_optionalChain([locs, 'access', _153 => _153[0], 'access', _154 => _154.parent, 'optionalAccess', _155 => _155.id]), () => ( null));
+    if (locs.some((l) => (_nullishCoalesce(_optionalChain([l, 'access', _156 => _156.parent, 'optionalAccess', _157 => _157.id]), () => ( null))) !== parent)) return null;
     const id = this.newId();
     this.change("Group", () => {
       const set = new Set(ids);
@@ -5258,7 +5403,7 @@ var VectorEditorController = (_class3 = class {
   }
   /** Replaces selected groups with their children. */
   ungroup(options = {}) {
-    const groups = (_nullishCoalesce(options.ids, () => ( this.selection))).map((id) => this.getNode(id)).filter((n) => _optionalChain([n, 'optionalAccess', _141 => _141.type]) === "group");
+    const groups = (_nullishCoalesce(options.ids, () => ( this.selection))).map((id) => this.getNode(id)).filter((n) => _optionalChain([n, 'optionalAccess', _158 => _158.type]) === "group");
     if (!groups.length) return { ok: false, message: "Select a group to ungroup." };
     const set = new Set(groups.map((g) => g.id));
     this.change("Ungroup", () => {
@@ -5372,7 +5517,7 @@ var VectorEditorController = (_class3 = class {
   }
   /** Splits selected compound paths into one path per subpath. */
   breakApart(options = {}) {
-    const paths = (_nullishCoalesce(options.ids, () => ( this.selection))).map((id) => this.getNode(id)).filter((n) => _optionalChain([n, 'optionalAccess', _142 => _142.type]) === "path" && n.subpaths.length > 1);
+    const paths = (_nullishCoalesce(options.ids, () => ( this.selection))).map((id) => this.getNode(id)).filter((n) => _optionalChain([n, 'optionalAccess', _159 => _159.type]) === "path" && n.subpaths.length > 1);
     if (!paths.length) return { ok: false, message: "Select a compound path to break apart." };
     const created = [];
     const set = new Set(paths.map((p) => p.id));
@@ -5438,7 +5583,7 @@ var VectorEditorController = (_class3 = class {
   shapeBuilderMap(ids) {
     const roots = _nullishCoalesce(ids, () => ( this.selectedRoots()));
     const key = roots.join("\0");
-    if (_optionalChain([this, 'access', _143 => _143.builderCache, 'optionalAccess', _144 => _144.doc]) === this.doc && this.builderCache.key === key) return this.builderCache.map;
+    if (_optionalChain([this, 'access', _160 => _160.builderCache, 'optionalAccess', _161 => _161.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 };
@@ -5498,9 +5643,9 @@ var VectorEditorController = (_class3 = class {
         const list = [];
         const r = plan.replace.get(i);
         if (r === void 0) list.push(node);
-        else if (_optionalChain([r, 'optionalAccess', _145 => _145.kind]) === "fill") list.push({ ...node, fillRule: "nonzero", subpaths: bezierToSubpaths(toLocal(r.path)) });
-        else if (_optionalChain([r, 'optionalAccess', _146 => _146.kind]) === "outline") list.push({ ...node, subpaths: bezierToSubpaths(toLocal(r.path)) });
-        else if (_optionalChain([r, 'optionalAccess', _147 => _147.kind]) === "pieces") {
+        else if (_optionalChain([r, 'optionalAccess', _162 => _162.kind]) === "fill") list.push({ ...node, fillRule: "nonzero", subpaths: bezierToSubpaths(toLocal(r.path)) });
+        else if (_optionalChain([r, 'optionalAccess', _163 => _163.kind]) === "outline") list.push({ ...node, subpaths: bezierToSubpaths(toLocal(r.path)) });
+        else if (_optionalChain([r, 'optionalAccess', _164 => _164.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 })) })
           );
@@ -5534,7 +5679,7 @@ var VectorEditorController = (_class3 = class {
   }
   /** The paint bucket's map of the visible outlines, cached per document and gap. */
   fillMap(gap) {
-    if (_optionalChain([this, 'access', _148 => _148.fillCache, 'optionalAccess', _149 => _149.doc]) === this.doc && this.fillCache.gap === gap) return this.fillCache.map;
+    if (_optionalChain([this, 'access', _165 => _165.fillCache, 'optionalAccess', _166 => _166.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;
@@ -5548,8 +5693,8 @@ var VectorEditorController = (_class3 = class {
    */
   fillRegion(point, options = {}) {
     if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) return null;
-    const region = _optionalChain([this, 'access', _150 => _150.fillMap, 'call', _151 => _151(_nullishCoalesce(options.gap, () => ( this.editing.fillGap))), 'optionalAccess', _152 => _152.regionAt, 'call', _153 => _153([point.x, point.y])]);
-    if (!_optionalChain([region, 'optionalAccess', _154 => _154.length])) return null;
+    const region = _optionalChain([this, 'access', _167 => _167.fillMap, 'call', _168 => _168(_nullishCoalesce(options.gap, () => ( this.editing.fillGap))), 'optionalAccess', _169 => _169.regionAt, 'call', _170 => _170([point.x, point.y])]);
+    if (!_optionalChain([region, 'optionalAccess', _171 => _171.length])) return null;
     let below = null;
     const roots = new Set(this.selectedRoots());
     walkVectorNodes(this.doc.nodes, (n) => {
@@ -5575,7 +5720,7 @@ var VectorEditorController = (_class3 = class {
   /** 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 = _nullishCoalesce(_optionalChain([this, 'access', _155 => _155.fillMap, 'call', _156 => _156(this.editing.fillGap), 'optionalAccess', _157 => _157.regionAt, 'call', _158 => _158([p.x, p.y])]), () => ( null));
+      const region = _nullishCoalesce(_optionalChain([this, 'access', _172 => _172.fillMap, 'call', _173 => _173(this.editing.fillGap), 'optionalAccess', _174 => _174.regionAt, 'call', _175 => _175([p.x, p.y])]), () => ( null));
       const key2 = region ? _chunkVNYRI265cjs.bezierPathToSvg.call(void 0, region, { precision: 2 }) : null;
       if (key2 === this.builderHoverKey) return false;
       this.builderHoverKey = key2;
@@ -5683,7 +5828,7 @@ var VectorEditorController = (_class3 = class {
   /** `doc` with anchor `ref` moved to document point `to` by a Curvature-tool move. */
   curvatureMoved(doc, ref, to) {
     const node = findVectorNode(doc.nodes, ref.nodeId);
-    if (_optionalChain([node, 'optionalAccess', _159 => _159.type]) !== "path" || node.locked || !node.subpaths[ref.subpath]) return doc;
+    if (_optionalChain([node, 'optionalAccess', _176 => _176.type]) !== "path" || node.locked || !node.subpaths[ref.subpath]) return doc;
     const q = this.toLocal(ref.nodeId, to, doc);
     const subpaths = node.subpaths.map((sp, i) => i === ref.subpath ? curvatureMoveAnchor(sp, ref.index, q) : sp);
     const nodes = mapTree(doc.nodes, (n) => n.id === ref.nodeId ? { ...node, subpaths } : n);
@@ -5692,7 +5837,7 @@ var VectorEditorController = (_class3 = class {
   /** `doc` with segment `ref` bent through document point `p` at parameter `t`. */
   bent(doc, ref, t, p) {
     const node = findVectorNode(doc.nodes, ref.nodeId);
-    if (_optionalChain([node, 'optionalAccess', _160 => _160.type]) !== "path" || node.locked || !node.subpaths[ref.subpath]) return doc;
+    if (_optionalChain([node, 'optionalAccess', _177 => _177.type]) !== "path" || node.locked || !node.subpaths[ref.subpath]) return doc;
     const q = this.toLocal(ref.nodeId, p, doc);
     const subpaths = node.subpaths.map((sp, i) => i === ref.subpath ? bendSegment(sp, ref.segment, t, q) : sp);
     return { ...doc, nodes: mapTree(doc.nodes, (n) => n.id === ref.nodeId ? { ...node, subpaths } : n) };
@@ -5703,7 +5848,7 @@ var VectorEditorController = (_class3 = class {
    */
   bendSegment(ref, to, t = 0.5) {
     const node = this.getNode(ref.nodeId);
-    const sp = _optionalChain([node, 'optionalAccess', _161 => _161.type]) === "path" ? node.subpaths[ref.subpath] : void 0;
+    const sp = _optionalChain([node, 'optionalAccess', _178 => _178.type]) === "path" ? node.subpaths[ref.subpath] : void 0;
     if (!sp || ref.segment < 0 || ref.segment >= (sp.closed ? sp.anchors.length : sp.anchors.length - 1) || sp.anchors.length < 2) return { ok: false, message: "There is no such segment." };
     if (node.locked) return { ok: false, message: "The path is locked." };
     this.change("Bend Segment", () => {
@@ -5738,7 +5883,7 @@ var VectorEditorController = (_class3 = class {
   /** Adds an anchor on the nearest segment of `nodeId` to document point `point` (shape unchanged). */
   insertAnchorAt(nodeId, point) {
     const node = this.getNode(nodeId);
-    if (_optionalChain([node, 'optionalAccess', _162 => _162.type]) !== "path") return null;
+    if (_optionalChain([node, 'optionalAccess', _179 => _179.type]) !== "path") return null;
     const hit = nearestSegment(node, this.toLocal(nodeId, point));
     if (!hit) return null;
     const { subpath, index } = insertAnchor(node.subpaths[hit.subpath], hit.segment, hit.t);
@@ -5782,7 +5927,7 @@ var VectorEditorController = (_class3 = class {
   setClosed(closed, nodeId) {
     const targets = nodeId ? (() => {
       const n = this.getNode(nodeId);
-      return _optionalChain([n, 'optionalAccess', _163 => _163.type]) === "path" ? n.subpaths.map((_, s) => ({ nodeId, subpath: s })) : [];
+      return _optionalChain([n, 'optionalAccess', _180 => _180.type]) === "path" ? n.subpaths.map((_, s) => ({ nodeId, subpath: s })) : [];
     })() : this.anchors.map((r) => ({ nodeId: r.nodeId, subpath: r.subpath }));
     if (!targets.length) return { ok: false, message: "Select a path or points." };
     this.change(closed ? "Close Path" : "Open Path", () => {
@@ -5803,7 +5948,7 @@ var VectorEditorController = (_class3 = class {
       this.setDoc(
         mapTree(
           this.doc.nodes,
-          (n) => n.type === "path" && set.has(n.id) ? { ...n, subpaths: n.subpaths.map(reverseSubpath), ..._optionalChain([n, 'access', _164 => _164.strokeWidthProfile, 'optionalAccess', _165 => _165.length]) ? { strokeWidthProfile: reverseWidthProfile(n.strokeWidthProfile) } : {} } : n
+          (n) => n.type === "path" && set.has(n.id) ? { ...n, subpaths: n.subpaths.map(reverseSubpath), ..._optionalChain([n, 'access', _181 => _181.strokeWidthProfile, 'optionalAccess', _182 => _182.length]) ? { strokeWidthProfile: reverseWidthProfile(n.strokeWidthProfile) } : {} } : n
         )
       );
       this.anchors = [];
@@ -5941,7 +6086,7 @@ var VectorEditorController = (_class3 = class {
    */
   cutPathAt(nodeId, point) {
     const node = this.getNode(nodeId);
-    if (_optionalChain([node, 'optionalAccess', _166 => _166.type]) !== "path" || node.locked) return null;
+    if (_optionalChain([node, 'optionalAccess', _183 => _183.type]) !== "path" || node.locked) return null;
     const local = this.toLocal(nodeId, point);
     const hit = nearestSegment(node, local);
     if (!hit) return null;
@@ -5991,7 +6136,7 @@ var VectorEditorController = (_class3 = class {
       if (n.visible === false || n.locked || parent && blocked.has(parent.id)) blocked.add(n.id);
     });
     const visible = (p) => !blocked.has(p.id);
-    if (_optionalChain([ids, 'optionalAccess', _167 => _167.length]) || this.selection.length) return this.pathTargets(_nullishCoalesce(ids, () => ( this.selection))).filter(visible);
+    if (_optionalChain([ids, 'optionalAccess', _184 => _184.length]) || this.selection.length) return this.pathTargets(_nullishCoalesce(ids, () => ( this.selection))).filter(visible);
     const box = polylineBounds(points.map(toPoint2), pad);
     if (!box) return [];
     const out = [];
@@ -6077,7 +6222,7 @@ var VectorEditorController = (_class3 = class {
   finishPath() {
     if (!this.pen) return;
     const node = this.getNode(this.pen.nodeId);
-    const sp = _optionalChain([node, 'optionalAccess', _168 => _168.subpaths, 'access', _169 => _169[this.pen.subpath]]);
+    const sp = _optionalChain([node, 'optionalAccess', _185 => _185.subpaths, 'access', _186 => _186[this.pen.subpath]]);
     const pen = this.pen;
     this.pen = null;
     this.pointer = null;
@@ -6121,7 +6266,7 @@ var VectorEditorController = (_class3 = class {
       if (trimmed.startsWith("{")) {
         try {
           const data = JSON.parse(trimmed);
-          if (_optionalChain([data, 'optionalAccess', _170 => _170.type]) === VECTOR_CLIPBOARD_TYPE && Array.isArray(data.nodes)) nodes = data.nodes;
+          if (_optionalChain([data, 'optionalAccess', _187 => _187.type]) === VECTOR_CLIPBOARD_TYPE && Array.isArray(data.nodes)) nodes = data.nodes;
         } catch (e3) {
           nodes = null;
         }
@@ -6133,7 +6278,7 @@ var VectorEditorController = (_class3 = class {
         }
       }
     } else nodes = this.clipboard;
-    if (!_optionalChain([nodes, 'optionalAccess', _171 => _171.length])) return [];
+    if (!_optionalChain([nodes, 'optionalAccess', _188 => _188.length])) return [];
     const offset = _nullishCoalesce(options.offset, () => ( (text && !text.trim().startsWith("{") ? { x: 0, y: 0 } : { x: 10, y: 10 })));
     const copies = nodes.map((n) => transformVectorNode(this.freshIds(n), translateMatrix(offset.x, offset.y)));
     this.change("Paste", () => {
@@ -6184,7 +6329,7 @@ var VectorEditorController = (_class3 = class {
   hitHandle(screen) {
     for (const ref of getVisibleHandles(this.view()).reverse()) {
       const a = getAnchorWorld(this.doc, ref);
-      const h = _optionalChain([a, 'optionalAccess', _172 => _172[ref.handle]]);
+      const h = _optionalChain([a, 'optionalAccess', _189 => _189[ref.handle]]);
       if (!h) continue;
       const s = this.documentToScreen(h);
       if (Math.hypot(s.x - screen.x, s.y - screen.y) <= this.hitRadius) return ref;
@@ -6298,13 +6443,19 @@ var VectorEditorController = (_class3 = 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 !== _optionalChain([this, 'access', _190 => _190.hover, 'optionalAccess', _191 => _191.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);
@@ -6354,14 +6505,13 @@ var VectorEditorController = (_class3 = class {
   downWidth(screen, p, input) {
     const hit = this.hitWidthHandle(screen);
     const spot = hit ? null : this.strokeSpotAt(p);
-    const nodeId = _nullishCoalesce(_optionalChain([hit, 'optionalAccess', _173 => _173.ref, 'access', _174 => _174.nodeId]), () => ( _optionalChain([spot, 'optionalAccess', _175 => _175.nodeId])));
+    const nodeId = _nullishCoalesce(_optionalChain([hit, 'optionalAccess', _192 => _192.ref, 'access', _193 => _193.nodeId]), () => ( _optionalChain([spot, 'optionalAccess', _194 => _194.nodeId])));
     const node = nodeId ? this.getNode(nodeId) : void 0;
-    const g = _optionalChain([node, 'optionalAccess', _176 => _176.type]) === "path" ? vectorStrokeWidthGeometry(node) : null;
+    const g = _optionalChain([node, 'optionalAccess', _195 => _195.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();
@@ -6370,15 +6520,29 @@ var VectorEditorController = (_class3 = class {
     let ref;
     let mode = "width";
     let side = "both";
+    let group = [];
+    let shift = false;
     let t;
     let subpath;
     if (hit) {
       profile = sanitizeWidthProfile(node.strokeWidthProfile);
       ref = { nodeId: node.id, index: hit.ref.index, subpath: hit.ref.subpath };
-      t = _nullishCoalesce(_optionalChain([profile, 'access', _177 => _177[ref.index], 'optionalAccess', _178 => _178.t]), () => ( 0));
+      t = _nullishCoalesce(_optionalChain([profile, 'access', _196 => _196[ref.index], 'optionalAccess', _197 => _197.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);
@@ -6387,17 +6551,21 @@ var VectorEditorController = (_class3 = 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,
@@ -6412,6 +6580,31 @@ var VectorEditorController = (_class3 = 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;
@@ -6600,7 +6793,7 @@ var VectorEditorController = (_class3 = class {
   }
   downPen(screen, p, input) {
     const before = this.snapshot();
-    const sp = this.pen ? _optionalChain([this, 'access', _179 => _179.getNode, 'call', _180 => _180(this.pen.nodeId), 'optionalAccess', _181 => _181.subpaths, 'access', _182 => _182[this.pen.subpath]]) : void 0;
+    const sp = this.pen ? _optionalChain([this, 'access', _198 => _198.getNode, 'call', _199 => _199(this.pen.nodeId), 'optionalAccess', _200 => _200.subpaths, 'access', _201 => _201[this.pen.subpath]]) : void 0;
     if (this.pen && sp) {
       const pen = this.pen;
       const first = { nodeId: pen.nodeId, subpath: pen.subpath, index: 0 };
@@ -6862,7 +7055,7 @@ var VectorEditorController = (_class3 = class {
       }
       case "shape": {
         const node = this.getNode(drag.nodeId);
-        if (_optionalChain([node, 'optionalAccess', _183 => _183.type]) !== "path") return;
+        if (_optionalChain([node, 'optionalAccess', _202 => _202.type]) !== "path") return;
         const leave = { at: drag.start, constrain: input.shift ? drag.tool === "line" ? "angle" : "square" : null, curves: false };
         let end = this.snapDrawn(p, leave, input, () => drag.targets ??= this.drawingTargets(null));
         if (!this.snappedToObject && drag.tool !== "line" && !input.shift && !input.mod && this.snap.objects && drag.targets) end = this.matchShapeSize(drag.targets, drag.start, end, input.alt);
@@ -6896,19 +7089,35 @@ var VectorEditorController = (_class3 = 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 = _nullishCoalesce(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;
@@ -6920,14 +7129,14 @@ var VectorEditorController = (_class3 = class {
         for (const q of drag.lazy.push([p.x, p.y])) {
           if (Math.hypot(q[0] - last[0], q[1] - last[1]) * this.viewport.zoom < 1.5) continue;
           drag.points.push(q);
-          _optionalChain([drag, 'access', _184 => _184.pressures, 'optionalAccess', _185 => _185.push, 'call', _186 => _186(drag.pressure)]);
+          _optionalChain([drag, 'access', _203 => _203.pressures, 'optionalAccess', _204 => _204.push, 'call', _205 => _205(drag.pressure)]);
           moved = true;
         }
         const string = drag.lazy.string();
         const node = this.getNode(drag.nodeId);
-        if (_optionalChain([node, 'optionalAccess', _187 => _187.type]) !== "path") return;
+        if (_optionalChain([node, 'optionalAccess', _206 => _206.type]) !== "path") return;
         if (!moved) {
-          if (string && _optionalChain([this, 'access', _188 => _188.interaction, 'optionalAccess', _189 => _189.type]) === "draw") {
+          if (string && _optionalChain([this, 'access', _207 => _207.interaction, 'optionalAccess', _208 => _208.type]) === "draw") {
             this.interaction = { ...this.interaction, string: [{ x: string[0][0], y: string[0][1] }, { x: string[1][0], y: string[1][1] }] };
             this.notify();
           }
@@ -6963,8 +7172,8 @@ var VectorEditorController = (_class3 = class {
     }
     this.setGuides(res);
     return {
-      dx: _optionalChain([res, 'optionalAccess', _190 => _190.x]) ? dx + res.dx : axes.x ? this.gridValue(origin.x + dx) - origin.x : dx,
-      dy: _optionalChain([res, 'optionalAccess', _191 => _191.y]) ? dy + res.dy : axes.y ? this.gridValue(origin.y + dy) - origin.y : dy
+      dx: _optionalChain([res, 'optionalAccess', _209 => _209.x]) ? dx + res.dx : axes.x ? this.gridValue(origin.x + dx) - origin.x : dx,
+      dy: _optionalChain([res, 'optionalAccess', _210 => _210.y]) ? dy + res.dy : axes.y ? this.gridValue(origin.y + dy) - origin.y : dy
     };
   }
   /** The anchor a point drag snaps by, where it started: the grabbed one, else the moving one nearest the press. */
@@ -7043,7 +7252,7 @@ var VectorEditorController = (_class3 = class {
         if (drag.moved) return this.commit("Corner Radius", drag.before);
         if (drag.alt) {
           const kind = nextVectorCornerKind(drag.widget.kind);
-          this.doc = this.updateAnchors(drag.base, drag.refs, (a) => setAnchorCorner(a, _nullishCoalesce(_optionalChain([a, 'access', _192 => _192.corner, 'optionalAccess', _193 => _193.radius]), () => ( 0)), kind));
+          this.doc = this.updateAnchors(drag.base, drag.refs, (a) => setAnchorCorner(a, _nullishCoalesce(_optionalChain([a, 'access', _211 => _211.corner, 'optionalAccess', _212 => _212.radius]), () => ( 0)), kind));
           return this.commit("Corner Kind", drag.before);
         }
         const ref = drag.widget.ref;
@@ -7054,12 +7263,23 @@ var VectorEditorController = (_class3 = 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: _nullishCoalesce(_optionalChain([drag, 'access', _213 => _213.renumber, 'optionalAccess', _214 => _214.get, 'call', _215 => _215(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":
@@ -7089,14 +7309,14 @@ var VectorEditorController = (_class3 = class {
       }
       case "pencil": {
         const node = this.getNode(drag.nodeId);
-        if (_optionalChain([node, 'optionalAccess', _194 => _194.type]) !== "path" || drag.points.length < 2) {
+        if (_optionalChain([node, 'optionalAccess', _216 => _216.type]) !== "path" || drag.points.length < 2) {
           this.doc = drag.before.doc;
           this.notify(true);
           return;
         }
         for (const q of drag.lazy.finish()) {
           drag.points.push(q);
-          _optionalChain([drag, 'access', _195 => _195.pressures, 'optionalAccess', _196 => _196.push, 'call', _197 => _197(drag.pressure)]);
+          _optionalChain([drag, 'access', _217 => _217.pressures, 'optionalAccess', _218 => _218.push, 'call', _219 => _219(drag.pressure)]);
         }
         const shape = this.editing.recognizeShapes ? recognizeInkShape(drag.points, { minSize: 6 / this.viewport.zoom }) : null;
         if (shape) {
@@ -7148,7 +7368,10 @@ var VectorEditorController = (_class3 = 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") {
@@ -7168,7 +7391,7 @@ var VectorEditorController = (_class3 = class {
         this.convertAnchors(a.in || a.out ? "corner" : "smooth", [anchor]);
         return;
       }
-      const id = _nullishCoalesce(_optionalChain([this, 'access', _198 => _198.hover, 'optionalAccess', _199 => _199.segment, 'optionalAccess', _200 => _200.nodeId]), () => ( this.editingId));
+      const id = _nullishCoalesce(_optionalChain([this, 'access', _220 => _220.hover, 'optionalAccess', _221 => _221.segment, 'optionalAccess', _222 => _222.nodeId]), () => ( this.editingId));
       if (id) {
         const node = this.getNode(id);
         const seg = node ? nearestSegment(node, this.toLocal(id, p)) : null;
@@ -7176,6 +7399,16 @@ var VectorEditorController = (_class3 = 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();
   }
   // -------------------------------------------------------------------------
@@ -7236,8 +7469,9 @@ var VectorEditorController = (_class3 = 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) {
@@ -7251,7 +7485,7 @@ var VectorEditorController = (_class3 = class {
           this.finishPath();
           return true;
         }
-        if (this.tool === "select" && this.selection.length === 1 && _optionalChain([this, 'access', _201 => _201.getNode, 'call', _202 => _202(this.selection[0]), 'optionalAccess', _203 => _203.type]) === "path") {
+        if (this.tool === "select" && this.selection.length === 1 && _optionalChain([this, 'access', _223 => _223.getNode, 'call', _224 => _224(this.selection[0]), 'optionalAccess', _225 => _225.type]) === "path") {
           this.tool = "direct";
           this.editingId = this.selection[0];
           this.notify();
@@ -7260,7 +7494,7 @@ var VectorEditorController = (_class3 = 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];
@@ -7394,7 +7628,7 @@ function renderNode(node, defs, idPrefix) {
     strokeWidth: _nullishCoalesce(node.strokeWidth, () => ( 1)),
     ...node.strokeLinecap ? { strokeLinecap: node.strokeLinecap } : {},
     ...node.strokeLinejoin ? { strokeLinejoin: node.strokeLinejoin } : {},
-    ..._optionalChain([node, 'access', _204 => _204.strokeDasharray, 'optionalAccess', _205 => _205.length]) ? { strokeDasharray: node.strokeDasharray.join(" ") } : {},
+    ..._optionalChain([node, 'access', _226 => _226.strokeDasharray, 'optionalAccess', _227 => _227.length]) ? { strokeDasharray: node.strokeDasharray.join(" ") } : {},
     fillRule: _nullishCoalesce(node.fillRule, () => ( "nonzero")),
     opacity: _nullishCoalesce(node.opacity, () => ( 1))
   };
@@ -7443,9 +7677,9 @@ function getVectorOverlayRenderData(state) {
   };
   for (const id of state.selection) outline(id, true);
   if (state.editingId) outline(state.editingId, true);
-  if (_optionalChain([state, 'access', _206 => _206.hover, 'optionalAccess', _207 => _207.nodeId]) && !state.interaction) outline(state.hover.nodeId, false);
+  if (_optionalChain([state, 'access', _228 => _228.hover, 'optionalAccess', _229 => _229.nodeId]) && !state.interaction) outline(state.hover.nodeId, false);
   let selectionBox = null;
-  if (state.tool === "select" && state.selectionFrame && _optionalChain([state, 'access', _208 => _208.interaction, 'optionalAccess', _209 => _209.type]) !== "marquee") {
+  if (state.tool === "select" && state.selectionFrame && _optionalChain([state, 'access', _230 => _230.interaction, 'optionalAccess', _231 => _231.type]) !== "marquee") {
     const g = getVectorSelectionBoxGeometry(state.selectionFrame, state.viewport);
     selectionBox = { ...g.box, angle: g.angle, transform: g.transform, corners: g.corners, handles: g.handles };
   }
@@ -7455,9 +7689,9 @@ function getVectorOverlayRenderData(state) {
     const a = getAnchorWorld(doc, ref);
     const s = toScreen(state, a);
     const closes = !!state.pen && state.pen.nodeId === ref.nodeId && state.pen.subpath === ref.subpath && ref.index === 0;
-    return { ref, x: s.x, y: s.y, type: _nullishCoalesce(a.type, () => ( inferAnchorType(a))), selected: selected(ref), hovered: sameAnchor(_optionalChain([state, 'access', _210 => _210.hover, 'optionalAccess', _211 => _211.anchor]), ref), closes };
+    return { ref, x: s.x, y: s.y, type: _nullishCoalesce(a.type, () => ( inferAnchorType(a))), selected: selected(ref), hovered: sameAnchor(_optionalChain([state, 'access', _232 => _232.hover, 'optionalAccess', _233 => _233.anchor]), ref), closes };
   });
-  if (state.tool === "pen" && !state.pen && _optionalChain([state, 'access', _212 => _212.hover, 'optionalAccess', _213 => _213.anchor])) {
+  if (state.tool === "pen" && !state.pen && _optionalChain([state, 'access', _234 => _234.hover, 'optionalAccess', _235 => _235.anchor])) {
     const a = getAnchorWorld(doc, state.hover.anchor);
     if (a) {
       const s = toScreen(state, a);
@@ -7466,15 +7700,15 @@ function getVectorOverlayRenderData(state) {
   }
   const handles = getVisibleHandles(state).flatMap((ref) => {
     const a = getAnchorWorld(doc, ref);
-    const h = _optionalChain([a, 'optionalAccess', _214 => _214[ref.handle]]);
+    const h = _optionalChain([a, 'optionalAccess', _236 => _236[ref.handle]]);
     if (!a || !h) return [];
     const s = toScreen(state, h);
     const sa = toScreen(state, a);
-    const hovered = !!_optionalChain([state, 'access', _215 => _215.hover, 'optionalAccess', _216 => _216.handle]) && sameAnchor(state.hover.handle, ref) && state.hover.handle.handle === ref.handle;
+    const hovered = !!_optionalChain([state, 'access', _237 => _237.hover, 'optionalAccess', _238 => _238.handle]) && sameAnchor(state.hover.handle, ref) && state.hover.handle.handle === ref.handle;
     return [{ ref, x: s.x, y: s.y, anchorX: sa.x, anchorY: sa.y, hovered }];
   });
   let marquee = null;
-  if (_optionalChain([state, 'access', _217 => _217.interaction, 'optionalAccess', _218 => _218.type]) === "marquee") {
+  if (_optionalChain([state, 'access', _239 => _239.interaction, 'optionalAccess', _240 => _240.type]) === "marquee") {
     const b = state.interaction.bounds;
     const tl = toScreen(state, b);
     marquee = { x: tl.x, y: tl.y, width: b.width * z, height: b.height * z };
@@ -7482,7 +7716,7 @@ function getVectorOverlayRenderData(state) {
   let penPreview = null;
   if (state.tool === "pen" && state.pen && state.pointer && !state.interaction) {
     const node = findVectorNode(doc.nodes, state.pen.nodeId);
-    const sp = _optionalChain([node, 'optionalAccess', _219 => _219.type]) === "path" ? node.subpaths[state.pen.subpath] : void 0;
+    const sp = _optionalChain([node, 'optionalAccess', _241 => _241.type]) === "path" ? node.subpaths[state.pen.subpath] : void 0;
     const last = sp ? getAnchorWorld(doc, { nodeId: state.pen.nodeId, subpath: state.pen.subpath, index: sp.anchors.length - 1 }) : void 0;
     if (last) {
       const a = toScreen(state, last);
@@ -7495,9 +7729,9 @@ function getVectorOverlayRenderData(state) {
   const artboard = { x: origin.x, y: origin.y, width: doc.width * z, height: doc.height * z };
   let status = null;
   const it = state.interaction;
-  if (_optionalChain([it, 'optionalAccess', _220 => _220.type]) === "rotate") status = `${Math.round(it.angle)}\xB0`;
-  else if (_optionalChain([it, 'optionalAccess', _221 => _221.type]) === "move" || _optionalChain([it, 'optionalAccess', _222 => _222.type]) === "anchors") status = `\u0394 ${fmt(it.dx)}, ${fmt(it.dy)}`;
-  else if (_optionalChain([it, 'optionalAccess', _223 => _223.type]) === "scale" || _optionalChain([it, 'optionalAccess', _224 => _224.type]) === "draw") {
+  if (_optionalChain([it, 'optionalAccess', _242 => _242.type]) === "rotate") status = `${Math.round(it.angle)}\xB0`;
+  else if (_optionalChain([it, 'optionalAccess', _243 => _243.type]) === "move" || _optionalChain([it, 'optionalAccess', _244 => _244.type]) === "anchors") status = `\u0394 ${fmt(it.dx)}, ${fmt(it.dy)}`;
+  else if (_optionalChain([it, 'optionalAccess', _245 => _245.type]) === "scale" || _optionalChain([it, 'optionalAccess', _246 => _246.type]) === "draw") {
     const b = it.type === "draw" ? findVectorNode(doc.nodes, it.nodeId) ? vectorNodeBounds(findVectorNode(doc.nodes, it.nodeId)) : null : state.selectionFrame;
     if (b) status = `W ${fmt(b.width)} \xD7 H ${fmt(b.height)}`;
   }
@@ -7514,24 +7748,24 @@ function getVectorOverlayRenderData(state) {
     }
   }
   let toolStroke = null;
-  if (_optionalChain([it, 'optionalAccess', _225 => _225.type]) === "stroke") {
+  if (_optionalChain([it, 'optionalAccess', _247 => _247.type]) === "stroke") {
     const pts = it.points.map((q) => toScreen(state, q));
     const d = pts.map((q, i) => `${i ? "L" : "M"}${fmt(q.x)} ${fmt(q.y)}`).join("") + (pts.length === 1 ? `L${fmt(pts[0].x)} ${fmt(pts[0].y)}` : "");
     toolStroke = { tool: it.tool, d, width: fmt(it.width * z) };
   }
   let pencilString = null;
-  if (_optionalChain([it, 'optionalAccess', _226 => _226.type]) === "draw" && it.string) {
+  if (_optionalChain([it, 'optionalAccess', _248 => _248.type]) === "draw" && it.string) {
     const a = toScreen(state, it.string[0]);
     const b = toScreen(state, it.string[1]);
     pencilString = { x1: fmt(a.x), y1: fmt(a.y), x2: fmt(b.x), y2: fmt(b.y) };
   }
-  const dragged = _optionalChain([it, 'optionalAccess', _227 => _227.type]) === "corner" ? it.ref : null;
+  const dragged = _optionalChain([it, 'optionalAccess', _249 => _249.type]) === "corner" ? it.ref : null;
   const cornerWidgets = getVectorCornerWidgets(state).map((w) => {
     const s = toScreen(state, w);
-    return { ref: w.ref, x: fmt(s.x), y: fmt(s.y), radius: w.radius, kind: w.kind, hovered: sameAnchor(_optionalChain([state, 'access', _228 => _228.hover, 'optionalAccess', _229 => _229.corner]), w.ref), active: !!dragged };
+    return { ref: w.ref, x: fmt(s.x), y: fmt(s.y), radius: w.radius, kind: w.kind, hovered: sameAnchor(_optionalChain([state, 'access', _250 => _250.hover, 'optionalAccess', _251 => _251.corner]), w.ref), active: !!dragged };
   });
-  if (_optionalChain([it, 'optionalAccess', _230 => _230.type]) === "corner") status = `R ${fmt(it.radius)}`;
-  const cutPoint = state.tool === "scissors" && _optionalChain([state, 'access', _231 => _231.hover, 'optionalAccess', _232 => _232.segment]) && !it ? (({ x, y }) => ({ x: fmt(x), y: fmt(y) }))(toScreen(state, state.hover.segment.point)) : null;
+  if (_optionalChain([it, 'optionalAccess', _252 => _252.type]) === "corner") status = `R ${fmt(it.radius)}`;
+  const cutPoint = state.tool === "scissors" && _optionalChain([state, 'access', _253 => _253.hover, 'optionalAccess', _254 => _254.segment]) && !it ? (({ x, y }) => ({ x: fmt(x), y: fmt(y) }))(toScreen(state, state.hover.segment.point)) : null;
   const sc = (p) => {
     const q = toScreen(state, p);
     return { x: fmt(q.x), y: fmt(q.y) };
@@ -7539,13 +7773,13 @@ function getVectorOverlayRenderData(state) {
   const sameWidth = (a, b) => !!a && a.nodeId === b.nodeId && a.index === b.index;
   const widthPoints = getVectorWidthHandles(state).map((h) => {
     const c = sc(h);
-    const hw = _optionalChain([state, 'access', _233 => _233.hover, 'optionalAccess', _234 => _234.widthPoint]);
+    const hw = _optionalChain([state, 'access', _255 => _255.hover, 'optionalAccess', _256 => _256.widthPoint]);
     const hovered = hw && sameWidth(hw, h.ref) && hw.subpath === h.ref.subpath ? hw.part : null;
-    return { ref: h.ref, x: c.x, y: c.y, left: sc(h.left), right: sc(h.right), selected: h.selected, hovered, active: _optionalChain([it, 'optionalAccess', _235 => _235.type]) === "width" && sameWidth(it.ref, h.ref) };
+    return { ref: h.ref, x: c.x, y: c.y, left: sc(h.left), right: sc(h.right), selected: h.selected, hovered, active: _optionalChain([it, 'optionalAccess', _257 => _257.type]) === "width" && sameWidth(it.ref, h.ref) };
   });
-  const spot = state.tool === "width" && !it ? _optionalChain([state, 'access', _236 => _236.hover, 'optionalAccess', _237 => _237.strokeSpot]) : null;
+  const spot = state.tool === "width" && !it ? _optionalChain([state, 'access', _258 => _258.hover, 'optionalAccess', _259 => _259.strokeSpot]) : null;
   const widthSpot = spot ? { ...sc(spot.point), left: sc(spot.left), right: sc(spot.right) } : null;
-  if (_optionalChain([it, 'optionalAccess', _238 => _238.type]) === "width") status = it.mode === "move" ? "Move width point" : `W ${fmt(it.width)}`;
+  if (_optionalChain([it, 'optionalAccess', _260 => _260.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;
@@ -7561,7 +7795,7 @@ function getVectorOverlayRenderData(state) {
       lines: state.builder.lines.map((l) => svg(_chunkVNYRI265cjs.transformBezierPath.call(void 0, l, view))),
       trail
     };
-    if (state.builder.mode !== "fill" && _optionalChain([it, 'optionalAccess', _239 => _239.type]) === "builder") {
+    if (state.builder.mode !== "fill" && _optionalChain([it, 'optionalAccess', _261 => _261.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"}`;
     }
@@ -7613,7 +7847,7 @@ function isVectorTextTarget(target) {
   if (!el || typeof el !== "object") return false;
   const tag = (_nullishCoalesce(el.tagName, () => ( ""))).toUpperCase();
   if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
-  return !!el.isContentEditable || _optionalChain([el, 'access', _240 => _240.getAttribute, 'optionalCall', _241 => _241("contenteditable")]) === "true";
+  return !!el.isContentEditable || _optionalChain([el, 'access', _262 => _262.getAttribute, 'optionalCall', _263 => _263("contenteditable")]) === "true";
 }
 function getVectorSelectionStyle(state) {
   const paths = [];
@@ -7621,12 +7855,12 @@ function getVectorSelectionStyle(state) {
     const node = findVectorNode(state.document.nodes, id);
     if (node) paths.push(...collect(node));
   }
-  const anchorMode = state.tool === "direct" && !!_optionalChain([state, 'access', _242 => _242.selectedAnchors, 'optionalAccess', _243 => _243.length]);
+  const anchorMode = state.tool === "direct" && !!_optionalChain([state, 'access', _264 => _264.selectedAnchors, 'optionalAccess', _265 => _265.length]);
   if (anchorMode) {
     for (const r of state.selectedAnchors) {
       if (paths.some((p) => p.id === r.nodeId)) continue;
       const node = findVectorNode(state.document.nodes, r.nodeId);
-      if (_optionalChain([node, 'optionalAccess', _244 => _244.type]) === "path") paths.push(node);
+      if (_optionalChain([node, 'optionalAccess', _266 => _266.type]) === "path") paths.push(node);
     }
   }
   if (!paths.length) return null;
@@ -7637,7 +7871,7 @@ function getVectorSelectionStyle(state) {
     for (const c of vectorCorners(p.subpaths)) {
       if (anchorMode && !state.selectedAnchors.some((r) => r.nodeId === p.id && r.subpath === c.subpath && r.index === c.index)) continue;
       const corner = p.subpaths[c.subpath].anchors[c.index].corner;
-      corners2.push({ radius: _nullishCoalesce(_optionalChain([corner, 'optionalAccess', _245 => _245.radius]), () => ( 0)), kind: _nullishCoalesce(_optionalChain([corner, 'optionalAccess', _246 => _246.kind]), () => ( "round")) });
+      corners2.push({ radius: _nullishCoalesce(_optionalChain([corner, 'optionalAccess', _267 => _267.radius]), () => ( 0)), kind: _nullishCoalesce(_optionalChain([corner, 'optionalAccess', _268 => _268.kind]), () => ( "round")) });
     }
   }
   const c0 = _nullishCoalesce(corners2[0], () => ( { radius: 0, kind: "round" }));
@@ -7785,17 +8019,17 @@ function createVectorCommands(controller, options = {}) {
   const base = { group, ...options.scope ? { scope: options.scope } : {} };
   const hasSelection = () => controller.getState().selection.length ? true : "Nothing is selected.";
   const ids = (params) => {
-    const list2 = _nullishCoalesce(_optionalChain([params, 'optionalAccess', _247 => _247.ids]), () => ( controller.getState().selection));
+    const list2 = _nullishCoalesce(_optionalChain([params, 'optionalAccess', _269 => _269.ids]), () => ( controller.getState().selection));
     for (const id of list2) if (!controller.getNode(id)) fail(`There is no node "${id}".`);
     if (!list2.length) fail("Nothing is selected; pass ids.");
     return list2;
   };
-  const enabledFor = (_, params) => _optionalChain([params, 'optionalAccess', _248 => _248.ids, 'optionalAccess', _249 => _249.length]) ? true : hasSelection();
+  const enabledFor = (_, params) => _optionalChain([params, 'optionalAccess', _270 => _270.ids, 'optionalAccess', _271 => _271.length]) ? true : hasSelection();
   const anchorsOf = (refs) => {
     if (!refs) return [...controller.getState().selectedAnchors];
     for (const r of refs) {
       const node = controller.getNode(r.nodeId);
-      if (_optionalChain([node, 'optionalAccess', _250 => _250.type]) !== "path" || !_optionalChain([node, 'access', _251 => _251.subpaths, 'access', _252 => _252[r.subpath], 'optionalAccess', _253 => _253.anchors, 'access', _254 => _254[r.index]])) fail(`There is no anchor ${r.index} on subpath ${r.subpath} of "${r.nodeId}".`);
+      if (_optionalChain([node, 'optionalAccess', _272 => _272.type]) !== "path" || !_optionalChain([node, 'access', _273 => _273.subpaths, 'access', _274 => _274[r.subpath], 'optionalAccess', _275 => _275.anchors, 'access', _276 => _276[r.index]])) fail(`There is no anchor ${r.index} on subpath ${r.subpath} of "${r.nodeId}".`);
     }
     return refs;
   };
@@ -7886,7 +8120,7 @@ function createVectorCommands(controller, options = {}) {
       run: (_ctx, params) => {
         const id = controller.addPath(params.d, { ...pickStyle(params), ...params.name ? { name: params.name } : {} });
         const node = controller.getNode(id);
-        if (_optionalChain([node, 'optionalAccess', _255 => _255.type]) === "path" && !node.subpaths.length) {
+        if (_optionalChain([node, 'optionalAccess', _277 => _277.type]) === "path" && !node.subpaths.length) {
           controller.undo();
           fail("The path data has no points.");
         }
@@ -7918,10 +8152,10 @@ function createVectorCommands(controller, options = {}) {
       params: { type: "object", properties: { radius: { type: "number", minimum: 0 }, kind: { type: "string", enum: VECTOR_CORNER_KINDS }, ids: IDS, anchors: ANCHORS } },
       undoable: true,
       run: (_ctx, params) => {
-        const refs = _optionalChain([params, 'optionalAccess', _256 => _256.anchors]) ? anchorsOf(params.anchors) : void 0;
-        const target = { refs, ids: _optionalChain([params, 'optionalAccess', _257 => _257.ids]) ? ids(params) : void 0 };
-        if (_optionalChain([params, 'optionalAccess', _258 => _258.radius]) !== void 0) check(controller.setCornerRadius(params.radius, { ...target, kind: params.kind }));
-        else if (_optionalChain([params, 'optionalAccess', _259 => _259.kind])) check(controller.setCornerKind(params.kind, target));
+        const refs = _optionalChain([params, 'optionalAccess', _278 => _278.anchors]) ? anchorsOf(params.anchors) : void 0;
+        const target = { refs, ids: _optionalChain([params, 'optionalAccess', _279 => _279.ids]) ? ids(params) : void 0 };
+        if (_optionalChain([params, 'optionalAccess', _280 => _280.radius]) !== void 0) check(controller.setCornerRadius(params.radius, { ...target, kind: params.kind }));
+        else if (_optionalChain([params, 'optionalAccess', _281 => _281.kind])) check(controller.setCornerKind(params.kind, target));
         else fail("Pass `radius` and / or `kind`.");
         return { ok: true };
       }
@@ -7956,12 +8190,37 @@ function createVectorCommands(controller, options = {}) {
       undoable: true,
       run: (_ctx, params) => {
         const target = { ids: ids(params) };
-        if (_optionalChain([params, 'optionalAccess', _260 => _260.preset])) check(controller.setWidthProfile(params.preset, target));
-        else if (_optionalChain([params, 'optionalAccess', _261 => _261.points]) !== void 0) check(controller.setWidthProfile(_nullishCoalesce(params.points, () => ( null)), target));
-        else if (_optionalChain([params, 'optionalAccess', _262 => _262.taper]) || _optionalChain([params, 'optionalAccess', _263 => _263.wave])) check(controller.setWidthProfile({ taper: params.taper, wave: params.wave }, target));
+        if (_optionalChain([params, 'optionalAccess', _282 => _282.preset])) check(controller.setWidthProfile(params.preset, target));
+        else if (_optionalChain([params, 'optionalAccess', _283 => _283.points]) !== void 0) check(controller.setWidthProfile(_nullishCoalesce(params.points, () => ( null)), target));
+        else if (_optionalChain([params, 'optionalAccess', _284 => _284.taper]) || _optionalChain([params, 'optionalAccess', _285 => _285.wave])) check(controller.setWidthProfile({ taper: params.taper, wave: params.wave }, target));
         else fail("Pass `preset`, `points`, `taper` or `wave`.");
         const node = controller.getNode(target.ids[0]);
-        return { ok: true, points: _optionalChain([node, 'optionalAccess', _264 => _264.type]) === "path" ? _nullishCoalesce(node.strokeWidthProfile, () => ( [])) : [] };
+        return { ok: true, points: _optionalChain([node, 'optionalAccess', _286 => _286.type]) === "path" ? _nullishCoalesce(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 (!_optionalChain([params, 'optionalAccess', _287 => _287.id])) fail("Pass the path `id`.");
+        check(controller.setWidthPoint({ nodeId: params.id, index: _nullishCoalesce(params.index, () => ( null)) }, { t: params.t, left: params.left, right: params.right }));
+        const node = controller.getNode(params.id);
+        return { ok: true, points: _optionalChain([node, 'optionalAccess', _288 => _288.type]) === "path" ? _nullishCoalesce(node.strokeWidthProfile, () => ( [])) : [] };
       }
     },
     {
@@ -7974,7 +8233,7 @@ function createVectorCommands(controller, options = {}) {
       enabled: enabledFor,
       undoable: true,
       run: (_ctx, params) => {
-        const created = controller.outlineStroke({ ids: _optionalChain([params, 'optionalAccess', _265 => _265.ids]) ? ids(params) : void 0 });
+        const created = controller.outlineStroke({ ids: _optionalChain([params, 'optionalAccess', _289 => _289.ids]) ? ids(params) : void 0 });
         if (!created.length) fail("No selected path has a stroke.");
         return { ids: created };
       }
@@ -8145,7 +8404,7 @@ function createVectorCommands(controller, options = {}) {
       enabled: enabledFor,
       undoable: true,
       run: (_ctx, params) => {
-        const id = controller.group({ ids: ids(params), name: _optionalChain([params, 'optionalAccess', _266 => _266.name]) });
+        const id = controller.group({ ids: ids(params), name: _optionalChain([params, 'optionalAccess', _290 => _290.name]) });
         if (!id) fail("Only nodes that share a parent can be grouped.");
         return { id };
       }
@@ -8173,7 +8432,7 @@ function createVectorCommands(controller, options = {}) {
       params: { type: "object", properties: { anchors: ANCHORS, keepShape: { type: "boolean" } } },
       undoable: true,
       run: (_ctx, params) => {
-        check(controller.deleteAnchors(anchorsOf(_optionalChain([params, 'optionalAccess', _267 => _267.anchors])), { keepShape: _optionalChain([params, 'optionalAccess', _268 => _268.keepShape]) }));
+        check(controller.deleteAnchors(anchorsOf(_optionalChain([params, 'optionalAccess', _291 => _291.anchors])), { keepShape: _optionalChain([params, 'optionalAccess', _292 => _292.keepShape]) }));
         return { ok: true };
       }
     },
@@ -8228,7 +8487,7 @@ function createVectorCommands(controller, options = {}) {
       params: { type: "object", properties: { ids: IDS, tolerance: { type: "number", minimum: 0 } } },
       undoable: true,
       run: (_ctx, params) => {
-        check(controller.joinPaths({ ids: _optionalChain([params, 'optionalAccess', _269 => _269.ids]) ? ids(params) : void 0, tolerance: _optionalChain([params, 'optionalAccess', _270 => _270.tolerance]) }));
+        check(controller.joinPaths({ ids: _optionalChain([params, 'optionalAccess', _293 => _293.ids]) ? ids(params) : void 0, tolerance: _optionalChain([params, 'optionalAccess', _294 => _294.tolerance]) }));
         return { selection: controller.getState().selection };
       }
     },
@@ -8242,7 +8501,7 @@ function createVectorCommands(controller, options = {}) {
       params: { type: "object", properties: { axis: { type: "string", enum: ["horizontal", "vertical", "both"] }, anchors: ANCHORS } },
       undoable: true,
       run: (_ctx, params) => {
-        check(controller.averageAnchors(_nullishCoalesce(_optionalChain([params, 'optionalAccess', _271 => _271.axis]), () => ( "both")), anchorsOf(_optionalChain([params, 'optionalAccess', _272 => _272.anchors]))));
+        check(controller.averageAnchors(_nullishCoalesce(_optionalChain([params, 'optionalAccess', _295 => _295.axis]), () => ( "both")), anchorsOf(_optionalChain([params, 'optionalAccess', _296 => _296.anchors]))));
         return { ok: true };
       }
     },
@@ -8256,7 +8515,7 @@ function createVectorCommands(controller, options = {}) {
       enabled: enabledFor,
       undoable: true,
       run: (_ctx, params) => {
-        check(controller.removeRedundantPoints({ ids: _optionalChain([params, 'optionalAccess', _273 => _273.ids]) ? ids(params) : void 0, tolerance: _optionalChain([params, 'optionalAccess', _274 => _274.tolerance]) }));
+        check(controller.removeRedundantPoints({ ids: _optionalChain([params, 'optionalAccess', _297 => _297.ids]) ? ids(params) : void 0, tolerance: _optionalChain([params, 'optionalAccess', _298 => _298.tolerance]) }));
         return { ok: true };
       }
     },
@@ -8269,7 +8528,7 @@ function createVectorCommands(controller, options = {}) {
       params: { type: "object", properties: { ids: IDS, amount: { type: "number", minimum: 0, maximum: 1 }, anchors: ANCHORS } },
       undoable: true,
       run: (_ctx, params) => {
-        check(controller.smoothPaths({ ids: _optionalChain([params, 'optionalAccess', _275 => _275.ids]) ? ids(params) : void 0, amount: _optionalChain([params, 'optionalAccess', _276 => _276.amount]), refs: _optionalChain([params, 'optionalAccess', _277 => _277.anchors]) }));
+        check(controller.smoothPaths({ ids: _optionalChain([params, 'optionalAccess', _299 => _299.ids]) ? ids(params) : void 0, amount: _optionalChain([params, 'optionalAccess', _300 => _300.amount]), refs: _optionalChain([params, 'optionalAccess', _301 => _301.anchors]) }));
         return { ok: true };
       }
     },
@@ -8282,14 +8541,14 @@ function createVectorCommands(controller, options = {}) {
       params: { type: "object", properties: { nodeId: { type: "string" }, x: { type: "number" }, y: { type: "number" }, anchors: ANCHORS } },
       undoable: true,
       run: (_ctx, params) => {
-        if (_optionalChain([params, 'optionalAccess', _278 => _278.nodeId]) !== void 0) {
+        if (_optionalChain([params, 'optionalAccess', _302 => _302.nodeId]) !== void 0) {
           if (!controller.getNode(params.nodeId)) fail(`There is no node "${params.nodeId}".`);
           if (params.x === void 0 || params.y === void 0) fail("Pass x and y with nodeId.");
           const created = controller.cutPathAt(params.nodeId, { x: params.x, y: params.y });
           if (!created) fail("Nothing to cut there (the end of an open path, or a locked path).");
           return { ids: created };
         }
-        check(controller.cutAtAnchors(anchorsOf(_optionalChain([params, 'optionalAccess', _279 => _279.anchors]))));
+        check(controller.cutAtAnchors(anchorsOf(_optionalChain([params, 'optionalAccess', _303 => _303.anchors]))));
         return { ids: controller.getState().selection };
       }
     },
@@ -8340,7 +8599,7 @@ function createVectorCommands(controller, options = {}) {
       },
       run: (_ctx, params) => {
         const patch = {};
-        for (const key of ["keepShapeOnDelete", "curvatureMoves", "pencilSmoothing", "recognizeShapes", "eraserSize", "pencilPressure"]) if (_optionalChain([params, 'optionalAccess', _280 => _280[key]]) !== void 0) patch[key] = params[key];
+        for (const key of ["keepShapeOnDelete", "curvatureMoves", "pencilSmoothing", "recognizeShapes", "eraserSize", "pencilPressure"]) if (_optionalChain([params, 'optionalAccess', _304 => _304[key]]) !== void 0) patch[key] = params[key];
         controller.setEditing(patch);
         return { editing: controller.getState().editing };
       }
@@ -8365,7 +8624,7 @@ function createVectorCommands(controller, options = {}) {
       keywords: ["download", "save", "markup"],
       description: "Returns the document as SVG markup.",
       params: { type: "object", properties: { precision: { type: "integer", minimum: 0, maximum: 8 } } },
-      run: (_ctx, params) => ({ svg: controller.toSvg({ precision: _optionalChain([params, 'optionalAccess', _281 => _281.precision]) }) })
+      run: (_ctx, params) => ({ svg: controller.toSvg({ precision: _optionalChain([params, 'optionalAccess', _305 => _305.precision]) }) })
     },
     {
       ...base,