@pixerate/editor 0.39.0 → 0.40.0

package/dist/vector/index.js

@@ -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, (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;
@@ -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 (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);
@@ -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,7 +4321,8 @@ var VectorEditorController = class {
   doc;
   selection = [];
   anchors = [];
-  widthPoint = null;
+  widthPoints = [];
+  widthEdit = null;
   editingId = null;
   pen = null;
   tool;
@@ -4398,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()),
@@ -4469,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":
@@ -4489,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 {
@@ -4497,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;
     }
@@ -4602,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") {
@@ -4878,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
@@ -6298,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);
@@ -6357,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();
@@ -6370,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) {
@@ -6377,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);
@@ -6387,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,
@@ -6412,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;
@@ -6896,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;
@@ -7054,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":
@@ -7148,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") {
@@ -7176,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();
   }
   // -------------------------------------------------------------------------
@@ -7236,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) {
@@ -7260,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];
@@ -7545,7 +7779,7 @@ 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;
@@ -7964,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`,