@pixerate/editor 0.36.0 → 0.38.0

package/dist/vector/index.js

@@ -2,6 +2,7 @@ import {
   HistoryManager
 } from "../chunk-QVZZGT4X.js";
 import {
+  PlanarMap,
   bezierPathBounds,
   bezierPathToSvg,
   closeContour,
@@ -10,13 +11,17 @@ import {
   distanceToBezierPath,
   fitCubicWithTangents,
   fitCubics,
+  flattenChain,
   formatNumber,
   gradientToSvgDef,
+  isStraightCubic,
   normalizeBezierPath,
   outlineStroke,
   pathBoolean,
   pathToContours,
+  pathfinder,
   pointInBezierPath,
+  polygonBoolean,
   segmentBounds,
   segmentDerivative,
   segmentIntersections,
@@ -31,13 +36,30 @@ import {
   transformBezierPath,
   trimSegments,
   windingNumber
-} from "../chunk-EGPIVUEF.js";
+} from "../chunk-ZCCU3VNI.js";
 
 // src/vector/types.ts
 var VECTOR_CORNER_KINDS = ["round", "inverted", "chamfer"];
 var VECTOR_ARROWHEADS = ["triangle", "arrow", "open", "circle", "square", "bar"];
-var VECTOR_TOOLS = ["select", "direct", "pen", "pencil", "rect", "ellipse", "polygon", "star", "line", "scissors", "knife", "eraser"];
+var VECTOR_TOOLS = [
+  "select",
+  "direct",
+  "pen",
+  "pencil",
+  "rect",
+  "ellipse",
+  "polygon",
+  "star",
+  "line",
+  "scissors",
+  "knife",
+  "eraser",
+  "width",
+  "shapeBuilder",
+  "paintBucket"
+];
 var VECTOR_TRANSFORM_HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w", "rotate"];
+var VECTOR_PATHFINDER_OPERATIONS = ["divide", "trim", "merge", "crop", "outline", "minusBack"];
 
 // src/vector/corners.ts
 var EPS = 1e-9;
@@ -245,6 +267,535 @@ function setSubpathCorners(sp, radius, kind) {
   return { closed: sp.closed, anchors: sp.anchors.map((a) => setAnchorCorner(a, radius, kind)) };
 }
 
+// src/vector/width.ts
+var VECTOR_WIDTH_PROFILE_MAX_POINTS = 64;
+var VECTOR_WIDTH_PROFILE_MAX_SCALE = 1e3;
+var VECTOR_WIDTH_SAME_T = 1e-6;
+var sym = (t, s) => ({ t, left: s, right: s });
+var VECTOR_WIDTH_PRESETS = [
+  { id: "uniform", label: "Uniform", points: [] },
+  { id: "taperStart", label: "Taper start", points: [sym(0, 0), sym(1, 1)] },
+  { id: "taperEnd", label: "Taper end", points: [sym(0, 1), sym(1, 0)] },
+  { id: "taperBoth", label: "Taper both", points: [sym(0, 0), sym(0.5, 1), sym(1, 0)] },
+  // Full width at the ends, swelling to twice the width in the middle.
+  { id: "bulge", label: "Bulge", points: [sym(0, 1), sym(0.5, 2), sym(1, 1)] },
+  // Full width at the ends, pinched to a quarter in the middle.
+  { id: "pinch", label: "Pinch", points: [sym(0, 1), sym(0.5, 0.25), sym(1, 1)] },
+  // A round head a fifth of the way along, then a long taper to the end.
+  { id: "teardrop", label: "Teardrop", points: [sym(0, 0), sym(0.2, 1), sym(1, 0)] },
+  // Two swells between narrow necks.
+  { id: "wave", label: "Wave", points: [sym(0, 0.3), sym(0.25, 1), sym(0.5, 0.3), sym(0.75, 1), sym(1, 0.3)] },
+  // A pen stroke: a quick press, a slow lift.
+  { id: "pressure", label: "Pressure", points: [sym(0, 0.15), sym(0.12, 0.85), sym(0.45, 1), sym(0.8, 0.7), sym(1, 0.05)] }
+];
+var VECTOR_WIDTH_PRESET_IDS = VECTOR_WIDTH_PRESETS.map((p) => p.id);
+var clean = (v2, max) => typeof v2 === "number" && Number.isFinite(v2) ? Math.min(Math.max(v2, 0), max) : null;
+function sanitizeWidthProfile(points) {
+  if (!Array.isArray(points)) return [];
+  const out = [];
+  for (const p of points) {
+    if (!p || typeof p !== "object") continue;
+    const t = clean(p.t, 1);
+    const l = clean(p.left, VECTOR_WIDTH_PROFILE_MAX_SCALE);
+    const r = clean(p.right, VECTOR_WIDTH_PROFILE_MAX_SCALE);
+    if (t === null || l === null && r === null) continue;
+    out.push({ t, left: l ?? r, right: r ?? l });
+    if (out.length >= VECTOR_WIDTH_PROFILE_MAX_POINTS) break;
+  }
+  return out.map((p, i) => [p, i]).sort((a, b) => a[0].t - b[0].t || a[1] - b[1]).map(([p]) => p);
+}
+function isUniformWidthProfile(points) {
+  return !points?.length || points.every((p) => p.left === 1 && p.right === 1);
+}
+function secant(pts, i, k) {
+  const a = pts[i];
+  const b = pts[i + 1];
+  return a && b && b.t - a.t > 1e-12 ? (b[k] - a[k]) / (b.t - a.t) : 0;
+}
+function tangent(pts, i, k) {
+  const last = pts.length - 1;
+  if (i <= 0) return secant(pts, 0, k);
+  if (i >= last) return secant(pts, last - 1, k);
+  const d0 = secant(pts, i - 1, k);
+  const d1 = secant(pts, i, k);
+  return d0 * d1 <= 0 ? 0 : 2 * d0 * d1 / (d0 + d1);
+}
+function interp(pts, t, k) {
+  const first = pts[0];
+  const last = pts[pts.length - 1];
+  if (!(t > first.t)) return first[k];
+  if (t >= last.t) return last[k];
+  let i = 0;
+  while (i + 1 < pts.length && pts[i + 1].t <= t) i++;
+  const a = pts[i];
+  const b = pts[i + 1];
+  const h = b.t - a.t;
+  if (h <= 1e-12) return b[k];
+  const u = (t - a.t) / h;
+  const u2 = u * u;
+  const u3 = u2 * u;
+  const w = (2 * u3 - 3 * u2 + 1) * a[k] + (u3 - 2 * u2 + u) * h * tangent(pts, i, k) + (3 * u2 - 2 * u3) * b[k] + (u3 - u2) * h * tangent(pts, i + 1, k);
+  return Math.max(0, w);
+}
+function widthProfileAt(points, t) {
+  if (!points?.length) return { left: 1, right: 1 };
+  return { left: interp(points, t, "left"), right: interp(points, t, "right") };
+}
+function widthProfileMaxScale(points) {
+  if (!points?.length) return 1;
+  return points.reduce((m, p) => Math.max(m, p.left, p.right), 0);
+}
+function widthProfilePreset(id) {
+  const p = VECTOR_WIDTH_PRESETS.find((q) => q.id === id);
+  return p ? p.points.map((q) => ({ ...q })) : null;
+}
+function widthProfilePresetId(points) {
+  if (isUniformWidthProfile(points)) return "uniform";
+  const same = (a, b) => a.length === b.length && a.every((p, i) => Math.abs(p.t - b[i].t) < 1e-9 && Math.abs(p.left - b[i].left) < 1e-9 && Math.abs(p.right - b[i].right) < 1e-9);
+  return VECTOR_WIDTH_PRESETS.find((p) => p.points.length && same(points, p.points))?.id ?? "custom";
+}
+function reverseWidthProfile(points) {
+  return points.map((p) => ({ t: 1 - p.t, left: p.right, right: p.left })).reverse();
+}
+function mirrorWidthProfile(points) {
+  return points.map((p) => ({ t: p.t, left: p.right, right: p.left }));
+}
+function editable(points) {
+  return points?.length ? points.map((p) => ({ ...p })) : [sym(0, 1), sym(1, 1)];
+}
+function insertWidthPoint(points, t, sides2 = {}, options = {}) {
+  const pts = editable(points);
+  const tt = Math.min(Math.max(Number.isFinite(t) ? t : 0, 0), 1);
+  const here = widthProfileAt(points?.length ? points : null, tt);
+  const p = {
+    t: tt,
+    left: clean(sides2.left, VECTOR_WIDTH_PROFILE_MAX_SCALE) ?? here.left,
+    right: clean(sides2.right, VECTOR_WIDTH_PROFILE_MAX_SCALE) ?? here.right
+  };
+  const same = pts.findIndex((q) => Math.abs(q.t - tt) <= VECTOR_WIDTH_SAME_T);
+  if (same >= 0 && !options.step) {
+    pts[same] = { ...p, t: pts[same].t };
+    return { points: pts, index: same };
+  }
+  let i = 0;
+  while (i < pts.length && pts[i].t <= tt) i++;
+  if (pts.length >= VECTOR_WIDTH_PROFILE_MAX_POINTS) return { points: pts, index: Math.max(0, i - 1) };
+  pts.splice(i, 0, p);
+  return { points: pts, index: i };
+}
+function setWidthPoint(points, index, patch) {
+  const pts = points.map((p2) => ({ ...p2 }));
+  const p = pts[index];
+  if (!p) return pts;
+  if (typeof patch.t === "number" && Number.isFinite(patch.t)) {
+    const lo = index > 0 ? pts[index - 1].t : 0;
+    const hi = index < pts.length - 1 ? pts[index + 1].t : 1;
+    p.t = Math.min(Math.max(patch.t, lo), Math.max(hi, lo));
+  }
+  const l = clean(patch.left, VECTOR_WIDTH_PROFILE_MAX_SCALE);
+  const r = clean(patch.right, VECTOR_WIDTH_PROFILE_MAX_SCALE);
+  if (l !== null) p.left = l;
+  if (r !== null) p.right = r;
+  return pts;
+}
+function removeWidthPoints(points, indices) {
+  const drop = new Set(indices);
+  return points.filter((_, i) => !drop.has(i)).map((p) => ({ ...p }));
+}
+function ease(u, e) {
+  const x = Math.min(Math.max(u, 0), 1);
+  const round = Math.sqrt(Math.max(0, 1 - (1 - x) * (1 - x)));
+  return x + (round - x) * Math.min(Math.max(e, 0), 1);
+}
+function taperWaveFactor(t, taper, wave) {
+  let k = 1;
+  if (taper) {
+    let ls = Math.max(0, taper.startLength ?? 0);
+    let le = Math.max(0, taper.endLength ?? 0);
+    if (ls + le > 1) {
+      const f = 1 / (ls + le);
+      ls *= f;
+      le *= f;
+    }
+    const sw = Math.min(Math.max(taper.startWidth ?? 0, 0), 1);
+    const ew = Math.min(Math.max(taper.endWidth ?? 0, 0), 1);
+    if (ls > 0 && t < ls) k = Math.min(k, sw + (1 - sw) * ease(t / ls, taper.startEase ?? 0));
+    if (le > 0 && t > 1 - le) k = Math.min(k, ew + (1 - ew) * ease((1 - t) / le, taper.endEase ?? 0));
+  }
+  if (wave) {
+    const cycles = wave.cycles ?? 4;
+    const amount = Math.min(Math.max(wave.amount ?? 0.5, 0), 1);
+    if (cycles > 0 && amount > 0) {
+      const ph = 2 * Math.PI * t * cycles + (wave.phase ?? 0) * Math.PI / 180;
+      k *= 1 - amount * (0.5 - 0.5 * Math.cos(ph));
+    }
+  }
+  return k;
+}
+function generateWidthProfile(options) {
+  const cycles = options.wave ? Math.max(0, options.wave.cycles ?? 4) : 0;
+  const n = Math.max(8, Math.min(VECTOR_WIDTH_PROFILE_MAX_POINTS * 4, options.samples ?? Math.ceil(32 + cycles * 16)));
+  const raw = [];
+  for (let i = 0; i <= n; i++) raw.push([i / n, taperWaveFactor(i / n, options.taper, options.wave)]);
+  const ts = [options.taper?.startLength, options.taper?.endLength !== void 0 ? 1 - options.taper.endLength : void 0];
+  for (const t of ts) if (typeof t === "number" && t > 0 && t < 1) raw.push([t, taperWaveFactor(t, options.taper, options.wave)]);
+  raw.sort((a, b) => a[0] - b[0]);
+  const kept = simplifySamples(raw, options.tolerance ?? 0.01, VECTOR_WIDTH_PROFILE_MAX_POINTS);
+  return kept.map(([t, k]) => sym(t, k));
+}
+function simplifySamples(samples, tolerance, max) {
+  if (samples.length <= 2) return samples.slice();
+  const keep = new Array(samples.length).fill(false);
+  keep[0] = keep[samples.length - 1] = true;
+  const stack = [[0, samples.length - 1]];
+  while (stack.length) {
+    const [a, b] = stack.pop();
+    const [ta, va] = samples[a];
+    const [tb, vb] = samples[b];
+    let worst = -1;
+    let err = tolerance;
+    for (let i = a + 1; i < b; i++) {
+      const [t, v2] = samples[i];
+      const lin = tb - ta > 1e-12 ? va + (vb - va) * (t - ta) / (tb - ta) : va;
+      const e = Math.abs(v2 - lin);
+      if (e > err) {
+        err = e;
+        worst = i;
+      }
+    }
+    if (worst >= 0) {
+      keep[worst] = true;
+      stack.push([a, worst], [worst, b]);
+    }
+  }
+  let out = samples.filter((_, i) => keep[i]);
+  while (out.length > max) out = out.filter((_, i) => i === 0 || i === out.length - 1 || i % 2 === 0);
+  return out;
+}
+var VECTOR_PRESSURE_NOMINAL = 0.5;
+function pressureWidthProfile(samples, options = {}) {
+  const raw = samples.filter((s) => Number.isFinite(s.t) && Number.isFinite(s.pressure)).map((s) => [Math.min(Math.max(s.t, 0), 1), Math.max(0.05, Math.min(1, Math.max(0, s.pressure)) / VECTOR_PRESSURE_NOMINAL)]);
+  if (raw.length < 2) return [];
+  if (raw.every((s) => Math.abs(s[1] - raw[0][1]) < 1e-6)) return [];
+  return simplifySamples(raw, options.tolerance ?? 0.02, VECTOR_WIDTH_PROFILE_MAX_POINTS).map(([t, k]) => sym(t, Math.round(k * 1e3) / 1e3));
+}
+
+// src/vector/varstroke.ts
+var SAMPLES_PER_SUBPATH = 128;
+var MAX_DASHES = 5e3;
+var sub2 = (a, b) => [a[0] - b[0], a[1] - b[1]];
+var along = (p, v2, k) => [p[0] + v2[0] * k, p[1] + v2[1] * k];
+var lerp = (a, b, u) => [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u];
+var dist = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]);
+var unitOf = (v2) => {
+  const l = Math.hypot(v2[0], v2[1]);
+  return l > 0 ? [v2[0] / l, v2[1] / l] : [1, 0];
+};
+var leftNormal = (d) => [d[1], -d[0]];
+function flatten(segments, closed, tol) {
+  const pts = [];
+  const corner = [];
+  const push = (p, isCorner) => {
+    const last = pts[pts.length - 1];
+    if (last && dist(last, p) <= 1e-9) {
+      corner[corner.length - 1] ||= isCorner;
+      return;
+    }
+    pts.push(p);
+    corner.push(isCorner);
+  };
+  for (const seg of segments) {
+    const flat = flattenChain([seg], tol);
+    if (dist(seg[0], seg[seg.length - 1]) <= 1e-12 && flat.length > 1) flat.push(seg[seg.length - 1]);
+    flat.forEach((p, i) => push(p, i === 0 || i === flat.length - 1));
+  }
+  if (closed && pts.length > 2 && dist(pts[0], pts[pts.length - 1]) > 1e-9) push(pts[0], true);
+  if (pts.length < 2) return null;
+  let total = 0;
+  for (let i = 1; i < pts.length; i++) total += dist(pts[i - 1], pts[i]);
+  if (!(total > 0)) return null;
+  const step = Math.max(total / SAMPLES_PER_SUBPATH, tol);
+  const fine = [pts[0]];
+  const fineCorner = [corner[0]];
+  for (let i = 1; i < pts.length; i++) {
+    const n = Math.max(1, Math.ceil(dist(pts[i - 1], pts[i]) / step));
+    for (let k = 1; k <= n; k++) {
+      fine.push(k === n ? pts[i] : lerp(pts[i - 1], pts[i], k / n));
+      fineCorner.push(k === n ? corner[i] : false);
+    }
+  }
+  const s = [0];
+  for (let i = 1; i < fine.length; i++) s.push(s[i - 1] + dist(fine[i - 1], fine[i]));
+  return { pts: fine, s, corner: fineCorner, closed };
+}
+function dashIntervals(pattern, offset, len2) {
+  let pat = pattern.map((v2) => Number.isFinite(v2) ? Math.max(0, v2) : 0);
+  if (pat.length % 2 === 1) pat = [...pat, ...pat];
+  const period = pat.reduce((a, b) => a + b, 0);
+  if (pat.length < 2 || !(period > 1e-9) || !(len2 > 0)) return [[0, len2]];
+  let pos = ((Number.isFinite(offset) ? offset : 0) % period + period) % period;
+  let idx = 0;
+  while (pos >= pat[idx]) {
+    pos -= pat[idx];
+    idx = (idx + 1) % pat.length;
+  }
+  const out = [];
+  let s = 0;
+  let guard = 0;
+  while (s < len2 && guard++ < MAX_DASHES * pat.length) {
+    const e = Math.min(s + pat[idx] - pos, len2);
+    if (idx % 2 === 0 && e >= s) out.push([s, e]);
+    s += pat[idx] - pos;
+    pos = 0;
+    idx = (idx + 1) % pat.length;
+  }
+  return out;
+}
+function at(poly, t) {
+  let i = 1;
+  while (i < poly.pts.length - 1 && poly.s[i] <= t) i++;
+  const a = poly.s[i - 1];
+  const b = poly.s[i];
+  const u = b > a ? Math.min(Math.max((t - a) / (b - a), 0), 1) : 0;
+  return [lerp(poly.pts[i - 1], poly.pts[i], u), i];
+}
+function arcPoints(c, a0, sweep, r0, r1, tol) {
+  const r = Math.max(r0, r1);
+  if (!(r > tol * 0.5) || !Number.isFinite(sweep)) return [];
+  const stepAngle = 2 * Math.acos(Math.min(Math.max(1 - tol / r, -1), 1));
+  const n = Math.min(128, Math.max(2, Math.ceil(Math.abs(sweep) / Math.max(stepAngle, 1e-3))));
+  const out = [];
+  for (let k = 1; k < n; k++) {
+    const f = k / n;
+    const a = a0 + sweep * f;
+    const rr = r0 + (r1 - r0) * f;
+    out.push([c[0] + Math.cos(a) * rr, c[1] + Math.sin(a) * rr]);
+  }
+  return out;
+}
+function crossing(a0, a1, b0, b1) {
+  const r = sub2(a1, a0);
+  const q = sub2(b1, b0);
+  const den = r[0] * q[1] - r[1] * q[0];
+  if (Math.abs(den) < 1e-12) return null;
+  const w = sub2(b0, a0);
+  const t = (w[0] * q[1] - w[1] * q[0]) / den;
+  const u = (w[0] * r[1] - w[1] * r[0]) / den;
+  return t > 1e-9 && t <= 1 && u >= 0 && u < 1 - 1e-9 ? [a0[0] + r[0] * t, a0[1] + r[1] * t] : null;
+}
+function variableStrokeRings(path, options) {
+  const half = options.width / 2;
+  if (!(half > 0) || !Number.isFinite(half)) return [];
+  const tol = options.tolerance && options.tolerance > 0 ? options.tolerance : 0.05;
+  const join = options.join ?? "miter";
+  const cap = options.cap ?? "butt";
+  const miterLimit = options.miterLimit && options.miterLimit >= 1 ? options.miterLimit : 4;
+  const rings = [];
+  const push = (out, p) => {
+    const last = out[out.length - 1];
+    if (!last || dist(last, p) > 1e-12) out.push(p);
+  };
+  for (const contour of pathToContours(path)) {
+    if (!contour.segments.length) continue;
+    const poly = flatten(contour.segments, contour.closed, Math.min(tol, half) / 4);
+    if (!poly) continue;
+    const len2 = poly.s[poly.s.length - 1];
+    const sides2 = (s) => {
+      const w = widthProfileAt(options.profile, s / len2);
+      return [w.left * half, w.right * half];
+    };
+    const intervals = options.dash?.some((v2) => v2 > 0) ? dashIntervals(options.dash, options.dashOffset ?? 0, len2) : [[0, len2]];
+    const whole = intervals.length === 1 && intervals[0][0] <= 0 && intervals[0][1] >= len2;
+    for (const [a, b] of intervals) {
+      const [pa, ia] = at(poly, a);
+      const [pb, ib] = at(poly, b);
+      const pts = [{ p: pa, s: a, corner: poly.corner[0] && a <= 0 }];
+      for (let i = ia; i < ib; i++) pts.push({ p: poly.pts[i], s: poly.s[i], corner: poly.corner[i] });
+      pts.push({ p: pb, s: b, corner: false });
+      const run = pts.filter((q, i) => i === 0 || dist(q.p, pts[i - 1].p) > 1e-9);
+      if (run.length < 2) {
+        const [l, r] = sides2(a);
+        const w2 = (l + r) / 2;
+        if (cap === "round" && w2 > 0) rings.push([[pa[0] + w2, pa[1]], ...arcPoints(pa, 0, 2 * Math.PI, w2, w2, tol)]);
+        continue;
+      }
+      const closed = whole && poly.closed;
+      const m = run.length - 1;
+      const dirs = [];
+      for (let i = 0; i < m; i++) dirs.push(unitOf(sub2(run[i + 1].p, run[i].p)));
+      const normals = dirs.map(leftNormal);
+      const w = run.map((q) => sides2(q.s));
+      const side = (sigma) => {
+        const k = sigma > 0 ? 0 : 1;
+        const S = (i) => along(run[i].p, normals[i], sigma * w[i][k]);
+        const E = (i) => along(run[i + 1].p, normals[i], sigma * w[i + 1][k]);
+        const out = [S(0)];
+        for (let i = 0; i < m; i++) {
+          const seam = i === m - 1;
+          if (seam && !closed) {
+            push(out, E(i));
+            break;
+          }
+          const j = seam ? 0 : i + 1;
+          const p = run[i + 1].p;
+          const d0 = dirs[i];
+          const d1 = dirs[j];
+          const cross2 = d0[0] * d1[1] - d0[1] * d1[0];
+          const dot2 = d0[0] * d1[0] + d0[1] * d1[1];
+          const r0 = w[i + 1][k];
+          const r1 = w[j][k];
+          const e = E(i);
+          const st = S(j);
+          if (Math.abs(cross2) < 1e-12 && dot2 > 0) {
+            push(out, e);
+            if (!seam) push(out, st);
+            continue;
+          }
+          const uturn = Math.abs(cross2) < 1e-12;
+          const outer = uturn ? sigma > 0 : cross2 * sigma > 0;
+          if (!outer) {
+            const x = seam ? null : crossing(out[out.length - 1], e, st, E(j));
+            if (x) push(out, x);
+            else {
+              push(out, e);
+              push(out, p);
+              if (!seam) push(out, st);
+            }
+            continue;
+          }
+          push(out, e);
+          const theta = uturn ? Math.PI : Math.atan2(cross2, dot2);
+          const r = (r0 + r1) / 2;
+          const kind = run[i + 1].corner || seam && poly.corner[0] ? join : "round";
+          if (r > 1e-9) {
+            if (kind === "round") {
+              if (r * (1 - Math.cos(Math.abs(theta) / 2)) > tol * 0.25) {
+                for (const q of arcPoints(p, Math.atan2(e[1] - p[1], e[0] - p[0]), theta, r0, r1, tol)) push(out, q);
+              }
+            } else if (kind === "miter") {
+              const halfCos = Math.cos(theta / 2);
+              const bis = [normals[i][0] + normals[j][0], normals[i][1] + normals[j][1]];
+              const bl = Math.hypot(bis[0], bis[1]);
+              if (halfCos > 1e-6 && 1 / halfCos <= miterLimit && bl > 1e-9) push(out, along(p, bis, sigma * r / halfCos / bl));
+            }
+          }
+          if (!seam) push(out, st);
+        }
+        if (closed && out.length > 1 && dist(out[0], out[out.length - 1]) <= 1e-12) out.pop();
+        return out;
+      };
+      const left = side(1);
+      const right = side(-1);
+      if (closed) {
+        rings.push(left, right.reverse());
+        continue;
+      }
+      const capPoints = (atStart) => {
+        if (cap === "butt") return [];
+        const i = atStart ? 0 : m;
+        const d = atStart ? dirs[0] : dirs[m - 1];
+        const [l, r] = w[i];
+        if (!(l + r > 1e-9)) return [];
+        const p = run[i].p;
+        const n = leftNormal(d);
+        const L = along(p, n, l);
+        const R = along(p, n, -r);
+        if (cap === "round") {
+          const a0 = Math.atan2(d[1], d[0]) + (atStart ? Math.PI / 2 : -Math.PI / 2);
+          return arcPoints(p, a0, Math.PI, atStart ? r : l, atStart ? l : r, tol);
+        }
+        const ext = (l + r) / 2;
+        const o = atStart ? [-d[0], -d[1]] : d;
+        return atStart ? [along(R, o, ext), along(L, o, ext)] : [along(L, o, ext), along(R, o, ext)];
+      };
+      const ring = [];
+      for (const q of [...left, ...capPoints(false), ...right.reverse(), ...capPoints(true)]) push(ring, q);
+      if (ring.length > 2) rings.push(ring);
+    }
+  }
+  return rings;
+}
+function variableStrokeOutline(path, options) {
+  const pieces = variableStrokeRings(path, options);
+  if (!pieces.length) return [];
+  const tol = options.tolerance && options.tolerance > 0 ? options.tolerance : 0.05;
+  let polygons;
+  try {
+    polygons = polygonBoolean("union", [{ rings: pieces, fillRule: "nonzero" }]);
+  } catch {
+    return [];
+  }
+  const out = [];
+  for (const polygon2 of polygons) {
+    for (const ring of polygon2) {
+      if (ring.length < 3) continue;
+      const cubics = fitCubics(ring, tol, { closed: true, cornerAngleDeg: 25 });
+      if (!cubics.length) continue;
+      out.push({ type: "M", x: cubics[0].p0[0], y: cubics[0].p0[1] });
+      cubics.forEach((c, i) => {
+        if (isStraightCubic(c, tol * 0.02)) {
+          if (i < cubics.length - 1) out.push({ type: "L", x: c.p3[0], y: c.p3[1] });
+        } else out.push({ type: "C", x1: c.p1[0], y1: c.p1[1], x2: c.p2[0], y2: c.p2[1], x: c.p3[0], y: c.p3[1] });
+      });
+      out.push({ type: "Z" });
+    }
+  }
+  return out;
+}
+function nearestStrokePosition(path, p, only) {
+  let best = null;
+  pathToContours(path).forEach((c, ci) => {
+    if (!c.segments.length || only !== void 0 && ci !== only) return;
+    const lengths = c.segments.map((s) => segmentLength(s));
+    const total = lengths.reduce((a, b) => a + b, 0);
+    if (!(total > 0)) return;
+    let acc = 0;
+    c.segments.forEach((seg, si) => {
+      const near2 = segmentNearest(seg, p);
+      if (!best || near2.distance < best.distance) {
+        const s = acc + segmentLength(seg, 0, near2.t);
+        const tan = segmentTangent(seg, near2.t);
+        const pt2 = seg.length === 2 ? lerp(seg[0], seg[1], near2.t) : evalSeg(seg, near2.t);
+        const n = leftNormal([tan[0], tan[1]]);
+        const side = (p[0] - pt2[0]) * n[0] + (p[1] - pt2[1]) * n[1] >= 0 ? "left" : "right";
+        best = { contour: ci, t: Math.min(Math.max(s / total, 0), 1), distance: near2.distance, side, point: pt2, tangent: [tan[0], tan[1]], length: total };
+      }
+      acc += lengths[si];
+    });
+  });
+  return best;
+}
+function evalSeg(seg, t) {
+  let pts = seg.map((q) => [q[0], q[1]]);
+  while (pts.length > 1) pts = pts.slice(1).map((q, i) => lerp(pts[i], q, t));
+  return pts[0];
+}
+function strokePositionPoint(path, index, t) {
+  const c = pathToContours(path)[index];
+  if (!c?.segments.length) return null;
+  const lengths = c.segments.map((s) => segmentLength(s));
+  const total = lengths.reduce((a, b) => a + b, 0);
+  let want = Math.min(Math.max(t, 0), 1) * total;
+  for (let i = 0; i < c.segments.length; i++) {
+    const seg = c.segments[i];
+    if (want <= lengths[i] + 1e-12 || i === c.segments.length - 1) {
+      let lo = 0;
+      let hi = 1;
+      const target = Math.min(want, lengths[i]);
+      for (let k = 0; k < 40; k++) {
+        const mid = (lo + hi) / 2;
+        if (segmentLength(seg, 0, mid) < target) lo = mid;
+        else hi = mid;
+      }
+      const u = (lo + hi) / 2;
+      const tan = segmentTangent(seg, u);
+      return { point: evalSeg(seg, u), tangent: [tan[0], tan[1]] };
+    }
+    want -= lengths[i];
+  }
+  return null;
+}
+
 // src/vector/stroke.ts
 var KAPPA = 0.5522847498307936;
 var NOTCH = 0.7;
