@pixerate/editor 0.30.0 → 0.32.0

package/dist/vector/index.cjs

@@ -0,0 +1,3243 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class;
+
+var _chunkQKLRAA4Tcjs = require('../chunk-QKLRAA4T.cjs');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _chunkM4XE4UMTcjs = require('../chunk-M4XE4UMT.cjs');
+
+// src/vector/types.ts
+var VECTOR_TOOLS = ["select", "direct", "pen", "pencil", "rect", "ellipse", "polygon", "star", "line"];
+var VECTOR_TRANSFORM_HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w", "rotate"];
+
+// src/vector/geometry.ts
+var EPS = 1e-9;
+var cloneAnchor = (a) => ({
+  x: a.x,
+  y: a.y,
+  ...a.in ? { in: { x: a.in.x, y: a.in.y } } : {},
+  ...a.out ? { out: { x: a.out.x, y: a.out.y } } : {},
+  ...a.type && a.type !== "corner" ? { type: a.type } : {}
+});
+var cloneSubpath = (s) => ({ anchors: s.anchors.map(cloneAnchor), closed: s.closed });
+function cloneVectorNode(node) {
+  return JSON.parse(JSON.stringify(node));
+}
+function cloneVectorDocument(doc) {
+  return JSON.parse(JSON.stringify(doc));
+}
+function hasPaint(paint) {
+  if (paint === void 0 || paint === null) return false;
+  if (typeof paint === "string") {
+    const p = paint.trim().toLowerCase();
+    return p !== "" && p !== "none" && p !== "transparent";
+  }
+  return true;
+}
+var handleOf = (a, side) => _nullishCoalesce(a[side], () => ( { x: a.x, y: a.y }));
+var isOnAnchor = (a, h) => !h || Math.abs(h.x - a.x) < EPS && Math.abs(h.y - a.y) < EPS;
+function subpathSegmentCount(sp) {
+  const n = sp.anchors.length;
+  if (n < 2) return 0;
+  return sp.closed ? n : n - 1;
+}
+function subpathSegment(sp, i) {
+  const a = sp.anchors[i];
+  const b = sp.anchors[(i + 1) % sp.anchors.length];
+  if (isOnAnchor(a, a.out) && isOnAnchor(b, b.in)) return [[a.x, a.y], [b.x, b.y]];
+  const c1 = handleOf(a, "out");
+  const c2 = handleOf(b, "in");
+  return [[a.x, a.y], [c1.x, c1.y], [c2.x, c2.y], [b.x, b.y]];
+}
+function subpathsToBezier(subpaths) {
+  const out = [];
+  for (const sp of subpaths) {
+    if (sp.anchors.length === 0) continue;
+    const first = sp.anchors[0];
+    out.push({ type: "M", x: first.x, y: first.y });
+    const count = subpathSegmentCount(sp);
+    for (let i = 0; i < count; i++) {
+      const seg = subpathSegment(sp, i);
+      if (sp.closed && i === count - 1 && seg.length === 2) break;
+      if (seg.length === 2) out.push({ type: "L", x: seg[1][0], y: seg[1][1] });
+      else out.push({ type: "C", x1: seg[1][0], y1: seg[1][1], x2: seg[2][0], y2: seg[2][1], x: seg[3][0], y: seg[3][1] });
+    }
+    if (sp.closed) out.push({ type: "Z" });
+  }
+  return out;
+}
+function vectorNodeToBezier(node) {
+  return node.type === "path" ? subpathsToBezier(node.subpaths) : [];
+}
+function vectorPathData(input, precision = 3) {
+  const subpaths = Array.isArray(input) ? input : input.subpaths;
+  return _chunkM4XE4UMTcjs.bezierPathToSvg.call(void 0, subpathsToBezier(subpaths), { precision });
+}
+function inferAnchorType(a) {
+  if (isOnAnchor(a, a.in) || isOnAnchor(a, a.out)) return "corner";
+  const ix = a.in.x - a.x;
+  const iy = a.in.y - a.y;
+  const ox = a.out.x - a.x;
+  const oy = a.out.y - a.y;
+  const li = Math.hypot(ix, iy);
+  const lo = Math.hypot(ox, oy);
+  const cross = (ix * oy - iy * ox) / (li * lo);
+  const dot = (ix * ox + iy * oy) / (li * lo);
+  if (Math.abs(cross) > 1e-3 || dot > 0) return "corner";
+  return Math.abs(li - lo) <= 1e-3 * Math.max(li, lo) ? "symmetric" : "smooth";
+}
+function bezierToSubpaths(input) {
+  const path = _chunkM4XE4UMTcjs.toBezierPath.call(void 0, input);
+  const out = [];
+  let current = null;
+  const last = () => current.anchors[current.anchors.length - 1];
+  for (const cmd of path) {
+    switch (cmd.type) {
+      case "M":
+        current = { anchors: [{ x: cmd.x, y: cmd.y }], closed: false };
+        out.push(current);
+        break;
+      case "L":
+        current.anchors.push({ x: cmd.x, y: cmd.y });
+        break;
+      case "Q": {
+        const p0 = last();
+        p0.out = { x: p0.x + 2 / 3 * (cmd.x1 - p0.x), y: p0.y + 2 / 3 * (cmd.y1 - p0.y) };
+        current.anchors.push({ x: cmd.x, y: cmd.y, in: { x: cmd.x + 2 / 3 * (cmd.x1 - cmd.x), y: cmd.y + 2 / 3 * (cmd.y1 - cmd.y) } });
+        break;
+      }
+      case "C":
+        last().out = { x: cmd.x1, y: cmd.y1 };
+        current.anchors.push({ x: cmd.x, y: cmd.y, in: { x: cmd.x2, y: cmd.y2 } });
+        break;
+      case "Z": {
+        if (!current) break;
+        current.closed = true;
+        const anchors = current.anchors;
+        if (anchors.length > 1) {
+          const first = anchors[0];
+          const end = anchors[anchors.length - 1];
+          if (Math.abs(end.x - first.x) < 1e-7 && Math.abs(end.y - first.y) < 1e-7) {
+            if (end.in) first.in = end.in;
+            anchors.pop();
+          }
+        }
+        current = null;
+        break;
+      }
+    }
+  }
+  for (const sp of out) {
+    for (const a of sp.anchors) {
+      if (isOnAnchor(a, a.in)) delete a.in;
+      if (isOnAnchor(a, a.out)) delete a.out;
+      const type = inferAnchorType(a);
+      if (type !== "corner") a.type = type;
+    }
+  }
+  return out.filter((sp) => sp.anchors.length > 0);
+}
+function walkVectorNodes(nodes, fn) {
+  const visit = (list, parent, depth) => {
+    for (const node of list) {
+      fn(node, parent, depth);
+      if (node.type === "group") visit(node.children, node, depth + 1);
+    }
+  };
+  visit(nodes, null, 0);
+}
+function findVectorNode(nodes, id) {
+  for (const node of nodes) {
+    if (node.id === id) return node;
+    if (node.type === "group") {
+      const found = findVectorNode(node.children, id);
+      if (found) return found;
+    }
+  }
+  return void 0;
+}
+function locateVectorNode(nodes, id) {
+  const search = (list, parent) => {
+    for (let i = 0; i < list.length; i++) {
+      const node = list[i];
+      if (node.id === id) return { list, index: i, parent };
+      if (node.type === "group") {
+        const found = search(node.children, node);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  return search(nodes, null);
+}
+function collectPathNodes(node) {
+  if (node.type === "path") return [node];
+  const out = [];
+  walkVectorNodes(node.children, (n) => {
+    if (n.type === "path") out.push(n);
+  });
+  return out;
+}
+function vectorNodeBounds(node) {
+  if (node.type === "group") return unionBounds(node.children.map(vectorNodeBounds));
+  const b = _chunkM4XE4UMTcjs.bezierPathBounds.call(void 0, subpathsToBezier(node.subpaths));
+  if (!b) return null;
+  return { x: b.minX, y: b.minY, width: b.maxX - b.minX, height: b.maxY - b.minY };
+}
+function unionBounds(list) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const b of list) {
+    if (!b) continue;
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.width);
+    maxY = Math.max(maxY, b.y + b.height);
+  }
+  if (minX === Infinity) return null;
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function boundsIntersect(a, b) {
+  return a.x <= b.x + b.width && b.x <= a.x + a.width && a.y <= b.y + b.height && b.y <= a.y + a.height;
+}
+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) {
+  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 (path.length === 0) return false;
+  const point = [p.x, p.y];
+  if (hasPaint(node.fill) && _chunkM4XE4UMTcjs.pointInBezierPath.call(void 0, path, point, _nullishCoalesce(node.fillRule, () => ( "nonzero")))) return true;
+  const reach = (hasPaint(node.stroke) ? (_nullishCoalesce(node.strokeWidth, () => ( 1))) / 2 : 0) + tolerance;
+  return _chunkM4XE4UMTcjs.distanceToBezierPath.call(void 0, path, point) <= reach;
+}
+function hitTestVectorNodes(nodes, p, tolerance = 0) {
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const node = nodes[i];
+    if (node.visible === false || node.locked) continue;
+    if (hitTestVectorNode(node, p, tolerance)) return node;
+  }
+  return null;
+}
+function nearestSegment(node, p) {
+  let best = null;
+  node.subpaths.forEach((sp, s) => {
+    const count = subpathSegmentCount(sp);
+    for (let i = 0; i < count; i++) {
+      const seg = subpathSegment(sp, i);
+      const hit = _chunkM4XE4UMTcjs.segmentNearest.call(void 0, seg, [p.x, p.y]);
+      if (!best || hit.distance < best.distance) {
+        const pt = _chunkM4XE4UMTcjs.segmentPoint.call(void 0, seg, hit.t);
+        best = { subpath: s, segment: i, t: hit.t, point: { x: pt[0], y: pt[1] }, distance: hit.distance };
+      }
+    }
+  });
+  return best;
+}
+var IDENTITY_MATRIX = [1, 0, 0, 1, 0, 0];
+function multiplyMatrices(a, b) {
+  const [a0, a1, a2, a3, a4, a5] = a;
+  const [b0, b1, b2, b3, b4, b5] = b;
+  return [b0 * a0 + b2 * a1, b1 * a0 + b3 * a1, b0 * a2 + b2 * a3, b1 * a2 + b3 * a3, b0 * a4 + b2 * a5 + b4, b1 * a4 + b3 * a5 + b5];
+}
+var translateMatrix = (dx, dy) => [1, 0, 0, 1, dx, dy];
+function scaleMatrix(sx, sy, origin = { x: 0, y: 0 }) {
+  return [sx, 0, 0, sy, origin.x - sx * origin.x, origin.y - sy * origin.y];
+}
+function rotateMatrix(degrees, origin = { x: 0, y: 0 }) {
+  const r = degrees * Math.PI / 180;
+  const cos = Math.cos(r);
+  const sin = Math.sin(r);
+  return [cos, sin, -sin, cos, origin.x - cos * origin.x + sin * origin.y, origin.y - sin * origin.x - cos * origin.y];
+}
+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) {
+  if (node.type === "group") return { ...node, children: node.children.map((c) => transformVectorNode(c, m)) };
+  const path = node;
+  return {
+    ...path,
+    subpaths: path.subpaths.map((sp) => ({
+      closed: sp.closed,
+      anchors: sp.anchors.map((a) => {
+        const p = applyMatrix(m, a);
+        const next = { x: p.x, y: p.y };
+        if (a.in) next.in = applyMatrix(m, a.in);
+        if (a.out) next.out = applyMatrix(m, a.out);
+        if (a.type) next.type = a.type;
+        return next;
+      })
+    }))
+  };
+}
+function translateAnchor(a, dx, dy) {
+  const next = cloneAnchor(a);
+  next.x += dx;
+  next.y += dy;
+  if (next.in) next.in = { x: next.in.x + dx, y: next.in.y + dy };
+  if (next.out) next.out = { x: next.out.x + dx, y: next.out.y + dy };
+  return next;
+}
+function moveAnchorHandle(a, side, pos, breakHandles = false) {
+  const next = cloneAnchor(a);
+  next[side] = { x: pos.x, y: pos.y };
+  const other = side === "in" ? "out" : "in";
+  const type = breakHandles ? "corner" : _nullishCoalesce(a.type, () => ( "corner"));
+  if (breakHandles) delete next.type;
+  const dx = pos.x - a.x;
+  const dy = pos.y - a.y;
+  const len = Math.hypot(dx, dy);
+  if (type === "symmetric") next[other] = { x: a.x - dx, y: a.y - dy };
+  else if (type === "smooth" && len > EPS) {
+    const o = a[other];
+    const olen = o ? Math.hypot(o.x - a.x, o.y - a.y) : len;
+    next[other] = { x: a.x - dx / len * olen, y: a.y - dy / len * olen };
+  }
+  if (isOnAnchor(next, next.in)) delete next.in;
+  if (isOnAnchor(next, next.out)) delete next.out;
+  return next;
+}
+function convertAnchor(sp, index, type) {
+  const anchors = sp.anchors.map(cloneAnchor);
+  const a = anchors[index];
+  if (!a) return { anchors, closed: sp.closed };
+  if (type === "corner") {
+    delete a.in;
+    delete a.out;
+    delete a.type;
+    return { anchors, closed: sp.closed };
+  }
+  const n = anchors.length;
+  const prev = index > 0 ? anchors[index - 1] : sp.closed ? anchors[n - 1] : null;
+  const next = index < n - 1 ? anchors[index + 1] : sp.closed ? anchors[0] : null;
+  let dir = null;
+  let lenIn = 0;
+  let lenOut = 0;
+  if (!isOnAnchor(a, a.out)) dir = { x: a.out.x - a.x, y: a.out.y - a.y };
+  else if (!isOnAnchor(a, a.in)) dir = { x: a.x - a.in.x, y: a.y - a.in.y };
+  else if (prev && next) dir = { x: next.x - prev.x, y: next.y - prev.y };
+  else if (next) dir = { x: next.x - a.x, y: next.y - a.y };
+  else if (prev) dir = { x: a.x - prev.x, y: a.y - prev.y };
+  if (!dir || Math.hypot(dir.x, dir.y) < EPS) return { anchors, closed: sp.closed };
+  const dl = Math.hypot(dir.x, dir.y);
+  const ux = dir.x / dl;
+  const uy = dir.y / dl;
+  lenIn = a.in && !isOnAnchor(a, a.in) ? Math.hypot(a.in.x - a.x, a.in.y - a.y) : prev ? Math.hypot(prev.x - a.x, prev.y - a.y) / 3 : 0;
+  lenOut = a.out && !isOnAnchor(a, a.out) ? Math.hypot(a.out.x - a.x, a.out.y - a.y) : next ? Math.hypot(next.x - a.x, next.y - a.y) / 3 : 0;
+  if (type === "symmetric") lenIn = lenOut = (lenIn + lenOut) / 2 || Math.max(lenIn, lenOut);
+  if (lenIn > EPS) a.in = { x: a.x - ux * lenIn, y: a.y - uy * lenIn };
+  if (lenOut > EPS) a.out = { x: a.x + ux * lenOut, y: a.y + uy * lenOut };
+  a.type = type;
+  return { anchors, closed: sp.closed };
+}
+function insertAnchor(sp, segment, t) {
+  const anchors = sp.anchors.map(cloneAnchor);
+  const n = anchors.length;
+  const ia = segment;
+  const ib = (segment + 1) % n;
+  const seg = subpathSegment(sp, segment);
+  const [left, right] = _chunkM4XE4UMTcjs.splitSegment.call(void 0, seg, t);
+  const mid = left[left.length - 1];
+  const anchor = { x: mid[0], y: mid[1] };
+  if (seg.length === 4) {
+    anchors[ia].out = { x: left[1][0], y: left[1][1] };
+    anchor.in = { x: left[2][0], y: left[2][1] };
+    anchor.out = { x: right[1][0], y: right[1][1] };
+    anchor.type = "smooth";
+    anchors[ib].in = { x: right[2][0], y: right[2][1] };
+    for (const k of [ia, ib]) if (isOnAnchor(anchors[k], anchors[k].in)) delete anchors[k].in;
+    for (const k of [ia, ib]) if (isOnAnchor(anchors[k], anchors[k].out)) delete anchors[k].out;
+  }
+  const index = segment + 1;
+  anchors.splice(index, 0, anchor);
+  return { subpath: { anchors, closed: sp.closed }, index };
+}
+function removeAnchors(sp, indices) {
+  const drop = new Set(indices);
+  return { anchors: sp.anchors.filter((_, i) => !drop.has(i)).map(cloneAnchor), closed: sp.closed };
+}
+function reverseSubpath(sp) {
+  const anchors = sp.anchors.slice().reverse().map((a) => {
+    const next = { x: a.x, y: a.y };
+    if (a.out) next.in = { ...a.out };
+    if (a.in) next.out = { ...a.in };
+    if (a.type) next.type = a.type;
+    return next;
+  });
+  return { anchors, closed: sp.closed };
+}
+var KAPPA = 0.5522847498307936;
+function rectSubpath(b, radius = 0) {
+  const { x, y, width: w, height: h } = b;
+  const r = Math.max(0, Math.min(radius, w / 2, h / 2));
+  if (r <= EPS) {
+    return { anchors: [{ x, y }, { x: x + w, y }, { x: x + w, y: y + h }, { x, y: y + h }], closed: true };
+  }
+  const k = r * KAPPA;
+  const anchors = [
+    { x: x + r, y, in: { x: x + r - k, y } },
+    { x: x + w - r, y, out: { x: x + w - r + k, y } },
+    { x: x + w, y: y + r, in: { x: x + w, y: y + r - k } },
+    { x: x + w, y: y + h - r, out: { x: x + w, y: y + h - r + k } },
+    { x: x + w - r, y: y + h, in: { x: x + w - r + k, y: y + h } },
+    { x: x + r, y: y + h, out: { x: x + r - k, y: y + h } },
+    { x, y: y + h - r, in: { x, y: y + h - r + k } },
+    { x, y: y + r, out: { x, y: y + r - k } }
+  ];
+  return { anchors, closed: true };
+}
+function ellipseSubpath(b) {
+  const rx = b.width / 2;
+  const ry = b.height / 2;
+  const cx = b.x + rx;
+  const cy = b.y + ry;
+  const kx = rx * KAPPA;
+  const ky = ry * KAPPA;
+  return {
+    closed: true,
+    anchors: [
+      { x: cx, y: cy - ry, in: { x: cx - kx, y: cy - ry }, out: { x: cx + kx, y: cy - ry }, type: "symmetric" },
+      { x: cx + rx, y: cy, in: { x: cx + rx, y: cy - ky }, out: { x: cx + rx, y: cy + ky }, type: "symmetric" },
+      { x: cx, y: cy + ry, in: { x: cx + kx, y: cy + ry }, out: { x: cx - kx, y: cy + ry }, type: "symmetric" },
+      { x: cx - rx, y: cy, in: { x: cx - rx, y: cy + ky }, out: { x: cx - rx, y: cy - ky }, type: "symmetric" }
+    ]
+  };
+}
+function polygonSubpath(b, sides = 6) {
+  const n = Math.max(3, Math.round(sides));
+  const cx = b.x + b.width / 2;
+  const cy = b.y + b.height / 2;
+  const anchors = [];
+  for (let i = 0; i < n; i++) {
+    const t = -Math.PI / 2 + i * 2 * Math.PI / n;
+    anchors.push({ x: cx + Math.cos(t) * b.width / 2, y: cy + Math.sin(t) * b.height / 2 });
+  }
+  return { anchors, closed: true };
+}
+function starSubpath(b, points = 5, innerRatio = 0.5) {
+  const n = Math.max(3, Math.round(points));
+  const cx = b.x + b.width / 2;
+  const cy = b.y + b.height / 2;
+  const anchors = [];
+  for (let i = 0; i < n * 2; i++) {
+    const t = -Math.PI / 2 + i * Math.PI / n;
+    const r = i % 2 === 0 ? 1 : innerRatio;
+    anchors.push({ x: cx + Math.cos(t) * r * b.width / 2, y: cy + Math.sin(t) * r * b.height / 2 });
+  }
+  return { anchors, closed: true };
+}
+function lineSubpath(a, b) {
+  return { anchors: [{ x: a.x, y: a.y }, { x: b.x, y: b.y }], closed: false };
+}
+function roundSubpaths(subpaths, precision = 3) {
+  const f = 10 ** precision;
+  const r = (n) => Math.round(n * f) / f;
+  const rp = (p) => ({ x: r(p.x), y: r(p.y) });
+  return subpaths.map((sp) => ({
+    closed: sp.closed,
+    anchors: sp.anchors.map((a) => ({ ...cloneAnchor(a), x: r(a.x), y: r(a.y), ...a.in ? { in: rp(a.in) } : {}, ...a.out ? { out: rp(a.out) } : {} }))
+  }));
+}
+
+// src/vector/svg.ts
+var escapeAttr = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function vectorPaintToSvg(paint, gradientId) {
+  if (!hasPaint(paint)) return { value: "none", gradient: null };
+  if (typeof paint === "string") return { value: paint, gradient: null };
+  return { value: `url(#${gradientId})`, gradient: _chunkM4XE4UMTcjs.gradientToSvgDef.call(void 0, paint, gradientId) };
+}
+function gradientMarkup(def) {
+  const tag = def.type === "radial" ? "radialGradient" : "linearGradient";
+  const attrs = Object.entries(def.attrs).map(([k, v]) => ` ${k}="${escapeAttr(String(v))}"`).join("");
+  const stops = def.stops.map((s) => `<stop offset="${s.offset}" stop-color="${escapeAttr(s.stopColor)}"${s.stopOpacity !== void 0 ? ` stop-opacity="${s.stopOpacity}"` : ""}/>`).join("");
+  return `<${tag} id="${escapeAttr(def.id)}"${attrs}>${stops}</${tag}>`;
+}
+function vectorDocumentToSvg(doc, options = {}) {
+  const precision = _nullishCoalesce(options.precision, () => ( 3));
+  const prefix = _nullishCoalesce(options.idPrefix, () => ( "vg-"));
+  const pretty = options.pretty !== false;
+  const defs = [];
+  const lines = [];
+  const num = (n) => _chunkM4XE4UMTcjs.formatNumber.call(void 0, n, precision);
+  const indent = (depth) => pretty ? "  ".repeat(depth) : "";
+  const common = (node) => {
+    let out2 = ` id="${escapeAttr(node.id)}"`;
+    if (node.opacity !== void 0 && node.opacity < 1) out2 += ` opacity="${num(node.opacity)}"`;
+    if (node.visible === false) out2 += ` display="none"`;
+    return out2;
+  };
+  const emit = (node, depth) => {
+    if (node.visible === false && !options.includeHidden) return;
+    if (node.type === "group") {
+      lines.push(`${indent(depth)}<g${common(node)}>`);
+      for (const child of node.children) emit(child, depth + 1);
+      lines.push(`${indent(depth)}</g>`);
+      return;
+    }
+    const fill = vectorPaintToSvg(node.fill, `${prefix}fill-${node.id}`);
+    const stroke = vectorPaintToSvg(node.stroke, `${prefix}stroke-${node.id}`);
+    if (fill.gradient) defs.push(gradientMarkup(fill.gradient));
+    if (stroke.gradient) defs.push(gradientMarkup(stroke.gradient));
+    let attrs = `${common(node)} d="${vectorPathData(node, precision)}" fill="${escapeAttr(fill.value)}"`;
+    if (node.fillRule === "evenodd") attrs += ` fill-rule="evenodd"`;
+    if (stroke.value !== "none") {
+      attrs += ` stroke="${escapeAttr(stroke.value)}" stroke-width="${num(_nullishCoalesce(node.strokeWidth, () => ( 1)))}"`;
+      if (node.strokeLinecap && node.strokeLinecap !== "butt") attrs += ` stroke-linecap="${node.strokeLinecap}"`;
+      if (node.strokeLinejoin && node.strokeLinejoin !== "miter") attrs += ` stroke-linejoin="${node.strokeLinejoin}"`;
+      if (_optionalChain([node, 'access', _2 => _2.strokeDasharray, 'optionalAccess', _3 => _3.length])) attrs += ` stroke-dasharray="${node.strokeDasharray.map(num).join(" ")}"`;
+    }
+    lines.push(`${indent(depth)}<path${attrs}/>`);
+  };
+  for (const node of doc.nodes) emit(node, 1);
+  const w = num(doc.width);
+  const h = num(doc.height);
+  const nl = pretty ? "\n" : "";
+  const out = [`<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`];
+  if (defs.length) out.push(`${indent(1)}<defs>${defs.join("")}</defs>`);
+  if (doc.background && options.background !== false && hasPaint(doc.background)) {
+    out.push(`${indent(1)}<rect width="${w}" height="${h}" fill="${escapeAttr(doc.background)}"/>`);
+  }
+  out.push(...lines, "</svg>");
+  return out.join(nl);
+}
+function parseXml(source) {
+  const text = source.replace(/<!--[\s\S]*?-->/g, "").replace(/<\?[\s\S]*?\?>/g, "").replace(/<!\[CDATA\[[\s\S]*?\]\]>/g, "").replace(/<!DOCTYPE[^>[]*(\[[\s\S]*?\])?\s*>/gi, "");
+  const root = { name: "#root", attrs: {}, children: [] };
+  const stack = [root];
+  const tag = /<(\/?)([A-Za-z_][\w:.-]*)((?:\s+[^\s=/>]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?)*)\s*(\/?)>/g;
+  const attr = /([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;
+  let m;
+  while (m = tag.exec(text)) {
+    const [, closing, rawName, rawAttrs, selfClosing] = m;
+    const name = rawName.replace(/^svg:/, "");
+    if (closing) {
+      for (let i = stack.length - 1; i > 0; i--) {
+        if (stack[i].name === name) {
+          stack.length = i;
+          break;
+        }
+      }
+      continue;
+    }
+    const attrs = {};
+    let a;
+    attr.lastIndex = 0;
+    while (a = attr.exec(rawAttrs)) attrs[a[1]] = decodeEntities(_nullishCoalesce(_nullishCoalesce(_nullishCoalesce(a[2], () => ( a[3])), () => ( a[4])), () => ( "")));
+    const el = { name, attrs, children: [] };
+    stack[stack.length - 1].children.push(el);
+    if (!selfClosing) stack.push(el);
+  }
+  const find = (el) => {
+    if (el.name === "svg") return el;
+    for (const c of el.children) {
+      const f = find(c);
+      if (f) return f;
+    }
+    return null;
+  };
+  return find(root);
+}
+function decodeEntities(s) {
+  return s.replace(/&#x([0-9a-f]+);/gi, (_, h) => String.fromCodePoint(parseInt(h, 16))).replace(/&#(\d+);/g, (_, d) => String.fromCodePoint(parseInt(d, 10))).replace(/&quot;/g, '"').replace(/&apos;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+}
+var numberList = (s) => (_nullishCoalesce(s, () => ( ""))).trim().split(/[\s,]+|(?=-)(?<![eE])/).filter(Boolean).map(Number).filter((n) => Number.isFinite(n));
+var length = (s, fallback = 0) => {
+  if (s === void 0) return fallback;
+  const n = parseFloat(s);
+  return Number.isFinite(n) ? n : fallback;
+};
+function parseSvgTransform(value) {
+  let m = IDENTITY_MATRIX;
+  if (!value) return m;
+  const re = /(matrix|translate|scale|rotate|skewX|skewY)\s*\(([^)]*)\)/g;
+  let t;
+  while (t = re.exec(value)) {
+    const n = numberList(t[2]);
+    let step = IDENTITY_MATRIX;
+    switch (t[1]) {
+      case "matrix":
+        if (n.length >= 6) step = [n[0], n[1], n[2], n[3], n[4], n[5]];
+        break;
+      case "translate":
+        step = translateMatrix(_nullishCoalesce(n[0], () => ( 0)), _nullishCoalesce(n[1], () => ( 0)));
+        break;
+      case "scale":
+        step = scaleMatrix(_nullishCoalesce(n[0], () => ( 1)), _nullishCoalesce(_nullishCoalesce(n[1], () => ( n[0])), () => ( 1)));
+        break;
+      case "rotate":
+        step = rotateMatrix(_nullishCoalesce(n[0], () => ( 0)), { x: _nullishCoalesce(n[1], () => ( 0)), y: _nullishCoalesce(n[2], () => ( 0)) });
+        break;
+      case "skewX":
+        step = [1, 0, Math.tan((_nullishCoalesce(n[0], () => ( 0))) * Math.PI / 180), 1, 0, 0];
+        break;
+      case "skewY":
+        step = [1, Math.tan((_nullishCoalesce(n[0], () => ( 0))) * Math.PI / 180), 0, 1, 0, 0];
+        break;
+    }
+    m = multiplyMatrices(step, m);
+  }
+  return m;
+}
+var STYLE_KEYS = {
+  fill: "fill",
+  stroke: "stroke",
+  "stroke-width": "strokeWidth",
+  "stroke-linecap": "strokeLinecap",
+  "stroke-linejoin": "strokeLinejoin",
+  "stroke-dasharray": "strokeDasharray",
+  "fill-rule": "fillRule"
+};
+function readStyle(el, parent) {
+  const out = { ...parent };
+  for (const [attr, key] of Object.entries(STYLE_KEYS)) if (el.attrs[attr] !== void 0) out[key] = el.attrs[attr].trim();
+  for (const decl of (_nullishCoalesce(el.attrs.style, () => ( ""))).split(";")) {
+    const i = decl.indexOf(":");
+    if (i < 0) continue;
+    const key = STYLE_KEYS[decl.slice(0, i).trim()];
+    if (key) out[key] = decl.slice(i + 1).replace(/!important/, "").trim();
+  }
+  return out;
+}
+function readStops(el) {
+  return el.children.filter((c) => c.name === "stop").map((c) => {
+    const style = Object.fromEntries(
+      (_nullishCoalesce(c.attrs.style, () => ( ""))).split(";").map((d) => d.split(":").map((s) => s.trim())).filter((d) => d.length === 2)
+    );
+    const raw = _nullishCoalesce(c.attrs.offset, () => ( "0"));
+    const offset = raw.endsWith("%") ? parseFloat(raw) / 100 : parseFloat(raw);
+    const opacity = _nullishCoalesce(style["stop-opacity"], () => ( c.attrs["stop-opacity"]));
+    return {
+      offset: Number.isFinite(offset) ? Math.max(0, Math.min(1, offset)) : 0,
+      color: _nullishCoalesce(_nullishCoalesce(style["stop-color"], () => ( c.attrs["stop-color"])), () => ( "#000")),
+      ...opacity !== void 0 ? { opacity: parseFloat(opacity) } : {}
+    };
+  });
+}
+var fraction = (s, fallback) => {
+  if (s === void 0) return fallback;
+  const n = parseFloat(s);
+  if (!Number.isFinite(n)) return fallback;
+  return s.trim().endsWith("%") ? n / 100 : n;
+};
+function collectGradients(el, raw) {
+  if ((el.name === "linearGradient" || el.name === "radialGradient") && el.attrs.id) raw.set(el.attrs.id, el);
+  for (const c of el.children) collectGradients(c, raw);
+}
+function resolveGradient(id, raw, seen = /* @__PURE__ */ new Set()) {
+  const el = raw.get(id);
+  if (!el || seen.has(id)) return null;
+  seen.add(id);
+  let stops = readStops(el);
+  const href = _nullishCoalesce(el.attrs.href, () => ( el.attrs["xlink:href"]));
+  if (!stops.length && _optionalChain([href, 'optionalAccess', _4 => _4.startsWith, 'call', _5 => _5("#")])) stops = _nullishCoalesce(_optionalChain([resolveGradient, 'call', _6 => _6(href.slice(1), raw, seen), 'optionalAccess', _7 => _7.stops]), () => ( []));
+  if (!stops.length) return null;
+  if (el.name === "radialGradient") {
+    return { type: "radial", cx: fraction(el.attrs.cx, 0.5), cy: fraction(el.attrs.cy, 0.5), r: fraction(el.attrs.r, 0.5), stops };
+  }
+  const x1 = fraction(el.attrs.x1, 0);
+  const y1 = fraction(el.attrs.y1, 0);
+  const x2 = fraction(el.attrs.x2, 1);
+  const y2 = fraction(el.attrs.y2, 0);
+  const angle = Math.round((Math.atan2(x2 - x1, -(y2 - y1)) * 180 / Math.PI + 360) % 360);
+  return { type: "linear", angle, stops };
+}
+function parseVectorSvg(svg, options = {}) {
+  const root = parseXml(svg);
+  if (!root) throw new Error("The markup has no <svg> element.");
+  let counter = 0;
+  const usedIds = /* @__PURE__ */ new Set();
+  const createId = _nullishCoalesce(options.createId, () => ( (() => `node-${++counter}`)));
+  const idFor = (el) => {
+    const id = el.attrs.id;
+    if (id && !usedIds.has(id)) {
+      usedIds.add(id);
+      return id;
+    }
+    let next = createId();
+    while (usedIds.has(next)) next = createId();
+    usedIds.add(next);
+    return next;
+  };
+  const rawGradients = /* @__PURE__ */ new Map();
+  collectGradients(root, rawGradients);
+  const paint = (value) => {
+    const v = value.trim();
+    const url = /^url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/.exec(v);
+    if (url) return _nullishCoalesce(resolveGradient(url[1], rawGradients), () => ( null));
+    if (v === "none" || v === "") return null;
+    return v;
+  };
+  const viewBox = numberList(root.attrs.viewBox);
+  const width = viewBox.length === 4 ? viewBox[2] : length(root.attrs.width, 300);
+  const height = viewBox.length === 4 ? viewBox[3] : length(root.attrs.height, 150);
+  const rootMatrix = viewBox.length === 4 ? translateMatrix(-viewBox[0], -viewBox[1]) : IDENTITY_MATRIX;
+  const SKIP = /* @__PURE__ */ new Set(["defs", "clipPath", "mask", "symbol", "style", "title", "desc", "metadata", "pattern", "marker", "filter", "text", "image", "use", "linearGradient", "radialGradient", "script", "foreignObject"]);
+  const shapeOf = (el) => {
+    const a = el.attrs;
+    switch (el.name) {
+      case "path":
+        return a.d ? bezierToSubpaths(a.d) : null;
+      case "rect": {
+        const w = length(a.width);
+        const h = length(a.height);
+        if (w <= 0 || h <= 0) return null;
+        const r = length(_nullishCoalesce(a.rx, () => ( a.ry)), 0);
+        return [rectSubpath({ x: length(a.x), y: length(a.y), width: w, height: h }, r)];
+      }
+      case "circle": {
+        const r = length(a.r);
+        if (r <= 0) return null;
+        const cx = length(a.cx);
+        const cy = length(a.cy);
+        return [ellipseSubpath({ x: cx - r, y: cy - r, width: 2 * r, height: 2 * r })];
+      }
+      case "ellipse": {
+        const rx = length(a.rx);
+        const ry = length(a.ry);
+        if (rx <= 0 || ry <= 0) return null;
+        return [ellipseSubpath({ x: length(a.cx) - rx, y: length(a.cy) - ry, width: 2 * rx, height: 2 * ry })];
+      }
+      case "line":
+        return [lineSubpath({ x: length(a.x1), y: length(a.y1) }, { x: length(a.x2), y: length(a.y2) })];
+      case "polyline":
+      case "polygon": {
+        const n = numberList(a.points);
+        if (n.length < 4) return null;
+        const anchors = [];
+        for (let i = 0; i + 1 < n.length; i += 2) anchors.push({ x: n[i], y: n[i + 1] });
+        return [{ anchors, closed: el.name === "polygon" }];
+      }
+    }
+    return null;
+  };
+  const visit = (el, style, matrix) => {
+    const out = [];
+    for (const child of el.children) {
+      if (SKIP.has(child.name)) continue;
+      const m = multiplyMatrices(parseSvgTransform(child.attrs.transform), matrix);
+      const s = readStyle(child, style);
+      const opacity = child.attrs.opacity !== void 0 ? parseFloat(child.attrs.opacity) : void 0;
+      const hidden = child.attrs.display === "none" || child.attrs.visibility === "hidden";
+      const meta = {
+        ...child.attrs["inkscape:label"] || child.attrs["data-name"] ? { name: _nullishCoalesce(child.attrs["inkscape:label"], () => ( child.attrs["data-name"])) } : {},
+        ...opacity !== void 0 && Number.isFinite(opacity) && opacity < 1 ? { opacity } : {},
+        ...hidden ? { visible: false } : {}
+      };
+      if (child.name === "g" || child.name === "svg" || child.name === "a" || child.name === "switch") {
+        const children = visit(child, s, m);
+        if (!children.length) continue;
+        const group = { id: idFor(child), type: "group", ...meta, children };
+        out.push(group);
+        continue;
+      }
+      const subpaths = shapeOf(child);
+      if (!subpaths || !subpaths.length) continue;
+      let node = {
+        id: idFor(child),
+        type: "path",
+        ...meta,
+        subpaths,
+        fill: child.name === "line" ? null : paint(s.fill),
+        stroke: paint(s.stroke),
+        ...s.strokeWidth ? { strokeWidth: length(s.strokeWidth, 1) } : {},
+        ...s.strokeLinecap ? { strokeLinecap: s.strokeLinecap } : {},
+        ...s.strokeLinejoin ? { strokeLinejoin: s.strokeLinejoin } : {},
+        ...s.strokeDasharray && s.strokeDasharray !== "none" ? { strokeDasharray: numberList(s.strokeDasharray) } : {},
+        ...s.fillRule === "evenodd" ? { fillRule: "evenodd" } : {}
+      };
+      if (m !== IDENTITY_MATRIX) {
+        node = transformVectorNode(node, m);
+        const strokeScale = Math.sqrt(Math.abs(m[0] * m[3] - m[1] * m[2]));
+        if (hasPaint(node.stroke) && strokeScale > 0 && Math.abs(strokeScale - 1) > 1e-9) node.strokeWidth = (_nullishCoalesce(node.strokeWidth, () => ( 1))) * strokeScale;
+      }
+      out.push(node);
+    }
+    return out;
+  };
+  const nodes = visit(root, readStyle(root, { fill: "#000", stroke: "none", strokeWidth: "" }), rootMatrix);
+  return { width, height, nodes };
+}
+
+// src/vector/controller.ts
+var VECTOR_CLIPBOARD_TYPE = "pixerate/vector";
+var DEFAULT_DEFAULTS = {
+  fill: "#d4d4d8",
+  stroke: "#18181b",
+  strokeWidth: 2,
+  polygonSides: 6,
+  starPoints: 5,
+  starInnerRatio: 0.5,
+  cornerRadius: 0
+};
+var MIN_ZOOM = 0.05;
+var MAX_ZOOM = 64;
+var VECTOR_ROTATE_HANDLE_OFFSET = 24;
+var sameRef = (a, b) => a.nodeId === b.nodeId && a.subpath === b.subpath && a.index === b.index;
+function getEditablePathIds(state) {
+  if (state.tool !== "direct" && state.tool !== "pen") return [];
+  const ids = /* @__PURE__ */ new Set();
+  if (state.pen) ids.add(state.pen.nodeId);
+  if (state.tool === "direct") {
+    if (state.editingId) ids.add(state.editingId);
+    for (const id of state.selection) {
+      const node = findVectorNode(state.document.nodes, id);
+      if (node && !node.locked) {
+        for (const p of collectPathNodes(node)) if (!p.locked) ids.add(p.id);
+      }
+    }
+  }
+  return [...ids].filter((id) => _optionalChain([findVectorNode, 'call', _8 => _8(state.document.nodes, id), 'optionalAccess', _9 => _9.type]) === "path");
+}
+function getVisibleAnchors(state) {
+  const out = [];
+  for (const id of getEditablePathIds(state)) {
+    const node = findVectorNode(state.document.nodes, id);
+    node.subpaths.forEach((sp, s) => sp.anchors.forEach((_, i) => out.push({ nodeId: id, subpath: s, index: i })));
+  }
+  return out;
+}
+function getVisibleHandles(state) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const push = (node, s, i, handle) => {
+    const sp = node.subpaths[s];
+    const a = _optionalChain([sp, 'optionalAccess', _10 => _10.anchors, 'access', _11 => _11[i]]);
+    if (!a || !a[handle]) return;
+    const key = `${node.id}:${s}:${i}:${handle}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    out.push({ nodeId: node.id, subpath: s, index: i, handle });
+  };
+  if (state.tool === "pen" && state.pen) {
+    const node = findVectorNode(state.document.nodes, state.pen.nodeId);
+    const sp = _optionalChain([node, 'optionalAccess', _12 => _12.type]) === "path" ? node.subpaths[state.pen.subpath] : void 0;
+    if (_optionalChain([node, 'optionalAccess', _13 => _13.type]) === "path" && sp) {
+      const last = sp.anchors.length - 1;
+      push(node, state.pen.subpath, last, "in");
+      push(node, state.pen.subpath, last, "out");
+    }
+    return out;
+  }
+  if (state.tool !== "direct") return out;
+  const editable = new Set(getEditablePathIds(state));
+  for (const ref of state.selectedAnchors) {
+    if (!editable.has(ref.nodeId)) continue;
+    const node = findVectorNode(state.document.nodes, ref.nodeId);
+    const sp = node.subpaths[ref.subpath];
+    if (!sp) continue;
+    const n = sp.anchors.length;
+    push(node, ref.subpath, ref.index, "in");
+    push(node, ref.subpath, ref.index, "out");
+    const prev = ref.index > 0 ? ref.index - 1 : sp.closed ? n - 1 : -1;
+    const next = ref.index < n - 1 ? ref.index + 1 : sp.closed ? 0 : -1;
+    if (prev >= 0) push(node, ref.subpath, prev, "out");
+    if (next >= 0) push(node, ref.subpath, next, "in");
+  }
+  return out;
+}
+function getAnchor(doc, ref) {
+  const node = findVectorNode(doc.nodes, ref.nodeId);
+  return _optionalChain([node, 'optionalAccess', _14 => _14.type]) === "path" ? _optionalChain([node, 'access', _15 => _15.subpaths, 'access', _16 => _16[ref.subpath], 'optionalAccess', _17 => _17.anchors, 'access', _18 => _18[ref.index]]) : void 0;
+}
+function getTransformHandlePositions(box) {
+  const { x, y, width: w, height: h } = box;
+  return [
+    { handle: "nw", x, y },
+    { handle: "n", x: x + w / 2, y },
+    { handle: "ne", x: x + w, y },
+    { handle: "e", x: x + w, y: y + h / 2 },
+    { handle: "se", x: x + w, y: y + h },
+    { handle: "s", x: x + w / 2, y: y + h },
+    { handle: "sw", x, y: y + h },
+    { handle: "w", x, y: y + h / 2 },
+    { 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"
+};
+var TOOL_LABELS = {
+  select: "Select",
+  direct: "Direct Select",
+  pen: "Pen",
+  pencil: "Pencil",
+  rect: "Rectangle",
+  ellipse: "Ellipse",
+  polygon: "Polygon",
+  star: "Star",
+  line: "Line"
+};
+var TOOL_KEYS = { v: "select", a: "direct", p: "pen", n: "pencil", r: "rect", o: "ellipse", e: "ellipse", y: "polygon", s: "star", l: "line" };
+function vectorToolLabel(tool) {
+  return TOOL_LABELS[tool];
+}
+var VECTOR_TOOL_SHORTCUTS = {
+  select: "V",
+  direct: "A",
+  pen: "P",
+  pencil: "N",
+  rect: "R",
+  ellipse: "O",
+  polygon: "Y",
+  star: "S",
+  line: "L"
+};
+var VECTOR_TOOL_GLYPHS = {
+  select: "\u2196",
+  direct: "\u2316",
+  pen: "\u2712",
+  pencil: "\u270E",
+  rect: "\u25AD",
+  ellipse: "\u25EF",
+  polygon: "\u2B21",
+  star: "\u2606",
+  line: "\u2571"
+};
+var BOOLEAN_OPS = {
+  union: "union",
+  subtract: "difference",
+  intersect: "intersection",
+  exclude: "xor"
+};
+var BOOLEAN_LABELS = { union: "Union", subtract: "Subtract", intersect: "Intersect", exclude: "Exclude" };
+function mapTree(nodes, fn) {
+  let changed = false;
+  const out = [];
+  for (const node of nodes) {
+    let next = fn(node);
+    if (next && next.type === "group") {
+      const children = mapTree(next.children, fn);
+      if (children !== next.children) next = { ...next, children };
+    }
+    if (next !== node) changed = true;
+    if (next) out.push(next);
+  }
+  return changed ? out : nodes;
+}
+var idCounter = 0;
+var defaultCreateId = () => `vn-${Date.now().toString(36)}${(++idCounter).toString(36)}`;
+var VectorEditorController = (_class = class {
+  
+  
+  __init() {this.selection = []}
+  __init2() {this.anchors = []}
+  __init3() {this.editingId = null}
+  __init4() {this.pen = null}
+  
+  
+  
+  
+  
+  __init5() {this.hover = null}
+  __init6() {this.pointer = null}
+  __init7() {this.drag = null}
+  __init8() {this.interaction = null}
+  __init9() {this.spaceHeld = false}
+  __init10() {this.clipboard = null}
+  
+  
+  __init11() {this.listeners = /* @__PURE__ */ new Set()}
+  __init12() {this.cleanups = []}
+  __init13() {this.applying = false}
+  /** Set while a commit records a change that was already applied, so `restore` still reports it. */
+  __init14() {this.committing = false}
+  __init15() {this.revision = 0}
+  
+  constructor(options = {}) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);_class.prototype.__init5.call(this);_class.prototype.__init6.call(this);_class.prototype.__init7.call(this);_class.prototype.__init8.call(this);_class.prototype.__init9.call(this);_class.prototype.__init10.call(this);_class.prototype.__init11.call(this);_class.prototype.__init12.call(this);_class.prototype.__init13.call(this);_class.prototype.__init14.call(this);_class.prototype.__init15.call(this);_class.prototype.__init16.call(this);_class.prototype.__init17.call(this);
+    this.history = _nullishCoalesce(options.history, () => ( new (0, _chunkQKLRAA4Tcjs.HistoryManager)()));
+    this.doc = options.document ? cloneVectorDocument(options.document) : { width: 800, height: 600, nodes: [] };
+    this.tool = _nullishCoalesce(options.tool, () => ( "select"));
+    this.defaults = { ...DEFAULT_DEFAULTS, ..._nullishCoalesce(options.defaults, () => ( {})) };
+    this.viewport = { x: 0, y: 0, zoom: 1, ..._nullishCoalesce(options.viewport, () => ( {})) };
+    this.snap = { grid: 0, ..._nullishCoalesce(options.snap, () => ( {})) };
+    this.hitRadius = _nullishCoalesce(options.hitRadius, () => ( 6));
+    this.createId = _nullishCoalesce(options.createId, () => ( defaultCreateId));
+    this.onChange = options.onChange;
+    this.state = this.computeState();
+    this.cleanups.push(
+      this.history.subscribe((h) => {
+        const s = this.state;
+        if (this.applying || s.canUndo === h.canUndo && s.canRedo === h.canRedo && s.undoLabel === h.undoName && s.redoLabel === h.redoName) return;
+        this.notify();
+      })
+    );
+  }
+  /** Stops listening to the history. */
+  destroy() {
+    this.cleanups.splice(0).forEach((fn) => fn());
+    this.listeners.clear();
+  }
+  // -------------------------------------------------------------------------
+  // State
+  // -------------------------------------------------------------------------
+  /** The current snapshot (stable until the next change). */
+  __init16() {this.getState = () => this.state}
+  /** Calls `listener` after every change. Returns an unsubscribe function. */
+  __init17() {this.subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }}
+  getDocument() {
+    return this.doc;
+  }
+  getNode(id) {
+    return findVectorNode(this.doc.nodes, id);
+  }
+  computeState() {
+    const h = this.history.getState();
+    return {
+      document: this.doc,
+      tool: this.tool,
+      selection: this.selection,
+      selectedAnchors: this.anchors,
+      editingId: this.editingId,
+      selectionBounds: this.boundsOf(this.selection),
+      viewport: this.viewport,
+      defaults: this.defaults,
+      snap: this.snap,
+      hitRadius: this.hitRadius,
+      hover: this.hover,
+      cursor: this.cursorFor(),
+      interaction: this.interaction,
+      pen: this.pen,
+      pointer: this.pointer,
+      canUndo: h.canUndo,
+      canRedo: h.canRedo,
+      undoLabel: h.undoName,
+      redoLabel: h.redoName,
+      revision: this.revision
+    };
+  }
+  notify(docChanged = false) {
+    this.revision++;
+    this.state = this.computeState();
+    if (docChanged) _optionalChain([this, 'access', _19 => _19.onChange, 'optionalCall', _20 => _20(this.doc)]);
+    const state = this.state;
+    this.listeners.forEach((listener) => {
+      try {
+        listener(state);
+      } catch (error) {
+        console.error("[VectorEditorController] Error in state listener:", error);
+      }
+    });
+  }
+  boundsOf(ids) {
+    return unionBounds(ids.map((id) => this.getNode(id)).map((n) => n ? vectorNodeBounds(n) : null));
+  }
+  cursorFor() {
+    if (_optionalChain([this, 'access', _21 => _21.drag, 'optionalAccess', _22 => _22.kind]) === "pan" || this.spaceHeld) return this.drag ? "grabbing" : "grab";
+    if (_optionalChain([this, 'access', _23 => _23.drag, 'optionalAccess', _24 => _24.kind]) === "rotate") return "grabbing";
+    if (_optionalChain([this, 'access', _25 => _25.drag, 'optionalAccess', _26 => _26.kind]) === "move") return "move";
+    const h = this.hover;
+    switch (this.tool) {
+      case "select":
+        if (_optionalChain([h, 'optionalAccess', _27 => _27.transformHandle])) return RESIZE_CURSORS[h.transformHandle];
+        return _optionalChain([h, 'optionalAccess', _28 => _28.nodeId]) ? "move" : "default";
+      case "direct":
+        if (_optionalChain([h, 'optionalAccess', _29 => _29.anchor]) || _optionalChain([h, 'optionalAccess', _30 => _30.handle])) return "pointer";
+        if (_optionalChain([h, 'optionalAccess', _31 => _31.segment])) return "copy";
+        return _optionalChain([h, 'optionalAccess', _32 => _32.nodeId]) ? "move" : "default";
+      case "pen":
+        return _optionalChain([h, 'optionalAccess', _33 => _33.anchor]) ? "pointer" : "crosshair";
+      default:
+        return "crosshair";
+    }
+  }
+  // -------------------------------------------------------------------------
+  // Undoable changes
+  // -------------------------------------------------------------------------
+  snapshot() {
+    return { doc: this.doc, selection: this.selection, anchors: this.anchors, editingId: this.editingId, pen: this.pen };
+  }
+  restore(s) {
+    const docChanged = s.doc !== this.doc || this.committing;
+    this.committing = false;
+    this.applying = true;
+    try {
+      this.doc = s.doc;
+      this.selection = s.selection.filter((id) => this.getNode(id));
+      this.anchors = s.anchors.filter((r) => getAnchor(this.doc, r));
+      this.editingId = s.editingId && this.getNode(s.editingId) ? s.editingId : null;
+      this.pen = s.pen && _optionalChain([this, 'access', _34 => _34.getNode, 'call', _35 => _35(s.pen.nodeId), 'optionalAccess', _36 => _36.subpaths, 'optionalAccess', _37 => _37[s.pen.subpath]]) ? s.pen : null;
+    } finally {
+      this.applying = false;
+    }
+    this.notify(docChanged);
+  }
+  /** Records the change from `before` to the current state as one undo step. */
+  commit(name, before) {
+    const after = this.snapshot();
+    if (before.doc === after.doc) {
+      this.notify();
+      return;
+    }
+    const command = {
+      name,
+      execute: () => this.restore(after),
+      undo: () => this.restore(before),
+      redo: () => this.restore(after)
+    };
+    this.committing = true;
+    this.history.execute(command);
+    this.committing = false;
+  }
+  /** Runs `fn` (which updates fields) and records it as one undo step. */
+  change(name, fn) {
+    const before = this.snapshot();
+    fn();
+    this.commit(name, before);
+  }
+  setDoc(nodes) {
+    if (nodes !== this.doc.nodes) this.doc = { ...this.doc, nodes };
+  }
+  replaceNode(id, next) {
+    this.setDoc(mapTree(this.doc.nodes, (n) => n.id === id ? next : n));
+  }
+  freshIds(node) {
+    const copy = cloneVectorNode(node);
+    const used = /* @__PURE__ */ new Set();
+    walkVectorNodes(this.doc.nodes, (n) => used.add(n.id));
+    const next = () => {
+      let id = this.createId();
+      while (used.has(id)) id = this.createId();
+      used.add(id);
+      return id;
+    };
+    const assign = (n) => {
+      n.id = next();
+      if (n.type === "group") n.children.forEach(assign);
+    };
+    assign(copy);
+    return copy;
+  }
+  newId() {
+    let id = this.createId();
+    while (this.getNode(id)) id = this.createId();
+    return id;
+  }
+  // -------------------------------------------------------------------------
+  // Viewport
+  // -------------------------------------------------------------------------
+  screenToDocument(p) {
+    const v = this.viewport;
+    return { x: (p.x - v.x) / v.zoom, y: (p.y - v.y) / v.zoom };
+  }
+  documentToScreen(p) {
+    const v = this.viewport;
+    return { x: p.x * v.zoom + v.x, y: p.y * v.zoom + v.y };
+  }
+  setViewport(viewport) {
+    const next = { ...this.viewport, ...viewport };
+    next.zoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, next.zoom));
+    if (next.x === this.viewport.x && next.y === this.viewport.y && next.zoom === this.viewport.zoom) return;
+    this.viewport = next;
+    this.notify();
+  }
+  /** Zooms by `factor` keeping the document point under `screen` in place. */
+  zoomAt(screen, factor) {
+    const zoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, this.viewport.zoom * factor));
+    const doc = this.screenToDocument(screen);
+    this.setViewport({ zoom, x: screen.x - doc.x * zoom, y: screen.y - doc.y * zoom });
+  }
+  panBy(dx, dy) {
+    this.setViewport({ x: this.viewport.x + dx, y: this.viewport.y + dy });
+  }
+  /** Fits the artboard (or `bounds`) into a canvas of `size` screen pixels. */
+  zoomToFit(size, options = {}) {
+    const padding = _nullishCoalesce(options.padding, () => ( 40));
+    const b = _nullishCoalesce(options.bounds, () => ( { x: 0, y: 0, width: this.doc.width, height: this.doc.height }));
+    const zoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, Math.min((size.width - padding * 2) / (b.width || 1), (size.height - padding * 2) / (b.height || 1))));
+    this.setViewport({ zoom, x: (size.width - b.width * zoom) / 2 - b.x * zoom, y: (size.height - b.height * zoom) / 2 - b.y * zoom });
+  }
+  /** Zoom at the canvas centre-ish: positive `delta` zooms out (wheel convention). Use with `wheel`. */
+  wheel(screen, delta, mods = {}) {
+    if (mods.mod) this.zoomAt(screen, Math.exp(-delta.y * 0.01));
+    else this.panBy(-(mods.shift ? delta.y : delta.x), -(mods.shift ? 0 : delta.y));
+  }
+  // -------------------------------------------------------------------------
+  // Settings
+  // -------------------------------------------------------------------------
+  setTool(tool) {
+    if (tool === this.tool) return;
+    this.finishPath();
+    this.cancelDrag();
+    this.tool = tool;
+    this.hover = null;
+    if (tool !== "direct") {
+      this.anchors = [];
+      this.editingId = null;
+    }
+    this.notify();
+  }
+  setDefaults(defaults) {
+    this.defaults = { ...this.defaults, ...defaults };
+    this.notify();
+  }
+  setSnap(snap) {
+    this.snap = { ...this.snap, ...snap };
+    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 };
+  }
+  snapDelta(dx, dy, origin) {
+    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 };
+  }
+  // -------------------------------------------------------------------------
+  // Document
+  // -------------------------------------------------------------------------
+  /** Replaces the document. Undoable unless `{ history: false }` (then history is cleared). */
+  setDocument(doc, options = {}) {
+    this.cancelDrag();
+    const next = cloneVectorDocument(doc);
+    if (options.history === false) {
+      this.doc = next;
+      this.selection = [];
+      this.anchors = [];
+      this.editingId = null;
+      this.pen = null;
+      this.history.clear();
+      this.notify(true);
+      return;
+    }
+    this.change(_nullishCoalesce(options.label, () => ( "Replace Document")), () => {
+      this.doc = next;
+      this.selection = [];
+      this.anchors = [];
+      this.editingId = null;
+      this.pen = null;
+    });
+  }
+  /** Changes the artboard size or background. */
+  setArtboard(patch) {
+    this.change("Change Artboard", () => {
+      this.doc = { ...this.doc, ...patch };
+    });
+  }
+  /** Replaces the document with parsed SVG markup (one undo step). */
+  loadSvg(svg, options = {}) {
+    try {
+      const doc = parseVectorSvg(svg, { createId: () => this.createId() });
+      this.setDocument(doc, { history: options.history, label: "Import SVG" });
+      return { ok: true };
+    } catch (error) {
+      return { ok: false, message: error instanceof Error ? error.message : String(error) };
+    }
+  }
+  /** Adds the nodes of SVG markup on top of the document, selected. */
+  importSvg(svg) {
+    try {
+      const parsed = parseVectorSvg(svg);
+      const nodes = parsed.nodes.map((n) => this.freshIds(n));
+      if (!nodes.length) return { ok: false, message: "The SVG has no shapes the editor can read." };
+      this.change("Import SVG", () => {
+        this.setDoc([...this.doc.nodes, ...nodes]);
+        this.selection = nodes.map((n) => n.id);
+        this.anchors = [];
+      });
+      return { ok: true };
+    } catch (error) {
+      return { ok: false, message: error instanceof Error ? error.message : String(error) };
+    }
+  }
+  toSvg(options) {
+    return vectorDocumentToSvg(this.doc, options);
+  }
+  toJSON() {
+    return cloneVectorDocument(this.doc);
+  }
+  /** Adds a node (ids are kept unless taken). Returns its id. */
+  addNode(node, options = {}) {
+    const taken = (() => {
+      let clash = false;
+      walkVectorNodes([node], (n) => {
+        if (this.getNode(n.id)) clash = true;
+      });
+      return clash;
+    })();
+    const next = taken ? this.freshIds(node) : cloneVectorNode(node);
+    this.change(_nullishCoalesce(options.label, () => ( `Add ${next.type === "group" ? "Group" : _nullishCoalesce(next.name, () => ( "Path"))}`)), () => {
+      const insert = (list) => {
+        const copy = list.slice();
+        copy.splice(_nullishCoalesce(options.index, () => ( copy.length)), 0, next);
+        return copy;
+      };
+      if (options.parentId) {
+        this.setDoc(mapTree(this.doc.nodes, (n) => n.id === options.parentId && n.type === "group" ? { ...n, children: insert(n.children) } : n));
+      } else this.setDoc(insert(this.doc.nodes));
+      if (options.select !== false) {
+        this.selection = [next.id];
+        this.anchors = [];
+      }
+    });
+    return next.id;
+  }
+  /** Builds a path node for a shape with the current defaults (not added). */
+  createShapeNode(input) {
+    const b = { x: input.x, y: input.y, width: input.width, height: input.height };
+    const d = this.defaults;
+    let subpath;
+    switch (input.kind) {
+      case "rect":
+        subpath = rectSubpath(b, _nullishCoalesce(input.cornerRadius, () => ( d.cornerRadius)));
+        break;
+      case "ellipse":
+        subpath = ellipseSubpath(b);
+        break;
+      case "polygon":
+        subpath = polygonSubpath(b, _nullishCoalesce(input.sides, () => ( d.polygonSides)));
+        break;
+      case "star":
+        subpath = starSubpath(b, _nullishCoalesce(input.points, () => ( d.starPoints)), _nullishCoalesce(input.innerRatio, () => ( d.starInnerRatio)));
+        break;
+      case "line":
+        subpath = lineSubpath({ x: b.x, y: b.y }, { x: b.x + b.width, y: b.y + b.height });
+        break;
+    }
+    const names = { rect: "Rectangle", ellipse: "Ellipse", polygon: "Polygon", star: "Star", line: "Line" };
+    const style = this.styleFor(input.kind === "line");
+    const own = {};
+    for (const key of ["fill", "stroke", "strokeWidth", "strokeLinecap", "strokeLinejoin", "strokeDasharray", "fillRule"]) {
+      if (input[key] !== void 0) own[key] = input[key];
+    }
+    return { id: this.newId(), type: "path", name: _nullishCoalesce(input.name, () => ( names[input.kind])), ...style, ...own, subpaths: [subpath] };
+  }
+  /** Adds a shape drawn with the current defaults. Returns its id. */
+  addShape(input, options = {}) {
+    const node = this.createShapeNode(input);
+    return this.addNode(node, { label: `Add ${node.name}`, ...options });
+  }
+  /** Adds a path from SVG path data. Returns its id. */
+  addPath(d, style = {}, options = {}) {
+    const subpaths = bezierToSubpaths(d);
+    const node = { id: this.newId(), type: "path", name: _nullishCoalesce(style.name, () => ( "Path")), ...this.styleFor(false), ...style, subpaths };
+    return this.addNode(node, { label: "Add Path", ...options });
+  }
+  styleFor(open) {
+    const d = this.defaults;
+    const out = { fill: open ? null : _nullishCoalesce(d.fill, () => ( null)), stroke: _nullishCoalesce(d.stroke, () => ( null)), strokeWidth: _nullishCoalesce(d.strokeWidth, () => ( 1)) };
+    if (d.strokeLinecap) out.strokeLinecap = d.strokeLinecap;
+    if (d.strokeLinejoin) out.strokeLinejoin = d.strokeLinejoin;
+    if (d.strokeDasharray) out.strokeDasharray = d.strokeDasharray;
+    if (d.fillRule) out.fillRule = d.fillRule;
+    return out;
+  }
+  /** Merges `patch` into a node (paths take style and geometry; groups name / visibility / opacity). */
+  updateNode(id, patch, options = {}) {
+    const node = this.getNode(id);
+    if (!node) return { ok: false, message: `There is no node "${id}".` };
+    const { id: _id, type: _type, ...rest } = patch;
+    this.change(_nullishCoalesce(options.label, () => ( "Edit Node")), () => this.replaceNode(id, { ...node, ...rest }));
+    return { ok: true };
+  }
+  /** Applies style (and opacity) to the selected (or given) nodes; groups pass it to every path inside. */
+  setStyle(style, ids = this.selection, options = {}) {
+    const targets = /* @__PURE__ */ new Set();
+    for (const id of ids) {
+      const node = this.getNode(id);
+      if (!node) return { ok: false, message: `There is no node "${id}".` };
+      for (const p of collectPathNodes(node)) targets.add(p.id);
+    }
+    if (!targets.size) return { ok: false, message: "Nothing is selected." };
+    this.change(_nullishCoalesce(options.label, () => ( "Change Style")), () => {
+      this.setDoc(mapTree(this.doc.nodes, (n) => targets.has(n.id) ? { ...n, ...style } : n));
+    });
+    return { ok: true };
+  }
+  rename(id, name) {
+    return this.updateNode(id, { name }, { label: "Rename" });
+  }
+  setVisible(id, visible) {
+    return this.updateNode(id, { visible }, { label: visible ? "Show" : "Hide" });
+  }
+  setLocked(id, locked) {
+    const result = this.updateNode(id, { locked }, { label: locked ? "Lock" : "Unlock" });
+    if (locked && result.ok && this.selection.includes(id)) {
+      this.selection = this.selection.filter((s) => s !== id);
+      this.notify();
+    }
+    return result;
+  }
+  /** Removes nodes by id. */
+  removeNodes(ids, options = {}) {
+    const drop = new Set(ids.filter((id) => this.getNode(id)));
+    if (!drop.size) return { ok: false, message: "Nothing to delete." };
+    this.change(_nullishCoalesce(options.label, () => ( "Delete")), () => {
+      this.setDoc(mapTree(this.doc.nodes, (n) => drop.has(n.id) ? null : n));
+      this.selection = this.selection.filter((id) => !drop.has(id) && this.getNode(id));
+      this.anchors = this.anchors.filter((r) => getAnchor(this.doc, r));
+      if (this.editingId && !this.getNode(this.editingId)) this.editingId = null;
+      if (this.pen && !this.getNode(this.pen.nodeId)) this.pen = null;
+    });
+    return { ok: true };
+  }
+  // -------------------------------------------------------------------------
+  // Selection
+  // -------------------------------------------------------------------------
+  select(ids, options = {}) {
+    const valid = ids.filter((id) => this.getNode(id));
+    let next;
+    if (options.toggle) {
+      const set = new Set(this.selection);
+      for (const id of valid) set.has(id) ? set.delete(id) : set.add(id);
+      next = [...set];
+    } else next = options.add ? [.../* @__PURE__ */ new Set([...this.selection, ...valid])] : valid;
+    this.selection = next;
+    if (!options.add && !options.toggle) this.anchors = this.anchors.filter((r) => next.includes(r.nodeId));
+    this.notify();
+  }
+  selectAll() {
+    if (this.tool === "direct" && this.editingId) {
+      this.anchors = getVisibleAnchors(this.view());
+    } else {
+      this.selection = this.doc.nodes.filter((n) => !n.locked && n.visible !== false).map((n) => n.id);
+    }
+    this.notify();
+  }
+  clearSelection() {
+    if (!this.selection.length && !this.anchors.length && !this.editingId) return;
+    this.selection = [];
+    this.anchors = [];
+    this.editingId = null;
+    this.notify();
+  }
+  selectAnchors(refs, options = {}) {
+    const valid = refs.filter((r) => getAnchor(this.doc, r));
+    this.anchors = options.add ? [...this.anchors, ...valid.filter((r) => !this.anchors.some((a) => sameRef(a, r)))] : valid;
+    if (valid.length && !this.editingId) this.editingId = valid[0].nodeId;
+    this.notify();
+  }
+  /** Top-level ids of the selection (members of selected groups are covered by the group). */
+  selectedRoots() {
+    return this.selection.filter((id) => {
+      let covered = false;
+      const loc = locateVectorNode(this.doc.nodes, id);
+      let parent = _nullishCoalesce(_optionalChain([loc, 'optionalAccess', _38 => _38.parent]), () => ( null));
+      while (parent) {
+        if (this.selection.includes(parent.id)) covered = true;
+        parent = _nullishCoalesce(_optionalChain([locateVectorNode, 'call', _39 => _39(this.doc.nodes, parent.id), 'optionalAccess', _40 => _40.parent]), () => ( null));
+      }
+      return !covered;
+    });
+  }
+  // -------------------------------------------------------------------------
+  // Transforms
+  // -------------------------------------------------------------------------
+  /** Applies a matrix to the selected (or given) nodes as one undo step. */
+  transform(matrix, options = {}) {
+    const ids = new Set(_nullishCoalesce(options.ids, () => ( this.selectedRoots())));
+    if (!ids.size) return { ok: false, message: "Nothing is selected." };
+    this.change(_nullishCoalesce(options.label, () => ( "Transform")), () => {
+      this.doc = this.transformed(this.doc, ids, matrix);
+    });
+    return { ok: true };
+  }
+  transformed(doc, ids, m) {
+    const nodes = mapTree(doc.nodes, (n) => ids.has(n.id) && !n.locked ? transformVectorNode(n, m) : n);
+    return nodes === doc.nodes ? doc : { ...doc, nodes };
+  }
+  translate(dx, dy, options = {}) {
+    if (this.tool === "direct" && this.anchors.length && !options.ids) {
+      this.change("Move Points", () => {
+        this.doc = this.movedAnchors(this.doc, this.anchors, dx, dy);
+      });
+      return { ok: true };
+    }
+    return this.transform(translateMatrix(dx, dy), { ids: options.ids, label: "Move" });
+  }
+  /** Scales around `origin` (default: the selection centre). */
+  scale(sx, sy = sx, options = {}) {
+    const b = this.boundsOf(_nullishCoalesce(options.ids, () => ( this.selectedRoots())));
+    if (!b) return { ok: false, message: "Nothing is selected." };
+    const origin = _nullishCoalesce(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" });
+  }
+  /** Rotates clockwise by `degrees` around `origin` (default: the selection centre). */
+  rotate(degrees, options = {}) {
+    const b = this.boundsOf(_nullishCoalesce(options.ids, () => ( this.selectedRoots())));
+    if (!b) return { ok: false, message: "Nothing is selected." };
+    const origin = _nullishCoalesce(options.origin, () => ( { x: b.x + b.width / 2, y: b.y + b.height / 2 }));
+    return this.transform(rotateMatrix(degrees, origin), { ids: options.ids, label: "Rotate" });
+  }
+  flip(axis, options = {}) {
+    const b = this.boundsOf(_nullishCoalesce(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 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" });
+  }
+  /**
+   * Aligns the selected nodes to their combined bounds, or to the artboard when one node is
+   * selected (or `to: 'artboard'`).
+   */
+  align(edge, options = {}) {
+    const ids = _nullishCoalesce(options.ids, () => ( this.selectedRoots()));
+    if (!ids.length) return { ok: false, message: "Nothing is selected." };
+    const target = options.to === "artboard" || ids.length === 1 ? { x: 0, y: 0, width: this.doc.width, height: this.doc.height } : this.boundsOf(ids);
+    this.change(`Align ${edge[0].toUpperCase()}${edge.slice(1)}`, () => {
+      for (const id of ids) {
+        const b = this.boundsOf([id]);
+        if (!b) continue;
+        let dx = 0;
+        let dy = 0;
+        if (edge === "left") dx = target.x - b.x;
+        if (edge === "center") dx = target.x + target.width / 2 - (b.x + b.width / 2);
+        if (edge === "right") dx = target.x + target.width - (b.x + b.width);
+        if (edge === "top") dy = target.y - b.y;
+        if (edge === "middle") dy = target.y + target.height / 2 - (b.y + b.height / 2);
+        if (edge === "bottom") dy = target.y + target.height - (b.y + b.height);
+        if (dx || dy) this.doc = this.transformed(this.doc, /* @__PURE__ */ new Set([id]), translateMatrix(dx, dy));
+      }
+    });
+    return { ok: true };
+  }
+  /** Spaces three or more selected nodes evenly (equal gaps). */
+  distribute(direction, options = {}) {
+    const ids = _nullishCoalesce(options.ids, () => ( this.selectedRoots()));
+    const items = ids.map((id) => ({ id, b: this.boundsOf([id]) })).filter((i) => !!i.b);
+    if (items.length < 3) return { ok: false, message: "Select at least three objects to distribute." };
+    const horizontal = direction === "horizontal";
+    const pos = (b) => horizontal ? b.x : b.y;
+    const size = (b) => horizontal ? b.width : b.height;
+    items.sort((a, b) => pos(a.b) - pos(b.b));
+    const first = items[0].b;
+    const last = items[items.length - 1].b;
+    const total = pos(last) + size(last) - pos(first);
+    const gap = (total - items.reduce((s, i) => s + size(i.b), 0)) / (items.length - 1);
+    this.change(horizontal ? "Distribute Horizontally" : "Distribute Vertically", () => {
+      let cursor = pos(first);
+      for (const item of items) {
+        const d = cursor - pos(item.b);
+        if (Math.abs(d) > 1e-9) this.doc = this.transformed(this.doc, /* @__PURE__ */ new Set([item.id]), horizontal ? translateMatrix(d, 0) : translateMatrix(0, d));
+        cursor += size(item.b) + gap;
+      }
+    });
+    return { ok: true };
+  }
+  // -------------------------------------------------------------------------
+  // Structure
+  // -------------------------------------------------------------------------
+  /** Copies the selection (offset by `offset`, default 10, 10) on top of each original. */
+  duplicate(options = {}) {
+    const ids = _nullishCoalesce(options.ids, () => ( this.selectedRoots()));
+    const offset = _nullishCoalesce(options.offset, () => ( { x: 10, y: 10 }));
+    const created = [];
+    if (!ids.length) return created;
+    this.change("Duplicate", () => {
+      this.doc = this.withDuplicates(this.doc, ids, offset, created);
+      this.selection = created;
+      this.anchors = [];
+    });
+    return created;
+  }
+  withDuplicates(doc, ids, offset, created) {
+    const set = new Set(ids);
+    const m = translateMatrix(offset.x, offset.y);
+    const insert = (list) => {
+      const out = [];
+      for (const node of list) {
+        const n = node.type === "group" ? { ...node, children: insert(node.children) } : node;
+        out.push(n);
+        if (set.has(node.id)) {
+          const copy = transformVectorNode(this.freshIds(node), m);
+          created.push(copy.id);
+          out.push(copy);
+        }
+      }
+      return out;
+    };
+    return { ...doc, nodes: insert(doc.nodes) };
+  }
+  /** Groups the selected nodes (they must share a parent). Returns the group id. */
+  group(options = {}) {
+    const ids = _nullishCoalesce(options.ids, () => ( this.selectedRoots()));
+    if (!ids.length) return null;
+    const locs = ids.map((id2) => locateVectorNode(this.doc.nodes, id2));
+    if (locs.some((l) => !l)) return null;
+    const parent = _nullishCoalesce(_optionalChain([locs, 'access', _41 => _41[0], 'access', _42 => _42.parent, 'optionalAccess', _43 => _43.id]), () => ( null));
+    if (locs.some((l) => (_nullishCoalesce(_optionalChain([l, 'access', _44 => _44.parent, 'optionalAccess', _45 => _45.id]), () => ( null))) !== parent)) return null;
+    const id = this.newId();
+    this.change("Group", () => {
+      const set = new Set(ids);
+      const regroup = (list) => {
+        const members = list.filter((n) => set.has(n.id));
+        const top = Math.max(...members.map((m) => list.indexOf(m)));
+        const out = [];
+        list.forEach((n, i) => {
+          if (i === top) out.push({ id, type: "group", name: _nullishCoalesce(options.name, () => ( "Group")), children: members });
+          if (!set.has(n.id)) out.push(n);
+        });
+        return out;
+      };
+      if (parent === null) this.setDoc(regroup(this.doc.nodes));
+      else this.setDoc(mapTree(this.doc.nodes, (n) => n.id === parent && n.type === "group" ? { ...n, children: regroup(n.children) } : n));
+      this.selection = [id];
+      this.anchors = [];
+    });
+    return id;
+  }
+  /** Replaces selected groups with their children. */
+  ungroup(options = {}) {
+    const groups = (_nullishCoalesce(options.ids, () => ( this.selection))).map((id) => this.getNode(id)).filter((n) => _optionalChain([n, 'optionalAccess', _46 => _46.type]) === "group");
+    if (!groups.length) return { ok: false, message: "Select a group to ungroup." };
+    const set = new Set(groups.map((g) => g.id));
+    this.change("Ungroup", () => {
+      const flatten = (list) => {
+        const out = [];
+        let changed = false;
+        for (const n of list) {
+          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: (_nullishCoalesce(c.opacity, () => ( 1))) * opacity } : c));
+          } else if (n.type === "group") {
+            const children = flatten(n.children);
+            if (children !== n.children) changed = true;
+            out.push(children !== n.children ? { ...n, children } : n);
+          } else out.push(n);
+        }
+        return changed ? out : list;
+      };
+      this.setDoc(flatten(this.doc.nodes));
+      this.selection = groups.flatMap((g) => g.children.map((c) => c.id));
+    });
+    return { ok: true };
+  }
+  /** Changes stacking order within each node's parent. */
+  arrange(op, options = {}) {
+    const set = new Set(_nullishCoalesce(options.ids, () => ( this.selectedRoots())));
+    if (!set.size) return { ok: false, message: "Nothing is selected." };
+    const reorder = (list) => {
+      const out = list.map((n) => n.type === "group" ? { ...n, children: reorder(n.children) } : n);
+      if (op === "front") return [...out.filter((n) => !set.has(n.id)), ...out.filter((n) => set.has(n.id))];
+      if (op === "back") return [...out.filter((n) => set.has(n.id)), ...out.filter((n) => !set.has(n.id))];
+      if (op === "forward") {
+        for (let i = out.length - 2; i >= 0; i--) if (set.has(out[i].id) && !set.has(out[i + 1].id)) [out[i], out[i + 1]] = [out[i + 1], out[i]];
+      } else {
+        for (let i = 1; i < out.length; i++) if (set.has(out[i].id) && !set.has(out[i - 1].id)) [out[i], out[i - 1]] = [out[i - 1], out[i]];
+      }
+      return out;
+    };
+    const labels = { front: "Bring to Front", forward: "Bring Forward", backward: "Send Backward", back: "Send to Back" };
+    this.change(labels[op], () => this.setDoc(reorder(this.doc.nodes)));
+    return { ok: true };
+  }
+  /**
+   * Combines the selected paths (two or more) into one with a boolean operation. `subtract`
+   * removes the upper shapes from the lowest one. The result takes the lowest shape's style
+   * and place.
+   */
+  booleanOp(op, options = {}) {
+    const roots = _nullishCoalesce(options.ids, () => ( this.selectedRoots()));
+    const order = [];
+    walkVectorNodes(this.doc.nodes, (n) => {
+      if (roots.includes(n.id)) for (const p of collectPathNodes(n)) order.push(p.id);
+    });
+    const paths = [...new Set(order)].map((id2) => this.getNode(id2));
+    if (paths.length < 2) return null;
+    const result = _chunkM4XE4UMTcjs.pathBoolean.call(void 0, 
+      BOOLEAN_OPS[op],
+      paths.map((p) => ({ path: subpathsToBezier(p.subpaths.filter((s) => s.anchors.length > 1).map((s) => ({ ...s, closed: true }))), fillRule: _nullishCoalesce(p.fillRule, () => ( "nonzero")) }))
+    );
+    const subpaths = bezierToSubpaths(result.path);
+    if (result.error || !subpaths.length) return null;
+    const base = paths[0];
+    const id = this.newId();
+    const node = { ...cloneVectorNode(base), id, name: BOOLEAN_LABELS[op], subpaths };
+    const drop = /* @__PURE__ */ new Set([...paths.map((p) => p.id), ...roots]);
+    const anchorRoot = _nullishCoalesce(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];
+      this.anchors = [];
+      this.editingId = null;
+    });
+    return id;
+  }
+  /** Joins the selected paths into one compound path (subpaths kept, lowest style). */
+  combine(options = {}) {
+    const roots = _nullishCoalesce(options.ids, () => ( this.selectedRoots()));
+    const paths = [];
+    walkVectorNodes(this.doc.nodes, (n) => {
+      if (roots.includes(n.id)) paths.push(...collectPathNodes(n));
+    });
+    if (paths.length < 2) return null;
+    const 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 = _nullishCoalesce(roots.find((r) => findVectorNode([this.getNode(r)], paths[0].id)), () => ( paths[0].id));
+    this.change("Combine", () => {
+      this.setDoc(mapTree(this.doc.nodes, (n) => n.id === first ? node : drop.has(n.id) ? null : n));
+      this.selection = [id];
+      this.anchors = [];
+    });
+    return id;
+  }
+  /** Splits selected compound paths into one path per subpath. */
+  breakApart(options = {}) {
+    const paths = (_nullishCoalesce(options.ids, () => ( this.selection))).map((id) => this.getNode(id)).filter((n) => _optionalChain([n, 'optionalAccess', _47 => _47.type]) === "path" && n.subpaths.length > 1);
+    if (!paths.length) return { ok: false, message: "Select a compound path to break apart." };
+    const created = [];
+    const set = new Set(paths.map((p) => p.id));
+    this.change("Break Apart", () => {
+      const split = (list) => list.flatMap((n) => {
+        if (n.type === "group") return [{ ...n, children: split(n.children) }];
+        if (!set.has(n.id)) return [n];
+        return n.subpaths.map((sp, i) => {
+          const id = i === 0 ? n.id : this.newId();
+          created.push(id);
+          return { ...n, id, subpaths: [sp] };
+        });
+      });
+      this.setDoc(split(this.doc.nodes));
+      this.selection = created;
+    });
+    return { ok: true };
+  }
+  // -------------------------------------------------------------------------
+  // Anchor editing
+  // -------------------------------------------------------------------------
+  updateAnchors(doc, refs, fn) {
+    const byNode = /* @__PURE__ */ new Map();
+    for (const r of refs) byNode.set(r.nodeId, [..._nullishCoalesce(byNode.get(r.nodeId), () => ( [])), r]);
+    const nodes = mapTree(doc.nodes, (n) => {
+      const list = byNode.get(n.id);
+      if (!list || n.type !== "path" || n.locked) return n;
+      const subpaths = n.subpaths.map((sp, s) => {
+        const hits = list.filter((r) => r.subpath === s);
+        if (!hits.length) return sp;
+        return { closed: sp.closed, anchors: sp.anchors.map((a, i) => hits.some((r) => r.index === i) ? fn(a, { nodeId: n.id, subpath: s, index: i }) : a) };
+      });
+      return { ...n, subpaths };
+    });
+    return nodes === doc.nodes ? doc : { ...doc, nodes };
+  }
+  movedAnchors(doc, refs, dx, dy) {
+    return this.updateAnchors(doc, refs, (a) => translateAnchor(a, dx, dy));
+  }
+  /** Moves one anchor to a position (handles follow). */
+  moveAnchor(ref, to) {
+    const a = getAnchor(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). */
+  moveHandle(ref, to, options = {}) {
+    if (!getAnchor(this.doc, ref)) return { ok: false, message: "There is no such anchor." };
+    this.change("Move Handle", () => {
+      this.doc = this.updateAnchors(this.doc, [ref], (a) => moveAnchorHandle(a, ref.handle, to, options.breakHandles));
+    });
+    return { ok: true };
+  }
+  /** Converts the selected (or given) anchors between corner, smooth and symmetric. */
+  convertAnchors(type, refs = this.anchors) {
+    if (!refs.length) return { ok: false, message: "Select points to convert." };
+    this.change(type === "corner" ? "Make Corner" : "Make Smooth", () => {
+      const nodes = mapTree(this.doc.nodes, (n) => {
+        if (n.type !== "path") return n;
+        const mine = refs.filter((r) => r.nodeId === n.id);
+        if (!mine.length) return n;
+        const subpaths = n.subpaths.map((sp, s) => mine.filter((r) => r.subpath === s).reduce((acc, r) => convertAnchor(acc, r.index, type), sp));
+        return { ...n, subpaths };
+      });
+      this.setDoc(nodes);
+    });
+    return { ok: true };
+  }
+  /** Adds an anchor on the nearest segment of `nodeId` to `point` (shape unchanged). */
+  insertAnchorAt(nodeId, point) {
+    const node = this.getNode(nodeId);
+    if (_optionalChain([node, 'optionalAccess', _48 => _48.type]) !== "path") return null;
+    const hit = nearestSegment(node, point);
+    if (!hit) return null;
+    const { subpath, index } = insertAnchor(node.subpaths[hit.subpath], hit.segment, hit.t);
+    const ref = { nodeId, subpath: hit.subpath, index };
+    this.change("Add Point", () => {
+      this.replaceNode(nodeId, { ...node, subpaths: node.subpaths.map((sp, i) => i === hit.subpath ? subpath : sp) });
+      this.editingId = nodeId;
+      this.anchors = [ref];
+    });
+    return ref;
+  }
+  /** Deletes the selected anchors; empty subpaths and paths go too. */
+  deleteAnchors(refs = this.anchors) {
+    if (!refs.length) return { ok: false, message: "Select points to delete." };
+    this.change("Delete Points", () => {
+      const nodes = mapTree(this.doc.nodes, (n) => {
+        if (n.type !== "path") return n;
+        const mine = refs.filter((r) => r.nodeId === n.id);
+        if (!mine.length) return n;
+        const subpaths = n.subpaths.map((sp, s) => removeAnchors(sp, mine.filter((r) => r.subpath === s).map((r) => r.index))).filter((sp) => sp.anchors.length > 1);
+        return subpaths.length ? { ...n, subpaths } : null;
+      });
+      this.setDoc(nodes);
+      this.anchors = [];
+      this.selection = this.selection.filter((id) => this.getNode(id));
+      if (this.editingId && !this.getNode(this.editingId)) this.editingId = null;
+      if (this.pen && !this.getNode(this.pen.nodeId)) this.pen = null;
+    });
+    return { ok: true };
+  }
+  /** Opens or closes the subpaths that contain selected anchors (or all subpaths of `nodeId`). */
+  setClosed(closed, nodeId) {
+    const targets = nodeId ? (() => {
+      const n = this.getNode(nodeId);
+      return _optionalChain([n, 'optionalAccess', _49 => _49.type]) === "path" ? n.subpaths.map((_, s) => ({ nodeId, subpath: s })) : [];
+    })() : this.anchors.map((r) => ({ nodeId: r.nodeId, subpath: r.subpath }));
+    if (!targets.length) return { ok: false, message: "Select a path or points." };
+    this.change(closed ? "Close Path" : "Open Path", () => {
+      this.setDoc(
+        mapTree(
+          this.doc.nodes,
+          (n) => n.type === "path" && targets.some((t) => t.nodeId === n.id) ? { ...n, subpaths: n.subpaths.map((sp, s) => targets.some((t) => t.nodeId === n.id && t.subpath === s) ? { ...sp, closed } : sp) } : n
+        )
+      );
+    });
+    return { ok: true };
+  }
+  /** Reverses the direction of every subpath of the selected paths. */
+  reversePaths(ids = this.selection) {
+    const set = new Set(ids.flatMap((id) => this.getNode(id) ? collectPathNodes(this.getNode(id)) : []).map((p) => p.id));
+    if (!set.size) return { ok: false, message: "Select a path." };
+    this.change("Reverse Path", () => {
+      this.setDoc(mapTree(this.doc.nodes, (n) => n.type === "path" && set.has(n.id) ? { ...n, subpaths: n.subpaths.map(reverseSubpath) } : n));
+      this.anchors = [];
+    });
+    return { ok: true };
+  }
+  /** Ends the pen path being drawn (a lone anchor is removed). */
+  finishPath() {
+    if (!this.pen) return;
+    const node = this.getNode(this.pen.nodeId);
+    const sp = _optionalChain([node, 'optionalAccess', _50 => _50.subpaths, 'access', _51 => _51[this.pen.subpath]]);
+    const pen = this.pen;
+    this.pen = null;
+    this.pointer = null;
+    if (node && sp && sp.anchors.length < 2) {
+      const subpaths = node.subpaths.filter((_, i) => i !== pen.subpath);
+      this.change("Delete Path", () => {
+        this.replaceNode(node.id, subpaths.length ? { ...node, subpaths } : null);
+        if (!subpaths.length) {
+          this.selection = this.selection.filter((id) => id !== node.id);
+          if (this.editingId === node.id) this.editingId = null;
+        }
+        this.anchors = [];
+      });
+      return;
+    }
+    this.notify();
+  }
+  // -------------------------------------------------------------------------
+  // Clipboard
+  // -------------------------------------------------------------------------
+  /** Copies the selection. Returns JSON text for the system clipboard (or null). */
+  copy() {
+    const nodes = this.selectedRoots().map((id) => this.getNode(id)).filter((n) => !!n).map((n) => cloneVectorNode(n));
+    if (!nodes.length) return null;
+    this.clipboard = nodes;
+    return JSON.stringify({ type: VECTOR_CLIPBOARD_TYPE, nodes });
+  }
+  cut() {
+    const text = this.copy();
+    if (text) this.removeNodes(this.selectedRoots(), { label: "Cut" });
+    return text;
+  }
+  /**
+   * Pastes `text` (from `copy()`, or SVG markup) or the internal clipboard, offset by 10, 10.
+   * Returns the new ids.
+   */
+  paste(text, options = {}) {
+    let nodes = null;
+    if (text) {
+      const trimmed = text.trim();
+      if (trimmed.startsWith("{")) {
+        try {
+          const data = JSON.parse(trimmed);
+          if (_optionalChain([data, 'optionalAccess', _52 => _52.type]) === VECTOR_CLIPBOARD_TYPE && Array.isArray(data.nodes)) nodes = data.nodes;
+        } catch (e2) {
+          nodes = null;
+        }
+      } else if (/<svg[\s>]/i.test(trimmed)) {
+        try {
+          nodes = parseVectorSvg(trimmed).nodes;
+        } catch (e3) {
+          nodes = null;
+        }
+      }
+    } else nodes = this.clipboard;
+    if (!_optionalChain([nodes, 'optionalAccess', _53 => _53.length])) return [];
+    const offset = _nullishCoalesce(options.offset, () => ( (text && !text.trim().startsWith("{") ? { x: 0, y: 0 } : { x: 10, y: 10 })));
+    const copies = nodes.map((n) => transformVectorNode(this.freshIds(n), translateMatrix(offset.x, offset.y)));
+    this.change("Paste", () => {
+      this.setDoc([...this.doc.nodes, ...copies]);
+      this.selection = copies.map((n) => n.id);
+      this.anchors = [];
+    });
+    if (!text) this.clipboard = copies.map((n) => cloneVectorNode(n));
+    return copies.map((n) => n.id);
+  }
+  // -------------------------------------------------------------------------
+  // Undo
+  // -------------------------------------------------------------------------
+  undo() {
+    this.cancelDrag();
+    this.pen = null;
+    return this.history.undo();
+  }
+  redo() {
+    this.cancelDrag();
+    return this.history.redo();
+  }
+  /** Deletes selected anchors (direct tool) or nodes. */
+  deleteSelection() {
+    if (this.tool === "direct" && this.anchors.length) return this.deleteAnchors();
+    return this.removeNodes(this.selectedRoots());
+  }
+  // -------------------------------------------------------------------------
+  // Pointer input
+  // -------------------------------------------------------------------------
+  /** The fields the anchor / handle helpers read, without building a full state. */
+  view() {
+    return { document: this.doc, selection: this.selection, editingId: this.editingId, tool: this.tool, pen: this.pen, selectedAnchors: this.anchors };
+  }
+  tolerance() {
+    return this.hitRadius / this.viewport.zoom;
+  }
+  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 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;
+    return null;
+  }
+  hitHandle(screen) {
+    for (const ref of getVisibleHandles(this.view()).reverse()) {
+      const a = getAnchor(this.doc, ref);
+      const h = _optionalChain([a, 'optionalAccess', _54 => _54[ref.handle]]);
+      if (!h) continue;
+      const s = this.documentToScreen(h);
+      if (Math.hypot(s.x - screen.x, s.y - screen.y) <= this.hitRadius) return ref;
+    }
+    return null;
+  }
+  hitAnchor(screen, refs) {
+    let best = null;
+    let bestD = Infinity;
+    for (const ref of refs) {
+      const a = getAnchor(this.doc, ref);
+      if (!a) continue;
+      const s = this.documentToScreen(a);
+      const d = Math.hypot(s.x - screen.x, s.y - screen.y);
+      if (d <= this.hitRadius && d < bestD) {
+        best = ref;
+        bestD = d;
+      }
+    }
+    return best;
+  }
+  /** Deepest unlocked visible path under `p`. */
+  hitPath(p) {
+    const tol = this.tolerance();
+    const search = (list) => {
+      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);
+          if (found) return found;
+        } else if (hitTestVectorNode(n, p, tol)) return n;
+      }
+      return null;
+    };
+    return search(this.doc.nodes);
+  }
+  /** Endpoints of open subpaths of unlocked visible paths (pen tool resumes from them). */
+  openEndpoints() {
+    const out = [];
+    walkVectorNodes(this.doc.nodes, (n) => {
+      if (n.type !== "path" || n.locked || n.visible === false) return;
+      n.subpaths.forEach((sp, s) => {
+        if (sp.closed || sp.anchors.length < 1) return;
+        out.push({ nodeId: n.id, subpath: s, index: 0 });
+        if (sp.anchors.length > 1) out.push({ nodeId: n.id, subpath: s, index: sp.anchors.length - 1 });
+      });
+    });
+    return out;
+  }
+  computeHover(screen) {
+    const p = this.screenToDocument(screen);
+    switch (this.tool) {
+      case "select": {
+        const handle = this.hitTransformHandle(screen);
+        if (handle) return { nodeId: null, transformHandle: handle };
+        const node = hitTestVectorNodes(this.doc.nodes, p, this.tolerance());
+        return node ? { nodeId: node.id } : null;
+      }
+      case "direct": {
+        const handle = this.hitHandle(screen);
+        if (handle) return { nodeId: handle.nodeId, handle };
+        const anchor = this.hitAnchor(screen, getVisibleAnchors(this.view()));
+        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 path = this.hitPath(p);
+        return path ? { nodeId: path.id } : null;
+      }
+      case "pen": {
+        const refs = this.pen ? [{ nodeId: this.pen.nodeId, subpath: this.pen.subpath, index: 0 }] : this.openEndpoints();
+        const anchor = this.hitAnchor(screen, refs);
+        return anchor ? { nodeId: anchor.nodeId, anchor } : null;
+      }
+      default:
+        return null;
+    }
+  }
+  sameHover(a, b) {
+    return JSON.stringify(a) === JSON.stringify(b);
+  }
+  /** Primary button down on the canvas at `screen` (pixels relative to the canvas). */
+  pointerDown(screen, input = {}) {
+    this.cancelDrag();
+    if (input.button === 1 || this.spaceHeld) {
+      this.drag = { kind: "pan", start: screen, viewport: this.viewport };
+      this.interaction = { type: "pan" };
+      this.notify();
+      return;
+    }
+    if (input.button !== void 0 && input.button !== 0) return;
+    const p = this.screenToDocument(screen);
+    this.pointer = p;
+    switch (this.tool) {
+      case "select":
+        return this.downSelect(screen, p, input);
+      case "direct":
+        return this.downDirect(screen, p, input);
+      case "pen":
+        return this.downPen(screen, p, input);
+      case "pencil":
+        return this.downPencil(p);
+      default:
+        return this.downShape(p);
+    }
+  }
+  downSelect(screen, p, input) {
+    const handle = this.hitTransformHandle(screen);
+    if (handle) {
+      const bounds = this.boundsOf(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 };
+      this.interaction = handle === "rotate" ? { type: "rotate", angle: 0 } : { type: "scale", handle, sx: 1, sy: 1 };
+      this.notify();
+      return;
+    }
+    const node = hitTestVectorNodes(this.doc.nodes, p, this.tolerance());
+    if (node) {
+      const selected = this.selection.includes(node.id);
+      if (input.shift) {
+        this.selection = selected ? this.selection.filter((id) => id !== node.id) : [...this.selection, node.id];
+        if (selected) {
+          this.notify();
+          return;
+        }
+      } else if (!selected) this.selection = [node.id];
+      this.anchors = [];
+      const before = this.snapshot();
+      this.drag = {
+        kind: "move",
+        start: p,
+        origin: this.boundsOf(this.selectedRoots()),
+        before,
+        base: this.doc,
+        moved: false,
+        duplicated: false,
+        clickId: selected && !input.shift ? node.id : null
+      };
+      this.notify();
+      return;
+    }
+    if (!input.shift) this.selection = [];
+    this.drag = { kind: "marquee", start: p, base: this.selection, baseAnchors: [], anchorsMode: false };
+    this.interaction = { type: "marquee", bounds: { x: p.x, y: p.y, width: 0, height: 0 } };
+    this.notify();
+  }
+  downDirect(screen, p, input) {
+    const handle = this.hitHandle(screen);
+    if (handle) {
+      this.drag = { kind: "handle", ref: handle, before: this.snapshot(), base: this.doc };
+      this.interaction = { type: "handle", ref: handle };
+      this.notify();
+      return;
+    }
+    const anchor = this.hitAnchor(screen, getVisibleAnchors(this.view()));
+    if (anchor) {
+      const selected = this.anchors.some((a) => sameRef(a, anchor));
+      this.editingId = anchor.nodeId;
+      if (input.alt) {
+        this.anchors = [anchor];
+        this.drag = { kind: "pull", ref: anchor, before: this.snapshot(), base: this.doc, label: "Make Smooth", outOnly: false, closing: false, altBreaks: false };
+        this.notify();
+        return;
+      }
+      if (input.shift) {
+        this.anchors = selected ? this.anchors.filter((a) => !sameRef(a, anchor)) : [...this.anchors, anchor];
+        if (selected) {
+          this.notify();
+          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.notify();
+      return;
+    }
+    for (const id of getEditablePathIds(this.view())) {
+      const node = this.getNode(id);
+      const seg = nearestSegment(node, p);
+      if (!seg || seg.distance > this.tolerance()) continue;
+      const sp = node.subpaths[seg.subpath];
+      if (input.alt) {
+        const before = this.snapshot();
+        const { subpath, index } = insertAnchor(sp, seg.segment, seg.t);
+        this.replaceNode(id, { ...node, subpaths: node.subpaths.map((s, i) => i === seg.subpath ? subpath : s) });
+        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.notify(true);
+        return;
+      }
+      const a = { nodeId: id, subpath: seg.subpath, index: seg.segment };
+      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.notify();
+      return;
+    }
+    const path = this.hitPath(p);
+    if (path) {
+      this.editingId = path.id;
+      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.notify();
+      return;
+    }
+    if (!input.shift) {
+      this.anchors = [];
+    }
+    this.drag = { kind: "marquee", start: p, base: this.selection, baseAnchors: this.anchors, anchorsMode: getEditablePathIds(this.view()).length > 0 };
+    this.interaction = { type: "marquee", bounds: { x: p.x, y: p.y, width: 0, height: 0 } };
+    this.notify();
+  }
+  downPen(screen, p, input) {
+    const before = this.snapshot();
+    const sp = this.pen ? _optionalChain([this, 'access', _55 => _55.getNode, 'call', _56 => _56(this.pen.nodeId), 'optionalAccess', _57 => _57.subpaths, 'access', _58 => _58[this.pen.subpath]]) : void 0;
+    if (this.pen && sp) {
+      const pen = this.pen;
+      const first = { nodeId: pen.nodeId, subpath: pen.subpath, index: 0 };
+      if (sp.anchors.length >= 2 && this.hitAnchor(screen, [first])) {
+        const node3 = this.getNode(pen.nodeId);
+        this.replaceNode(pen.nodeId, { ...node3, subpaths: node3.subpaths.map((s, i) => i === pen.subpath ? { ...s, closed: true } : s) });
+        this.drag = { kind: "pull", ref: first, before, base: this.doc, label: "Close Path", outOnly: false, closing: true, altBreaks: true };
+        this.interaction = { type: "pen", nodeId: pen.nodeId };
+        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 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) });
+      const ref2 = { nodeId: pen.nodeId, subpath: pen.subpath, index: anchors.length - 1 };
+      this.anchors = [ref2];
+      this.drag = { kind: "pull", ref: ref2, before, base: this.doc, label: "Add Point", outOnly: false, closing: false, altBreaks: true };
+      this.interaction = { type: "pen", nodeId: pen.nodeId };
+      this.notify(true);
+      return;
+    }
+    const endpoint = this.hitAnchor(screen, this.openEndpoints());
+    if (endpoint) {
+      let node2 = this.getNode(endpoint.nodeId);
+      let index = endpoint.index;
+      if (index === 0 && node2.subpaths[endpoint.subpath].anchors.length > 1) {
+        node2 = { ...node2, subpaths: node2.subpaths.map((s, i) => i === endpoint.subpath ? reverseSubpath(s) : s) };
+        this.replaceNode(node2.id, node2);
+        index = node2.subpaths[endpoint.subpath].anchors.length - 1;
+      }
+      this.pen = { nodeId: node2.id, subpath: endpoint.subpath };
+      this.selection = [node2.id];
+      this.editingId = node2.id;
+      const ref2 = { nodeId: node2.id, subpath: endpoint.subpath, index };
+      this.anchors = [ref2];
+      this.drag = { kind: "pull", ref: ref2, before, base: this.doc, label: "Continue Path", outOnly: true, closing: false, altBreaks: true };
+      this.interaction = { type: "pen", nodeId: node2.id };
+      this.notify(this.doc !== before.doc);
+      return;
+    }
+    const pt = this.snapPoint(p);
+    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 };
+    this.selection = [node.id];
+    this.editingId = node.id;
+    const ref = { nodeId: node.id, subpath: 0, index: 0 };
+    this.anchors = [ref];
+    this.drag = { kind: "pull", ref, before, base: this.doc, label: "Start Path", outOnly: false, closing: false, altBreaks: true };
+    this.interaction = { type: "pen", nodeId: node.id };
+    this.notify(true);
+  }
+  downPencil(p) {
+    const before = this.snapshot();
+    const node = {
+      id: this.newId(),
+      type: "path",
+      name: "Pencil",
+      ...this.styleFor(true),
+      strokeLinecap: _nullishCoalesce(this.defaults.strokeLinecap, () => ( "round")),
+      strokeLinejoin: _nullishCoalesce(this.defaults.strokeLinejoin, () => ( "round")),
+      subpaths: [{ anchors: [{ x: p.x, y: p.y }], closed: false }]
+    };
+    this.setDoc([...this.doc.nodes, node]);
+    this.drag = { kind: "pencil", nodeId: node.id, points: [[p.x, p.y]], before };
+    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) {
+    const before = this.snapshot();
+    const start = this.snapPoint(p);
+    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.interaction = { type: "draw", tool: this.tool, nodeId: node.id, bounds: { x: start.x, y: start.y, width: 0, height: 0 } };
+    this.notify(true);
+  }
+  /** Pointer moved over the canvas (with or without a button down). */
+  pointerMove(screen, input = {}) {
+    const p = this.screenToDocument(screen);
+    const drag = this.drag;
+    if (!drag) {
+      const hover = this.computeHover(screen);
+      const pointerMatters = this.tool === "pen" && !!this.pen;
+      if (this.sameHover(hover, this.hover) && !pointerMatters) return;
+      this.hover = hover;
+      this.pointer = p;
+      this.notify();
+      return;
+    }
+    this.pointer = p;
+    switch (drag.kind) {
+      case "pan":
+        this.viewport = { ...drag.viewport, x: drag.viewport.x + screen.x - drag.start.x, y: drag.viewport.y + screen.y - drag.start.y };
+        this.notify();
+        return;
+      case "move": {
+        let dx = p.x - drag.start.x;
+        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;
+        if (input.alt && !drag.duplicated) {
+          drag.duplicated = true;
+          const created = [];
+          drag.base = this.withDuplicates(drag.base, this.selectedRoots(), { x: 0, y: 0 }, created);
+          this.selection = created;
+        }
+        ({ dx, dy } = this.snapDelta(dx, dy, drag.origin));
+        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 ids = new Set(this.selectedRoots());
+        this.doc = this.transformed(drag.base, ids, scaleMatrix(sx, sy, origin));
+        this.interaction = { type: "scale", handle: drag.handle, sx, sy };
+        this.notify(true);
+        return;
+      }
+      case "rotate": {
+        const a0 = Math.atan2(drag.start.y - drag.center.y, drag.start.x - drag.center.x);
+        const a1 = Math.atan2(p.y - drag.center.y, p.x - drag.center.x);
+        let angle = (a1 - a0) * 180 / Math.PI;
+        if (input.shift) angle = Math.round(angle / 15) * 15;
+        this.doc = this.transformed(drag.base, new Set(this.selectedRoots()), rotateMatrix(angle, drag.center));
+        this.interaction = { type: "rotate", angle };
+        this.notify(true);
+        return;
+      }
+      case "marquee": {
+        const bounds = boundsFromPoints(drag.start, p);
+        this.interaction = { type: "marquee", bounds };
+        if (drag.anchorsMode) {
+          const inside = getVisibleAnchors(this.view()).filter((r) => {
+            const a = getAnchor(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)))];
+        } else {
+          const hits = this.doc.nodes.filter((n) => !n.locked && n.visible !== false).filter((n) => {
+            const b = vectorNodeBounds(n);
+            return b && boundsIntersect(b, bounds);
+          }).map((n) => n.id);
+          this.selection = [.../* @__PURE__ */ new Set([...drag.base, ...hits])];
+        }
+        this.notify();
+        return;
+      }
+      case "anchors": {
+        let dx = p.x - drag.start.x;
+        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, _nullishCoalesce(lead, () => ( null))));
+        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));
+        this.interaction = { type: "handle", ref: drag.ref };
+        this.notify(true);
+        return;
+      }
+      case "pull": {
+        const anchor = getAnchor(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;
+        }
+        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;
+        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);
+        });
+        this.notify(true);
+        return;
+      }
+      case "shape": {
+        const node = this.getNode(drag.nodeId);
+        if (_optionalChain([node, 'optionalAccess', _59 => _59.type]) !== "path") return;
+        let end = this.snapPoint(p);
+        let start = drag.start;
+        let bounds;
+        if (drag.tool === "line") {
+          if (input.shift) end = constrain45(start, end);
+          if (input.alt) start = { x: 2 * start.x - end.x, y: 2 * start.y - end.y };
+          bounds = { x: start.x, y: start.y, width: end.x - start.x, height: end.y - start.y };
+        } else {
+          let w = end.x - start.x;
+          let h = end.y - start.y;
+          if (input.shift) {
+            const s = Math.max(Math.abs(w), Math.abs(h));
+            w = Math.sign(w || 1) * s;
+            h = Math.sign(h || 1) * s;
+          }
+          if (input.alt) start = { x: start.x - w, y: start.y - h };
+          const x2 = drag.start.x + w;
+          const y2 = drag.start.y + h;
+          bounds = boundsFromPoints(start, { x: x2, y: y2 });
+        }
+        const shaped = this.createShapeNode({ kind: drag.tool, ...bounds });
+        this.replaceNode(drag.nodeId, { ...node, subpaths: shaped.subpaths });
+        this.interaction = { type: "draw", tool: drag.tool, nodeId: drag.nodeId, bounds };
+        this.notify(true);
+        return;
+      }
+      case "pencil": {
+        const last = drag.points[drag.points.length - 1];
+        if (Math.hypot(p.x - last[0], p.y - last[1]) * this.viewport.zoom < 1.5) return;
+        drag.points.push([p.x, p.y]);
+        const node = this.getNode(drag.nodeId);
+        if (_optionalChain([node, 'optionalAccess', _60 => _60.type]) !== "path") return;
+        this.replaceNode(drag.nodeId, { ...node, subpaths: [{ anchors: drag.points.map(([x, y]) => ({ x, y })), closed: false }] });
+        const xs = drag.points.map((q) => q[0]);
+        const ys = drag.points.map((q) => q[1]);
+        this.interaction = {
+          type: "draw",
+          tool: "pencil",
+          nodeId: drag.nodeId,
+          bounds: { x: Math.min(...xs), y: Math.min(...ys), width: Math.max(...xs) - Math.min(...xs), height: Math.max(...ys) - Math.min(...ys) }
+        };
+        this.notify(true);
+        return;
+      }
+    }
+  }
+  /** 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;
+    if (!drag) return;
+    switch (drag.kind) {
+      case "pan":
+      case "marquee":
+        this.notify();
+        return;
+      case "move":
+        if (!drag.moved) {
+          if (drag.clickId) this.selection = [drag.clickId];
+          this.notify();
+          return;
+        }
+        return this.commit(drag.duplicated ? "Duplicate" : "Move", drag.before);
+      case "scale":
+        return this.commit("Scale", drag.before);
+      case "rotate":
+        return this.commit("Rotate", drag.before);
+      case "anchors":
+        if (!drag.moved) {
+          if (drag.clickRef) this.anchors = [drag.clickRef];
+          if (drag.before.doc !== this.doc) return this.commit("Add Point", drag.before);
+          this.notify();
+          return;
+        }
+        return this.commit(drag.before.doc !== drag.base ? "Add Point" : "Move Points", drag.before);
+      case "handle":
+        return this.commit("Move Handle", drag.before);
+      case "pull":
+        if (drag.closing) this.pen = null;
+        return this.commit(drag.label, drag.before);
+      case "shape": {
+        const node = this.getNode(drag.nodeId);
+        const b = node ? vectorNodeBounds(node) : null;
+        const min = 2 / this.viewport.zoom;
+        if (!b || b.width < min && b.height < min) {
+          this.doc = drag.before.doc;
+          this.notify(true);
+          return;
+        }
+        this.selection = [drag.nodeId];
+        this.anchors = [];
+        this.tool = "select";
+        return this.commit(`Draw ${TOOL_LABELS[drag.tool]}`, drag.before);
+      }
+      case "pencil": {
+        const node = this.getNode(drag.nodeId);
+        if (_optionalChain([node, 'optionalAccess', _61 => _61.type]) !== "path" || drag.points.length < 2) {
+          this.doc = drag.before.doc;
+          this.notify(true);
+          return;
+        }
+        const fitted = _chunkM4XE4UMTcjs.fitCubics.call(void 0, drag.points, 1.5 / this.viewport.zoom, { cornerAngleDeg: 60 });
+        const anchors = [];
+        for (const c of fitted) {
+          if (!anchors.length) anchors.push({ x: c.p0[0], y: c.p0[1] });
+          anchors[anchors.length - 1].out = { x: c.p1[0], y: c.p1[1] };
+          anchors.push({ x: c.p3[0], y: c.p3[1], in: { x: c.p2[0], y: c.p2[1] } });
+        }
+        const subpaths = anchors.length > 1 ? bezierToSubpaths(subpathsToBezier([{ anchors, closed: false }])) : node.subpaths;
+        this.replaceNode(drag.nodeId, { ...node, subpaths });
+        this.selection = [drag.nodeId];
+        return this.commit("Draw", drag.before);
+      }
+    }
+  }
+  /** The pointer left the canvas. */
+  pointerLeave() {
+    if (this.drag) return;
+    if (!this.hover && !this.pointer) return;
+    this.hover = null;
+    this.pointer = null;
+    this.notify();
+  }
+  /** Abandons the drag in progress (Escape, lost capture). */
+  cancelDrag() {
+    const drag = this.drag;
+    if (!drag) return;
+    this.drag = null;
+    this.interaction = null;
+    if (drag.kind === "pan") {
+      this.notify();
+      return;
+    }
+    if (drag.kind === "marquee") {
+      this.selection = drag.base;
+      this.anchors = drag.baseAnchors;
+      this.notify();
+      return;
+    }
+    this.restore(drag.before);
+  }
+  /** Double click: select tool enters path editing, direct tool toggles an anchor or adds one. */
+  doubleClick(screen) {
+    const p = this.screenToDocument(screen);
+    if (this.tool === "select") {
+      const path = this.hitPath(p);
+      if (!path) return;
+      this.tool = "direct";
+      this.selection = [path.id];
+      this.editingId = path.id;
+      this.anchors = [];
+      this.notify();
+      return;
+    }
+    if (this.tool === "direct") {
+      const anchor = this.hitAnchor(screen, getVisibleAnchors(this.view()));
+      if (anchor) {
+        const a = getAnchor(this.doc, anchor);
+        this.convertAnchors(a.in || a.out ? "corner" : "smooth", [anchor]);
+        return;
+      }
+      const id = _nullishCoalesce(_optionalChain([this, 'access', _62 => _62.hover, 'optionalAccess', _63 => _63.segment, 'optionalAccess', _64 => _64.nodeId]), () => ( this.editingId));
+      if (id) {
+        const node = this.getNode(id);
+        const seg = node ? nearestSegment(node, p) : null;
+        if (seg && seg.distance <= this.tolerance()) this.insertAnchorAt(id, p);
+      }
+      return;
+    }
+    if (this.tool === "pen") this.finishPath();
+  }
+  // -------------------------------------------------------------------------
+  // Keyboard input
+  // -------------------------------------------------------------------------
+  /**
+   * Handles editor shortcuts. Returns true when the key was used (call `preventDefault`).
+   * Do not forward keys typed into text inputs.
+   */
+  keyDown(input) {
+    const key = input.key;
+    const lower = key.length === 1 ? key.toLowerCase() : key;
+    if (key === " ") {
+      if (!this.spaceHeld) {
+        this.spaceHeld = true;
+        this.notify();
+      }
+      return true;
+    }
+    if (input.mod) {
+      switch (lower) {
+        case "z":
+          input.shift ? this.redo() : this.undo();
+          return true;
+        case "y":
+          this.redo();
+          return true;
+        case "a":
+          this.selectAll();
+          return true;
+        case "d":
+          this.duplicate();
+          return true;
+        case "g":
+          input.shift ? this.ungroup() : this.group();
+          return true;
+        case "]":
+          this.arrange(input.alt ? "front" : "forward");
+          return true;
+        case "[":
+          this.arrange(input.alt ? "back" : "backward");
+          return true;
+        case "=":
+        case "+":
+          this.setViewport({ zoom: this.viewport.zoom * 1.25 });
+          return true;
+        case "-":
+          this.setViewport({ zoom: this.viewport.zoom / 1.25 });
+          return true;
+        case "0":
+          this.setViewport({ zoom: 1 });
+          return true;
+      }
+      return false;
+    }
+    switch (key) {
+      case "Escape":
+        if (this.drag) this.cancelDrag();
+        else if (this.pen) this.finishPath();
+        else if (this.tool === "direct" && this.anchors.length) {
+          this.anchors = [];
+          this.notify();
+        } else if (this.tool !== "select") this.setTool("select");
+        else this.clearSelection();
+        return true;
+      case "Enter":
+        if (this.pen) {
+          this.finishPath();
+          return true;
+        }
+        if (this.tool === "select" && this.selection.length === 1 && _optionalChain([this, 'access', _65 => _65.getNode, 'call', _66 => _66(this.selection[0]), 'optionalAccess', _67 => _67.type]) === "path") {
+          this.tool = "direct";
+          this.editingId = this.selection[0];
+          this.notify();
+          return true;
+        }
+        return false;
+      case "Delete":
+      case "Backspace":
+        if (this.pen) {
+          const node = this.getNode(this.pen.nodeId);
+          const sp = node.subpaths[this.pen.subpath];
+          if (sp.anchors.length > 2) this.deleteAnchors([{ nodeId: node.id, subpath: this.pen.subpath, index: sp.anchors.length - 1 }]);
+          else {
+            this.removeNodes([node.id], { label: "Delete Path" });
+            this.pen = null;
+          }
+          return true;
+        }
+        return this.deleteSelection().ok;
+      case "ArrowLeft":
+      case "ArrowRight":
+      case "ArrowUp":
+      case "ArrowDown": {
+        const step = input.shift ? 10 : 1;
+        const dx = key === "ArrowLeft" ? -step : key === "ArrowRight" ? step : 0;
+        const dy = key === "ArrowUp" ? -step : key === "ArrowDown" ? step : 0;
+        return this.translate(dx, dy).ok;
+      }
+    }
+    if (key.length === 1 && !input.alt) {
+      const tool = TOOL_KEYS[lower];
+      if (tool) {
+        this.setTool(tool);
+        return true;
+      }
+    }
+    return false;
+  }
+  keyUp(input) {
+    if (input.key === " " && this.spaceHeld) {
+      this.spaceHeld = false;
+      this.notify();
+    }
+  }
+}, _class);
+function constrain45(origin, p) {
+  const dx = p.x - origin.x;
+  const dy = p.y - origin.y;
+  const len = Math.hypot(dx, dy);
+  const a = Math.round(Math.atan2(dy, dx) / (Math.PI / 4)) * (Math.PI / 4);
+  return { x: origin.x + Math.cos(a) * len, y: origin.y + Math.sin(a) * len };
+}
+function scaleFor(handle, b, p, mods = {}) {
+  const west = handle.includes("w");
+  const east = handle.includes("e");
+  const north = handle.startsWith("n");
+  const south = handle.startsWith("s");
+  const center = { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+  const origin = mods.alt ? center : { x: west ? b.x + b.width : east ? b.x : center.x, y: north ? b.y + b.height : south ? b.y : center.y };
+  const reachX = mods.alt ? b.width / 2 : b.width;
+  const reachY = mods.alt ? b.height / 2 : b.height;
+  let sx = west || east ? reachX > 1e-9 ? (p.x - origin.x) * (west ? -1 : 1) / reachX : 1 : 1;
+  let sy = north || south ? reachY > 1e-9 ? (p.y - origin.y) * (north ? -1 : 1) / reachY : 1 : 1;
+  if (mods.shift) {
+    if ((west || east) && (north || south)) {
+      const s = Math.max(Math.abs(sx), Math.abs(sy));
+      sx = Math.sign(sx || 1) * s;
+      sy = Math.sign(sy || 1) * s;
+    } else if (west || east) sy = Math.abs(sx);
+    else sx = Math.abs(sy);
+  }
+  return { sx, sy, origin };
+}
+
+// src/vector/render.ts
+var fmt = (n) => Math.round(n * 100) / 100;
+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: _nullishCoalesce(node.opacity, () => ( 1)), children };
+  }
+  const fill = vectorPaintToSvg(node.fill, `${idPrefix}fill-${node.id}`);
+  const stroke = vectorPaintToSvg(node.stroke, `${idPrefix}stroke-${node.id}`);
+  if (fill.gradient) defs.push(fill.gradient);
+  if (stroke.gradient) defs.push(stroke.gradient);
+  return {
+    kind: "path",
+    id: node.id,
+    d: vectorPathData(node),
+    fill: fill.value,
+    stroke: stroke.value,
+    strokeWidth: _nullishCoalesce(node.strokeWidth, () => ( 1)),
+    ...node.strokeLinecap ? { strokeLinecap: node.strokeLinecap } : {},
+    ...node.strokeLinejoin ? { strokeLinejoin: node.strokeLinejoin } : {},
+    ..._optionalChain([node, 'access', _68 => _68.strokeDasharray, 'optionalAccess', _69 => _69.length]) ? { strokeDasharray: node.strokeDasharray.join(" ") } : {},
+    fillRule: _nullishCoalesce(node.fillRule, () => ( "nonzero")),
+    opacity: _nullishCoalesce(node.opacity, () => ( 1))
+  };
+}
+function getVectorSceneRenderData(state, options = {}) {
+  const defs = [];
+  const prefix = _nullishCoalesce(options.idPrefix, () => ( "ve-"));
+  const nodes = state.document.nodes.map((n) => renderNode(n, defs, prefix)).filter((n) => !!n);
+  const v = state.viewport;
+  return {
+    transform: `translate(${fmt(v.x)} ${fmt(v.y)}) scale(${v.zoom})`,
+    width: state.document.width,
+    height: state.document.height,
+    ...state.document.background ? { background: state.document.background } : {},
+    defs,
+    nodes
+  };
+}
+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) => _chunkM4XE4UMTcjs.bezierPathToSvg.call(void 0, _chunkM4XE4UMTcjs.transformBezierPath.call(void 0, subpathsToBezier(p.subpaths), [v.zoom, 0, 0, v.zoom, v.x, v.y]), { precision: 2 })).join(" ");
+}
+function collect(node) {
+  if (node.type === "path") return [node];
+  return node.children.flatMap(collect);
+}
+function getVectorOverlayRenderData(state) {
+  const doc = state.document;
+  const z = state.viewport.zoom;
+  const outlines = [];
+  const seen = /* @__PURE__ */ new Set();
+  const outline = (id, selected2) => {
+    if (seen.has(id)) return;
+    const node = findVectorNode(doc.nodes, id);
+    if (!node || node.visible === false) return;
+    seen.add(id);
+    outlines.push({ id, d: screenOutline(state, node), selected: selected2 });
+  };
+  for (const id of state.selection) outline(id, true);
+  if (state.editingId) outline(state.editingId, true);
+  if (_optionalChain([state, 'access', _70 => _70.hover, 'optionalAccess', _71 => _71.nodeId]) && !state.interaction) outline(state.hover.nodeId, false);
+  let selectionBox = null;
+  if (state.tool === "select" && state.selectionBounds && _optionalChain([state, 'access', _72 => _72.interaction, 'optionalAccess', _73 => _73.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) };
+  }
+  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 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: _nullishCoalesce(a.type, () => ( inferAnchorType(a))), selected: selected(ref), hovered: sameAnchor(_optionalChain([state, 'access', _74 => _74.hover, 'optionalAccess', _75 => _75.anchor]), ref), closes };
+  });
+  if (state.tool === "pen" && !state.pen && _optionalChain([state, 'access', _76 => _76.hover, 'optionalAccess', _77 => _77.anchor])) {
+    const a = getAnchor(doc, state.hover.anchor);
+    if (a) {
+      const s = toScreen(state, a);
+      anchors.push({ ref: state.hover.anchor, x: s.x, y: s.y, type: _nullishCoalesce(a.type, () => ( "corner")), selected: false, hovered: true, closes: false });
+    }
+  }
+  const handles = getVisibleHandles(state).flatMap((ref) => {
+    const a = getAnchor(doc, ref);
+    const h = _optionalChain([a, 'optionalAccess', _78 => _78[ref.handle]]);
+    if (!a || !h) return [];
+    const s = toScreen(state, h);
+    const sa = toScreen(state, a);
+    const hovered = !!_optionalChain([state, 'access', _79 => _79.hover, 'optionalAccess', _80 => _80.handle]) && sameAnchor(state.hover.handle, ref) && state.hover.handle.handle === ref.handle;
+    return [{ ref, x: s.x, y: s.y, anchorX: sa.x, anchorY: sa.y, hovered }];
+  });
+  let marquee = null;
+  if (_optionalChain([state, 'access', _81 => _81.interaction, 'optionalAccess', _82 => _82.type]) === "marquee") {
+    const b = state.interaction.bounds;
+    const tl = toScreen(state, b);
+    marquee = { x: tl.x, y: tl.y, width: b.width * z, height: b.height * z };
+  }
+  let penPreview = null;
+  if (state.tool === "pen" && state.pen && state.pointer && !state.interaction) {
+    const node = findVectorNode(doc.nodes, state.pen.nodeId);
+    const sp = _optionalChain([node, 'optionalAccess', _83 => _83.type]) === "path" ? node.subpaths[state.pen.subpath] : void 0;
+    const last = _optionalChain([sp, 'optionalAccess', _84 => _84.anchors, 'access', _85 => _85[sp.anchors.length - 1]]);
+    if (last) {
+      const a = toScreen(state, last);
+      const p = toScreen(state, state.pointer);
+      const c = last.out ? toScreen(state, last.out) : null;
+      penPreview = c ? `M${fmt(a.x)} ${fmt(a.y)}Q${fmt(c.x)} ${fmt(c.y)} ${fmt(p.x)} ${fmt(p.y)}` : `M${fmt(a.x)} ${fmt(a.y)}L${fmt(p.x)} ${fmt(p.y)}`;
+    }
+  }
+  const origin = toScreen(state, { x: 0, y: 0 });
+  const artboard = { x: origin.x, y: origin.y, width: doc.width * z, height: doc.height * z };
+  let status = null;
+  const it = state.interaction;
+  if (_optionalChain([it, 'optionalAccess', _86 => _86.type]) === "rotate") status = `${Math.round(it.angle)}\xB0`;
+  else if (_optionalChain([it, 'optionalAccess', _87 => _87.type]) === "move" || _optionalChain([it, 'optionalAccess', _88 => _88.type]) === "anchors") status = `\u0394 ${fmt(it.dx)}, ${fmt(it.dy)}`;
+  else if (_optionalChain([it, 'optionalAccess', _89 => _89.type]) === "scale" || _optionalChain([it, 'optionalAccess', _90 => _90.type]) === "draw") {
+    const b = it.type === "draw" ? findVectorNode(doc.nodes, it.nodeId) ? vectorNodeBounds(findVectorNode(doc.nodes, it.nodeId)) : null : state.selectionBounds;
+    if (b) status = `W ${fmt(b.width)} \xD7 H ${fmt(b.height)}`;
+  }
+  return { outlines, selectionBox, anchors, handles, marquee, penPreview, artboard, status };
+}
+var VECTOR_OVERLAY_THEME = {
+  accent: "#0ea5e9",
+  handleFill: "#ffffff",
+  marqueeFill: "rgba(14, 165, 233, 0.08)",
+  transformHandleSize: 8,
+  anchorSize: 7,
+  handleRadius: 3.5
+};
+function toVectorModifiers(event) {
+  return { shift: !!event.shiftKey, alt: !!event.altKey, mod: !!(event.metaKey || event.ctrlKey) };
+}
+function toVectorPointerInput(event) {
+  return { ...toVectorModifiers(event), button: event.button };
+}
+function toVectorKeyInput(event) {
+  return { key: event.key, ...toVectorModifiers(event) };
+}
+function isVectorTextTarget(target) {
+  const el = target;
+  if (!el || typeof el !== "object") return false;
+  const tag = (_nullishCoalesce(el.tagName, () => ( ""))).toUpperCase();
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  return !!el.isContentEditable || _optionalChain([el, 'access', _91 => _91.getAttribute, 'optionalCall', _92 => _92("contenteditable")]) === "true";
+}
+function getVectorSelectionStyle(state) {
+  const paths = [];
+  for (const id of state.selection) {
+    const node = findVectorNode(state.document.nodes, id);
+    if (node) paths.push(...collect(node));
+  }
+  if (!paths.length) return null;
+  const first = paths[0];
+  const same = (get) => paths.every((p) => JSON.stringify(_nullishCoalesce(get(p), () => ( null))) === JSON.stringify(_nullishCoalesce(get(first), () => ( null))));
+  return {
+    fill: _nullishCoalesce(first.fill, () => ( null)),
+    stroke: _nullishCoalesce(first.stroke, () => ( null)),
+    strokeWidth: _nullishCoalesce(first.strokeWidth, () => ( 1)),
+    opacity: _nullishCoalesce(first.opacity, () => ( 1)),
+    mixed: { fill: !same((p) => p.fill), stroke: !same((p) => p.stroke), strokeWidth: !same((p) => _nullishCoalesce(p.strokeWidth, () => ( 1))), opacity: !same((p) => _nullishCoalesce(p.opacity, () => ( 1))) },
+    pathIds: paths.map((p) => p.id)
+  };
+}
+function vectorPaintToHex(paint) {
+  if (typeof paint !== "string") return null;
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(paint.trim());
+  if (!m) return null;
+  const hex = m[1].length === 3 ? m[1].replace(/./g, (c) => c + c) : m[1];
+  return `#${hex.toLowerCase()}`;
+}
+
+// src/vector/commands.ts
+var fail = (message) => {
+  throw new Error(message);
+};
+var IDS = { type: "array", items: { type: "string" }, description: "Node ids (default: the selection)." };
+var PAINT = {
+  description: 'A CSS colour, `null` for none, or a gradient `{ type: "linear", angle, stops: [{ offset, color }] }`.'
+};
+var STYLE_PROPS = {
+  fill: PAINT,
+  stroke: PAINT,
+  strokeWidth: { type: "number", minimum: 0 },
+  strokeLinecap: { type: "string", enum: ["butt", "round", "square"] },
+  strokeLinejoin: { type: "string", enum: ["miter", "round", "bevel"] },
+  strokeDasharray: { type: "array", items: { type: "number" } },
+  fillRule: { type: "string", enum: ["nonzero", "evenodd"] }
+};
+var pickStyle = (params) => {
+  const out = {};
+  for (const key of Object.keys(STYLE_PROPS)) if (params[key] !== void 0) out[key] = params[key];
+  return out;
+};
+var check = (result) => {
+  if (!result.ok) fail(_nullishCoalesce(result.message, () => ( "The command failed.")));
+};
+function createVectorCommands(controller, options = {}) {
+  const prefix = _nullishCoalesce(options.prefix, () => ( "vector."));
+  const group = _nullishCoalesce(options.group, () => ( "Vector"));
+  const base = { group, ...options.scope ? { scope: options.scope } : {} };
+  const hasSelection = () => controller.getState().selection.length ? true : "Nothing is selected.";
+  const ids = (params) => {
+    const list2 = _nullishCoalesce(_optionalChain([params, 'optionalAccess', _93 => _93.ids]), () => ( controller.getState().selection));
+    for (const id of list2) if (!controller.getNode(id)) fail(`There is no node "${id}".`);
+    if (!list2.length) fail("Nothing is selected; pass ids.");
+    return list2;
+  };
+  const enabledFor = (_, params) => _optionalChain([params, 'optionalAccess', _94 => _94.ids, 'optionalAccess', _95 => _95.length]) ? true : hasSelection();
+  const list = () => {
+    const state = controller.getState();
+    const out = [];
+    const visit = (nodes, depth) => {
+      for (const n of nodes) {
+        const b = vectorNodeBounds(n);
+        out.push({
+          id: n.id,
+          type: n.type,
+          ...n.name ? { name: n.name } : {},
+          depth,
+          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,
+          selected: state.selection.includes(n.id),
+          ...n.type === "path" ? { fill: _nullishCoalesce(n.fill, () => ( null)), stroke: _nullishCoalesce(n.stroke, () => ( null)), strokeWidth: _nullishCoalesce(n.strokeWidth, () => ( 1)), d: vectorPathData(n, 2) } : { children: n.children.length }
+        });
+        if (n.type === "group") visit(n.children, depth + 1);
+      }
+    };
+    visit(state.document.nodes, 0);
+    return { width: state.document.width, height: state.document.height, nodes: out, selection: state.selection, tool: state.tool };
+  };
+  return [
+    {
+      ...base,
+      id: `${prefix}list`,
+      label: "List Vector Nodes",
+      readOnly: true,
+      keywords: ["layers", "shapes", "document", "outline"],
+      description: "Lists every node (paths and groups, depth first) with bounds, style, path data and selection.",
+      run: list
+    },
+    {
+      ...base,
+      id: `${prefix}select`,
+      label: "Select Nodes",
+      keywords: ["pick", "choose"],
+      description: "Selects nodes by id (empty list clears the selection).",
+      params: { type: "object", properties: { ids: { type: "array", items: { type: "string" } }, add: { type: "boolean" } }, required: ["ids"] },
+      run: (_ctx, params) => {
+        for (const id of params.ids) if (!controller.getNode(id)) fail(`There is no node "${id}".`);
+        if (!params.ids.length && !params.add) controller.clearSelection();
+        else controller.select(params.ids, { add: params.add });
+        return { selection: controller.getState().selection };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}addShape`,
+      label: "Add Shape\u2026",
+      keywords: ["rectangle", "ellipse", "circle", "polygon", "star", "line", "draw"],
+      description: "Adds a rectangle, ellipse, polygon, star or line in document units, using the current default style unless overridden.",
+      params: {
+        type: "object",
+        properties: {
+          kind: { type: "string", enum: ["rect", "ellipse", "polygon", "star", "line"] },
+          x: { type: "number" },
+          y: { type: "number" },
+          width: { type: "number", description: "For a line: the x offset of its end." },
+          height: { type: "number", description: "For a line: the y offset of its end." },
+          cornerRadius: { type: "number", minimum: 0 },
+          sides: { type: "integer", minimum: 3 },
+          points: { type: "integer", minimum: 3 },
+          innerRatio: { type: "number", minimum: 0, maximum: 1 },
+          name: { type: "string" },
+          ...STYLE_PROPS
+        },
+        required: ["kind", "x", "y", "width", "height"]
+      },
+      undoable: true,
+      run: (_ctx, params) => ({ id: controller.addShape(params) })
+    },
+    {
+      ...base,
+      id: `${prefix}addPath`,
+      label: "Add Path\u2026",
+      keywords: ["svg", "path data", "bezier", "curve"],
+      description: "Adds a path from SVG path data (`d`), in document units.",
+      params: { type: "object", properties: { d: { type: "string" }, name: { type: "string" }, ...STYLE_PROPS }, required: ["d"] },
+      undoable: true,
+      run: (_ctx, params) => {
+        const id = controller.addPath(params.d, { ...pickStyle(params), ...params.name ? { name: params.name } : {} });
+        const node = controller.getNode(id);
+        if (_optionalChain([node, 'optionalAccess', _96 => _96.type]) === "path" && !node.subpaths.length) {
+          controller.undo();
+          fail("The path data has no points.");
+        }
+        return { id };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}setStyle`,
+      label: "Set Style\u2026",
+      keywords: ["fill", "stroke", "colour", "color", "gradient", "width"],
+      description: "Sets fill, stroke and stroke settings of nodes (groups apply to every path inside).",
+      params: { type: "object", properties: { ids: IDS, ...STYLE_PROPS } },
+      enabled: enabledFor,
+      undoable: true,
+      run: (_ctx, params) => {
+        const style = pickStyle(params);
+        if (!Object.keys(style).length) fail("Pass at least one style property.");
+        check(controller.setStyle(style, ids(params)));
+        return { ok: true };
+      }
+    },
+    {
+      ...base,
+      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.",
+      params: {
+        type: "object",
+        properties: { ids: IDS, dx: { type: "number" }, dy: { type: "number" }, sx: { type: "number" }, sy: { type: "number" }, rotate: { type: "number" } }
+      },
+      enabled: enabledFor,
+      undoable: true,
+      run: (_ctx, params) => {
+        const target = ids(params);
+        if (params.dx || params.dy) check(controller.translate(_nullishCoalesce(params.dx, () => ( 0)), _nullishCoalesce(params.dy, () => ( 0)), { ids: target }));
+        if (params.sx !== void 0 || params.sy !== void 0) check(controller.scale(_nullishCoalesce(params.sx, () => ( 1)), _nullishCoalesce(_nullishCoalesce(params.sy, () => ( params.sx)), () => ( 1)), { ids: target }));
+        if (params.rotate) check(controller.rotate(params.rotate, { ids: target }));
+        return { ok: true };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}delete`,
+      label: "Delete",
+      keywords: ["remove"],
+      description: "Deletes nodes.",
+      params: { type: "object", properties: { ids: IDS } },
+      enabled: enabledFor,
+      undoable: true,
+      run: (_ctx, params) => {
+        check(controller.removeNodes(ids(params)));
+        return { ok: true };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}boolean`,
+      label: "Boolean Operation\u2026",
+      keywords: ["union", "unite", "subtract", "intersect", "exclude", "combine", "pathfinder"],
+      description: "Combines two or more paths with union, subtract (upper shapes from the lowest), intersect or exclude.",
+      params: { type: "object", properties: { operation: { type: "string", enum: ["union", "subtract", "intersect", "exclude"] }, ids: IDS }, required: ["operation"] },
+      undoable: true,
+      run: (_ctx, params) => {
+        const id = controller.booleanOp(params.operation, { ids: ids(params) });
+        if (!id) fail("Select at least two overlapping paths (the result was empty).");
+        return { id };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}align`,
+      label: "Align\u2026",
+      keywords: ["left", "right", "center", "top", "bottom", "middle"],
+      description: 'Aligns nodes to their combined bounds, or to the artboard (`to: "artboard"`, or when only one node is given).',
+      params: {
+        type: "object",
+        properties: { edge: { type: "string", enum: ["left", "center", "right", "top", "middle", "bottom"] }, to: { type: "string", enum: ["selection", "artboard"] }, ids: IDS },
+        required: ["edge"]
+      },
+      undoable: true,
+      run: (_ctx, params) => {
+        check(controller.align(params.edge, { ids: ids(params), to: params.to }));
+        return { ok: true };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}distribute`,
+      label: "Distribute\u2026",
+      keywords: ["space", "evenly", "gaps"],
+      description: "Spaces three or more nodes with equal gaps.",
+      params: { type: "object", properties: { direction: { type: "string", enum: ["horizontal", "vertical"] }, ids: IDS }, required: ["direction"] },
+      undoable: true,
+      run: (_ctx, params) => {
+        check(controller.distribute(params.direction, { ids: ids(params) }));
+        return { ok: true };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}arrange`,
+      label: "Arrange\u2026",
+      keywords: ["order", "front", "back", "forward", "backward", "z-index", "stack"],
+      description: "Changes stacking order within each node\u2019s parent.",
+      params: { type: "object", properties: { order: { type: "string", enum: ["front", "forward", "backward", "back"] }, ids: IDS }, required: ["order"] },
+      undoable: true,
+      run: (_ctx, params) => {
+        check(controller.arrange(params.order, { ids: ids(params) }));
+        return { ok: true };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}group`,
+      label: "Group",
+      shortcut: "Mod+G",
+      description: "Groups nodes that share a parent.",
+      params: { type: "object", properties: { ids: IDS, name: { type: "string" } } },
+      enabled: enabledFor,
+      undoable: true,
+      run: (_ctx, params) => {
+        const id = controller.group({ ids: ids(params), name: _optionalChain([params, 'optionalAccess', _97 => _97.name]) });
+        if (!id) fail("Only nodes that share a parent can be grouped.");
+        return { id };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}ungroup`,
+      label: "Ungroup",
+      shortcut: "Mod+Shift+G",
+      description: "Replaces groups with their children.",
+      params: { type: "object", properties: { ids: IDS } },
+      enabled: enabledFor,
+      undoable: true,
+      run: (_ctx, params) => {
+        check(controller.ungroup({ ids: ids(params) }));
+        return { selection: controller.getState().selection };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}setTool`,
+      label: "Choose Tool\u2026",
+      keywords: ["pen", "pencil", "select", "rectangle", "ellipse"],
+      description: "Switches the canvas tool.",
+      params: { type: "object", properties: { tool: { type: "string", enum: [...VECTOR_TOOLS] } }, required: ["tool"] },
+      run: (_ctx, params) => {
+        controller.setTool(params.tool);
+        return { tool: params.tool };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}exportSvg`,
+      label: "Export SVG",
+      readOnly: true,
+      keywords: ["download", "save", "markup"],
+      description: "Returns the document as SVG markup.",
+      params: { type: "object", properties: { precision: { type: "integer", minimum: 0, maximum: 8 } } },
+      run: (_ctx, params) => ({ svg: controller.toSvg({ precision: _optionalChain([params, 'optionalAccess', _98 => _98.precision]) }) })
+    },
+    {
+      ...base,
+      id: `${prefix}importSvg`,
+      label: "Import SVG\u2026",
+      keywords: ["open", "load", "paste", "markup"],
+      description: "Adds the shapes of SVG markup on top of the document (or replaces it with `replace: true`).",
+      params: { type: "object", properties: { svg: { type: "string" }, replace: { type: "boolean" } }, required: ["svg"] },
+      undoable: true,
+      run: (_ctx, params) => {
+        check(params.replace ? controller.loadSvg(params.svg) : controller.importSvg(params.svg));
+        return { nodes: controller.getState().document.nodes.length, selection: controller.getState().selection };
+      }
+    }
+  ];
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.IDENTITY_MATRIX = IDENTITY_MATRIX; exports.KAPPA = KAPPA; exports.VECTOR_CLIPBOARD_TYPE = VECTOR_CLIPBOARD_TYPE; exports.VECTOR_OVERLAY_THEME = VECTOR_OVERLAY_THEME; exports.VECTOR_ROTATE_HANDLE_OFFSET = VECTOR_ROTATE_HANDLE_OFFSET; exports.VECTOR_TOOLS = VECTOR_TOOLS; exports.VECTOR_TOOL_GLYPHS = VECTOR_TOOL_GLYPHS; exports.VECTOR_TOOL_SHORTCUTS = VECTOR_TOOL_SHORTCUTS; exports.VECTOR_TRANSFORM_HANDLES = VECTOR_TRANSFORM_HANDLES; exports.VectorEditorController = VectorEditorController; exports.applyMatrix = applyMatrix; exports.bezierToSubpaths = bezierToSubpaths; exports.boundsFromPoints = boundsFromPoints; exports.boundsIntersect = boundsIntersect; exports.cloneAnchor = cloneAnchor; exports.cloneSubpath = cloneSubpath; exports.cloneVectorDocument = cloneVectorDocument; exports.cloneVectorNode = cloneVectorNode; exports.collectPathNodes = collectPathNodes; exports.convertAnchor = convertAnchor; exports.createVectorCommands = createVectorCommands; exports.ellipseSubpath = ellipseSubpath; exports.findVectorNode = findVectorNode; exports.getAnchor = getAnchor; exports.getEditablePathIds = getEditablePathIds; exports.getTransformHandlePositions = getTransformHandlePositions; exports.getVectorOverlayRenderData = getVectorOverlayRenderData; exports.getVectorSceneRenderData = getVectorSceneRenderData; exports.getVectorSelectionStyle = getVectorSelectionStyle; exports.getVisibleAnchors = getVisibleAnchors; exports.getVisibleHandles = getVisibleHandles; exports.hasPaint = hasPaint; exports.hitTestVectorNode = hitTestVectorNode; exports.hitTestVectorNodes = hitTestVectorNodes; exports.inferAnchorType = inferAnchorType; exports.insertAnchor = insertAnchor; exports.isVectorTextTarget = isVectorTextTarget; exports.lineSubpath = lineSubpath; exports.locateVectorNode = locateVectorNode; exports.moveAnchorHandle = moveAnchorHandle; exports.multiplyMatrices = multiplyMatrices; exports.nearestSegment = nearestSegment; exports.parseSvgTransform = parseSvgTransform; exports.parseVectorSvg = parseVectorSvg; exports.polygonSubpath = polygonSubpath; exports.rectSubpath = rectSubpath; exports.removeAnchors = removeAnchors; exports.reverseSubpath = reverseSubpath; exports.rotateMatrix = rotateMatrix; exports.roundSubpaths = roundSubpaths; exports.scaleFor = scaleFor; exports.scaleMatrix = scaleMatrix; exports.starSubpath = starSubpath; exports.subpathSegment = subpathSegment; exports.subpathSegmentCount = subpathSegmentCount; exports.subpathsToBezier = subpathsToBezier; exports.toVectorKeyInput = toVectorKeyInput; exports.toVectorModifiers = toVectorModifiers; exports.toVectorPointerInput = toVectorPointerInput; exports.transformVectorNode = transformVectorNode; exports.translateAnchor = translateAnchor; exports.translateMatrix = translateMatrix; exports.unionBounds = unionBounds; exports.vectorDocumentToSvg = vectorDocumentToSvg; exports.vectorNodeBounds = vectorNodeBounds; exports.vectorNodeToBezier = vectorNodeToBezier; exports.vectorPaintToHex = vectorPaintToHex; exports.vectorPaintToSvg = vectorPaintToSvg; exports.vectorPathData = vectorPathData; exports.vectorToolLabel = vectorToolLabel; exports.walkVectorNodes = walkVectorNodes;
+//# sourceMappingURL=index.cjs.map