@pixerate/editor 0.33.0 → 0.34.0

package/dist/vector/index.js

@@ -10,12 +10,14 @@ import {
   gradientToSvgDef,
   pathBoolean,
   pointInBezierPath,
+  segmentDerivative,
+  segmentIntersections,
   segmentNearest,
   segmentPoint,
   splitSegment,
   toBezierPath,
   transformBezierPath
-} from "../chunk-GQTXV2EQ.js";
+} from "../chunk-RK6HUKDI.js";
 
 // src/vector/types.ts
 var VECTOR_TOOLS = ["select", "direct", "pen", "pencil", "rect", "ellipse", "polygon", "star", "line"];
@@ -850,7 +852,759 @@ function parseVectorSvg(svg, options = {}) {
   return { width, height, nodes };
 }
 
+// src/vector/snap.ts
+var VECTOR_CONSTRUCTION_ANGLES = [0, 45, 90, 135];
+function constrainToLeave(leave, p) {
+  if (!leave?.constrain) return p;
+  const dx = p.x - leave.at.x;
+  const dy = p.y - leave.at.y;
+  switch (leave.constrain) {
+    case "axis":
+      return Math.abs(dx) > Math.abs(dy) ? { x: p.x, y: leave.at.y } : { x: leave.at.x, y: p.y };
+    case "square": {
+      const s = Math.max(Math.abs(dx), Math.abs(dy));
+      return { x: leave.at.x + Math.sign(dx || 1) * s, y: leave.at.y + Math.sign(dy || 1) * s };
+    }
+    default: {
+      const len = Math.hypot(dx, dy);
+      const a = Math.round(Math.atan2(dy, dx) / (Math.PI / 4)) * (Math.PI / 4);
+      return { x: leave.at.x + Math.cos(a) * len, y: leave.at.y + Math.sin(a) * len };
+    }
+  }
+}
+var BUDGET = 2e4;
+var CROSSING_PAIRS = 32;
+var CURVE_SAMPLES = 48;
+var BISECT = 50;
+var EQUAL = 1e-6;
+function bound(sorted, key, v, strict) {
+  let lo = 0;
+  let hi = sorted.length;
+  while (lo < hi) {
+    const mid = lo + hi >>> 1;
+    const k = key(sorted[mid]);
+    if (strict ? k <= v : k < v) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+}
+function within(sorted, key, v, tol) {
+  return sorted.slice(bound(sorted, key, v - tol, false), bound(sorted, key, v + tol, true));
+}
+var linesNear = (lines, v, tol) => within(lines, (l) => l.v, v, tol);
+var distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+var toPoint = (p) => [p.x, p.y];
+var toVec = (p) => ({ x: p[0], y: p[1] });
+var LABELS = {
+  anchor: "anchor",
+  centre: "centre",
+  intersect: "intersect",
+  perpendicular: "perpendicular",
+  tangent: "tangent",
+  path: "path",
+  construction: "angle",
+  align: "align",
+  spacing: "spacing",
+  size: "size"
+};
+var fmtLength = (n) => String(Math.round(n * 100) / 100);
+function nodeFrame(node, parent, aabb) {
+  const angle = matrixRotation(multiplyMatrices(nodeMatrix(node), parent));
+  const b = angle ? vectorNodeBounds(node, multiplyMatrices(parent, rotateMatrix(-angle))) : aabb !== void 0 ? aabb : vectorNodeBounds(node, parent);
+  if (!b) return null;
+  const c = { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+  return { width: b.width, height: b.height, centre: angle ? applyMatrix(rotateMatrix(angle), c) : c };
+}
+function contains(node, ids) {
+  if (ids.has(node.id)) return true;
+  return node.type === "group" && node.children.some((c) => contains(c, ids));
+}
+var VectorSnapTargets = class _VectorSnapTargets {
+  points = [];
+  xs = [];
+  ys = [];
+  segments = [];
+  /** Bounds of the objects a moved box spaces itself evenly with. */
+  boxes = [];
+  /** Side lengths of the other objects (in their own frames), which a resize may match. */
+  sizes = [];
+  constructor() {
+  }
+  /** How many targets of each sort were gathered. */
+  get counts() {
+    return { points: this.points.length, lines: this.xs.length + this.ys.length, segments: this.segments.length, boxes: this.boxes.length };
+  }
+  /** Targets for moving nodes `ids`: the other art's anchors, bounds and centres, the artboard, and boxes to space evenly with. */
+  static forMove(doc, ids) {
+    return _VectorSnapTargets.collect(doc, new Set(ids), "bounds");
+  }
+  /** Targets for resizing nodes `ids`: as for a move, plus the other objects' sizes. */
+  static forResize(doc, ids) {
+    return _VectorSnapTargets.collect(doc, new Set(ids), "bounds");
+  }
+  /**
+   * Targets for a drawn point (pen, shape tools): the art but `exclude`, its anchors (as
+   * points and in line), centres, edges and segments. The anchors and segments of `exclude`
+   * (the path being drawn, whose bounds grow with it) stay targets.
+   */
+  static forDrawing(doc, exclude = []) {
+    const skip = new Set(exclude);
+    const t = _VectorSnapTargets.collect(doc, skip, "drawing", false);
+    t.pushPaths(doc, skip, () => false, true);
+    return t.index();
+  }
+  /**
+   * Targets for dragging anchors: the other art with its segments, and the anchors and
+   * segments that stay put on the paths being reshaped (their bounds move along, so they are
+   * no targets). The moving anchors are left out.
+   */
+  static forAnchorDrag(doc, anchors) {
+    const moving = /* @__PURE__ */ new Map();
+    for (const r of anchors) {
+      const set = moving.get(r.nodeId) ?? /* @__PURE__ */ new Set();
+      set.add(`${r.subpath}:${r.index}`);
+      moving.set(r.nodeId, set);
+    }
+    const t = _VectorSnapTargets.collect(doc, new Set(moving.keys()), "segments", false);
+    t.pushPaths(doc, new Set(moving.keys()), (id, s, i) => !!moving.get(id)?.has(`${s}:${i}`), true);
+    return t.index();
+  }
+  /**
+   * Targets for dragging a handle of path `nodeId`: the other art and that path's anchors
+   * (its bounds and the segments through the handle move with it, so they would chase it).
+   */
+  static forHandle(doc, nodeId) {
+    const skip = /* @__PURE__ */ new Set([nodeId]);
+    const t = _VectorSnapTargets.collect(doc, skip, "bounds", false);
+    t.pushPaths(doc, skip, () => false, false);
+    return t.index();
+  }
+  /** The anchors of the paths `ids` as targets (on them and in line), and their segments when `segments`. */
+  pushPaths(doc, ids, moving, segments) {
+    let anchors = BUDGET;
+    let segmentBudget = segments ? BUDGET : 0;
+    const visit = (list, parent) => {
+      for (const n of list) {
+        const m = multiplyMatrices(nodeMatrix(n), parent);
+        if (n.type === "group") visit(n.children, m);
+        else if (ids.has(n.id) && n.visible !== false) {
+          n.subpaths.forEach((sp, s) => {
+            sp.anchors.forEach((a, i) => {
+              if (anchors <= 0 || moving(n.id, s, i)) return;
+              this.pushAnchor(applyMatrix(m, a));
+              anchors--;
+            });
+            segmentBudget = this.pushSegments(sp, m, (i) => moving(n.id, s, i), segmentBudget);
+          });
+        }
+      }
+    };
+    visit(doc.nodes, IDENTITY_MATRIX);
+  }
+  pushAnchor(p) {
+    this.points.push({ p, kind: "anchor" });
+    this.xs.push({ v: p.x, from: p, kind: "anchor" });
+    this.ys.push({ v: p.y, from: p, kind: "anchor" });
+  }
+  /** The segments of `sp` (mapped by `m`) that stay put while the anchors `moving` accepts move. */
+  pushSegments(sp, m, moving, budget) {
+    const n = sp.anchors.length;
+    const count = subpathSegmentCount(sp);
+    for (let i = 0; i < count && budget > 0; i++) {
+      if (moving(i) || moving((i + 1) % n)) continue;
+      const seg = subpathSegment(sp, i).map((q) => toPoint(applyMatrix(m, toVec(q))));
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      for (const [x, y] of seg) {
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+      }
+      this.segments.push({ seg, minX, minY, maxX, maxY });
+      budget--;
+    }
+    return budget;
+  }
+  pushRect(r, kind, centre) {
+    const corners = [
+      { x: r.x, y: r.y },
+      { x: r.x + r.width, y: r.y },
+      { x: r.x + r.width, y: r.y + r.height },
+      { x: r.x, y: r.y + r.height }
+    ];
+    for (const p of corners) {
+      this.xs.push({ v: p.x, from: p, kind });
+      this.ys.push({ v: p.y, from: p, kind });
+    }
+    if (centre) {
+      this.points.push({ p: centre, kind: "centre" });
+      this.xs.push({ v: centre.x, from: centre, kind: "centre" });
+      this.ys.push({ v: centre.y, from: centre, kind: "centre" });
+    }
+  }
+  /** Sorts the targets for `within` (stable: of targets alike, the first gathered wins). */
+  index() {
+    this.points.sort((a, b) => a.p.x - b.p.x);
+    this.xs.sort((a, b) => a.v - b.v);
+    this.ys.sort((a, b) => a.v - b.v);
+    return this;
+  }
+  /**
+   * Gathers targets from the artboard and every visible node but `exclude` (and what is inside
+   * those): each leaf's anchors (also as lines for `drawing`), its segments (`segments`,
+   * `drawing`), its bounds' corners as lines and its centre; and the top-level objects' boxes and
+   * sizes (inside a group holding an excluded node, that group's other members).
+   */
+  static collect(doc, exclude, gather, sort = true) {
+    const self = new _VectorSnapTargets();
+    const artboard = { x: 0, y: 0, width: doc.width, height: doc.height };
+    self.pushRect(artboard, "artboard", { x: doc.width / 2, y: doc.height / 2 });
+    let anchors = BUDGET;
+    let segments = BUDGET;
+    const visit = (list, parent) => {
+      for (const n of list) {
+        if (exclude.has(n.id) || n.visible === false) continue;
+        const m = multiplyMatrices(nodeMatrix(n), parent);
+        if (n.type === "group") {
+          visit(n.children, m);
+          continue;
+        }
+        if (anchors <= 0) continue;
+        for (const sp of n.subpaths) {
+          for (const a of sp.anchors) {
+            if (anchors-- <= 0) break;
+            const p = applyMatrix(m, a);
+            if (gather === "drawing") self.pushAnchor(p);
+            else self.points.push({ p, kind: "anchor" });
+          }
+          if (gather !== "bounds") segments = self.pushSegments(sp, m, () => false, segments);
+        }
+        const b = vectorNodeBounds(n, parent);
+        const f = nodeFrame(n, parent, b);
+        if (b) self.pushRect(b, "edge", f?.centre ?? null);
+      }
+    };
+    visit(doc.nodes, IDENTITY_MATRIX);
+    const objects = (list, parent) => {
+      for (const n of list) {
+        if (exclude.has(n.id) || n.visible === false || self.boxes.length >= BUDGET) continue;
+        if (n.type === "group" && contains(n, exclude)) {
+          objects(n.children, multiplyMatrices(nodeMatrix(n), parent));
+          continue;
+        }
+        const b = vectorNodeBounds(n, parent);
+        if (b) self.boxes.push(b);
+        const f = nodeFrame(n, parent, b);
+        if (f) self.sizes.push(f.width, f.height);
+      }
+    };
+    objects(doc.nodes, IDENTITY_MATRIX);
+    return sort ? self.index() : self;
+  }
+  // -------------------------------------------------------------------------
+  // Points
+  // -------------------------------------------------------------------------
+  /** Snaps a single point (see `snapFrom`). */
+  snapPoint(p, tol) {
+    return this.snapFrom(p, null, tol);
+  }
+  /**
+   * Snaps a point `p`, drawn or dragged from `leave` when given. With `leave.constrain` it keeps
+   * to its angle round `leave.at`, sliding along that way into line with the nearest target.
+   * Otherwise it lands, in order, on an anchor or centre, an intersection of two paths, the
+   * perpendicular foot or a tangent point from `leave.at`, a path, a construction guide
+   * through `leave.at` (where a target's line crosses it if one does nearby), or else lines up
+   * with targets on x and y.
+   */
+  snapFrom(p, leave, tol) {
+    const none = (q) => ({ point: q, kind: null, x: false, y: false, lines: [], labels: [] });
+    const at = (q, kind, lines2 = []) => ({
+      point: q,
+      kind,
+      x: true,
+      y: true,
+      lines: lines2,
+      labels: [this.label(q, kind)]
+    });
+    if (leave?.constrain) {
+      const q = constrainToLeave(leave, p);
+      const hit = this.slide(leave.at, { x: q.x - leave.at.x, y: q.y - leave.at.y }, q, tol, true);
+      return hit ? { point: hit.point, x: true, y: true, ...this.linedUp(hit.point, hit.from) } : none(q);
+    }
+    const point = this.nearestPoint(p, tol);
+    if (point) return at(point.p, point.kind);
+    const near = this.segmentsNear(p, tol);
+    const crossing = this.crossing(near, p, tol);
+    if (crossing) return at(crossing, "intersect");
+    if (leave && leave.curves !== false) {
+      const foot = this.curvePoint(near, leave.at, p, tol);
+      if (foot) return at(foot.point, foot.kind, [line("construction", leave.at, foot.point)]);
+    }
+    const on = this.onSegment(near);
+    if (on) return at(on, "path");
+    if (leave?.angles?.length) {
+      const c = construction(leave, p, tol);
+      if (c) {
+        const hit = this.slide(leave.at, c.dir, c.point, tol, false);
+        if (hit) {
+          const lined = this.linedUp(hit.point, hit.from);
+          return { point: hit.point, x: true, y: true, kind: lined.kind, lines: [line("construction", leave.at, hit.point), ...lined.lines], labels: lined.labels };
+        }
+        return { point: c.point, kind: "construction", x: true, y: true, lines: [line("construction", leave.at, c.point)], labels: [] };
+      }
+    }
+    const nearest = (lines2, v) => {
+      let best = null;
+      for (const l of linesNear(lines2, v, tol)) if (!best || Math.abs(l.v - v) < Math.abs(best.v - v)) best = l;
+      return best;
+    };
+    const bx = nearest(this.xs, p.x);
+    const by = nearest(this.ys, p.y);
+    if (!bx && !by) return none(p);
+    const out = { x: bx ? bx.v : p.x, y: by ? by.v : p.y };
+    const lines = [];
+    if (bx) lines.push(line("align", bx.from, { x: out.x, y: out.y }));
+    if (by) lines.push(line("align", by.from, { x: out.x, y: out.y }));
+    return { point: out, kind: "align", x: !!bx, y: !!by, lines, labels: [this.label(out, "align")] };
+  }
+  label(p, kind, text = LABELS[kind]) {
+    return { kind, x: p.x, y: p.y, text };
+  }
+  /** The anchor or centre nearest `p`, within `tol`. */
+  nearestPoint(p, tol) {
+    let best = null;
+    let bestD = Infinity;
+    for (const t of within(this.points, (e) => e.p.x, p.x, tol)) {
+      const d = distance(t.p, p);
+      if (d <= tol && d < bestD) {
+        best = t;
+        bestD = d;
+      }
+    }
+    return best;
+  }
+  /**
+   * Slides `q`, on the line through `at` along `dir` (beyond `at` only for a `ray`), to where
+   * the nearest target line crosses it, at most twice `tol` away: where it lands and the
+   * target point that line comes from.
+   */
+  slide(at, dir, q, tol, ray) {
+    const len2 = dir.x * dir.x + dir.y * dir.y;
+    if (!Number.isFinite(len2) || len2 <= 1e-18) return null;
+    const reach = 2 * tol;
+    let best = null;
+    for (const vertical of [true, false]) {
+      const d = vertical ? dir.x : dir.y;
+      if (Math.abs(d) <= 1e-9) continue;
+      const a = vertical ? at.x : at.y;
+      for (const l of linesNear(vertical ? this.xs : this.ys, vertical ? q.x : q.y, reach)) {
+        const s = (l.v - a) / d;
+        const hit = vertical ? { x: l.v, y: at.y + dir.y * s } : { x: at.x + dir.x * s, y: l.v };
+        const moved = distance(hit, q);
+        if (moved <= reach && (!ray || s > 0) && (!best || moved < best.moved)) best = { moved, point: hit, from: l.from };
+      }
+    }
+    return best && { point: best.point, from: best.from };
+  }
+  /** The guides of a point `q` slid into line with the target at `from`: the line and "align", or the target's own label when `q` sits on it. */
+  linedUp(q, from) {
+    const on = this.nearestPoint(q, 1e-9);
+    if (on) return { kind: on.kind, lines: [], labels: [this.label(on.p, on.kind)] };
+    return { kind: "align", lines: [line("align", from, q)], labels: [this.label(q, "align")] };
+  }
+  /** Target segments whose control box reaches `p` and which pass within `tol` of it, nearest first. */
+  segmentsNear(p, tol) {
+    const out = [];
+    const pt = toPoint(p);
+    for (const s of this.segments) {
+      if (p.x < s.minX - tol || p.x > s.maxX + tol || p.y < s.minY - tol || p.y > s.maxY + tol) continue;
+      const hit = segmentNearest(s.seg, pt);
+      if (hit.distance <= tol) out.push({ seg: s.seg, t: hit.t, distance: hit.distance });
+    }
+    return out.sort((a, b) => a.distance - b.distance);
+  }
+  onSegment(near) {
+    return near.length ? toVec(segmentPoint(near[0].seg, near[0].t)) : null;
+  }
+  /** Where two of the target segments near `p` cross, the crossing nearest `p` within `tol`. */
+  crossing(near, p, tol) {
+    const list = near.slice(0, CROSSING_PAIRS);
+    let best = null;
+    let bestD = Infinity;
+    for (let i = 0; i < list.length; i++) {
+      for (let j = i + 1; j < list.length; j++) {
+        for (const hit of segmentIntersections(list[i].seg, list[j].seg)) {
+          const q = toVec(hit.point);
+          const d = distance(q, p);
+          if (d <= tol && d < bestD) {
+            best = q;
+            bestD = d;
+          }
+        }
+      }
+    }
+    return best;
+  }
+  /**
+   * The foot of a perpendicular, or a tangent point, from `base` on a target segment near `p`
+   * (within `tol` of it): roots of `(B(t) − base) · B′(t)` and `(B(t) − base) × B′(t)`
+   * bracketed by sign changes of samples and narrowed by bisection.
+   */
+  curvePoint(near, base, p, tol) {
+    let best = null;
+    for (const { seg } of near) {
+      for (const kind of ["perpendicular", "tangent"]) {
+        if (kind === "tangent" && seg.length === 2) continue;
+        for (const q of solveOnSegment(seg, base, kind === "perpendicular" ? dotCondition : crossCondition)) {
+          const d = distance(q, p);
+          if (d <= tol && (!best || d < best.d)) best = { point: q, kind, d };
+        }
+      }
+    }
+    return best && { point: best.point, kind: best.kind };
+  }
+  // -------------------------------------------------------------------------
+  // Boxes
+  // -------------------------------------------------------------------------
+  /**
+   * Snaps a moving box `r` (the moved selection's bounds): its edge or centre nearest a target
+   * line on each axis (`axes` limits which may move). With `spacing`, an axis that lines up
+   * with nothing spaces the box evenly in its row or column. Returns the correction and guides.
+   */
+  snapRect(r, tol, options = {}) {
+    const axes = { x: options.axes?.x !== false, y: options.axes?.y !== false };
+    const nearest = (lines, values) => {
+      let best = null;
+      for (const v of values) for (const l of linesNear(lines, v, tol)) if (!best || Math.abs(l.v - v) < Math.abs(best.d)) best = { d: l.v - v, from: l.from };
+      return best;
+    };
+    const bx = axes.x ? nearest(this.xs, [r.x, r.x + r.width / 2, r.x + r.width]) : null;
+    const by = axes.y ? nearest(this.ys, [r.y, r.y + r.height / 2, r.y + r.height]) : null;
+    const out = { dx: bx?.d ?? 0, dy: by?.d ?? 0, x: !!bx, y: !!by, lines: [], labels: [] };
+    const done = { ...r, x: r.x + out.dx, y: r.y + out.dy };
+    if (bx) {
+      const x = bx.from.x;
+      out.lines.push({ kind: "align", x1: x, y1: Math.min(bx.from.y, done.y), x2: x, y2: Math.max(bx.from.y, done.y + done.height) });
+    }
+    if (by) {
+      const y = by.from.y;
+      out.lines.push({ kind: "align", x1: Math.min(by.from.x, done.x), y1: y, x2: Math.max(by.from.x, done.x + done.width), y2: y });
+    }
+    if (options.spacing && this.boxes.length) {
+      for (const horizontal of [true, false]) {
+        if (horizontal ? out.x || !axes.x : out.y || !axes.y) continue;
+        const moved = { ...r, x: r.x + out.dx, y: r.y + out.dy };
+        const even = this.evenSpacing(moved, horizontal, tol);
+        if (!even) continue;
+        if (horizontal) {
+          out.dx += even.shift;
+          out.x = true;
+        } else {
+          out.dy += even.shift;
+          out.y = true;
+        }
+        for (const gap of even.gaps) this.gapMarks(gap, horizontal, tol, out);
+      }
+    }
+    if (bx || by) out.labels.unshift(this.label({ x: r.x + out.dx + r.width / 2, y: r.y + out.dy + r.height / 2 }, "align"));
+    return out;
+  }
+  /**
+   * Equal spacing along x (`horizontal`) or y for the moved box `r`, among the objects of its
+   * row (column): the shift within `tol` that centres it between its neighbours, or leaves it
+   * as far from the neighbour before or after it as two other objects of the row are apart;
+   * and the gaps that are equal then, as (start, end, where across).
+   */
+  evenSpacing(r, horizontal, tol) {
+    const span = (b, x) => x ? [b.x, b.x + b.width] : [b.y, b.y + b.height];
+    const [r0, r1] = span(r, horizontal);
+    const len = r1 - r0;
+    const [c0, c1] = span(r, !horizontal);
+    const row = this.boxes.map((b) => ({ b, a0: span(b, horizontal)[0], a1: span(b, horizontal)[1] })).filter((e) => span(e.b, !horizontal)[0] < c1 && span(e.b, !horizontal)[1] > c0 && (e.a1 <= r0 + tol || e.a0 >= r1 - tol)).sort((a, b) => a.a0 - b.a0);
+    if (!row.length) return null;
+    const mid = (a, b) => (Math.max(span(a, !horizontal)[0], span(b, !horizontal)[0]) + Math.min(span(a, !horizontal)[1], span(b, !horizontal)[1])) / 2;
+    const pairs = [];
+    for (const p of row) {
+      const next = bound(row, (e) => e.a0, p.a1, false);
+      const q = row[next];
+      if (!q) continue;
+      const straddles = p.a1 <= r0 + tol && q.a0 >= r1 - tol;
+      if (q.a0 > p.a1 && !straddles) pairs.push({ g: q.a0 - p.a1, gap: [p.a1, q.a0, mid(p.b, q.b)] });
+    }
+    let before = null;
+    let after = null;
+    for (const e of row) {
+      if (e.a1 <= r0 + tol && (!before || e.a1 > before.a1)) before = e;
+      if (e.a0 >= r1 - tol && (!after || e.a0 < after.a0)) after = e;
+    }
+    const starts = [];
+    if (before && after && after.a0 - before.a1 > len) starts.push({ start: (before.a1 + after.a0 - len) / 2, repeats: null });
+    for (const { g } of pairs) {
+      if (before) starts.push({ start: before.a1 + g, repeats: g });
+      if (after) starts.push({ start: after.a0 - g - len, repeats: g });
+    }
+    let pick = null;
+    for (const s of starts) if (Math.abs(s.start - r0) <= tol && (!pick || Math.abs(s.start - r0) < Math.abs(pick.start - r0))) pick = s;
+    if (!pick) return null;
+    const { start, repeats } = pick;
+    const at = horizontal ? { ...r, x: start } : { ...r, y: start };
+    const end = start + len;
+    const gaps = [];
+    if (before && (repeats === null || Math.abs(start - before.a1 - repeats) <= EQUAL)) gaps.push([before.a1, start, mid(before.b, at)]);
+    if (after && (repeats === null || Math.abs(after.a0 - end - repeats) <= EQUAL)) gaps.push([end, after.a0, mid(after.b, at)]);
+    if (repeats !== null) {
+      for (const p of pairs) if (Math.abs(p.g - repeats) <= EQUAL) gaps.push(p.gap);
+    }
+    return { shift: start - r0, gaps };
+  }
+  /** A gap mark: a line across the gap with a tick at each end, and its length as a label. */
+  gapMarks([u0, u1, c], horizontal, tick, out) {
+    const pt = (u, v) => horizontal ? { x: u, y: v } : { x: v, y: u };
+    out.lines.push(line("spacing", pt(u0, c), pt(u1, c)), line("spacing", pt(u0, c - tick), pt(u0, c + tick)), line("spacing", pt(u1, c - tick), pt(u1, c + tick)));
+    out.labels.push(this.label(pt((u0 + u1) / 2, c), "spacing", fmtLength(u1 - u0)));
+  }
+  /** The other objects' side length nearest `length`, within `tol`, or null. */
+  matchSize(length2, tol) {
+    let best = null;
+    for (const s of this.sizes) if (Math.abs(s - length2) <= tol && (best === null || Math.abs(s - length2) < Math.abs(best - length2))) best = s;
+    return best;
+  }
+  /**
+   * Snaps a selection-box resize. `sx / sy` are the scale `scaleFor` gave for dragging
+   * `handle` of `frame` (in the box's own, possibly rotated frame), `mods.shift` keeps the
+   * proportions and `mods.alt` scales about the centre. The handle lands on an anchor or
+   * centre within `tol`, else the corner or the side it moves lines up with the nearest
+   * target, whatever the box's angle; a handle with one way to go (a side, or a proportional
+   * corner) slides along it until one of them is on a target. An axis that snaps to nothing
+   * may match another object's width or height instead.
+   */
+  snapScale(frame, handle, sx, sy, mods, tol) {
+    const toDoc = frame.angle ? rotateMatrix(frame.angle) : IDENTITY_MATRIX;
+    const toLocal = frame.angle ? rotateMatrix(-frame.angle) : IDENTITY_MATRIX;
+    const corner = handle.length === 2;
+    const proportional = !!mods.shift;
+    const centre = { x: frame.x + frame.width / 2, y: frame.y + frame.height / 2 };
+    const origin = mods.alt ? centre : handlePos(opposite(handle), frame);
+    const hp = handlePos(handle, frame);
+    const d0 = { x: hp.x - origin.x, y: hp.y - origin.y };
+    const valid = (n, s) => Number.isFinite(n) && n * s > 0;
+    const nearest = (v, lines) => {
+      let best = null;
+      for (const l of linesNear(lines, v, tol)) if (!best || Math.abs(l.v - v) < Math.abs(best.v - v)) best = l;
+      return best;
+    };
+    let nx = sx;
+    let ny = sy;
+    let snap = { hx: null, hy: null, on: null };
+    if (corner && !proportional) {
+      const p = applyMatrix(toDoc, { x: origin.x + d0.x * sx, y: origin.y + d0.y * sy });
+      const hx = nearest(p.x, this.xs);
+      const hy = nearest(p.y, this.ys);
+      const on = this.nearestPoint(p, tol);
+      const tries = [];
+      if (on) tries.push({ tx: on.p.x, ty: on.p.y, s: { hx: null, hy: null, on } });
+      tries.push({ tx: hx?.v ?? null, ty: hy?.v ?? null, s: { hx, hy, on: null } });
+      tries.push({ tx: hx?.v ?? null, ty: null, s: { hx, hy: null, on: null } });
+      tries.push({ tx: null, ty: hy?.v ?? null, s: { hx: null, hy, on: null } });
+      for (const { tx, ty, s } of tries) {
+        if (tx === null && ty === null) continue;
+        const q = applyMatrix(toLocal, { x: tx ?? p.x, y: ty ?? p.y });
+        let cx = (q.x - origin.x) / d0.x;
+        let cy = (q.y - origin.y) / d0.y;
+        if (!frame.angle) {
+          if (tx === null) cx = sx;
+          if (ty === null) cy = sy;
+        }
+        if (valid(cx, sx) && valid(cy, sy)) {
+          nx = cx;
+          ny = cy;
+          snap = s;
+          break;
+        }
+      }
+    } else {
+      const movesX2 = handle === "e" || handle === "w";
+      let e;
+      let c;
+      let s0;
+      if (corner) [e, c, s0] = [{ x: Math.sign(sx), y: Math.sign(sy) }, { x: 0, y: 0 }, Math.abs(sx)];
+      else if (movesX2) [e, c, s0] = proportional ? [{ x: 1, y: Math.sign(sx) }, { x: 0, y: 0 }, sx] : [{ x: 1, y: 0 }, { x: 0, y: 1 }, sx];
+      else [e, c, s0] = proportional ? [{ x: Math.sign(sy), y: 1 }, { x: 0, y: 0 }, sy] : [{ x: 0, y: 1 }, { x: 1, y: 0 }, sy];
+      const i = RING.indexOf(handle);
+      const ends = corner ? [] : [RING[(i + 1) % 8], RING[(i + 7) % 8]];
+      const travel = Math.hypot(e.x * d0.x, e.y * d0.y);
+      let best = null;
+      const consider = (s, inLine, found2) => {
+        const moved = Math.abs(s - s0) * travel;
+        if (!valid(s, s0) || moved > 2 * tol) return;
+        if (!best || (inLine === best.inLine ? moved < best.moved : !inLine)) best = { s, inLine, moved, snap: found2 };
+      };
+      for (const h of [handle, ...ends]) {
+        const hv = handlePos(h, frame);
+        const v = { x: hv.x - origin.x, y: hv.y - origin.y };
+        const base = applyMatrix(toDoc, { x: origin.x + c.x * v.x, y: origin.y + c.y * v.y });
+        const dir = applyMatrix(toDoc, { x: e.x * v.x, y: e.y * v.y });
+        const p = { x: base.x + dir.x * s0, y: base.y + dir.y * s0 };
+        const l2 = dir.x * dir.x + dir.y * dir.y;
+        const on = l2 > 1e-18 ? this.nearestPoint(p, tol) : null;
+        if (on) consider(((on.p.x - base.x) * dir.x + (on.p.y - base.y) * dir.y) / l2, false, { hx: null, hy: null, on });
+        if (Math.abs(dir.x) > 1e-9) {
+          const hit = nearest(p.x, this.xs);
+          if (hit) consider((hit.v - base.x) / dir.x, true, { hx: hit, hy: null, on: null });
+        }
+        if (Math.abs(dir.y) > 1e-9) {
+          const hit = nearest(p.y, this.ys);
+          if (hit) consider((hit.v - base.y) / dir.y, true, { hx: null, hy: hit, on: null });
+        }
+      }
+      const found = best;
+      if (found) {
+        nx = c.x + found.s * e.x;
+        ny = c.y + found.s * e.y;
+        snap = found.snap;
+      }
+    }
+    const out = { sx: nx, sy: ny, snapped: false, lines: [], labels: [] };
+    const handleAt = () => applyMatrix(toDoc, { x: origin.x + d0.x * out.sx, y: origin.y + d0.y * out.sy });
+    if (snap.on) {
+      out.snapped = true;
+      out.labels.push(this.label(snap.on.p, snap.on.kind));
+      return out;
+    }
+    const movesX = handle !== "n" && handle !== "s";
+    const movesY = handle !== "e" && handle !== "w";
+    const sized = [];
+    if (!proportional) {
+      if (movesX && !snap.hx && !(frame.angle && snap.hy) && frame.width > 1e-9) {
+        const len = this.matchSize(Math.abs(out.sx) * frame.width, tol);
+        if (len !== null && len > 0) {
+          out.sx = Math.sign(out.sx || 1) * (len / frame.width);
+          sized.push("x");
+        }
+      }
+      if (movesY && !snap.hy && !(frame.angle && snap.hx) && frame.height > 1e-9) {
+        const len = this.matchSize(Math.abs(out.sy) * frame.height, tol);
+        if (len !== null && len > 0) {
+          out.sy = Math.sign(out.sy || 1) * (len / frame.height);
+          sized.push("y");
+        }
+      }
+    }
+    const x0 = origin.x + (frame.x - origin.x) * out.sx;
+    const x1 = origin.x + (frame.x + frame.width - origin.x) * out.sx;
+    const y0 = origin.y + (frame.y - origin.y) * out.sy;
+    const y1 = origin.y + (frame.y + frame.height - origin.y) * out.sy;
+    const box = { x0: Math.min(x0, x1), x1: Math.max(x0, x1), y0: Math.min(y0, y1), y1: Math.max(y0, y1) };
+    const page = [
+      { x: box.x0, y: box.y0 },
+      { x: box.x1, y: box.y0 },
+      { x: box.x1, y: box.y1 },
+      { x: box.x0, y: box.y1 }
+    ].map((q) => applyMatrix(toDoc, q));
+    const pminY = Math.min(...page.map((q) => q.y));
+    const pmaxY = Math.max(...page.map((q) => q.y));
+    const pminX = Math.min(...page.map((q) => q.x));
+    const pmaxX = Math.max(...page.map((q) => q.x));
+    if (snap.hx) out.lines.push({ kind: "align", x1: snap.hx.v, y1: Math.min(snap.hx.from.y, pminY), x2: snap.hx.v, y2: Math.max(snap.hx.from.y, pmaxY) });
+    if (snap.hy) out.lines.push({ kind: "align", x1: Math.min(snap.hy.from.x, pminX), y1: snap.hy.v, x2: Math.max(snap.hy.from.x, pmaxX), y2: snap.hy.v });
+    if (snap.hx || snap.hy) {
+      out.snapped = true;
+      out.labels.push(this.label(handleAt(), "align"));
+    }
+    for (const axis of sized) {
+      out.snapped = true;
+      const off = tol * 2;
+      const [a, b] = axis === "x" ? [{ x: box.x0, y: box.y1 + off }, { x: box.x1, y: box.y1 + off }] : [{ x: box.x1 + off, y: box.y0 }, { x: box.x1 + off, y: box.y1 }];
+      const pa = applyMatrix(toDoc, a);
+      const pb = applyMatrix(toDoc, b);
+      out.lines.push(line("size", pa, pb));
+      out.labels.push(this.label({ x: (pa.x + pb.x) / 2, y: (pa.y + pb.y) / 2 }, "size", `${axis === "x" ? "W" : "H"} ${fmtLength(axis === "x" ? box.x1 - box.x0 : box.y1 - box.y0)}`));
+    }
+    return out;
+  }
+};
+var RING = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+function opposite(h) {
+  return RING[(RING.indexOf(h) + 4) % 8];
+}
+function handlePos(h, r) {
+  const x = h.includes("w") ? r.x : h.includes("e") ? r.x + r.width : r.x + r.width / 2;
+  const y = h.startsWith("n") ? r.y : h.startsWith("s") ? r.y + r.height : r.y + r.height / 2;
+  return { x, y };
+}
+function line(kind, a, b) {
+  return { kind, x1: a.x, y1: a.y, x2: b.x, y2: b.y };
+}
+function construction(leave, p, tol) {
+  const v = { x: p.x - leave.at.x, y: p.y - leave.at.y };
+  if (Math.hypot(v.x, v.y) <= tol) return null;
+  let best = null;
+  for (const a of leave.angles ?? []) {
+    const r = a * Math.PI / 180;
+    const exact = (n) => Math.abs(n) < 1e-12 ? 0 : n;
+    const dir = { x: exact(Math.cos(r)), y: exact(-Math.sin(r)) };
+    const k = v.x * dir.x + v.y * dir.y;
+    const point = { x: leave.at.x + dir.x * k, y: leave.at.y + dir.y * k };
+    const d = distance(point, p);
+    if (d <= tol && (!best || d < best.d)) best = { dir, point, d };
+  }
+  return best && { dir: best.dir, point: best.point };
+}
+var dotCondition = (r, d) => r[0] * d[0] + r[1] * d[1];
+var crossCondition = (r, d) => r[0] * d[1] - r[1] * d[0];
+function solveOnSegment(seg, base, cond) {
+  const b = [base.x, base.y];
+  const g = (t) => {
+    const p = segmentPoint(seg, t);
+    return cond([p[0] - b[0], p[1] - b[1]], segmentDerivative(seg, t));
+  };
+  const vals = [];
+  let scale = 0;
+  for (let i = 0; i <= CURVE_SAMPLES; i++) {
+    const t = i / CURVE_SAMPLES;
+    const p = segmentPoint(seg, t);
+    const d = segmentDerivative(seg, t);
+    const r = [p[0] - b[0], p[1] - b[1]];
+    vals.push(cond(r, d));
+    scale = Math.max(scale, Math.hypot(r[0], r[1]) * Math.hypot(d[0], d[1]));
+  }
+  if (!(scale > 0) || vals.every((v) => Math.abs(v) <= scale * 1e-12)) return [];
+  const out = [];
+  for (let i = 0; i < CURVE_SAMPLES; i++) {
+    const ga = vals[i];
+    const gb = vals[i + 1];
+    if (!(Number.isFinite(ga) && Number.isFinite(gb)) || ga > 0 === gb > 0 && ga !== 0) continue;
+    let lo = i / CURVE_SAMPLES;
+    let hi = (i + 1) / CURVE_SAMPLES;
+    let flo = ga;
+    for (let k = 0; k < BISECT; k++) {
+      const m = (lo + hi) / 2;
+      const fm = g(m);
+      if (fm === 0) {
+        lo = hi = m;
+        break;
+      }
+      if (fm > 0 === flo > 0) {
+        lo = m;
+        flo = fm;
+      } else hi = m;
+    }
+    const t = (lo + hi) / 2;
+    const p = segmentPoint(seg, t);
+    const dv = segmentDerivative(seg, t);
+    const r = Math.hypot(p[0] - b[0], p[1] - b[1]);
+    const dl = Math.hypot(dv[0], dv[1]);
+    if (!(r > 1e-9 && dl > 0) || Math.abs(cond([p[0] - b[0], p[1] - b[1]], dv)) > 1e-6 * r * dl) continue;
+    if (!out.some((q) => Math.hypot(q.x - p[0], q.y - p[1]) <= 1e-9 * (1 + r))) out.push({ x: p[0], y: p[1] });
+  }
+  return out;
+}
+
 // src/vector/controller.ts
+var DEFAULT_VECTOR_SNAP = { grid: 0, objects: true, guides: true, threshold: 5, angles: VECTOR_CONSTRUCTION_ANGLES };
 var VECTOR_CLIPBOARD_TYPE = "pixerate/vector";
 var DEFAULT_DEFAULTS = {
   fill: "#d4d4d8",
@@ -1062,6 +1816,11 @@ var VectorEditorController = class {
   pointer = null;
   drag = null;
   interaction = null;
+  guides = null;
+  /** Whether the last `snapDrawn` landed on an object (guides may be hidden). */
+  snappedToObject = false;
+  /** Drawing targets for hovering the pen and shape tools, kept while the document and the excluded path stay the same. */
+  hoverTargets = null;
   spaceHeld = false;
   clipboard = null;
   createId;
@@ -1079,7 +1838,7 @@ var VectorEditorController = class {
     this.tool = options.tool ?? "select";
     this.defaults = { ...DEFAULT_DEFAULTS, ...options.defaults ?? {} };
     this.viewport = { x: 0, y: 0, zoom: 1, ...options.viewport ?? {} };
-    this.snap = { grid: 0, ...options.snap ?? {} };
+    this.snap = { ...DEFAULT_VECTOR_SNAP, ...options.snap ?? {} };
     this.hitRadius = options.hitRadius ?? 6;
     this.createId = options.createId ?? defaultCreateId;
     this.onChange = options.onChange;
@@ -1128,6 +1887,7 @@ var VectorEditorController = class {
       viewport: this.viewport,
       defaults: this.defaults,
       snap: this.snap,
+      guides: this.guides,
       hitRadius: this.hitRadius,
       hover: this.hover,
       cursor: this.cursorFor(),
@@ -1312,6 +2072,7 @@ var VectorEditorController = class {
     this.cancelDrag();
     this.tool = tool;
     this.hover = null;
+    this.guides = null;
     if (tool !== "direct") {
       this.anchors = [];
       this.editingId = null;
@@ -1324,18 +2085,74 @@ var VectorEditorController = class {
   }
   setSnap(snap) {
     this.snap = { ...this.snap, ...snap };
+    if (!this.snap.guides || !this.snap.objects) this.guides = null;
     this.notify();
   }
-  snapPoint(p) {
-    const g = this.snap.grid;
-    if (!g || g <= 0) return p;
-    return { x: Math.round(p.x / g) * g, y: Math.round(p.y / g) * g };
+  /** Turns object snapping on or off (the toolbar's snapping toggle). */
+  toggleSnapping(on = !this.snap.objects) {
+    this.setSnap({ objects: on });
   }
-  snapDelta(dx, dy, origin) {
+  gridValue(v) {
     const g = this.snap.grid;
-    if (!g || g <= 0 || !origin) return { dx, dy };
-    const target = this.snapPoint({ x: origin.x + dx, y: origin.y + dy });
-    return { dx: target.x - origin.x, dy: target.y - origin.y };
+    return g > 0 ? Math.round(v / g) * g : v;
+  }
+  snapPoint(p) {
+    return { x: this.gridValue(p.x), y: this.gridValue(p.y) };
+  }
+  /** The pull distance in document units. */
+  snapTolerance() {
+    return this.snap.threshold / this.viewport.zoom;
+  }
+  setGuides(guides) {
+    this.guides = guides && this.snap.guides && (guides.lines.length || guides.labels.length) ? guides : null;
+  }
+  /**
+   * Where a drawn or dragged point `p` goes: onto the smart guide `targets` (gathered by
+   * `gather` when missing), else onto the grid, kept to `leave`'s constraint. Cmd / Ctrl
+   * bypasses snapping.
+   */
+  snapDrawn(p, leave, input, targets) {
+    this.snappedToObject = false;
+    if (input.mod) {
+      this.setGuides(null);
+      return constrainToLeave(leave, p);
+    }
+    if (this.snap.objects) {
+      const withAngles = leave ? { ...leave, angles: this.snap.angles } : null;
+      const res = targets().snapFrom(p, withAngles, this.snapTolerance());
+      if (res.kind) {
+        this.snappedToObject = true;
+        this.setGuides(res);
+        return leave?.constrain ? res.point : { x: res.x ? res.point.x : this.gridValue(res.point.x), y: res.y ? res.point.y : this.gridValue(res.point.y) };
+      }
+    }
+    this.setGuides(null);
+    return constrainToLeave(leave, this.snapPoint(p));
+  }
+  /** Drawing targets for the pen and shape tools, reused while the document stays the same. */
+  drawingTargets(exclude) {
+    const key = exclude ?? "";
+    const cached = this.hoverTargets;
+    if (cached && cached.doc === this.doc && cached.exclude === key) return cached.targets;
+    const targets = VectorSnapTargets.forDrawing(this.doc, exclude ? [exclude] : []);
+    this.hoverTargets = { doc: this.doc, exclude: key, targets };
+    return targets;
+  }
+  /** Where the pointer at `p` would place a point with the pen or a shape tool (and the guides showing why). */
+  hoverSnap(p, input) {
+    if (this.tool === "pen") {
+      const sp = this.pen ? this.getNode(this.pen.nodeId)?.subpaths[this.pen.subpath] : void 0;
+      if (this.pen && sp && this.hover?.anchor) {
+        this.setGuides(null);
+        return p;
+      }
+      const last = this.pen && sp ? getAnchorWorld(this.doc, { nodeId: this.pen.nodeId, subpath: this.pen.subpath, index: sp.anchors.length - 1 }) : void 0;
+      const leave = last ? { at: { x: last.x, y: last.y }, constrain: input.shift ? "angle" : null } : null;
+      return this.snapDrawn(p, leave, input, () => this.drawingTargets(this.pen?.nodeId ?? null));
+    }
+    if (this.tool !== "select" && this.tool !== "direct" && this.tool !== "pencil") return this.snapDrawn(p, null, input, () => this.drawingTargets(null));
+    this.setGuides(null);
+    return p;
   }
   // -------------------------------------------------------------------------
   // Document
@@ -2251,7 +3068,7 @@ var VectorEditorController = class {
       case "pencil":
         return this.downPencil(p);
       default:
-        return this.downShape(p);
+        return this.downShape(p, input);
     }
   }
   downSelect(screen, p, input) {
@@ -2320,7 +3137,7 @@ var VectorEditorController = class {
           return;
         }
       } else if (!selected) this.anchors = [anchor];
-      this.drag = { kind: "anchors", start: p, before: this.snapshot(), base: this.doc, moved: false, clickRef: selected && !input.shift ? anchor : null };
+      this.drag = { kind: "anchors", start: p, before: this.snapshot(), base: this.doc, moved: false, clickRef: selected && !input.shift ? anchor : null, lead: anchor };
       this.notify();
       return;
     }
@@ -2336,7 +3153,7 @@ var VectorEditorController = class {
         const ref = { nodeId: id, subpath: seg.subpath, index };
         this.anchors = [ref];
         this.editingId = id;
-        this.drag = { kind: "anchors", start: p, before, base: this.doc, moved: true, clickRef: null };
+        this.drag = { kind: "anchors", start: p, before, base: this.doc, moved: true, clickRef: null, lead: ref };
         this.notify(true);
         return;
       }
@@ -2344,7 +3161,7 @@ var VectorEditorController = class {
       const b = { nodeId: id, subpath: seg.subpath, index: (seg.segment + 1) % sp.anchors.length };
       this.anchors = input.shift ? [...this.anchors.filter((r) => !sameRef(r, a) && !sameRef(r, b)), a, b] : [a, b];
       this.editingId = id;
-      this.drag = { kind: "anchors", start: p, before: this.snapshot(), base: this.doc, moved: false, clickRef: null };
+      this.drag = { kind: "anchors", start: p, before: this.snapshot(), base: this.doc, moved: false, clickRef: null, lead: null };
       this.notify();
       return;
     }
@@ -2354,7 +3171,7 @@ var VectorEditorController = class {
       if (!input.shift) this.selection = [path.id];
       else if (!this.selection.includes(path.id)) this.selection = [...this.selection, path.id];
       this.anchors = path.subpaths.flatMap((sp, s) => sp.anchors.map((_, i) => ({ nodeId: path.id, subpath: s, index: i })));
-      this.drag = { kind: "anchors", start: p, before: this.snapshot(), base: this.doc, moved: false, clickRef: null };
+      this.drag = { kind: "anchors", start: p, before: this.snapshot(), base: this.doc, moved: false, clickRef: null, lead: null };
       this.notify();
       return;
     }
@@ -2379,9 +3196,9 @@ var VectorEditorController = class {
         this.notify(true);
         return;
       }
-      let pt2 = this.snapPoint(p);
       const last = getAnchorWorld(this.doc, { nodeId: pen.nodeId, subpath: pen.subpath, index: sp.anchors.length - 1 });
-      if (input.shift) pt2 = constrain45(last, pt2);
+      const leave = { at: { x: last.x, y: last.y }, constrain: input.shift ? "angle" : null };
+      let pt2 = this.snapDrawn(p, leave, input, () => this.drawingTargets(pen.nodeId));
       pt2 = this.toLocal(pen.nodeId, pt2);
       const node2 = this.getNode(pen.nodeId);
       const anchors = [...sp.anchors, { x: pt2.x, y: pt2.y }];
@@ -2412,7 +3229,7 @@ var VectorEditorController = class {
       this.notify(this.doc !== before.doc);
       return;
     }
-    const pt = this.snapPoint(p);
+    const pt = this.snapDrawn(p, null, input, () => this.drawingTargets(null));
     const node = { id: this.newId(), type: "path", name: "Path", ...this.styleFor(true), subpaths: [{ anchors: [{ x: pt.x, y: pt.y }], closed: false }] };
     this.setDoc([...this.doc.nodes, node]);
     this.pen = { nodeId: node.id, subpath: 0 };
@@ -2440,13 +3257,14 @@ var VectorEditorController = class {
     this.interaction = { type: "draw", tool: "pencil", nodeId: node.id, bounds: { x: p.x, y: p.y, width: 0, height: 0 } };
     this.notify(true);
   }
-  downShape(p) {
+  downShape(p, input) {
     const before = this.snapshot();
-    const start = this.snapPoint(p);
+    const targets = this.drawingTargets(null);
+    const start = this.snapDrawn(p, null, input, () => targets);
     const kind = this.tool;
     const node = this.createShapeNode({ kind, x: start.x, y: start.y, width: 0, height: 0 });
     this.setDoc([...this.doc.nodes, node]);
-    this.drag = { kind: "shape", tool: this.tool, start, nodeId: node.id, before };
+    this.drag = { kind: "shape", tool: this.tool, start, nodeId: node.id, before, targets };
     this.interaction = { type: "draw", tool: this.tool, nodeId: node.id, bounds: { x: start.x, y: start.y, width: 0, height: 0 } };
     this.notify(true);
   }
@@ -2457,9 +3275,11 @@ var VectorEditorController = class {
     if (!drag) {
       const hover = this.computeHover(screen);
       const pointerMatters = this.tool === "pen" && !!this.pen;
-      if (this.sameHover(hover, this.hover) && !pointerMatters) return;
+      const guides = this.guides;
       this.hover = hover;
-      this.pointer = p;
+      const pointer = this.hoverSnap(p, input);
+      if (this.sameHover(hover, this.state.hover) && !pointerMatters && JSON.stringify(guides) === JSON.stringify(this.guides)) return;
+      this.pointer = pointer;
       this.notify();
       return;
     }
@@ -2480,8 +3300,9 @@ var VectorEditorController = class {
           const created = [];
           drag.base = this.withDuplicates(drag.base, this.selectedRoots(), { x: 0, y: 0 }, created);
           this.selection = created;
+          drag.targets = void 0;
         }
-        ({ dx, dy } = this.snapDelta(dx, dy, drag.origin));
+        ({ dx, dy } = this.snapMove(drag, dx, dy, input));
         this.doc = this.transformed(drag.base, new Set(this.selectedRoots()), translateMatrix(dx, dy));
         this.interaction = { type: "move", dx, dy };
         this.notify(true);
@@ -2490,7 +3311,13 @@ var VectorEditorController = class {
       case "scale": {
         const angle = drag.frame.angle;
         const q = angle ? applyMatrix(rotateMatrix(-angle), p) : p;
-        const { sx, sy, origin } = scaleFor(drag.handle, drag.frame, q, input);
+        let { sx, sy, origin } = scaleFor(drag.handle, drag.frame, q, input);
+        if (this.snap.objects && !input.mod && drag.handle !== "rotate") {
+          drag.targets ??= VectorSnapTargets.forResize(drag.base, this.selectedRoots());
+          const res = drag.targets.snapScale(drag.frame, drag.handle, sx, sy, input, this.snapTolerance());
+          ({ sx, sy } = res);
+          this.setGuides(res);
+        } else this.setGuides(null);
         const ids = new Set(this.selectedRoots());
         this.doc = this.transformed(drag.base, ids, this.inFrame(angle, scaleMatrix(sx, sy, origin)));
         this.interaction = { type: "scale", handle: drag.handle, sx, sy };
@@ -2531,9 +3358,13 @@ var VectorEditorController = class {
         let dy = p.y - drag.start.y;
         if (!drag.moved && Math.hypot(dx, dy) * this.viewport.zoom < 2) return;
         drag.moved = true;
-        if (input.shift) Math.abs(dx) > Math.abs(dy) ? dy = 0 : dx = 0;
-        const lead = this.anchors.length ? getAnchorWorld(drag.base, this.anchors[0]) : void 0;
-        ({ dx, dy } = this.snapDelta(dx, dy, lead ?? null));
+        const lead = this.leadAnchor(drag);
+        if (lead) {
+          const leave = input.shift ? { at: lead, constrain: "axis", curves: false } : null;
+          const q = this.snapDrawn({ x: lead.x + dx, y: lead.y + dy }, leave, input, () => drag.targets ??= VectorSnapTargets.forAnchorDrag(drag.base, this.anchors));
+          dx = q.x - lead.x;
+          dy = q.y - lead.y;
+        } else if (input.shift) Math.abs(dx) > Math.abs(dy) ? dy = 0 : dx = 0;
         this.doc = this.movedAnchors(drag.base, this.anchors, dx, dy);
         this.interaction = { type: "anchors", dx, dy };
         this.notify(true);
@@ -2541,8 +3372,8 @@ var VectorEditorController = class {
       }
       case "handle": {
         const anchor = getAnchorWorld(drag.base, drag.ref);
-        let pt = this.snapPoint(p);
-        if (input.shift && anchor) pt = constrain45(anchor, pt);
+        const leave = anchor ? { at: { x: anchor.x, y: anchor.y }, constrain: input.shift ? "angle" : null } : null;
+        const pt = this.snapDrawn(p, leave, input, () => drag.targets ??= VectorSnapTargets.forHandle(drag.base, drag.ref.nodeId));
         const local = this.toLocal(drag.ref.nodeId, pt, drag.base);
         this.doc = this.updateAnchors(drag.base, [drag.ref], (a) => moveAnchorHandle(a, drag.ref.handle, local, input.alt));
         this.interaction = { type: "handle", ref: drag.ref };
@@ -2557,6 +3388,7 @@ var VectorEditorController = class {
           this.notify(true);
           return;
         }
+        this.guides = null;
         let pt = p;
         if (input.shift) pt = constrain45(anchor, pt);
         const side = drag.closing ? "in" : "out";
@@ -2571,7 +3403,9 @@ var VectorEditorController = class {
       case "shape": {
         const node = this.getNode(drag.nodeId);
         if (node?.type !== "path") return;
-        let end = this.snapPoint(p);
+        const leave = { at: drag.start, constrain: input.shift ? drag.tool === "line" ? "angle" : "square" : null, curves: false };
+        let end = this.snapDrawn(p, leave, input, () => drag.targets ??= this.drawingTargets(null));
+        if (!this.snappedToObject && drag.tool !== "line" && !input.shift && !input.mod && this.snap.objects && drag.targets) end = this.matchShapeSize(drag.targets, drag.start, end, input.alt);
         let start = drag.start;
         let bounds;
         if (drag.tool === "line") {
@@ -2617,12 +3451,64 @@ var VectorEditorController = class {
       }
     }
   }
+  /** Snaps a move of the selection by (dx, dy): its bounds line up with targets or space evenly, else go to the grid. */
+  snapMove(drag, dx, dy, input) {
+    const origin = drag.origin;
+    if (input.mod || !origin) {
+      this.setGuides(null);
+      return { dx, dy };
+    }
+    const axes = { x: !input.shift || dx !== 0, y: !input.shift || dy !== 0 };
+    let res = null;
+    if (this.snap.objects) {
+      drag.targets ??= VectorSnapTargets.forMove(drag.base, this.selectedRoots());
+      res = drag.targets.snapRect({ ...origin, x: origin.x + dx, y: origin.y + dy }, this.snapTolerance(), { spacing: true, axes });
+    }
+    this.setGuides(res);
+    return {
+      dx: res?.x ? dx + res.dx : axes.x ? this.gridValue(origin.x + dx) - origin.x : dx,
+      dy: res?.y ? dy + res.dy : axes.y ? this.gridValue(origin.y + dy) - origin.y : dy
+    };
+  }
+  /** The anchor a point drag snaps by, where it started: the grabbed one, else the moving one nearest the press. */
+  leadAnchor(drag) {
+    const ref = drag.lead && this.anchors.some((a) => sameRef(a, drag.lead)) ? drag.lead : null;
+    if (ref) {
+      const a = getAnchorWorld(drag.base, ref);
+      return a ? { x: a.x, y: a.y } : null;
+    }
+    let best = null;
+    for (const r of this.anchors) {
+      const a = getAnchorWorld(drag.base, r);
+      if (a && (!best || Math.hypot(a.x - drag.start.x, a.y - drag.start.y) < Math.hypot(best.x - drag.start.x, best.y - drag.start.y))) best = { x: a.x, y: a.y };
+    }
+    return best;
+  }
+  /** A shape's dragged corner moved so its width or height matches another object's, when one is within reach. */
+  matchShapeSize(targets, start, end, fromCentre = false) {
+    const k = fromCentre ? 2 : 1;
+    const tol = this.snapTolerance() * k;
+    const out = { ...end };
+    const guides = { lines: [], labels: [] };
+    for (const axis of ["x", "y"]) {
+      const d = end[axis] - start[axis];
+      const len = Math.abs(d) > 1e-9 ? targets.matchSize(Math.abs(d) * k, tol) : null;
+      if (len === null || len <= 0) continue;
+      out[axis] = start[axis] + Math.sign(d) * len / k;
+      const from = { ...out, [axis]: fromCentre ? 2 * start[axis] - out[axis] : start[axis] };
+      guides.lines.push({ kind: "size", x1: from.x, y1: from.y, x2: out.x, y2: out.y });
+      guides.labels.push({ kind: "size", x: (from.x + out.x) / 2, y: (from.y + out.y) / 2, text: `${axis === "x" ? "W" : "H"} ${Math.round(len * 100) / 100}` });
+    }
+    this.setGuides(guides);
+    return out;
+  }
   /** Primary button released. */
   pointerUp(screen, input = {}) {
     if (screen && this.drag && this.drag.kind !== "pan") this.pointerMove(screen, input);
     const drag = this.drag;
     this.drag = null;
     this.interaction = null;
+    this.guides = null;
     if (!drag) return;
     switch (drag.kind) {
       case "pan":
@@ -2691,9 +3577,10 @@ var VectorEditorController = class {
   /** The pointer left the canvas. */
   pointerLeave() {
     if (this.drag) return;
-    if (!this.hover && !this.pointer) return;
+    if (!this.hover && !this.pointer && !this.guides) return;
     this.hover = null;
     this.pointer = null;
+    this.guides = null;
     this.notify();
   }
   /** Abandons the drag in progress (Escape, lost capture). */
@@ -2702,6 +3589,7 @@ var VectorEditorController = class {
     if (!drag) return;
     this.drag = null;
     this.interaction = null;
+    this.guides = null;
     if (drag.kind === "pan") {
       this.notify();
       return;
@@ -3017,10 +3905,24 @@ function getVectorOverlayRenderData(state) {
     const b = it.type === "draw" ? findVectorNode(doc.nodes, it.nodeId) ? vectorNodeBounds(findVectorNode(doc.nodes, it.nodeId)) : null : state.selectionFrame;
     if (b) status = `W ${fmt(b.width)} \xD7 H ${fmt(b.height)}`;
   }
-  return { outlines, selectionBox, anchors, handles, marquee, penPreview, artboard, status };
+  const guides = { lines: [], labels: [] };
+  if (state.guides) {
+    for (const l of state.guides.lines) {
+      const a = toScreen(state, { x: l.x1, y: l.y1 });
+      const b = toScreen(state, { x: l.x2, y: l.y2 });
+      guides.lines.push({ kind: l.kind, x1: fmt(a.x), y1: fmt(a.y), x2: fmt(b.x), y2: fmt(b.y) });
+    }
+    for (const l of state.guides.labels) {
+      const p = toScreen(state, l);
+      guides.labels.push({ kind: l.kind, x: fmt(p.x), y: fmt(p.y), text: l.text });
+    }
+  }
+  return { outlines, selectionBox, anchors, handles, marquee, penPreview, artboard, guides, status };
 }
 var VECTOR_OVERLAY_THEME = {
   accent: "#0ea5e9",
+  /** Smart guide lines and labels. */
+  guide: "#ff3dfc",
   handleFill: "#ffffff",
   marqueeFill: "rgba(14, 165, 233, 0.08)",
   transformHandleSize: 8,
@@ -3382,9 +4284,11 @@ function createVectorCommands(controller, options = {}) {
   ];
 }
 export {
+  DEFAULT_VECTOR_SNAP,
   IDENTITY_MATRIX,
   KAPPA,
   VECTOR_CLIPBOARD_TYPE,
+  VECTOR_CONSTRUCTION_ANGLES,
   VECTOR_OVERLAY_THEME,
   VECTOR_ROTATE_HANDLE_OFFSET,
   VECTOR_TOOLS,
@@ -3392,6 +4296,7 @@ export {
   VECTOR_TOOL_SHORTCUTS,
   VECTOR_TRANSFORM_HANDLES,
   VectorEditorController,
+  VectorSnapTargets,
   applyMatrix,
   applyMatrixLinear,
   bezierToSubpaths,
@@ -3402,6 +4307,7 @@ export {
   cloneVectorDocument,
   cloneVectorNode,
   collectPathNodes,
+  constrainToLeave,
   convertAnchor,
   createVectorCommands,
   decomposeRigid,