@pixerate/editor 0.32.0 → 0.34.0

package/dist/vector/index.js

@@ -10,12 +10,14 @@ import {
   gradientToSvgDef,
   pathBoolean,
   pointInBezierPath,
+  segmentDerivative,
+  segmentIntersections,
   segmentNearest,
   segmentPoint,
   splitSegment,
   toBezierPath,
   transformBezierPath
-} from "../chunk-GQTXV2EQ.js";
+} from "../chunk-RK6HUKDI.js";
 
 // src/vector/types.ts
 var VECTOR_TOOLS = ["select", "direct", "pen", "pencil", "rect", "ellipse", "polygon", "star", "line"];
@@ -189,9 +191,20 @@ function collectPathNodes(node) {
   });
   return out;
 }
-function vectorNodeBounds(node) {
-  if (node.type === "group") return unionBounds(node.children.map(vectorNodeBounds));
-  const b = bezierPathBounds(subpathsToBezier(node.subpaths));
+function nodeMatrix(node) {
+  return node.transform ?? IDENTITY_MATRIX;
+}
+function vectorPathWorldBezier(node, parent = IDENTITY_MATRIX) {
+  const m = multiplyMatrices(nodeMatrix(node), parent);
+  const path = subpathsToBezier(node.subpaths);
+  return isIdentityMatrix(m) ? path : transformBezierPath(path, m);
+}
+function vectorNodeBounds(node, parent = IDENTITY_MATRIX) {
+  if (node.type === "group") {
+    const m = multiplyMatrices(nodeMatrix(node), parent);
+    return unionBounds(node.children.map((c) => vectorNodeBounds(c, m)));
+  }
+  const b = bezierPathBounds(vectorPathWorldBezier(node, parent));
   if (!b) return null;
   return { x: b.minX, y: b.minY, width: b.maxX - b.minX, height: b.maxY - b.minY };
 }
@@ -216,10 +229,13 @@ 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) {
+function hitTestVectorNode(node, p, tolerance = 0, parent = IDENTITY_MATRIX) {
   if (node.visible === false) return false;
-  if (node.type === "group") return node.children.some((c) => hitTestVectorNode(c, p, tolerance));
-  const path = subpathsToBezier(node.subpaths);
+  if (node.type === "group") {
+    const m = multiplyMatrices(nodeMatrix(node), parent);
+    return node.children.some((c) => hitTestVectorNode(c, p, tolerance, m));
+  }
+  const path = vectorPathWorldBezier(node, parent);
   if (path.length === 0) return false;
   const point = [p.x, p.y];
   if (hasPaint(node.fill) && pointInBezierPath(path, point, node.fillRule ?? "nonzero")) return true;
@@ -268,7 +284,38 @@ function rotateMatrix(degrees, origin = { x: 0, y: 0 }) {
 function applyMatrix(m, p) {
   return { x: m[0] * p.x + m[2] * p.y + m[4], y: m[1] * p.x + m[3] * p.y + m[5] };
 }
-function transformVectorNode(node, m) {
+function isIdentityMatrix(m, eps = 1e-12) {
+  return Math.abs(m[0] - 1) < eps && Math.abs(m[1]) < eps && Math.abs(m[2]) < eps && Math.abs(m[3] - 1) < eps && Math.abs(m[4]) < eps && Math.abs(m[5]) < eps;
+}
+function invertMatrix(m) {
+  const [a, b, c, d, e, f] = m;
+  const det = a * d - b * c;
+  if (!det || !Number.isFinite(det)) return IDENTITY_MATRIX;
+  return [d / det, -b / det, -c / det, a / det, (c * f - d * e) / det, (b * e - a * f) / det];
+}
+function applyMatrixLinear(m, v) {
+  return { x: m[0] * v.x + m[2] * v.y, y: m[1] * v.x + m[3] * v.y };
+}
+function matrixRotation(m) {
+  const [a, b, c, d] = m;
+  const mirrored = a * d - b * c < 0;
+  const deg = (mirrored ? Math.atan2(-b - c, d - a) : Math.atan2(b - c, a + d)) * 180 / Math.PI;
+  return Math.abs(deg) < 1e-9 ? 0 : deg;
+}
+function decomposeRigid(m) {
+  const [a, b, c, d, e, f] = m;
+  const deg = matrixRotation(m);
+  if (deg === 0) return { rigid: IDENTITY_MATRIX, residual: m };
+  const r = deg * Math.PI / 180;
+  const cos = Math.cos(r);
+  const sin = Math.sin(r);
+  return {
+    rigid: [cos, sin, -sin, cos, e, f],
+    residual: [cos * a + sin * b, -sin * a + cos * b, cos * c + sin * d, -sin * c + cos * d, 0, 0]
+  };
+}
+function bakeIntoGeometry(node, m) {
+  if (isIdentityMatrix(m)) return node;
   if (node.type === "group") return { ...node, children: node.children.map((c) => transformVectorNode(c, m)) };
   const path = node;
   return {
@@ -286,6 +333,36 @@ function transformVectorNode(node, m) {
     }))
   };
 }
+function transformVectorNode(node, m) {
+  const total = multiplyMatrices(nodeMatrix(node), m);
+  const { rigid, residual } = decomposeRigid(total);
+  const { transform: _old, ...rest } = node;
+  const baked = bakeIntoGeometry(rest, residual);
+  return isIdentityMatrix(rigid) ? baked : { ...baked, transform: rigid };
+}
+function vectorNodeRotation(node, parent = IDENTITY_MATRIX) {
+  return matrixRotation(multiplyMatrices(nodeMatrix(node), parent));
+}
+function vectorWorldMatrix(nodes, id) {
+  const search = (list, parent) => {
+    for (const n of list) {
+      const m = multiplyMatrices(nodeMatrix(n), parent);
+      if (n.id === id) return m;
+      if (n.type === "group") {
+        const found = search(n.children, m);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  return search(nodes, IDENTITY_MATRIX);
+}
+function vectorParentMatrix(nodes, id) {
+  const node = findVectorNode(nodes, id);
+  const world = vectorWorldMatrix(nodes, id);
+  if (!node || !world) return null;
+  return multiplyMatrices(invertMatrix(nodeMatrix(node)), world);
+}
 function translateAnchor(a, dx, dy) {
   const next = cloneAnchor(a);
   next.x += dx;
@@ -478,6 +555,7 @@ function vectorDocumentToSvg(doc, options = {}) {
   const indent = (depth) => pretty ? "  ".repeat(depth) : "";
   const common = (node) => {
     let out2 = ` id="${escapeAttr(node.id)}"`;
+    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"`;
     return out2;
@@ -774,7 +852,759 @@ function parseVectorSvg(svg, options = {}) {
   return { width, height, nodes };
 }
 
+// src/vector/snap.ts
+var VECTOR_CONSTRUCTION_ANGLES = [0, 45, 90, 135];
+function constrainToLeave(leave, p) {
+  if (!leave?.constrain) return p;
+  const dx = p.x - leave.at.x;
+  const dy = p.y - leave.at.y;
+  switch (leave.constrain) {
+    case "axis":
+      return Math.abs(dx) > Math.abs(dy) ? { x: p.x, y: leave.at.y } : { x: leave.at.x, y: p.y };
+    case "square": {
+      const s = Math.max(Math.abs(dx), Math.abs(dy));
+      return { x: leave.at.x + Math.sign(dx || 1) * s, y: leave.at.y + Math.sign(dy || 1) * s };
+    }
+    default: {
+      const len = Math.hypot(dx, dy);
+      const a = Math.round(Math.atan2(dy, dx) / (Math.PI / 4)) * (Math.PI / 4);
+      return { x: leave.at.x + Math.cos(a) * len, y: leave.at.y + Math.sin(a) * len };
+    }
+  }
+}
+var BUDGET = 2e4;
+var CROSSING_PAIRS = 32;
+var CURVE_SAMPLES = 48;
+var BISECT = 50;
+var EQUAL = 1e-6;
+function bound(sorted, key, v, strict) {
+  let lo = 0;
+  let hi = sorted.length;
+  while (lo < hi) {
+    const mid = lo + hi >>> 1;
+    const k = key(sorted[mid]);
+    if (strict ? k <= v : k < v) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+}
+function within(sorted, key, v, tol) {
+  return sorted.slice(bound(sorted, key, v - tol, false), bound(sorted, key, v + tol, true));
+}
+var linesNear = (lines, v, tol) => within(lines, (l) => l.v, v, tol);
+var distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+var toPoint = (p) => [p.x, p.y];
+var toVec = (p) => ({ x: p[0], y: p[1] });
+var LABELS = {
+  anchor: "anchor",
+  centre: "centre",
+  intersect: "intersect",
+  perpendicular: "perpendicular",
+  tangent: "tangent",
+  path: "path",
+  construction: "angle",
+  align: "align",
+  spacing: "spacing",
+  size: "size"
+};
+var fmtLength = (n) => String(Math.round(n * 100) / 100);
+function nodeFrame(node, parent, aabb) {
+  const angle = matrixRotation(multiplyMatrices(nodeMatrix(node), parent));
+  const b = angle ? vectorNodeBounds(node, multiplyMatrices(parent, rotateMatrix(-angle))) : aabb !== void 0 ? aabb : vectorNodeBounds(node, parent);
+  if (!b) return null;
+  const c = { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+  return { width: b.width, height: b.height, centre: angle ? applyMatrix(rotateMatrix(angle), c) : c };
+}
+function contains(node, ids) {
+  if (ids.has(node.id)) return true;
+  return node.type === "group" && node.children.some((c) => contains(c, ids));
+}
+var VectorSnapTargets = class _VectorSnapTargets {
+  points = [];
+  xs = [];
+  ys = [];
+  segments = [];
+  /** Bounds of the objects a moved box spaces itself evenly with. */
+  boxes = [];
+  /** Side lengths of the other objects (in their own frames), which a resize may match. */
+  sizes = [];
+  constructor() {
+  }
+  /** How many targets of each sort were gathered. */
+  get counts() {
+    return { points: this.points.length, lines: this.xs.length + this.ys.length, segments: this.segments.length, boxes: this.boxes.length };
+  }
+  /** Targets for moving nodes `ids`: the other art's anchors, bounds and centres, the artboard, and boxes to space evenly with. */
+  static forMove(doc, ids) {
+    return _VectorSnapTargets.collect(doc, new Set(ids), "bounds");
+  }
+  /** Targets for resizing nodes `ids`: as for a move, plus the other objects' sizes. */
+  static forResize(doc, ids) {
+    return _VectorSnapTargets.collect(doc, new Set(ids), "bounds");
+  }
+  /**
+   * Targets for a drawn point (pen, shape tools): the art but `exclude`, its anchors (as
+   * points and in line), centres, edges and segments. The anchors and segments of `exclude`
+   * (the path being drawn, whose bounds grow with it) stay targets.
+   */
+  static forDrawing(doc, exclude = []) {
+    const skip = new Set(exclude);
+    const t = _VectorSnapTargets.collect(doc, skip, "drawing", false);
+    t.pushPaths(doc, skip, () => false, true);
+    return t.index();
+  }
+  /**
+   * Targets for dragging anchors: the other art with its segments, and the anchors and
+   * segments that stay put on the paths being reshaped (their bounds move along, so they are
+   * no targets). The moving anchors are left out.
+   */
+  static forAnchorDrag(doc, anchors) {
+    const moving = /* @__PURE__ */ new Map();
+    for (const r of anchors) {
+      const set = moving.get(r.nodeId) ?? /* @__PURE__ */ new Set();
+      set.add(`${r.subpath}:${r.index}`);
+      moving.set(r.nodeId, set);
+    }
+    const t = _VectorSnapTargets.collect(doc, new Set(moving.keys()), "segments", false);
+    t.pushPaths(doc, new Set(moving.keys()), (id, s, i) => !!moving.get(id)?.has(`${s}:${i}`), true);
+    return t.index();
+  }
+  /**
+   * Targets for dragging a handle of path `nodeId`: the other art and that path's anchors
+   * (its bounds and the segments through the handle move with it, so they would chase it).
+   */
+  static forHandle(doc, nodeId) {
+    const skip = /* @__PURE__ */ new Set([nodeId]);
+    const t = _VectorSnapTargets.collect(doc, skip, "bounds", false);
+    t.pushPaths(doc, skip, () => false, false);
+    return t.index();
+  }
+  /** The anchors of the paths `ids` as targets (on them and in line), and their segments when `segments`. */
+  pushPaths(doc, ids, moving, segments) {
+    let anchors = BUDGET;
+    let segmentBudget = segments ? BUDGET : 0;
+    const visit = (list, parent) => {
+      for (const n of list) {
+        const m = multiplyMatrices(nodeMatrix(n), parent);
+        if (n.type === "group") visit(n.children, m);
+        else if (ids.has(n.id) && n.visible !== false) {
+          n.subpaths.forEach((sp, s) => {
+            sp.anchors.forEach((a, i) => {
+              if (anchors <= 0 || moving(n.id, s, i)) return;
+              this.pushAnchor(applyMatrix(m, a));
+              anchors--;
+            });
+            segmentBudget = this.pushSegments(sp, m, (i) => moving(n.id, s, i), segmentBudget);
+          });
+        }
+      }
+    };
+    visit(doc.nodes, IDENTITY_MATRIX);
+  }
+  pushAnchor(p) {
+    this.points.push({ p, kind: "anchor" });
+    this.xs.push({ v: p.x, from: p, kind: "anchor" });
+    this.ys.push({ v: p.y, from: p, kind: "anchor" });
+  }
+  /** The segments of `sp` (mapped by `m`) that stay put while the anchors `moving` accepts move. */
+  pushSegments(sp, m, moving, budget) {
+    const n = sp.anchors.length;
+    const count = subpathSegmentCount(sp);
+    for (let i = 0; i < count && budget > 0; i++) {
+      if (moving(i) || moving((i + 1) % n)) continue;
+      const seg = subpathSegment(sp, i).map((q) => toPoint(applyMatrix(m, toVec(q))));
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      for (const [x, y] of seg) {
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+      }
+      this.segments.push({ seg, minX, minY, maxX, maxY });
+      budget--;
+    }
+    return budget;
+  }
+  pushRect(r, kind, centre) {
+    const corners = [
+      { x: r.x, y: r.y },
+      { x: r.x + r.width, y: r.y },
+      { x: r.x + r.width, y: r.y + r.height },
+      { x: r.x, y: r.y + r.height }
+    ];
+    for (const p of corners) {
+      this.xs.push({ v: p.x, from: p, kind });
+      this.ys.push({ v: p.y, from: p, kind });
+    }
+    if (centre) {
+      this.points.push({ p: centre, kind: "centre" });
+      this.xs.push({ v: centre.x, from: centre, kind: "centre" });
+      this.ys.push({ v: centre.y, from: centre, kind: "centre" });
+    }
+  }
+  /** Sorts the targets for `within` (stable: of targets alike, the first gathered wins). */
+  index() {
+    this.points.sort((a, b) => a.p.x - b.p.x);
+    this.xs.sort((a, b) => a.v - b.v);
+    this.ys.sort((a, b) => a.v - b.v);
+    return this;
+  }
+  /**
+   * Gathers targets from the artboard and every visible node but `exclude` (and what is inside
+   * those): each leaf's anchors (also as lines for `drawing`), its segments (`segments`,
+   * `drawing`), its bounds' corners as lines and its centre; and the top-level objects' boxes and
+   * sizes (inside a group holding an excluded node, that group's other members).
+   */
+  static collect(doc, exclude, gather, sort = true) {
+    const self = new _VectorSnapTargets();
+    const artboard = { x: 0, y: 0, width: doc.width, height: doc.height };
+    self.pushRect(artboard, "artboard", { x: doc.width / 2, y: doc.height / 2 });
+    let anchors = BUDGET;
+    let segments = BUDGET;
+    const visit = (list, parent) => {
+      for (const n of list) {
+        if (exclude.has(n.id) || n.visible === false) continue;
+        const m = multiplyMatrices(nodeMatrix(n), parent);
+        if (n.type === "group") {
+          visit(n.children, m);
+          continue;
+        }
+        if (anchors <= 0) continue;
+        for (const sp of n.subpaths) {
+          for (const a of sp.anchors) {
+            if (anchors-- <= 0) break;
+            const p = applyMatrix(m, a);
+            if (gather === "drawing") self.pushAnchor(p);
+            else self.points.push({ p, kind: "anchor" });
+          }
+          if (gather !== "bounds") segments = self.pushSegments(sp, m, () => false, segments);
+        }
+        const b = vectorNodeBounds(n, parent);
+        const f = nodeFrame(n, parent, b);
+        if (b) self.pushRect(b, "edge", f?.centre ?? null);
+      }
+    };
+    visit(doc.nodes, IDENTITY_MATRIX);
+    const objects = (list, parent) => {
+      for (const n of list) {
+        if (exclude.has(n.id) || n.visible === false || self.boxes.length >= BUDGET) continue;
+        if (n.type === "group" && contains(n, exclude)) {
+          objects(n.children, multiplyMatrices(nodeMatrix(n), parent));
+          continue;
+        }
+        const b = vectorNodeBounds(n, parent);
+        if (b) self.boxes.push(b);
+        const f = nodeFrame(n, parent, b);
+        if (f) self.sizes.push(f.width, f.height);
+      }
+    };
+    objects(doc.nodes, IDENTITY_MATRIX);
+    return sort ? self.index() : self;
+  }
+  // -------------------------------------------------------------------------
+  // Points
+  // -------------------------------------------------------------------------
+  /** Snaps a single point (see `snapFrom`). */
+  snapPoint(p, tol) {
+    return this.snapFrom(p, null, tol);
+  }
+  /**
+   * Snaps a point `p`, drawn or dragged from `leave` when given. With `leave.constrain` it keeps
+   * to its angle round `leave.at`, sliding along that way into line with the nearest target.
+   * Otherwise it lands, in order, on an anchor or centre, an intersection of two paths, the
+   * perpendicular foot or a tangent point from `leave.at`, a path, a construction guide
+   * through `leave.at` (where a target's line crosses it if one does nearby), or else lines up
+   * with targets on x and y.
+   */
+  snapFrom(p, leave, tol) {
+    const none = (q) => ({ point: q, kind: null, x: false, y: false, lines: [], labels: [] });
+    const at = (q, kind, lines2 = []) => ({
+      point: q,
+      kind,
+      x: true,
+      y: true,
+      lines: lines2,
+      labels: [this.label(q, kind)]
+    });
+    if (leave?.constrain) {
+      const q = constrainToLeave(leave, p);
+      const hit = this.slide(leave.at, { x: q.x - leave.at.x, y: q.y - leave.at.y }, q, tol, true);
+      return hit ? { point: hit.point, x: true, y: true, ...this.linedUp(hit.point, hit.from) } : none(q);
+    }
+    const point = this.nearestPoint(p, tol);
+    if (point) return at(point.p, point.kind);
+    const near = this.segmentsNear(p, tol);
+    const crossing = this.crossing(near, p, tol);
+    if (crossing) return at(crossing, "intersect");
+    if (leave && leave.curves !== false) {
+      const foot = this.curvePoint(near, leave.at, p, tol);
+      if (foot) return at(foot.point, foot.kind, [line("construction", leave.at, foot.point)]);
+    }
+    const on = this.onSegment(near);
+    if (on) return at(on, "path");
+    if (leave?.angles?.length) {
+      const c = construction(leave, p, tol);
+      if (c) {
+        const hit = this.slide(leave.at, c.dir, c.point, tol, false);
+        if (hit) {
+          const lined = this.linedUp(hit.point, hit.from);
+          return { point: hit.point, x: true, y: true, kind: lined.kind, lines: [line("construction", leave.at, hit.point), ...lined.lines], labels: lined.labels };
+        }
+        return { point: c.point, kind: "construction", x: true, y: true, lines: [line("construction", leave.at, c.point)], labels: [] };
+      }
+    }
+    const nearest = (lines2, v) => {
+      let best = null;
+      for (const l of linesNear(lines2, v, tol)) if (!best || Math.abs(l.v - v) < Math.abs(best.v - v)) best = l;
+      return best;
+    };
+    const bx = nearest(this.xs, p.x);
+    const by = nearest(this.ys, p.y);
+    if (!bx && !by) return none(p);
+    const out = { x: bx ? bx.v : p.x, y: by ? by.v : p.y };
+    const lines = [];
+    if (bx) lines.push(line("align", bx.from, { x: out.x, y: out.y }));
+    if (by) lines.push(line("align", by.from, { x: out.x, y: out.y }));
+    return { point: out, kind: "align", x: !!bx, y: !!by, lines, labels: [this.label(out, "align")] };
+  }
+  label(p, kind, text = LABELS[kind]) {
+    return { kind, x: p.x, y: p.y, text };
+  }
+  /** The anchor or centre nearest `p`, within `tol`. */
+  nearestPoint(p, tol) {
+    let best = null;
+    let bestD = Infinity;
+    for (const t of within(this.points, (e) => e.p.x, p.x, tol)) {
+      const d = distance(t.p, p);
+      if (d <= tol && d < bestD) {
+        best = t;
+        bestD = d;
+      }
+    }
+    return best;
+  }
+  /**
+   * Slides `q`, on the line through `at` along `dir` (beyond `at` only for a `ray`), to where
+   * the nearest target line crosses it, at most twice `tol` away: where it lands and the
+   * target point that line comes from.
+   */
+  slide(at, dir, q, tol, ray) {
+    const len2 = dir.x * dir.x + dir.y * dir.y;
+    if (!Number.isFinite(len2) || len2 <= 1e-18) return null;
+    const reach = 2 * tol;
+    let best = null;
+    for (const vertical of [true, false]) {
+      const d = vertical ? dir.x : dir.y;
+      if (Math.abs(d) <= 1e-9) continue;
+      const a = vertical ? at.x : at.y;
+      for (const l of linesNear(vertical ? this.xs : this.ys, vertical ? q.x : q.y, reach)) {
+        const s = (l.v - a) / d;
+        const hit = vertical ? { x: l.v, y: at.y + dir.y * s } : { x: at.x + dir.x * s, y: l.v };
+        const moved = distance(hit, q);
+        if (moved <= reach && (!ray || s > 0) && (!best || moved < best.moved)) best = { moved, point: hit, from: l.from };
+      }
+    }
+    return best && { point: best.point, from: best.from };
+  }
+  /** The guides of a point `q` slid into line with the target at `from`: the line and "align", or the target's own label when `q` sits on it. */
+  linedUp(q, from) {
+    const on = this.nearestPoint(q, 1e-9);
+    if (on) return { kind: on.kind, lines: [], labels: [this.label(on.p, on.kind)] };
+    return { kind: "align", lines: [line("align", from, q)], labels: [this.label(q, "align")] };
+  }
+  /** Target segments whose control box reaches `p` and which pass within `tol` of it, nearest first. */
+  segmentsNear(p, tol) {
+    const out = [];
+    const pt = toPoint(p);
+    for (const s of this.segments) {
+      if (p.x < s.minX - tol || p.x > s.maxX + tol || p.y < s.minY - tol || p.y > s.maxY + tol) continue;
+      const hit = segmentNearest(s.seg, pt);
+      if (hit.distance <= tol) out.push({ seg: s.seg, t: hit.t, distance: hit.distance });
+    }
+    return out.sort((a, b) => a.distance - b.distance);
+  }
+  onSegment(near) {
+    return near.length ? toVec(segmentPoint(near[0].seg, near[0].t)) : null;
+  }
+  /** Where two of the target segments near `p` cross, the crossing nearest `p` within `tol`. */
+  crossing(near, p, tol) {
+    const list = near.slice(0, CROSSING_PAIRS);
+    let best = null;
+    let bestD = Infinity;
+    for (let i = 0; i < list.length; i++) {
+      for (let j = i + 1; j < list.length; j++) {
+        for (const hit of segmentIntersections(list[i].seg, list[j].seg)) {
+          const q = toVec(hit.point);
+          const d = distance(q, p);
+          if (d <= tol && d < bestD) {
+            best = q;
+            bestD = d;
+          }
+        }
+      }
+    }
+    return best;
+  }
+  /**
+   * The foot of a perpendicular, or a tangent point, from `base` on a target segment near `p`
+   * (within `tol` of it): roots of `(B(t) − base) · B′(t)` and `(B(t) − base) × B′(t)`
+   * bracketed by sign changes of samples and narrowed by bisection.
+   */
+  curvePoint(near, base, p, tol) {
+    let best = null;
+    for (const { seg } of near) {
+      for (const kind of ["perpendicular", "tangent"]) {
+        if (kind === "tangent" && seg.length === 2) continue;
+        for (const q of solveOnSegment(seg, base, kind === "perpendicular" ? dotCondition : crossCondition)) {
+          const d = distance(q, p);
+          if (d <= tol && (!best || d < best.d)) best = { point: q, kind, d };
+        }
+      }
+    }
+    return best && { point: best.point, kind: best.kind };
+  }
+  // -------------------------------------------------------------------------
+  // Boxes
+  // -------------------------------------------------------------------------
+  /**
+   * Snaps a moving box `r` (the moved selection's bounds): its edge or centre nearest a target
+   * line on each axis (`axes` limits which may move). With `spacing`, an axis that lines up
+   * with nothing spaces the box evenly in its row or column. Returns the correction and guides.
+   */
+  snapRect(r, tol, options = {}) {
+    const axes = { x: options.axes?.x !== false, y: options.axes?.y !== false };
+    const nearest = (lines, values) => {
+      let best = null;
+      for (const v of values) for (const l of linesNear(lines, v, tol)) if (!best || Math.abs(l.v - v) < Math.abs(best.d)) best = { d: l.v - v, from: l.from };
+      return best;
+    };
+    const bx = axes.x ? nearest(this.xs, [r.x, r.x + r.width / 2, r.x + r.width]) : null;
+    const by = axes.y ? nearest(this.ys, [r.y, r.y + r.height / 2, r.y + r.height]) : null;
+    const out = { dx: bx?.d ?? 0, dy: by?.d ?? 0, x: !!bx, y: !!by, lines: [], labels: [] };
+    const done = { ...r, x: r.x + out.dx, y: r.y + out.dy };
+    if (bx) {
+      const x = bx.from.x;
+      out.lines.push({ kind: "align", x1: x, y1: Math.min(bx.from.y, done.y), x2: x, y2: Math.max(bx.from.y, done.y + done.height) });
+    }
+    if (by) {
+      const y = by.from.y;
+      out.lines.push({ kind: "align", x1: Math.min(by.from.x, done.x), y1: y, x2: Math.max(by.from.x, done.x + done.width), y2: y });
+    }
+    if (options.spacing && this.boxes.length) {
+      for (const horizontal of [true, false]) {
+        if (horizontal ? out.x || !axes.x : out.y || !axes.y) continue;
+        const moved = { ...r, x: r.x + out.dx, y: r.y + out.dy };
+        const even = this.evenSpacing(moved, horizontal, tol);
+        if (!even) continue;
+        if (horizontal) {
+          out.dx += even.shift;
+          out.x = true;
+        } else {
+          out.dy += even.shift;
+          out.y = true;
+        }
+        for (const gap of even.gaps) this.gapMarks(gap, horizontal, tol, out);
+      }
+    }
+    if (bx || by) out.labels.unshift(this.label({ x: r.x + out.dx + r.width / 2, y: r.y + out.dy + r.height / 2 }, "align"));
+    return out;
+  }
+  /**
+   * Equal spacing along x (`horizontal`) or y for the moved box `r`, among the objects of its
+   * row (column): the shift within `tol` that centres it between its neighbours, or leaves it
+   * as far from the neighbour before or after it as two other objects of the row are apart;
+   * and the gaps that are equal then, as (start, end, where across).
+   */
+  evenSpacing(r, horizontal, tol) {
+    const span = (b, x) => x ? [b.x, b.x + b.width] : [b.y, b.y + b.height];
+    const [r0, r1] = span(r, horizontal);
+    const len = r1 - r0;
+    const [c0, c1] = span(r, !horizontal);
+    const row = this.boxes.map((b) => ({ b, a0: span(b, horizontal)[0], a1: span(b, horizontal)[1] })).filter((e) => span(e.b, !horizontal)[0] < c1 && span(e.b, !horizontal)[1] > c0 && (e.a1 <= r0 + tol || e.a0 >= r1 - tol)).sort((a, b) => a.a0 - b.a0);
+    if (!row.length) return null;
+    const mid = (a, b) => (Math.max(span(a, !horizontal)[0], span(b, !horizontal)[0]) + Math.min(span(a, !horizontal)[1], span(b, !horizontal)[1])) / 2;
+    const pairs = [];
+    for (const p of row) {
+      const next = bound(row, (e) => e.a0, p.a1, false);
+      const q = row[next];
+      if (!q) continue;
+      const straddles = p.a1 <= r0 + tol && q.a0 >= r1 - tol;
+      if (q.a0 > p.a1 && !straddles) pairs.push({ g: q.a0 - p.a1, gap: [p.a1, q.a0, mid(p.b, q.b)] });
+    }
+    let before = null;
+    let after = null;
+    for (const e of row) {
+      if (e.a1 <= r0 + tol && (!before || e.a1 > before.a1)) before = e;
+      if (e.a0 >= r1 - tol && (!after || e.a0 < after.a0)) after = e;
+    }
+    const starts = [];
+    if (before && after && after.a0 - before.a1 > len) starts.push({ start: (before.a1 + after.a0 - len) / 2, repeats: null });
+    for (const { g } of pairs) {
+      if (before) starts.push({ start: before.a1 + g, repeats: g });
+      if (after) starts.push({ start: after.a0 - g - len, repeats: g });
+    }
+    let pick = null;
+    for (const s of starts) if (Math.abs(s.start - r0) <= tol && (!pick || Math.abs(s.start - r0) < Math.abs(pick.start - r0))) pick = s;
+    if (!pick) return null;
+    const { start, repeats } = pick;
+    const at = horizontal ? { ...r, x: start } : { ...r, y: start };
+    const end = start + len;
+    const gaps = [];
+    if (before && (repeats === null || Math.abs(start - before.a1 - repeats) <= EQUAL)) gaps.push([before.a1, start, mid(before.b, at)]);
+    if (after && (repeats === null || Math.abs(after.a0 - end - repeats) <= EQUAL)) gaps.push([end, after.a0, mid(after.b, at)]);
+    if (repeats !== null) {
+      for (const p of pairs) if (Math.abs(p.g - repeats) <= EQUAL) gaps.push(p.gap);
+    }
+    return { shift: start - r0, gaps };
+  }
+  /** A gap mark: a line across the gap with a tick at each end, and its length as a label. */
+  gapMarks([u0, u1, c], horizontal, tick, out) {
+    const pt = (u, v) => horizontal ? { x: u, y: v } : { x: v, y: u };
+    out.lines.push(line("spacing", pt(u0, c), pt(u1, c)), line("spacing", pt(u0, c - tick), pt(u0, c + tick)), line("spacing", pt(u1, c - tick), pt(u1, c + tick)));
+    out.labels.push(this.label(pt((u0 + u1) / 2, c), "spacing", fmtLength(u1 - u0)));
+  }
+  /** The other objects' side length nearest `length`, within `tol`, or null. */
+  matchSize(length2, tol) {
+    let best = null;
+    for (const s of this.sizes) if (Math.abs(s - length2) <= tol && (best === null || Math.abs(s - length2) < Math.abs(best - length2))) best = s;
+    return best;
+  }
+  /**
+   * Snaps a selection-box resize. `sx / sy` are the scale `scaleFor` gave for dragging
+   * `handle` of `frame` (in the box's own, possibly rotated frame), `mods.shift` keeps the
+   * proportions and `mods.alt` scales about the centre. The handle lands on an anchor or
+   * centre within `tol`, else the corner or the side it moves lines up with the nearest
+   * target, whatever the box's angle; a handle with one way to go (a side, or a proportional
+   * 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;
+    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 d0 = { x: hp.x - origin.x, y: hp.y - origin.y };
+    const valid = (n, s) => Number.isFinite(n) && n * s > 0;
+    const nearest = (v, lines) => {
+      let best = null;
+      for (const l of linesNear(lines, v, tol)) if (!best || Math.abs(l.v - v) < Math.abs(best.v - v)) best = l;
+      return best;
+    };
+    let nx = sx;
+    let ny = sy;
+    let snap = { hx: null, hy: null, on: null };
+    if (corner && !proportional) {
+      const p = applyMatrix(toDoc, { x: origin.x + d0.x * sx, y: origin.y + d0.y * sy });
+      const hx = nearest(p.x, this.xs);
+      const hy = nearest(p.y, this.ys);
+      const on = this.nearestPoint(p, tol);
+      const tries = [];
+      if (on) tries.push({ tx: on.p.x, ty: on.p.y, s: { hx: null, hy: null, on } });
+      tries.push({ tx: hx?.v ?? null, ty: hy?.v ?? null, s: { hx, hy, on: null } });
+      tries.push({ tx: hx?.v ?? null, ty: null, s: { hx, hy: null, on: null } });
+      tries.push({ tx: null, ty: hy?.v ?? null, s: { hx: null, hy, on: null } });
+      for (const { tx, ty, s } of tries) {
+        if (tx === null && ty === null) continue;
+        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 (tx === null) cx = sx;
+          if (ty === null) cy = sy;
+        }
+        if (valid(cx, sx) && valid(cy, sy)) {
+          nx = cx;
+          ny = cy;
+          snap = s;
+          break;
+        }
+      }
+    } else {
+      const movesX2 = handle === "e" || handle === "w";
+      let e;
+      let c;
+      let s0;
+      if (corner) [e, c, s0] = [{ x: Math.sign(sx), y: Math.sign(sy) }, { x: 0, y: 0 }, Math.abs(sx)];
+      else if (movesX2) [e, c, s0] = proportional ? [{ x: 1, y: Math.sign(sx) }, { x: 0, y: 0 }, sx] : [{ x: 1, y: 0 }, { x: 0, y: 1 }, sx];
+      else [e, c, s0] = proportional ? [{ x: Math.sign(sy), y: 1 }, { x: 0, y: 0 }, sy] : [{ x: 0, y: 1 }, { x: 1, y: 0 }, sy];
+      const i = RING.indexOf(handle);
+      const ends = corner ? [] : [RING[(i + 1) % 8], RING[(i + 7) % 8]];
+      const travel = Math.hypot(e.x * d0.x, e.y * d0.y);
+      let best = null;
+      const consider = (s, inLine, found2) => {
+        const moved = Math.abs(s - s0) * travel;
+        if (!valid(s, s0) || moved > 2 * tol) return;
+        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 v = { x: hv.x - origin.x, y: hv.y - origin.y };
+        const base = applyMatrix(toDoc, { x: origin.x + c.x * v.x, y: origin.y + c.y * v.y });
+        const dir = applyMatrix(toDoc, { x: e.x * v.x, y: e.y * v.y });
+        const p = { x: base.x + dir.x * s0, y: base.y + dir.y * s0 };
+        const l2 = dir.x * dir.x + dir.y * dir.y;
+        const on = l2 > 1e-18 ? this.nearestPoint(p, tol) : null;
+        if (on) consider(((on.p.x - base.x) * dir.x + (on.p.y - base.y) * dir.y) / l2, false, { hx: null, hy: null, on });
+        if (Math.abs(dir.x) > 1e-9) {
+          const hit = nearest(p.x, this.xs);
+          if (hit) consider((hit.v - base.x) / dir.x, true, { hx: hit, hy: null, on: null });
+        }
+        if (Math.abs(dir.y) > 1e-9) {
+          const hit = nearest(p.y, this.ys);
+          if (hit) consider((hit.v - base.y) / dir.y, true, { hx: null, hy: hit, on: null });
+        }
+      }
+      const found = best;
+      if (found) {
+        nx = c.x + found.s * e.x;
+        ny = c.y + found.s * e.y;
+        snap = found.snap;
+      }
+    }
+    const out = { sx: nx, sy: ny, snapped: false, lines: [], labels: [] };
+    const handleAt = () => applyMatrix(toDoc, { x: origin.x + d0.x * out.sx, y: origin.y + d0.y * out.sy });
+    if (snap.on) {
+      out.snapped = true;
+      out.labels.push(this.label(snap.on.p, snap.on.kind));
+      return out;
+    }
+    const movesX = handle !== "n" && handle !== "s";
+    const movesY = handle !== "e" && handle !== "w";
+    const sized = [];
+    if (!proportional) {
+      if (movesX && !snap.hx && !(frame.angle && snap.hy) && frame.width > 1e-9) {
+        const len = this.matchSize(Math.abs(out.sx) * frame.width, tol);
+        if (len !== null && len > 0) {
+          out.sx = Math.sign(out.sx || 1) * (len / frame.width);
+          sized.push("x");
+        }
+      }
+      if (movesY && !snap.hy && !(frame.angle && snap.hx) && frame.height > 1e-9) {
+        const len = this.matchSize(Math.abs(out.sy) * frame.height, tol);
+        if (len !== null && len > 0) {
+          out.sy = Math.sign(out.sy || 1) * (len / frame.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 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 },
+      { x: box.x1, y: box.y0 },
+      { x: box.x1, y: box.y1 },
+      { x: box.x0, y: box.y1 }
+    ].map((q) => applyMatrix(toDoc, q));
+    const pminY = Math.min(...page.map((q) => q.y));
+    const pmaxY = Math.max(...page.map((q) => q.y));
+    const pminX = Math.min(...page.map((q) => q.x));
+    const pmaxX = Math.max(...page.map((q) => q.x));
+    if (snap.hx) out.lines.push({ kind: "align", x1: snap.hx.v, y1: Math.min(snap.hx.from.y, pminY), x2: snap.hx.v, y2: Math.max(snap.hx.from.y, pmaxY) });
+    if (snap.hy) out.lines.push({ kind: "align", x1: Math.min(snap.hy.from.x, pminX), y1: snap.hy.v, x2: Math.max(snap.hy.from.x, pmaxX), y2: snap.hy.v });
+    if (snap.hx || snap.hy) {
+      out.snapped = true;
+      out.labels.push(this.label(handleAt(), "align"));
+    }
+    for (const axis of sized) {
+      out.snapped = true;
+      const off = tol * 2;
+      const [a, b] = axis === "x" ? [{ x: box.x0, y: box.y1 + off }, { x: box.x1, y: box.y1 + off }] : [{ x: box.x1 + off, y: box.y0 }, { x: box.x1 + off, y: box.y1 }];
+      const pa = applyMatrix(toDoc, a);
+      const pb = applyMatrix(toDoc, b);
+      out.lines.push(line("size", pa, pb));
+      out.labels.push(this.label({ x: (pa.x + pb.x) / 2, y: (pa.y + pb.y) / 2 }, "size", `${axis === "x" ? "W" : "H"} ${fmtLength(axis === "x" ? box.x1 - box.x0 : box.y1 - box.y0)}`));
+    }
+    return out;
+  }
+};
+var RING = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+function opposite(h) {
+  return RING[(RING.indexOf(h) + 4) % 8];
+}
+function handlePos(h, r) {
+  const x = h.includes("w") ? r.x : h.includes("e") ? r.x + r.width : r.x + r.width / 2;
+  const y = h.startsWith("n") ? r.y : h.startsWith("s") ? r.y + r.height : r.y + r.height / 2;
+  return { x, y };
+}
+function line(kind, a, b) {
+  return { kind, x1: a.x, y1: a.y, x2: b.x, y2: b.y };
+}
+function construction(leave, p, tol) {
+  const v = { x: p.x - leave.at.x, y: p.y - leave.at.y };
+  if (Math.hypot(v.x, v.y) <= tol) return null;
+  let best = null;
+  for (const a of leave.angles ?? []) {
+    const r = a * Math.PI / 180;
+    const exact = (n) => Math.abs(n) < 1e-12 ? 0 : n;
+    const dir = { x: exact(Math.cos(r)), y: exact(-Math.sin(r)) };
+    const k = v.x * dir.x + v.y * dir.y;
+    const point = { x: leave.at.x + dir.x * k, y: leave.at.y + dir.y * k };
+    const d = distance(point, p);
+    if (d <= tol && (!best || d < best.d)) best = { dir, point, d };
+  }
+  return best && { dir: best.dir, point: best.point };
+}
+var dotCondition = (r, d) => r[0] * d[0] + r[1] * d[1];
+var crossCondition = (r, d) => r[0] * d[1] - r[1] * d[0];
+function solveOnSegment(seg, base, cond) {
+  const b = [base.x, base.y];
+  const g = (t) => {
+    const p = segmentPoint(seg, t);
+    return cond([p[0] - b[0], p[1] - b[1]], segmentDerivative(seg, t));
+  };
+  const vals = [];
+  let scale = 0;
+  for (let i = 0; i <= CURVE_SAMPLES; i++) {
+    const t = i / CURVE_SAMPLES;
+    const p = segmentPoint(seg, t);
+    const d = segmentDerivative(seg, t);
+    const r = [p[0] - b[0], p[1] - b[1]];
+    vals.push(cond(r, d));
+    scale = Math.max(scale, Math.hypot(r[0], r[1]) * Math.hypot(d[0], d[1]));
+  }
+  if (!(scale > 0) || vals.every((v) => Math.abs(v) <= scale * 1e-12)) return [];
+  const out = [];
+  for (let i = 0; i < CURVE_SAMPLES; i++) {
+    const ga = vals[i];
+    const gb = vals[i + 1];
+    if (!(Number.isFinite(ga) && Number.isFinite(gb)) || ga > 0 === gb > 0 && ga !== 0) continue;
+    let lo = i / CURVE_SAMPLES;
+    let hi = (i + 1) / CURVE_SAMPLES;
+    let flo = ga;
+    for (let k = 0; k < BISECT; k++) {
+      const m = (lo + hi) / 2;
+      const fm = g(m);
+      if (fm === 0) {
+        lo = hi = m;
+        break;
+      }
+      if (fm > 0 === flo > 0) {
+        lo = m;
+        flo = fm;
+      } else hi = m;
+    }
+    const t = (lo + hi) / 2;
+    const p = segmentPoint(seg, t);
+    const dv = segmentDerivative(seg, t);
+    const r = Math.hypot(p[0] - b[0], p[1] - b[1]);
+    const dl = Math.hypot(dv[0], dv[1]);
+    if (!(r > 1e-9 && dl > 0) || Math.abs(cond([p[0] - b[0], p[1] - b[1]], dv)) > 1e-6 * r * dl) continue;
+    if (!out.some((q) => Math.hypot(q.x - p[0], q.y - p[1]) <= 1e-9 * (1 + r))) out.push({ x: p[0], y: p[1] });
+  }
+  return out;
+}
+
 // src/vector/controller.ts
+var DEFAULT_VECTOR_SNAP = { grid: 0, objects: true, guides: true, threshold: 5, angles: VECTOR_CONSTRUCTION_ANGLES };
 var VECTOR_CLIPBOARD_TYPE = "pixerate/vector";
 var DEFAULT_DEFAULTS = {
   fill: "#d4d4d8",
@@ -855,6 +1685,24 @@ function getAnchor(doc, ref) {
   const node = findVectorNode(doc.nodes, ref.nodeId);
   return node?.type === "path" ? node.subpaths[ref.subpath]?.anchors[ref.index] : void 0;
 }
+function getAnchorWorld(doc, ref) {
+  const a = getAnchor(doc, ref);
+  if (!a) return void 0;
+  const m = vectorWorldMatrix(doc.nodes, ref.nodeId) ?? IDENTITY_MATRIX;
+  const p = applyMatrix(m, a);
+  return { x: p.x, y: p.y, ...a.in ? { in: applyMatrix(m, a.in) } : {}, ...a.out ? { out: applyMatrix(m, a.out) } : {}, ...a.type ? { type: a.type } : {} };
+}
+function getVectorSelectionFrame(doc, ids) {
+  const nodes = ids.map((id) => ({ node: findVectorNode(doc.nodes, id), parent: vectorParentMatrix(doc.nodes, id) ?? IDENTITY_MATRIX })).filter((n) => n.node);
+  if (!nodes.length) return null;
+  const angles = nodes.map((n) => matrixRotation(multiplyMatrices(nodeMatrix(n.node), n.parent)));
+  const same = angles.every((a) => Math.abs(normalizeAngle(a - angles[0])) < 1e-6);
+  const angle = same ? angles[0] : 0;
+  const unrotate = rotateMatrix(-angle);
+  const b = unionBounds(nodes.map((n) => vectorNodeBounds(n.node, multiplyMatrices(n.parent, unrotate))));
+  return b ? { ...b, angle } : null;
+}
+var normalizeAngle = (a) => ((a + 180) % 360 + 360) % 360 - 180;
 function getTransformHandlePositions(box) {
   const { x, y, width: w, height: h } = box;
   return [
@@ -869,17 +1717,28 @@ function getTransformHandlePositions(box) {
     { handle: "rotate", x: x + w / 2, y: y - VECTOR_ROTATE_HANDLE_OFFSET }
   ];
 }
-var RESIZE_CURSORS = {
-  nw: "nwse-resize",
-  se: "nwse-resize",
-  ne: "nesw-resize",
-  sw: "nesw-resize",
-  n: "ns-resize",
-  s: "ns-resize",
-  e: "ew-resize",
-  w: "ew-resize",
-  rotate: "grab"
-};
+function getVectorSelectionBoxGeometry(frame, 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 handles = getTransformHandlePositions(box).map((h) => ({ ...h, screen: toScreen2(h) }));
+  const corners = [
+    { x: box.x, y: box.y },
+    { x: box.x + box.width, y: box.y },
+    { x: box.x + box.width, y: box.y + box.height },
+    { 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 };
+}
+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 };
+function vectorResizeCursor(handle, angle = 0) {
+  if (handle === "rotate") return "grab";
+  const a = ((HANDLE_ANGLES[handle] + angle) % 180 + 180) % 180;
+  return RESIZE_CURSOR_ORDER[Math.round(a / 45) % 4];
+}
 var TOOL_LABELS = {
   select: "Select",
   direct: "Direct Select",
@@ -938,6 +1797,7 @@ function mapTree(nodes, fn) {
   }
   return changed ? out : nodes;
 }
+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)}`;
 var VectorEditorController = class {
@@ -956,6 +1816,11 @@ var VectorEditorController = class {
   pointer = null;
   drag = null;
   interaction = null;
+  guides = null;
+  /** Whether the last `snapDrawn` landed on an object (guides may be hidden). */
+  snappedToObject = false;
+  /** Drawing targets for hovering the pen and shape tools, kept while the document and the excluded path stay the same. */
+  hoverTargets = null;
   spaceHeld = false;
   clipboard = null;
   createId;
@@ -973,7 +1838,7 @@ var VectorEditorController = class {
     this.tool = options.tool ?? "select";
     this.defaults = { ...DEFAULT_DEFAULTS, ...options.defaults ?? {} };
     this.viewport = { x: 0, y: 0, zoom: 1, ...options.viewport ?? {} };
-    this.snap = { grid: 0, ...options.snap ?? {} };
+    this.snap = { ...DEFAULT_VECTOR_SNAP, ...options.snap ?? {} };
     this.hitRadius = options.hitRadius ?? 6;
     this.createId = options.createId ?? defaultCreateId;
     this.onChange = options.onChange;
@@ -1018,9 +1883,11 @@ var VectorEditorController = class {
       selectedAnchors: this.anchors,
       editingId: this.editingId,
       selectionBounds: this.boundsOf(this.selection),
+      selectionFrame: this.frameOf(this.selectedRoots()),
       viewport: this.viewport,
       defaults: this.defaults,
       snap: this.snap,
+      guides: this.guides,
       hitRadius: this.hitRadius,
       hover: this.hover,
       cursor: this.cursorFor(),
@@ -1048,7 +1915,23 @@ var VectorEditorController = class {
     });
   }
   boundsOf(ids) {
-    return unionBounds(ids.map((id) => this.getNode(id)).map((n) => n ? vectorNodeBounds(n) : null));
+    return unionBounds(
+      ids.map((id) => {
+        const n = this.getNode(id);
+        return n ? vectorNodeBounds(n, vectorParentMatrix(this.doc.nodes, id) ?? IDENTITY_MATRIX) : null;
+      })
+    );
+  }
+  frameOf(ids) {
+    return getVectorSelectionFrame(this.doc, ids);
+  }
+  /** Local → document matrix of a node in `doc` (default: the current document). */
+  worldOf(id, doc = this.doc) {
+    return vectorWorldMatrix(doc.nodes, id) ?? IDENTITY_MATRIX;
+  }
+  /** A document point in node `id`'s own space. */
+  toLocal(id, p, doc = this.doc) {
+    return applyMatrix(invertMatrix(this.worldOf(id, doc)), p);
   }
   cursorFor() {
     if (this.drag?.kind === "pan" || this.spaceHeld) return this.drag ? "grabbing" : "grab";
@@ -1057,7 +1940,7 @@ var VectorEditorController = class {
     const h = this.hover;
     switch (this.tool) {
       case "select":
-        if (h?.transformHandle) return RESIZE_CURSORS[h.transformHandle];
+        if (h?.transformHandle) return vectorResizeCursor(h.transformHandle, this.frameOf(this.selectedRoots())?.angle ?? 0);
         return h?.nodeId ? "move" : "default";
       case "direct":
         if (h?.anchor || h?.handle) return "pointer";
@@ -1189,6 +2072,7 @@ var VectorEditorController = class {
     this.cancelDrag();
     this.tool = tool;
     this.hover = null;
+    this.guides = null;
     if (tool !== "direct") {
       this.anchors = [];
       this.editingId = null;
@@ -1201,18 +2085,74 @@ var VectorEditorController = class {
   }
   setSnap(snap) {
     this.snap = { ...this.snap, ...snap };
+    if (!this.snap.guides || !this.snap.objects) this.guides = null;
     this.notify();
   }
-  snapPoint(p) {
-    const g = this.snap.grid;
-    if (!g || g <= 0) return p;
-    return { x: Math.round(p.x / g) * g, y: Math.round(p.y / g) * g };
+  /** Turns object snapping on or off (the toolbar's snapping toggle). */
+  toggleSnapping(on = !this.snap.objects) {
+    this.setSnap({ objects: on });
   }
-  snapDelta(dx, dy, origin) {
+  gridValue(v) {
     const g = this.snap.grid;
-    if (!g || g <= 0 || !origin) return { dx, dy };
-    const target = this.snapPoint({ x: origin.x + dx, y: origin.y + dy });
-    return { dx: target.x - origin.x, dy: target.y - origin.y };
+    return g > 0 ? Math.round(v / g) * g : v;
+  }
+  snapPoint(p) {
+    return { x: this.gridValue(p.x), y: this.gridValue(p.y) };
+  }
+  /** The pull distance in document units. */
+  snapTolerance() {
+    return this.snap.threshold / this.viewport.zoom;
+  }
+  setGuides(guides) {
+    this.guides = guides && this.snap.guides && (guides.lines.length || guides.labels.length) ? guides : null;
+  }
+  /**
+   * Where a drawn or dragged point `p` goes: onto the smart guide `targets` (gathered by
+   * `gather` when missing), else onto the grid, kept to `leave`'s constraint. Cmd / Ctrl
+   * bypasses snapping.
+   */
+  snapDrawn(p, leave, input, targets) {
+    this.snappedToObject = false;
+    if (input.mod) {
+      this.setGuides(null);
+      return constrainToLeave(leave, p);
+    }
+    if (this.snap.objects) {
+      const withAngles = leave ? { ...leave, angles: this.snap.angles } : null;
+      const res = targets().snapFrom(p, withAngles, this.snapTolerance());
+      if (res.kind) {
+        this.snappedToObject = true;
+        this.setGuides(res);
+        return leave?.constrain ? res.point : { x: res.x ? res.point.x : this.gridValue(res.point.x), y: res.y ? res.point.y : this.gridValue(res.point.y) };
+      }
+    }
+    this.setGuides(null);
+    return constrainToLeave(leave, this.snapPoint(p));
+  }
+  /** Drawing targets for the pen and shape tools, reused while the document stays the same. */
+  drawingTargets(exclude) {
+    const key = exclude ?? "";
+    const cached = this.hoverTargets;
+    if (cached && cached.doc === this.doc && cached.exclude === key) return cached.targets;
+    const targets = VectorSnapTargets.forDrawing(this.doc, exclude ? [exclude] : []);
+    this.hoverTargets = { doc: this.doc, exclude: key, targets };
+    return targets;
+  }
+  /** Where the pointer at `p` would place a point with the pen or a shape tool (and the guides showing why). */
+  hoverSnap(p, input) {
+    if (this.tool === "pen") {
+      const sp = this.pen ? this.getNode(this.pen.nodeId)?.subpaths[this.pen.subpath] : void 0;
+      if (this.pen && sp && this.hover?.anchor) {
+        this.setGuides(null);
+        return p;
+      }
+      const last = this.pen && sp ? getAnchorWorld(this.doc, { nodeId: this.pen.nodeId, subpath: this.pen.subpath, index: sp.anchors.length - 1 }) : void 0;
+      const leave = last ? { at: { x: last.x, y: last.y }, constrain: input.shift ? "angle" : null } : null;
+      return this.snapDrawn(p, leave, input, () => this.drawingTargets(this.pen?.nodeId ?? null));
+    }
+    if (this.tool !== "select" && this.tool !== "direct" && this.tool !== "pencil") return this.snapDrawn(p, null, input, () => this.drawingTargets(null));
+    this.setGuides(null);
+    return p;
   }
   // -------------------------------------------------------------------------
   // Document
@@ -1454,6 +2394,11 @@ var VectorEditorController = class {
   // -------------------------------------------------------------------------
   // Transforms
   // -------------------------------------------------------------------------
+  /** `m`, given in a frame rotated by `angle`, as a document-space matrix. */
+  inFrame(angle, m) {
+    if (!angle) return m;
+    return multiplyMatrices(multiplyMatrices(rotateMatrix(-angle), m), rotateMatrix(angle));
+  }
   /** Applies a matrix to the selected (or given) nodes as one undo step. */
   transform(matrix, options = {}) {
     const ids = new Set(options.ids ?? this.selectedRoots());
@@ -1463,8 +2408,25 @@ var VectorEditorController = class {
     });
     return { ok: true };
   }
+  /** `doc` with nodes `ids` moved by `m`, given in document space. */
   transformed(doc, ids, m) {
-    const nodes = mapTree(doc.nodes, (n) => ids.has(n.id) && !n.locked ? transformVectorNode(n, m) : n);
+    const visit = (list, parent) => {
+      let changed = false;
+      const out = list.map((n) => {
+        let next = n;
+        if (ids.has(n.id) && !n.locked) {
+          const local = isRoot(parent) ? m : multiplyMatrices(multiplyMatrices(parent, m), invertMatrix(parent));
+          next = transformVectorNode(n, local);
+        } else if (n.type === "group") {
+          const children = visit(n.children, multiplyMatrices(nodeMatrix(n), parent));
+          if (children !== n.children) next = { ...n, children };
+        }
+        if (next !== n) changed = true;
+        return next;
+      });
+      return changed ? out : list;
+    };
+    const nodes = visit(doc.nodes, IDENTITY_MATRIX);
     return nodes === doc.nodes ? doc : { ...doc, nodes };
   }
   translate(dx, dy, options = {}) {
@@ -1476,26 +2438,48 @@ var VectorEditorController = class {
     }
     return this.transform(translateMatrix(dx, dy), { ids: options.ids, label: "Move" });
   }
-  /** Scales around `origin` (default: the selection centre). */
+  /** 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 });
+  }
+  /**
+   * 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 b = this.boundsOf(options.ids ?? this.selectedRoots());
-    if (!b) return { ok: false, message: "Nothing is selected." };
-    const origin = options.origin ?? { x: b.x + b.width / 2, y: b.y + b.height / 2 };
-    return this.transform(scaleMatrix(sx, sy, origin), { ids: options.ids, label: "Scale" });
+    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" });
   }
   /** Rotates clockwise by `degrees` around `origin` (default: the selection centre). */
   rotate(degrees, options = {}) {
-    const b = this.boundsOf(options.ids ?? this.selectedRoots());
-    if (!b) return { ok: false, message: "Nothing is selected." };
-    const origin = options.origin ?? { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+    const frame = this.frameOf(options.ids ?? this.selectedRoots());
+    if (!frame) return { ok: false, message: "Nothing is selected." };
+    const origin = options.origin ?? this.frameCenter(frame);
     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. */
+  setRotation(degrees, options = {}) {
+    const ids = options.ids ?? this.selectedRoots();
+    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)));
+      }
+    });
+    return { ok: true };
+  }
+  /** Mirrors along the selection box's own axes. */
   flip(axis, options = {}) {
-    const b = this.boundsOf(options.ids ?? this.selectedRoots());
-    if (!b) return { ok: false, message: "Nothing is selected." };
-    const c = { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+    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 m = axis === "horizontal" ? scaleMatrix(-1, 1, c) : scaleMatrix(1, -1, c);
-    return this.transform(m, { ids: options.ids, label: axis === "horizontal" ? "Flip Horizontal" : "Flip Vertical" });
+    return this.transform(this.inFrame(frame.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
@@ -1620,7 +2604,10 @@ var VectorEditorController = class {
           if (set.has(n.id) && n.type === "group") {
             changed = true;
             const opacity = n.opacity;
-            out.push(...n.children.map((c) => opacity !== void 0 && opacity < 1 ? { ...c, opacity: (c.opacity ?? 1) * opacity } : c));
+            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)
+            );
           } else if (n.type === "group") {
             const children = flatten(n.children);
             if (children !== n.children) changed = true;
@@ -1668,15 +2655,22 @@ var VectorEditorController = class {
     if (paths.length < 2) return null;
     const result = pathBoolean(
       BOOLEAN_OPS[op],
-      paths.map((p) => ({ path: subpathsToBezier(p.subpaths.filter((s) => s.anchors.length > 1).map((s) => ({ ...s, closed: true }))), fillRule: p.fillRule ?? "nonzero" }))
+      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"
+      }))
     );
-    const subpaths = bezierToSubpaths(result.path);
-    if (result.error || !subpaths.length) return null;
     const base = paths[0];
+    const anchorRoot = roots.find((r) => findVectorNode([this.getNode(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 node = { ...cloneVectorNode(base), id, name: BOOLEAN_LABELS[op], subpaths };
+    const { transform: _t, ...baseRest } = cloneVectorNode(base);
+    const node = { ...baseRest, id, name: BOOLEAN_LABELS[op], subpaths };
     const drop = /* @__PURE__ */ new Set([...paths.map((p) => p.id), ...roots]);
-    const anchorRoot = roots.find((r) => findVectorNode([this.getNode(r)], base.id)) ?? base.id;
     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];
@@ -1694,9 +2688,11 @@ var VectorEditorController = class {
     });
     if (paths.length < 2) return null;
     const id = this.newId();
-    const node = { ...cloneVectorNode(paths[0]), id, name: "Compound Path", subpaths: paths.flatMap((p) => cloneVectorNode(p).subpaths) };
-    const drop = /* @__PURE__ */ new Set([...paths.map((p) => p.id), ...roots]);
     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 node = { ...baseRest, id, name: "Compound Path", subpaths };
+    const drop = /* @__PURE__ */ new Set([...paths.map((p) => p.id), ...roots]);
     this.change("Combine", () => {
       this.setDoc(mapTree(this.doc.nodes, (n) => n.id === first ? node : drop.has(n.id) ? null : n));
       this.selection = [id];
@@ -1704,6 +2700,11 @@ var VectorEditorController = class {
     });
     return id;
   }
+  /** A document-space path mapped into the parent space of node `id`. */
+  intoParentSpace(id, path) {
+    const parent = vectorParentMatrix(this.doc.nodes, id) ?? IDENTITY_MATRIX;
+    return isRoot(parent) ? path : transformBezierPath(path, invertMatrix(parent));
+  }
   /** Splits selected compound paths into one path per subpath. */
   breakApart(options = {}) {
     const paths = (options.ids ?? this.selection).map((id) => this.getNode(id)).filter((n) => n?.type === "path" && n.subpaths.length > 1);
@@ -1743,23 +2744,30 @@ var VectorEditorController = class {
     });
     return nodes === doc.nodes ? doc : { ...doc, nodes };
   }
+  /** Moves anchors by a document-space offset (converted into each node's own space). */
   movedAnchors(doc, refs, dx, dy) {
-    return this.updateAnchors(doc, refs, (a) => translateAnchor(a, dx, dy));
+    const local = /* @__PURE__ */ new Map();
+    for (const r of refs) if (!local.has(r.nodeId)) local.set(r.nodeId, applyMatrixLinear(invertMatrix(this.worldOf(r.nodeId, doc)), { x: dx, y: dy }));
+    return this.updateAnchors(doc, refs, (a, ref) => {
+      const d = local.get(ref.nodeId);
+      return translateAnchor(a, d.x, d.y);
+    });
   }
-  /** Moves one anchor to a position (handles follow). */
+  /** Moves one anchor to a document position (handles follow). */
   moveAnchor(ref, to) {
-    const a = getAnchor(this.doc, ref);
+    const a = getAnchorWorld(this.doc, ref);
     if (!a) return { ok: false, message: "There is no such anchor." };
     this.change("Move Point", () => {
       this.doc = this.movedAnchors(this.doc, [ref], to.x - a.x, to.y - a.y);
     });
     return { ok: true };
   }
-  /** Moves one handle (see `moveAnchorHandle` for how the opposite handle follows). */
+  /** Moves one handle to a document position (see `moveAnchorHandle` for how the opposite handle follows). */
   moveHandle(ref, to, options = {}) {
     if (!getAnchor(this.doc, ref)) return { ok: false, message: "There is no such anchor." };
+    const local = this.toLocal(ref.nodeId, to);
     this.change("Move Handle", () => {
-      this.doc = this.updateAnchors(this.doc, [ref], (a) => moveAnchorHandle(a, ref.handle, to, options.breakHandles));
+      this.doc = this.updateAnchors(this.doc, [ref], (a) => moveAnchorHandle(a, ref.handle, local, options.breakHandles));
     });
     return { ok: true };
   }
@@ -1778,11 +2786,11 @@ var VectorEditorController = class {
     });
     return { ok: true };
   }
-  /** Adds an anchor on the nearest segment of `nodeId` to `point` (shape unchanged). */
+  /** Adds an anchor on the nearest segment of `nodeId` to document point `point` (shape unchanged). */
   insertAnchorAt(nodeId, point) {
     const node = this.getNode(nodeId);
     if (node?.type !== "path") return null;
-    const hit = nearestSegment(node, point);
+    const hit = nearestSegment(node, this.toLocal(nodeId, point));
     if (!hit) return null;
     const { subpath, index } = insertAnchor(node.subpaths[hit.subpath], hit.segment, hit.t);
     const ref = { nodeId, subpath: hit.subpath, index };
@@ -1939,19 +2947,17 @@ var VectorEditorController = class {
   }
   hitTransformHandle(screen) {
     if (this.tool !== "select" || !this.selection.length) return null;
-    const b = this.boundsOf(this.selectedRoots());
-    if (!b) return null;
-    const tl = this.documentToScreen(b);
-    const box = { x: tl.x, y: tl.y, width: b.width * this.viewport.zoom, height: b.height * this.viewport.zoom };
+    const frame = this.frameOf(this.selectedRoots());
+    if (!frame) return null;
+    const { box, handles } = getVectorSelectionBoxGeometry(frame, this.viewport);
     const r = this.hitRadius + 2;
-    const handles = getTransformHandlePositions(box);
     const usable = box.width < 2 * r || box.height < 2 * r ? handles.filter((h) => h.handle.length === 2 || h.handle === "rotate") : handles;
-    for (const h of usable) if (Math.abs(h.x - screen.x) <= r && Math.abs(h.y - screen.y) <= r) return h.handle;
+    for (const h of usable) if (Math.hypot(h.screen.x - screen.x, h.screen.y - screen.y) <= r * Math.SQRT2) return h.handle;
     return null;
   }
   hitHandle(screen) {
     for (const ref of getVisibleHandles(this.view()).reverse()) {
-      const a = getAnchor(this.doc, ref);
+      const a = getAnchorWorld(this.doc, ref);
       const h = a?.[ref.handle];
       if (!h) continue;
       const s = this.documentToScreen(h);
@@ -1963,7 +2969,7 @@ var VectorEditorController = class {
     let best = null;
     let bestD = Infinity;
     for (const ref of refs) {
-      const a = getAnchor(this.doc, ref);
+      const a = getAnchorWorld(this.doc, ref);
       if (!a) continue;
       const s = this.documentToScreen(a);
       const d = Math.hypot(s.x - screen.x, s.y - screen.y);
@@ -1977,18 +2983,18 @@ var VectorEditorController = class {
   /** Deepest unlocked visible path under `p`. */
   hitPath(p) {
     const tol = this.tolerance();
-    const search = (list) => {
+    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") {
-          const found = search(n.children);
+          const found = search(n.children, multiplyMatrices(nodeMatrix(n), parent));
           if (found) return found;
-        } else if (hitTestVectorNode(n, p, tol)) return n;
+        } else if (hitTestVectorNode(n, p, tol, parent)) return n;
       }
       return null;
     };
-    return search(this.doc.nodes);
+    return search(this.doc.nodes, IDENTITY_MATRIX);
   }
   /** Endpoints of open subpaths of unlocked visible paths (pen tool resumes from them). */
   openEndpoints() {
@@ -2019,8 +3025,11 @@ var VectorEditorController = class {
         if (anchor) return { nodeId: anchor.nodeId, anchor };
         for (const id of getEditablePathIds(this.view())) {
           const node = this.getNode(id);
-          const seg = nearestSegment(node, p);
-          if (seg && seg.distance <= this.tolerance()) return { nodeId: id, segment: { nodeId: id, subpath: seg.subpath, segment: seg.segment, t: seg.t, point: seg.point } };
+          const seg = nearestSegment(node, this.toLocal(id, p));
+          if (seg && seg.distance <= this.tolerance()) {
+            const point = applyMatrix(this.worldOf(id), seg.point);
+            return { nodeId: id, segment: { nodeId: id, subpath: seg.subpath, segment: seg.segment, t: seg.t, point } };
+          }
         }
         const path = this.hitPath(p);
         return path ? { nodeId: path.id } : null;
@@ -2059,15 +3068,16 @@ var VectorEditorController = class {
       case "pencil":
         return this.downPencil(p);
       default:
-        return this.downShape(p);
+        return this.downShape(p, input);
     }
   }
   downSelect(screen, p, input) {
     const handle = this.hitTransformHandle(screen);
     if (handle) {
-      const bounds = this.boundsOf(this.selectedRoots());
+      const frame = this.frameOf(this.selectedRoots());
       const before = this.snapshot();
-      this.drag = handle === "rotate" ? { kind: "rotate", start: p, center: { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 }, before, base: this.doc } : { kind: "scale", handle, start: p, bounds, before, base: this.doc };
+      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 };
       this.interaction = handle === "rotate" ? { type: "rotate", angle: 0 } : { type: "scale", handle, sx: 1, sy: 1 };
       this.notify();
       return;
@@ -2127,13 +3137,13 @@ var VectorEditorController = class {
           return;
         }
       } else if (!selected) this.anchors = [anchor];
-      this.drag = { kind: "anchors", start: p, before: this.snapshot(), base: this.doc, moved: false, clickRef: selected && !input.shift ? anchor : null };
+      this.drag = { kind: "anchors", start: p, before: this.snapshot(), base: this.doc, moved: false, clickRef: selected && !input.shift ? anchor : null, lead: anchor };
       this.notify();
       return;
     }
     for (const id of getEditablePathIds(this.view())) {
       const node = this.getNode(id);
-      const seg = nearestSegment(node, p);
+      const seg = nearestSegment(node, this.toLocal(id, p));
       if (!seg || seg.distance > this.tolerance()) continue;
       const sp = node.subpaths[seg.subpath];
       if (input.alt) {
@@ -2143,7 +3153,7 @@ var VectorEditorController = class {
         const ref = { nodeId: id, subpath: seg.subpath, index };
         this.anchors = [ref];
         this.editingId = id;
-        this.drag = { kind: "anchors", start: p, before, base: this.doc, moved: true, clickRef: null };
+        this.drag = { kind: "anchors", start: p, before, base: this.doc, moved: true, clickRef: null, lead: ref };
         this.notify(true);
         return;
       }
@@ -2151,7 +3161,7 @@ var VectorEditorController = class {
       const b = { nodeId: id, subpath: seg.subpath, index: (seg.segment + 1) % sp.anchors.length };
       this.anchors = input.shift ? [...this.anchors.filter((r) => !sameRef(r, a) && !sameRef(r, b)), a, b] : [a, b];
       this.editingId = id;
-      this.drag = { kind: "anchors", start: p, before: this.snapshot(), base: this.doc, moved: false, clickRef: null };
+      this.drag = { kind: "anchors", start: p, before: this.snapshot(), base: this.doc, moved: false, clickRef: null, lead: null };
       this.notify();
       return;
     }
@@ -2161,7 +3171,7 @@ var VectorEditorController = class {
       if (!input.shift) this.selection = [path.id];
       else if (!this.selection.includes(path.id)) this.selection = [...this.selection, path.id];
       this.anchors = path.subpaths.flatMap((sp, s) => sp.anchors.map((_, i) => ({ nodeId: path.id, subpath: s, index: i })));
-      this.drag = { kind: "anchors", start: p, before: this.snapshot(), base: this.doc, moved: false, clickRef: null };
+      this.drag = { kind: "anchors", start: p, before: this.snapshot(), base: this.doc, moved: false, clickRef: null, lead: null };
       this.notify();
       return;
     }
@@ -2186,9 +3196,10 @@ var VectorEditorController = class {
         this.notify(true);
         return;
       }
-      let pt2 = this.snapPoint(p);
-      const last = sp.anchors[sp.anchors.length - 1];
-      if (input.shift) pt2 = constrain45(last, pt2);
+      const last = getAnchorWorld(this.doc, { nodeId: pen.nodeId, subpath: pen.subpath, index: sp.anchors.length - 1 });
+      const leave = { at: { x: last.x, y: last.y }, constrain: input.shift ? "angle" : null };
+      let pt2 = this.snapDrawn(p, leave, input, () => this.drawingTargets(pen.nodeId));
+      pt2 = this.toLocal(pen.nodeId, pt2);
       const node2 = this.getNode(pen.nodeId);
       const anchors = [...sp.anchors, { x: pt2.x, y: pt2.y }];
       this.replaceNode(pen.nodeId, { ...node2, subpaths: node2.subpaths.map((s, i) => i === pen.subpath ? { ...s, anchors } : s) });
@@ -2218,7 +3229,7 @@ var VectorEditorController = class {
       this.notify(this.doc !== before.doc);
       return;
     }
-    const pt = this.snapPoint(p);
+    const pt = this.snapDrawn(p, null, input, () => this.drawingTargets(null));
     const node = { id: this.newId(), type: "path", name: "Path", ...this.styleFor(true), subpaths: [{ anchors: [{ x: pt.x, y: pt.y }], closed: false }] };
     this.setDoc([...this.doc.nodes, node]);
     this.pen = { nodeId: node.id, subpath: 0 };
@@ -2246,13 +3257,14 @@ var VectorEditorController = class {
     this.interaction = { type: "draw", tool: "pencil", nodeId: node.id, bounds: { x: p.x, y: p.y, width: 0, height: 0 } };
     this.notify(true);
   }
-  downShape(p) {
+  downShape(p, input) {
     const before = this.snapshot();
-    const start = this.snapPoint(p);
+    const targets = this.drawingTargets(null);
+    const start = this.snapDrawn(p, null, input, () => targets);
     const kind = this.tool;
     const node = this.createShapeNode({ kind, x: start.x, y: start.y, width: 0, height: 0 });
     this.setDoc([...this.doc.nodes, node]);
-    this.drag = { kind: "shape", tool: this.tool, start, nodeId: node.id, before };
+    this.drag = { kind: "shape", tool: this.tool, start, nodeId: node.id, before, targets };
     this.interaction = { type: "draw", tool: this.tool, nodeId: node.id, bounds: { x: start.x, y: start.y, width: 0, height: 0 } };
     this.notify(true);
   }
@@ -2263,9 +3275,11 @@ var VectorEditorController = class {
     if (!drag) {
       const hover = this.computeHover(screen);
       const pointerMatters = this.tool === "pen" && !!this.pen;
-      if (this.sameHover(hover, this.hover) && !pointerMatters) return;
+      const guides = this.guides;
       this.hover = hover;
-      this.pointer = p;
+      const pointer = this.hoverSnap(p, input);
+      if (this.sameHover(hover, this.state.hover) && !pointerMatters && JSON.stringify(guides) === JSON.stringify(this.guides)) return;
+      this.pointer = pointer;
       this.notify();
       return;
     }
@@ -2286,17 +3300,26 @@ var VectorEditorController = class {
           const created = [];
           drag.base = this.withDuplicates(drag.base, this.selectedRoots(), { x: 0, y: 0 }, created);
           this.selection = created;
+          drag.targets = void 0;
         }
-        ({ dx, dy } = this.snapDelta(dx, dy, drag.origin));
+        ({ dx, dy } = this.snapMove(drag, dx, dy, input));
         this.doc = this.transformed(drag.base, new Set(this.selectedRoots()), translateMatrix(dx, dy));
         this.interaction = { type: "move", dx, dy };
         this.notify(true);
         return;
       }
       case "scale": {
-        const { sx, sy, origin } = scaleFor(drag.handle, drag.bounds, p, input);
+        const angle = drag.frame.angle;
+        const q = angle ? applyMatrix(rotateMatrix(-angle), p) : p;
+        let { sx, sy, origin } = scaleFor(drag.handle, drag.frame, q, input);
+        if (this.snap.objects && !input.mod && drag.handle !== "rotate") {
+          drag.targets ??= VectorSnapTargets.forResize(drag.base, this.selectedRoots());
+          const res = drag.targets.snapScale(drag.frame, drag.handle, sx, sy, input, this.snapTolerance());
+          ({ sx, sy } = res);
+          this.setGuides(res);
+        } else this.setGuides(null);
         const ids = new Set(this.selectedRoots());
-        this.doc = this.transformed(drag.base, ids, scaleMatrix(sx, sy, origin));
+        this.doc = this.transformed(drag.base, ids, this.inFrame(angle, scaleMatrix(sx, sy, origin)));
         this.interaction = { type: "scale", handle: drag.handle, sx, sy };
         this.notify(true);
         return;
@@ -2316,7 +3339,7 @@ var VectorEditorController = class {
         this.interaction = { type: "marquee", bounds };
         if (drag.anchorsMode) {
           const inside = getVisibleAnchors(this.view()).filter((r) => {
-            const a = getAnchor(this.doc, r);
+            const a = getAnchorWorld(this.doc, r);
             return a.x >= bounds.x && a.x <= bounds.x + bounds.width && a.y >= bounds.y && a.y <= bounds.y + bounds.height;
           });
           this.anchors = [...drag.baseAnchors, ...inside.filter((r) => !drag.baseAnchors.some((b) => sameRef(b, r)))];
@@ -2335,35 +3358,41 @@ var VectorEditorController = class {
         let dy = p.y - drag.start.y;
         if (!drag.moved && Math.hypot(dx, dy) * this.viewport.zoom < 2) return;
         drag.moved = true;
-        if (input.shift) Math.abs(dx) > Math.abs(dy) ? dy = 0 : dx = 0;
-        const lead = this.anchors.length ? getAnchor(drag.base, this.anchors[0]) : void 0;
-        ({ dx, dy } = this.snapDelta(dx, dy, lead ?? null));
+        const lead = this.leadAnchor(drag);
+        if (lead) {
+          const leave = input.shift ? { at: lead, constrain: "axis", curves: false } : null;
+          const q = this.snapDrawn({ x: lead.x + dx, y: lead.y + dy }, leave, input, () => drag.targets ??= VectorSnapTargets.forAnchorDrag(drag.base, this.anchors));
+          dx = q.x - lead.x;
+          dy = q.y - lead.y;
+        } else if (input.shift) Math.abs(dx) > Math.abs(dy) ? dy = 0 : dx = 0;
         this.doc = this.movedAnchors(drag.base, this.anchors, dx, dy);
         this.interaction = { type: "anchors", dx, dy };
         this.notify(true);
         return;
       }
       case "handle": {
-        const anchor = getAnchor(drag.base, drag.ref);
-        let pt = this.snapPoint(p);
-        if (input.shift && anchor) pt = constrain45(anchor, pt);
-        this.doc = this.updateAnchors(drag.base, [drag.ref], (a) => moveAnchorHandle(a, drag.ref.handle, pt, input.alt));
+        const anchor = getAnchorWorld(drag.base, drag.ref);
+        const leave = anchor ? { at: { x: anchor.x, y: anchor.y }, constrain: input.shift ? "angle" : null } : null;
+        const pt = this.snapDrawn(p, leave, input, () => drag.targets ??= VectorSnapTargets.forHandle(drag.base, drag.ref.nodeId));
+        const local = this.toLocal(drag.ref.nodeId, pt, drag.base);
+        this.doc = this.updateAnchors(drag.base, [drag.ref], (a) => moveAnchorHandle(a, drag.ref.handle, local, input.alt));
         this.interaction = { type: "handle", ref: drag.ref };
         this.notify(true);
         return;
       }
       case "pull": {
-        const anchor = getAnchor(drag.base, drag.ref);
+        const anchor = getAnchorWorld(drag.base, drag.ref);
         if (!anchor) return;
         if (Math.hypot(p.x - anchor.x, p.y - anchor.y) * this.viewport.zoom < 2) {
           this.doc = drag.base;
           this.notify(true);
           return;
         }
+        this.guides = null;
         let pt = p;
         if (input.shift) pt = constrain45(anchor, pt);
         const side = drag.closing ? "in" : "out";
-        const pos = drag.closing ? { x: 2 * anchor.x - pt.x, y: 2 * anchor.y - pt.y } : pt;
+        const pos = this.toLocal(drag.ref.nodeId, drag.closing ? { x: 2 * anchor.x - pt.x, y: 2 * anchor.y - pt.y } : pt, drag.base);
         this.doc = this.updateAnchors(drag.base, [drag.ref], (a) => {
           if (drag.outOnly || drag.altBreaks && input.alt) return moveAnchorHandle(a, side, pos, true);
           return moveAnchorHandle({ ...a, type: "symmetric" }, side, pos);
@@ -2374,7 +3403,9 @@ var VectorEditorController = class {
       case "shape": {
         const node = this.getNode(drag.nodeId);
         if (node?.type !== "path") return;
-        let end = this.snapPoint(p);
+        const leave = { at: drag.start, constrain: input.shift ? drag.tool === "line" ? "angle" : "square" : null, curves: false };
+        let end = this.snapDrawn(p, leave, input, () => drag.targets ??= this.drawingTargets(null));
+        if (!this.snappedToObject && drag.tool !== "line" && !input.shift && !input.mod && this.snap.objects && drag.targets) end = this.matchShapeSize(drag.targets, drag.start, end, input.alt);
         let start = drag.start;
         let bounds;
         if (drag.tool === "line") {
@@ -2420,12 +3451,64 @@ var VectorEditorController = class {
       }
     }
   }
+  /** Snaps a move of the selection by (dx, dy): its bounds line up with targets or space evenly, else go to the grid. */
+  snapMove(drag, dx, dy, input) {
+    const origin = drag.origin;
+    if (input.mod || !origin) {
+      this.setGuides(null);
+      return { dx, dy };
+    }
+    const axes = { x: !input.shift || dx !== 0, y: !input.shift || dy !== 0 };
+    let res = null;
+    if (this.snap.objects) {
+      drag.targets ??= VectorSnapTargets.forMove(drag.base, this.selectedRoots());
+      res = drag.targets.snapRect({ ...origin, x: origin.x + dx, y: origin.y + dy }, this.snapTolerance(), { spacing: true, axes });
+    }
+    this.setGuides(res);
+    return {
+      dx: res?.x ? dx + res.dx : axes.x ? this.gridValue(origin.x + dx) - origin.x : dx,
+      dy: res?.y ? dy + res.dy : axes.y ? this.gridValue(origin.y + dy) - origin.y : dy
+    };
+  }
+  /** The anchor a point drag snaps by, where it started: the grabbed one, else the moving one nearest the press. */
+  leadAnchor(drag) {
+    const ref = drag.lead && this.anchors.some((a) => sameRef(a, drag.lead)) ? drag.lead : null;
+    if (ref) {
+      const a = getAnchorWorld(drag.base, ref);
+      return a ? { x: a.x, y: a.y } : null;
+    }
+    let best = null;
+    for (const r of this.anchors) {
+      const a = getAnchorWorld(drag.base, r);
+      if (a && (!best || Math.hypot(a.x - drag.start.x, a.y - drag.start.y) < Math.hypot(best.x - drag.start.x, best.y - drag.start.y))) best = { x: a.x, y: a.y };
+    }
+    return best;
+  }
+  /** A shape's dragged corner moved so its width or height matches another object's, when one is within reach. */
+  matchShapeSize(targets, start, end, fromCentre = false) {
+    const k = fromCentre ? 2 : 1;
+    const tol = this.snapTolerance() * k;
+    const out = { ...end };
+    const guides = { lines: [], labels: [] };
+    for (const axis of ["x", "y"]) {
+      const d = end[axis] - start[axis];
+      const len = Math.abs(d) > 1e-9 ? targets.matchSize(Math.abs(d) * k, tol) : null;
+      if (len === null || len <= 0) continue;
+      out[axis] = start[axis] + Math.sign(d) * len / k;
+      const from = { ...out, [axis]: fromCentre ? 2 * start[axis] - out[axis] : start[axis] };
+      guides.lines.push({ kind: "size", x1: from.x, y1: from.y, x2: out.x, y2: out.y });
+      guides.labels.push({ kind: "size", x: (from.x + out.x) / 2, y: (from.y + out.y) / 2, text: `${axis === "x" ? "W" : "H"} ${Math.round(len * 100) / 100}` });
+    }
+    this.setGuides(guides);
+    return out;
+  }
   /** Primary button released. */
   pointerUp(screen, input = {}) {
     if (screen && this.drag && this.drag.kind !== "pan") this.pointerMove(screen, input);
     const drag = this.drag;
     this.drag = null;
     this.interaction = null;
+    this.guides = null;
     if (!drag) return;
     switch (drag.kind) {
       case "pan":
@@ -2494,9 +3577,10 @@ var VectorEditorController = class {
   /** The pointer left the canvas. */
   pointerLeave() {
     if (this.drag) return;
-    if (!this.hover && !this.pointer) return;
+    if (!this.hover && !this.pointer && !this.guides) return;
     this.hover = null;
     this.pointer = null;
+    this.guides = null;
     this.notify();
   }
   /** Abandons the drag in progress (Escape, lost capture). */
@@ -2505,6 +3589,7 @@ var VectorEditorController = class {
     if (!drag) return;
     this.drag = null;
     this.interaction = null;
+    this.guides = null;
     if (drag.kind === "pan") {
       this.notify();
       return;
@@ -2540,7 +3625,7 @@ var VectorEditorController = class {
       const id = this.hover?.segment?.nodeId ?? this.editingId;
       if (id) {
         const node = this.getNode(id);
-        const seg = node ? nearestSegment(node, p) : null;
+        const seg = node ? nearestSegment(node, this.toLocal(id, p)) : null;
         if (seg && seg.distance <= this.tolerance()) this.insertAnchorAt(id, p);
       }
       return;
@@ -2692,11 +3777,12 @@ function scaleFor(handle, b, p, mods = {}) {
 
 // src/vector/render.ts
 var fmt = (n) => Math.round(n * 100) / 100;
+var fmtMatrix = (m) => `matrix(${m.map((n) => Math.round(n * 1e6) / 1e6).join(" ")})`;
 function renderNode(node, defs, idPrefix) {
   if (node.visible === false) return null;
   if (node.type === "group") {
     const children = node.children.map((c) => renderNode(c, defs, idPrefix)).filter((c) => !!c);
-    return { kind: "group", id: node.id, opacity: node.opacity ?? 1, children };
+    return { kind: "group", id: node.id, ...node.transform ? { transform: fmtMatrix(node.transform) } : {}, opacity: node.opacity ?? 1, children };
   }
   const fill = vectorPaintToSvg(node.fill, `${idPrefix}fill-${node.id}`);
   const stroke = vectorPaintToSvg(node.stroke, `${idPrefix}stroke-${node.id}`);
@@ -2705,6 +3791,7 @@ function renderNode(node, defs, idPrefix) {
   return {
     kind: "path",
     id: node.id,
+    ...node.transform ? { transform: fmtMatrix(node.transform) } : {},
     d: vectorPathData(node),
     fill: fill.value,
     stroke: stroke.value,
@@ -2733,8 +3820,14 @@ 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) {
   const v = state.viewport;
-  const paths = node.type === "path" ? [node] : collect(node);
-  return paths.map((p) => bezierPathToSvg(transformBezierPath(subpathsToBezier(p.subpaths), [v.zoom, 0, 0, v.zoom, v.x, v.y]), { precision: 2 })).join(" ");
+  const view = [v.zoom, 0, 0, v.zoom, v.x, v.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(" ");
+}
+function collectWithMatrix(node, parent) {
+  if (node.type === "path") return [{ path: node, parent }];
+  const m = multiplyMatrices(nodeMatrix(node), parent);
+  return node.children.flatMap((c) => collectWithMatrix(c, m));
 }
 function collect(node) {
   if (node.type === "path") return [node];
@@ -2756,29 +3849,27 @@ function getVectorOverlayRenderData(state) {
   if (state.editingId) outline(state.editingId, true);
   if (state.hover?.nodeId && !state.interaction) outline(state.hover.nodeId, false);
   let selectionBox = null;
-  if (state.tool === "select" && state.selectionBounds && state.interaction?.type !== "marquee") {
-    const b = state.selectionBounds;
-    const tl = toScreen(state, b);
-    const box = { x: tl.x, y: tl.y, width: b.width * z, height: b.height * z };
-    selectionBox = { ...box, handles: getTransformHandlePositions(box) };
+  if (state.tool === "select" && state.selectionFrame && state.interaction?.type !== "marquee") {
+    const g = getVectorSelectionBoxGeometry(state.selectionFrame, state.viewport);
+    selectionBox = { ...g.box, angle: g.angle, transform: g.transform, corners: g.corners, handles: g.handles };
   }
   const selected = (r) => state.selectedAnchors.some((a) => a.nodeId === r.nodeId && a.subpath === r.subpath && a.index === r.index);
   const sameAnchor = (a, b) => !!a && a.nodeId === b.nodeId && a.subpath === b.subpath && a.index === b.index;
   const anchors = getVisibleAnchors(state).map((ref) => {
-    const a = getAnchor(doc, ref);
+    const a = getAnchorWorld(doc, ref);
     const s = toScreen(state, a);
     const closes = !!state.pen && state.pen.nodeId === ref.nodeId && state.pen.subpath === ref.subpath && ref.index === 0;
     return { ref, x: s.x, y: s.y, type: a.type ?? inferAnchorType(a), selected: selected(ref), hovered: sameAnchor(state.hover?.anchor, ref), closes };
   });
   if (state.tool === "pen" && !state.pen && state.hover?.anchor) {
-    const a = getAnchor(doc, state.hover.anchor);
+    const a = getAnchorWorld(doc, state.hover.anchor);
     if (a) {
       const s = toScreen(state, a);
       anchors.push({ ref: state.hover.anchor, x: s.x, y: s.y, type: a.type ?? "corner", selected: false, hovered: true, closes: false });
     }
   }
   const handles = getVisibleHandles(state).flatMap((ref) => {
-    const a = getAnchor(doc, ref);
+    const a = getAnchorWorld(doc, ref);
     const h = a?.[ref.handle];
     if (!a || !h) return [];
     const s = toScreen(state, h);
@@ -2796,7 +3887,7 @@ function getVectorOverlayRenderData(state) {
   if (state.tool === "pen" && state.pen && state.pointer && !state.interaction) {
     const node = findVectorNode(doc.nodes, state.pen.nodeId);
     const sp = node?.type === "path" ? node.subpaths[state.pen.subpath] : void 0;
-    const last = sp?.anchors[sp.anchors.length - 1];
+    const last = sp ? getAnchorWorld(doc, { nodeId: state.pen.nodeId, subpath: state.pen.subpath, index: sp.anchors.length - 1 }) : void 0;
     if (last) {
       const a = toScreen(state, last);
       const p = toScreen(state, state.pointer);
@@ -2811,13 +3902,27 @@ function getVectorOverlayRenderData(state) {
   if (it?.type === "rotate") status = `${Math.round(it.angle)}\xB0`;
   else if (it?.type === "move" || it?.type === "anchors") status = `\u0394 ${fmt(it.dx)}, ${fmt(it.dy)}`;
   else if (it?.type === "scale" || it?.type === "draw") {
-    const b = it.type === "draw" ? findVectorNode(doc.nodes, it.nodeId) ? vectorNodeBounds(findVectorNode(doc.nodes, it.nodeId)) : null : state.selectionBounds;
+    const b = it.type === "draw" ? findVectorNode(doc.nodes, it.nodeId) ? vectorNodeBounds(findVectorNode(doc.nodes, it.nodeId)) : null : state.selectionFrame;
     if (b) status = `W ${fmt(b.width)} \xD7 H ${fmt(b.height)}`;
   }
-  return { outlines, selectionBox, anchors, handles, marquee, penPreview, artboard, status };
+  const guides = { lines: [], labels: [] };
+  if (state.guides) {
+    for (const l of state.guides.lines) {
+      const a = toScreen(state, { x: l.x1, y: l.y1 });
+      const b = toScreen(state, { x: l.x2, y: l.y2 });
+      guides.lines.push({ kind: l.kind, x1: fmt(a.x), y1: fmt(a.y), x2: fmt(b.x), y2: fmt(b.y) });
+    }
+    for (const l of state.guides.labels) {
+      const p = toScreen(state, l);
+      guides.labels.push({ kind: l.kind, x: fmt(p.x), y: fmt(p.y), text: l.text });
+    }
+  }
+  return { outlines, selectionBox, anchors, handles, marquee, penPreview, artboard, guides, status };
 }
 var VECTOR_OVERLAY_THEME = {
   accent: "#0ea5e9",
+  /** Smart guide lines and labels. */
+  guide: "#ff3dfc",
   handleFill: "#ffffff",
   marqueeFill: "rgba(14, 165, 233, 0.08)",
   transformHandleSize: 8,
@@ -2908,12 +4013,14 @@ function createVectorCommands(controller, options = {}) {
     const out = [];
     const visit = (nodes, depth) => {
       for (const n of nodes) {
-        const b = vectorNodeBounds(n);
+        const parent = vectorParentMatrix(state.document.nodes, n.id) ?? IDENTITY_MATRIX;
+        const b = vectorNodeBounds(n, parent);
         out.push({
           id: n.id,
           type: n.type,
           ...n.name ? { name: n.name } : {},
           depth,
+          rotation: Math.round(vectorNodeRotation(n, parent) * 100) / 100,
           bounds: b && { x: Math.round(b.x * 100) / 100, y: Math.round(b.y * 100) / 100, width: Math.round(b.width * 100) / 100, height: Math.round(b.height * 100) / 100 },
           visible: n.visible !== false,
           locked: !!n.locked,
@@ -3015,10 +4122,18 @@ function createVectorCommands(controller, options = {}) {
       id: `${prefix}transform`,
       label: "Transform\u2026",
       keywords: ["move", "translate", "scale", "resize", "rotate", "flip"],
-      description: "Moves (dx, dy), scales (sx, sy) and/or rotates (degrees clockwise) nodes around their combined centre, in that order.",
+      description: "Moves (dx, dy), scales (sx, sy, along the selection box axes) and/or rotates (`rotate`: by degrees clockwise around the combined centre; `angle`: to an absolute rotation, each node around its own centre), in that order.",
       params: {
         type: "object",
-        properties: { ids: IDS, dx: { type: "number" }, dy: { type: "number" }, sx: { type: "number" }, sy: { type: "number" }, rotate: { type: "number" } }
+        properties: {
+          ids: IDS,
+          dx: { type: "number" },
+          dy: { type: "number" },
+          sx: { type: "number" },
+          sy: { type: "number" },
+          rotate: { type: "number" },
+          angle: { type: "number" }
+        }
       },
       enabled: enabledFor,
       undoable: true,
@@ -3027,6 +4142,7 @@ function createVectorCommands(controller, options = {}) {
         if (params.dx || params.dy) check(controller.translate(params.dx ?? 0, params.dy ?? 0, { ids: target }));
         if (params.sx !== void 0 || params.sy !== void 0) check(controller.scale(params.sx ?? 1, params.sy ?? params.sx ?? 1, { ids: target }));
         if (params.rotate) check(controller.rotate(params.rotate, { ids: target }));
+        if (params.angle !== void 0) check(controller.setRotation(params.angle, { ids: target }));
         return { ok: true };
       }
     },
@@ -3168,9 +4284,11 @@ function createVectorCommands(controller, options = {}) {
   ];
 }
 export {
+  DEFAULT_VECTOR_SNAP,
   IDENTITY_MATRIX,
   KAPPA,
   VECTOR_CLIPBOARD_TYPE,
+  VECTOR_CONSTRUCTION_ANGLES,
   VECTOR_OVERLAY_THEME,
   VECTOR_ROTATE_HANDLE_OFFSET,
   VECTOR_TOOLS,
@@ -3178,7 +4296,9 @@ export {
   VECTOR_TOOL_SHORTCUTS,
   VECTOR_TRANSFORM_HANDLES,
   VectorEditorController,
+  VectorSnapTargets,
   applyMatrix,
+  applyMatrixLinear,
   bezierToSubpaths,
   boundsFromPoints,
   boundsIntersect,
@@ -3187,15 +4307,20 @@ export {
   cloneVectorDocument,
   cloneVectorNode,
   collectPathNodes,
+  constrainToLeave,
   convertAnchor,
   createVectorCommands,
+  decomposeRigid,
   ellipseSubpath,
   findVectorNode,
   getAnchor,
+  getAnchorWorld,
   getEditablePathIds,
   getTransformHandlePositions,
   getVectorOverlayRenderData,
   getVectorSceneRenderData,
+  getVectorSelectionBoxGeometry,
+  getVectorSelectionFrame,
   getVectorSelectionStyle,
   getVisibleAnchors,
   getVisibleHandles,
@@ -3204,12 +4329,16 @@ export {
   hitTestVectorNodes,
   inferAnchorType,
   insertAnchor,
+  invertMatrix,
+  isIdentityMatrix,
   isVectorTextTarget,
   lineSubpath,
   locateVectorNode,
+  matrixRotation,
   moveAnchorHandle,
   multiplyMatrices,
   nearestSegment,
+  nodeMatrix,
   parseSvgTransform,
   parseVectorSvg,
   polygonSubpath,
@@ -3233,11 +4362,16 @@ export {
   unionBounds,
   vectorDocumentToSvg,
   vectorNodeBounds,
+  vectorNodeRotation,
   vectorNodeToBezier,
   vectorPaintToHex,
   vectorPaintToSvg,
+  vectorParentMatrix,
   vectorPathData,
+  vectorPathWorldBezier,
+  vectorResizeCursor,
   vectorToolLabel,
+  vectorWorldMatrix,
   walkVectorNodes
 };
 //# sourceMappingURL=index.js.map