@pixerate/editor 0.40.0 → 0.42.0

package/dist/vector/index.js

@@ -18,6 +18,7 @@ import {
   hatchPath,
   isStraightCubic,
   normalizeBezierPath,
+  offsetPath,
   outlineStroke,
   pathBoolean,
   pathToContours,
@@ -39,10 +40,20 @@ import {
   trimSegments,
   windingNumber
 } from "../chunk-3LHWTGHW.js";
+import {
+  mixColorsOklab
+} from "../chunk-ZRJMJIQU.js";
+import {
+  evaluateEasing
+} from "../chunk-UB2OY7FD.js";
+import {
+  hexToRgba
+} from "../chunk-TGD52FEZ.js";
 
 // src/vector/types.ts
 var VECTOR_CORNER_KINDS = ["round", "inverted", "chamfer"];
 var VECTOR_ARROWHEADS = ["triangle", "arrow", "open", "circle", "square", "bar"];
+var VECTOR_BLEND_SPACINGS = ["steps", "distance", "smoothColor"];
 var VECTOR_TOOLS = [
   "select",
   "direct",
@@ -58,10 +69,13 @@ var VECTOR_TOOLS = [
   "eraser",
   "width",
   "shapeBuilder",
-  "paintBucket"
+  "paintBucket",
+  "blend"
 ];
 var VECTOR_TRANSFORM_HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w", "rotate"];
 var VECTOR_PATHFINDER_OPERATIONS = ["divide", "trim", "merge", "crop", "outline", "minusBack"];
+var VECTOR_EFFECT_TYPES = ["trim", "roundCorners", "puckerBloat", "twist", "zigzag", "wiggle", "offset", "merge", "repeater"];
+var VECTOR_MERGE_MODES = ["merge", "add", "subtract", "intersect", "exclude"];
 
 // src/vector/corners.ts
 var EPS = 1e-9;
@@ -1031,8 +1045,872 @@ function vectorStrokeReach(style) {
   return reach;
 }
 
-// src/vector/geometry.ts
+// src/vector/pathEffects.ts
 var EPS2 = 1e-9;
+var degenerate = (s) => s.every((p) => Math.abs(p[0] - s[0][0]) < EPS2 && Math.abs(p[1] - s[0][1]) < EPS2);
+function raise(seg) {
+  if (seg.length !== 3) return seg.map((p) => [p[0], p[1]]);
+  const [p0, p1, p2] = seg;
+  return [p0, [p0[0] + 2 / 3 * (p1[0] - p0[0]), p0[1] + 2 / 3 * (p1[1] - p0[1])], [p2[0] + 2 / 3 * (p1[0] - p2[0]), p2[1] + 2 / 3 * (p1[1] - p2[1])], p2];
+}
+function subsOf(path) {
+  return pathToContours(path).map((c) => ({ segs: closeContour(c).filter((s) => !degenerate(s)).map(raise), closed: c.closed })).filter((s) => s.segs.length > 0);
+}
+var subsToPath = (subs) => contoursToPath(subs.map((s) => ({ segments: s.segs, closed: s.closed })));
+var unit2 = (x, y) => {
+  const l = Math.hypot(x, y);
+  return l > 1e-12 && Number.isFinite(l) ? [x / l, y / l] : null;
+};
+function startTangent(s) {
+  for (let i = 1; i < s.length; i++) {
+    const u = unit2(s[i][0] - s[0][0], s[i][1] - s[0][1]);
+    if (u) return u;
+  }
+  return [1, 0];
+}
+function endTangent(s) {
+  const end = s[s.length - 1];
+  for (let i = s.length - 2; i >= 0; i--) {
+    const u = unit2(end[0] - s[i][0], end[1] - s[i][1]);
+    if (u) return u;
+  }
+  return [1, 0];
+}
+function tangentAt(s, t) {
+  if (t <= 1e-9) return startTangent(s);
+  if (t >= 1 - 1e-9) return endTangent(s);
+  const d = segmentDerivative(s, t);
+  return unit2(d[0], d[1]) ?? startTangent(s);
+}
+var perp = (v2) => [-v2[1], v2[0]];
+function effectPathLength(path) {
+  let total = 0;
+  for (const s of subsOf(path)) for (const seg of s.segs) total += segmentLength(seg);
+  return total;
+}
+function effectPathVertexCount(path) {
+  return subsOf(path).reduce((n, s) => n + s.segs.length + (s.closed ? 0 : 1), 0);
+}
+var Measured = class {
+  segs;
+  lens;
+  total;
+  constructor(path) {
+    this.segs = subsOf(path).flatMap((s) => s.segs);
+    this.lens = this.segs.map((s) => segmentLength(s));
+    this.total = this.lens.reduce((a, b) => a + b, 0);
+  }
+  /**
+   * Appends the part between lengths `sa` and `sb`, continuing the last piece when this one
+   * starts where it ends (across the start of a closed path).
+   */
+  append(sa, sb, out) {
+    for (const piece of trimSegments(this.segs, sa, sb, this.lens)) {
+      if (degenerate(piece)) continue;
+      const last = out[out.length - 1]?.segs;
+      const end = last?.[last.length - 1]?.at(-1);
+      if (!end || Math.hypot(end[0] - piece[0][0], end[1] - piece[0][1]) > 1e-6) out.push({ segs: [piece], closed: false });
+      else last.push(piece);
+    }
+  }
+};
+function trimIntervals(start, end, offsetDegrees) {
+  let s = start / 100;
+  let e = end / 100;
+  if (!Number.isFinite(s) || !Number.isFinite(e)) return null;
+  if (s > e) [s, e] = [e, s];
+  s = Math.min(1, Math.max(0, s));
+  e = Math.min(1, Math.max(0, e));
+  if (e - s >= 1 - 1e-9) return null;
+  if (e - s <= 1e-9) return [];
+  const off = Number.isFinite(offsetDegrees) ? (offsetDegrees / 360 % 1 + 1) % 1 : 0;
+  s += off;
+  e += off;
+  if (e <= 1) return [[s, e]];
+  if (s >= 1) return [[s - 1, e - 1]];
+  return [
+    [s, 1],
+    [0, e - 1]
+  ];
+}
+function trimPaths(paths, start, end, offsetDegrees = 0) {
+  const iv = trimIntervals(start, end, offsetDegrees);
+  if (!iv) return paths.slice();
+  return paths.map((p) => {
+    const m = new Measured(p);
+    const out = [];
+    if (m.total > 0) for (const [a, b] of iv) m.append(a * m.total, b * m.total, out);
+    return subsToPath(out);
+  });
+}
+function trimPathsIndividually(paths, start, end, offsetDegrees = 0) {
+  const iv = trimIntervals(start, end, offsetDegrees);
+  if (!iv) return paths.slice();
+  const ms = paths.map((p) => new Measured(p));
+  const total = ms.reduce((n, m) => n + m.total, 0);
+  let base = 0;
+  return ms.map((m) => {
+    const out = [];
+    for (const [a, b] of iv) {
+      const la = Math.max(0, a * total - base);
+      const lb = Math.min(m.total, b * total - base);
+      if (lb > la) m.append(la, lb, out);
+    }
+    base += m.total;
+    return subsToPath(out);
+  });
+}
+function puckerBloatPaths(paths, amount) {
+  const a = amount / 100;
+  if (!a || !Number.isFinite(a)) return paths.slice();
+  return paths.map((p) => {
+    const verts = p.filter((c) => c.type !== "Z");
+    if (!verts.length) return p;
+    const cx = verts.reduce((s, c) => s + c.x, 0) / verts.length;
+    const cy = verts.reduce((s, c) => s + c.y, 0) / verts.length;
+    const mv = (x, y) => ({ x: x + (cx - x) * a, y: y + (cy - y) * a });
+    const mvh = (x, y) => ({ x: x + (x - cx) * a, y: y + (y - cy) * a });
+    const out = [];
+    let prev = { x: 0, y: 0 };
+    let start = { x: 0, y: 0 };
+    const curve = (c1, c2, q) => {
+      const h1 = mvh(c1.x, c1.y);
+      const h2 = mvh(c2.x, c2.y);
+      const e = mv(q.x, q.y);
+      out.push({ type: "C", x1: h1.x, y1: h1.y, x2: h2.x, y2: h2.y, x: e.x, y: e.y });
+    };
+    for (const c of p) {
+      switch (c.type) {
+        case "M": {
+          const e = mv(c.x, c.y);
+          out.push({ type: "M", x: e.x, y: e.y });
+          prev = start = { x: c.x, y: c.y };
+          break;
+        }
+        case "L":
+          curve(prev, c, c);
+          prev = { x: c.x, y: c.y };
+          break;
+        case "Q": {
+          const c1 = { x: prev.x + 2 / 3 * (c.x1 - prev.x), y: prev.y + 2 / 3 * (c.y1 - prev.y) };
+          const c2 = { x: c.x + 2 / 3 * (c.x1 - c.x), y: c.y + 2 / 3 * (c.y1 - c.y) };
+          curve(c1, c2, c);
+          prev = { x: c.x, y: c.y };
+          break;
+        }
+        case "C":
+          curve({ x: c.x1, y: c.y1 }, { x: c.x2, y: c.y2 }, c);
+          prev = { x: c.x, y: c.y };
+          break;
+        case "Z":
+          if (Math.hypot(prev.x - start.x, prev.y - start.y) > EPS2) curve(prev, start, start);
+          out.push({ type: "Z" });
+          prev = start;
+          break;
+      }
+    }
+    return out;
+  });
+}
+function roundCornerPaths(paths, radius) {
+  if (!(radius > 0) || !Number.isFinite(radius)) return paths.slice();
+  return paths.map((p) => subpathsToBezier(bezierToSubpaths(p).map((sp) => setSubpathCorners(sp, radius))));
+}
+function offsetPaths(paths, amount, join = "miter", miterLimit = 4, copies = 1, copyOffset = 0) {
+  const n = Math.min(1e3, Math.max(1, Math.round(Number.isFinite(copies) ? copies : 1)));
+  return paths.map((p) => {
+    const out = [];
+    for (let i = 0; i < n; i++) out.push(...offsetPath(p, amount * (i + 1 + copyOffset), { join, miterLimit }));
+    return out;
+  });
+}
+function twistPaths(paths, angle, center) {
+  let rmax = 0;
+  for (const p of paths) for (const c of p) if (c.type !== "Z") rmax = Math.max(rmax, Math.hypot(c.x - center.x, c.y - center.y));
+  const a = angle * Math.PI / 180;
+  if (!a || rmax <= 1e-9 || !Number.isFinite(a)) return paths.slice();
+  const k = a / rmax;
+  const rot = (v2, th) => {
+    const s = Math.sin(th);
+    const co = Math.cos(th);
+    return [v2[0] * co - v2[1] * s, v2[0] * s + v2[1] * co];
+  };
+  const map = (p) => {
+    const v2 = [p[0] - center.x, p[1] - center.y];
+    const r = rot(v2, k * Math.hypot(v2[0], v2[1]));
+    return [center.x + r[0], center.y + r[1]];
+  };
+  const jac = (p, dv) => {
+    const v2 = [p[0] - center.x, p[1] - center.y];
+    const r = Math.hypot(v2[0], v2[1]);
+    let w = dv;
+    if (r > 1e-12) {
+      const f = k * (v2[0] * dv[0] + v2[1] * dv[1]) / r;
+      w = [dv[0] - v2[1] * f, dv[1] + v2[0] * f];
+    }
+    return rot(w, k * r);
+  };
+  return paths.map((p) => {
+    const out = [];
+    for (const sub3 of subsOf(p)) {
+      const segs = [];
+      for (const seg of sub3.segs) {
+        const cubic = seg.length === 2 ? [seg[0], seg[0], seg[1], seg[1]] : seg;
+        const len2 = segmentLength(seg);
+        const m = Math.min(64, Math.max(1, Math.ceil(Math.abs(a) * len2 / rmax / 0.15 + len2 / 50)));
+        for (let i = 0; i < m; i++) {
+          const q = subSegment(cubic, i / m, (i + 1) / m);
+          const p0 = map(q[0]);
+          const p3 = map(q[3]);
+          const h1 = jac(q[0], [q[1][0] - q[0][0], q[1][1] - q[0][1]]);
+          const h2 = jac(q[3], [q[2][0] - q[3][0], q[2][1] - q[3][1]]);
+          segs.push([p0, [p0[0] + h1[0], p0[1] + h1[1]], [p3[0] + h2[0], p3[1] + h2[1]], p3]);
+        }
+      }
+      out.push({ segs, closed: sub3.closed });
+    }
+    return subsToPath(out);
+  });
+}
+function resample(sub3, m) {
+  const segs = sub3.segs;
+  const n = segs.length;
+  const lens = segs.map((s) => segmentLength(s));
+  const out = [];
+  for (let j = 0; j < n; j++) {
+    const piece = lens[j] / m;
+    for (let k = 0; k < m; k++) {
+      if (k === 0) {
+        const tout = startTangent(segs[j]);
+        const prev = sub3.closed || j > 0 ? (j + n - 1) % n : null;
+        let tan = tout;
+        if (prev !== null) {
+          const tin = endTangent(segs[prev]);
+          tan = unit2(tin[0] + tout[0], tin[1] + tout[1]) ?? tout;
+        }
+        out.push({ p: segs[j][0], tan, lenPrev: prev === null ? 0 : lens[prev] / m, lenNext: piece });
+      } else {
+        const t = segmentParamAtLength(segs[j], piece * k, lens[j]);
+        out.push({ p: segmentPoint(segs[j], t), tan: tangentAt(segs[j], t), lenPrev: piece, lenNext: piece });
+      }
+    }
+  }
+  if (!sub3.closed) {
+    const last = segs[n - 1];
+    out.push({ p: last[last.length - 1], tan: endTangent(last), lenPrev: lens[n - 1] / m, lenNext: 0 });
+  }
+  return out;
+}
+function emit(samples, disp, closed, smooth, handle) {
+  const n = samples.length;
+  if (!n) return null;
+  const pt2 = (i) => [samples[i].p[0] + disp[i][0], samples[i].p[1] + disp[i][1]];
+  const segs = [];
+  const count = closed ? n : n - 1;
+  for (let i = 0; i < count; i++) {
+    const j = (i + 1) % n;
+    const a = samples[i];
+    const b = samples[j];
+    const p = pt2(i);
+    const q = pt2(j);
+    if (smooth) segs.push([p, [p[0] + a.tan[0] * a.lenNext * handle, p[1] + a.tan[1] * a.lenNext * handle], [q[0] - b.tan[0] * b.lenPrev * handle, q[1] - b.tan[1] * b.lenPrev * handle], q]);
+    else segs.push([p, q]);
+  }
+  if (!segs.length) return null;
+  return { segs, closed };
+}
+function zigzagPaths(paths, size, ridges, smooth = false) {
+  const m = Math.min(1e3, Math.max(0, Math.round(Number.isFinite(ridges) ? ridges : 0))) + 1;
+  return paths.map((p) => {
+    const out = [];
+    for (const sub3 of subsOf(p)) {
+      const s = resample(sub3, m);
+      const disp = s.map((x, i) => {
+        const n = perp(x.tan);
+        const d = i % 2 === 0 ? size : -size;
+        return [n[0] * d, n[1] * d];
+      });
+      const e = emit(s, disp, sub3.closed, smooth, 0.36);
+      if (e) out.push(e);
+    }
+    return subsToPath(out);
+  });
+}
+var MASK64 = (1n << 64n) - 1n;
+function splitmix(x) {
+  x = x + 0x9e3779b97f4a7c15n & MASK64;
+  let z = x;
+  z = (z ^ z >> 30n) * 0xbf58476d1ce4e5b9n & MASK64;
+  z = (z ^ z >> 27n) * 0x94d049bb133111ebn & MASK64;
+  return z ^ z >> 31n;
+}
+function hash(seed, idx, t) {
+  const h = splitmix(splitmix(splitmix(seed) ^ idx) ^ BigInt.asUintN(64, BigInt(t)));
+  return Number(h >> 11n) / 2 ** 53 * 2 - 1;
+}
+function noise(seed, idx, t) {
+  const i = Math.floor(t);
+  const f = t - i;
+  const p0 = hash(seed, idx, i - 1);
+  const p1 = hash(seed, idx, i);
+  const p2 = hash(seed, idx, i + 1);
+  const p3 = hash(seed, idx, i + 2);
+  const v2 = 0.5 * (2 * p1 + (-p0 + p2) * f + (2 * p0 - 5 * p1 + 4 * p2 - p3) * f * f + (-p0 + 3 * p1 - 3 * p2 + p3) * f * f * f);
+  return Math.min(1, Math.max(-1, v2));
+}
+function wigglePaths(paths, w) {
+  if (!w.size || !Number.isFinite(w.size)) return paths.slice();
+  const m = Math.min(1e3, Math.max(0, Math.round(Number.isFinite(w.detail) ? w.detail : 0))) + 1;
+  const seed = BigInt.asUintN(64, BigInt(Math.round(Number.isFinite(w.seed) ? w.seed : 0)));
+  const t = (Number.isFinite(w.time) ? w.time : 0) * (Number.isFinite(w.speed) ? w.speed : 0) + (Number.isFinite(w.phase) ? w.phase : 0) / 360;
+  const corr = Math.min(1, Math.max(0, (Number.isFinite(w.correlation) ? w.correlation : 0) / 100));
+  const sx = noise(seed, MASK64, t);
+  const sy = noise(seed, MASK64 - 1n, t);
+  let idx = 0;
+  return paths.map((p) => {
+    const out = [];
+    for (const sub3 of subsOf(p)) {
+      const s = resample(sub3, m);
+      const disp = s.map(() => {
+        const i = BigInt(idx);
+        const ox = noise(seed, i * 2n, t + idx * 0.37);
+        const oy = noise(seed, i * 2n + 1n, t + idx * 0.61);
+        idx++;
+        return [(sx * corr + ox * (1 - corr)) * w.size, (sy * corr + oy * (1 - corr)) * w.size];
+      });
+      const e = emit(s, disp, sub3.closed, w.smooth, 1 / 3);
+      if (e) out.push(e);
+    }
+    return subsToPath(out);
+  });
+}
+var MERGE_OPS = { add: "union", subtract: "difference", intersect: "intersection", exclude: "xor" };
+function mergePaths(paths, mode = "merge") {
+  if (mode === "merge" || !(mode in MERGE_OPS)) return paths.flat();
+  const inputs = paths.filter((p) => p.length > 0).map((path) => ({ path, fillRule: "nonzero" }));
+  if (!inputs.length) return [];
+  return pathBoolean(MERGE_OPS[mode], inputs).path;
+}
+function vectorRepeaterCopies(r, pivot) {
+  const copies = Math.max(0, Number.isFinite(r.copies) ? Math.min(r.copies, 1e3) : 0);
+  const n = Math.ceil(copies);
+  const offset = Number.isFinite(r.offset) ? r.offset : 0;
+  const so = (r.startOpacity ?? 100) / 100;
+  const eo = (r.endOpacity ?? 100) / 100;
+  const fract = copies - Math.floor(copies);
+  const out = [];
+  for (let i = 0; i < n; i++) {
+    const k = i + offset;
+    let m = translateMatrix(-pivot.x, -pivot.y);
+    m = multiplyMatrices(m, scaleMatrix(Math.pow((r.scale?.x ?? 100) / 100, k), Math.pow((r.scale?.y ?? 100) / 100, k)));
+    m = multiplyMatrices(m, rotateMatrix((r.rotation ?? 0) * k));
+    m = multiplyMatrices(m, translateMatrix(pivot.x + (r.position?.x ?? 0) * k, pivot.y + (r.position?.y ?? 0) * k));
+    const t = n > 1 ? i / (n - 1) : 0;
+    const partial = i + 1 === n && fract > 0 ? fract : 1;
+    out.push({ index: i, matrix: m, opacity: Math.min(1, Math.max(0, (so + (eo - so) * t) * partial)) });
+  }
+  return out;
+}
+function repeatPaths(paths, r, pivot) {
+  return vectorRepeaterCopies(r, pivot).map((copy) => ({ copy, paths: paths.map((p) => transformBezierPath(p, copy.matrix)) }));
+}
+function pathsCenter(paths) {
+  const b = bezierPathBounds(paths.flat());
+  return b ? { x: (b.minX + b.maxX) / 2, y: (b.minY + b.maxY) / 2 } : { x: 0, y: 0 };
+}
+
+// src/vector/appearance.ts
+var VECTOR_EFFECT_DEFAULTS = {
+  trim: { start: 0, end: 50, offset: 0, mode: "simultaneous" },
+  roundCorners: { radius: 10 },
+  puckerBloat: { amount: 30 },
+  twist: { angle: 45, center: { x: 0, y: 0 } },
+  zigzag: { size: 5, ridges: 4, smooth: false },
+  wiggle: { size: 5, detail: 6, smooth: true, speed: 2, correlation: 50, phase: 0, seed: 1, time: 0 },
+  offset: { amount: 5, join: "miter", miterLimit: 4, copies: 1, copyOffset: 0 },
+  merge: { mode: "add" },
+  repeater: {
+    copies: 3,
+    offset: 0,
+    position: { x: 100, y: 0 },
+    anchor: { x: 0, y: 0 },
+    rotation: 0,
+    scale: { x: 100, y: 100 },
+    startOpacity: 100,
+    endOpacity: 100,
+    composite: "below"
+  }
+};
+var VECTOR_EFFECT_LABELS = {
+  trim: "Trim Paths",
+  roundCorners: "Round Corners",
+  puckerBloat: "Pucker & Bloat",
+  twist: "Twist",
+  zigzag: "Zig Zag",
+  wiggle: "Wiggle Paths",
+  offset: "Offset Paths",
+  merge: "Merge Paths",
+  repeater: "Repeater"
+};
+var VECTOR_EFFECT_PARAM_SPECS = {
+  trim: [
+    { key: "start", label: "Start %", kind: "number", min: 0, max: 100, step: 1, slider: true },
+    { key: "end", label: "End %", kind: "number", min: 0, max: 100, step: 1, slider: true },
+    { key: "offset", label: "Offset \xB0", kind: "number", min: -360, max: 360, step: 1, slider: true },
+    {
+      key: "mode",
+      label: "Paths",
+      kind: "select",
+      options: [
+        { value: "simultaneous", label: "Simultaneously" },
+        { value: "individual", label: "Individually" }
+      ]
+    }
+  ],
+  roundCorners: [{ key: "radius", label: "Radius", kind: "number", min: 0, max: 200, step: 1, slider: true }],
+  puckerBloat: [{ key: "amount", label: "Amount %", kind: "number", min: -100, max: 100, step: 1, slider: true }],
+  twist: [
+    { key: "angle", label: "Angle \xB0", kind: "number", min: -720, max: 720, step: 1, slider: true },
+    { key: "center", label: "Centre", kind: "vec2", step: 1 }
+  ],
+  zigzag: [
+    { key: "size", label: "Size", kind: "number", min: 0, max: 100, step: 0.5, slider: true },
+    { key: "ridges", label: "Ridges", kind: "number", min: 0, max: 50, step: 1, slider: true },
+    { key: "smooth", label: "Smooth", kind: "boolean" }
+  ],
+  wiggle: [
+    { key: "size", label: "Size", kind: "number", min: 0, max: 100, step: 0.5, slider: true },
+    { key: "detail", label: "Detail", kind: "number", min: 0, max: 50, step: 1, slider: true },
+    { key: "smooth", label: "Smooth", kind: "boolean" },
+    { key: "correlation", label: "Correlation %", kind: "number", min: 0, max: 100, step: 1, slider: true },
+    { key: "speed", label: "Speed", kind: "number", min: 0, step: 0.1 },
+    { key: "phase", label: "Phase \xB0", kind: "number", step: 1 },
+    { key: "time", label: "Time (s)", kind: "number", min: 0, max: 10, step: 0.05, slider: true },
+    { key: "seed", label: "Seed", kind: "number", step: 1 }
+  ],
+  offset: [
+    { key: "amount", label: "Amount", kind: "number", min: -100, max: 100, step: 0.5, slider: true },
+    {
+      key: "join",
+      label: "Join",
+      kind: "select",
+      options: [
+        { value: "miter", label: "Miter" },
+        { value: "round", label: "Round" },
+        { value: "bevel", label: "Bevel" }
+      ]
+    },
+    { key: "miterLimit", label: "Miter limit", kind: "number", min: 1, step: 0.5 },
+    { key: "copies", label: "Copies", kind: "number", min: 1, max: 20, step: 1 },
+    { key: "copyOffset", label: "Copy offset", kind: "number", step: 0.5 }
+  ],
+  merge: [
+    {
+      key: "mode",
+      label: "Mode",
+      kind: "select",
+      options: [
+        { value: "merge", label: "Merge" },
+        { value: "add", label: "Add" },
+        { value: "subtract", label: "Subtract" },
+        { value: "intersect", label: "Intersect" },
+        { value: "exclude", label: "Exclude" }
+      ]
+    }
+  ],
+  repeater: [
+    { key: "copies", label: "Copies", kind: "number", min: 0, max: 50, step: 0.1, slider: true },
+    { key: "offset", label: "Offset", kind: "number", min: -10, max: 10, step: 0.1, slider: true },
+    { key: "position", label: "Position", kind: "vec2", step: 1 },
+    { key: "anchor", label: "Anchor", kind: "vec2", step: 1 },
+    { key: "rotation", label: "Rotation \xB0", kind: "number", min: -360, max: 360, step: 1, slider: true },
+    { key: "scale", label: "Scale %", kind: "vec2", step: 1 },
+    { key: "startOpacity", label: "Start opacity %", kind: "number", min: 0, max: 100, step: 1, slider: true },
+    { key: "endOpacity", label: "End opacity %", kind: "number", min: 0, max: 100, step: 1, slider: true },
+    {
+      key: "composite",
+      label: "Copies",
+      kind: "select",
+      options: [
+        { value: "below", label: "Below" },
+        { value: "above", label: "Above" }
+      ]
+    }
+  ]
+};
+var isVec2 = (v2) => !!v2 && typeof v2 === "object" && Number.isFinite(v2.x) && Number.isFinite(v2.y);
+function normalizeVectorEffectParams(type, params, base) {
+  const defaults = VECTOR_EFFECT_DEFAULTS[type];
+  if (!defaults) return null;
+  const out = { ...defaults, ...base ?? {} };
+  for (const spec of VECTOR_EFFECT_PARAM_SPECS[type]) {
+    const v2 = params?.[spec.key];
+    if (v2 === void 0) continue;
+    if (spec.kind === "number" && typeof v2 === "number" && Number.isFinite(v2)) out[spec.key] = Math.min(spec.max ?? Infinity, Math.max(spec.min ?? -Infinity, v2));
+    else if (spec.kind === "boolean" && typeof v2 === "boolean") out[spec.key] = v2;
+    else if (spec.kind === "vec2" && isVec2(v2)) out[spec.key] = { x: v2.x, y: v2.y };
+    else if (spec.kind === "select" && spec.options.some((o) => o.value === v2)) out[spec.key] = v2;
+  }
+  return out;
+}
+function createVectorEffect(type, id, params) {
+  const p = normalizeVectorEffectParams(type, params);
+  return p ? { id, type, params: p } : null;
+}
+var isEnabled = (e) => e.enabled !== false && !!VECTOR_EFFECT_DEFAULTS[e.type];
+function activeVectorEffects(node) {
+  return node.effects?.filter(isEnabled) ?? [];
+}
+function hasOwnVectorAppearance(node) {
+  return node.type === "group" && !!node.liveBoolean || !!node.effects?.some(isEnabled);
+}
+var liveCache = /* @__PURE__ */ new WeakMap();
+function hasVectorAppearance(node) {
+  let v2 = liveCache.get(node);
+  if (v2 === void 0) {
+    v2 = hasOwnVectorAppearance(node) || node.type === "group" && node.children.some(hasVectorAppearance);
+    liveCache.set(node, v2);
+  }
+  return v2;
+}
+function isVectorLiveBoolean(node) {
+  return node?.type === "group" && !!node.liveBoolean;
+}
+function vectorOperandOperation(group, child) {
+  return child.booleanOperation ?? group.liveBoolean ?? "union";
+}
+var PATH_OPS = { union: "union", subtract: "difference", intersect: "intersection", exclude: "xor" };
+var FoldCache = class {
+  constructor(cap) {
+    this.cap = cap;
+  }
+  cap;
+  map = /* @__PURE__ */ new Map();
+  get(key) {
+    const hit = this.map.get(key);
+    if (hit) {
+      this.map.delete(key);
+      this.map.set(key, hit);
+    }
+    return hit;
+  }
+  set(key, path) {
+    if (this.map.size >= this.cap) {
+      let drop = Math.floor(this.map.size / 2);
+      for (const k of this.map.keys()) {
+        if (drop-- <= 0) break;
+        this.map.delete(k);
+      }
+    }
+    this.map.set(key, path);
+  }
+  clear() {
+    this.map.clear();
+  }
+};
+var foldCache = new FoldCache(4096);
+var foldSteps = 0;
+function vectorLiveBooleanSteps() {
+  return foldSteps;
+}
+function clearVectorLiveBooleanCache() {
+  foldCache.clear();
+}
+var RollingHash = class _RollingHash {
+  a = 2166136261;
+  b = 16777619 ^ 1540483477;
+  static view = new DataView(new ArrayBuffer(8));
+  byte(v2) {
+    this.a = Math.imul(this.a ^ v2 & 255, 16777619);
+    this.b = Math.imul(this.b ^ v2 & 255, 1540483477) ^ this.b >>> 15;
+  }
+  num(n) {
+    _RollingHash.view.setFloat64(0, n);
+    for (let i = 0; i < 8; i++) this.byte(_RollingHash.view.getUint8(i));
+  }
+  path(p) {
+    for (const c of p) {
+      this.byte(c.type.charCodeAt(0));
+      if (c.type === "Z") continue;
+      if (c.type === "C") {
+        this.num(c.x1);
+        this.num(c.y1);
+        this.num(c.x2);
+        this.num(c.y2);
+      } else if (c.type === "Q") {
+        this.num(c.x1);
+        this.num(c.y1);
+      }
+      this.num(c.x);
+      this.num(c.y);
+    }
+  }
+  key() {
+    return `${(this.a >>> 0).toString(36)}.${(this.b >>> 0).toString(36)}`;
+  }
+};
+function foldVectorBooleanOperands(operands) {
+  if (!operands.length) return [];
+  if (operands.length === 1) return operands[0].path;
+  const h = new RollingHash();
+  const keys = operands.map((o, i) => {
+    if (i > 0) h.byte(o.operation.charCodeAt(0) + o.operation.length);
+    h.byte(o.fillRule === "evenodd" ? 1 : 0);
+    h.path(o.path);
+    h.byte(9);
+    return h.key();
+  });
+  let start = 0;
+  let acc = operands[0].path;
+  for (let i = keys.length - 1; i >= 1; i--) {
+    const hit = foldCache.get(keys[i]);
+    if (hit) {
+      if (i === keys.length - 1) return hit;
+      start = i;
+      acc = hit;
+      break;
+    }
+  }
+  let accRule = start === 0 ? operands[0].fillRule : "nonzero";
+  for (let i = start + 1; i < operands.length; i++) {
+    const o = operands[i];
+    foldSteps++;
+    const r = pathBoolean(PATH_OPS[o.operation] ?? "union", [
+      { path: acc, fillRule: accRule },
+      { path: o.path, fillRule: o.fillRule }
+    ]);
+    if (r.error) return [];
+    acc = r.path;
+    accRule = "nonzero";
+    foldCache.set(keys[i], acc);
+  }
+  return acc;
+}
+var compareOrder = (a, b) => {
+  const n = Math.min(a.length, b.length);
+  for (let i = 0; i < n; i++) if (a[i] !== b[i]) return a[i] - b[i];
+  return a.length - b.length;
+};
+var add2 = (a, b) => ({ x: a.x + (b?.x ?? 0), y: a.y + (b?.y ?? 0) });
+var mapPaths = (shapes, fn) => {
+  const out = fn(shapes.map((s) => s.path));
+  return shapes.map((s, i) => ({ ...s, path: out[i] ?? [] }));
+};
+function applyVectorEffects(shapes, effects) {
+  let list = shapes.slice();
+  for (const e of effects ?? []) {
+    if (!isEnabled(e) || !list.length) continue;
+    switch (e.type) {
+      case "trim": {
+        const { start, end, offset, mode } = e.params;
+        list = mapPaths(list, (p) => mode === "individual" ? trimPathsIndividually(p, start, end, offset) : trimPaths(p, start, end, offset));
+        break;
+      }
+      case "roundCorners":
+        list = mapPaths(list, (p) => roundCornerPaths(p, e.params.radius));
+        break;
+      case "puckerBloat":
+        list = mapPaths(list, (p) => puckerBloatPaths(p, e.params.amount));
+        break;
+      case "twist":
+        list = mapPaths(list, (p) => twistPaths(p, e.params.angle, add2(pathsCenter(p), e.params.center)));
+        break;
+      case "zigzag":
+        list = mapPaths(list, (p) => zigzagPaths(p, e.params.size, e.params.ridges, e.params.smooth));
+        break;
+      case "wiggle":
+        list = mapPaths(list, (p) => wigglePaths(p, e.params));
+        break;
+      case "offset": {
+        const o = e.params;
+        list = mapPaths(list, (p) => offsetPaths(p, o.amount, o.join, o.miterLimit, o.copies, o.copyOffset));
+        break;
+      }
+      case "merge": {
+        const first = list[0];
+        list = [{ ...first, path: mergePaths(list.map((s) => s.path), e.params.mode) }];
+        break;
+      }
+      case "repeater": {
+        const r = e.params;
+        const copies = repeatPaths(
+          list.map((s) => s.path),
+          r,
+          add2(pathsCenter(list.map((s) => s.path)), r.anchor)
+        );
+        const n = copies.length;
+        const next = [];
+        for (const { copy, paths } of copies) {
+          const rank = r.composite === "above" ? copy.index : n - 1 - copy.index;
+          list.forEach((s, i) => next.push({ source: s.source, path: paths[i], opacity: s.opacity * copy.opacity, order: [rank, ...s.order] }));
+        }
+        list = next;
+        break;
+      }
+    }
+  }
+  return list;
+}
+function childShapes(child, index) {
+  if (child.visible === false) return [];
+  const m = child.transform;
+  const k = child.opacity ?? 1;
+  return vectorAppearanceShapes(child).map((s) => ({
+    source: s.source,
+    path: m && !isIdentityMatrix(m) ? transformBezierPath(s.path, m) : s.path,
+    opacity: s.opacity * k,
+    order: [index, ...s.order]
+  }));
+}
+function liveBooleanShapes(group) {
+  const operands = [];
+  let source = null;
+  group.children.forEach((child, i) => {
+    const shapes = childShapes(child, i);
+    if (!shapes.length) return;
+    source ??= shapes[0].source;
+    const path = shapes.length === 1 ? shapes[0].path : pathBoolean("union", shapes.map((s) => ({ path: s.path, fillRule: s.source.fillRule ?? "nonzero" }))).path;
+    const fillRule = shapes.length === 1 ? shapes[0].source.fillRule ?? "nonzero" : "nonzero";
+    operands.push({ path, fillRule, operation: vectorOperandOperation(group, child) });
+  });
+  if (!source) return [];
+  return [{ source, path: foldVectorBooleanOperands(operands), opacity: 1, order: [0] }];
+}
+var shapeCache = /* @__PURE__ */ new WeakMap();
+function vectorAppearanceShapes(node) {
+  const hit = shapeCache.get(node);
+  if (hit) return hit;
+  let base;
+  if (node.type === "path") base = [{ source: node, path: subpathsToBezier(node.subpaths), opacity: 1, order: [] }];
+  else if (node.liveBoolean) base = liveBooleanShapes(node);
+  else base = node.children.flatMap((c, i) => childShapes(c, i));
+  const out = applyVectorEffects(base, node.effects).sort((a, b) => compareOrder(a.order, b.order));
+  shapeCache.set(node, out);
+  return out;
+}
+var outlineCache = /* @__PURE__ */ new WeakMap();
+function vectorAppearanceOutline(node) {
+  let hit = outlineCache.get(node);
+  if (!hit) {
+    hit = node.type === "path" && !hasOwnVectorAppearance(node) ? subpathsToBezier(node.subpaths) : vectorAppearanceShapes(node).flatMap((s) => s.path);
+    outlineCache.set(node, hit);
+  }
+  return hit;
+}
+function shapeNode(shape, id) {
+  const {
+    id: _id,
+    type: _type,
+    subpaths: _s,
+    transform: _t,
+    effects: _e,
+    booleanOperation: _b,
+    blendStep: _bs,
+    locked: _l,
+    visible: _v,
+    opacity: _o,
+    ...style
+  } = shape.source;
+  return { ...style, id, type: "path", subpaths: bezierToSubpaths(shape.path), ...shape.opacity < 1 ? { opacity: shape.opacity } : {} };
+}
+function placement(node) {
+  return {
+    ...node.name !== void 0 ? { name: node.name } : {},
+    ...node.transform ? { transform: node.transform } : {},
+    ...node.visible === false ? { visible: false } : {},
+    ...node.locked ? { locked: true } : {},
+    ...node.blendStep ? { blendStep: true } : {},
+    ...node.booleanOperation ? { booleanOperation: node.booleanOperation } : {}
+  };
+}
+function vectorAppearanceNodes(node) {
+  return vectorAppearanceShapes(node).map((s, k) => shapeNode(s, `${node.id}~fx${k}`));
+}
+var expandCache = /* @__PURE__ */ new WeakMap();
+function expandVectorAppearance(node) {
+  if (!hasVectorAppearance(node)) return node;
+  const hit = expandCache.get(node);
+  if (hit) return hit;
+  let out;
+  if (!hasOwnVectorAppearance(node)) {
+    const group = node;
+    out = { ...group, children: group.children.map(expandVectorAppearance) };
+  } else {
+    const shapes = vectorAppearanceShapes(node);
+    if (node.type === "path" && shapes.length === 1) {
+      const one = shapes[0];
+      const { effects: _e, opacity: _o, ...rest } = node;
+      const opacity = (node.opacity ?? 1) * one.opacity;
+      out = { ...rest, subpaths: bezierToSubpaths(one.path), ...opacity < 1 ? { opacity } : {} };
+    } else {
+      out = {
+        id: node.id,
+        type: "group",
+        ...placement(node),
+        ...node.opacity !== void 0 ? { opacity: node.opacity } : {},
+        children: vectorAppearanceNodes(node)
+      };
+    }
+  }
+  expandCache.set(node, out);
+  return out;
+}
+function expandVectorAppearances(nodes) {
+  let changed = false;
+  const out = nodes.map((n) => {
+    const e = expandVectorAppearance(n);
+    if (e !== n) changed = true;
+    return e;
+  });
+  return changed ? out : nodes;
+}
+function sanitizeVectorEffects(value) {
+  if (!Array.isArray(value)) return [];
+  const out = [];
+  const used = /* @__PURE__ */ new Set();
+  for (const raw of value) {
+    if (!raw || typeof raw !== "object") continue;
+    const r = raw;
+    const type = r.type;
+    if (typeof type !== "string" || !VECTOR_EFFECT_DEFAULTS[type]) continue;
+    let id = typeof r.id === "string" && r.id && !used.has(r.id) ? r.id : "";
+    for (let k = out.length + 1; !id; k++) if (!used.has(`fx${k}`)) id = `fx${k}`;
+    used.add(id);
+    const effect = createVectorEffect(type, id, r.params ?? {});
+    out.push(r.enabled === false ? { ...effect, enabled: false } : effect);
+  }
+  return out;
+}
+function transformVectorEffects(effects, m) {
+  const lin = (v2) => ({ x: m[0] * v2.x + m[2] * v2.y, y: m[1] * v2.x + m[3] * v2.y });
+  const mirror = m[0] * m[3] - m[1] * m[2] < 0 ? -1 : 1;
+  return effects.map((e) => {
+    if (e.type === "twist") return { ...e, params: { ...e.params, center: lin(e.params.center), angle: e.params.angle * mirror } };
+    if (e.type === "repeater")
+      return { ...e, params: { ...e.params, position: lin(e.params.position), anchor: lin(e.params.anchor), rotation: e.params.rotation * mirror } };
+    return e;
+  });
+}
+function vectorEnteredGroups(nodes, ids) {
+  const out = /* @__PURE__ */ new Set();
+  if (!ids.length) return out;
+  const want = new Set(ids);
+  const visit = (list, live) => {
+    for (const n of list) {
+      const own = n.type === "group" && hasOwnVectorAppearance(n);
+      if (want.has(n.id)) {
+        for (const id of live) out.add(id);
+        if (own) out.add(n.id);
+      }
+      if (n.type === "group") visit(n.children, own ? [...live, n.id] : live);
+    }
+  };
+  visit(nodes, []);
+  return out;
+}
+
+// src/vector/geometry.ts
+var EPS3 = 1e-9;
 var cloneAnchor = (a) => ({
   x: a.x,
   y: a.y,
@@ -1057,7 +1935,7 @@ function hasPaint(paint) {
   return true;
 }
 var handleOf = (a, side) => a[side] ?? { x: a.x, y: a.y };
-var isOnAnchor = (a, h) => !h || Math.abs(h.x - a.x) < EPS2 && Math.abs(h.y - a.y) < EPS2;
+var isOnAnchor = (a, h) => !h || Math.abs(h.x - a.x) < EPS3 && Math.abs(h.y - a.y) < EPS3;
 function subpathSegmentCount(sp) {
   const n = sp.anchors.length;
   if (n < 2) return 0;
@@ -1089,7 +1967,7 @@ function subpathsToBezier(subpaths, options = {}) {
   return out;
 }
 function vectorNodeToBezier(node) {
-  return node.type === "path" ? subpathsToBezier(node.subpaths) : [];
+  return node.type === "path" ? vectorAppearanceOutline(node) : [];
 }
 function vectorPathData(input, precision = 3) {
   const subpaths = Array.isArray(input) ? input : input.subpaths;
@@ -1203,12 +2081,13 @@ function collectPathNodes(node) {
 function nodeMatrix(node) {
   return node.transform ?? IDENTITY_MATRIX;
 }
-function vectorPathWorldBezier(node, parent = IDENTITY_MATRIX) {
+function vectorPathWorldBezier(node, parent = IDENTITY_MATRIX, options = {}) {
   const m = multiplyMatrices(nodeMatrix(node), parent);
-  const path = subpathsToBezier(node.subpaths);
+  const path = options.effects === false || !hasOwnVectorAppearance(node) ? subpathsToBezier(node.subpaths) : vectorAppearanceOutline(node);
   return isIdentityMatrix(m) ? path : transformBezierPath(path, m);
 }
 function vectorNodeBounds(node, parent = IDENTITY_MATRIX) {
+  node = expandVectorAppearance(node);
   if (node.type === "group") {
     const m = multiplyMatrices(nodeMatrix(node), parent);
     return unionBounds(node.children.map((c) => vectorNodeBounds(c, m)));
@@ -1238,11 +2117,12 @@ function boundsIntersect(a, b) {
 function boundsFromPoints(a, b) {
   return { x: Math.min(a.x, b.x), y: Math.min(a.y, b.y), width: Math.abs(b.x - a.x), height: Math.abs(b.y - a.y) };
 }
-function hitTestVectorNode(node, p, tolerance = 0, parent = IDENTITY_MATRIX) {
+function hitTestVectorNode(node, p, tolerance = 0, parent = IDENTITY_MATRIX, options = {}) {
   if (node.visible === false) return false;
+  if (!(node.type === "group" && (!hasOwnVectorAppearance(node) || options.entered?.has(node.id)))) node = expandVectorAppearance(node);
   if (node.type === "group") {
     const m = multiplyMatrices(nodeMatrix(node), parent);
-    return node.children.some((c) => hitTestVectorNode(c, p, tolerance, m));
+    return node.children.some((c) => hitTestVectorNode(c, p, tolerance, m, options));
   }
   const path = vectorPathWorldBezier(node, parent);
   if (path.length === 0) return false;
@@ -1255,11 +2135,11 @@ function vectorStrokeOutline(node, parent = IDENTITY_MATRIX) {
   if (!hasPaint(node.stroke) || !((node.strokeWidth ?? 1) > 0)) return [];
   return vectorStrokeOutlinePath(vectorPathWorldBezier(node, parent), node);
 }
-function hitTestVectorNodes(nodes, p, tolerance = 0) {
+function hitTestVectorNodes(nodes, p, tolerance = 0, options = {}) {
   for (let i = nodes.length - 1; i >= 0; i--) {
     const node = nodes[i];
     if (node.visible === false || node.locked) continue;
-    if (hitTestVectorNode(node, p, tolerance)) return node;
+    if (hitTestVectorNode(node, p, tolerance, IDENTITY_MATRIX, options)) return node;
   }
   return null;
 }
@@ -1327,9 +2207,26 @@ function decomposeRigid(m) {
     residual: [cos * a + sin * b, -sin * a + cos * b, cos * c + sin * d, -sin * c + cos * d, 0, 0]
   };
 }
+function mapAnchor(a, m) {
+  const p = applyMatrix(m, a);
+  const next = { x: p.x, y: p.y };
+  if (a.in) next.in = applyMatrix(m, a.in);
+  if (a.out) next.out = applyMatrix(m, a.out);
+  if (a.type) next.type = a.type;
+  if (a.corner) next.corner = { ...a.corner };
+  return next;
+}
 function bakeIntoGeometry(node, m) {
   if (isIdentityMatrix(m)) return node;
-  if (node.type === "group") return { ...node, children: node.children.map((c) => transformVectorNode(c, m)) };
+  if (node.effects?.length) node = { ...node, effects: transformVectorEffects(node.effects, m) };
+  if (node.type === "group") {
+    const group = node;
+    const children = group.children.map((c) => transformVectorNode(c, m));
+    const spine = group.blend?.spine;
+    if (!spine) return { ...group, children };
+    const moved = { closed: spine.closed, anchors: spine.anchors.map((a) => mapAnchor(a, m)) };
+    return { ...group, children, blend: { ...group.blend, spine: moved } };
+  }
   const path = node;
   const mirrored = m[0] * m[3] - m[1] * m[2] < 0 && path.strokeWidthProfile?.length;
   return {
@@ -1337,15 +2234,7 @@ function bakeIntoGeometry(node, m) {
     ...mirrored ? { strokeWidthProfile: mirrorWidthProfile(path.strokeWidthProfile) } : {},
     subpaths: path.subpaths.map((sp) => ({
       closed: sp.closed,
-      anchors: sp.anchors.map((a) => {
-        const p = applyMatrix(m, a);
-        const next = { x: p.x, y: p.y };
-        if (a.in) next.in = applyMatrix(m, a.in);
-        if (a.out) next.out = applyMatrix(m, a.out);
-        if (a.type) next.type = a.type;
-        if (a.corner) next.corner = { ...a.corner };
-        return next;
-      })
+      anchors: sp.anchors.map((a) => mapAnchor(a, m))
     }))
   };
 }
@@ -1397,7 +2286,7 @@ function moveAnchorHandle(a, side, pos, breakHandles = false) {
   const dy = pos.y - a.y;
   const len2 = Math.hypot(dx, dy);
   if (type === "symmetric") next[other] = { x: a.x - dx, y: a.y - dy };
-  else if (type === "smooth" && len2 > EPS2) {
+  else if (type === "smooth" && len2 > EPS3) {
     const o = a[other];
     const olen = o ? Math.hypot(o.x - a.x, o.y - a.y) : len2;
     next[other] = { x: a.x - dx / len2 * olen, y: a.y - dy / len2 * olen };
@@ -1427,15 +2316,15 @@ function convertAnchor(sp, index, type) {
   else if (prev && next) dir = { x: next.x - prev.x, y: next.y - prev.y };
   else if (next) dir = { x: next.x - a.x, y: next.y - a.y };
   else if (prev) dir = { x: a.x - prev.x, y: a.y - prev.y };
-  if (!dir || Math.hypot(dir.x, dir.y) < EPS2) return { anchors, closed: sp.closed };
+  if (!dir || Math.hypot(dir.x, dir.y) < EPS3) return { anchors, closed: sp.closed };
   const dl = Math.hypot(dir.x, dir.y);
   const ux = dir.x / dl;
   const uy = dir.y / dl;
   lenIn = a.in && !isOnAnchor(a, a.in) ? Math.hypot(a.in.x - a.x, a.in.y - a.y) : prev ? Math.hypot(prev.x - a.x, prev.y - a.y) / 3 : 0;
   lenOut = a.out && !isOnAnchor(a, a.out) ? Math.hypot(a.out.x - a.x, a.out.y - a.y) : next ? Math.hypot(next.x - a.x, next.y - a.y) / 3 : 0;
   if (type === "symmetric") lenIn = lenOut = (lenIn + lenOut) / 2 || Math.max(lenIn, lenOut);
-  if (lenIn > EPS2) a.in = { x: a.x - ux * lenIn, y: a.y - uy * lenIn };
-  if (lenOut > EPS2) a.out = { x: a.x + ux * lenOut, y: a.y + uy * lenOut };
+  if (lenIn > EPS3) a.in = { x: a.x - ux * lenIn, y: a.y - uy * lenIn };
+  if (lenOut > EPS3) a.out = { x: a.x + ux * lenOut, y: a.y + uy * lenOut };
   a.type = type;
   return { anchors, closed: sp.closed };
 }
@@ -1613,6 +2502,33 @@ function gradientMarkup(def) {
   const stops = def.stops.map((s) => `<stop offset="${s.offset}" stop-color="${escapeAttr(s.stopColor)}"${s.stopOpacity !== void 0 ? ` stop-opacity="${s.stopOpacity}"` : ""}/>`).join("");
   return `<${tag} id="${escapeAttr(def.id)}"${attrs}>${stops}</${tag}>`;
 }
+function blendFromAttribute(value, m) {
+  if (!value) return null;
+  let raw;
+  try {
+    raw = JSON.parse(value);
+  } catch {
+    return null;
+  }
+  if (!raw || typeof raw !== "object") return null;
+  const r = raw;
+  const out = {};
+  if (r.spacing === "steps" || r.spacing === "distance" || r.spacing === "smoothColor") out.spacing = r.spacing;
+  if (typeof r.steps === "number" && Number.isFinite(r.steps)) out.steps = Math.min(1e3, Math.max(1, Math.round(r.steps)));
+  if (typeof r.distance === "number" && r.distance > 0) out.distance = r.distance;
+  if (typeof r.orientToSpine === "boolean") out.orientToSpine = r.orientToSpine;
+  if (typeof r.linear === "boolean") out.linear = r.linear;
+  if (r.starts && typeof r.starts === "object") {
+    const starts = Object.fromEntries(Object.entries(r.starts).filter((e) => Number.isInteger(e[1]) && e[1] >= 0));
+    if (Object.keys(starts).length) out.starts = starts;
+  }
+  const spine = r.spine;
+  if (spine && Array.isArray(spine.anchors) && spine.anchors.every((a) => a && Number.isFinite(a.x) && Number.isFinite(a.y))) {
+    const sp = { closed: !!spine.closed, anchors: spine.anchors.map((a) => ({ x: a.x, y: a.y, ...a.in ? { in: { x: a.in.x, y: a.in.y } } : {}, ...a.out ? { out: { x: a.out.x, y: a.out.y } } : {} })) };
+    out.spine = m === IDENTITY_MATRIX ? sp : transformVectorNode({ id: "", type: "path", subpaths: [sp] }, m).subpaths[0];
+  }
+  return out;
+}
 function vectorDocumentToSvg(doc, options = {}) {
   const precision = options.precision ?? 3;
   const prefix = options.idPrefix ?? "vg-";
@@ -1626,13 +2542,35 @@ function vectorDocumentToSvg(doc, options = {}) {
     if (node.transform) out2 += ` transform="matrix(${node.transform.map((n) => formatNumber(n, 6)).join(" ")})"`;
     if (node.opacity !== void 0 && node.opacity < 1) out2 += ` opacity="${num(node.opacity)}"`;
     if (node.visible === false) out2 += ` display="none"`;
+    if (node.blendStep) out2 += ` data-vector-blend-step=""`;
+    if (node.type === "group" && node.blend) out2 += ` data-vector-blend="${escapeAttr(JSON.stringify(node.blend))}"`;
+    if (node.booleanOperation) out2 += ` data-vector-boolean-operation="${node.booleanOperation}"`;
     return out2;
   };
-  const emit = (node, depth) => {
+  const emit2 = (node, depth) => {
     if (node.visible === false && !options.includeHidden) return;
+    if (hasOwnVectorAppearance(node)) {
+      const live2 = {
+        kind: node.type,
+        ...node.effects?.length ? { effects: node.effects } : {},
+        ...node.type === "group" && node.liveBoolean ? { liveBoolean: node.liveBoolean } : {}
+      };
+      lines.push(`${indent(depth)}<g${common(node)} data-vector-live="${escapeAttr(JSON.stringify(live2))}">`);
+      lines.push(`${indent(depth + 1)}<g data-vector-part="appearance">`);
+      for (const shape of vectorAppearanceNodes(node)) emit2(shape, depth + 2);
+      lines.push(`${indent(depth + 1)}</g>`);
+      lines.push(`${indent(depth + 1)}<g data-vector-part="source" display="none">`);
+      if (node.type === "path") {
+        const { effects: _e, transform: _t, opacity: _o, visible: _v, booleanOperation: _b, blendStep: _s, ...source } = node;
+        emit2({ ...source, id: `${node.id}~src` }, depth + 2);
+      } else for (const child of node.children) emit2(child, depth + 2);
+      lines.push(`${indent(depth + 1)}</g>`);
+      lines.push(`${indent(depth)}</g>`);
+      return;
+    }
     if (node.type === "group") {
       lines.push(`${indent(depth)}<g${common(node)}>`);
-      for (const child of node.children) emit(child, depth + 1);
+      for (const child of node.children) emit2(child, depth + 1);
       lines.push(`${indent(depth)}</g>`);
       return;
     }
@@ -1696,7 +2634,7 @@ function vectorDocumentToSvg(doc, options = {}) {
     }
     lines.push(`${indent(depth)}</g>`);
   };
-  for (const node of doc.nodes) emit(node, 1);
+  for (const node of doc.nodes) emit2(node, 1);
   const w = num(doc.width);
   const h = num(doc.height);
   const nl = pretty ? "\n" : "";
@@ -1708,6 +2646,7 @@ function vectorDocumentToSvg(doc, options = {}) {
   out.push(...lines, "</svg>");
   return out.join(nl);
 }
+var BOOLEAN_OPERATIONS = ["union", "subtract", "intersect", "exclude"];
 function parseXml(source) {
   const text = source.replace(/<!--[\s\S]*?-->/g, "").replace(/<\?[\s\S]*?\?>/g, "").replace(/<!\[CDATA\[[\s\S]*?\]\]>/g, "").replace(/<!DOCTYPE[^>[]*(\[[\s\S]*?\])?\s*>/gi, "");
   const root = { name: "#root", attrs: {}, children: [] };
@@ -1982,6 +2921,34 @@ function parseVectorSvg(svg, options = {}) {
     };
     return placed(node, m);
   };
+  const liveNode = (g, style, m, meta) => {
+    let raw = {};
+    try {
+      raw = JSON.parse(g.attrs["data-vector-live"]) ?? {};
+    } catch {
+      raw = {};
+    }
+    const sourceEl = g.children.find((c) => c.name === "g" && c.attrs["data-vector-part"] === "source");
+    if (!sourceEl) return null;
+    const inner = visit(sourceEl, style, m);
+    const effects = sanitizeVectorEffects(raw.effects);
+    const liveBoolean = BOOLEAN_OPERATIONS.includes(raw.liveBoolean) ? raw.liveBoolean : null;
+    const id = idFor(g);
+    if (raw.kind === "path") {
+      const path = inner.find((n) => n.type === "path");
+      if (!path) return null;
+      const { residual } = decomposeRigid(m);
+      const { visible: _v, ...rest } = path;
+      return { ...rest, id, ...meta, ...effects.length ? { effects: transformVectorEffects(effects, residual) } : {} };
+    }
+    if (!inner.length) return null;
+    const group = { id, type: "group", ...meta, children: inner };
+    if (effects.length) group.effects = transformVectorEffects(effects, m);
+    if (liveBoolean) group.liveBoolean = liveBoolean;
+    const blend = blendFromAttribute(g.attrs["data-vector-blend"], m);
+    if (blend) group.blend = blend;
+    return group;
+  };
   const visit = (el, style, matrix) => {
     const out = [];
     for (const child of el.children) {
@@ -1995,6 +2962,14 @@ function parseVectorSvg(svg, options = {}) {
         ...opacity !== void 0 && Number.isFinite(opacity) && opacity < 1 ? { opacity } : {},
         ...hidden ? { visible: false } : {}
       };
+      if (child.attrs["data-vector-blend-step"] !== void 0) continue;
+      const operation = child.attrs["data-vector-boolean-operation"];
+      if (BOOLEAN_OPERATIONS.includes(operation)) meta.booleanOperation = operation;
+      if (child.name === "g" && child.attrs["data-vector-live"] !== void 0) {
+        const node2 = liveNode(child, s, m, meta);
+        if (node2) out.push(node2);
+        continue;
+      }
       if (child.name === "g" && child.attrs["data-vector-path"] !== void 0) {
         const node2 = mergedPath(child, s, m, meta);
         if (node2) out.push(node2);
@@ -2004,6 +2979,8 @@ function parseVectorSvg(svg, options = {}) {
         const children = visit(child, s, m);
         if (!children.length) continue;
         const group = { id: idFor(child), type: "group", ...meta, children };
+        const blend = child.name === "g" ? blendFromAttribute(child.attrs["data-vector-blend"], m) : null;
+        if (blend) group.blend = blend;
         out.push(group);
         continue;
       }
@@ -2029,6 +3006,910 @@ function parseVectorSvg(svg, options = {}) {
   return { width, height, nodes };
 }
 
+// src/vector/blend.ts
+var lerpN = (a, b, t) => a + (b - a) * t;
+var lerpP = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+var toP = (v2) => [v2.x, v2.y];
+var mapP = (m, p) => [m[0] * p[0] + m[2] * p[1] + m[4], m[1] * p[0] + m[3] * p[1] + m[5]];
+var curvesOf = (c) => Math.max(0, (c.pts.length - 1) / 3) | 0;
+function subpathToMorphContour(sp, m = IDENTITY_MATRIX) {
+  const n = sp.anchors.length;
+  if (!n) return null;
+  const first = mapP(m, toP(sp.anchors[0]));
+  const pts = [first];
+  const count = n < 2 ? 0 : sp.closed ? n : n - 1;
+  for (let i = 0; i < count; i++) {
+    const a = sp.anchors[i];
+    const b = sp.anchors[(i + 1) % n];
+    const pa = toP(a);
+    const pb = toP(b);
+    const straight = (!a.out || a.out.x === a.x && a.out.y === a.y) && (!b.in || b.in.x === b.x && b.in.y === b.y);
+    const c1 = straight ? lerpP(pa, pb, 1 / 3) : toP(a.out ?? a);
+    const c2 = straight ? lerpP(pa, pb, 2 / 3) : toP(b.in ?? b);
+    pts.push(mapP(m, c1), mapP(m, c2), i === count - 1 && sp.closed ? first : mapP(m, pb));
+  }
+  return { closed: sp.closed && count > 0, pts };
+}
+function isStraight(p0, p1, p2, p3) {
+  const dx = p3[0] - p0[0];
+  const dy = p3[1] - p0[1];
+  const len2 = Math.hypot(dx, dy);
+  const tol = Math.max(1e-7, len2 * 1e-7);
+  if (len2 < 1e-12) return Math.hypot(p1[0] - p0[0], p1[1] - p0[1]) < tol && Math.hypot(p2[0] - p0[0], p2[1] - p0[1]) < tol;
+  const off = (p) => Math.abs((p[0] - p0[0]) * dy - (p[1] - p0[1]) * dx) / len2;
+  const along2 = (p) => ((p[0] - p0[0]) * dx + (p[1] - p0[1]) * dy) / (len2 * len2);
+  const u1 = along2(p1);
+  const u2 = along2(p2);
+  return off(p1) < tol && off(p2) < tol && u1 >= -1e-9 && u1 <= 1 + 1e-9 && u2 >= -1e-9 && u2 <= 1 + 1e-9;
+}
+function morphContourToSubpath(c, m = IDENTITY_MATRIX, closed = c.closed) {
+  const pts = isIdentityMatrix(m) ? c.pts : c.pts.map((p) => mapP(m, p));
+  const curves = curvesOf(c);
+  const dropLast = closed && c.closed && curves > 0;
+  const count = dropLast ? curves : curves + 1;
+  const anchors = [];
+  for (let k = 0; k < count; k++) anchors.push({ x: pts[3 * k][0], y: pts[3 * k][1] });
+  for (let k = 0; k < curves; k++) {
+    const p0 = pts[3 * k];
+    const p1 = pts[3 * k + 1];
+    const p2 = pts[3 * k + 2];
+    const p3 = pts[3 * k + 3];
+    if (isStraight(p0, p1, p2, p3)) continue;
+    anchors[k].out = { x: p1[0], y: p1[1] };
+    anchors[(k + 1) % count].in = { x: p2[0], y: p2[1] };
+  }
+  for (const a of anchors) {
+    const type = inferAnchorType(a);
+    if (type !== "corner") a.type = type;
+  }
+  const isClosed = closed && curves > 0;
+  return { anchors: dropCollinear(anchors, isClosed), closed: isClosed };
+}
+function dropCollinear(anchors, closed) {
+  const out = anchors.slice();
+  const min = closed ? 3 : 2;
+  let i = closed ? 0 : 1;
+  while (out.length > min && i < out.length - (closed ? 0 : 1)) {
+    const n = out.length;
+    const a = out[(i - 1 + n) % n];
+    const b = out[i];
+    const c = out[(i + 1) % n];
+    const plain3 = !b.in && !b.out && !a.out && !c.in;
+    const ux = b.x - a.x;
+    const uy = b.y - a.y;
+    const vx = c.x - b.x;
+    const vy = c.y - b.y;
+    const len2 = Math.hypot(ux, uy) + Math.hypot(vx, vy);
+    if (plain3 && Math.abs(ux * vy - uy * vx) <= 1e-9 * Math.max(1, len2 * len2) && ux * vx + uy * vy >= 0) out.splice(i, 1);
+    else i++;
+  }
+  return out;
+}
+var segOf = (c, k) => c.pts.slice(3 * k, 3 * k + 4);
+function refineMorphContour(c, segments) {
+  const have = curvesOf(c);
+  if (have === 0) return { contour: { closed: c.closed, pts: Array.from({ length: 1 + 3 * segments }, () => [c.pts[0][0], c.pts[0][1]]) }, anchors: [0] };
+  const identity = Array.from({ length: c.closed ? have : have + 1 }, (_, i) => i);
+  if (have >= segments) return { contour: c, anchors: identity };
+  const segs = Array.from({ length: have }, (_, k) => segOf(c, k));
+  const lens = segs.map((s) => segmentLength(s));
+  const sum = lens.reduce((a, b) => a + b, 0);
+  const extra = segments - have;
+  const want = lens.map((l) => sum > 1e-12 ? l / sum * extra : extra / have);
+  const parts = want.map((w) => 1 + Math.floor(w));
+  let left = segments - parts.reduce((a, b) => a + b, 0);
+  const frac = want.map((w) => w - Math.floor(w));
+  const order = parts.map((_, i) => i).sort((a, b) => Math.abs(frac[b] - frac[a]) > 1e-9 ? frac[b] - frac[a] : a - b);
+  for (let i = 0; left > 0; i = (i + 1) % order.length, left--) parts[order[i]]++;
+  const pts = [c.pts[0]];
+  const anchors = [0];
+  let at2 = 0;
+  segs.forEach((seg, k) => {
+    const pieces = parts[k];
+    let rest = seg.slice();
+    let t0 = 0;
+    for (let j = 1; j < pieces; j++) {
+      const t = segmentParamAtLength(seg, lens[k] * j / pieces, lens[k]);
+      const u = Math.min(1, Math.max(0, (t - t0) / (1 - t0 || 1)));
+      const [l, r] = splitSegment(rest, u);
+      pts.push(l[1], l[2], l[3]);
+      rest = r;
+      t0 = t;
+    }
+    pts.push(rest[1], rest[2], k === have - 1 && c.closed ? c.pts[0] : rest[3]);
+    at2 += pieces;
+    if (k < have - 1 || !c.closed) anchors.push(at2);
+  });
+  return { contour: { closed: c.closed, pts }, anchors };
+}
+function reverseMorphContour(c) {
+  return { closed: c.closed, pts: c.pts.slice().reverse() };
+}
+function turnMorphContour(c, s) {
+  const n = curvesOf(c);
+  if (!c.closed || n === 0) return c;
+  const k = (s % n + n) % n;
+  if (k === 0) return c;
+  const body = c.pts.slice(1);
+  return { closed: true, pts: [c.pts[3 * k], ...body.slice(3 * k), ...body.slice(0, 3 * k)] };
+}
+function anchorPoints(c) {
+  const n = curvesOf(c);
+  const count = c.closed ? n : n + 1;
+  return Array.from({ length: Math.max(1, count) }, (_, k) => c.pts[3 * k]);
+}
+function polygonArea(pts) {
+  let s = 0;
+  for (let i = 0; i < pts.length; i++) {
+    const a = pts[i];
+    const b = pts[(i + 1) % pts.length];
+    s += a[0] * b[1] - b[0] * a[1];
+  }
+  return s / 2;
+}
+function frame(v2) {
+  const n = Math.max(1, v2.length);
+  let cx = 0;
+  let cy = 0;
+  for (const p of v2) {
+    cx += p[0];
+    cy += p[1];
+  }
+  cx /= n;
+  cy /= n;
+  let s = 0;
+  for (const p of v2) s += (p[0] - cx) ** 2 + (p[1] - cy) ** 2;
+  return { c: [cx, cy], r: Math.max(1e-9, Math.sqrt(s / n)) };
+}
+var RBINS = 5;
+var ABINS = 12;
+var TURN_WEIGHT = 0.1;
+function shapeContexts(v2, closed) {
+  const { r } = frame(v2);
+  const n = v2.length;
+  return v2.map((p, i) => {
+    const prev = v2[closed ? (i - 1 + n) % n : Math.max(0, i - 1)];
+    const next = v2[closed ? (i + 1) % n : Math.min(n - 1, i + 1)];
+    const dir = Math.atan2(next[1] - prev[1], next[0] - prev[0]);
+    const h = new Float64Array(RBINS * ABINS);
+    let total = 0;
+    for (let j = 0; j < n; j++) {
+      if (i === j) continue;
+      const dx = v2[j][0] - p[0];
+      const dy = v2[j][1] - p[1];
+      const d = Math.hypot(dx, dy) / r;
+      const lr = (Math.log2(Math.max(d, 1e-6)) + 3) / 4 * RBINS;
+      if (!(lr >= 0 && lr < RBINS)) continue;
+      let ang = Math.atan2(dy, dx) - dir;
+      ang = (ang % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI);
+      h[Math.floor(lr) * ABINS + Math.min(ABINS - 1, Math.floor(ang / (2 * Math.PI) * ABINS))] += 1;
+      total++;
+    }
+    if (total > 0) for (let k = 0; k < h.length; k++) h[k] /= total;
+    return h;
+  });
+}
+function chi2(a, b) {
+  let s = 0;
+  for (let k = 0; k < a.length; k++) {
+    const t = a[k] + b[k];
+    if (t > 1e-12) s += (a[k] - b[k]) * (a[k] - b[k]) / t;
+  }
+  return s / 2;
+}
+function bestStart(fixed, free, useShapeContext) {
+  const fa = anchorPoints(fixed);
+  const ga = anchorPoints(free);
+  const n = ga.length;
+  const ff = frame(fa);
+  const gf = frame(ga);
+  const fn = fa.map((p) => [(p[0] - ff.c[0]) / ff.r, (p[1] - ff.c[1]) / ff.r]);
+  const gn = ga.map((p) => [(p[0] - gf.c[0]) / gf.r, (p[1] - gf.c[1]) / gf.r]);
+  const fsc = useShapeContext ? shapeContexts(fa, fixed.closed) : null;
+  const gsc = useShapeContext ? shapeContexts(ga, free.closed) : null;
+  const m = Math.max(1, fn.length);
+  const cost = (s) => {
+    let dot2 = 0;
+    let cross2 = 0;
+    let sc = 0;
+    for (let i = 0; i < fn.length; i++) {
+      const j = free.closed ? (i + s) % n : i;
+      const p = fn[i];
+      const q = gn[j];
+      dot2 += p[0] * q[0] + p[1] * q[1];
+      cross2 += p[0] * q[1] - p[1] * q[0];
+      if (fsc && gsc) sc += chi2(fsc[i], gsc[j]);
+    }
+    const residual = Math.max(0, 1 - (dot2 * dot2 + cross2 * cross2) / (m * m));
+    const turn = 1 - Math.cos(Math.atan2(cross2, dot2));
+    return residual + TURN_WEIGHT * turn + sc / m;
+  };
+  if (!free.closed) return { start: 0, cost: cost(0) };
+  const stride = n > 96 ? Math.ceil(n / 48) : 1;
+  let best = { start: 0, cost: Infinity };
+  for (let s = 0; s < n; s += stride) {
+    const c = cost(s);
+    if (c < best.cost - 1e-12) best = { start: s, cost: c };
+  }
+  if (stride > 1) {
+    const s0 = best.start;
+    for (let d = 1; d < stride; d++)
+      for (const s of [(s0 + d) % n, (s0 - d + n) % n]) {
+        const c = cost(s);
+        if (c < best.cost - 1e-12) best = { start: s, cost: c };
+      }
+  }
+  return best;
+}
+function placeIn(c, from, to) {
+  const b = unionBounds([boundsOfPoints(c.pts)]);
+  const p = b ? [b.x + b.width / 2, b.y + b.height / 2] : c.pts[0];
+  if (!from || !to) return p;
+  const fx = from.width > 0 ? (p[0] - from.x) / from.width : 0.5;
+  const fy = from.height > 0 ? (p[1] - from.y) / from.height : 0.5;
+  return [to.x + to.width * fx, to.y + to.height * fy];
+}
+function boundsOfPoints(pts) {
+  if (!pts.length) return null;
+  let x0 = Infinity;
+  let y0 = Infinity;
+  let x1 = -Infinity;
+  let y1 = -Infinity;
+  for (const p of pts) {
+    x0 = Math.min(x0, p[0]);
+    y0 = Math.min(y0, p[1]);
+    x1 = Math.max(x1, p[0]);
+    y1 = Math.max(y1, p[1]);
+  }
+  return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
+}
+function correspondMorphContours(a, b, options = {}) {
+  const minSeg = Math.max(1, Math.round(options.minSegments ?? 16));
+  const maxSeg = Math.max(minSeg, Math.round(options.maxSegments ?? 400));
+  const spacing = options.spacing && options.spacing > 0 ? options.spacing : null;
+  const useSC = options.shapeContext !== false;
+  const match = options.matchStart !== false;
+  const ba = boundsOfPoints(a.flatMap((c) => c.pts));
+  const bb = boundsOfPoints(b.flatMap((c) => c.pts));
+  const contourLength = (c) => {
+    let l = 0;
+    for (let k = 0; k < curvesOf(c); k++) l += segmentLength(segOf(c, k));
+    return l;
+  };
+  const pairs = [];
+  const [sa, sb] = options.starts ?? [];
+  for (let k = 0; k < Math.max(a.length, b.length); k++) {
+    const ca = a[k];
+    const cb = b[k];
+    const explicitA = k === 0 && sa !== null && sa !== void 0 ? sa : null;
+    const explicitB = k === 0 && sb !== null && sb !== void 0 ? sb : null;
+    const counts = [ca ? curvesOf(ca) : 0, cb ? curvesOf(cb) : 0];
+    const longest = Math.max(ca ? contourLength(ca) : 0, cb ? contourLength(cb) : 0);
+    let n = Math.max(counts[0], counts[1], minSeg, spacing ? Math.ceil(longest / spacing) : 0);
+    n = Math.max(counts[0], counts[1], Math.min(n, maxSeg));
+    const point = (c, from, to) => {
+      const p = placeIn(c, from, to);
+      return { closed: c.closed, pts: Array.from({ length: 1 + 3 * n }, () => [p[0], p[1]]) };
+    };
+    if (ca && cb) {
+      const ra = refineMorphContour(ca, n);
+      const rb = refineMorphContour(cb, n);
+      pairs.push({
+        x: ra.contour,
+        y: rb.contour,
+        point: false,
+        startX: explicitA === null ? null : ra.anchors[explicitA] ?? null,
+        startY: explicitB === null ? null : explicitB === rb.anchors.length - 1 && !cb.closed ? -1 : rb.anchors[explicitB] ?? null
+      });
+      if (explicitA !== null && !ca.closed && explicitA === ra.anchors.length - 1 && explicitA > 0) pairs[pairs.length - 1].startX = -1;
+    } else if (ca) pairs.push({ x: refineMorphContour(ca, n).contour, y: point(ca, ba, bb), point: true, startX: null, startY: null });
+    else if (cb) pairs.push({ x: point(cb, bb, ba), y: refineMorphContour(cb, n).contour, point: true, startX: null, startY: null });
+  }
+  const startAt = (c, s) => {
+    if (s === null) return c;
+    if (s === -1) return reverseMorphContour(c);
+    return c.closed ? turnMorphContour(c, s) : c;
+  };
+  const explicit = pairs.length > 0 && (pairs[0].startX !== null || pairs[0].startY !== null);
+  const ref = pairs.find((p) => !p.point && p.x.closed && p.y.closed);
+  const fixedBack = ref ? Math.sign(polygonArea(anchorPoints(ref.x))) !== Math.sign(polygonArea(anchorPoints(ref.y))) && Math.abs(polygonArea(anchorPoints(ref.y))) > 1e-12 : explicit ? false : null;
+  let best = null;
+  for (const back of fixedBack === null ? [false, true] : [fixedBack]) {
+    const xs = [];
+    const ys = [];
+    let cost = 0;
+    pairs.forEach((p, k) => {
+      let x = k === 0 ? startAt(p.x, p.startX) : p.x;
+      let y = k === 0 ? startAt(p.y, p.startY) : p.y;
+      if (back) y = reverseMorphContour(y);
+      if (p.point) {
+        xs.push(x);
+        ys.push(y);
+        return;
+      }
+      const pinned = k === 0 && explicit;
+      const turnX = !y.closed && x.closed;
+      if (match && !pinned && (y.closed || turnX)) {
+        const r = turnX ? bestStart(y, x, useSC) : bestStart(x, y, useSC);
+        if (turnX) x = turnMorphContour(x, r.start);
+        else y = turnMorphContour(y, r.start);
+        cost += r.cost;
+      } else cost += bestStart(x, { ...y, closed: false }, useSC).cost;
+      xs.push(x);
+      ys.push(y);
+    });
+    if (!best || cost < best.cost - 1e-9) best = { xs, ys, cost, back };
+  }
+  return best ? { a: best.xs, b: best.ys, reversed: best.back } : { a: [], b: [], reversed: false };
+}
+function morphPathsCross(a, b) {
+  let count = 0;
+  const d = (p, q, r) => (q[0] - p[0]) * (r[1] - p[1]) - (q[1] - p[1]) * (r[0] - p[0]);
+  for (let k = 0; k < Math.min(a.length, b.length); k++) {
+    const pa = anchorPoints(a[k]);
+    const pb = anchorPoints(b[k]);
+    const n = Math.min(pa.length, pb.length);
+    for (let i = 0; i < n; i++)
+      for (let j = i + 1; j < n; j++) {
+        const d1 = d(pa[j], pb[j], pa[i]);
+        const d2 = d(pa[j], pb[j], pb[i]);
+        const d3 = d(pa[i], pb[i], pa[j]);
+        const d4 = d(pa[i], pb[i], pb[j]);
+        if (d1 * d2 < 0 && d3 * d4 < 0) count++;
+      }
+  }
+  return count;
+}
+function procrustes(a, b) {
+  const pa = a.flatMap(anchorPoints);
+  const pb = b.flatMap(anchorPoints);
+  const ca = frame(pa).c;
+  const cb = frame(pb).c;
+  let ss = 0;
+  let dot2 = 0;
+  let cross2 = 0;
+  for (let i = 0; i < Math.min(pa.length, pb.length); i++) {
+    const p = [pa[i][0] - ca[0], pa[i][1] - ca[1]];
+    const q = [pb[i][0] - cb[0], pb[i][1] - cb[1]];
+    ss += p[0] * p[0] + p[1] * p[1];
+    dot2 += p[0] * q[0] + p[1] * q[1];
+    cross2 += p[0] * q[1] - p[1] * q[0];
+  }
+  return { ca, cb, theta: Math.atan2(cross2, dot2), s: ss > 1e-12 ? Math.hypot(dot2, cross2) / ss : 1 };
+}
+function interpolateMorphContours(a, b, u, options = {}) {
+  const w = options.linear ? 0 : Math.min(1, Math.max(0, options.rigidity ?? 1));
+  const sim = w > 0 ? options.similarity ?? procrustes(a, b) : null;
+  const rot = (p, ang, k) => {
+    const c = Math.cos(ang);
+    const s = Math.sin(ang);
+    return [k * (c * p[0] - s * p[1]), k * (s * p[0] + c * p[1])];
+  };
+  const thetaU = sim ? sim.theta * u : 0;
+  const sU = sim ? Math.max(1e-9, sim.s) ** u : 1;
+  const cU = sim ? lerpP(sim.ca, sim.cb, u) : [0, 0];
+  return a.map((ca, k) => {
+    const cb = b[k];
+    const pts = ca.pts.map((p, i) => {
+      const q = cb.pts[i] ?? p;
+      const linear = lerpP(p, q, u);
+      if (!sim) return linear;
+      const d = [p[0] - sim.ca[0], p[1] - sim.ca[1]];
+      const full = rot(d, sim.theta, sim.s);
+      const resid = [q[0] - (full[0] + sim.cb[0]), q[1] - (full[1] + sim.cb[1])];
+      const part = rot(d, thetaU, sU);
+      const rigid = [part[0] + cU[0] + resid[0] * u, part[1] + cU[1] + resid[1] * u];
+      return lerpP(linear, rigid, w);
+    });
+    return { closed: ca.closed && cb.closed, pts };
+  });
+}
+function interpolateRigidMatrix(a, b, t) {
+  const decompose = (m) => {
+    const sx2 = Math.hypot(m[0], m[1]);
+    const ang2 = sx2 > 1e-12 ? Math.atan2(m[1], m[0]) : 0;
+    const c2 = Math.cos(ang2);
+    const s2 = Math.sin(ang2);
+    return { e: m[4], f: m[5], ang: ang2, sx: sx2, sh: c2 * m[2] + s2 * m[3], sy: -s2 * m[2] + c2 * m[3] };
+  };
+  const p = decompose(a);
+  const q = decompose(b);
+  let turn = q.ang - p.ang;
+  turn = ((turn + Math.PI) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI) - Math.PI;
+  const ang = p.ang + turn * t;
+  const sx = lerpN(p.sx, q.sx, t);
+  const sh = lerpN(p.sh, q.sh, t);
+  const sy = lerpN(p.sy, q.sy, t);
+  const c = Math.cos(ang);
+  const s = Math.sin(ang);
+  return [c * sx, s * sx, c * sh - s * sy, s * sh + c * sy, lerpN(p.e, q.e, t), lerpN(p.f, q.f, t)];
+}
+function interpolateVectorColor(a, b, t) {
+  if (t <= 0) return a;
+  if (t >= 1) return b;
+  return mixColorsOklab(a, b, t) ?? (t < 0.5 ? a : b);
+}
+function sortedStops(g) {
+  return g.stops.slice().sort((x, y) => x.offset - y.offset);
+}
+function sampleGradient(stops, offset) {
+  if (!stops.length) return { color: "transparent", opacity: 1 };
+  const first = stops[0];
+  const last = stops[stops.length - 1];
+  if (offset <= first.offset) return { color: first.color, opacity: first.opacity ?? 1 };
+  if (offset >= last.offset) return { color: last.color, opacity: last.opacity ?? 1 };
+  let i = 0;
+  while (i + 1 < stops.length && stops[i + 1].offset < offset) i++;
+  const x = stops[i];
+  const y = stops[i + 1];
+  const u = y.offset - x.offset > 1e-12 ? (offset - x.offset) / (y.offset - x.offset) : 1;
+  return { color: interpolateVectorColor(x.color, y.color, u), opacity: lerpN(x.opacity ?? 1, y.opacity ?? 1, u) };
+}
+function resampleGradientStops(g, offsets) {
+  const stops = sortedStops(g);
+  return offsets.map((offset) => {
+    const s = sampleGradient(stops, offset);
+    return s.opacity < 1 ? { offset, color: s.color, opacity: s.opacity } : { offset, color: s.color };
+  });
+}
+function lerpAngle(a, b, t) {
+  const d = ((b - a + 180) % 360 + 360) % 360 - 180;
+  return a + d * t;
+}
+function lerpGradient(a, b, t) {
+  if (a.type !== b.type) return null;
+  let stopsA = sortedStops(a);
+  let stopsB = sortedStops(b);
+  if (stopsA.length !== stopsB.length) {
+    const offs = [...stopsA, ...stopsB].map((s) => s.offset).filter(Number.isFinite).sort((x, y) => x - y);
+    const common = offs.filter((o, i) => i === 0 || o - offs[i - 1] > 1e-4);
+    stopsA = resampleGradientStops(a, common);
+    stopsB = resampleGradientStops(b, common);
+  }
+  const stops = stopsA.map((x, i) => {
+    const y = stopsB[i];
+    const opacity = lerpN(x.opacity ?? 1, y.opacity ?? 1, t);
+    const stop = { offset: lerpN(x.offset, y.offset, t), color: interpolateVectorColor(x.color, y.color, t) };
+    if (opacity < 1) stop.opacity = opacity;
+    return stop;
+  });
+  if (a.type === "linear" && b.type === "linear") return { type: "linear", angle: lerpAngle(a.angle ?? 90, b.angle ?? 90, t), stops };
+  const ra = a;
+  const rb = b;
+  return { type: "radial", cx: lerpN(ra.cx ?? 0.5, rb.cx ?? 0.5, t), cy: lerpN(ra.cy ?? 0.5, rb.cy ?? 0.5, t), r: lerpN(ra.r ?? 0.5, rb.r ?? 0.5, t), stops };
+}
+function solidLike(color, like) {
+  return { ...like, stops: like.stops.map((s) => color === null ? { offset: s.offset, color: s.color, opacity: 0 } : { offset: s.offset, color }) };
+}
+function interpolateVectorPaint(a, b, t) {
+  if (t <= 0) return a;
+  if (t >= 1) return b;
+  const pa = hasPaint(a);
+  const pb = hasPaint(b);
+  if (!pa && !pb) return t < 0.5 ? a : b;
+  if (typeof a === "string" && pa && typeof b === "string" && pb) return interpolateVectorColor(a, b, t);
+  if (!pa && typeof b === "string") return interpolateVectorColor("transparent", b, t);
+  if (!pb && typeof a === "string") return interpolateVectorColor(a, "transparent", t);
+  const ga = pa && typeof a === "object" && a ? a : null;
+  const gb = pb && typeof b === "object" && b ? b : null;
+  if (ga && gb) return lerpGradient(ga, gb, t) ?? (t < 0.5 ? a : b);
+  if (gb) return lerpGradient(solidLike(pa ? a : null, gb), gb, t) ?? b;
+  if (ga) return lerpGradient(ga, solidLike(pb ? b : null, ga), t) ?? a;
+  return t < 0.5 ? a : b;
+}
+function interpolateWidthProfiles(a, b, t) {
+  if (!a?.length && !b?.length) return null;
+  const at2 = [...a ?? [], ...b ?? [], { t: 0 }, { t: 1 }].map((p) => p.t).sort((x, y) => x - y);
+  const ts = at2.filter((v2, i) => i === 0 || v2 - at2[i - 1] > 1e-6);
+  return ts.map((pos) => {
+    const x = widthProfileAt(a, pos);
+    const y = widthProfileAt(b, pos);
+    return { t: pos, left: lerpN(x.left, y.left, t), right: lerpN(x.right, y.right, t) };
+  });
+}
+function lerpDashes(a, b, t) {
+  const dashed = (d) => !!d?.length && d.some((v2) => v2 > 0);
+  if (!dashed(a) && !dashed(b)) return t < 0.5 ? a : b;
+  const even = (p) => p.length % 2 ? [...p, ...p] : p;
+  const solid = (p) => {
+    const e = even(p);
+    const out = [];
+    for (let i = 0; i < e.length; i += 2) out.push(e[i] + e[i + 1], 0);
+    return out;
+  };
+  const x = dashed(a) ? even(a) : solid(b);
+  const y = dashed(b) ? even(b) : solid(a);
+  if (x.length !== y.length) return t < 0.5 ? a : b;
+  return x.map((v2, i) => lerpN(v2, y[i], t));
+}
+var SWITCHED_KEYS = ["strokeLinecap", "strokeLinejoin", "fillRule", "strokeAlign", "startArrow", "endArrow", "arrowAlign"];
+function interpolateVectorStyle(a, b, t) {
+  const near2 = t < 0.5 ? a : b;
+  const out = {};
+  const fill = interpolateVectorPaint(a.fill, b.fill, t);
+  if (fill !== void 0) out.fill = fill;
+  const stroke = interpolateVectorPaint(a.stroke, b.stroke, t);
+  if (stroke !== void 0) out.stroke = stroke;
+  if (a.strokeWidth !== void 0 || b.strokeWidth !== void 0) out.strokeWidth = lerpN(a.strokeWidth ?? 1, b.strokeWidth ?? 1, t);
+  for (const key of SWITCHED_KEYS) if (near2[key] !== void 0 && near2[key] !== null) out[key] = near2[key];
+  for (const key of ["startArrowScale", "endArrowScale"])
+    if (a[key] !== void 0 || b[key] !== void 0) out[key] = lerpN(a[key] ?? 1, b[key] ?? 1, t);
+  const dash = lerpDashes(a.strokeDasharray, b.strokeDasharray, t);
+  if (dash?.length) out.strokeDasharray = dash;
+  const profile = interpolateWidthProfiles(a.strokeWidthProfile, b.strokeWidthProfile, t);
+  if (profile) out.strokeWidthProfile = profile;
+  return out;
+}
+function reversedStyle(s) {
+  const out = { ...s };
+  out.startArrow = s.endArrow;
+  out.endArrow = s.startArrow;
+  out.startArrowScale = s.endArrowScale;
+  out.endArrowScale = s.startArrowScale;
+  if (s.strokeWidthProfile?.length) out.strokeWidthProfile = reverseWidthProfile(s.strokeWidthProfile);
+  for (const k of ["startArrow", "endArrow", "startArrowScale", "endArrowScale"]) if (out[k] === void 0) delete out[k];
+  return out;
+}
+var STYLE_KEYS2 = [
+  "fill",
+  "stroke",
+  "strokeWidth",
+  "strokeLinecap",
+  "strokeLinejoin",
+  "strokeDasharray",
+  "fillRule",
+  "strokeAlign",
+  "startArrow",
+  "endArrow",
+  "arrowAlign",
+  "startArrowScale",
+  "endArrowScale",
+  "strokeWidthProfile"
+];
+function styleOf(n) {
+  const out = {};
+  for (const k of STYLE_KEYS2) if (n[k] !== void 0) out[k] = n[k];
+  return out;
+}
+function contoursOf(node, m) {
+  return expandVectorCorners(node.subpaths).map((sp) => subpathToMorphContour(sp, m)).filter((c) => !!c);
+}
+function preparePathMorph(a, b, options, ma = nodeMatrix(a), mb = nodeMatrix(b)) {
+  const corr = correspondMorphContours(contoursOf(a, ma), contoursOf(b, mb), options);
+  const sim = procrustes(corr.a, corr.b);
+  const styleA = styleOf(a);
+  const styleB = corr.reversed ? reversedStyle(styleOf(b)) : styleOf(b);
+  const rigid = !isIdentityMatrix(ma) || !isIdentityMatrix(mb);
+  const id = options.id ?? a.id;
+  return (t) => {
+    const contours = interpolateMorphContours(corr.a, corr.b, t, { linear: options.linear, rigidity: options.rigidity, similarity: sim });
+    const m = rigid ? interpolateRigidMatrix(ma, mb, t) : IDENTITY_MATRIX;
+    const back = rigid ? invertMatrix(m) : IDENTITY_MATRIX;
+    const subpaths = contours.map((c, k) => {
+      const closed = t <= 0 ? corr.a[k].closed : t >= 1 ? corr.b[k].closed : corr.a[k].closed && corr.b[k].closed;
+      return morphContourToSubpath({ closed: corr.a[k].closed && corr.b[k].closed, pts: c.pts }, back, closed);
+    });
+    const node = { id, type: "path", subpaths, ...interpolateVectorStyle(styleA, styleB, t) };
+    const opacity = lerpN(a.opacity ?? 1, b.opacity ?? 1, t);
+    if (opacity < 1) node.opacity = opacity;
+    if (rigid && !isIdentityMatrix(m)) node.transform = m;
+    return node;
+  };
+}
+function flattenPaths(node, parent = IDENTITY_MATRIX) {
+  const m = multiplyMatrices(nodeMatrix(node), parent);
+  if (node.type === "path") return [{ path: node, m, opacity: 1 }];
+  const o = node.opacity ?? 1;
+  return node.children.filter((c) => c.visible !== false).flatMap((c) => flattenPaths(c, m)).map((e) => ({ ...e, opacity: e.opacity * o }));
+}
+var placedBounds = (path, m) => boundsOfPoints(contoursOf(path, m).flatMap((c) => c.pts));
+function collapsedPath(path, m, from, to) {
+  const own = placedBounds(path, m);
+  const c = own ? [own.x + own.width / 2, own.y + own.height / 2] : [0, 0];
+  const fx = from && from.width > 0 ? (c[0] - from.x) / from.width : 0.5;
+  const fy = from && from.height > 0 ? (c[1] - from.y) / from.height : 0.5;
+  const p = to ? { x: to.x + to.width * fx, y: to.y + to.height * fy } : { x: c[0], y: c[1] };
+  const subpaths = path.subpaths.map((sp) => ({ closed: sp.closed, anchors: sp.anchors.map(() => ({ x: p.x, y: p.y })) }));
+  const { transform: _t, ...rest } = path;
+  return { ...rest, subpaths };
+}
+function createVectorMorph(a, b, options = {}) {
+  if (a.type === "path" && b.type === "path") {
+    const at2 = preparePathMorph(a, b, options);
+    return { at: at2 };
+  }
+  const pa = flattenPaths(a);
+  const pb = flattenPaths(b);
+  const ba = unionBounds(pa.map((e) => placedBounds(e.path, e.m)));
+  const bb = unionBounds(pb.map((e) => placedBounds(e.path, e.m)));
+  const id = options.id ?? a.id;
+  const parts = [];
+  const opacities = [];
+  for (let i = 0; i < Math.max(pa.length, pb.length); i++) {
+    const x = pa[i];
+    const y = pb[i];
+    const sub3 = { ...options, id: `${id}-${i}`, starts: void 0 };
+    if (x && y) {
+      parts.push(preparePathMorph(x.path, y.path, sub3, x.m, y.m));
+      opacities.push([x.opacity, y.opacity]);
+    } else if (x) {
+      parts.push(preparePathMorph(x.path, collapsedPath(x.path, x.m, ba, bb), sub3, x.m, IDENTITY_MATRIX));
+      opacities.push([x.opacity, x.opacity]);
+    } else if (y) {
+      parts.push(preparePathMorph(collapsedPath(y.path, y.m, bb, ba), y.path, sub3, IDENTITY_MATRIX, y.m));
+      opacities.push([y.opacity, y.opacity]);
+    }
+  }
+  return {
+    at: (t) => {
+      const children = parts.map((p, i) => {
+        const n = p(t);
+        const o = lerpN(opacities[i][0], opacities[i][1], t) * (n.opacity ?? 1);
+        if (o < 1) n.opacity = o;
+        else delete n.opacity;
+        return n;
+      });
+      const group = { id, type: "group", children };
+      return group;
+    }
+  };
+}
+function interpolateVectorPaths(a, b, t, options = {}) {
+  return createVectorMorph(a, b, options).at(t);
+}
+var keyframeMorphs = /* @__PURE__ */ new WeakMap();
+function evaluateVectorPathKeyframes(keyframes, time, options = {}) {
+  const keys = keyframes.filter((k) => Number.isFinite(k.time)).sort((x, y) => x.time - y.time);
+  if (!keys.length) return null;
+  if (!(time > keys[0].time)) return keys[0].value;
+  const last = keys[keys.length - 1];
+  if (time >= last.time) return last.value;
+  let i = 0;
+  while (i + 1 < keys.length && keys[i + 1].time <= time) i++;
+  const a = keys[i];
+  const b = keys[i + 1];
+  if (time === a.time) return a.value;
+  if (a.easing === "hold") return a.value;
+  const span = b.time - a.time;
+  const u = Math.min(1, Math.max(0, evaluateEasing(a.easing, (time - a.time) / span, span)));
+  let inner = keyframeMorphs.get(a.value);
+  if (!inner) keyframeMorphs.set(a.value, inner = /* @__PURE__ */ new WeakMap());
+  let morph = inner.get(b.value);
+  if (!morph) inner.set(b.value, morph = createVectorMorph(a.value, b.value, options));
+  return morph.at(u);
+}
+
+// src/vector/blendGroup.ts
+var DEFAULT_VECTOR_BLEND_STEPS = 5;
+var DEFAULT_VECTOR_BLEND_DISTANCE = 20;
+var VECTOR_BLEND_MAX_STEPS = 1e3;
+var VECTOR_BLEND_MAX_SMOOTH_STEPS = 256;
+function isVectorBlendGroup(node) {
+  return !!node && node.type === "group" && !!node.blend;
+}
+function vectorBlendKeys(group) {
+  return group.children.filter((c) => !c.blendStep);
+}
+function resolveVectorBlendOptions(options) {
+  return {
+    spacing: options?.spacing ?? "steps",
+    steps: options?.steps ?? DEFAULT_VECTOR_BLEND_STEPS,
+    distance: options?.distance ?? DEFAULT_VECTOR_BLEND_DISTANCE,
+    orientToSpine: options?.orientToSpine ?? false,
+    linear: options?.linear ?? false
+  };
+}
+function paintColors(p) {
+  if (typeof p === "string") return [p];
+  if (p && typeof p === "object") return p.stops.map((s) => s.color);
+  return [];
+}
+function vectorBlendColorDistance(a, b) {
+  const pa = collectPathNodes(a)[0];
+  const pb = collectPathNodes(b)[0];
+  if (!pa || !pb) return 0;
+  let d = 0;
+  for (const key of ["fill", "stroke"]) {
+    const ca = paintColors(pa[key]);
+    const cb = paintColors(pb[key]);
+    ca.forEach((c, i) => {
+      const other = cb[i] ?? cb[0];
+      if (other === void 0) return;
+      const x = hexToRgba(c);
+      const y = hexToRgba(other);
+      if (!x || !y) return;
+      d = Math.max(d, Math.abs(x.r - y.r), Math.abs(x.g - y.g), Math.abs(x.b - y.b), Math.abs(x.a - y.a));
+    });
+  }
+  return d;
+}
+var centreOf = (n) => {
+  const b = vectorNodeBounds(n);
+  return b ? [b.x + b.width / 2, b.y + b.height / 2] : [0, 0];
+};
+function vectorBlendStepCount(a, b, options, length2) {
+  const o = resolveVectorBlendOptions(options);
+  if (o.spacing === "distance") {
+    const d = Math.max(0.01, o.distance);
+    return Math.min(VECTOR_BLEND_MAX_STEPS, Math.max(0, Math.round(length2 / d) - 1));
+  }
+  if (o.spacing === "smoothColor") {
+    const cd = vectorBlendColorDistance(a, b);
+    if (cd > 1 / 255) return Math.min(VECTOR_BLEND_MAX_SMOOTH_STEPS, Math.max(1, Math.ceil(cd * 255 / 2)));
+    const ba = vectorNodeBounds(a);
+    const bb = vectorNodeBounds(b);
+    const dist4 = ba && bb ? Math.max(Math.abs(ba.x - bb.x), Math.abs(ba.y - bb.y), Math.abs(ba.x + ba.width - bb.x - bb.width), Math.abs(ba.y + ba.height - bb.y - bb.height)) : length2;
+    return Math.min(VECTOR_BLEND_MAX_SMOOTH_STEPS, Math.max(1, Math.ceil(dist4 / 2)));
+  }
+  return Math.min(VECTOR_BLEND_MAX_STEPS, Math.max(1, Math.round(Number.isFinite(o.steps) ? o.steps : DEFAULT_VECTOR_BLEND_STEPS)));
+}
+function vectorBlendRail(sp) {
+  const pts = [];
+  const angles = [];
+  const push = (p, tangent2) => {
+    const last = pts[pts.length - 1];
+    if (last && Math.hypot(p[0] - last[0], p[1] - last[1]) < 1e-9) return;
+    pts.push(p);
+    angles.push(Math.atan2(tangent2[1], tangent2[0]));
+  };
+  const count = subpathSegmentCount(sp);
+  for (let i = 0; i < count; i++) {
+    const seg = subpathSegment(sp, i);
+    const samples = seg.length === 2 ? 1 : 32;
+    if (i === 0) push(seg[0], segmentTangent(seg, 0));
+    for (let k = 1; k <= samples; k++) push(segmentPoint(seg, k / samples), segmentTangent(seg, k / samples));
+  }
+  if (pts.length < 2) return null;
+  const cum = [0];
+  for (let i = 1; i < pts.length; i++) cum.push(cum[i - 1] + Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]));
+  return { pts, cum, angles, total: cum[cum.length - 1], closed: sp.closed };
+}
+function vectorBlendRailAt(rail, s) {
+  let len2 = Number.isFinite(s) ? s : 0;
+  if (rail.closed && rail.total > 0) len2 = (len2 % rail.total + rail.total) % rail.total;
+  len2 = Math.min(rail.total, Math.max(0, len2));
+  let lo = 0;
+  let hi = rail.cum.length - 1;
+  while (hi - lo > 1) {
+    const mid = lo + hi >> 1;
+    if (rail.cum[mid] <= len2) lo = mid;
+    else hi = mid;
+  }
+  const span = rail.cum[hi] - rail.cum[lo];
+  const u = span > 1e-12 ? (len2 - rail.cum[lo]) / span : 0;
+  const a = rail.pts[lo];
+  const b = rail.pts[hi];
+  return { point: [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u], angle: Math.atan2(b[1] - a[1], b[0] - a[0]) };
+}
+function vectorBlendSpine(group) {
+  const keys = vectorBlendKeys(group);
+  if (keys.length < 2) return null;
+  const stored = group.blend?.spine;
+  if (stored && stored.anchors.length >= 2) {
+    const rail2 = vectorBlendRail(stored);
+    if (rail2) {
+      const end = rail2.closed ? rail2.total * (1 - 1 / keys.length) : rail2.total;
+      return { spine: stored, rail: rail2, stops: keys.map((_, i) => end * i / (keys.length - 1)), replaced: true };
+    }
+  }
+  const centres = keys.map(centreOf);
+  const spine = { closed: false, anchors: centres.map((c) => ({ x: c[0], y: c[1] })) };
+  const stops = [0];
+  for (let i = 1; i < centres.length; i++) stops.push(stops[i - 1] + Math.hypot(centres[i][0] - centres[i - 1][0], centres[i][1] - centres[i - 1][1]));
+  const rail = vectorBlendRail(spine) ?? { pts: centres, cum: stops, angles: centres.map(() => 0), total: stops[stops.length - 1], closed: false };
+  return { spine, rail, stops, replaced: false };
+}
+function vectorBlendKeyTargets(group) {
+  const s = vectorBlendSpine(group);
+  return s ? s.stops.map((stop) => vectorBlendRailAt(s.rail, stop).point) : [];
+}
+var morphCache = /* @__PURE__ */ new WeakMap();
+function morphFor(a, b, blend) {
+  const starts = [blend.starts?.[a.id] ?? null, blend.starts?.[b.id] ?? null];
+  const key = JSON.stringify([!!blend.linear, starts]);
+  let inner = morphCache.get(a);
+  if (!inner) morphCache.set(a, inner = /* @__PURE__ */ new WeakMap());
+  let byKey = inner.get(b);
+  if (!byKey) inner.set(b, byKey = /* @__PURE__ */ new Map());
+  let morph = byKey.get(key);
+  if (!morph) byKey.set(key, morph = createVectorMorph(a, b, { linear: blend.linear, starts }));
+  return morph;
+}
+var wrapAngle = (a) => Math.atan2(Math.sin(a), Math.cos(a));
+function asStep(node, id) {
+  const rename = (n, nid) => n.type === "group" ? { ...n, id: nid, children: n.children.map((c, i) => rename(c, `${nid}.${i}`)) } : { ...n, id: nid };
+  return { ...rename(node, id), blendStep: true, locked: true };
+}
+function generateVectorBlendChildren(group) {
+  const keys = vectorBlendKeys(group);
+  const blend = group.blend;
+  if (!blend || keys.length < 2) return keys;
+  const spine = vectorBlendSpine(group);
+  if (!spine) return keys;
+  const out = [];
+  let counter = 0;
+  keys.forEach((a, i) => {
+    out.push(a);
+    const b = keys[i + 1];
+    if (!b) return;
+    const s0 = spine.stops[i];
+    const s1 = spine.stops[i + 1];
+    const n = vectorBlendStepCount(a, b, blend, Math.abs(s1 - s0));
+    const morph = morphFor(a, b, blend);
+    const p0 = vectorBlendRailAt(spine.rail, s0);
+    const p1 = vectorBlendRailAt(spine.rail, s1);
+    for (let j = 1; j <= n; j++) {
+      const t = j / (n + 1);
+      let step = morph.at(t);
+      if (spine.replaced) {
+        const p = vectorBlendRailAt(spine.rail, s0 + (s1 - s0) * t);
+        const dx = p.point[0] - (p0.point[0] + (p1.point[0] - p0.point[0]) * t);
+        const dy = p.point[1] - (p0.point[1] + (p1.point[1] - p0.point[1]) * t);
+        let m = Math.hypot(dx, dy) > 1e-9 ? translateMatrix(dx, dy) : IDENTITY_MATRIX;
+        if (blend.orientToSpine) {
+          const turn = wrapAngle(p.angle - (p0.angle + wrapAngle(p1.angle - p0.angle) * t));
+          if (Math.abs(turn) > 1e-9) {
+            const c = centreOf(step);
+            const origin = { x: c[0] + m[4], y: c[1] + m[5] };
+            m = multiplyMatrices(m, rotateMatrix(turn * 180 / Math.PI, origin));
+          }
+        }
+        if (m !== IDENTITY_MATRIX) step = transformVectorNode(step, m);
+      }
+      out.push(asStep(step, `${group.id}~${++counter}`));
+    }
+  });
+  return out;
+}
+var childrenCache = /* @__PURE__ */ new WeakMap();
+var sameList = (a, b) => a.length === b.length && a.every((n, i) => n === b[i]);
+function blendChildren(group) {
+  const keys = vectorBlendKeys(group);
+  const sig = `${group.id}|${JSON.stringify(group.blend)}`;
+  const cached = keys[0] ? childrenCache.get(keys[0]) : void 0;
+  let children;
+  if (cached && cached.sig === sig && sameList(cached.keys, keys)) children = cached.children;
+  else {
+    children = generateVectorBlendChildren(group);
+    if (keys[0]) childrenCache.set(keys[0], { sig, keys, children });
+  }
+  return sameList(children, group.children) ? group.children : children;
+}
+function refreshVectorBlends(nodes) {
+  let changed = false;
+  const out = nodes.map((n) => {
+    if (n.type !== "group") return n;
+    const inner = refreshVectorBlends(n.children);
+    let next = inner === n.children ? n : { ...n, children: inner };
+    if (next.blend) {
+      const children = blendChildren(next);
+      if (children !== next.children) next = { ...next, children };
+    }
+    if (next !== n) changed = true;
+    return next;
+  });
+  return changed ? out : nodes;
+}
+function plain2(node, newId) {
+  const { blendStep: _s, locked: _l, ...rest } = node;
+  const renamed = { ...rest, id: newId() };
+  if (renamed.type === "group") renamed.children = renamed.children.map((c) => plain2(c, newId));
+  return renamed;
+}
+function expandVectorBlend(group, newId) {
+  const { blend: _b, ...rest } = group;
+  return { ...rest, children: group.children.map((c) => c.blendStep ? plain2(c, newId) : c) };
+}
+function releaseVectorBlend(group, newId) {
+  const m = nodeMatrix(group);
+  const opacity = group.opacity;
+  const keys = vectorBlendKeys(group).map((c) => group.transform ? transformVectorNode(c, m) : c).map((c) => opacity !== void 0 && opacity < 1 ? { ...c, opacity: (c.opacity ?? 1) * opacity } : c);
+  const spine = group.blend?.spine;
+  if (!spine || spine.anchors.length < 2) return keys;
+  const path = { id: newId(), type: "path", name: "Spine", fill: null, stroke: null, subpaths: [{ closed: spine.closed, anchors: spine.anchors.map((a) => ({ ...a })) }] };
+  return [...keys, group.transform ? transformVectorNode(path, m) : path];
+}
+
 // src/vector/snap.ts
 var VECTOR_CONSTRUCTION_ANGLES = [0, 45, 90, 135];
 function constrainToLeave(leave, p) {
@@ -2242,8 +4123,9 @@ var VectorSnapTargets = class _VectorSnapTargets {
     let anchors = BUDGET;
     let segments = BUDGET;
     const visit = (list, parent) => {
-      for (const n of list) {
-        if (exclude.has(n.id) || n.visible === false) continue;
+      for (const stored of list) {
+        if (exclude.has(stored.id) || stored.visible === false) continue;
+        const n = contains(stored, exclude) ? stored : expandVectorAppearance(stored);
         const m = multiplyMatrices(nodeMatrix(n), parent);
         if (n.type === "group") {
           visit(n.children, m);
@@ -2558,14 +4440,14 @@ var VectorSnapTargets = class _VectorSnapTargets {
    * corner) slides along it until one of them is on a target. An axis that snaps to nothing
    * may match another object's width or height instead.
    */
-  snapScale(frame, handle, sx, sy, mods, tol) {
-    const toDoc = frame.angle ? rotateMatrix(frame.angle) : IDENTITY_MATRIX;
-    const toLocal = frame.angle ? rotateMatrix(-frame.angle) : IDENTITY_MATRIX;
+  snapScale(frame2, handle, sx, sy, mods, tol) {
+    const toDoc = frame2.angle ? rotateMatrix(frame2.angle) : IDENTITY_MATRIX;
+    const toLocal = frame2.angle ? rotateMatrix(-frame2.angle) : IDENTITY_MATRIX;
     const corner = handle.length === 2;
     const proportional = !!mods.shift;
-    const centre = { x: frame.x + frame.width / 2, y: frame.y + frame.height / 2 };
-    const origin = mods.alt ? centre : handlePos(opposite(handle), frame);
-    const hp = handlePos(handle, frame);
+    const centre = { x: frame2.x + frame2.width / 2, y: frame2.y + frame2.height / 2 };
+    const origin = mods.alt ? centre : handlePos(opposite(handle), frame2);
+    const hp = handlePos(handle, frame2);
     const d0 = { x: hp.x - origin.x, y: hp.y - origin.y };
     const valid = (n, s) => Number.isFinite(n) && n * s > 0;
     const nearest = (v2, lines) => {
@@ -2591,7 +4473,7 @@ var VectorSnapTargets = class _VectorSnapTargets {
         const q = applyMatrix(toLocal, { x: tx ?? p.x, y: ty ?? p.y });
         let cx = (q.x - origin.x) / d0.x;
         let cy = (q.y - origin.y) / d0.y;
-        if (!frame.angle) {
+        if (!frame2.angle) {
           if (tx === null) cx = sx;
           if (ty === null) cy = sy;
         }
@@ -2620,7 +4502,7 @@ var VectorSnapTargets = class _VectorSnapTargets {
         if (!best || (inLine === best.inLine ? moved < best.moved : !inLine)) best = { s, inLine, moved, snap: found2 };
       };
       for (const h of [handle, ...ends]) {
-        const hv = handlePos(h, frame);
+        const hv = handlePos(h, frame2);
         const v2 = { x: hv.x - origin.x, y: hv.y - origin.y };
         const base = applyMatrix(toDoc, { x: origin.x + c.x * v2.x, y: origin.y + c.y * v2.y });
         const dir = applyMatrix(toDoc, { x: e.x * v2.x, y: e.y * v2.y });
@@ -2655,25 +4537,25 @@ var VectorSnapTargets = class _VectorSnapTargets {
     const movesY = handle !== "e" && handle !== "w";
     const sized = [];
     if (!proportional) {
-      if (movesX && !snap.hx && !(frame.angle && snap.hy) && frame.width > 1e-9) {
-        const len2 = this.matchSize(Math.abs(out.sx) * frame.width, tol);
+      if (movesX && !snap.hx && !(frame2.angle && snap.hy) && frame2.width > 1e-9) {
+        const len2 = this.matchSize(Math.abs(out.sx) * frame2.width, tol);
         if (len2 !== null && len2 > 0) {
-          out.sx = Math.sign(out.sx || 1) * (len2 / frame.width);
+          out.sx = Math.sign(out.sx || 1) * (len2 / frame2.width);
           sized.push("x");
         }
       }
-      if (movesY && !snap.hy && !(frame.angle && snap.hx) && frame.height > 1e-9) {
-        const len2 = this.matchSize(Math.abs(out.sy) * frame.height, tol);
+      if (movesY && !snap.hy && !(frame2.angle && snap.hx) && frame2.height > 1e-9) {
+        const len2 = this.matchSize(Math.abs(out.sy) * frame2.height, tol);
         if (len2 !== null && len2 > 0) {
-          out.sy = Math.sign(out.sy || 1) * (len2 / frame.height);
+          out.sy = Math.sign(out.sy || 1) * (len2 / frame2.height);
           sized.push("y");
         }
       }
     }
-    const x0 = origin.x + (frame.x - origin.x) * out.sx;
-    const x1 = origin.x + (frame.x + frame.width - origin.x) * out.sx;
-    const y0 = origin.y + (frame.y - origin.y) * out.sy;
-    const y1 = origin.y + (frame.y + frame.height - origin.y) * out.sy;
+    const x0 = origin.x + (frame2.x - origin.x) * out.sx;
+    const x1 = origin.x + (frame2.x + frame2.width - origin.x) * out.sx;
+    const y0 = origin.y + (frame2.y - origin.y) * out.sy;
+    const y1 = origin.y + (frame2.y + frame2.height - origin.y) * out.sy;
     const box = { x0: Math.min(x0, x1), x1: Math.max(x0, x1), y0: Math.min(y0, y1), y1: Math.max(y0, y1) };
     const page = [
       { x: box.x0, y: box.y0 },
@@ -2781,8 +4663,8 @@ function solveOnSegment(seg, base, cond) {
 }
 
 // src/vector/pathEdit.ts
-var EPS3 = 1e-9;
-var unit2 = (x, y) => {
+var EPS4 = 1e-9;
+var unit3 = (x, y) => {
   const l = Math.hypot(x, y);
   return l > 1e-12 && Number.isFinite(l) ? [x / l, y / l] : null;
 };
@@ -2793,16 +4675,16 @@ function cubicOf(sp, i) {
   return [a, [a[0] + (b[0] - a[0]) / 3, a[1] + (b[1] - a[1]) / 3], [a[0] + 2 * (b[0] - a[0]) / 3, a[1] + 2 * (b[1] - a[1]) / 3], b];
 }
 var isLine = (sp, i) => subpathSegment(sp, i).length === 2;
-function startTangent(c) {
+function startTangent2(c) {
   for (let k = 1; k < 4; k++) {
-    const u = unit2(c[k][0] - c[0][0], c[k][1] - c[0][1]);
+    const u = unit3(c[k][0] - c[0][0], c[k][1] - c[0][1]);
     if (u) return u;
   }
   return [1, 0];
 }
-function endTangent(c) {
+function endTangent2(c) {
   for (let k = 2; k >= 0; k--) {
-    const u = unit2(c[3][0] - c[k][0], c[3][1] - c[k][1]);
+    const u = unit3(c[3][0] - c[k][0], c[3][1] - c[k][1]);
     if (u) return u;
   }
   return [1, 0];
@@ -2810,7 +4692,7 @@ function endTangent(c) {
 function sample(c, n, out, withStart) {
   for (let i = withStart ? 0 : 1; i <= n; i++) out.push(segmentPoint(c, i / n));
 }
-var onAnchor2 = (a, h) => !h || Math.abs(h.x - a.x) < EPS3 && Math.abs(h.y - a.y) < EPS3;
+var onAnchor2 = (a, h) => !h || Math.abs(h.x - a.x) < EPS4 && Math.abs(h.y - a.y) < EPS4;
 function tidy(a, keepType = true) {
   const next = cloneAnchor(a);
   if (onAnchor2(next, next.in)) delete next.in;
@@ -2872,8 +4754,8 @@ function removeAnchorKeepingShape(sp, index) {
       const pts = [];
       sample(left, N, pts, true);
       sample(right, N, pts, false);
-      const t0 = startTangent(left);
-      const t1 = endTangent(right);
+      const t0 = startTangent2(left);
+      const t1 = endTangent2(right);
       const { curve } = fitAcross(pts, N, t0, t1);
       if ([curve.p1, curve.p2].every((p) => Number.isFinite(p[0]) && Number.isFinite(p[1]))) {
         anchors[pi] = tidy({ ...anchors[pi], out: { x: curve.p1[0], y: curve.p1[1] } });
@@ -3074,7 +4956,7 @@ function smoothSubpath(sp, amount = 1, only) {
     const prev = orig[(i + n - 1) % n];
     const next = orig[(i + 1) % n];
     const p = orig[i];
-    const dir = unit2(next.x - prev.x, next.y - prev.y);
+    const dir = unit3(next.x - prev.x, next.y - prev.y);
     if (!dir) continue;
     const li = dist2(p, prev) / 3;
     const lo = dist2(p, next) / 3;
@@ -3140,13 +5022,13 @@ function mergePair(a, b, tol) {
   }
   const ca = a.line ? [a0, a0, a3, a3] : a.c;
   const cb = b.line ? [a3, a3, b3, b3] : b.c;
-  const ta = endTangent(ca);
-  const tb = startTangent(cb);
+  const ta = endTangent2(ca);
+  const tb = startTangent2(cb);
   if (ta[0] * tb[0] + ta[1] * tb[1] < 0.99) return null;
   const pts = [];
   sample(ca, 16, pts, true);
   sample(cb, 16, pts, false);
-  const { curve, error } = fitAcross(pts, 16, startTangent(ca), endTangent(cb));
+  const { curve, error } = fitAcross(pts, 16, startTangent2(ca), endTangent2(cb));
   return error <= tol ? { c: [curve.p0, curve.p1, curve.p2, curve.p3], line: false } : null;
 }
 function removeRedundantPoints(sp, tolerance) {
@@ -3278,14 +5160,14 @@ function lineHits(p, q, seg) {
   return out;
 }
 var near = (a, b, eps) => Math.abs(a[0] - b[0]) <= eps && Math.abs(a[1] - b[1]) <= eps;
-var degenerate = (seg, eps) => seg.every((p) => near(p, seg[0], eps));
+var degenerate2 = (seg, eps) => seg.every((p) => near(p, seg[0], eps));
 function arc(l, a, b, eps) {
   const n = l.segs.length;
   const segs = [];
   const chord = [];
   const push = (k, t0, t1) => {
     const piece = t0 <= 0 && t1 >= 1 ? l.segs[k].slice() : subSegment(l.segs[k], t0, t1);
-    if (!degenerate(piece, eps)) {
+    if (!degenerate2(piece, eps)) {
       segs.push(piece);
       chord.push(l.chord[k]);
     }
@@ -3743,8 +5625,9 @@ function recognizeInkShape(points, options = {}) {
 // 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 visit = (stored, parent, inside) => {
+    if (stored.visible === false || stored.locked && !options.locked) return;
+    const node = options.expand === false ? stored : expandVectorAppearance(stored);
     const picked = inside || roots === null || roots.includes(node.id);
     if (node.type === "group") {
       const m = multiplyMatrices(nodeMatrix(node), parent);
@@ -3798,7 +5681,7 @@ var STROKE_KEYS = [
   "strokeWidthProfile"
 ];
 function vectorResultStyle(node, paint, edge = false) {
-  const { id: _id, subpaths: _s, transform: _t, ...rest } = node;
+  const { id: _id, subpaths: _s, transform: _t, effects: _e, booleanOperation: _b, ...rest } = node;
   const base = { ...rest, fillRule: "nonzero" };
   if (edge) {
     for (const k of STROKE_KEYS) delete base[k];
@@ -3962,6 +5845,15 @@ var DEFAULT_VECTOR_PATH_EDIT = {
   fillGap: 0
 };
 var VECTOR_PENCIL_STRING_PX = 100;
+function blendOptionsOf(input) {
+  const out = {};
+  if (input.spacing === "steps" || input.spacing === "distance" || input.spacing === "smoothColor") out.spacing = input.spacing;
+  if (typeof input.steps === "number" && Number.isFinite(input.steps)) out.steps = Math.min(1e3, Math.max(1, Math.round(input.steps)));
+  if (typeof input.distance === "number" && Number.isFinite(input.distance) && input.distance > 0) out.distance = input.distance;
+  if (typeof input.orientToSpine === "boolean") out.orientToSpine = input.orientToSpine;
+  if (typeof input.linear === "boolean") out.linear = input.linear;
+  return out;
+}
 var VECTOR_STYLE_KEYS = [
   "fill",
   "stroke",
@@ -4168,11 +6060,11 @@ function getTransformHandlePositions(box) {
     { handle: "rotate", x: x + w / 2, y: y - VECTOR_ROTATE_HANDLE_OFFSET }
   ];
 }
-function getVectorSelectionBoxGeometry(frame, viewport) {
+function getVectorSelectionBoxGeometry(frame2, viewport) {
   const z = viewport.zoom;
-  const box = { x: frame.x * z + viewport.x, y: frame.y * z + viewport.y, width: frame.width * z, height: frame.height * z };
-  const rot = rotateMatrix(frame.angle, { x: viewport.x, y: viewport.y });
-  const toScreen2 = (p) => frame.angle ? applyMatrix(rot, p) : { x: p.x, y: p.y };
+  const box = { x: frame2.x * z + viewport.x, y: frame2.y * z + viewport.y, width: frame2.width * z, height: frame2.height * z };
+  const rot = rotateMatrix(frame2.angle, { x: viewport.x, y: viewport.y });
+  const toScreen2 = (p) => frame2.angle ? applyMatrix(rot, p) : { x: p.x, y: p.y };
   const handles = getTransformHandlePositions(box).map((h) => ({ ...h, screen: toScreen2(h) }));
   const corners2 = [
     { x: box.x, y: box.y },
@@ -4181,7 +6073,7 @@ function getVectorSelectionBoxGeometry(frame, viewport) {
     { x: box.x, y: box.y + box.height }
   ].map(toScreen2);
   const r = (n) => Math.round(n * 1e3) / 1e3;
-  return { box, angle: frame.angle, transform: frame.angle ? `rotate(${r(frame.angle)} ${r(viewport.x)} ${r(viewport.y)})` : "", handles, corners: corners2 };
+  return { box, angle: frame2.angle, transform: frame2.angle ? `rotate(${r(frame2.angle)} ${r(viewport.x)} ${r(viewport.y)})` : "", handles, corners: corners2 };
 }
 var RESIZE_CURSOR_ORDER = ["ew-resize", "nwse-resize", "ns-resize", "nesw-resize"];
 var HANDLE_ANGLES = { e: 0, se: 45, s: 90, sw: 135, w: 180, nw: 225, n: 270, ne: 315 };
@@ -4205,7 +6097,8 @@ var TOOL_LABELS = {
   eraser: "Eraser",
   width: "Width",
   shapeBuilder: "Shape Builder",
-  paintBucket: "Paint Bucket"
+  paintBucket: "Paint Bucket",
+  blend: "Blend"
 };
 var TOOL_KEYS = {
   v: "select",
@@ -4222,7 +6115,8 @@ var TOOL_KEYS = {
   e: "eraser",
   w: "width",
   m: "shapeBuilder",
-  b: "paintBucket"
+  b: "paintBucket",
+  j: "blend"
 };
 function vectorToolLabel(tool) {
   return TOOL_LABELS[tool];
@@ -4242,7 +6136,8 @@ var VECTOR_TOOL_SHORTCUTS = {
   eraser: "E",
   width: "W",
   shapeBuilder: "M",
-  paintBucket: "B"
+  paintBucket: "B",
+  blend: "J"
 };
 var VECTOR_TOOL_GLYPHS = {
   select: "\u2196",
@@ -4259,7 +6154,8 @@ var VECTOR_TOOL_GLYPHS = {
   eraser: "\u232B",
   width: "\u21F9",
   shapeBuilder: "\u2295",
-  paintBucket: "\u25CD"
+  paintBucket: "\u25CD",
+  blend: "\u29D3"
 };
 var SHAPE_TOOLS = /* @__PURE__ */ new Set(["rect", "ellipse", "polygon", "star", "line"]);
 var BOOLEAN_OPS = {
@@ -4313,6 +6209,12 @@ function spliceTree(nodes, id, replacements) {
   return changed ? out : nodes;
 }
 var toPoint2 = (p) => [p.x, p.y];
+var placementOf = (n) => ({
+  ...n.transform ? { transform: n.transform } : {},
+  ...n.visible === false ? { visible: false } : {},
+  ...n.locked ? { locked: true } : {},
+  ...n.booleanOperation ? { booleanOperation: n.booleanOperation } : {}
+});
 var isRoot = (m) => m === IDENTITY_MATRIX || m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0;
 var idCounter = 0;
 var defaultCreateId = () => `vn-${Date.now().toString(36)}${(++idCounter).toString(36)}`;
@@ -4347,6 +6249,9 @@ var VectorEditorController = class {
   /** Paint bucket map of the visible outlines. */
   fillCache = null;
   builderPreview = null;
+  blendStart = null;
+  /** Options new blends get (the toolbars edit them along with the selected blend's). */
+  blendDefaults = {};
   /** What the highlight shows, to skip notifying when the pointer stays over the same face. */
   builderHoverKey = null;
   createId;
@@ -4361,6 +6266,7 @@ var VectorEditorController = class {
   constructor(options = {}) {
     this.history = options.history ?? new HistoryManager();
     this.doc = options.document ? cloneVectorDocument(options.document) : { width: 800, height: 600, nodes: [] };
+    this.doc = this.refreshed(this.doc);
     this.tool = options.tool ?? "select";
     this.defaults = { ...DEFAULT_DEFAULTS, ...options.defaults ?? {} };
     this.viewport = { x: 0, y: 0, zoom: 1, ...options.viewport ?? {} };
@@ -4425,6 +6331,8 @@ var VectorEditorController = class {
       pen: this.pen,
       pointer: this.pointer,
       builder: this.builderPreview,
+      blendStart: this.blendStart,
+      blendDefaults: this.blendDefaults,
       canUndo: h.canUndo,
       canRedo: h.canRedo,
       undoLabel: h.undoName,
@@ -4432,7 +6340,15 @@ var VectorEditorController = class {
       revision: this.revision
     };
   }
+  /** `doc` with its blends' steps brought up to date (the same object when they already are). */
+  refreshed(doc) {
+    const nodes = refreshVectorBlends(doc.nodes);
+    return nodes === doc.nodes ? doc : { ...doc, nodes };
+  }
   notify(docChanged = false) {
+    const fresh = this.refreshed(this.doc);
+    if (fresh !== this.doc) this.doc = fresh;
+    if (this.blendStart && !this.getNode(this.blendStart.nodeId)) this.blendStart = null;
     this.revision++;
     this.state = this.computeState();
     if (docChanged) this.onChange?.(this.doc);
@@ -4488,6 +6404,8 @@ var VectorEditorController = class {
         return this.builderPreview.mode === "erase" ? "not-allowed" : "cell";
       case "paintBucket":
         return this.builderPreview ? "cell" : "crosshair";
+      case "blend":
+        return h?.nodeId ? this.blendStart && this.blendStart.nodeId !== h.nodeId ? "copy" : "pointer" : "crosshair";
       default:
         return "crosshair";
     }
@@ -4521,8 +6439,12 @@ var VectorEditorController = class {
     }
     this.notify(docChanged);
   }
-  /** Records the change from `before` to the current state as one undo step. */
-  commit(name, before) {
+  /**
+   * Records the change from `before` to the current state as one undo step. Consecutive
+   * changes with the same `merge` key (a slider drag) fold into one step.
+   */
+  commit(name, before, merge) {
+    this.doc = this.refreshed(this.doc);
     const after = this.snapshot();
     if (before.doc === after.doc) {
       this.notify();
@@ -4532,17 +6454,23 @@ var VectorEditorController = class {
       name,
       execute: () => this.restore(after),
       undo: () => this.restore(before),
-      redo: () => this.restore(after)
+      redo: () => this.restore(after),
+      ...merge ? { tag: merge } : {}
     };
     this.committing = true;
-    this.history.execute(command);
+    if (merge) this.history.executeMerged(command, { key: merge });
+    else this.history.execute(command);
     this.committing = false;
   }
-  /** Runs `fn` (which updates fields) and records it as one undo step. */
-  change(name, fn) {
+  /** Runs `fn` (which updates fields) and records it as one undo step (merged by `merge` key). */
+  change(name, fn, merge) {
     const before = this.snapshot();
     fn();
-    this.commit(name, before);
+    this.commit(name, before, merge);
+  }
+  /** Ends a merged edit (a slider released): the next change starts a new undo step. */
+  endMergedEdit() {
+    this.history.endGesture();
   }
   setDoc(nodes) {
     if (nodes !== this.doc.nodes) this.doc = { ...this.doc, nodes };
@@ -4625,6 +6553,7 @@ var VectorEditorController = class {
     this.widthEdit = null;
     this.builderPreview = null;
     this.builderHoverKey = null;
+    this.blendStart = null;
     if (tool !== "direct") {
       this.anchors = [];
       this.editingId = null;
@@ -5091,7 +7020,7 @@ var VectorEditorController = class {
     const created = [];
     const replace = /* @__PURE__ */ new Map();
     for (const p of paths) {
-      const outline = bezierToSubpaths(vectorStrokeOutlinePath(subpathsToBezier(p.subpaths), p));
+      const outline = bezierToSubpaths(vectorStrokeOutlinePath(vectorAppearanceOutline(p), p));
       if (!outline.length) continue;
       const {
         stroke,
@@ -5106,11 +7035,12 @@ var VectorEditorController = class {
         startArrowScale: _ss,
         endArrowScale: _es,
         strokeWidthProfile: _wp,
+        effects,
         ...rest
       } = cloneVectorNode(p);
       const id = this.newId();
       const strokeNode = { ...rest, id, name: `${p.name ?? "Path"} Stroke`, subpaths: outline, fill: stroke ?? null, stroke: null, fillRule: "nonzero" };
-      const list = hasPaint(p.fill) ? [{ ...rest, stroke: null }, strokeNode] : [strokeNode];
+      const list = hasPaint(p.fill) ? [{ ...rest, ...effects ? { effects } : {}, stroke: null }, strokeNode] : [strokeNode];
       created.push(id);
       replace.set(p.id, list);
     }
@@ -5125,6 +7055,121 @@ var VectorEditorController = class {
     });
     return created;
   }
+  // -------------------------------------------------------------------------
+  // Path effects
+  // -------------------------------------------------------------------------
+  /** Selected (or given) nodes that can carry effects: the roots of the selection. */
+  effectTargets(ids) {
+    return (ids ?? this.selectedRoots()).map((id) => this.getNode(id)).filter((n) => !!n && !n.blendStep);
+  }
+  /**
+   * Adds an effect of `type` to the selected (or given) nodes, at the bottom of each stack (or
+   * at `index`), with default parameters merged with `params`. A repeater's copies start one
+   * shape width apart. One undo step; returns the new effect ids (one per node, in order).
+   */
+  addEffect(type, options = {}) {
+    const targets = this.effectTargets(options.ids);
+    if (!targets.length || !createVectorEffect(type, "")) return [];
+    const created = [];
+    const next = /* @__PURE__ */ new Map();
+    for (const node of targets) {
+      const list = node.effects ?? [];
+      let k = list.length + 1;
+      while (list.some((e) => e.id === `fx${k}`)) k++;
+      const params = { ...options.params ?? {} };
+      if (type === "repeater" && params.position === void 0) {
+        const b = bezierPathBounds(vectorAppearanceOutline(node));
+        if (b && b.maxX - b.minX > 0) params.position = { x: Math.round((b.maxX - b.minX) * 1.25 * 100) / 100, y: 0 };
+      }
+      const effect = createVectorEffect(type, `fx${k}`, params);
+      const at2 = options.index === void 0 ? list.length : Math.min(list.length, Math.max(0, Math.round(options.index)));
+      next.set(node.id, { ...node, effects: [...list.slice(0, at2), effect, ...list.slice(at2)] });
+      created.push(effect.id);
+    }
+    this.change(`Add ${VECTOR_EFFECT_LABELS[type]}`, () => this.setDoc(mapTree(this.doc.nodes, (n) => next.get(n.id) ?? n)));
+    return created;
+  }
+  editEffects(nodeId, label, fn, merge) {
+    const node = this.getNode(nodeId);
+    if (!node) return { ok: false, message: `There is no node "${nodeId}".` };
+    const result = fn(node.effects ?? []);
+    if (typeof result === "string") return { ok: false, message: result };
+    this.change(label, () => this.replaceNode(nodeId, result.length ? { ...node, effects: result } : (({ effects: _e, ...rest }) => rest)(node)), merge);
+    return { ok: true };
+  }
+  /**
+   * Turns an effect on or off and changes its parameters (unknown or invalid values are
+   * ignored). With `merge` (true, or a key of your own), consecutive updates of the same effect
+   * fold into one undo step, as a slider drag should; call `endMergedEdit` when it ends.
+   */
+  updateEffect(nodeId, effectId, patch, options = {}) {
+    const merge = options.merge === true ? `effect:${nodeId}:${effectId}` : options.merge || void 0;
+    const node = this.getNode(nodeId);
+    const current = node?.effects?.find((e) => e.id === effectId);
+    const label = current ? VECTOR_EFFECT_LABELS[current.type] ?? "Effect" : "Effect";
+    return this.editEffects(
+      nodeId,
+      `Edit ${label}`,
+      (list) => {
+        const i = list.findIndex((e2) => e2.id === effectId);
+        if (i < 0) return `Node "${nodeId}" has no effect "${effectId}".`;
+        const e = list[i];
+        const params = patch.params ? normalizeVectorEffectParams(e.type, patch.params, e.params) : e.params;
+        const next = { ...e, params, ...patch.enabled !== void 0 ? { enabled: patch.enabled } : {} };
+        if (next.enabled !== false) delete next.enabled;
+        return list.map((x, j) => j === i ? next : x);
+      },
+      merge
+    );
+  }
+  /** Removes an effect from a node's stack. */
+  removeEffect(nodeId, effectId) {
+    return this.editEffects(nodeId, "Remove Effect", (list) => list.some((e) => e.id === effectId) ? list.filter((e) => e.id !== effectId) : `Node "${nodeId}" has no effect "${effectId}".`);
+  }
+  /** Moves an effect to position `index` of its stack (0 is applied first). */
+  moveEffect(nodeId, effectId, index) {
+    return this.editEffects(nodeId, "Reorder Effects", (list) => {
+      const i = list.findIndex((e2) => e2.id === effectId);
+      if (i < 0) return `Node "${nodeId}" has no effect "${effectId}".`;
+      const to = Math.min(list.length - 1, Math.max(0, Math.round(index)));
+      const out = list.slice();
+      const [e] = out.splice(i, 1);
+      out.splice(to, 0, e);
+      return out;
+    });
+  }
+  /**
+   * Expand Appearance: bakes the path effects and live booleans of the selected (or given)
+   * nodes, and of everything inside them, into plain paths. A node keeps its id (a group when
+   * it draws as several shapes); the shapes it made get new ids. Returns the ids of the expanded
+   * nodes (empty when none was live).
+   */
+  expandAppearance(options = {}) {
+    const roots = (options.ids ?? this.selectedRoots()).map((id) => this.getNode(id)).filter((n) => !!n && hasVectorAppearance(n));
+    if (!roots.length) return [];
+    const fresh = (n) => {
+      const id = n.id.includes("~fx") ? this.newId() : n.id;
+      return n.type === "group" ? { ...n, id, children: n.children.map(fresh) } : { ...n, id };
+    };
+    const bake = (n) => {
+      if (!hasVectorAppearance(n)) return n;
+      if (!hasOwnVectorAppearance(n)) return { ...n, children: n.children.map(bake) };
+      let e = expandVectorAppearance(n);
+      if (e.type === "group" && e.children.length === 1 && e.children[0].type === "path") {
+        const { id: _id, opacity, name, ...child } = e.children[0];
+        const k = (e.opacity ?? 1) * (opacity ?? 1);
+        e = { ...child, id: e.id, name: e.name ?? name, ...placementOf(e), ...k < 1 ? { opacity: k } : {} };
+      }
+      return fresh(e);
+    };
+    const next = new Map(roots.map((n) => [n.id, bake(n)]));
+    this.change("Expand Appearance", () => {
+      this.setDoc(mapTree(this.doc.nodes, (n) => next.get(n.id) ?? n));
+      this.anchors = [];
+      this.editingId = null;
+    });
+    return roots.map((n) => n.id);
+  }
   rename(id, name) {
     return this.updateNode(id, { name }, { label: "Rename" });
   }
@@ -5249,24 +7294,24 @@ var VectorEditorController = class {
     return this.transform(translateMatrix(dx, dy), { ids: options.ids, label: "Move" });
   }
   /** The selection frame's centre in document space. */
-  frameCenter(frame) {
-    return applyMatrix(rotateMatrix(frame.angle), { x: frame.x + frame.width / 2, y: frame.y + frame.height / 2 });
+  frameCenter(frame2) {
+    return applyMatrix(rotateMatrix(frame2.angle), { x: frame2.x + frame2.width / 2, y: frame2.y + frame2.height / 2 });
   }
   /**
    * Scales along the selection box's own axes (rotated with the selection when its nodes
    * share a rotation) around `origin` (default: the box centre, in document space).
    */
   scale(sx, sy = sx, options = {}) {
-    const frame = this.frameOf(options.ids ?? this.selectedRoots());
-    if (!frame) return { ok: false, message: "Nothing is selected." };
-    const origin = applyMatrix(rotateMatrix(-frame.angle), options.origin ?? this.frameCenter(frame));
-    return this.transform(this.inFrame(frame.angle, scaleMatrix(sx, sy, origin)), { ids: options.ids, label: "Scale" });
+    const frame2 = this.frameOf(options.ids ?? this.selectedRoots());
+    if (!frame2) return { ok: false, message: "Nothing is selected." };
+    const origin = applyMatrix(rotateMatrix(-frame2.angle), options.origin ?? this.frameCenter(frame2));
+    return this.transform(this.inFrame(frame2.angle, scaleMatrix(sx, sy, origin)), { ids: options.ids, label: "Scale" });
   }
   /** Rotates clockwise by `degrees` around `origin` (default: the selection centre). */
   rotate(degrees, options = {}) {
-    const frame = this.frameOf(options.ids ?? this.selectedRoots());
-    if (!frame) return { ok: false, message: "Nothing is selected." };
-    const origin = options.origin ?? this.frameCenter(frame);
+    const frame2 = this.frameOf(options.ids ?? this.selectedRoots());
+    if (!frame2) return { ok: false, message: "Nothing is selected." };
+    const origin = options.origin ?? this.frameCenter(frame2);
     return this.transform(rotateMatrix(degrees, origin), { ids: options.ids, label: "Rotate" });
   }
   /** Sets each selected (or given) node's rotation to `degrees`, turning it around its own centre. */
@@ -5275,21 +7320,21 @@ var VectorEditorController = class {
     if (!ids.length) return { ok: false, message: "Nothing is selected." };
     this.change("Set Rotation", () => {
       for (const id of ids) {
-        const frame = this.frameOf([id]);
-        if (!frame) continue;
-        const delta = normalizeAngle(degrees - frame.angle);
-        if (Math.abs(delta) > 1e-9) this.doc = this.transformed(this.doc, /* @__PURE__ */ new Set([id]), rotateMatrix(delta, this.frameCenter(frame)));
+        const frame2 = this.frameOf([id]);
+        if (!frame2) continue;
+        const delta = normalizeAngle(degrees - frame2.angle);
+        if (Math.abs(delta) > 1e-9) this.doc = this.transformed(this.doc, /* @__PURE__ */ new Set([id]), rotateMatrix(delta, this.frameCenter(frame2)));
       }
     });
     return { ok: true };
   }
   /** Mirrors along the selection box's own axes. */
   flip(axis, options = {}) {
-    const frame = this.frameOf(options.ids ?? this.selectedRoots());
-    if (!frame) return { ok: false, message: "Nothing is selected." };
-    const c = { x: frame.x + frame.width / 2, y: frame.y + frame.height / 2 };
+    const frame2 = this.frameOf(options.ids ?? this.selectedRoots());
+    if (!frame2) return { ok: false, message: "Nothing is selected." };
+    const c = { x: frame2.x + frame2.width / 2, y: frame2.y + frame2.height / 2 };
     const m = axis === "horizontal" ? scaleMatrix(-1, 1, c) : scaleMatrix(1, -1, c);
-    return this.transform(this.inFrame(frame.angle, m), { ids: options.ids, label: axis === "horizontal" ? "Flip Horizontal" : "Flip Vertical" });
+    return this.transform(this.inFrame(frame2.angle, m), { ids: options.ids, label: axis === "horizontal" ? "Flip Horizontal" : "Flip Vertical" });
   }
   /**
    * Aligns the selected nodes to their combined bounds, or to the artboard when one node is
@@ -5416,7 +7461,7 @@ var VectorEditorController = class {
             const opacity = n.opacity;
             const m = nodeMatrix(n);
             out.push(
-              ...n.children.map((c) => n.transform ? transformVectorNode(c, m) : c).map((c) => opacity !== void 0 && opacity < 1 ? { ...c, opacity: (c.opacity ?? 1) * opacity } : c)
+              ...n.children.map((c) => c.blendStep ? (({ blendStep: _s, locked: _l, ...rest }) => rest)(c) : c).map((c) => c.booleanOperation ? (({ booleanOperation: _b, ...rest }) => rest)(c) : c).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 = flatten2(n.children);
@@ -5453,34 +7498,33 @@ var VectorEditorController = class {
   /**
    * Combines the selected paths (two or more) into one with a boolean operation. `subtract`
    * removes the upper shapes from the lowest one. The result takes the lowest shape's style
-   * and place.
+   * and place. Shapes take part as drawn (path effects and live booleans applied).
+   *
+   * With `live`, the operands stay editable instead: a lone live boolean group gets the
+   * operation (its operands follow it again), operands of live boolean groups get it as their
+   * own, and anything else (two or more nodes with one parent) is wrapped in a new live boolean
+   * group. Returns the result's (or the live group's) id, or null.
    */
   booleanOp(op, options = {}) {
     const roots = options.ids ?? this.selectedRoots();
-    const order = [];
-    walkVectorNodes(this.doc.nodes, (n) => {
-      if (roots.includes(n.id)) for (const p of collectPathNodes(n)) order.push(p.id);
-    });
-    const paths = [...new Set(order)].map((id2) => this.getNode(id2));
-    if (paths.length < 2) return null;
+    if (options.live) return this.liveBooleanOp(op, roots);
+    const entries = vectorPathEntries(this.doc, roots, { locked: true });
+    if (entries.length < 2) return null;
     const result = pathBoolean(
       BOOLEAN_OPS[op],
-      paths.map((p) => ({
-        path: vectorPathWorldBezier(
-          { ...p, subpaths: p.subpaths.filter((s) => s.anchors.length > 1).map((s) => ({ ...s, closed: true })) },
-          vectorParentMatrix(this.doc.nodes, p.id) ?? IDENTITY_MATRIX
-        ),
-        fillRule: p.fillRule ?? "nonzero"
+      entries.map((e) => ({
+        path: vectorPathWorldBezier({ ...e.node, subpaths: e.node.subpaths.filter((s) => s.anchors.length > 1).map((s) => ({ ...s, closed: true })) }, e.parent),
+        fillRule: e.node.fillRule ?? "nonzero"
       }))
     );
-    const base = paths[0];
-    const anchorRoot = roots.find((r) => findVectorNode([this.getNode(r)], base.id)) ?? base.id;
+    const base = entries[0].node;
+    const anchorRoot = roots.find((r) => this.holds(r, base.id)) ?? base.id;
     const subpaths = bezierToSubpaths(this.intoParentSpace(anchorRoot, result.path));
     if (result.error || !subpaths.length) return null;
     const id = this.newId();
-    const { transform: _t, ...baseRest } = cloneVectorNode(base);
+    const { transform: _t, effects: _e, booleanOperation: _b, ...baseRest } = cloneVectorNode(base);
     const node = { ...baseRest, id, name: BOOLEAN_LABELS[op], subpaths };
-    const drop = /* @__PURE__ */ new Set([...paths.map((p) => p.id), ...roots]);
+    const drop = /* @__PURE__ */ new Set([...entries.map((e) => e.node.id), ...roots]);
     this.change(BOOLEAN_LABELS[op], () => {
       this.setDoc(mapTree(this.doc.nodes, (n) => n.id === anchorRoot ? node : drop.has(n.id) ? null : n));
       this.selection = [id];
@@ -5489,18 +7533,75 @@ var VectorEditorController = class {
     });
     return id;
   }
+  /** Whether stored node `rootId` holds `id` as drawn (`id` may be an expanded path inside it). */
+  holds(rootId, id) {
+    const n = this.getNode(rootId);
+    return !!n && (!!findVectorNode([n], id) || !!findVectorNode([expandVectorAppearance(n)], id));
+  }
+  liveBooleanOp(op, roots) {
+    const nodes = roots.map((id2) => this.getNode(id2));
+    if (!nodes.length || nodes.some((n) => !n)) return null;
+    const label = `Live ${BOOLEAN_LABELS[op]}`;
+    const lone = nodes.length === 1 ? nodes[0] : null;
+    if (isVectorLiveBoolean(lone)) {
+      const children = lone.children.map((c) => c.booleanOperation ? (({ booleanOperation: _b, ...rest }) => rest)(c) : c);
+      this.change(label, () => this.replaceNode(lone.id, { ...lone, liveBoolean: op, children }));
+      return lone.id;
+    }
+    const parents = roots.map((id2) => locateVectorNode(this.doc.nodes, id2)?.parent ?? null);
+    if (parents.every((g) => isVectorLiveBoolean(g))) {
+      const set = new Set(roots);
+      this.change(
+        label,
+        () => this.setDoc(
+          mapTree(this.doc.nodes, (n) => {
+            if (n.type !== "group" || !n.liveBoolean || !n.children.some((c) => set.has(c.id))) return n;
+            const group = n;
+            const children = group.children.map((c) => {
+              if (!set.has(c.id)) return c;
+              const { booleanOperation: _b, ...rest } = c;
+              return op === group.liveBoolean ? rest : { ...rest, booleanOperation: op };
+            });
+            return { ...group, children };
+          })
+        )
+      );
+      return parents[0].id;
+    }
+    if (nodes.length < 2) return null;
+    const parent = parents[0]?.id ?? null;
+    if (parents.some((g) => (g?.id ?? null) !== parent)) return null;
+    const id = this.newId();
+    this.change(label, () => {
+      const set = new Set(roots);
+      const wrap = (list) => {
+        const members = list.filter((n) => set.has(n.id)).map((c) => c.booleanOperation ? (({ booleanOperation: _b, ...rest }) => rest)(c) : c);
+        const top = Math.max(...list.map((n, i) => set.has(n.id) ? i : -1));
+        const out = [];
+        list.forEach((n, i) => {
+          if (i === top) out.push({ id, type: "group", name: BOOLEAN_LABELS[op], liveBoolean: op, children: members });
+          if (!set.has(n.id)) out.push(n);
+        });
+        return out;
+      };
+      if (parent === null) this.setDoc(wrap(this.doc.nodes));
+      else this.setDoc(mapTree(this.doc.nodes, (n) => n.id === parent && n.type === "group" ? { ...n, children: wrap(n.children) } : n));
+      this.selection = [id];
+      this.anchors = [];
+      this.editingId = null;
+    });
+    return id;
+  }
   /** Joins the selected paths into one compound path (subpaths kept, lowest style). */
   combine(options = {}) {
     const roots = options.ids ?? this.selectedRoots();
-    const paths = [];
-    walkVectorNodes(this.doc.nodes, (n) => {
-      if (roots.includes(n.id)) paths.push(...collectPathNodes(n));
-    });
-    if (paths.length < 2) return null;
+    const entries = vectorPathEntries(this.doc, roots, { locked: true });
+    if (entries.length < 2) return null;
+    const paths = entries.map((e) => e.node);
     const id = this.newId();
-    const first = roots.find((r) => findVectorNode([this.getNode(r)], paths[0].id)) ?? paths[0].id;
-    const subpaths = paths.flatMap((p) => bezierToSubpaths(this.intoParentSpace(first, vectorPathWorldBezier(p, vectorParentMatrix(this.doc.nodes, p.id) ?? IDENTITY_MATRIX))));
-    const { transform: _t, ...baseRest } = cloneVectorNode(paths[0]);
+    const first = roots.find((r) => this.holds(r, paths[0].id)) ?? paths[0].id;
+    const subpaths = entries.flatMap((e) => bezierToSubpaths(this.intoParentSpace(first, vectorPathWorldBezier(e.node, e.parent))));
+    const { transform: _t, effects: _e, booleanOperation: _b, ...baseRest } = cloneVectorNode(paths[0]);
     const node = { ...baseRest, id, name: "Compound Path", subpaths };
     const drop = /* @__PURE__ */ new Set([...paths.map((p) => p.id), ...roots]);
     this.change("Combine", () => {
@@ -5555,10 +7656,7 @@ var VectorEditorController = class {
     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 topRoot = [...roots].reverse().find((r) => this.holds(r, 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);
@@ -5580,11 +7678,178 @@ var VectorEditorController = class {
     return nodes.map((n) => n.id);
   }
   /** The Shape Builder map of the selected (or given) paths, cached per document and selection. */
+  // -------------------------------------------------------------------------
+  // Blends
+  // -------------------------------------------------------------------------
+  /** Selected (or given) blend groups; a selected key or step counts as its blend. */
+  blendTargets(ids) {
+    const out = /* @__PURE__ */ new Map();
+    for (const id of ids ?? this.selection) {
+      const node = this.getNode(id);
+      const group = isVectorBlendGroup(node) ? node : locateVectorNode(this.doc.nodes, id)?.parent;
+      if (isVectorBlendGroup(group)) out.set(group.id, group);
+    }
+    return [...out.values()];
+  }
+  /**
+   * Blends two or more selected (or given) paths or groups: they become the keys of a live
+   * blend group (bottom to top, or in the order given with `keepOrder`) whose in-betweens are
+   * regenerated whenever a key or the options change. The keys must share a parent. Returns
+   * the blend group's id, or null.
+   */
+  blend(input = {}) {
+    const ids = [...new Set(input.ids ?? this.selectedRoots())].filter((id2) => {
+      const n = this.getNode(id2);
+      return !!n && !n.blendStep && !n.locked;
+    });
+    if (ids.length < 2) return null;
+    const locs = ids.map((id2) => locateVectorNode(this.doc.nodes, id2));
+    const parent = locs[0].parent?.id ?? null;
+    if (locs.some((l) => (l.parent?.id ?? null) !== parent)) return null;
+    const order = input.keepOrder ? ids : ids.slice().sort((a, b) => locs[ids.indexOf(a)].index - locs[ids.indexOf(b)].index);
+    const blend = blendOptionsOf({ ...this.blendDefaults, ...input });
+    if (input.starts) {
+      const starts = Object.fromEntries(Object.entries(input.starts).filter(([k, v2]) => order.includes(k) && Number.isInteger(v2) && v2 >= 0));
+      if (Object.keys(starts).length) blend.starts = starts;
+    }
+    const id = this.newId();
+    this.change("Blend", () => {
+      const set = new Set(order);
+      const regroup = (list) => {
+        const members = order.map((m) => list.find((n) => n.id === m));
+        const top = Math.max(...members.map((m) => list.indexOf(m)));
+        const out = [];
+        list.forEach((n, i) => {
+          if (i === top) out.push({ id, type: "group", name: input.name ?? "Blend", blend, children: members });
+          if (!set.has(n.id)) out.push(n);
+        });
+        return out;
+      };
+      if (parent === null) this.setDoc(regroup(this.doc.nodes));
+      else this.setDoc(mapTree(this.doc.nodes, (n) => n.id === parent && n.type === "group" ? { ...n, children: regroup(n.children) } : n));
+      this.selection = [id];
+      this.anchors = [];
+      this.editingId = null;
+    });
+    return id;
+  }
+  /** Sets the options new blends get (spacing, steps, distance, orientation, morph). */
+  setBlendDefaults(patch) {
+    this.blendDefaults = { ...this.blendDefaults, ...blendOptionsOf(patch) };
+    this.notify();
+  }
+  /**
+   * Adds a node as the last key of a blend (it must share the blend's parent); `start` is the
+   * anchor of its first subpath the blend starts from. One undo step.
+   */
+  addBlendKey(blendId, nodeId, options = {}) {
+    const group = this.getNode(blendId);
+    const node = this.getNode(nodeId);
+    if (!isVectorBlendGroup(group)) return { ok: false, message: `"${blendId}" is not a blend.` };
+    if (!node || node.blendStep || node.locked || node.id === blendId) return { ok: false, message: `"${nodeId}" cannot be a key.` };
+    const parentOf = (id) => locateVectorNode(this.doc.nodes, id)?.parent?.id ?? null;
+    if (parentOf(blendId) !== parentOf(nodeId)) return { ok: false, message: "The new key must sit beside the blend (same parent)." };
+    const start = options.start;
+    this.change("Blend", () => {
+      const blend = start !== null && start !== void 0 ? { ...group.blend, starts: { ...group.blend.starts, [nodeId]: start } } : group.blend;
+      const m = invertMatrix(nodeMatrix(group));
+      const key = group.transform ? transformVectorNode(node, m) : node;
+      const without = mapTree(this.doc.nodes, (n) => n.id === nodeId ? null : n);
+      this.setDoc(spliceTree(without, blendId, [{ ...group, blend, children: [...group.children, key] }]));
+      this.selection = [blendId];
+      this.anchors = [];
+    });
+    return { ok: true };
+  }
+  /** Changes the spacing, steps, distance, orientation or morph of the selected (or given) blends. */
+  setBlendOptions(patch, options = {}) {
+    const groups = this.blendTargets(options.ids);
+    if (!groups.length) return { ok: false, message: "Select a blend." };
+    const clean2 = blendOptionsOf(patch);
+    if (!Object.keys(clean2).length) return { ok: false, message: "No valid blend options were given." };
+    const set = new Set(groups.map((g) => g.id));
+    this.change("Blend Options", () => {
+      this.setDoc(mapTree(this.doc.nodes, (n) => set.has(n.id) && n.type === "group" && n.blend ? { ...n, blend: { ...n.blend, ...clean2 } } : n));
+    });
+    return { ok: true };
+  }
+  /** Expand: turns the selected (or given) blends into plain groups of their keys and steps. Returns their ids. */
+  expandBlend(options = {}) {
+    const groups = this.blendTargets(options.ids);
+    if (!groups.length) return [];
+    const set = new Set(groups.map((g) => g.id));
+    const used = /* @__PURE__ */ new Set();
+    walkVectorNodes(this.doc.nodes, (n) => used.add(n.id));
+    const fresh = () => {
+      let id = this.createId();
+      while (used.has(id)) id = this.createId();
+      used.add(id);
+      return id;
+    };
+    this.change("Expand Blend", () => {
+      this.setDoc(mapTree(this.doc.nodes, (n) => set.has(n.id) && n.type === "group" ? expandVectorBlend(n, fresh) : n));
+      this.selection = [...set];
+      this.anchors = [];
+    });
+    return [...set];
+  }
+  /** Release: replaces the selected (or given) blends with their keys (and a replaced spine as a path). */
+  releaseBlend(options = {}) {
+    const groups = this.blendTargets(options.ids);
+    if (!groups.length) return [];
+    const released = [];
+    this.change("Release Blend", () => {
+      for (const g of groups) {
+        const nodes = releaseVectorBlend(g, () => this.newId());
+        released.push(...nodes.map((n) => n.id));
+        this.setDoc(spliceTree(this.doc.nodes, g.id, nodes));
+      }
+      this.selection = released;
+      this.anchors = [];
+    });
+    return released;
+  }
+  /**
+   * Replace Spine: the selected blend's steps follow the selected path instead of the straight
+   * lines between its keys. The path's first subpath becomes the spine (the path is removed)
+   * and the keys move onto it, spread evenly by arc length.
+   */
+  replaceBlendSpine(options = {}) {
+    const roots = options.ids ?? this.selectedRoots();
+    const groups = this.blendTargets(roots);
+    const paths = roots.map((id) => this.getNode(id)).filter((n) => n?.type === "path" && !n.blendStep && !isVectorBlendGroup(locateVectorNode(this.doc.nodes, n.id)?.parent));
+    if (groups.length !== 1 || paths.length !== 1) return { ok: false, message: "Select one blend and one path to be its spine." };
+    const group = groups[0];
+    const path = paths[0];
+    const first = path.subpaths.find((sp) => sp.anchors.length >= 2);
+    if (!first) return { ok: false, message: "The spine needs a path with at least two points." };
+    const m = multiplyMatrices(this.worldOf(path.id), invertMatrix(this.worldOf(group.id)));
+    const spine = transformVectorNode({ id: "", type: "path", subpaths: [first] }, m).subpaths[0];
+    this.change("Replace Spine", () => {
+      const withSpine = { ...group, blend: { ...group.blend, spine } };
+      const targets = vectorBlendKeyTargets(withSpine);
+      let k = 0;
+      const children = withSpine.children.map((c) => {
+        if (c.blendStep) return c;
+        const target = targets[k++];
+        const b = vectorNodeBounds(c);
+        if (!target || !b) return c;
+        const dx = target[0] - (b.x + b.width / 2);
+        const dy = target[1] - (b.y + b.height / 2);
+        return Math.hypot(dx, dy) > 1e-9 ? transformVectorNode(c, translateMatrix(dx, dy)) : c;
+      });
+      this.setDoc(mapTree(this.doc.nodes, (n) => n.id === path.id ? null : n.id === group.id ? { ...withSpine, children } : n));
+      this.selection = [group.id];
+      this.anchors = [];
+      if (this.editingId === path.id) this.editingId = null;
+    });
+    return { ok: true };
+  }
   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 entries = roots.length ? vectorPathEntries(this.doc, roots, { expand: false }) : [];
     const map = entries.length ? vectorShapeBuilderMap(entries) : null;
     this.builderCache = { doc: this.doc, key, map };
     return map;
@@ -6318,9 +8583,9 @@ var VectorEditorController = class {
   }
   hitTransformHandle(screen) {
     if (this.tool !== "select" || !this.selection.length) return null;
-    const frame = this.frameOf(this.selectedRoots());
-    if (!frame) return null;
-    const { box, handles } = getVectorSelectionBoxGeometry(frame, this.viewport);
+    const frame2 = this.frameOf(this.selectedRoots());
+    if (!frame2) return null;
+    const { box, handles } = getVectorSelectionBoxGeometry(frame2, this.viewport);
     const r = this.hitRadius + 2;
     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;
@@ -6368,16 +8633,22 @@ var VectorEditorController = class {
     return best;
   }
   /** Deepest unlocked visible path under `p`. */
+  /** Live groups being edited (selected, or holding the selection or the edited path): their children are hit as stored. */
+  enteredGroups() {
+    return vectorEnteredGroups(this.doc.nodes, this.editingId ? [...this.selection, this.editingId] : this.selection);
+  }
   hitPath(p) {
     const tol = this.tolerance();
+    const entered = this.enteredGroups();
     const search = (list, parent) => {
       for (let i = list.length - 1; i >= 0; i--) {
         const n = list[i];
         if (n.visible === false || n.locked) continue;
         if (n.type === "group") {
+          if (hasOwnVectorAppearance(n) && !entered.has(n.id) && !hitTestVectorNode(n, p, tol, parent, { entered })) continue;
           const found = search(n.children, multiplyMatrices(nodeMatrix(n), parent));
           if (found) return found;
-        } else if (hitTestVectorNode(n, p, tol, parent)) return n;
+        } else if (hitTestVectorNode(n, p, tol, parent, { entered })) return n;
       }
       return null;
     };
@@ -6402,7 +8673,7 @@ var VectorEditorController = class {
       case "select": {
         const handle = this.hitTransformHandle(screen);
         if (handle) return { nodeId: null, transformHandle: handle };
-        const node = hitTestVectorNodes(this.doc.nodes, p, this.tolerance());
+        const node = hitTestVectorNodes(this.doc.nodes, p, this.tolerance(), { entered: this.enteredGroups() });
         return node ? { nodeId: node.id } : null;
       }
       case "direct": {
@@ -6432,6 +8703,11 @@ var VectorEditorController = class {
         const seg = this.nearestOutline(p);
         return seg ? { nodeId: seg.nodeId, segment: seg } : null;
       }
+      case "blend": {
+        const hit = this.blendHit(screen, p);
+        if (!hit) return null;
+        return hit.anchor === null ? { nodeId: hit.nodeId } : { nodeId: hit.nodeId, anchor: { nodeId: hit.nodeId, subpath: 0, index: hit.anchor } };
+      }
       case "width": {
         const hit = this.hitWidthHandle(screen);
         if (hit) return { nodeId: hit.ref.nodeId, widthPoint: hit.ref };
@@ -6658,6 +8934,8 @@ var VectorEditorController = class {
       case "shapeBuilder":
       case "paintBucket":
         return this.downBuilder(p, input);
+      case "blend":
+        return this.downBlend(screen, p);
       case "scissors": {
         const seg = this.nearestOutline(p);
         if (seg) this.cutPathAt(seg.nodeId, seg.point);
@@ -6673,18 +8951,58 @@ var VectorEditorController = class {
         return this.downShape(p, input);
     }
   }
+  /** The shape under the pointer for the Blend tool, and the anchor of its first subpath under it. */
+  blendHit(screen, p) {
+    const node = hitTestVectorNodes(this.doc.nodes, p, this.tolerance());
+    if (!node) return null;
+    let anchor = null;
+    if (node.type === "path" && node.subpaths[0]) {
+      const refs = node.subpaths[0].anchors.map((_, index) => ({ nodeId: node.id, subpath: 0, index }));
+      anchor = this.hitAnchor(screen, refs)?.index ?? null;
+    }
+    return { nodeId: node.id, anchor };
+  }
+  /** Blend tool: the first click picks the shape to blend from, the next one blends it into the shape clicked. */
+  downBlend(screen, p) {
+    const hit = this.blendHit(screen, p);
+    const start = this.blendStart;
+    if (!hit) {
+      if (start) {
+        this.blendStart = null;
+        this.notify();
+      }
+      return;
+    }
+    if (!start || start.nodeId === hit.nodeId) {
+      this.blendStart = hit;
+      this.selection = [hit.nodeId];
+      this.anchors = [];
+      this.notify();
+      return;
+    }
+    this.blendStart = null;
+    const first = this.getNode(start.nodeId);
+    if (isVectorBlendGroup(first)) {
+      if (!this.addBlendKey(first.id, hit.nodeId, { start: hit.anchor }).ok) this.notify();
+      return;
+    }
+    const starts = {};
+    if (start.anchor !== null) starts[start.nodeId] = start.anchor;
+    if (hit.anchor !== null) starts[hit.nodeId] = hit.anchor;
+    if (!this.blend({ ids: [start.nodeId, hit.nodeId], keepOrder: true, starts })) this.notify();
+  }
   downSelect(screen, p, input) {
     const handle = this.hitTransformHandle(screen);
     if (handle) {
-      const frame = this.frameOf(this.selectedRoots());
+      const frame2 = this.frameOf(this.selectedRoots());
       const before = this.snapshot();
-      const center = applyMatrix(rotateMatrix(frame.angle), { x: frame.x + frame.width / 2, y: frame.y + frame.height / 2 });
-      this.drag = handle === "rotate" ? { kind: "rotate", start: p, center, before, base: this.doc } : { kind: "scale", handle, start: p, frame, before, base: this.doc };
+      const center = applyMatrix(rotateMatrix(frame2.angle), { x: frame2.x + frame2.width / 2, y: frame2.y + frame2.height / 2 });
+      this.drag = handle === "rotate" ? { kind: "rotate", start: p, center, before, base: this.doc } : { kind: "scale", handle, start: p, frame: frame2, before, base: this.doc };
       this.interaction = handle === "rotate" ? { type: "rotate", angle: 0 } : { type: "scale", handle, sx: 1, sy: 1 };
       this.notify();
       return;
     }
-    const node = hitTestVectorNodes(this.doc.nodes, p, this.tolerance());
+    const node = hitTestVectorNodes(this.doc.nodes, p, this.tolerance(), { entered: this.enteredGroups() });
     if (node) {
       const selected = this.selection.includes(node.id);
       if (input.shift) {
@@ -7474,7 +9792,10 @@ var VectorEditorController = class {
           this.widthPoints = [];
           this.notify();
         } else if (this.pen) this.finishPath();
-        else if (this.tool === "direct" && this.anchors.length) {
+        else if (this.blendStart) {
+          this.blendStart = null;
+          this.notify();
+        } else if (this.tool === "direct" && this.anchors.length) {
           this.anchors = [];
           this.notify();
         } else if (this.tool !== "select") this.setTool("select");
@@ -7606,8 +9927,9 @@ function pencilPressureProfile(points, pressures) {
 var fmt = (n) => Math.round(n * 100) / 100;
 var fmtMatrix = (m) => `matrix(${m.map((n) => Math.round(n * 1e6) / 1e6).join(" ")})`;
 var VECTOR_BUILDER_HATCH_GAP = 6;
-function renderNode(node, defs, idPrefix) {
-  if (node.visible === false) return null;
+function renderNode(stored, defs, idPrefix) {
+  if (stored.visible === false) return null;
+  const node = expandVectorAppearance(stored);
   if (node.type === "group") {
     const children = node.children.map((c) => renderNode(c, defs, idPrefix)).filter((c) => !!c);
     return { kind: "group", id: node.id, ...node.transform ? { transform: fmtMatrix(node.transform) } : {}, opacity: node.opacity ?? 1, children };
@@ -7648,16 +9970,20 @@ function getVectorSceneRenderData(state, options = {}) {
   };
 }
 var toScreen = (state, p) => ({ x: p.x * state.viewport.zoom + state.viewport.x, y: p.y * state.viewport.zoom + state.viewport.y });
-function screenOutline(state, node) {
+function screenOutline(state, node, entered) {
   const v2 = state.viewport;
   const view = [v2.zoom, 0, 0, v2.zoom, v2.x, v2.y];
   const parent = vectorParentMatrix(state.document.nodes, node.id) ?? IDENTITY_MATRIX;
-  return collectWithMatrix(node, parent).map(({ path, parent: m }) => bezierPathToSvg(transformBezierPath(vectorPathWorldBezier(path, m), view), { precision: 2 })).join(" ");
+  return outlinePaths(node, parent, entered).map((path) => bezierPathToSvg(transformBezierPath(path, view), { precision: 2 })).join(" ");
 }
-function collectWithMatrix(node, parent) {
-  if (node.type === "path") return [{ path: node, parent }];
+function outlinePaths(node, parent, entered) {
+  if (node.type === "path") return [vectorPathWorldBezier(node, parent, { effects: false })];
   const m = multiplyMatrices(nodeMatrix(node), parent);
-  return node.children.flatMap((c) => collectWithMatrix(c, m));
+  if (hasOwnVectorAppearance(node) && !entered.has(node.id)) return [transformBezierPath(vectorAppearanceOutline(node), m)];
+  return node.children.filter((c) => c.visible !== false).flatMap((c) => outlinePaths(c, m, entered));
+}
+function getVectorEnteredGroups(state) {
+  return vectorEnteredGroups(state.document.nodes, state.editingId ? [...state.selection, state.editingId] : state.selection);
 }
 function collect(node) {
   if (node.type === "path") return [node];
@@ -7667,13 +9993,14 @@ function getVectorOverlayRenderData(state) {
   const doc = state.document;
   const z = state.viewport.zoom;
   const outlines = [];
+  const entered = getVectorEnteredGroups(state);
   const seen = /* @__PURE__ */ new Set();
   const outline = (id, selected2) => {
     if (seen.has(id)) return;
     const node = findVectorNode(doc.nodes, id);
     if (!node || node.visible === false) return;
     seen.add(id);
-    outlines.push({ id, d: screenOutline(state, node), selected: selected2 });
+    outlines.push({ id, d: screenOutline(state, node, entered), selected: selected2 });
   };
   for (const id of state.selection) outline(id, true);
   if (state.editingId) outline(state.editingId, true);
@@ -7800,8 +10127,79 @@ function getVectorOverlayRenderData(state) {
       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 };
+  const blend = blendOverlay(state);
+  if (state.tool === "blend" && !it) status = state.blendStart ? "Click another shape to blend into" : "Click a shape to blend from";
+  return { outlines, selectionBox, anchors, handles, marquee, penPreview, artboard, guides, status, toolStroke, pencilString, cutPoint, cornerWidgets, widthPoints, widthSpot, builder, blend };
+}
+function selectedBlends(state) {
+  const out = /* @__PURE__ */ new Map();
+  for (const id of state.selection) {
+    const node = findVectorNode(state.document.nodes, id);
+    const group = isVectorBlendGroup(node) ? node : locateVectorNode(state.document.nodes, id)?.parent;
+    if (isVectorBlendGroup(group)) out.set(group.id, group);
+  }
+  return [...out.values()];
+}
+function blendOverlay(state) {
+  const v2 = state.viewport;
+  const view = [v2.zoom, 0, 0, v2.zoom, v2.x, v2.y];
+  const doc = state.document;
+  const sc = (p, m) => {
+    const q = { x: m[0] * p.x + m[2] * p.y + m[4], y: m[1] * p.x + m[3] * p.y + m[5] };
+    return { x: fmt(q.x), y: fmt(q.y) };
+  };
+  const spines = selectedBlends(state).flatMap((g) => {
+    const s = vectorBlendSpine(g);
+    if (!s) return [];
+    const m = multiplyMatrices(vectorWorldMatrix(doc.nodes, g.id) ?? IDENTITY_MATRIX, view);
+    const d = bezierPathToSvg(transformBezierPath(subpathsToBezier([s.spine], { corners: false }), m), { precision: 2 });
+    const keys = s.stops.map((stop) => {
+      const p = vectorBlendRailAt(s.rail, stop).point;
+      return sc({ x: p[0], y: p[1] }, m);
+    });
+    return [{ id: g.id, d, keys, replaced: s.replaced }];
+  });
+  let start = null;
+  const anchors = [];
+  if (state.tool === "blend") {
+    const from = state.blendStart ? findVectorNode(doc.nodes, state.blendStart.nodeId) : void 0;
+    if (from && state.blendStart) {
+      const a = state.blendStart.anchor === null ? void 0 : getAnchorWorld(doc, { nodeId: from.id, subpath: 0, index: state.blendStart.anchor });
+      start = { d: screenOutline(state, from, /* @__PURE__ */ new Set()), anchor: a ? sc(a, view) : null };
+    }
+    const hovered = state.hover?.nodeId ? findVectorNode(doc.nodes, state.hover.nodeId) : void 0;
+    if (hovered?.type === "path" && hovered.subpaths[0]) {
+      hovered.subpaths[0].anchors.forEach((_, index) => {
+        const a = getAnchorWorld(doc, { nodeId: hovered.id, subpath: 0, index });
+        if (a) anchors.push({ ...sc(a, view), hovered: state.hover?.anchor?.index === index });
+      });
+    }
+  }
+  return { spines, start, anchors };
+}
+function getVectorBlendControls(state) {
+  const blends = selectedBlends(state);
+  const doc = state.document;
+  const roots = state.selection.filter((id) => {
+    const node = findVectorNode(doc.nodes, id);
+    return !!node && !node.blendStep && !node.locked && !state.selection.includes(locateVectorNode(doc.nodes, id)?.parent?.id ?? "");
+  });
+  const parents = new Set(roots.map((id) => locateVectorNode(doc.nodes, id)?.parent?.id ?? null));
+  const paths = roots.filter((id) => findVectorNode(doc.nodes, id)?.type === "path" && !isVectorBlendGroup(locateVectorNode(doc.nodes, id)?.parent));
+  const first = blends[0];
+  return {
+    ids: blends.map((g) => g.id),
+    options: resolveVectorBlendOptions(first ? first.blend : state.blendDefaults),
+    canBlend: roots.length >= 2 && parents.size === 1,
+    canReplaceSpine: blends.length === 1 && paths.length === 1,
+    hasSpine: !!first?.blend?.spine
+  };
 }
+function applyVectorBlendOptions(controller, patch) {
+  controller.setBlendDefaults(patch);
+  if (getVectorBlendControls(controller.getState()).ids.length) controller.setBlendOptions(patch);
+}
+var VECTOR_BLEND_SPACING_LABELS = { steps: "Specified Steps", distance: "Specified Distance", smoothColor: "Smooth Color" };
 var VECTOR_OVERLAY_THEME = {
   accent: "#0ea5e9",
   /** Smart guide lines and labels. */
@@ -7952,8 +10350,28 @@ var VECTOR_EDIT_TOGGLES = [
   { key: "curvatureMoves", label: "Curv", title: "Curvature point moves (Alt flips while dragging)" },
   { key: "recognizeShapes", label: "Shapes", title: "Turn pencil scribbles into shapes" }
 ];
+var VECTOR_EFFECT_MENU = VECTOR_EFFECT_TYPES.map((type) => ({ type, label: VECTOR_EFFECT_LABELS[type] }));
+function getVectorEffectsPanel(state) {
+  const nodes = state.selection.map((id) => findVectorNode(state.document.nodes, id)).filter((n) => !!n && !n.blendStep);
+  if (!nodes.length) return null;
+  const one = nodes.length === 1 ? nodes[0] : null;
+  return {
+    nodeId: one?.id ?? null,
+    count: nodes.length,
+    effects: (one?.effects ?? []).map((e) => ({
+      id: e.id,
+      type: e.type,
+      label: VECTOR_EFFECT_LABELS[e.type] ?? e.type,
+      enabled: e.enabled !== false,
+      params: e.params,
+      specs: VECTOR_EFFECT_PARAM_SPECS[e.type] ?? []
+    })),
+    expandable: nodes.some(hasVectorAppearance)
+  };
+}
 
 // src/vector/commands.ts
+var EFFECT_PARAMS_DESCRIPTION = "Effect parameters (missing ones keep their value or default). trim: start, end (percent), offset (degrees), mode simultaneous|individual. roundCorners: radius. puckerBloat: amount (\u2212100\u2026100). twist: angle, center {x, y} (offset from the middle). zigzag: size, ridges, smooth. wiggle: size, detail, smooth, speed, correlation, phase, seed, time (seconds). offset: amount, join miter|round|bevel, miterLimit, copies, copyOffset. merge: mode merge|add|subtract|intersect|exclude. repeater: copies (fractions fade the last), offset, position {x, y}, anchor {x, y} (offset from the middle), rotation, scale {x, y} (percent), startOpacity, endOpacity (percent), composite below|above.";
 var fail = (message) => {
   throw new Error(message);
 };
@@ -7986,6 +10404,18 @@ var WIDTH_POINTS = {
   },
   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 BLEND_PROPS = {
+  spacing: { type: "string", enum: ["steps", "distance", "smoothColor"], description: "How in-betweens are spaced (default steps)." },
+  steps: { type: "integer", minimum: 1, maximum: 1e3, description: "In-betweens between each pair of keys (steps spacing; default 5)." },
+  distance: { type: "number", exclusiveMinimum: 0, description: "Distance between in-betweens along the spine (distance spacing; default 20)." },
+  orientToSpine: { type: "boolean", description: "Turn the in-betweens with a replaced spine." },
+  linear: { type: "boolean", description: "Move anchors in straight lines instead of the rotation-aware morph." }
+};
+var checkBlendOptions = (params) => {
+  if (params?.spacing !== void 0 && !VECTOR_BLEND_SPACINGS.includes(params.spacing)) fail(`Unknown blend spacing "${params.spacing}".`);
+  if (params?.steps !== void 0 && !(Number.isFinite(params.steps) && params.steps >= 1)) fail("steps must be at least 1.");
+  if (params?.distance !== void 0 && !(Number.isFinite(params.distance) && params.distance > 0)) fail("distance must be positive.");
+};
 var PAINT = {
   description: 'A CSS colour, `null` for none, or a gradient `{ type: "linear", angle, stops: [{ offset, color }] }`.'
 };
@@ -8050,7 +10480,12 @@ function createVectorCommands(controller, options = {}) {
           visible: n.visible !== false,
           locked: !!n.locked,
           selected: state.selection.includes(n.id),
-          ...n.type === "path" ? { fill: n.fill ?? null, stroke: n.stroke ?? null, strokeWidth: n.strokeWidth ?? 1, d: vectorPathData(n, 2) } : { children: n.children.length }
+          ...n.type === "path" ? { fill: n.fill ?? null, stroke: n.stroke ?? null, strokeWidth: n.strokeWidth ?? 1, d: vectorPathData(n, 2) } : { children: n.children.length },
+          ...n.type === "group" && n.blend ? { blend: { ...resolveVectorBlendOptions(n.blend), spine: !!n.blend.spine, keys: vectorBlendKeys(n).map((k) => k.id) } } : {},
+          ...n.blendStep ? { blendStep: true } : {},
+          ...n.effects?.length ? { effects: n.effects } : {},
+          ...n.type === "group" && n.liveBoolean ? { liveBoolean: n.liveBoolean } : {},
+          ...n.booleanOperation ? { booleanOperation: n.booleanOperation } : {}
         });
         if (n.type === "group") visit(n.children, depth + 1);
       }
@@ -8286,15 +10721,181 @@ function createVectorCommands(controller, options = {}) {
       id: `${prefix}boolean`,
       label: "Boolean Operation\u2026",
       keywords: ["union", "unite", "subtract", "intersect", "exclude", "combine", "pathfinder"],
-      description: "Combines two or more paths with union, subtract (upper shapes from the lowest), intersect or exclude.",
-      params: { type: "object", properties: { operation: { type: "string", enum: ["union", "subtract", "intersect", "exclude"] }, ids: IDS }, required: ["operation"] },
+      description: "Combines two or more paths with union, subtract (upper shapes from the lowest), intersect or exclude. With `live`, the shapes stay editable operands of a live boolean group instead (a lone live group gets the operation; its operands get their own).",
+      params: {
+        type: "object",
+        properties: {
+          operation: { type: "string", enum: ["union", "subtract", "intersect", "exclude"] },
+          ids: IDS,
+          live: { type: "boolean", description: "Keep the operands editable in a live boolean group (default false: one new path)." }
+        },
+        required: ["operation"]
+      },
+      undoable: true,
+      run: (_ctx, params) => {
+        const id = controller.booleanOp(params.operation, { ids: ids(params), live: params.live });
+        if (!id) fail(params.live ? "Select two or more nodes with one parent, a live boolean group or its operands." : "Select at least two overlapping paths (the result was empty).");
+        return { id };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}addEffect`,
+      label: "Add Path Effect\u2026",
+      keywords: ["effect", "trim", "round corners", "pucker", "bloat", "twist", "zig zag", "wiggle", "offset", "merge", "repeater", "appearance", "live"],
+      description: "Adds a live path effect to the bottom of the effect stack of nodes (paths or groups). Effects apply top to bottom; effects after a repeater act on its copies. Returns the new effect ids.",
+      params: {
+        type: "object",
+        properties: {
+          type: { type: "string", enum: VECTOR_EFFECT_TYPES },
+          params: { type: "object", description: EFFECT_PARAMS_DESCRIPTION },
+          index: { type: "integer", minimum: 0, description: "Position in the stack (default: last)." },
+          ids: IDS
+        },
+        required: ["type"]
+      },
+      undoable: true,
+      enabled: enabledFor,
+      run: (_ctx, params) => {
+        if (!VECTOR_EFFECT_TYPES.includes(params.type)) fail(`Unknown effect type "${params.type}".`);
+        const targets = ids(params);
+        const created = controller.addEffect(params.type, { ids: targets, params: params.params, index: params.index });
+        if (!created.length) fail("Nothing to add the effect to.");
+        return { effects: targets.map((id, i) => ({ nodeId: id, effectId: created[i] })) };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}updateEffect`,
+      label: "Edit Path Effect\u2026",
+      keywords: ["effect", "parameters", "enable", "disable", "reorder"],
+      description: "Changes a path effect: its parameters, whether it is enabled, and its position in the stack.",
+      params: {
+        type: "object",
+        properties: {
+          nodeId: { type: "string" },
+          effectId: { type: "string" },
+          params: { type: "object", description: EFFECT_PARAMS_DESCRIPTION },
+          enabled: { type: "boolean" },
+          index: { type: "integer", minimum: 0, description: "Move it to this position in the stack (0 applies first)." }
+        },
+        required: ["nodeId", "effectId"]
+      },
+      undoable: true,
+      run: (_ctx, params) => {
+        if (params.params !== void 0 || params.enabled !== void 0) check(controller.updateEffect(params.nodeId, params.effectId, { params: params.params, enabled: params.enabled }));
+        if (params.index !== void 0) check(controller.moveEffect(params.nodeId, params.effectId, params.index));
+        return { effects: controller.getNode(params.nodeId)?.effects ?? [] };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}removeEffect`,
+      label: "Remove Path Effect",
+      keywords: ["effect", "delete"],
+      description: "Removes a path effect from a node.",
+      params: { type: "object", properties: { nodeId: { type: "string" }, effectId: { type: "string" } }, required: ["nodeId", "effectId"] },
+      undoable: true,
+      run: (_ctx, params) => {
+        check(controller.removeEffect(params.nodeId, params.effectId));
+        return { ok: true };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}expandAppearance`,
+      label: "Expand Appearance",
+      keywords: ["effects", "bake", "flatten", "live boolean", "expand"],
+      description: "Bakes the path effects and live booleans of nodes (and everything inside them) into plain paths.",
+      params: { type: "object", properties: { ids: IDS } },
+      undoable: true,
+      enabled: enabledFor,
+      run: (_ctx, params) => {
+        const expanded = controller.expandAppearance({ ids: ids(params) });
+        if (!expanded.length) fail("Nothing selected has path effects or a live boolean.");
+        return { ids: expanded };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}blend`,
+      label: "Make Blend\u2026",
+      keywords: ["blend", "morph", "tween", "interpolate", "in-between", "steps", "transition"],
+      description: "Blends two or more paths or groups (sharing a parent; bottom to top, or in the order given with keepOrder) into a live blend group: the in-betweens morph shape (anchors matched by arc length, the start and winding that twist least, rotation-aware so turning shapes turn) and paint (OKLab colours, gradients, stroke width, opacity, width profiles), and regenerate whenever a key changes. Spacing: `steps` (count between each pair of keys), `distance` (along the spine) or `smoothColor`. `starts` maps key ids to the anchor of their first subpath the blend starts from. Returns the blend id.",
+      params: {
+        type: "object",
+        properties: {
+          ids: IDS,
+          ...BLEND_PROPS,
+          keepOrder: { type: "boolean", description: "Blend in the order of `ids` instead of stacking order." },
+          starts: { type: "object", additionalProperties: { type: "integer", minimum: 0 }, description: "Start anchor per key id." }
+        }
+      },
       undoable: true,
       run: (_ctx, params) => {
-        const id = controller.booleanOp(params.operation, { ids: ids(params) });
-        if (!id) fail("Select at least two overlapping paths (the result was empty).");
+        checkBlendOptions(params);
+        const id = controller.blend({ ...params, ids: ids(params) });
+        if (!id) fail("Select two or more shapes that share a parent.");
         return { id };
       }
     },
+    {
+      ...base,
+      id: `${prefix}blendOptions`,
+      label: "Blend Options\u2026",
+      keywords: ["blend", "steps", "spacing", "distance", "smooth color", "orientation", "align to path"],
+      description: "Changes the spacing (steps, distance or smoothColor), step count, distance, orient-to-spine and linear morph of the given (or selected) blends; their steps regenerate.",
+      params: { type: "object", properties: { ids: IDS, ...BLEND_PROPS } },
+      undoable: true,
+      run: (_ctx, params) => {
+        checkBlendOptions(params);
+        const r = controller.setBlendOptions(params ?? {}, { ids: params?.ids });
+        if (!r.ok) fail(r.message);
+        return { ok: true };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}expandBlend`,
+      label: "Expand Blend",
+      keywords: ["blend", "expand", "flatten", "bake"],
+      description: "Expands the given (or selected) blends into plain groups of their keys and in-betweens (editable paths with fresh ids). Returns the group ids.",
+      params: { type: "object", properties: { ids: IDS } },
+      undoable: true,
+      run: (_ctx, params) => {
+        const groups = controller.expandBlend({ ids: params?.ids });
+        if (!groups.length) fail("Select a blend to expand.");
+        return { ids: groups };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}releaseBlend`,
+      label: "Release Blend",
+      keywords: ["blend", "release", "undo blend"],
+      description: "Releases the given (or selected) blends: the in-betweens go and the keys (plus a replaced spine, as an unpainted path) take the blend's place. Returns their ids.",
+      params: { type: "object", properties: { ids: IDS } },
+      undoable: true,
+      run: (_ctx, params) => {
+        const released = controller.releaseBlend({ ids: params?.ids });
+        if (!released.length) fail("Select a blend to release.");
+        return { ids: released };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}replaceSpine`,
+      label: "Replace Spine",
+      keywords: ["blend", "spine", "path", "follow", "along path"],
+      description: "With one blend and one path given (or selected): the path becomes the blend's spine (it is removed) and the keys move onto it, spread evenly by arc length; the in-betweens follow it.",
+      params: { type: "object", properties: { ids: IDS } },
+      undoable: true,
+      run: (_ctx, params) => {
+        const r = controller.replaceBlendSpine({ ids: params?.ids });
+        if (!r.ok) fail(r.message);
+        return { ok: true };
+      }
+    },
     {
       ...base,
       id: `${prefix}pathfinder`,
@@ -8642,6 +11243,8 @@ function createVectorCommands(controller, options = {}) {
   ];
 }
 export {
+  DEFAULT_VECTOR_BLEND_DISTANCE,
+  DEFAULT_VECTOR_BLEND_STEPS,
   DEFAULT_VECTOR_PATH_EDIT,
   DEFAULT_VECTOR_SNAP,
   IDENTITY_MATRIX,
@@ -8649,6 +11252,10 @@ export {
   LazyMouse,
   VECTOR_ARROWHEADS,
   VECTOR_ARROWHEAD_LABELS,
+  VECTOR_BLEND_MAX_SMOOTH_STEPS,
+  VECTOR_BLEND_MAX_STEPS,
+  VECTOR_BLEND_SPACINGS,
+  VECTOR_BLEND_SPACING_LABELS,
   VECTOR_BUILDER_HATCH_GAP,
   VECTOR_CLIPBOARD_TYPE,
   VECTOR_CONSTRUCTION_ANGLES,
@@ -8656,8 +11263,14 @@ export {
   VECTOR_CORNER_KIND_LABELS,
   VECTOR_CORNER_WIDGET_INSET,
   VECTOR_EDIT_TOGGLES,
+  VECTOR_EFFECT_DEFAULTS,
+  VECTOR_EFFECT_LABELS,
+  VECTOR_EFFECT_MENU,
+  VECTOR_EFFECT_PARAM_SPECS,
+  VECTOR_EFFECT_TYPES,
   VECTOR_FILL_GAP,
   VECTOR_INK_MAX_CORNERS,
+  VECTOR_MERGE_MODES,
   VECTOR_OVERLAY_THEME,
   VECTOR_PATHFINDER_ACTIONS,
   VECTOR_PATHFINDER_LABELS,
@@ -8679,10 +11292,13 @@ export {
   VECTOR_WIDTH_SAME_T,
   VectorEditorController,
   VectorSnapTargets,
+  activeVectorEffects,
   addBuilderHit,
   applyMatrix,
   applyMatrixLinear,
+  applyVectorBlendOptions,
   applyVectorCornersAttribute,
+  applyVectorEffects,
   arrowheadInset,
   arrowheadPath,
   arrowheadWeight,
@@ -8690,6 +11306,7 @@ export {
   bezierToSubpaths,
   boundsFromPoints,
   boundsIntersect,
+  clearVectorLiveBooleanCache,
   cloneAnchor,
   cloneSubpath,
   cloneVectorDocument,
@@ -8700,26 +11317,40 @@ export {
   cornerBisectorPoint,
   cornerRadiusChange,
   cornerSetback,
+  correspondMorphContours,
   createVectorCommands,
+  createVectorEffect,
+  createVectorMorph,
   curvatureMoveAnchor,
   cutSubpathAt,
   dashIntervals,
   decomposeRigid,
+  effectPathLength,
+  effectPathVertexCount,
   effectiveStrokeAlign,
   ellipseSubpath,
   eraseFromFill,
   eraseFromOutline,
   eraserRegion,
+  evaluateVectorPathKeyframes,
+  expandVectorAppearance,
+  expandVectorAppearances,
+  expandVectorBlend,
   expandVectorCorners,
   expandVectorCornersOf,
   findVectorNode,
   fitCornerRadius,
+  foldVectorBooleanOperands,
+  generateVectorBlendChildren,
   generateWidthProfile,
   getAnchor,
   getAnchorWorld,
   getEditablePathIds,
   getTransformHandlePositions,
+  getVectorBlendControls,
   getVectorCornerWidgets,
+  getVectorEffectsPanel,
+  getVectorEnteredGroups,
   getVectorOverlayRenderData,
   getVectorSceneRenderData,
   getVectorSelectionBoxGeometry,
@@ -8728,8 +11359,10 @@ export {
   getVectorWidthHandles,
   getVisibleAnchors,
   getVisibleHandles,
+  hasOwnVectorAppearance,
   hasPaint,
   hasStrokeExtras,
+  hasVectorAppearance,
   hasVectorCorners,
   hitTestVectorNode,
   hitTestVectorNodes,
@@ -8737,41 +11370,66 @@ export {
   inferAnchorType,
   insertAnchor,
   insertWidthPoint,
+  interpolateMorphContours,
+  interpolateRigidMatrix,
+  interpolateVectorColor,
+  interpolateVectorPaint,
+  interpolateVectorPaths,
+  interpolateVectorStyle,
+  interpolateWidthProfiles,
   invertMatrix,
   isClosedBezierShape,
   isIdentityMatrix,
   isUniformWidthProfile,
+  isVectorBlendGroup,
+  isVectorLiveBoolean,
   isVectorTextTarget,
   joinSubpaths,
   knifePath,
   lineSubpath,
   locateVectorNode,
   matrixRotation,
+  mergePaths,
   mirrorWidthProfile,
+  morphContourToSubpath,
+  morphPathsCross,
   moveAnchorHandle,
   multiplyMatrices,
   nearestSegment,
   nearestStrokePosition,
   nextVectorCornerKind,
   nodeMatrix,
+  normalizeVectorEffectParams,
+  offsetPaths,
   parseSvgTransform,
   parseVectorSvg,
+  pathsCenter,
   planShapeBuilder,
   polygonSubpath,
   polylineBounds,
   pressureWidthProfile,
+  puckerBloatPaths,
   recognizeInkShape,
   rectSubpath,
+  refineMorphContour,
+  refreshVectorBlends,
+  releaseVectorBlend,
   removeAnchorKeepingShape,
   removeAnchors,
   removeAnchorsKeepingShape,
   removeRedundantPoints,
   removeWidthPoints,
+  repeatPaths,
+  resampleGradientStops,
+  resolveVectorBlendOptions,
+  reverseMorphContour,
   reverseSubpath,
   reverseWidthProfile,
   rotateMatrix,
+  roundCornerPaths,
   roundSubpaths,
   samplePolyline,
+  sanitizeVectorEffects,
   sanitizeWidthProfile,
   scaleFor,
   scaleMatrix,
@@ -8789,28 +11447,48 @@ export {
   subpathPointAt,
   subpathSegment,
   subpathSegmentCount,
+  subpathToMorphContour,
   subpathsToBezier,
   taperWaveFactor,
   toVectorKeyInput,
   toVectorModifiers,
   toVectorPointerInput,
+  transformVectorEffects,
   transformVectorNode,
   translateAnchor,
   translateMatrix,
+  trimIntervals,
+  trimPaths,
+  trimPathsIndividually,
+  turnMorphContour,
+  twistPaths,
   unionBounds,
   variableStrokeOutline,
   variableStrokeRings,
+  vectorAppearanceNodes,
+  vectorAppearanceOutline,
+  vectorAppearanceShapes,
+  vectorBlendColorDistance,
+  vectorBlendKeyTargets,
+  vectorBlendKeys,
+  vectorBlendRail,
+  vectorBlendRailAt,
+  vectorBlendSpine,
+  vectorBlendStepCount,
   vectorBuilderErasedEdges,
   vectorCornerAt,
   vectorCorners,
   vectorCornersAttribute,
   vectorDiamondPath,
   vectorDocumentToSvg,
+  vectorEnteredGroups,
   vectorFillMap,
   vectorInkShapeName,
+  vectorLiveBooleanSteps,
   vectorNodeBounds,
   vectorNodeRotation,
   vectorNodeToBezier,
+  vectorOperandOperation,
   vectorPaintToHex,
   vectorPaintToSvg,
   vectorParentMatrix,
@@ -8818,6 +11496,7 @@ export {
   vectorPathEntries,
   vectorPathWorldBezier,
   vectorPathfinderShape,
+  vectorRepeaterCopies,
   vectorResizeCursor,
   vectorResultStyle,
   vectorShapeBuilderHit,
@@ -8837,6 +11516,8 @@ export {
   widthProfileMaxScale,
   widthProfilePreset,
   widthProfilePresetId,
-  widthProfileToAttribute
+  widthProfileToAttribute,
+  wigglePaths,
+  zigzagPaths
 };
 //# sourceMappingURL=index.js.map