@@ -256,8 +807,21 @@ function effectiveStrokeAlign(style, closedShape) {
   const a = style.strokeAlign ?? "center";
   return closedShape ? a : "center";
 }
+function strokeWidthProfileOf(style) {
+  if (!style.strokeWidthProfile?.length) return null;
+  const p = sanitizeWidthProfile(style.strokeWidthProfile);
+  return isUniformWidthProfile(p) ? null : p;
+}
 function hasStrokeExtras(style) {
-  return (style.strokeAlign ?? "center") !== "center" || !!style.startArrow || !!style.endArrow;
+  return (style.strokeAlign ?? "center") !== "center" || !!style.startArrow || !!style.endArrow || !!strokeWidthProfileOf(style);
+}
+function vectorStrokeLineArea(parts, style, tolerance) {
+  const profile = strokeWidthProfileOf(style);
+  const dash = style.strokeDasharray?.length ? { dash: style.strokeDasharray } : {};
+  const join = style.strokeLinejoin ?? "miter";
+  const cap = style.strokeLinecap ?? "butt";
+  if (profile) return variableStrokeOutline(parts.line, { width: parts.drawWidth, profile, join, cap, ...dash, ...tolerance ? { tolerance } : {} });
+  return outlineStroke(parts.line, { width: parts.drawWidth, join, cap, ...dash, ...tolerance ? { tolerance } : {} });
 }
 var capExtent = (style, width) => style.strokeLinecap === "round" || style.strokeLinecap === "square" ? width / 2 : 0;
 function arrowheadWeight(style, end) {
@@ -347,13 +911,13 @@ function endOf(segs, atStart) {
   const last = segs[segs.length - 1];
   return { p: toVec(last[last.length - 1]), out: v(t[0], t[1]) };
 }
-function pointAlong(segs, fromStart, dist3) {
+function pointAlong(segs, fromStart, dist4) {
   const order = fromStart ? segs : [...segs].reverse();
   let acc = 0;
   for (const s of order) {
     const l = segLen(s);
-    if (acc + l >= dist3) {
-      const want = fromStart ? dist3 - acc : l - (dist3 - acc);
+    if (acc + l >= dist4) {
+      const want = fromStart ? dist4 - acc : l - (dist4 - acc);
       const pts = trimSegments([s], 0, want);
       const p = pts.length ? pts[0][pts[0].length - 1] : s[0];
       return toVec(p);
@@ -410,12 +974,7 @@ function vectorStrokeParts(path, style) {
 }
 function vectorStrokeOutlinePath(path, style) {
   const parts = vectorStrokeParts(path, style);
-  const stroke = outlineStroke(parts.line, {
-    width: parts.drawWidth,
-    join: style.strokeLinejoin ?? "miter",
-    cap: style.strokeLinecap ?? "butt",
-    ...style.strokeDasharray?.length ? { dash: style.strokeDasharray } : {}
-  });
+  const stroke = vectorStrokeLineArea(parts, style);
   const fill = { path, fillRule: style.fillRule ?? "nonzero" };
   let area = stroke;
   if (parts.align === "inside") area = pathBoolean("intersection", [stroke, fill]).path;
@@ -431,15 +990,32 @@ function hitTestVectorStroke(path, p, style, tolerance = 0) {
     if (pointInBezierPath(h.path, point) || tolerance > 0 && distanceToBezierPath(h.path, point) <= tolerance) return true;
   }
   if (!parts.line.length) return false;
-  const d = distanceToBezierPath(parts.line, point);
-  if (parts.align === "center") return d <= width / 2 + tolerance;
-  if (d > width + tolerance) return false;
+  const profile = strokeWidthProfileOf(style);
+  let d;
+  let reach = width / 2;
+  if (profile) {
+    const near2 = nearestStrokePosition(parts.line, point);
+    if (!near2) return false;
+    d = near2.distance;
+    const w = widthProfileAt(profile, near2.t);
+    reach = width / 2 * (near2.side === "left" ? w.left : w.right);
+    if (parts.align !== "center") reach *= 2;
+    const atEnd = near2.t <= 1e-9 || near2.t >= 1 - 1e-9;
+    if (atEnd && (style.strokeLinecap === "round" || style.strokeLinecap === "square") && d > reach) {
+      reach = Math.max(reach, width / 2 * (w.left + w.right) / 2);
+    }
+  } else {
+    d = distanceToBezierPath(parts.line, point);
+    if (parts.align !== "center") reach = width;
+  }
+  if (parts.align === "center") return d <= reach + tolerance;
+  if (d > reach + tolerance) return false;
   if (d <= tolerance) return true;
   const inside = pointInBezierPath(path, point, style.fillRule ?? "nonzero");
   return parts.align === "inside" ? inside : !inside;
 }
 function vectorStrokeReach(style) {
-  const width = style.strokeWidth ?? 1;
+  const width = (style.strokeWidth ?? 1) * widthProfileMaxScale(strokeWidthProfileOf(style));
   const align = style.strokeAlign ?? "center";
   let reach = align === "center" ? width / 2 : align === "outside" ? width : 0;
   if (style.strokeLinejoin !== "round" && style.strokeLinejoin !== "bevel") reach *= 4;
@@ -749,8 +1325,10 @@ function bakeIntoGeometry(node, m) {
   if (isIdentityMatrix(m)) return node;
   if (node.type === "group") return { ...node, children: node.children.map((c) => transformVectorNode(c, m)) };
   const path = node;
+  const mirrored = m[0] * m[3] - m[1] * m[2] < 0 && path.strokeWidthProfile?.length;
   return {
     ...path,
+    ...mirrored ? { strokeWidthProfile: mirrorWidthProfile(path.strokeWidthProfile) } : {},
     subpaths: path.subpaths.map((sp) => ({
       closed: sp.closed,
       anchors: sp.anchors.map((a) => {
@@ -915,8 +1493,8 @@ function ellipseSubpath(b) {
     ]
   };
 }
-function polygonSubpath(b, sides = 6) {
-  const n = Math.max(3, Math.round(sides));
+function polygonSubpath(b, sides2 = 6) {
+  const n = Math.max(3, Math.round(sides2));
   const cx = b.x + b.width / 2;
   const cy = b.y + b.height / 2;
   const anchors = [];
@@ -980,11 +1558,20 @@ function vectorPaintToSvg(paint, gradientId) {
   if (typeof paint === "string") return { value: paint, gradient: null };
   return { value: `url(#${gradientId})`, gradient: gradientToSvgDef(paint, gradientId) };
 }
+var partsCache = /* @__PURE__ */ new WeakMap();
 function vectorStrokeSvgParts(node, clipId, precision = 3) {
   if (!hasPaint(node.stroke) || !hasStrokeExtras(node)) return void 0;
+  const hit = partsCache.get(node);
+  if (hit && hit.clipId === clipId && hit.precision === precision) return hit.parts;
+  const parts = computeStrokeSvgParts(node, clipId, precision);
+  partsCache.set(node, { clipId, precision, parts });
+  return parts;
+}
+function computeStrokeSvgParts(node, clipId, precision) {
   const path = subpathsToBezier(node.subpaths);
   const parts = vectorStrokeParts(path, node);
-  if (parts.align === "center" && !parts.heads.length) return void 0;
+  const profiled = !!strokeWidthProfileOf(node);
+  if (parts.align === "center" && !parts.heads.length && !profiled) return void 0;
   let clip = null;
   if (parts.align !== "center") {
     const b = bezierPathBounds(path);
@@ -992,7 +1579,26 @@ function vectorStrokeSvgParts(node, clipId, precision = 3) {
     const bounds = b ? { x: round2(b.minX - pad), y: round2(b.minY - pad), width: round2(b.maxX - b.minX + 2 * pad), height: round2(b.maxY - b.minY + 2 * pad) } : { x: 0, y: 0, width: 0, height: 0 };
     clip = { kind: parts.align === "inside" ? "clip" : "mask", id: clipId, bounds };
   }
-  return { align: parts.align, d: bezierPathToSvg(parts.line, { precision }), width: parts.drawWidth, clip, heads: parts.heads.map((h) => bezierPathToSvg(h.path, { precision })) };
+  return {
+    align: parts.align,
+    d: bezierPathToSvg(parts.line, { precision }),
+    width: parts.drawWidth,
+    ...profiled && (node.strokeWidth ?? 1) > 0 ? { outline: bezierPathToSvg(vectorStrokeLineArea(parts, node), { precision }) } : {},
+    clip,
+    heads: parts.heads.map((h) => bezierPathToSvg(h.path, { precision }))
+  };
+}
+function widthProfileToAttribute(points, precision = 4) {
+  return points.map((p) => [p.t, p.left, p.right].map((n) => formatNumber(n, precision)).join(",")).join(";");
+}
+function widthProfileFromAttribute(value) {
+  if (!value) return [];
+  return sanitizeWidthProfile(
+    value.split(";").map((part) => {
+      const [t, left, right] = part.split(",").map((n) => parseFloat(n));
+      return { t, left, right: Number.isFinite(right) ? right : left };
+    })
+  );
 }
 var round2 = (n) => Math.round(n * 100) / 100;
 function gradientMarkup(def) {
@@ -1051,6 +1657,13 @@ function vectorDocumentToSvg(doc, options = {}) {
     if (node.arrowAlign && node.arrowAlign !== "extend") data += ` data-vector-arrow-align="${node.arrowAlign}"`;
     if (node.startArrowScale !== void 0 && node.startArrowScale !== 1) data += ` data-vector-start-arrow-scale="${num(node.startArrowScale)}"`;
     if (node.endArrowScale !== void 0 && node.endArrowScale !== 1) data += ` data-vector-end-arrow-scale="${num(node.endArrowScale)}"`;
+    const profile = strokeWidthProfileOf(node);
+    if (profile) {
+      data += ` data-vector-width-profile="${widthProfileToAttribute(profile)}"`;
+      if (node.strokeLinecap && node.strokeLinecap !== "butt") data += ` data-vector-stroke-linecap="${node.strokeLinecap}"`;
+      if (node.strokeLinejoin && node.strokeLinejoin !== "miter") data += ` data-vector-stroke-linejoin="${node.strokeLinejoin}"`;
+      if (node.strokeDasharray?.length) data += ` data-vector-stroke-dasharray="${node.strokeDasharray.map(num).join(" ")}"`;
+    }
     lines.push(`${indent(depth)}<g${common(node)}${data}>`);
     lines.push(`${indent(depth + 1)}<path data-vector-part="fill" d="${d}"${fillAttrs}${live}/>`);
     if (options.strokes === "outline") {
@@ -1071,7 +1684,8 @@ function vectorDocumentToSvg(doc, options = {}) {
           clip = ` mask="url(#${id})"`;
         }
       }
-      lines.push(`${indent(depth + 1)}<path data-vector-part="stroke" d="${parts.d}" fill="none"${lineAttrs(parts.width)}${clip}/>`);
+      if (parts.outline !== void 0) lines.push(`${indent(depth + 1)}<path data-vector-part="stroke-outline" d="${parts.outline}" fill="${escapeAttr(stroke.value)}"${clip}/>`);
+      else lines.push(`${indent(depth + 1)}<path data-vector-part="stroke" d="${parts.d}" fill="none"${lineAttrs(parts.width)}${clip}/>`);
       for (const h2 of parts.heads) lines.push(`${indent(depth + 1)}<path data-vector-part="head" d="${h2}" fill="${escapeAttr(stroke.value)}"/>`);
     }
     lines.push(`${indent(depth)}</g>`);
@@ -1334,6 +1948,11 @@ function parseVectorSvg(svg, options = {}) {
       return n > 0 ? n : void 0;
     };
     const align = a["data-vector-stroke-align"];
+    const profile = widthProfileFromAttribute(a["data-vector-width-profile"]);
+    const kept = (key, values) => values.includes(a[key]) ? a[key] : void 0;
+    const keptCap = kept("data-vector-stroke-linecap", ["round", "square"]);
+    const keptJoin = kept("data-vector-stroke-linejoin", ["round", "bevel"]);
+    const keptDash = a["data-vector-stroke-dasharray"] ? numberList(a["data-vector-stroke-dasharray"]) : void 0;
     const node = {
       id: idFor(g),
       type: "path",
@@ -1349,7 +1968,11 @@ function parseVectorSvg(svg, options = {}) {
       ...arrow(a["data-vector-end-arrow"]) ? { endArrow: arrow(a["data-vector-end-arrow"]) } : {},
       ...a["data-vector-arrow-align"] === "tip" ? { arrowAlign: "tip" } : {},
       ...scale(a["data-vector-start-arrow-scale"]) ? { startArrowScale: scale(a["data-vector-start-arrow-scale"]) } : {},
-      ...scale(a["data-vector-end-arrow-scale"]) ? { endArrowScale: scale(a["data-vector-end-arrow-scale"]) } : {}
+      ...scale(a["data-vector-end-arrow-scale"]) ? { endArrowScale: scale(a["data-vector-end-arrow-scale"]) } : {},
+      ...profile.length ? { strokeWidthProfile: profile } : {},
+      ...keptCap ? { strokeLinecap: keptCap } : {},
+      ...keptJoin ? { strokeLinejoin: keptJoin } : {},
+      ...keptDash?.length ? { strokeDasharray: keptDash } : {}
     };
     return placed(node, m);
   };
@@ -1669,7 +2292,7 @@ var VectorSnapTargets = class _VectorSnapTargets {
    */
   snapFrom(p, leave, tol) {
     const none = (q) => ({ point: q, kind: null, x: false, y: false, lines: [], labels: [] });
-    const at = (q, kind, lines2 = []) => ({
+    const at2 = (q, kind, lines2 = []) => ({
       point: q,
       kind,
       x: true,
@@ -1683,16 +2306,16 @@ var VectorSnapTargets = class _VectorSnapTargets {
       return hit ? { point: hit.point, x: true, y: true, ...this.linedUp(hit.point, hit.from) } : none(q);
     }
     const point = this.nearestPoint(p, tol);
-    if (point) return at(point.p, point.kind);
+    if (point) return at2(point.p, point.kind);
     const near2 = this.segmentsNear(p, tol);
-    const crossing = this.crossing(near2, p, tol);
-    if (crossing) return at(crossing, "intersect");
+    const crossing2 = this.crossing(near2, p, tol);
+    if (crossing2) return at2(crossing2, "intersect");
     if (leave && leave.curves !== false) {
       const foot = this.curvePoint(near2, leave.at, p, tol);
-      if (foot) return at(foot.point, foot.kind, [line("construction", leave.at, foot.point)]);
+      if (foot) return at2(foot.point, foot.kind, [line("construction", leave.at, foot.point)]);
     }
     const on = this.onSegment(near2);
-    if (on) return at(on, "path");
+    if (on) return at2(on, "path");
     if (leave?.angles?.length) {
       const c = construction(leave, p, tol);
       if (c) {
@@ -1739,7 +2362,7 @@ var VectorSnapTargets = class _VectorSnapTargets {
    * the nearest target line crosses it, at most twice `tol` away: where it lands and the
    * target point that line comes from.
    */
-  slide(at, dir, q, tol, ray) {
+  slide(at2, dir, q, tol, ray) {
     const len2 = dir.x * dir.x + dir.y * dir.y;
     if (!Number.isFinite(len2) || len2 <= 1e-18) return null;
     const reach = 2 * tol;
@@ -1747,10 +2370,10 @@ var VectorSnapTargets = class _VectorSnapTargets {
     for (const vertical of [true, false]) {
       const d = vertical ? dir.x : dir.y;
       if (Math.abs(d) <= 1e-9) continue;
-      const a = vertical ? at.x : at.y;
+      const a = vertical ? at2.x : at2.y;
       for (const l of linesNear(vertical ? this.xs : this.ys, vertical ? q.x : q.y, reach)) {
         const s = (l.v - a) / d;
-        const hit = vertical ? { x: l.v, y: at.y + dir.y * s } : { x: at.x + dir.x * s, y: l.v };
+        const hit = vertical ? { x: l.v, y: at2.y + dir.y * s } : { x: at2.x + dir.x * s, y: l.v };
         const moved = distance(hit, q);
         if (moved <= reach && (!ray || s > 0) && (!best || moved < best.moved)) best = { moved, point: hit, from: l.from };
       }
@@ -1898,11 +2521,11 @@ var VectorSnapTargets = class _VectorSnapTargets {
     for (const s of starts) if (Math.abs(s.start - r0) <= tol && (!pick || Math.abs(s.start - r0) < Math.abs(pick.start - r0))) pick = s;
     if (!pick) return null;
     const { start, repeats } = pick;
-    const at = horizontal ? { ...r, x: start } : { ...r, y: start };
+    const at2 = horizontal ? { ...r, x: start } : { ...r, y: start };
     const end = start + len2;
     const gaps = [];
-    if (before && (repeats === null || Math.abs(start - before.a1 - repeats) <= EQUAL)) gaps.push([before.a1, start, mid(before.b, at)]);
-    if (after && (repeats === null || Math.abs(after.a0 - end - repeats) <= EQUAL)) gaps.push([end, after.a0, mid(after.b, at)]);
+    if (before && (repeats === null || Math.abs(start - before.a1 - repeats) <= EQUAL)) gaps.push([before.a1, start, mid(before.b, at2)]);
+    if (after && (repeats === null || Math.abs(after.a0 - end - repeats) <= EQUAL)) gaps.push([end, after.a0, mid(after.b, at2)]);
     if (repeats !== null) {
       for (const p of pairs) if (Math.abs(p.g - repeats) <= EQUAL) gaps.push(p.gap);
     }
@@ -2331,9 +2954,9 @@ function curvatureMoveAnchor(sp, index, q) {
   anchors[index] = moved;
   return { anchors, closed: sp.closed };
 }
-function cutSubpathAt(sp, at) {
+function cutSubpathAt(sp, at2) {
   const n = sp.anchors.length;
-  const cuts = [...new Set(at)].filter((i) => Number.isInteger(i) && i >= 0 && i < n && (sp.closed || i > 0 && i < n - 1)).sort((a, b) => a - b);
+  const cuts = [...new Set(at2)].filter((i) => Number.isInteger(i) && i >= 0 && i < n && (sp.closed || i > 0 && i < n - 1)).sort((a, b) => a - b);
   if (!cuts.length || n < 2) return [{ anchors: sp.anchors.map(cloneAnchor), closed: sp.closed }];
   const first = cuts[0];
   const run = sp.closed ? Array.from({ length: n + 1 }, (_, i) => sp.anchors[(first + i) % n]) : sp.anchors;
@@ -2364,7 +2987,7 @@ function splitSubpathAt(sp, segment, t, endTolerance = 1e-6) {
   return cutSubpathAt(subpath, [index]);
 }
 var endOf2 = (sp, last) => sp.anchors[last ? sp.anchors.length - 1 : 0];
-var dist = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+var dist2 = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
 function reverse(sp) {
   return {
     closed: sp.closed,
@@ -2391,7 +3014,7 @@ function joinSubpaths(subpaths, tolerance) {
     const sp = open[0];
     const first = sp.anchors[0];
     const last = sp.anchors[sp.anchors.length - 1];
-    if (sp.anchors.length > 2 && dist(first, last) <= tolerance) {
+    if (sp.anchors.length > 2 && dist2(first, last) <= tolerance) {
       sp.anchors.pop();
       sp.anchors[0] = tidy({ ...first, in: last.in ?? null }, false);
     } else {
@@ -2407,7 +3030,7 @@ function joinSubpaths(subpaths, tolerance) {
       for (let j = i + 1; j < open.length; j++) {
         for (const ei of [false, true]) {
           for (const ej of [false, true]) {
-            const d = dist(endOf2(open[i], ei), endOf2(open[j], ej));
+            const d = dist2(endOf2(open[i], ei), endOf2(open[j], ej));
             if (d < best.d) best = { d, i, j, ei, ej };
           }
         }
@@ -2447,8 +3070,8 @@ function smoothSubpath(sp, amount = 1, only) {
     const p = orig[i];
     const dir = unit2(next.x - prev.x, next.y - prev.y);
     if (!dir) continue;
-    const li = dist(p, prev) / 3;
-    const lo = dist(p, next) / 3;
+    const li = dist2(p, prev) / 3;
+    const lo = dist2(p, next) / 3;
     const hin = p.in ?? p;
     const hout = p.out ?? p;
     const target = (h, x, y) => ({ x: h.x + (x - h.x) * t, y: h.y + (y - h.y) * t });
@@ -2475,12 +3098,12 @@ function segsOf(sp) {
 function segsToSubpath(segs, closed, types) {
   if (!segs.length) return null;
   const anchors = [];
-  const at = (p) => ({ x: p[0], y: p[1] });
-  anchors.push(at(segs[0].c[0]));
+  const at2 = (p) => ({ x: p[0], y: p[1] });
+  anchors.push(at2(segs[0].c[0]));
   for (const s of segs) {
     const end = s.c[s.c.length - 1];
     if (!s.line) anchors[anchors.length - 1].out = { x: s.c[1][0], y: s.c[1][1] };
-    const next = at(end);
+    const next = at2(end);
     if (!s.line) next.in = { x: s.c[2][0], y: s.c[2][1] };
     anchors.push(next);
   }
@@ -2506,8 +3129,8 @@ function mergePair(a, b, tol) {
     if (len2 < 1e-12) return null;
     const mx = a3[0] - a0[0];
     const my = a3[1] - a0[1];
-    const along = (mx * cx + my * cy) / len2;
-    return Math.abs((mx * cy - my * cx) / len2) <= tol && along >= 0 && along <= len2 ? { c: [a0, b3], line: true } : null;
+    const along2 = (mx * cx + my * cy) / len2;
+    return Math.abs((mx * cy - my * cx) / len2) <= tol && along2 >= 0 && along2 <= len2 ? { c: [a0, b3], line: true } : null;
   }
   const ca = a.line ? [a0, a0, a3, a3] : a.c;
   const cb = b.line ? [a3, a3, b3, b3] : b.c;
@@ -2553,13 +3176,13 @@ function loopSample(l) {
 }
 var contains2 = (l, p) => windingNumber([l.segs], p) !== 0;
 function groupFaces(loops) {
-  const usable = loops.filter((l) => l.segs.length && Math.abs(loopArea(l)) > 1e-12);
-  if (!usable.length) return [];
-  const largest = usable.reduce((a, b) => Math.abs(loopArea(b)) > Math.abs(loopArea(a)) ? b : a);
+  const usable2 = loops.filter((l) => l.segs.length && Math.abs(loopArea(l)) > 1e-12);
+  if (!usable2.length) return [];
+  const largest = usable2.reduce((a, b) => Math.abs(loopArea(b)) > Math.abs(loopArea(a)) ? b : a);
   const sign = Math.sign(loopArea(largest));
-  const outers = usable.filter((l) => Math.sign(loopArea(l)) === sign).sort((a, b) => Math.abs(loopArea(a)) - Math.abs(loopArea(b)));
+  const outers = usable2.filter((l) => Math.sign(loopArea(l)) === sign).sort((a, b) => Math.abs(loopArea(a)) - Math.abs(loopArea(b)));
   const faces = new Map(outers.map((o) => [o, { loops: [o] }]));
-  for (const hole of usable.filter((l) => Math.sign(loopArea(l)) !== sign)) {
+  for (const hole of usable2.filter((l) => Math.sign(loopArea(l)) !== sign)) {
     const p = loopSample(hole);
     const parent = outers.find((o) => Math.abs(loopArea(o)) > Math.abs(loopArea(hole)) && contains2(o, p));
     if (parent) faces.get(parent).loops.push(hole);
@@ -2939,7 +3562,7 @@ function vectorInkShapeName(shape) {
       return shape.points.length === 3 ? "triangle" : "polygon";
   }
 }
-var dist2 = (a, b) => Math.hypot(b[0] - a[0], b[1] - a[1]);
+var dist3 = (a, b) => Math.hypot(b[0] - a[0], b[1] - a[1]);
 function bbox(pts) {
   if (!pts.length) return [0, 0, 0, 0];
   let [x0, y0] = pts[0];
@@ -2957,7 +3580,7 @@ function segDistance(a, b, p) {
   const dy = b[1] - a[1];
   const len2 = dx * dx + dy * dy;
   const t = len2 > 0 ? Math.min(1, Math.max(0, ((p[0] - a[0]) * dx + (p[1] - a[1]) * dy) / len2)) : 0;
-  return dist2([a[0] + t * dx, a[1] + t * dy], p);
+  return dist3([a[0] + t * dx, a[1] + t * dy], p);
 }
 function polygonDistance(c, p) {
   let best = Infinity;
@@ -3019,7 +3642,7 @@ function corners(p, diag) {
   let far = 0;
   let farD = 0;
   p.forEach((q, i) => {
-    const d = dist2(start, q);
+    const d = dist3(start, q);
     if (d > farD) {
       farD = d;
       far = i;
@@ -3046,7 +3669,7 @@ function corners(p, diag) {
     }
     let short = -1;
     for (let j = 0; j < n; j++) {
-      if (dist2(ring[j], ring[(j + 1) % n]) < 0.1 * diag) {
+      if (dist3(ring[j], ring[(j + 1) % n]) < 0.1 * diag) {
         short = j;
         break;
       }
@@ -3086,8 +3709,8 @@ function recognizeInkShape(points, options = {}) {
   const diag = Math.hypot(w, h);
   if (size < minSize) return null;
   let length2 = 0;
-  for (let i = 1; i < p.length; i++) length2 += dist2(p[i - 1], p[i]);
-  const gap = dist2(first, last);
+  for (let i = 1; i < p.length; i++) length2 += dist3(p[i - 1], p[i]);
+  const gap = dist3(first, last);
   if (gap > 0.85 * length2 && gap >= minSize) {
     const off = Math.max(...p.map((q) => segDistance(first, last, q)));
     if (off <= Math.max(0.06 * gap, 1.5 * minSize / 6)) return { kind: "line", a: first, b: last };
@@ -3111,9 +3734,188 @@ function recognizeInkShape(points, options = {}) {
   return roundish && rms < 0.1 ? ellipse() : null;
 }
 
+// src/vector/builder.ts
+function vectorPathEntries(doc, roots, options = {}) {
+  const out = [];
+  const visit = (node, parent, inside) => {
+    if (node.visible === false || node.locked && !options.locked) return;
+    const picked = inside || roots === null || roots.includes(node.id);
+    if (node.type === "group") {
+      const m = multiplyMatrices(nodeMatrix(node), parent);
+      for (const c of node.children) visit(c, m, picked);
+    } else if (picked) out.push({ node, parent });
+  };
+  for (const n of doc.nodes) visit(n, IDENTITY_MATRIX, false);
+  return out;
+}
+var usable = (sp) => sp.anchors.length > 1;
+function worldOf(entry, subpaths) {
+  return vectorPathWorldBezier({ ...entry.node, subpaths }, entry.parent);
+}
+function subpathEnclosesArea(sp) {
+  const contour = pathToContours(subpathsToBezier([{ ...sp, closed: true }]))[0];
+  if (!contour) return false;
+  const segs = closeContour(contour, true);
+  const b = bezierPathBounds(contoursToPath([{ segments: segs, closed: true }]));
+  if (!b) return false;
+  const w = b.maxX - b.minX;
+  const h = b.maxY - b.minY;
+  return Math.abs(contourSignedArea(segs)) > 1e-9 * (w * w + h * h);
+}
+var paintKey = (paint) => typeof paint === "string" ? paint.trim().toLowerCase() : JSON.stringify(paint ?? null);
+function vectorPathfinderShape(entry, op) {
+  const { node } = entry;
+  const subpaths = node.subpaths.filter(usable);
+  const closed = subpaths.map((s) => ({ ...s, closed: true }));
+  const fillRule = node.fillRule ?? "nonzero";
+  if (hasPaint(node.fill)) return { path: worldOf(entry, closed), fillRule, key: `fill:${paintKey(node.fill)}`, paint: "fill" };
+  const open = subpaths.length > 0 && subpaths.every((s) => !s.closed);
+  if (op === "divide" && open) return { path: worldOf(entry, subpaths), line: true, paint: "line" };
+  if (hasPaint(node.stroke) && (node.strokeWidth ?? 1) > 0) {
+    const path = vectorStrokeOutline({ ...node, subpaths }, entry.parent);
+    return { path, fillRule: "nonzero", key: `fill:${paintKey(node.stroke)}`, paint: "stroke" };
+  }
+  return { path: worldOf(entry, closed), fillRule, key: "none", paint: "outline" };
+}
+var STROKE_KEYS = [
+  "stroke",
+  "strokeWidth",
+  "strokeLinecap",
+  "strokeLinejoin",
+  "strokeDasharray",
+  "strokeAlign",
+  "startArrow",
+  "endArrow",
+  "arrowAlign",
+  "startArrowScale",
+  "endArrowScale",
+  "strokeWidthProfile"
+];
+function vectorResultStyle(node, paint, edge = false) {
+  const { id: _id, subpaths: _s, transform: _t, ...rest } = node;
+  const base = { ...rest, fillRule: "nonzero" };
+  if (edge) {
+    for (const k of STROKE_KEYS) delete base[k];
+    const stroke = paint === "stroke" || !hasPaint(node.fill) ? node.stroke : node.fill;
+    return { ...base, fill: null, stroke: stroke ?? "#000000", strokeWidth: node.strokeWidth ?? 1 };
+  }
+  if (paint === "stroke") {
+    for (const k of STROKE_KEYS) delete base[k];
+    return { ...base, fill: node.stroke ?? null, stroke: null };
+  }
+  return base;
+}
+function vectorShapeBuilderMap(entries) {
+  const lines = [];
+  const inputs = entries.map((entry) => {
+    const filled = hasPaint(entry.node.fill);
+    const subpaths = entry.node.subpaths.filter(usable).map((sp) => !sp.closed && filled && subpathEnclosesArea(sp) ? { ...sp, closed: true } : sp);
+    lines.push(!subpaths.some((s) => s.closed));
+    return { path: worldOf(entry, subpaths), fillRule: entry.node.fillRule ?? "nonzero" };
+  });
+  const map = PlanarMap.build(inputs);
+  if (!map) return null;
+  const pieces = map.chains().filter((c) => lines[c.source] && !c.closed).map((c) => {
+    const path = contoursToPath([{ segments: c.segments, closed: false }]);
+    return { path, segments: c.segments, source: c.source, bounds: bezierPathBounds(path) };
+  });
+  return { entries: [...entries], map, lines, pieces };
+}
+function vectorShapeBuilderHit(m, p, lineTolerance = null) {
+  const point = [p.x, p.y];
+  if (lineTolerance !== null && lineTolerance > 0) {
+    let best = -1;
+    let bestD = lineTolerance;
+    m.pieces.forEach((piece, i) => {
+      const b = piece.bounds;
+      if (p.x < b.minX - bestD || p.x > b.maxX + bestD || p.y < b.minY - bestD || p.y > b.maxY + bestD) return;
+      const d = distanceToBezierPath(piece.path, point);
+      if (d <= bestD) {
+        best = i;
+        bestD = d;
+      }
+    });
+    if (best >= 0) return { line: best };
+  }
+  const face = m.map.faceAt(point);
+  return face >= 0 ? { face } : null;
+}
+function samplePolyline(points, step) {
+  const out = [];
+  const s = Math.max(step, 1e-3);
+  points.forEach((p, i) => {
+    if (i > 0) {
+      const a = points[i - 1];
+      const n = Math.min(4e3, Math.ceil(Math.hypot(p.x - a.x, p.y - a.y) / s));
+      for (let k = 1; k < n; k++) out.push({ x: a.x + (p.x - a.x) * k / n, y: a.y + (p.y - a.y) * k / n });
+    }
+    out.push(p);
+  });
+  return out;
+}
+function addBuilderHit(touched, hit) {
+  if (!hit) return false;
+  const [list, i] = "face" in hit ? [touched.faces, hit.face] : [touched.lines, hit.line];
+  if (list.includes(i)) return false;
+  list.push(i);
+  return true;
+}
+function sides(m, piece) {
+  const seg = piece.segments[Math.floor(piece.segments.length / 2)];
+  const mid = segmentPoint(seg, 0.5);
+  const t = segmentTangent(seg, 0.5);
+  const chord = Math.hypot(seg[seg.length - 1][0] - seg[0][0], seg[seg.length - 1][1] - seg[0][1]);
+  const off = Math.max(1e-6, Math.min(0.05, 0.05 * chord));
+  return [m.map.faceAt([mid[0] - t[1] * off, mid[1] + t[0] * off]), m.map.faceAt([mid[0] + t[1] * off, mid[1] - t[0] * off])];
+}
+function planShapeBuilder(m, touched, erase) {
+  const replace = /* @__PURE__ */ new Map();
+  const picked = new Set(touched.faces);
+  const faces = m.map.faces;
+  const sourcesOf = faces.map((_, i) => m.map.faceSources(i));
+  m.entries.forEach((_, i) => {
+    if (m.lines[i]) {
+      const own = m.pieces.flatMap((piece, k) => piece.source === i ? [k] : []);
+      const keep = own.filter((k) => !touched.lines.includes(k) && !sides(m, m.pieces[k]).every((f) => f >= 0 && picked.has(f)));
+      if (keep.length === own.length) return;
+      replace.set(i, keep.length ? { kind: "pieces", paths: keep.map((k) => m.pieces[k].path) } : null);
+      return;
+    }
+    if (!touched.faces.some((f) => sourcesOf[f].includes(i))) return;
+    const kept = faces.flatMap((_2, f) => sourcesOf[f].includes(i) && !picked.has(f) ? [f] : []);
+    const rest = kept.length ? m.map.merge(kept) : [];
+    replace.set(i, rest.length ? { kind: "fill", path: rest } : null);
+  });
+  let merged = null;
+  if (!erase && touched.faces.length) {
+    const path = m.map.merge(touched.faces);
+    const covered = touched.faces.map((f) => sourcesOf[f]).find((s) => s.length);
+    const lastShape = m.lines.lastIndexOf(false);
+    const style = covered ? covered[covered.length - 1] : lastShape >= 0 ? lastShape : m.entries.length - 1;
+    if (path.length) merged = { path, style, currentFill: !covered };
+  }
+  return { replace, merged };
+}
+function vectorFillMap(doc, gap = 0) {
+  const entries = vectorPathEntries(doc, null, { locked: true });
+  return PlanarMap.build(
+    entries.map((e) => ({ path: worldOf(e, e.node.subpaths.filter(usable)), fills: false })),
+    { gap, maxSegments: 2e4 }
+  );
+}
+
 // src/vector/controller.ts
 var DEFAULT_VECTOR_SNAP = { grid: 0, objects: true, guides: true, threshold: 5, angles: VECTOR_CONSTRUCTION_ANGLES };
-var DEFAULT_VECTOR_PATH_EDIT = { keepShapeOnDelete: true, curvatureMoves: false, pencilSmoothing: 0, recognizeShapes: false, eraserSize: 10 };
+var VECTOR_FILL_GAP = 6;
+var DEFAULT_VECTOR_PATH_EDIT = {
+  keepShapeOnDelete: true,
+  curvatureMoves: false,
+  pencilSmoothing: 0,
+  recognizeShapes: false,
+  eraserSize: 10,
+  pencilPressure: "pen",
+  fillGap: 0
+};
 var VECTOR_PENCIL_STRING_PX = 100;
 var VECTOR_STYLE_KEYS = [
   "fill",
@@ -3128,7 +3930,8 @@ var VECTOR_STYLE_KEYS = [
   "endArrow",
   "arrowAlign",
   "startArrowScale",
-  "endArrowScale"
+  "endArrowScale",
+  "strokeWidthProfile"
 ];
 var VECTOR_CLIPBOARD_TYPE = "pixerate/vector";
 var DEFAULT_DEFAULTS = {
@@ -3190,9 +3993,9 @@ function getVisibleHandles(state) {
     return out;
   }
   if (state.tool !== "direct") return out;
-  const editable = new Set(getEditablePathIds(state));
+  const editable2 = new Set(getEditablePathIds(state));
   for (const ref of state.selectedAnchors) {
-    if (!editable.has(ref.nodeId)) continue;
+    if (!editable2.has(ref.nodeId)) continue;
     const node = findVectorNode(state.document.nodes, ref.nodeId);
     const sp = node.subpaths[ref.subpath];
     if (!sp) continue;
@@ -3229,6 +4032,56 @@ function getVectorCornerWidgets(state) {
   }
   return out;
 }
+function vectorStrokeWidthGeometry(node) {
+  if (!hasPaint(node.stroke) || !((node.strokeWidth ?? 1) > 0)) return null;
+  const parts = vectorStrokeParts(subpathsToBezier(node.subpaths), node);
+  return parts.line.length ? { line: parts.line, unit: parts.drawWidth / 2 } : null;
+}
+function getVectorWidthHandles(state) {
+  if (state.tool !== "width") return [];
+  const ids = /* @__PURE__ */ new Set();
+  for (const id of state.selection) {
+    const n = findVectorNode(state.document.nodes, id);
+    if (n) for (const p of collectPathNodes(n)) ids.add(p.id);
+  }
+  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);
+  const out = [];
+  for (const id of ids) {
+    const node = findVectorNode(state.document.nodes, id);
+    if (node?.type !== "path" || node.visible === false || !node.strokeWidthProfile?.length) continue;
+    const g = vectorStrokeWidthGeometry(node);
+    if (!g) continue;
+    const profile = sanitizeWidthProfile(node.strokeWidthProfile);
+    const m = vectorWorldMatrix(state.document.nodes, id) ?? IDENTITY_MATRIX;
+    const contours = node.subpaths.length;
+    for (let sp = 0; sp < contours; sp++) {
+      profile.forEach((w, index) => {
+        const at2 = strokePositionPoint(g.line, sp, w.t);
+        if (!at2) return;
+        const n = { x: at2.tangent[1], y: -at2.tangent[0] };
+        const c = { x: at2.point[0], y: at2.point[1] };
+        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,
+          y: p.y,
+          left: l,
+          right: r,
+          t: w.t,
+          leftScale: w.left,
+          rightScale: w.right,
+          selected: !!sel && sel.nodeId === id && sel.index === index
+        });
+      });
+    }
+  }
+  return out;
+}
 function getAnchor(doc, ref) {
   const node = findVectorNode(doc.nodes, ref.nodeId);
   return node?.type === "path" ? node.subpaths[ref.subpath]?.anchors[ref.index] : void 0;
@@ -3299,9 +4152,28 @@ var TOOL_LABELS = {
   line: "Line",
   scissors: "Scissors",
   knife: "Knife",
-  eraser: "Eraser"
+  eraser: "Eraser",
+  width: "Width",
+  shapeBuilder: "Shape Builder",
+  paintBucket: "Paint Bucket"
+};
+var TOOL_KEYS = {
+  v: "select",
+  a: "direct",
+  p: "pen",
+  n: "pencil",
+  r: "rect",
+  o: "ellipse",
+  y: "polygon",
+  s: "star",
+  l: "line",
+  c: "scissors",
+  k: "knife",
+  e: "eraser",
+  w: "width",
+  m: "shapeBuilder",
+  b: "paintBucket"
 };
-var TOOL_KEYS = { v: "select", a: "direct", p: "pen", n: "pencil", r: "rect", o: "ellipse", y: "polygon", s: "star", l: "line", c: "scissors", k: "knife", e: "eraser" };
 function vectorToolLabel(tool) {
   return TOOL_LABELS[tool];
 }
@@ -3317,7 +4189,10 @@ var VECTOR_TOOL_SHORTCUTS = {
   line: "L",
   scissors: "C",
   knife: "K",
-  eraser: "E"
+  eraser: "E",
+  width: "W",
+  shapeBuilder: "M",
+  paintBucket: "B"
 };
 var VECTOR_TOOL_GLYPHS = {
   select: "\u2196",
@@ -3331,7 +4206,10 @@ var VECTOR_TOOL_GLYPHS = {
   line: "\u2571",
   scissors: "\u2702",
   knife: "\u27CB",
-  eraser: "\u232B"
+  eraser: "\u232B",
+  width: "\u21F9",
+  shapeBuilder: "\u2295",
+  paintBucket: "\u25CD"
 };
 var SHAPE_TOOLS = /* @__PURE__ */ new Set(["rect", "ellipse", "polygon", "star", "line"]);
 var BOOLEAN_OPS = {
@@ -3341,6 +4219,14 @@ var BOOLEAN_OPS = {
   exclude: "xor"
 };
 var BOOLEAN_LABELS = { union: "Union", subtract: "Subtract", intersect: "Intersect", exclude: "Exclude" };
+var VECTOR_PATHFINDER_LABELS = {
+  divide: "Divide",
+  trim: "Trim",
+  merge: "Merge",
+  crop: "Crop",
+  outline: "Outline",
+  minusBack: "Minus Back"
+};
 function mapTree(nodes, fn) {
   let changed = false;
   const out = [];
@@ -3385,6 +4271,7 @@ var VectorEditorController = class {
   doc;
   selection = [];
   anchors = [];
+  widthPoint = null;
   editingId = null;
   pen = null;
   tool;
@@ -3404,6 +4291,13 @@ var VectorEditorController = class {
   hoverTargets = null;
   spaceHeld = false;
   clipboard = null;
+  /** Shape Builder map of the selection, kept while the document and the selection stay the same. */
+  builderCache = null;
+  /** Paint bucket map of the visible outlines. */
+  fillCache = null;
+  builderPreview = null;
+  /** What the highlight shows, to skip notifying when the pointer stays over the same face. */
+  builderHoverKey = null;
   createId;
   onChange;
   listeners = /* @__PURE__ */ new Set();
@@ -3463,6 +4357,7 @@ var VectorEditorController = class {
       tool: this.tool,
       selection: this.selection,
       selectedAnchors: this.anchors,
+      selectedWidthPoint: this.widthPoint,
       editingId: this.editingId,
       selectionBounds: this.boundsOf(this.selection),
       selectionFrame: this.frameOf(this.selectedRoots()),
@@ -3477,6 +4372,7 @@ var VectorEditorController = class {
       interaction: this.interaction,
       pen: this.pen,
       pointer: this.pointer,
+      builder: this.builderPreview,
       canUndo: h.canUndo,
       canRedo: h.canRedo,
       undoLabel: h.undoName,
@@ -3531,6 +4427,15 @@ var VectorEditorController = class {
         return h?.nodeId ? "move" : "default";
       case "pen":
         return h?.anchor ? "pointer" : "crosshair";
+      case "width":
+        if (this.drag?.kind === "width") return this.drag.mode === "move" ? "grabbing" : "ew-resize";
+        if (h?.widthPoint) return h.widthPoint.part === "center" ? "grab" : "ew-resize";
+        return h?.strokeSpot ? "copy" : "default";
+      case "shapeBuilder":
+        if (!this.builderPreview?.faces.length && !this.builderPreview?.lines.length) return "crosshair";
+        return this.builderPreview.mode === "erase" ? "not-allowed" : "cell";
+      case "paintBucket":
+        return this.builderPreview ? "cell" : "crosshair";
       default:
         return "crosshair";
     }
@@ -3656,6 +4561,9 @@ var VectorEditorController = class {
     this.tool = tool;
     this.hover = null;
     this.guides = null;
+    this.widthPoint = null;
+    this.builderPreview = null;
+    this.builderHoverKey = null;
     if (tool !== "direct") {
       this.anchors = [];
       this.editingId = null;
@@ -3887,6 +4795,7 @@ var VectorEditorController = 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 (d.strokeWidthProfile?.length) out.strokeWidthProfile = d.strokeWidthProfile.map((p) => ({ ...p }));
     return out;
   }
   /** Merges `patch` into a node (paths take style and geometry; groups name / visibility / opacity). */
@@ -3907,10 +4816,39 @@ var VectorEditorController = class {
     }
     if (!targets.size) return { ok: false, message: "Nothing is selected." };
     this.change(options.label ?? "Change Style", () => {
-      this.setDoc(mapTree(this.doc.nodes, (n) => targets.has(n.id) ? { ...n, ...style } : n));
+      this.setDoc(mapTree(this.doc.nodes, (n) => targets.has(n.id) ? withStyle(n, style) : n));
     });
     return { ok: true };
   }
+  /**
+   * Sets the variable-width profile of the selected (or given) paths: a preset id
+   * (`uniform` removes the profile), points, or a parametric taper / wave. Returns an error for
+   * an unknown preset.
+   */
+  setWidthProfile(profile, options = {}) {
+    let points;
+    if (profile === null) points = [];
+    else if (typeof profile === "string") {
+      const preset = widthProfilePreset(profile);
+      if (!preset) return { ok: false, message: `There is no width profile "${profile}".` };
+      points = preset;
+    } else if (Array.isArray(profile)) points = sanitizeWidthProfile(profile);
+    else {
+      const p = profile;
+      points = p.taper || p.wave ? generateWidthProfile(p) : [];
+    }
+    this.widthPoint = 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). */
+  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 { ok: true };
+  }
   /**
    * 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
@@ -3981,6 +4919,7 @@ var VectorEditorController = class {
         arrowAlign: _al,
         startArrowScale: _ss,
         endArrowScale: _es,
+        strokeWidthProfile: _wp,
         ...rest
       } = cloneVectorNode(p);
       const id = this.newId();
@@ -4282,7 +5221,7 @@ var VectorEditorController = class {
     if (!groups.length) return { ok: false, message: "Select a group to ungroup." };
     const set = new Set(groups.map((g) => g.id));
     this.change("Ungroup", () => {
-      const flatten = (list) => {
+      const flatten2 = (list) => {
         const out = [];
         let changed = false;
         for (const n of list) {
@@ -4294,14 +5233,14 @@ var VectorEditorController = class {
               ...n.children.map((c) => n.transform ? transformVectorNode(c, m) : c).map((c) => opacity !== void 0 && opacity < 1 ? { ...c, opacity: (c.opacity ?? 1) * opacity } : c)
             );
           } else if (n.type === "group") {
-            const children = flatten(n.children);
+            const children = flatten2(n.children);
             if (children !== n.children) changed = true;
             out.push(children !== n.children ? { ...n, children } : n);
           } else out.push(n);
         }
         return changed ? out : list;
       };
-      this.setDoc(flatten(this.doc.nodes));
+      this.setDoc(flatten2(this.doc.nodes));
       this.selection = groups.flatMap((g) => g.children.map((c) => c.id));
     });
     return { ok: true };
@@ -4412,6 +5351,248 @@ var VectorEditorController = class {
     return { ok: true };
   }
   // -------------------------------------------------------------------------
+  // Pathfinder, Shape Builder and paint bucket
+  // -------------------------------------------------------------------------
+  /**
+   * Pathfinder: Divide, Trim, Merge, Crop, Outline or Minus Back over the selected (or given)
+   * paths, in document space (rotated nodes and groups included, live corners cut). Unfilled
+   * stroked paths take part as the area their stroke paints (Divide: open ones cut instead).
+   * The results replace the operands at the place of the top-most one, grouped when there are
+   * several; each keeps the style of the operand whose area it is. Returns the new path ids,
+   * or an empty list when nothing came out.
+   */
+  pathfinder(op, options = {}) {
+    const roots = options.ids ?? this.selectedRoots();
+    const entries = vectorPathEntries(this.doc, roots);
+    if (entries.length < (op === "divide" || op === "outline" ? 1 : 2)) return [];
+    const shapes = entries.map((e) => vectorPathfinderShape(e, op));
+    const result = pathfinder(op, shapes);
+    if (result.error || !result.pieces.length) return [];
+    const last = entries[entries.length - 1].node.id;
+    const topRoot = [...roots].reverse().find((r) => {
+      const n = this.getNode(r);
+      return !!n && !!findVectorNode([n], last);
+    }) ?? last;
+    const nodes = [];
+    for (const piece of result.pieces) {
+      const subpaths = bezierToSubpaths(this.intoParentSpace(topRoot, piece.path)).map((sp) => piece.open ? { ...sp, closed: false } : sp);
+      if (!subpaths.length) continue;
+      const source = entries[piece.source].node;
+      const style = vectorResultStyle(source, shapes[piece.source].paint, op === "outline");
+      nodes.push({ ...style, type: "path", id: this.newId(), name: source.name ?? "Path", subpaths });
+    }
+    if (!nodes.length) return [];
+    const label = VECTOR_PATHFINDER_LABELS[op];
+    const container = nodes.length > 1 ? { id: this.newId(), type: "group", name: label, children: nodes } : nodes[0];
+    const drop = /* @__PURE__ */ new Set([...entries.map((e) => e.node.id), ...roots]);
+    this.change(label, () => {
+      this.setDoc(mapTree(this.doc.nodes, (n) => n.id === topRoot ? container : drop.has(n.id) ? null : n));
+      this.selection = [container.id];
+      this.anchors = [];
+      this.editingId = null;
+    });
+    return nodes.map((n) => n.id);
+  }
+  /** The Shape Builder map of the selected (or given) paths, cached per document and selection. */
+  shapeBuilderMap(ids) {
+    const roots = ids ?? this.selectedRoots();
+    const key = roots.join("\0");
+    if (this.builderCache?.doc === this.doc && this.builderCache.key === key) return this.builderCache.map;
+    const entries = roots.length ? vectorPathEntries(this.doc, roots) : [];
+    const map = entries.length ? vectorShapeBuilderMap(entries) : null;
+    this.builderCache = { doc: this.doc, key, map };
+    return map;
+  }
+  /** The faces the Shape Builder offers for the selected (or given) paths (document units). */
+  getShapeBuilderFaces(options = {}) {
+    const m = this.shapeBuilderMap(options.ids);
+    if (!m) return [];
+    return m.map.faces.map((f, index) => {
+      const p = m.map.faceInterior(index);
+      return {
+        index,
+        d: bezierPathToSvg(f.path, { precision: 3 }),
+        area: f.area,
+        sources: m.map.faceSources(index).map((i) => m.entries[i].node.id),
+        point: p ? { x: p[0], y: p[1] } : null
+      };
+    });
+  }
+  /** Pick distance of the Shape Builder's erase for line pieces (document units). */
+  builderLineTolerance() {
+    return Math.max(this.hitRadius, 4) / this.viewport.zoom;
+  }
+  /**
+   * Shape Builder gesture along `points` (document units; one point is a click) over the faces
+   * the selected (or given) paths make. Merges the faces touched into one shape styled like the
+   * top-most shape over the first face (the current fill for a face only outlines enclose);
+   * with `erase` deletes them, and the pieces of unfilled open paths within `tolerance`. Every
+   * shape covering a touched face loses that area. One undo step.
+   */
+  shapeBuilder(points, options = {}) {
+    const none = (message) => ({ ok: false, message, merged: null, faces: 0, lines: 0 });
+    if (!points.length || !points.every((p) => Number.isFinite(p.x) && Number.isFinite(p.y))) return none("Give the points of the gesture.");
+    const m = this.shapeBuilderMap(options.ids);
+    if (!m) return none("Select paths that make faces.");
+    const erase = !!options.erase;
+    const tol = erase ? options.tolerance ?? this.builderLineTolerance() : null;
+    const touched = { faces: [], lines: [] };
+    const size = m.map.faces.reduce((s, f) => Math.max(s, f.bounds.maxX - f.bounds.minX, f.bounds.maxY - f.bounds.minY), 1);
+    for (const p of samplePolyline(points, Math.max(size / 2e3, 0.25 / this.viewport.zoom))) addBuilderHit(touched, vectorShapeBuilderHit(m, p, tol));
+    if (!touched.faces.length && !touched.lines.length) return none("There is no face under the pointer.");
+    return this.applyShapeBuilder(m, touched, erase);
+  }
+  applyShapeBuilder(m, touched, erase) {
+    const plan = planShapeBuilder(m, touched, erase);
+    let mergedId = null;
+    const created = /* @__PURE__ */ new Map();
+    this.change(erase ? "Shape Builder Delete" : "Shape Builder", () => {
+      let nodes = this.doc.nodes;
+      m.entries.forEach((entry, i) => {
+        const node = entry.node;
+        const toLocal = (path) => transformBezierPath(path, invertMatrix(multiplyMatrices(nodeMatrix(node), entry.parent)));
+        const list = [];
+        const r = plan.replace.get(i);
+        if (r === void 0) list.push(node);
+        else if (r?.kind === "fill") list.push({ ...node, fillRule: "nonzero", subpaths: bezierToSubpaths(toLocal(r.path)) });
+        else if (r?.kind === "pieces") {
+          r.paths.forEach(
+            (path, k) => list.push({ ...node, id: k === 0 ? node.id : this.newId(), subpaths: bezierToSubpaths(toLocal(path)).map((sp) => ({ ...sp, closed: false })) })
+          );
+        }
+        if (plan.merged && plan.merged.style === i) {
+          mergedId = this.newId();
+          const merged = {
+            ...vectorResultStyle(node, "fill"),
+            type: "path",
+            id: mergedId,
+            name: "Shape",
+            ...node.transform ? { transform: node.transform } : {},
+            subpaths: bezierToSubpaths(toLocal(plan.merged.path))
+          };
+          if (plan.merged.currentFill || !hasPaint(merged.fill)) merged.fill = hasPaint(this.defaults.fill) ? this.defaults.fill : "#808080";
+          list.push(merged);
+        }
+        if (r === void 0 && list.length === 1) return;
+        created.set(node.id, list.map((n) => n.id));
+        nodes = spliceTree(nodes, node.id, list);
+      });
+      this.setDoc(nodes);
+      const selection = this.selection.flatMap((id) => created.get(id) ?? [id]);
+      if (mergedId && !selection.includes(mergedId)) selection.push(mergedId);
+      this.selection = selection.filter((id, k) => !!this.getNode(id) && selection.indexOf(id) === k);
+      this.anchors = [];
+      this.editingId = null;
+    });
+    this.builderCache = null;
+    return { ok: true, merged: mergedId, faces: touched.faces.length, lines: touched.lines.length };
+  }
+  /** The paint bucket's map of the visible outlines, cached per document and gap. */
+  fillMap(gap) {
+    if (this.fillCache?.doc === this.doc && this.fillCache.gap === gap) return this.fillCache.map;
+    const map = vectorFillMap(this.doc, gap);
+    this.fillCache = { doc: this.doc, gap, map };
+    return map;
+  }
+  /**
+   * Paint bucket: the region the visible outlines enclose around `point` (document units),
+   * crossings split and islands left as holes, becomes a new path filled with the current fill
+   * default, placed just below the selection (or on top when nothing is selected). `gap`
+   * (default `editing.fillGap`) closes gaps up to that size between loose ends. Returns the new
+   * path's id, or null when nothing encloses the point.
+   */
+  fillRegion(point, options = {}) {
+    if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) return null;
+    const region = this.fillMap(options.gap ?? this.editing.fillGap)?.regionAt([point.x, point.y]);
+    if (!region?.length) return null;
+    let below = null;
+    const roots = new Set(this.selectedRoots());
+    walkVectorNodes(this.doc.nodes, (n) => {
+      if (!below && roots.has(n.id)) below = n.id;
+    });
+    const subpaths = bezierToSubpaths(below ? this.intoParentSpace(below, region) : region);
+    if (!subpaths.length) return null;
+    const id = this.newId();
+    const node = { id, type: "path", name: "Fill", ...this.styleFor(false), stroke: null, fillRule: "nonzero", subpaths };
+    if (!hasPaint(node.fill)) node.fill = "#808080";
+    const target = below;
+    this.change("Fill Region", () => {
+      if (target) {
+        const current = this.getNode(target);
+        this.setDoc(spliceTree(this.doc.nodes, target, [node, current]));
+      } else this.setDoc([...this.doc.nodes, node]);
+      if (!target) this.selection = [id];
+      this.anchors = [];
+      this.editingId = null;
+    });
+    return id;
+  }
+  /** Updates the Shape Builder / paint bucket highlight for the pointer at `p`; true when it changed. */
+  hoverBuilder(p, alt) {
+    if (this.tool === "paintBucket") {
+      const region = this.fillMap(this.editing.fillGap)?.regionAt([p.x, p.y]) ?? null;
+      const key2 = region ? bezierPathToSvg(region, { precision: 2 }) : null;
+      if (key2 === this.builderHoverKey) return false;
+      this.builderHoverKey = key2;
+      this.builderPreview = region ? { mode: "fill", faces: [region], lines: [], trail: null } : null;
+      return true;
+    }
+    const m = this.selectedRoots().length ? this.shapeBuilderMap() : null;
+    const hit = m ? vectorShapeBuilderHit(m, p, alt ? this.builderLineTolerance() : null) : null;
+    const key = hit ? `${alt ? "erase" : "merge"}:${JSON.stringify(hit)}` : null;
+    if (key === this.builderHoverKey) return false;
+    this.builderHoverKey = key;
+    this.builderPreview = hit && m ? this.builderPreviewOf(m, "face" in hit ? { faces: [hit.face], lines: [] } : { faces: [], lines: [hit.line] }, alt, null) : null;
+    return true;
+  }
+  builderPreviewOf(m, touched, erase, trail) {
+    const faces = m.map.faces;
+    return {
+      mode: erase ? "erase" : "merge",
+      faces: touched.faces.map((f) => faces[f].path),
+      lines: touched.lines.map((k) => m.pieces[k].path),
+      trail
+    };
+  }
+  downBuilder(p, input) {
+    this.builderHoverKey = null;
+    if (this.tool === "paintBucket") {
+      this.fillRegion(p);
+      this.builderPreview = null;
+      this.hoverBuilder(p, false);
+      this.notify();
+      return;
+    }
+    const m = this.selectedRoots().length ? this.shapeBuilderMap() : null;
+    if (!m) return;
+    const erase = !!input.alt;
+    const touched = { faces: [], lines: [] };
+    addBuilderHit(touched, vectorShapeBuilderHit(m, p, erase ? this.builderLineTolerance() : null));
+    this.drag = { kind: "builder", erase, points: [p], touched, map: m };
+    this.interaction = { type: "builder", mode: erase ? "erase" : "merge", points: [p] };
+    this.builderPreview = this.builderPreviewOf(m, touched, erase, [p]);
+    this.notify();
+  }
+  moveBuilder(drag, p) {
+    const last = drag.points[drag.points.length - 1];
+    if (Math.hypot(p.x - last.x, p.y - last.y) * this.viewport.zoom < 1) return;
+    const tol = drag.erase ? this.builderLineTolerance() : null;
+    for (const q of samplePolyline([last, p], 2 / this.viewport.zoom)) addBuilderHit(drag.touched, vectorShapeBuilderHit(drag.map, q, tol));
+    drag.points.push(p);
+    this.interaction = { type: "builder", mode: drag.erase ? "erase" : "merge", points: drag.points.slice() };
+    this.builderPreview = this.builderPreviewOf(drag.map, drag.touched, drag.erase, drag.points.slice());
+    this.notify();
+  }
+  upBuilder(drag) {
+    this.builderPreview = null;
+    this.builderHoverKey = null;
+    if (!drag.touched.faces.length && !drag.touched.lines.length) {
+      this.notify();
+      return;
+    }
+    this.applyShapeBuilder(drag.map, drag.touched, drag.erase);
+  }
+  // -------------------------------------------------------------------------
   // Anchor editing
   // -------------------------------------------------------------------------
   updateAnchors(doc, refs, fn) {
@@ -4571,7 +5752,12 @@ var VectorEditorController = class {
     const set = new Set(ids.flatMap((id) => this.getNode(id) ? collectPathNodes(this.getNode(id)) : []).map((p) => p.id));
     if (!set.size) return { ok: false, message: "Select a path." };
     this.change("Reverse Path", () => {
-      this.setDoc(mapTree(this.doc.nodes, (n) => n.type === "path" && set.has(n.id) ? { ...n, subpaths: n.subpaths.map(reverseSubpath) } : n));
+      this.setDoc(
+        mapTree(
+          this.doc.nodes,
+          (n) => n.type === "path" && set.has(n.id) ? { ...n, subpaths: n.subpaths.map(reverseSubpath), ...n.strokeWidthProfile?.length ? { strokeWidthProfile: reverseWidthProfile(n.strokeWidthProfile) } : {} } : n
+        )
+      );
       this.anchors = [];
     });
     return { ok: true };
@@ -4652,9 +5838,9 @@ var VectorEditorController = class {
     const cx = points.reduce((s, p) => s + p.at.x, 0) / points.length;
     const cy = points.reduce((s, p) => s + p.at.y, 0) / points.length;
     this.change("Average", () => {
-      for (const { ref, at } of points) {
-        const dx = axis === "horizontal" ? 0 : cx - at.x;
-        const dy = axis === "vertical" ? 0 : cy - at.y;
+      for (const { ref, at: at2 } of points) {
+        const dx = axis === "horizontal" ? 0 : cx - at2.x;
+        const dy = axis === "vertical" ? 0 : cy - at2.y;
         if (dx || dy) this.doc = this.movedAnchors(this.doc, [ref], dx, dy);
       }
     });
@@ -4738,8 +5924,8 @@ var VectorEditorController = class {
         const node = this.getNode(id);
         if (node.locked) continue;
         const ids = this.applyCuts(node, (sp, i) => {
-          const at = list.filter((r) => r.subpath === i).map((r) => r.index);
-          const pieces = at.length ? cutSubpathAt(sp, at) : null;
+          const at2 = list.filter((r) => r.subpath === i).map((r) => r.index);
+          const pieces = at2.length ? cutSubpathAt(sp, at2) : null;
           return pieces && !(pieces.length === 1 && pieces[0].closed === sp.closed) ? pieces : null;
         });
         if (ids) created.push(...ids);
@@ -4943,8 +6129,8 @@ var VectorEditorController = class {
     if (!frame) return null;
     const { box, handles } = getVectorSelectionBoxGeometry(frame, this.viewport);
     const r = this.hitRadius + 2;
-    const usable = box.width < 2 * r || box.height < 2 * r ? handles.filter((h) => h.handle.length === 2 || h.handle === "rotate") : handles;
-    for (const h of usable) if (Math.hypot(h.screen.x - screen.x, h.screen.y - screen.y) <= r * Math.SQRT2) return h.handle;
+    const usable2 = box.width < 2 * r || box.height < 2 * r ? handles.filter((h) => h.handle.length === 2 || h.handle === "rotate") : handles;
+    for (const h of usable2) if (Math.hypot(h.screen.x - screen.x, h.screen.y - screen.y) <= r * Math.SQRT2) return h.handle;
     return null;
   }
   hitHandle(screen) {
@@ -5053,10 +6239,131 @@ var VectorEditorController = class {
         const seg = this.nearestOutline(p);
         return seg ? { nodeId: seg.nodeId, segment: seg } : null;
       }
+      case "width": {
+        const hit = this.hitWidthHandle(screen);
+        if (hit) return { nodeId: hit.ref.nodeId, widthPoint: hit.ref };
+        const spot = this.strokeSpotAt(p);
+        return spot ? { nodeId: spot.nodeId, strokeSpot: spot } : null;
+      }
       default:
         return null;
     }
   }
+  widthView() {
+    return { document: this.doc, selection: this.selection, tool: this.tool, hover: this.hover, interaction: this.interaction, selectedWidthPoint: this.widthPoint };
+  }
+  /** The width point centre or side end under `screen` (width tool). */
+  hitWidthHandle(screen) {
+    let best = null;
+    let bestD = Infinity;
+    for (const h of getVectorWidthHandles(this.widthView())) {
+      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);
+        if (d <= this.hitRadius && d < bestD - 1e-9) {
+          best = { ref: { ...h.ref, part } };
+          bestD = d;
+        }
+      }
+    }
+    return best;
+  }
+  /** The nearest stroked, unlocked visible path whose stroke is under document point `p` (width tool). */
+  strokeSpotAt(p) {
+    let best = null;
+    const tol = this.tolerance();
+    walkVectorNodes(this.doc.nodes, (n) => {
+      if (n.type !== "path" || n.visible === false || n.locked) return;
+      if (hiddenOrLocked(this.doc.nodes, n.id)) return;
+      const g = vectorStrokeWidthGeometry(n);
+      if (!g) return;
+      const m = this.worldOf(n.id);
+      const local = applyMatrix(invertMatrix(m), p);
+      const near2 = nearestStrokePosition(g.line, [local.x, local.y]);
+      if (!near2) return;
+      const profile = strokeWidthProfileOf(n);
+      const w = widthProfileAt(profile, near2.t);
+      const reach = Math.max(near2.side === "left" ? w.left : w.right, 0) * g.unit + tol;
+      if (near2.distance > reach || near2.distance > widthProfileMaxScale(profile) * g.unit + tol) return;
+      if (best && near2.distance >= best.distance) return;
+      const nx = near2.tangent[1];
+      const ny = -near2.tangent[0];
+      const [cx, cy] = near2.point;
+      best = {
+        nodeId: n.id,
+        subpath: near2.contour,
+        t: near2.t,
+        point: applyMatrix(m, { x: cx, y: cy }),
+        left: applyMatrix(m, { x: cx + nx * w.left * g.unit, y: cy + ny * w.left * g.unit }),
+        right: applyMatrix(m, { x: cx - nx * w.right * g.unit, y: cy - ny * w.right * g.unit }),
+        distance: near2.distance
+      };
+    });
+    if (!best) return null;
+    const { distance: _d, ...spot } = best;
+    return spot;
+  }
+  downWidth(screen, p, input) {
+    const hit = this.hitWidthHandle(screen);
+    const spot = hit ? null : this.strokeSpotAt(p);
+    const nodeId = hit?.ref.nodeId ?? spot?.nodeId;
+    const node = nodeId ? this.getNode(nodeId) : void 0;
+    const g = node?.type === "path" ? vectorStrokeWidthGeometry(node) : null;
+    if (!node || node.type !== "path" || !g) {
+      if (this.widthPoint) {
+        this.widthPoint = null;
+        this.notify();
+      }
+      return;
+    }
+    const before = this.snapshot();
+    const local = this.toLocal(node.id, p);
+    let profile;
+    let ref;
+    let mode = "width";
+    let side = "both";
+    let t;
+    let subpath;
+    if (hit) {
+      profile = sanitizeWidthProfile(node.strokeWidthProfile);
+      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";
+      else if (input.alt) side = hit.ref.part;
+    } else {
+      const near2 = nearestStrokePosition(g.line, [local.x, local.y]);
+      const inserted = insertWidthPoint(strokeWidthProfileOf(node), near2.t);
+      profile = inserted.points;
+      subpath = near2.contour;
+      t = near2.t;
+      ref = { nodeId: node.id, index: inserted.index, subpath };
+      if (input.alt) side = near2.side;
+    }
+    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,
+      origin: { x: at2.point[0], y: at2.point[1] },
+      normal: { x: at2.tangent[1], y: -at2.tangent[0] },
+      unit: g.unit,
+      profile,
+      before,
+      base,
+      start: p,
+      moved: false,
+      created: !hit
+    };
+    const w = profile[ref.index];
+    this.interaction = { type: "width", ref, mode, width: (w.left + w.right) * g.unit };
+    this.notify(!hit);
+  }
   /** The nearest outline point of any visible, unlocked path within the pick distance of document point `p`. */
   nearestOutline(p) {
     let best = null;
@@ -5104,7 +6411,12 @@ var VectorEditorController = class {
       case "pen":
         return this.downPen(screen, p, input);
       case "pencil":
-        return this.downPencil(p);
+        return this.downPencil(p, input);
+      case "width":
+        return this.downWidth(screen, p, input);
+      case "shapeBuilder":
+      case "paintBucket":
+        return this.downBuilder(p, input);
       case "scissors": {
         const seg = this.nearestOutline(p);
         if (seg) this.cutPathAt(seg.nodeId, seg.point);
@@ -5297,7 +6609,7 @@ var VectorEditorController = class {
     this.interaction = { type: "pen", nodeId: node.id };
     this.notify(true);
   }
-  downPencil(p) {
+  downPencil(p, input = {}) {
     const before = this.snapshot();
     const node = {
       id: this.newId(),
@@ -5311,7 +6623,11 @@ var VectorEditorController = class {
     this.setDoc([...this.doc.nodes, node]);
     const lazy = new LazyMouse(this.editing.pencilSmoothing * VECTOR_PENCIL_STRING_PX / this.viewport.zoom);
     lazy.push([p.x, p.y]);
-    this.drag = { kind: "pencil", nodeId: node.id, points: [[p.x, p.y]], before, lazy };
+    const mode = this.editing.pencilPressure;
+    const hasPressure = typeof input.pressure === "number" && Number.isFinite(input.pressure);
+    const record = hasPressure && (mode === "all" || mode === "pen" && input.pointerType === "pen");
+    const pressure = hasPressure ? input.pressure : 0.5;
+    this.drag = { kind: "pencil", nodeId: node.id, points: [[p.x, p.y]], before, lazy, pressures: record ? [pressure] : null, pressure };
     this.interaction = { type: "draw", tool: "pencil", nodeId: node.id, bounds: { x: p.x, y: p.y, width: 0, height: 0 } };
     this.notify(true);
   }
@@ -5330,6 +6646,11 @@ var VectorEditorController = class {
   pointerMove(screen, input = {}) {
     const p = this.screenToDocument(screen);
     const drag = this.drag;
+    if (!drag && (this.tool === "shapeBuilder" || this.tool === "paintBucket")) {
+      this.pointer = p;
+      if (this.hoverBuilder(p, !!input.alt)) this.notify();
+      return;
+    }
     if (!drag) {
       const hover = this.computeHover(screen);
       const pointerMatters = this.tool === "pen" && !!this.pen;
@@ -5461,6 +6782,8 @@ var VectorEditorController = class {
         this.notify(true);
         return;
       }
+      case "builder":
+        return this.moveBuilder(drag, p);
       case "stroke": {
         const last = drag.points[drag.points.length - 1];
         if (Math.hypot(p.x - last.x, p.y - last.y) * this.viewport.zoom < 1.5) return;
@@ -5520,12 +6843,36 @@ var VectorEditorController = class {
         this.notify(true);
         return;
       }
+      case "width": {
+        if (!drag.moved && Math.hypot(p.x - drag.start.x, p.y - drag.start.y) * this.viewport.zoom < 2) return;
+        drag.moved = true;
+        const node = findVectorNode(drag.base.nodes, drag.ref.nodeId);
+        const local = this.toLocal(node.id, p, drag.base);
+        let profile;
+        if (drag.mode === "move") {
+          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 });
+        } 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);
+        }
+        this.doc = { ...drag.base, nodes: mapTree(drag.base.nodes, (n) => n.id === node.id ? { ...n, strokeWidthProfile: profile } : n) };
+        const w = profile[drag.ref.index];
+        this.interaction = { type: "width", ref: drag.ref, mode: drag.mode, width: (w.left + w.right) * drag.unit };
+        this.notify(true);
+        return;
+      }
       case "pencil": {
         const last = drag.points[drag.points.length - 1];
         let moved = false;
+        if (typeof input.pressure === "number" && Number.isFinite(input.pressure)) drag.pressure = input.pressure;
         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);
+          drag.pressures?.push(drag.pressure);
           moved = true;
         }
         const string = drag.lazy.string();
@@ -5606,7 +6953,7 @@ var VectorEditorController = class {
   }
   /** Primary button released. */
   pointerUp(screen, input = {}) {
-    if (screen && this.drag && this.drag.kind !== "pan") this.pointerMove(screen, input);
+    if (screen && this.drag && this.drag.kind !== "pan") this.pointerMove(screen, { ...input, pressure: void 0 });
     const drag = this.drag;
     this.drag = null;
     this.interaction = null;
@@ -5658,6 +7005,17 @@ var VectorEditorController = class {
         this.notify();
         return;
       }
+      case "width": {
+        if (drag.moved) return this.commit(drag.mode === "move" ? "Move Width Point" : "Width Point", drag.before);
+        if (drag.created) {
+          this.doc = drag.before.doc;
+          this.widthPoint = null;
+          this.notify(true);
+        } else this.notify();
+        return;
+      }
+      case "builder":
+        return this.upBuilder(drag);
       case "stroke": {
         this.notify();
         if (drag.tool === "knife") this.knife(drag.points);
@@ -5688,7 +7046,10 @@ var VectorEditorController = class {
           this.notify(true);
           return;
         }
-        for (const q of drag.lazy.finish()) drag.points.push(q);
+        for (const q of drag.lazy.finish()) {
+          drag.points.push(q);
+          drag.pressures?.push(drag.pressure);
+        }
         const shape = this.editing.recognizeShapes ? recognizeInkShape(drag.points, { minSize: 6 / this.viewport.zoom }) : null;
         if (shape) {
           this.replaceNode(drag.nodeId, { ...node, name: inkShapeLabel(shape), subpaths: [inkShapeSubpath(shape)] });
@@ -5703,7 +7064,8 @@ var VectorEditorController = class {
           anchors.push({ x: c.p3[0], y: c.p3[1], in: { x: c.p2[0], y: c.p2[1] } });
         }
         const subpaths = anchors.length > 1 ? bezierToSubpaths(subpathsToBezier([{ anchors, closed: false }])) : node.subpaths;
-        this.replaceNode(drag.nodeId, { ...node, subpaths });
+        const profile = drag.pressures ? pencilPressureProfile(drag.points, drag.pressures) : [];
+        this.replaceNode(drag.nodeId, { ...node, subpaths, ...profile.length ? { strokeWidthProfile: profile } : {} });
         this.selection = [drag.nodeId];
         return this.commit("Draw", drag.before);
       }
@@ -5725,7 +7087,8 @@ var VectorEditorController = class {
     this.drag = null;
     this.interaction = null;
     this.guides = null;
-    if (drag.kind === "pan") {
+    if (drag.kind === "pan" || drag.kind === "builder") {
+      if (drag.kind === "builder") this.builderPreview = null;
       this.notify();
       return;
     }
@@ -5825,7 +7188,10 @@ var VectorEditorController = class {
     switch (key) {
       case "Escape":
         if (this.drag) this.cancelDrag();
-        else if (this.pen) this.finishPath();
+        else if (this.tool === "width" && this.widthPoint) {
+          this.widthPoint = null;
+          this.notify();
+        } else if (this.pen) this.finishPath();
         else if (this.tool === "direct" && this.anchors.length) {
           this.anchors = [];
           this.notify();
@@ -5846,6 +7212,7 @@ var VectorEditorController = class {
         return false;
       case "Delete":
       case "Backspace":
+        if (this.tool === "width" && this.widthPoint) return this.removeWidthPoint(this.widthPoint).ok;
         if (this.pen) {
           const node = this.getNode(this.pen.nodeId);
           const sp = node.subpaths[this.pen.subpath];
@@ -5927,6 +7294,31 @@ function scaleFor(handle, b, p, mods = {}) {
   }
   return { sx, sy, origin };
 }
+function withStyle(node, style) {
+  const next = { ...node, ...style };
+  if ("strokeWidthProfile" in style) {
+    const p = style.strokeWidthProfile ? sanitizeWidthProfile(style.strokeWidthProfile) : [];
+    if (p.length) next.strokeWidthProfile = p;
+    else delete next.strokeWidthProfile;
+  }
+  return next;
+}
+function hiddenOrLocked(nodes, id) {
+  const loc = locateVectorNode(nodes, id);
+  if (!loc) return false;
+  const n = loc.list[loc.index];
+  if (n.locked || n.visible === false) return true;
+  return loc.parent ? hiddenOrLocked(nodes, loc.parent.id) : false;
+}
+function pencilPressureProfile(points, pressures) {
+  const n = Math.min(points.length, pressures.length);
+  if (n < 2) return [];
+  const s = [0];
+  for (let i = 1; i < n; i++) s.push(s[i - 1] + Math.hypot(points[i][0] - points[i - 1][0], points[i][1] - points[i - 1][1]));
+  const total = s[n - 1];
+  if (!(total > 0)) return [];
+  return pressureWidthProfile(s.map((d, i) => ({ t: d / total, pressure: pressures[i] })));
+}
 
 // src/vector/render.ts
 var fmt = (n) => Math.round(n * 100) / 100;
@@ -6091,7 +7483,33 @@ function getVectorOverlayRenderData(state) {
   });
   if (it?.type === "corner") status = `R ${fmt(it.radius)}`;
   const cutPoint = state.tool === "scissors" && state.hover?.segment && !it ? (({ x, y }) => ({ x: fmt(x), y: fmt(y) }))(toScreen(state, state.hover.segment.point)) : null;
-  return { outlines, selectionBox, anchors, handles, marquee, penPreview, artboard, guides, status, toolStroke, pencilString, cutPoint, cornerWidgets };
+  const sc = (p) => {
+    const q = toScreen(state, p);
+    return { x: fmt(q.x), y: fmt(q.y) };
+  };
+  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 = state.hover?.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: it?.type === "width" && sameWidth(it.ref, h.ref) };
+  });
+  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)}`;
+  let builder = null;
+  if (state.builder) {
+    const v2 = state.viewport;
+    const view = [v2.zoom, 0, 0, v2.zoom, v2.x, v2.y];
+    const d = (path) => bezierPathToSvg(transformBezierPath(path, view), { precision: 2 });
+    const trail = state.builder.trail && state.builder.trail.length > 1 ? state.builder.trail.map((q, i) => `${i ? "L" : "M"}${sc(q).x} ${sc(q).y}`).join("") : null;
+    builder = { mode: state.builder.mode, faces: state.builder.faces.map(d), lines: state.builder.lines.map(d), trail };
+    if (state.builder.mode !== "fill" && it?.type === "builder") {
+      const n = state.builder.faces.length;
+      status = state.builder.mode === "erase" ? `Delete ${n} ${n === 1 ? "face" : "faces"}` : `Merge ${n} ${n === 1 ? "face" : "faces"}`;
+    }
+  }
+  return { outlines, selectionBox, anchors, handles, marquee, penPreview, artboard, guides, status, toolStroke, pencilString, cutPoint, cornerWidgets, widthPoints, widthSpot, builder };
 }
 var VECTOR_OVERLAY_THEME = {
   accent: "#0ea5e9",
@@ -6105,13 +7523,28 @@ var VECTOR_OVERLAY_THEME = {
   anchorSize: 7,
   handleRadius: 3.5,
   /** Radius of a live corner widget (a ring with a dot). */
-  cornerWidgetRadius: 4
+  cornerWidgetRadius: 4,
+  /** Half the diagonal of a width point's diamond. */
+  widthPointSize: 5,
+  /** Shape Builder faces to merge and paint bucket regions. */
+  builderFill: "rgba(14, 165, 233, 0.22)",
+  /** Shape Builder faces and line pieces an Alt gesture deletes. */
+  builderErase: "#ef4444",
+  builderEraseFill: "rgba(239, 68, 68, 0.22)"
 };
+function vectorDiamondPath(x, y, r = VECTOR_OVERLAY_THEME.widthPointSize) {
+  return `M${fmt(x)} ${fmt(y - r)}L${fmt(x + r)} ${fmt(y)}L${fmt(x)} ${fmt(y + r)}L${fmt(x - r)} ${fmt(y)}Z`;
+}
 function toVectorModifiers(event) {
   return { shift: !!event.shiftKey, alt: !!event.altKey, mod: !!(event.metaKey || event.ctrlKey) };
 }
 function toVectorPointerInput(event) {
-  return { ...toVectorModifiers(event), button: event.button };
+  return {
+    ...toVectorModifiers(event),
+    button: event.button,
+    ...typeof event.pressure === "number" ? { pressure: event.pressure } : {},
+    ...event.pointerType ? { pointerType: event.pointerType } : {}
+  };
 }
 function toVectorKeyInput(event) {
   return { key: event.key, ...toVectorModifiers(event) };
@@ -6160,6 +7593,8 @@ function getVectorSelectionStyle(state) {
     arrowAlign: first.arrowAlign ?? "extend",
     startArrowScale: first.startArrowScale ?? 1,
     endArrowScale: first.endArrowScale ?? 1,
+    strokeWidthProfile: profileOf(first),
+    widthProfile: widthProfilePresetId(profileOf(first)),
     cornerRadius: c0.radius,
     cornerKind: c0.kind,
     corners: corners2.length,
@@ -6175,12 +7610,17 @@ function getVectorSelectionStyle(state) {
       arrowAlign: !same((p) => p.arrowAlign ?? "extend"),
       startArrowScale: !same((p) => p.startArrowScale ?? 1),
       endArrowScale: !same((p) => p.endArrowScale ?? 1),
+      widthProfile: !same(profileOf),
       cornerRadius: corners2.some((c) => c.radius !== c0.radius),
       cornerKind: corners2.some((c) => c.kind !== c0.kind)
     },
     pathIds: paths.map((p) => p.id)
   };
 }
+function profileOf(p) {
+  const points = sanitizeWidthProfile(p.strokeWidthProfile);
+  return points.length && widthProfilePresetId(points) !== "uniform" ? points : null;
+}
 var VECTOR_STROKE_ALIGN_LABELS = { center: "Center", inside: "Inside", outside: "Outside" };
 var VECTOR_CORNER_KIND_LABELS = { round: "Round", inverted: "Inverted", chamfer: "Chamfer" };
 var VECTOR_ARROWHEAD_LABELS = {
@@ -6206,6 +7646,14 @@ var VECTOR_PATH_ACTIONS = [
   { id: "smooth", label: "\u223F", title: "Smooth", enabled: (s, p) => s + p > 0, run: (c) => c.smoothPaths() },
   { id: "outline", label: "\u22A1", title: "Outline Stroke", enabled: (s) => s > 0, run: (c) => c.outlineStroke() }
 ];
+var VECTOR_PATHFINDER_ACTIONS = [
+  { id: "divide", label: "\u229E", title: "Divide", min: 1 },
+  { id: "trim", label: "\u29C9", title: "Trim", min: 2 },
+  { id: "merge", label: "\u29C8", title: "Merge", min: 2 },
+  { id: "crop", label: "\u2317", title: "Crop", min: 2 },
+  { id: "outline", label: "\u2B1A", title: "Outline", min: 1 },
+  { id: "minusBack", label: "\u2296", title: "Minus Back", min: 2 }
+];
 var VECTOR_EDIT_TOGGLES = [
   { key: "keepShapeOnDelete", label: "Keep", title: "Keep shape when deleting points" },
   { key: "curvatureMoves", label: "Curv", title: "Curvature point moves (Alt flips while dragging)" },
@@ -6232,6 +7680,19 @@ var POINTS = {
   minItems: 1,
   description: "Polyline [[x, y], \u2026] in document units."
 };
+var WIDTH_POINTS = {
+  type: ["array", "null"],
+  items: {
+    type: "object",
+    properties: {
+      t: { type: "number", minimum: 0, maximum: 1, description: "Position along each subpath by length (0 start, 1 end)." },
+      left: { type: "number", minimum: 0, description: "Left side as a multiple of half the stroke width (1 = uniform)." },
+      right: { type: "number", minimum: 0, description: "Right side (looking along the path, y down)." }
+    },
+    required: ["t", "left", "right"]
+  },
+  description: "Variable-width profile points, interpolated smoothly (monotone cubic); two points at one `t` make a step. `null` or `[]` strokes at a uniform width."
+};
 var PAINT = {
   description: 'A CSS colour, `null` for none, or a gradient `{ type: "linear", angle, stops: [{ offset, color }] }`.'
 };
@@ -6248,7 +7709,8 @@ var STYLE_PROPS = {
   endArrow: { type: ["string", "null"], enum: [...VECTOR_ARROWHEADS, null], description: "Head at the end of an open path, or null for none." },
   arrowAlign: { type: "string", enum: ["extend", "tip"], description: "`extend`: the tip sits past the end point; `tip`: on it, the stroke shortened under the head." },
   startArrowScale: { type: "number", exclusiveMinimum: 0, description: "Start head size as a multiple of the stroke width (default 1)." },
-  endArrowScale: { type: "number", exclusiveMinimum: 0, description: "End head size as a multiple of the stroke width (default 1)." }
+  endArrowScale: { type: "number", exclusiveMinimum: 0, description: "End head size as a multiple of the stroke width (default 1)." },
+  strokeWidthProfile: WIDTH_POINTS
 };
 var pickStyle = (params) => {
   const out = {};
@@ -6405,6 +7867,44 @@ function createVectorCommands(controller, options = {}) {
         return { ok: true };
       }
     },
+    {
+      ...base,
+      id: `${prefix}setWidthProfile`,
+      label: "Width Profile\u2026",
+      keywords: ["variable width", "taper", "tapered", "pressure", "profile", "brush", "calligraphy", "bulge", "thick", "thin"],
+      description: "Gives the stroke of paths a variable width: a `preset` (`uniform` removes the profile), explicit `points` ({ t, left, right }: side scales along each subpath), or a parametric `taper` (startLength / endLength as fractions of the path, startWidth / endWidth 0\u20131, startEase / endEase 0\u20131) and / or `wave` (amount 0\u20131, cycles, phase in degrees). Profiled strokes draw as filled outlines; Outline Stroke bakes them.",
+      params: {
+        type: "object",
+        properties: {
+          ids: IDS,
+          preset: { type: "string", enum: VECTOR_WIDTH_PRESET_IDS },
+          points: WIDTH_POINTS,
+          taper: {
+            type: "object",
+            properties: {
+              startLength: { type: "number", minimum: 0, maximum: 1 },
+              endLength: { type: "number", minimum: 0, maximum: 1 },
+              startWidth: { type: "number", minimum: 0, maximum: 1 },
+              endWidth: { type: "number", minimum: 0, maximum: 1 },
+              startEase: { type: "number", minimum: 0, maximum: 1 },
+              endEase: { type: "number", minimum: 0, maximum: 1 }
+            }
+          },
+          wave: { type: "object", properties: { amount: { type: "number", minimum: 0, maximum: 1 }, cycles: { type: "number", exclusiveMinimum: 0 }, phase: { type: "number" } } }
+        }
+      },
+      enabled: enabledFor,
+      undoable: true,
+      run: (_ctx, params) => {
+        const target = { ids: ids(params) };
+        if (params?.preset) check(controller.setWidthProfile(params.preset, target));
+        else if (params?.points !== void 0) check(controller.setWidthProfile(params.points ?? null, target));
+        else if (params?.taper || params?.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: node?.type === "path" ? node.strokeWidthProfile ?? [] : [] };
+      }
+    },
     {
       ...base,
       id: `${prefix}outlineStroke`,
@@ -6477,6 +7977,62 @@ function createVectorCommands(controller, options = {}) {
         return { id };
       }
     },
+    {
+      ...base,
+      id: `${prefix}pathfinder`,
+      label: "Pathfinder\u2026",
+      keywords: ["divide", "trim", "merge", "crop", "outline", "minus back", "split", "faces"],
+      description: "Pathfinder over the given paths (bottom to top): divide (every face its own shape, painted like the top-most shape over it; open unfilled paths cut), trim (hidden parts removed), merge (trim, then touching parts of one fill joined), crop (the top shape crops the others), outline (outlines cut into open strokes where they meet) or minusBack (the top shape minus everything below). Results replace the paths, grouped when there are several.",
+      params: { type: "object", properties: { operation: { type: "string", enum: [...VECTOR_PATHFINDER_OPERATIONS] }, ids: IDS }, required: ["operation"] },
+      undoable: true,
+      run: (_ctx, params) => {
+        if (!VECTOR_PATHFINDER_OPERATIONS.includes(params.operation)) fail(`Unknown Pathfinder operation "${params.operation}".`);
+        const created = controller.pathfinder(params.operation, { ids: ids(params) });
+        if (!created.length) fail("Nothing came out: select paths that overlap (two or more, except for divide and outline).");
+        return { ids: created, selection: [...controller.getState().selection] };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}shapeBuilderFaces`,
+      label: "List Shape Builder Faces",
+      keywords: ["shape builder", "regions", "faces", "planar"],
+      description: "Lists the faces the given paths divide the plane into: path data, area, a point inside and the ids of the paths filling each (empty when only outlines enclose it).",
+      params: { type: "object", properties: { ids: IDS } },
+      run: (_ctx, params) => ({ faces: controller.getShapeBuilderFaces({ ids: ids(params) }) })
+    },
+    {
+      ...base,
+      id: `${prefix}shapeBuilder`,
+      label: "Shape Builder",
+      keywords: ["merge faces", "build shape", "combine regions", "delete region"],
+      description: "Shape Builder gesture over the faces of the given paths: `points` is the pointer path in document units (one point is a click; [[x, y], \u2026]; use the points from shapeBuilderFaces). Merges the faces it touches into one shape, or with `erase: true` deletes them and the pieces of unfilled open paths within `tolerance`. Shapes covering those faces lose that area.",
+      params: {
+        type: "object",
+        properties: { points: POINTS, erase: { type: "boolean" }, tolerance: { type: "number", minimum: 0 }, ids: IDS },
+        required: ["points"]
+      },
+      undoable: true,
+      run: (_ctx, params) => {
+        const result = controller.shapeBuilder(params.points.map(([x, y]) => ({ x, y })), { ids: ids(params), erase: params.erase, tolerance: params.tolerance });
+        check(result);
+        return { merged: result.merged, faces: result.faces, lines: result.lines };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}fillRegion`,
+      label: "Fill Region",
+      keywords: ["paint bucket", "live paint", "fill area", "enclosed"],
+      description: "Paint bucket: fills the area the visible outlines enclose around `point` (crossings split, nested shapes left as holes) with a new path in the current fill, below the selection or on top. `gap` closes gaps up to that size between loose ends.",
+      params: { type: "object", properties: { point: { type: "array", items: { type: "number" }, minItems: 2, maxItems: 2, description: "[x, y] in document units." }, gap: { type: "number", minimum: 0 } }, required: ["point"] },
+      undoable: true,
+      run: (_ctx, params) => {
+        const id = controller.fillRegion({ x: params.point[0], y: params.point[1] }, { gap: params.gap });
+        if (!id) fail("No closed region surrounds that point.");
+        return { id };
+      }
+    },
     {
       ...base,
       id: `${prefix}align`,
@@ -6711,7 +8267,7 @@ function createVectorCommands(controller, options = {}) {
       id: `${prefix}setEditing`,
       label: "Path Editing Options\u2026",
       keywords: ["settings", "curvature", "pencil", "smoothing", "lazy mouse", "shapes", "eraser"],
-      description: "Sets how editing behaves: `keepShapeOnDelete`, `curvatureMoves` (anchor drags bend like the Curvature tool), `pencilSmoothing` (lazy mouse, 0\u20131), `recognizeShapes` (pencil scribbles become lines, rectangles, ellipses, polygons) and `eraserSize`.",
+      description: "Sets how editing behaves: `keepShapeOnDelete`, `curvatureMoves` (anchor drags bend like the Curvature tool), `pencilSmoothing` (lazy mouse, 0\u20131), `recognizeShapes` (pencil scribbles become lines, rectangles, ellipses, polygons), `eraserSize` and `pencilPressure` (`pen`: record pen pressure on pencil strokes as a width profile, `all`: any pointer reporting pressure, `off`).",
       params: {
         type: "object",
         properties: {
@@ -6719,12 +8275,13 @@ function createVectorCommands(controller, options = {}) {
           curvatureMoves: { type: "boolean" },
           pencilSmoothing: { type: "number", minimum: 0, maximum: 1 },
           recognizeShapes: { type: "boolean" },
-          eraserSize: { type: "number", exclusiveMinimum: 0 }
+          eraserSize: { type: "number", exclusiveMinimum: 0 },
+          pencilPressure: { type: "string", enum: ["pen", "all", "off"] }
         }
       },
       run: (_ctx, params) => {
         const patch = {};
-        for (const key of ["keepShapeOnDelete", "curvatureMoves", "pencilSmoothing", "recognizeShapes", "eraserSize"]) if (params?.[key] !== void 0) patch[key] = params[key];
+        for (const key of ["keepShapeOnDelete", "curvatureMoves", "pencilSmoothing", "recognizeShapes", "eraserSize", "pencilPressure"]) if (params?.[key] !== void 0) patch[key] = params[key];
         controller.setEditing(patch);
         return { editing: controller.getState().editing };
       }
@@ -6780,10 +8337,15 @@ export {
   VECTOR_CORNER_KIND_LABELS,
   VECTOR_CORNER_WIDGET_INSET,
   VECTOR_EDIT_TOGGLES,
+  VECTOR_FILL_GAP,
   VECTOR_INK_MAX_CORNERS,
   VECTOR_OVERLAY_THEME,
+  VECTOR_PATHFINDER_ACTIONS,
+  VECTOR_PATHFINDER_LABELS,
+  VECTOR_PATHFINDER_OPERATIONS,
   VECTOR_PATH_ACTIONS,
   VECTOR_PENCIL_STRING_PX,
+  VECTOR_PRESSURE_NOMINAL,
   VECTOR_ROTATE_HANDLE_OFFSET,
   VECTOR_STROKE_ALIGN_LABELS,
   VECTOR_STYLE_KEYS,
@@ -6791,8 +8353,14 @@ export {
   VECTOR_TOOL_GLYPHS,
   VECTOR_TOOL_SHORTCUTS,
   VECTOR_TRANSFORM_HANDLES,
+  VECTOR_WIDTH_PRESETS,
+  VECTOR_WIDTH_PRESET_IDS,
+  VECTOR_WIDTH_PROFILE_MAX_POINTS,
+  VECTOR_WIDTH_PROFILE_MAX_SCALE,
+  VECTOR_WIDTH_SAME_T,
   VectorEditorController,
   VectorSnapTargets,
+  addBuilderHit,
   applyMatrix,
   applyMatrixLinear,
   applyVectorCornersAttribute,
@@ -6816,6 +8384,7 @@ export {
   createVectorCommands,
   curvatureMoveAnchor,
   cutSubpathAt,
+  dashIntervals,
   decomposeRigid,
   effectiveStrokeAlign,
   ellipseSubpath,
@@ -6826,6 +8395,7 @@ export {
   expandVectorCornersOf,
   findVectorNode,
   fitCornerRadius,
+  generateWidthProfile,
   getAnchor,
   getAnchorWorld,
   getEditablePathIds,
@@ -6836,6 +8406,7 @@ export {
   getVectorSelectionBoxGeometry,
   getVectorSelectionFrame,
   getVectorSelectionStyle,
+  getVectorWidthHandles,
   getVisibleAnchors,
   getVisibleHandles,
   hasPaint,
@@ -6846,46 +8417,61 @@ export {
   hitTestVectorStroke,
   inferAnchorType,
   insertAnchor,
+  insertWidthPoint,
   invertMatrix,
   isClosedBezierShape,
   isIdentityMatrix,
+  isUniformWidthProfile,
   isVectorTextTarget,
   joinSubpaths,
   knifePath,
   lineSubpath,
   locateVectorNode,
   matrixRotation,
+  mirrorWidthProfile,
   moveAnchorHandle,
   multiplyMatrices,
   nearestSegment,
+  nearestStrokePosition,
   nextVectorCornerKind,
   nodeMatrix,
   parseSvgTransform,
   parseVectorSvg,
+  planShapeBuilder,
   polygonSubpath,
   polylineBounds,
+  pressureWidthProfile,
   recognizeInkShape,
   rectSubpath,
   removeAnchorKeepingShape,
   removeAnchors,
   removeAnchorsKeepingShape,
   removeRedundantPoints,
+  removeWidthPoints,
   reverseSubpath,
+  reverseWidthProfile,
   rotateMatrix,
   roundSubpaths,
+  samplePolyline,
+  sanitizeWidthProfile,
   scaleFor,
   scaleMatrix,
   setAnchorCorner,
   setSubpathCorners,
+  setWidthPoint,
   simplifyPolyline,
   smoothSubpath,
   splitIntoFaces,
   splitSubpathAt,
   starSubpath,
+  strokePositionPoint,
+  strokeWidthProfileOf,
+  subpathEnclosesArea,
   subpathPointAt,
   subpathSegment,
   subpathSegmentCount,
   subpathsToBezier,
+  taperWaveFactor,
   toVectorKeyInput,
   toVectorModifiers,
   toVectorPointerInput,
@@ -6893,10 +8479,14 @@ export {
   translateAnchor,
   translateMatrix,
   unionBounds,
+  variableStrokeOutline,
+  variableStrokeRings,
   vectorCornerAt,
   vectorCorners,
   vectorCornersAttribute,
+  vectorDiamondPath,
   vectorDocumentToSvg,
+  vectorFillMap,
   vectorInkShapeName,
   vectorNodeBounds,
   vectorNodeRotation,
@@ -6905,15 +8495,28 @@ export {
   vectorPaintToSvg,
   vectorParentMatrix,
   vectorPathData,
+  vectorPathEntries,
   vectorPathWorldBezier,
+  vectorPathfinderShape,
   vectorResizeCursor,
+  vectorResultStyle,
+  vectorShapeBuilderHit,
+  vectorShapeBuilderMap,
+  vectorStrokeLineArea,
   vectorStrokeOutline,
   vectorStrokeOutlinePath,
   vectorStrokeParts,
   vectorStrokeReach,
   vectorStrokeSvgParts,
+  vectorStrokeWidthGeometry,
   vectorToolLabel,
   vectorWorldMatrix,
-  walkVectorNodes
+  walkVectorNodes,
+  widthProfileAt,
+  widthProfileFromAttribute,
+  widthProfileMaxScale,
+  widthProfilePreset,
+  widthProfilePresetId,
+  widthProfileToAttribute
 };
 //# sourceMappingURL=index.js.map