@pixerate/editor 0.32.0 → 0.33.0

package/dist/vector/index.js

@@ -189,9 +189,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 +227,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 +282,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 +331,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 +553,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;
@@ -855,6 +931,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 +963,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 +1043,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 {
@@ -1018,6 +1124,7 @@ 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,
@@ -1048,7 +1155,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 +1180,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";
@@ -1454,6 +1577,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 +1591,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 +1621,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 +1787,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 +1838,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 +1871,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 +1883,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 +1927,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 +1969,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 +2130,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 +2152,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 +2166,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 +2208,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;
@@ -2065,9 +2257,10 @@ var VectorEditorController = class {
   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;
@@ -2133,7 +2326,7 @@ var VectorEditorController = class {
     }
     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) {
@@ -2187,8 +2380,9 @@ var VectorEditorController = class {
         return;
       }
       let pt2 = this.snapPoint(p);
-      const last = sp.anchors[sp.anchors.length - 1];
+      const last = getAnchorWorld(this.doc, { nodeId: pen.nodeId, subpath: pen.subpath, index: sp.anchors.length - 1 });
       if (input.shift) pt2 = constrain45(last, pt2);
+      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) });
@@ -2294,9 +2488,11 @@ var VectorEditorController = class {
         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;
+        const { sx, sy, origin } = scaleFor(drag.handle, drag.frame, q, input);
         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 +2512,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)))];
@@ -2336,7 +2532,7 @@ var VectorEditorController = class {
         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;
+        const lead = this.anchors.length ? getAnchorWorld(drag.base, this.anchors[0]) : void 0;
         ({ dx, dy } = this.snapDelta(dx, dy, lead ?? null));
         this.doc = this.movedAnchors(drag.base, this.anchors, dx, dy);
         this.interaction = { type: "anchors", dx, dy };
@@ -2344,16 +2540,17 @@ var VectorEditorController = class {
         return;
       }
       case "handle": {
-        const anchor = getAnchor(drag.base, drag.ref);
+        const anchor = getAnchorWorld(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 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;
@@ -2363,7 +2560,7 @@ var VectorEditorController = class {
         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);
@@ -2540,7 +2737,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 +2889,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 +2903,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 +2932,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 +2961,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 +2999,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,7 +3014,7 @@ 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 };
@@ -2908,12 +3111,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 +3220,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 +3240,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 };
       }
     },
@@ -3179,6 +3393,7 @@ export {
   VECTOR_TRANSFORM_HANDLES,
   VectorEditorController,
   applyMatrix,
+  applyMatrixLinear,
   bezierToSubpaths,
   boundsFromPoints,
   boundsIntersect,
@@ -3189,13 +3404,17 @@ export {
   collectPathNodes,
   convertAnchor,
   createVectorCommands,
+  decomposeRigid,
   ellipseSubpath,
   findVectorNode,
   getAnchor,
+  getAnchorWorld,
   getEditablePathIds,
   getTransformHandlePositions,
   getVectorOverlayRenderData,
   getVectorSceneRenderData,
+  getVectorSelectionBoxGeometry,
+  getVectorSelectionFrame,
   getVectorSelectionStyle,
   getVisibleAnchors,
   getVisibleHandles,
@@ -3204,12 +3423,16 @@ export {
   hitTestVectorNodes,
   inferAnchorType,
   insertAnchor,
+  invertMatrix,
+  isIdentityMatrix,
   isVectorTextTarget,
   lineSubpath,
   locateVectorNode,
+  matrixRotation,
   moveAnchorHandle,
   multiplyMatrices,
   nearestSegment,
+  nodeMatrix,
   parseSvgTransform,
   parseVectorSvg,
   polygonSubpath,
@@ -3233,11 +3456,16 @@ export {
   unionBounds,
   vectorDocumentToSvg,
   vectorNodeBounds,
+  vectorNodeRotation,
   vectorNodeToBezier,
   vectorPaintToHex,
   vectorPaintToSvg,
+  vectorParentMatrix,
   vectorPathData,
+  vectorPathWorldBezier,
+  vectorResizeCursor,
   vectorToolLabel,
+  vectorWorldMatrix,
   walkVectorNodes
 };
 //# sourceMappingURL=index.js.map