@grida/svg-editor 1.0.0-alpha.2 → 1.0.0-alpha.20

package/dist/dom-Dub-TMoN.mjs

@@ -0,0 +1,4963 @@
+import { S as is_text_input_focused, a as paint, c as hit_shape_svg, d as NudgeDwellWatcher, f as TranslateOrchestrator, h as transform, i as TOOL_CURSOR, l as RotateOrchestrator, m as group, n as insertions, o as ResizeOrchestrator, s as resize_pipeline, t as PathModel, w as default_nudge_handler, x as array_shallow_equal } from "./model-DS5MxDrd.mjs";
+import cmath from "@grida/cmath";
+import { svg_parse } from "@grida/svg/parse";
+import { SVGShapes } from "@grida/svg/pathdata";
+import vn from "@grida/vn";
+import { createTextEditor } from "@grida/text-editor/dom";
+import { NO_MODS, Surface, measurementToHUDDraw, snapGuideToHUDDraw } from "@grida/hud";
+import { cursors } from "@grida/hud/cursors";
+import { measure } from "@grida/cmath/_measurement";
+import { guide, snapToCanvasGeometry } from "@grida/cmath/_snap";
+//#region src/core/camera.ts
+/**
+* Surface-scoped pan/zoom state.
+*
+* The public shape leads with the peer convention (`center` / `zoom` /
+* `bounds`) and keeps the matrix as an advanced read. Methods mirror
+* Figma/Penpot where they overlap.
+*/
+var Camera = class {
+	constructor(opts) {
+		this.viewport_w = 0;
+		this.viewport_h = 0;
+		this.listeners = /* @__PURE__ */ new Set();
+		this._constraints = null;
+		this._transform = opts.initial ?? cmath.transform.identity;
+		this.resolve_bounds = opts.resolve_bounds;
+	}
+	/**
+	* Current viewport constraint, or `null` for free pan/zoom. Set with
+	* `camera.constraints = { type: 'cover', bounds: '<root>', padding: 80 }`
+	* to clamp zoom + pan; assign `null` to clear.
+	*
+	* Constraints are applied synchronously inside `set_transform` (and
+	* `_set_viewport_size`), so every public mutation respects them
+	* automatically — the host never needs to subscribe-and-clamp itself.
+	*/
+	get constraints() {
+		return this._constraints;
+	}
+	set constraints(c) {
+		this._constraints = c;
+		if (c) this.reenforce();
+	}
+	/** Underlying 2D affine. World→screen. */
+	get transform() {
+		return this._transform;
+	}
+	/** Uniform scale factor. 1 = 100 %. */
+	get zoom() {
+		return this._transform[0][0];
+	}
+	/** World-space point currently at viewport center. */
+	get center() {
+		return this.screen_to_world({
+			x: this.viewport_w / 2,
+			y: this.viewport_h / 2
+		});
+	}
+	/** World-space rectangle visible in the viewport. */
+	get bounds() {
+		const tl = this.screen_to_world({
+			x: 0,
+			y: 0
+		});
+		const br = this.screen_to_world({
+			x: this.viewport_w,
+			y: this.viewport_h
+		});
+		return {
+			x: tl.x,
+			y: tl.y,
+			width: br.x - tl.x,
+			height: br.y - tl.y
+		};
+	}
+	/** Translate the camera by a screen-space delta. */
+	pan(delta_screen) {
+		const t = this._transform;
+		this.set_transform([[
+			t[0][0],
+			t[0][1],
+			t[0][2] + delta_screen.x
+		], [
+			t[1][0],
+			t[1][1],
+			t[1][2] + delta_screen.y
+		]]);
+	}
+	/**
+	* Multiply zoom by `factor` keeping `origin_screen` fixed in world space.
+	* Used by wheel-zoom-at-cursor and pinch-zoom.
+	*/
+	zoom_at(factor, origin_screen) {
+		const t = this._transform;
+		const s2 = t[0][0] * factor;
+		const tx2 = origin_screen.x * (1 - factor) + factor * t[0][2];
+		const ty2 = origin_screen.y * (1 - factor) + factor * t[1][2];
+		this.set_transform([[
+			s2,
+			0,
+			tx2
+		], [
+			0,
+			s2,
+			ty2
+		]]);
+	}
+	/** Pan so `c` lands at the viewport center. Zoom unchanged. */
+	set_center(c) {
+		const s = this._transform[0][0];
+		const tx = this.viewport_w / 2 - s * c.x;
+		const ty = this.viewport_h / 2 - s * c.y;
+		this.set_transform([[
+			s,
+			0,
+			tx
+		], [
+			0,
+			s,
+			ty
+		]]);
+	}
+	/** Set zoom directly; pivot defaults to viewport center. */
+	set_zoom(z, pivot_screen) {
+		const current = this._transform[0][0];
+		if (current === 0) return;
+		const factor = z / current;
+		const pivot = pivot_screen ?? {
+			x: this.viewport_w / 2,
+			y: this.viewport_h / 2
+		};
+		this.zoom_at(factor, pivot);
+	}
+	/**
+	* Replace the entire transform.
+	*
+	* Idempotent: when the new transform is element-wise equal to the current
+	* one, this is a no-op (no notification fires). This is the seam that
+	* makes external constraint loops (e.g. "subscribe → compute clamped →
+	* set_transform") terminate: the clamp re-emits the same transform on
+	* the second pass, set_transform short-circuits, no recursion.
+	*
+	* When `camera.constraints` is non-null, the input transform is clamped
+	* synchronously before being stored — every public mutation respects the
+	* constraint automatically.
+	*/
+	set_transform(t) {
+		const next = this.apply_constraints(t);
+		if (transform_equal(this._transform, next)) return;
+		this._transform = next;
+		this.notify();
+	}
+	/** Viewport size in screen pixels. Read by host code computing constraints. */
+	get viewport_size() {
+		return {
+			width: this.viewport_w,
+			height: this.viewport_h
+		};
+	}
+	/**
+	* Fit a target into the viewport.
+	*
+	* - `"<root>"` — the document root's content bounds (host-resolved).
+	* - `"<selection>"` — current editor.state.selection's union bounds.
+	* - `NodeId` — that node's content bounds.
+	* - `Rect` — an explicit world-space rectangle.
+	*
+	* No-ops if the target resolves to `null` (e.g. empty selection) or if
+	* the viewport size is 0 (no container).
+	*/
+	fit(target, opts) {
+		if (this.viewport_w <= 0 || this.viewport_h <= 0) return;
+		const rect = typeof target === "string" ? this.resolve_bounds(target) : target;
+		if (!rect || rect.width <= 0 || rect.height <= 0) return;
+		const margin = opts?.margin ?? 64;
+		const viewport = {
+			x: 0,
+			y: 0,
+			width: this.viewport_w,
+			height: this.viewport_h
+		};
+		this.set_transform(cmath.ext.viewport.transformToFit(viewport, rect, margin));
+	}
+	/** Snap back to identity. */
+	reset() {
+		this.set_transform(cmath.transform.identity);
+	}
+	/**
+	* Subscribe to camera changes. Fires on every mutation. Cheap channel —
+	* does NOT bump `editor.state.version`. Same pattern as
+	* `editor.subscribe_surface_hover`.
+	*/
+	subscribe(cb) {
+		this.listeners.add(cb);
+		return () => {
+			this.listeners.delete(cb);
+		};
+	}
+	/** @internal Surface drives this on container resize. */
+	_set_viewport_size(w, h) {
+		if (w === this.viewport_w && h === this.viewport_h) return;
+		this.viewport_w = w;
+		this.viewport_h = h;
+		if (this._constraints) {
+			const next = this.apply_constraints(this._transform);
+			if (!transform_equal(this._transform, next)) this._transform = next;
+		}
+		this.notify();
+	}
+	/** Convert a screen-space point to world-space. */
+	screen_to_world(p) {
+		const inv = cmath.transform.invert(this._transform);
+		const [wx, wy] = cmath.vector2.transform([p.x, p.y], inv);
+		return {
+			x: wx,
+			y: wy
+		};
+	}
+	/** Convert a world-space point to screen-space. */
+	world_to_screen(p) {
+		const [sx, sy] = cmath.vector2.transform([p.x, p.y], this._transform);
+		return {
+			x: sx,
+			y: sy
+		};
+	}
+	/**
+	* Apply the current constraint (if any) to a candidate transform.
+	* Pure: returns the clamped result, never mutates state. Returns the
+	* input unchanged when constraints are null / bounds are unresolvable /
+	* viewport is 0.
+	*/
+	apply_constraints(t) {
+		if (!this._constraints) return t;
+		if (this.viewport_w <= 0 || this.viewport_h <= 0) return t;
+		switch (this._constraints.type) {
+			case "cover": return clamp_cover(t, this._constraints, this.viewport_w, this.viewport_h, this.resolve_bounds);
+		}
+	}
+	/**
+	* Re-clamp the stored transform against the current constraint. Called
+	* from the `constraints` setter; `_set_viewport_size` has its own
+	* notify-inclusive path.
+	*/
+	reenforce() {
+		if (!this._constraints) return;
+		const next = this.apply_constraints(this._transform);
+		if (transform_equal(this._transform, next)) return;
+		this._transform = next;
+		this.notify();
+	}
+	notify() {
+		for (const cb of this.listeners) cb();
+	}
+};
+/**
+* Clamp a transform under a `'cover'` constraint:
+* - Zoom lower-bounded at fit-with-padding (the slide always fills the
+*   viewport edge-to-edge).
+* - When at min-zoom the slide is locked centered (bounds smaller than
+*   viewport on the constrained axis is impossible above min_zoom; below
+*   is impossible because zoom is clamped up).
+* - When zoomed in, pan is clamped so the slide always covers the viewport
+*   (no black bars).
+*
+* Returns the input transform unchanged when bounds can't be resolved or
+* are degenerate.
+*/
+function clamp_cover(t, c, vp_w, vp_h, resolve) {
+	const bounds = typeof c.bounds === "string" ? resolve(c.bounds) : c.bounds;
+	if (!bounds || bounds.width <= 0 || bounds.height <= 0) return t;
+	const padding = c.padding ?? 0;
+	const eff_w = vp_w - 2 * padding;
+	const eff_h = vp_h - 2 * padding;
+	if (eff_w <= 0 || eff_h <= 0) return t;
+	const min_zoom = Math.min(eff_w / bounds.width, eff_h / bounds.height);
+	const s = Math.max(t[0][0], min_zoom);
+	const sw = s * bounds.width;
+	const sh = s * bounds.height;
+	const o = Math.max(0, c.pan_overshoot ?? 0);
+	const tx = sw > vp_w ? cmath.clamp(t[0][2], vp_w - s * (bounds.x + bounds.width) - o, -s * bounds.x + o) : (vp_w - sw) / 2 - s * bounds.x;
+	const ty = sh > vp_h ? cmath.clamp(t[1][2], vp_h - s * (bounds.y + bounds.height) - o, -s * bounds.y + o) : (vp_h - sh) / 2 - s * bounds.y;
+	return [[
+		s,
+		0,
+		tx
+	], [
+		0,
+		s,
+		ty
+	]];
+}
+function transform_equal(a, b) {
+	return a[0][0] === b[0][0] && a[0][1] === b[0][1] && a[0][2] === b[0][2] && a[1][0] === b[1][0] && a[1][1] === b[1][1] && a[1][2] === b[1][2];
+}
+//#endregion
+//#region src/core/geometry.ts
+/**
+* Caches `bounds_of` results keyed on `NodeId`; full-clears on either
+* `structure_version` or `geometry_version` bump. See ../../docs/geometry.md for
+* why the cache is load-bearing under the surface's per-tick re-render.
+*/
+var MemoizedGeometryProvider = class {
+	constructor(driver, signals) {
+		this.unsubscribers = [];
+		this.cache = /* @__PURE__ */ new Map();
+		this.driver = driver;
+		const invalidate = () => this.cache.clear();
+		this.unsubscribers.push(signals.subscribe_structure(invalidate));
+		this.unsubscribers.push(signals.subscribe_geometry(invalidate));
+	}
+	bounds_of(id) {
+		if (this.cache.has(id)) return this.cache.get(id) ?? null;
+		const r = this.driver.bounds_of(id);
+		this.cache.set(id, r);
+		return r;
+	}
+	bounds_of_many(ids) {
+		const out = /* @__PURE__ */ new Map();
+		const missing = [];
+		for (const id of ids) if (this.cache.has(id)) {
+			const r = this.cache.get(id);
+			if (r) out.set(id, r);
+		} else missing.push(id);
+		if (missing.length > 0) {
+			const fresh = this.driver.bounds_of_many(missing);
+			for (const id of missing) {
+				const r = fresh.get(id) ?? null;
+				this.cache.set(id, r);
+				if (r) out.set(id, r);
+			}
+		}
+		return out;
+	}
+	/**
+	* Pass-through. These are less hot than `bounds_of` (called once per
+	* gesture frame at most) and their result is sensitive to current
+	* viewport state, so caching them would be a footgun.
+	*/
+	nodes_in_rect(rect) {
+		return this.driver.nodes_in_rect(rect);
+	}
+	node_at_point(p) {
+		return this.driver.node_at_point(p);
+	}
+	/** Pass-through. Frame projection depends on live layout, not on the
+	*  bounds cache, so there is nothing to memoize. Falls back to the raw
+	*  delta when the driver can't resolve a frame. */
+	world_delta_to_local(id, delta) {
+		return this.driver.world_delta_to_local?.(id, delta) ?? delta;
+	}
+	/** Unsubscribe from both signals. Call on surface detach. */
+	dispose() {
+		for (const unsub of this.unsubscribers) unsub();
+		this.unsubscribers.length = 0;
+		this.cache.clear();
+	}
+};
+//#endregion
+//#region src/core/hit-shape.ts
+/**
+* Shortest distance from world-space `p` to `shape`. Returns `0` for
+* points strictly inside a filled region (rect / ellipse / polygon
+* interior); the picker treats this as "inside the fill" — an exact
+* hit, no tolerance required.
+*
+* For `path`, this is *edge* distance (no interior test). v1 doesn't
+* model winding-rule fill regions for paths; see docs/wg/feat-svg-editor/hit-test.md.
+*/
+function point_distance_to_shape(p, shape) {
+	const pv = [p.x, p.y];
+	switch (shape.kind) {
+		case "rect": {
+			const r = {
+				x: shape.x,
+				y: shape.y,
+				width: shape.width,
+				height: shape.height
+			};
+			if (cmath.rect.containsPoint(r, pv)) return 0;
+			const [dx, dy] = cmath.rect.offset(r, pv);
+			return Math.hypot(dx, dy);
+		}
+		case "ellipse": {
+			if (shape.rx <= 0 || shape.ry <= 0) return Math.hypot(p.x - shape.cx, p.y - shape.cy);
+			const nx = (p.x - shape.cx) / shape.rx;
+			const ny = (p.y - shape.cy) / shape.ry;
+			const r_norm = Math.hypot(nx, ny);
+			if (r_norm <= 1) return 0;
+			return (r_norm - 1) * Math.min(shape.rx, shape.ry);
+		}
+		case "segment": return cmath.segment.point_distance(pv, [shape.a.x, shape.a.y], [shape.b.x, shape.b.y]);
+		case "polyline": return cmath.polyline.point_distance(pv, shape.pts.map((q) => [q.x, q.y]), false);
+		case "polygon": {
+			const ring = shape.pts.map((q) => [q.x, q.y]);
+			if (ring.length >= 3 && cmath.polygon.pointInPolygon(pv, ring)) return 0;
+			return cmath.polyline.point_distance(pv, ring, true);
+		}
+		case "path": return cmath.polyline.point_distance(pv, shape.pts.map((q) => [q.x, q.y]), shape.closed);
+	}
+}
+/**
+* Topmost node within `tolerance_world` of `p`. Returns `null` if no
+* candidate qualifies.
+*
+* Algorithm:
+*   1. Walk `ordered_ids` topmost-first.
+*   2. AABB pre-filter via `cmath.rect.pad(bounds_of(id), tolerance)`.
+*   3. Distance check via `point_distance_to_shape`.
+*   4. First candidate with `dist <= tolerance` wins.
+*
+* Candidates whose `hit_shape_of` returns `null` are skipped. Candidates
+* whose `bounds_of` returns `null` are skipped.
+*/
+function pick_at_world(p, opts) {
+	const { tolerance_world, ordered_ids, bounds_of, hit_shape_of } = opts;
+	const pv = [p.x, p.y];
+	for (let i = ordered_ids.length - 1; i >= 0; i--) {
+		const id = ordered_ids[i];
+		const bounds = bounds_of(id);
+		if (!bounds) continue;
+		const inflated = cmath.rect.pad(bounds, tolerance_world);
+		if (!cmath.rect.containsPoint(inflated, pv)) continue;
+		const shape = hit_shape_of(id);
+		if (!shape) continue;
+		if (point_distance_to_shape(p, shape) <= tolerance_world) return id;
+	}
+	return null;
+}
+/** Caches `hit_shape_of` results keyed on NodeId; full-clears on either
+*  `structure_version` or `geometry_version` bump. Mirror of
+*  `MemoizedGeometryProvider` in `core/geometry.ts`. */
+var MemoizedHitShapeProvider = class {
+	constructor(driver, signals) {
+		this.unsubscribers = [];
+		this.cache = /* @__PURE__ */ new Map();
+		this.driver = driver;
+		const invalidate = () => this.cache.clear();
+		this.unsubscribers.push(signals.subscribe_structure(invalidate));
+		this.unsubscribers.push(signals.subscribe_geometry(invalidate));
+	}
+	hit_shape_of(id) {
+		if (this.cache.has(id)) return this.cache.get(id) ?? null;
+		const s = this.driver.hit_shape_of(id);
+		this.cache.set(id, s);
+		return s;
+	}
+	dispose() {
+		for (const unsub of this.unsubscribers) unsub();
+		this.unsubscribers.length = 0;
+		this.cache.clear();
+	}
+};
+//#endregion
+//#region src/core/snap/session.ts
+/**
+* Sub-pixel tolerance used as the effective threshold for `"aligned"`
+* policy. cmath's `snap1D` only fires when |delta| ≤ threshold, so
+* setting the threshold near zero means the engine only matches
+* alignments that are already exact (within rounding noise). We can't
+* use a post-hoc `correction == 0` check instead — `snap1D` locks in
+* the FIRST signed delta it finds (lexicographic over the 9-point
+* order), so a touching pair where `agent.left↔anchor.left` needs +10
+* while `agent.right↔anchor.left` needs 0 will return correction = 10,
+* not 0. The tiny-threshold trick lets only the 0-delta matches pass.
+*/
+const ALIGNED_THRESHOLD = .5;
+/**
+* Gesture-scoped snap state. Constructor freezes agent + neighbor rects
+* once; `snap()` runs the cmath engine per frame against the frozen
+* inputs. Rects are in whatever space the caller chose (svg-editor uses
+* HUD-container CSS px); the engine is space-agnostic as long as agents,
+* neighbors, delta, and threshold all share that space.
+*/
+var SnapSession = class {
+	constructor(opts) {
+		this._last_guide = void 0;
+		const live_agents = opts.agents.filter((r) => r.width > 0 || r.height > 0);
+		const live_neighbors = opts.neighbors.filter((r) => r.width > 0 || r.height > 0);
+		this.agents = live_agents;
+		this.anchors = live_neighbors;
+		const xs = [];
+		const ys = [];
+		for (const a of live_neighbors) {
+			xs.push(a.x, a.x + a.width / 2, a.x + a.width);
+			ys.push(a.y, a.y + a.height / 2, a.y + a.height);
+		}
+		this.anchor_xs = xs;
+		this.anchor_ys = ys;
+		this.baseline_union = live_agents.length > 0 ? cmath.rect.union([...live_agents]) : null;
+	}
+	/** Read-only snapshot of the most recent guide. Host code consumes
+	*  this from `compute_snap_extra()` style helpers. */
+	get last_guide() {
+		return this._last_guide;
+	}
+	/** Read-only snapshot of the pre-translation agent-union rect.
+	*  Consumed by the translate pipeline's `stage_pixel_grid` to anchor
+	*  the integer-grid quantization on the gesture's starting origin
+	*  (so a rect at `x=0.5` settles to `x=1` after first nudge, not on
+	*  every fractional drag). Returns `null` when no agents were frozen. */
+	get baseline_union_readonly() {
+		return this.baseline_union;
+	}
+	/**
+	* Run snap for a candidate cumulative delta.
+	*
+	* Returns the corrected delta (== input when no snap fires or snap
+	* is disabled) and a `SnapGuide` for HUD rendering (`undefined` when
+	* no guide should be drawn). Guide emission is governed by `policy`
+	* — see `SnapGuidePolicy`.
+	*
+	* The same guide is also stashed on `last_guide`.
+	*/
+	snap(delta, opts, policy = "engine") {
+		const baseline = this.baseline_union;
+		if (!opts.enabled || !baseline || !this.agents || !this.anchors || this.anchors.length === 0) {
+			this._last_guide = void 0;
+			return {
+				delta,
+				guide: void 0
+			};
+		}
+		const dx = delta.x;
+		const dy = delta.y;
+		const translated = [];
+		for (const r of this.agents) translated.push({
+			x: r.x + dx,
+			y: r.y + dy,
+			width: r.width,
+			height: r.height
+		});
+		const agent_rect = cmath.rect.union(translated);
+		const padX = opts.threshold_px + agent_rect.width;
+		const padY = opts.threshold_px + agent_rect.height;
+		const minX = agent_rect.x - padX;
+		const maxX = agent_rect.x + agent_rect.width + padX;
+		const minY = agent_rect.y - padY;
+		const maxY = agent_rect.y + agent_rect.height + padY;
+		const nearby = [];
+		for (const r of this.anchors) {
+			const rMaxX = r.x + r.width;
+			const rMaxY = r.y + r.height;
+			const x_overlap = rMaxX >= minX && r.x <= maxX;
+			const y_overlap = rMaxY >= minY && r.y <= maxY;
+			if (x_overlap || y_overlap) nearby.push(r);
+		}
+		const result = snapToCanvasGeometry(agent_rect, { objects: nearby }, {
+			x: opts.threshold_px,
+			y: opts.threshold_px
+		});
+		const corrected = result.by_objects ? {
+			x: result.by_objects.translated.x - baseline.x,
+			y: result.by_objects.translated.y - baseline.y
+		} : {
+			x: dx,
+			y: dy
+		};
+		const guide_source = policy === "aligned" ? snapToCanvasGeometry(agent_rect, { objects: nearby }, {
+			x: ALIGNED_THRESHOLD,
+			y: ALIGNED_THRESHOLD
+		}) : result;
+		const sg = guide.plot(guide_source);
+		const guide$1 = sg.lines.length > 0 || sg.points.length > 0 || sg.rules.length > 0 ? sg : void 0;
+		this._last_guide = guide$1;
+		return {
+			delta: corrected,
+			guide: guide$1
+		};
+	}
+	/**
+	* Resize-snap pass.
+	*
+	* Snaps the *moving edges* of an effective rect (post per-element
+	* constraint) against the frozen neighbor anchors. The caller is
+	* responsible for computing the effective rect — see
+	* `effective_resize` in `../resize-capability.ts`. This entrypoint
+	* does NOT understand circle / text uniformity; it only sees the rect
+	* and the edge mask.
+	*
+	* Per-axis snap candidates are the neighbors' left / center-x / right
+	* (for x) and top / center-y / bottom (for y), exactly what
+	* translate-snap uses. Only the moving edge participates as the agent
+	* — the opposite edge is fixed by the resize anchor and must not
+	* contribute corrections.
+	*
+	* Returns signed corrections in the rect's space. Guide is a SnapGuide
+	* compatible with `snapGuideToHUDDraw`.
+	*/
+	snap_resize(effective_rect, edges, opts) {
+		if (!opts.enabled || !this.anchor_xs || this.anchor_xs.length === 0 || edges.x === null && edges.y === null) {
+			this._last_guide = void 0;
+			return {
+				dx: 0,
+				dy: 0,
+				guide: void 0
+			};
+		}
+		const agent_x = edges.x === "left" ? effective_rect.x : edges.x === "right" ? effective_rect.x + effective_rect.width : null;
+		const agent_y = edges.y === "top" ? effective_rect.y : edges.y === "bottom" ? effective_rect.y + effective_rect.height : null;
+		let dx = 0;
+		let dy = 0;
+		let hit_x_offset = null;
+		let hit_y_offset = null;
+		if (agent_x !== null) {
+			const r = cmath.ext.snap.snap1D([agent_x], this.anchor_xs, opts.threshold_px);
+			if (Number.isFinite(r.distance)) {
+				dx = r.distance;
+				hit_x_offset = agent_x + r.distance;
+			}
+		}
+		if (agent_y !== null && this.anchor_ys) {
+			const r = cmath.ext.snap.snap1D([agent_y], this.anchor_ys, opts.threshold_px);
+			if (Number.isFinite(r.distance)) {
+				dy = r.distance;
+				hit_y_offset = agent_y + r.distance;
+			}
+		}
+		let guide = void 0;
+		if (hit_x_offset !== null || hit_y_offset !== null) {
+			const rules = [];
+			if (hit_x_offset !== null) rules.push(["x", hit_x_offset]);
+			if (hit_y_offset !== null) rules.push(["y", hit_y_offset]);
+			guide = {
+				lines: [],
+				points: [],
+				rules
+			};
+		}
+		this._last_guide = guide;
+		return {
+			dx,
+			dy,
+			guide
+		};
+	}
+	/** Release frozen refs. After dispose, `snap()` returns identity and
+	*  `last_guide` is undefined. */
+	dispose() {
+		this.agents = null;
+		this.anchors = null;
+		this.anchor_xs = null;
+		this.anchor_ys = null;
+		this.baseline_union = null;
+		this._last_guide = void 0;
+	}
+};
+//#endregion
+//#region src/core/snap/neighborhood.ts
+/** Tags whose subtree is never rendered (resource containers). Children
+*  inside these are referenced via `<use>` or `clip-path`, not drawn
+*  directly, so they must not surface as snap targets. */
+const NON_RENDERED_CONTAINER_TAGS = new Set([
+	"defs",
+	"symbol",
+	"clipPath",
+	"mask",
+	"pattern",
+	"marker",
+	"filter",
+	"linearGradient",
+	"radialGradient"
+]);
+/** Self-only render check. Does NOT walk ancestors — callers that descend
+*  from a known-rendered root already inherit ancestor-rendered as an
+*  invariant. Returns `false` for `display="none"`, `visibility="hidden"`,
+*  and for resource-container tags whose contents are never drawn. */
+function is_self_rendered(doc, id) {
+	const tag = doc.tag_of(id);
+	if (NON_RENDERED_CONTAINER_TAGS.has(tag)) return false;
+	if (doc.get_attr(id, "display") === "none") return false;
+	if (doc.get_attr(id, "visibility") === "hidden") return false;
+	return true;
+}
+/** Recursive descent into a `<g>`. Pushes every rendered structural
+*  descendant — including nested `<g>` ids themselves — into `out`.
+*  Caller is responsible for adding the root id. */
+function collect_rendered_subtree(doc, parent, out) {
+	for (const child of doc.element_children_of(parent)) {
+		if (!is_self_rendered(doc, child)) continue;
+		if (!group.STRUCTURAL_GRAPHICS.has(doc.tag_of(child))) continue;
+		out.add(child);
+		if (doc.tag_of(child) === "g") collect_rendered_subtree(doc, child, out);
+	}
+}
+/**
+* Expand a single id into its snap-candidate id set.
+*
+*  - Non-`<g>`: returns `[id]`.
+*  - `<g>`: returns `[id, ...rendered structural descendants]` — the
+*    group's own bbox stays in the set (preserving group-to-group
+*    alignment) AND every rendered leaf inside it becomes its own
+*    candidate. Nested `<g>` ids are included as bboxes; their
+*    children flatten in too.
+*
+* Editor-agnostic w.r.t. rect resolution — this returns ids only.
+* Callers feed the ids to the geometry provider to get rects.
+*/
+function snap_descent(doc, id) {
+	if (doc.tag_of(id) !== "g") return [id];
+	if (!is_self_rendered(doc, id)) return [];
+	const out = new Set([id]);
+	collect_rendered_subtree(doc, id, out);
+	return [...out];
+}
+function compute_neighborhood(doc, dragged) {
+	if (dragged.length === 0) return [];
+	const excluded = /* @__PURE__ */ new Set();
+	for (const id of dragged) {
+		excluded.add(id);
+		if (doc.tag_of(id) === "g") collect_rendered_subtree(doc, id, excluded);
+	}
+	const out = /* @__PURE__ */ new Set();
+	for (const id of dragged) {
+		const parent = doc.parent_of(id);
+		if (parent === null) continue;
+		if (!excluded.has(parent) && group.STRUCTURAL_GRAPHICS.has(doc.tag_of(parent)) && is_self_rendered(doc, parent)) out.add(parent);
+		for (const sib of doc.element_children_of(parent)) {
+			if (excluded.has(sib)) continue;
+			if (!group.STRUCTURAL_GRAPHICS.has(doc.tag_of(sib))) continue;
+			if (!is_self_rendered(doc, sib)) continue;
+			for (const inner of snap_descent(doc, sib)) {
+				if (excluded.has(inner)) continue;
+				out.add(inner);
+			}
+		}
+	}
+	return [...out];
+}
+//#endregion
+//#region src/core/snap/options.ts
+const DEFAULT_SNAP_OPTIONS = {
+	enabled: true,
+	threshold_px: 6
+};
+//#endregion
+//#region src/core/text-edit.ts
+/**
+* Decide what happens when inline text content-editing exits.
+*
+* `result` is the text that should remain — the typed text on commit, the
+* original on cancel. "Empty" means zero-length: a space is authored
+* content and is kept. The rule is unconditional — an empty result deletes
+* the node however it got there (freshly placed and never typed, cleared by
+* the author, or already empty on entry).
+*
+* See docs/wg/feat-svg-editor/text-tool.md.
+*/
+function resolve_text_exit(input) {
+	const is_empty = input.result.length === 0;
+	if (input.origin === "fresh") return is_empty ? { kind: "discard_insert" } : { kind: "commit_insert" };
+	if (is_empty) return { kind: "remove" };
+	if (input.result !== input.original) return {
+		kind: "set_text",
+		value: input.result
+	};
+	return { kind: "noop" };
+}
+//#endregion
+//#region src/selection/marquee.ts
+let marquee_selection;
+(function(_marquee_selection) {
+	function hits(boxes, rect) {
+		const touched = boxes.filter(([, box]) => cmath.rect.intersects(box, rect));
+		const front = touched.length - 1;
+		const out = [];
+		for (let i = 0; i < touched.length; i++) {
+			const [id, box] = touched[i];
+			if (i !== front && cmath.rect.contains(box, rect)) continue;
+			out.push(id);
+		}
+		return out;
+	}
+	_marquee_selection.hits = hits;
+	function resolve(boxes, rect, baseline, opts = {}) {
+		const h = hits(boxes, rect);
+		if (!opts.additive) return h;
+		const out = [...baseline];
+		const seen = new Set(baseline);
+		for (const id of h) if (!seen.has(id)) {
+			seen.add(id);
+			out.push(id);
+		}
+		return out;
+	}
+	_marquee_selection.resolve = resolve;
+})(marquee_selection || (marquee_selection = {}));
+//#endregion
+//#region src/gestures/gestures.ts
+/**
+* Sibling to `Keymap`. Owns a list of installed gesture bindings; each
+* binding's `install(ctx)` is called eagerly when bound and uninstalled
+* on `unbind` or surface detach.
+*/
+var Gestures = class {
+	constructor(ctx) {
+		this.ctx = ctx;
+		this.entries = [];
+	}
+	/**
+	* Install a gesture binding. Returns an unbind function.
+	* Re-binding the same `id` does NOT replace — both will be active.
+	* Use `unbind({ id })` first if you want a clean swap.
+	*/
+	bind(binding) {
+		const uninstall = binding.install(this.ctx);
+		const entry = {
+			binding,
+			uninstall
+		};
+		this.entries.push(entry);
+		return () => {
+			const i = this.entries.indexOf(entry);
+			if (i < 0) return;
+			this.entries.splice(i, 1);
+			uninstall();
+		};
+	}
+	/**
+	* Remove bindings matching the spec. With `{ id }`, all bindings with
+	* that id are uninstalled. With no spec, this is a no-op (use
+	* `dispose()` to nuke everything).
+	*/
+	unbind(spec) {
+		if (spec.id === void 0) return;
+		const remaining = [];
+		for (const entry of this.entries) if (entry.binding.id === spec.id) entry.uninstall();
+		else remaining.push(entry);
+		this.entries = remaining;
+	}
+	/** All currently installed bindings. Order is registration order. */
+	bindings() {
+		return this.entries.map((e) => e.binding);
+	}
+	/** @internal Uninstall every binding. Surface calls on detach. */
+	_dispose() {
+		for (const entry of this.entries) entry.uninstall();
+		this.entries = [];
+	}
+};
+//#endregion
+//#region src/gestures/defaults.ts
+/** Default margin for `camera.fit` from keyboard shortcuts. */
+const KEYBOARD_FIT_MARGIN = 64;
+/** Default zoom step for `Cmd/Ctrl+=` / `Cmd/Ctrl+-`. */
+const ZOOM_STEP = 1.2;
+/** Per-wheel-unit zoom sensitivity for Cmd/Ctrl+wheel + pinch. */
+const WHEEL_ZOOM_SENSITIVITY = .01;
+/** Min/max zoom clamps. Generous; hosts that want tighter limits can
+*  unbind these defaults and bind their own. */
+const MIN_ZOOM = .02;
+const MAX_ZOOM = 256;
+function clamp_zoom(z) {
+	return cmath.clamp(z, MIN_ZOOM, MAX_ZOOM);
+}
+/** wheel-pan-zoom: plain wheel = pan, Cmd/Ctrl+wheel + pinch = zoom-at-cursor. */
+const WHEEL_PAN_ZOOM = {
+	id: "wheel-pan-zoom",
+	install({ container, camera }) {
+		const on_wheel = (e) => {
+			e.preventDefault();
+			if (e.ctrlKey || e.metaKey) {
+				const factor = 1 - e.deltaY * WHEEL_ZOOM_SENSITIVITY;
+				const eff = clamp_zoom(camera.zoom * factor) / camera.zoom;
+				if (eff === 1) return;
+				const rect = container.getBoundingClientRect();
+				camera.zoom_at(eff, {
+					x: e.clientX - rect.left,
+					y: e.clientY - rect.top
+				});
+			} else camera.pan({
+				x: -e.deltaX,
+				y: -e.deltaY
+			});
+		};
+		container.addEventListener("wheel", on_wheel, { passive: false });
+		return () => container.removeEventListener("wheel", on_wheel);
+	}
+};
+/**
+* Begin a drag-pan from a pointerdown. Attaches `pointermove` / `pointerup`
+* listeners scoped to the gesture lifetime, then detaches them on release.
+* This is the d3-drag pattern: global listeners only exist while a drag is
+* in flight, not for the surface's whole lifetime.
+*/
+function begin_drag_pan(e, container, camera, on_release) {
+	let last_x = e.clientX;
+	let last_y = e.clientY;
+	try {
+		container.setPointerCapture(e.pointerId);
+	} catch {}
+	e.preventDefault();
+	e.stopPropagation();
+	const win = container.ownerDocument.defaultView ?? window;
+	const on_pointermove = (ev) => {
+		const dx = ev.clientX - last_x;
+		const dy = ev.clientY - last_y;
+		last_x = ev.clientX;
+		last_y = ev.clientY;
+		camera.pan({
+			x: dx,
+			y: dy
+		});
+		ev.preventDefault();
+		ev.stopPropagation();
+	};
+	const cleanup = () => {
+		win.removeEventListener("pointermove", on_pointermove, true);
+		win.removeEventListener("pointerup", on_pointerup, true);
+		win.removeEventListener("pointercancel", on_pointerup, true);
+		on_release?.();
+	};
+	const on_pointerup = () => cleanup();
+	win.addEventListener("pointermove", on_pointermove, true);
+	win.addEventListener("pointerup", on_pointerup, true);
+	win.addEventListener("pointercancel", on_pointerup, true);
+}
+/** The data-driven default set. Order = install order. */
+const DEFAULT_GESTURE_BINDINGS = [
+	WHEEL_PAN_ZOOM,
+	{
+		id: "space-drag-pan",
+		install({ container, camera, is_attended }) {
+			let space_held = false;
+			let prev_cursor = null;
+			const set_cursor = (next) => {
+				if (prev_cursor === null) prev_cursor = container.style.cursor;
+				container.style.cursor = next ?? prev_cursor ?? "";
+				if (next === null) prev_cursor = null;
+			};
+			const on_keydown = (e) => {
+				if (e.code !== "Space" || e.repeat) return;
+				if (is_text_input_focused()) return;
+				if (!is_attended()) return;
+				space_held = true;
+				set_cursor("grab");
+				e.preventDefault();
+			};
+			const on_keyup = (e) => {
+				if (e.code !== "Space") return;
+				space_held = false;
+				set_cursor(null);
+			};
+			const on_pointerdown = (e) => {
+				if (!space_held || e.button !== 0) return;
+				set_cursor("grabbing");
+				begin_drag_pan(e, container, camera, () => set_cursor(space_held ? "grab" : null));
+			};
+			const on_blur = () => {
+				space_held = false;
+				set_cursor(null);
+			};
+			const win = container.ownerDocument.defaultView ?? window;
+			win.addEventListener("keydown", on_keydown);
+			win.addEventListener("keyup", on_keyup);
+			container.addEventListener("pointerdown", on_pointerdown, true);
+			win.addEventListener("blur", on_blur);
+			return () => {
+				win.removeEventListener("keydown", on_keydown);
+				win.removeEventListener("keyup", on_keyup);
+				container.removeEventListener("pointerdown", on_pointerdown, true);
+				win.removeEventListener("blur", on_blur);
+				if (prev_cursor !== null) container.style.cursor = prev_cursor;
+			};
+		}
+	},
+	{
+		id: "middle-mouse-pan",
+		install({ container, camera }) {
+			const on_pointerdown = (e) => {
+				if (e.button !== 1) return;
+				begin_drag_pan(e, container, camera);
+			};
+			const on_auxclick = (e) => {
+				if (e.button === 1) e.preventDefault();
+			};
+			container.addEventListener("pointerdown", on_pointerdown, true);
+			container.addEventListener("auxclick", on_auxclick);
+			return () => {
+				container.removeEventListener("pointerdown", on_pointerdown, true);
+				container.removeEventListener("auxclick", on_auxclick);
+			};
+		}
+	},
+	{
+		id: "keyboard-zoom",
+		install({ container, camera, is_attended }) {
+			const owner_doc = container.ownerDocument;
+			const on_keydown = (e) => {
+				if (!is_attended()) return;
+				if (is_text_input_focused()) return;
+				const mod = e.metaKey || e.ctrlKey;
+				if (e.shiftKey && !mod && (e.code === "Digit0" || e.code === "Numpad0")) {
+					camera.reset();
+					e.preventDefault();
+				} else if (e.shiftKey && !mod && (e.code === "Digit1" || e.code === "Digit9" || e.code === "Numpad1" || e.code === "Numpad9")) {
+					camera.fit("<root>", { margin: KEYBOARD_FIT_MARGIN });
+					e.preventDefault();
+				} else if (e.shiftKey && !mod && (e.code === "Digit2" || e.code === "Numpad2")) {
+					camera.fit("<selection>", { margin: KEYBOARD_FIT_MARGIN });
+					e.preventDefault();
+				} else if (mod && (e.code === "Equal" || e.code === "NumpadAdd")) {
+					camera.set_zoom(clamp_zoom(camera.zoom * ZOOM_STEP));
+					e.preventDefault();
+				} else if (mod && (e.code === "Minus" || e.code === "NumpadSubtract")) {
+					camera.set_zoom(clamp_zoom(camera.zoom / ZOOM_STEP));
+					e.preventDefault();
+				}
+			};
+			owner_doc.addEventListener("keydown", on_keydown);
+			return () => owner_doc.removeEventListener("keydown", on_keydown);
+		}
+	}
+];
+/** Install every default binding into the gesture layer. */
+function applyDefaultGestures(gestures) {
+	for (const b of DEFAULT_GESTURE_BINDINGS) gestures.bind(b);
+}
+//#endregion
+//#region src/util/attention.ts
+/**
+* Install pointer-tracking listeners on `container` and return the
+* read-side handle. The tracker is owned by the surface and disposed
+* alongside it; gesture bindings that need to consult it receive the
+* read-only `is_attended` predicate through `GestureContext`. Hosts
+* extend the scope through `handle.attention` (`dom.ts`), which fronts
+* {@link AttentionTracker.add} / {@link AttentionTracker.remove}.
+*/
+function create_attention_tracker(container) {
+	/** Elements of the scope the pointer is currently over. Per-element
+	*  membership (not a single boolean) so crossing from the container
+	*  onto overlapping registered chrome — `leave` and `enter` firing in
+	*  either order — never reads as a gap in attention. */
+	const hovered = /* @__PURE__ */ new Set();
+	/** Registered extras → their hover-tracking teardown. */
+	const extras = /* @__PURE__ */ new Map();
+	let disposed = false;
+	/** Start hover-tracking `element`; returns the exact undo. */
+	const track = (element) => {
+		const enter = () => {
+			hovered.add(element);
+		};
+		const leave = () => {
+			hovered.delete(element);
+		};
+		element.addEventListener("pointerenter", enter);
+		element.addEventListener("pointerleave", leave);
+		return () => {
+			element.removeEventListener("pointerenter", enter);
+			element.removeEventListener("pointerleave", leave);
+			hovered.delete(element);
+		};
+	};
+	const untrack_container = track(container);
+	const is_focus_within = () => {
+		const owner = container.ownerDocument;
+		if (!owner) return false;
+		const active = owner.activeElement;
+		if (!active || active === owner.body) return false;
+		if (container.contains(active)) return true;
+		for (const element of extras.keys()) if (element.contains(active)) return true;
+		return false;
+	};
+	const is_attended = () => {
+		return hovered.size > 0 || is_focus_within();
+	};
+	return {
+		is_attended,
+		is_focus_within,
+		add: (element) => {
+			if (disposed) return;
+			if (element === container || extras.has(element)) return;
+			extras.set(element, track(element));
+			if (typeof element.matches === "function" && element.matches(":hover")) hovered.add(element);
+		},
+		remove: (element) => {
+			const untrack = extras.get(element);
+			if (!untrack) return;
+			extras.delete(element);
+			untrack();
+		},
+		dispose: () => {
+			disposed = true;
+			untrack_container();
+			for (const untrack of extras.values()) untrack();
+			extras.clear();
+		}
+	};
+}
+//#endregion
+//#region src/text-surface.ts
+const SVG_NS = "http://www.w3.org/2000/svg";
+const XML_NS = "http://www.w3.org/XML/1998/namespace";
+var SvgTextSurface = class {
+	constructor(textEl) {
+		this.prevXmlSpace = void 0;
+		this.prevPointerEvents = void 0;
+		this.last_caret_idx = -1;
+		this.last_caret_visible = false;
+		this.last_sel_start = -1;
+		this.last_sel_end = -1;
+		this.textEl = textEl;
+		const ownerDoc = textEl.ownerDocument;
+		let mountAnchor = textEl;
+		while (mountAnchor.parentElement instanceof SVGElement && (mountAnchor.localName === "tspan" || mountAnchor.localName === "textPath")) mountAnchor = mountAnchor.parentElement;
+		const parent = mountAnchor.parentNode;
+		if (!parent) throw new Error("text element has no parent");
+		const computedWhitespace = ownerDoc.defaultView?.getComputedStyle(textEl).whiteSpace;
+		if (!(computedWhitespace === "pre" || computedWhitespace === "pre-wrap" || computedWhitespace === "break-spaces")) {
+			this.prevXmlSpace = textEl.getAttributeNS(XML_NS, "space");
+			textEl.setAttributeNS(XML_NS, "xml:space", "preserve");
+		}
+		this.prevPointerEvents = textEl.getAttribute("pointer-events");
+		textEl.setAttribute("pointer-events", "bounding-box");
+		const selection = ownerDoc.createElementNS(SVG_NS, "rect");
+		selection.setAttribute("fill", "#2563eb");
+		selection.setAttribute("fill-opacity", "0.25");
+		selection.setAttribute("pointer-events", "none");
+		selection.setAttribute("data-svg-text-edit-selection", "");
+		selection.style.display = "none";
+		parent.insertBefore(selection, mountAnchor);
+		this.selectionRect = selection;
+		const caret = ownerDoc.createElementNS(SVG_NS, "rect");
+		caret.setAttribute("fill", "#2563eb");
+		caret.setAttribute("pointer-events", "none");
+		caret.setAttribute("data-svg-text-edit-caret", "");
+		caret.style.display = "none";
+		parent.insertBefore(caret, mountAnchor.nextSibling);
+		this.caretRect = caret;
+	}
+	setText(text) {
+		if (this.textEl.textContent !== text) this.textEl.textContent = text;
+	}
+	setCaret(index, visible) {
+		if (index === this.last_caret_idx && visible === this.last_caret_visible) return;
+		this.last_caret_idx = index;
+		this.last_caret_visible = visible;
+		if (!visible) {
+			this.caretRect.style.display = "none";
+			return;
+		}
+		const m = this.metrics();
+		const x = this.charX(index);
+		this.caretRect.setAttribute("x", String(x - .75));
+		this.caretRect.setAttribute("y", String(m.top));
+		this.caretRect.setAttribute("width", "1.5");
+		this.caretRect.setAttribute("height", String(m.height));
+		this.caretRect.style.display = "block";
+	}
+	setSelection(start, end) {
+		if (start === this.last_sel_start && end === this.last_sel_end) return;
+		this.last_sel_start = start;
+		this.last_sel_end = end;
+		if (start === end) {
+			this.selectionRect.style.display = "none";
+			return;
+		}
+		const m = this.metrics();
+		const x1 = this.charX(start);
+		const x2 = this.charX(end);
+		this.selectionRect.setAttribute("x", String(Math.min(x1, x2)));
+		this.selectionRect.setAttribute("y", String(m.top));
+		this.selectionRect.setAttribute("width", String(Math.abs(x2 - x1)));
+		this.selectionRect.setAttribute("height", String(m.height));
+		this.selectionRect.style.display = "block";
+	}
+	dispose(keepEditMutations = false) {
+		this.caretRect.remove();
+		this.selectionRect.remove();
+		if (this.prevXmlSpace !== void 0 && !keepEditMutations) if (this.prevXmlSpace === null) this.textEl.removeAttributeNS(XML_NS, "space");
+		else this.textEl.setAttributeNS(XML_NS, "xml:space", this.prevXmlSpace);
+		if (this.prevPointerEvents !== void 0) if (this.prevPointerEvents === null) this.textEl.removeAttribute("pointer-events");
+		else this.textEl.setAttribute("pointer-events", this.prevPointerEvents);
+		this.prevXmlSpace = void 0;
+		this.prevPointerEvents = void 0;
+	}
+	positionAtPoint(clientX, clientY) {
+		const ctm = this.textEl.getScreenCTM();
+		const svg = this.textEl.ownerSVGElement;
+		if (!ctm || !svg) return 0;
+		const pt = svg.createSVGPoint();
+		pt.x = clientX;
+		pt.y = clientY;
+		const local = pt.matrixTransform(ctm.inverse());
+		return this.localXToCharIndex(local.x);
+	}
+	/**
+	* Single-line `<text>` element: there's no "previous visual line" to move
+	* to. Cocoa single-line convention: Up/PageUp/line_start → doc start;
+	* Down/PageDown/line_end → doc end.
+	*/
+	positionForNavigation(_index, direction) {
+		const text = this.textEl.textContent ?? "";
+		switch (direction) {
+			case "up":
+			case "page_up":
+			case "line_start": return 0;
+			case "down":
+			case "page_down":
+			case "line_end": return text.length;
+		}
+	}
+	metrics() {
+		try {
+			const b = this.textEl.getBBox();
+			if (b.height > 0) return {
+				top: b.y,
+				height: b.height
+			};
+		} catch {}
+		const fontSize = parseFloat(this.textEl.ownerDocument.defaultView?.getComputedStyle(this.textEl).fontSize ?? "16") || 16;
+		return {
+			top: parseFloat(this.textEl.getAttribute("y") ?? "0") - fontSize * .85,
+			height: fontSize
+		};
+	}
+	charX(i) {
+		const text = this.textEl.textContent ?? "";
+		const baseX = parseFloat(this.textEl.getAttribute("x") ?? "0");
+		if (text.length === 0) return baseX;
+		if (i <= 0) try {
+			return this.textEl.getStartPositionOfChar(0).x;
+		} catch {
+			return baseX;
+		}
+		if (i >= text.length) try {
+			return this.textEl.getEndPositionOfChar(text.length - 1).x;
+		} catch {
+			return baseX;
+		}
+		try {
+			return this.textEl.getStartPositionOfChar(i).x;
+		} catch {
+			return baseX;
+		}
+	}
+	localXToCharIndex(localX) {
+		const text = this.textEl.textContent ?? "";
+		if (!text) return 0;
+		for (let i = 0; i < text.length; i++) try {
+			const ext = this.textEl.getExtentOfChar(i);
+			if (localX < ext.x + ext.width / 2) return i;
+		} catch {
+			break;
+		}
+		return text.length;
+	}
+};
+//#endregion
+//#region src/core/vector-edit/session.ts
+function tangents_equal(a, b) {
+	return a[0] === b[0] && a[1] === b[1];
+}
+/**
+* Shallow equality over the three sub-selection arrays. Order-sensitive
+* (mirrors how the host stores them). Used by the orchestrator to skip
+* pushing a no-op undo entry when a selection handler resolves to the
+* same state — e.g. clicking an already-selected vertex in `replace`
+* mode.
+*/
+function sub_selection_equal(a, b) {
+	if (a === b) return true;
+	if (a.vertices.length !== b.vertices.length) return false;
+	if (a.segments.length !== b.segments.length) return false;
+	if (a.tangents.length !== b.tangents.length) return false;
+	for (let i = 0; i < a.vertices.length; i++) if (a.vertices[i] !== b.vertices[i]) return false;
+	for (let i = 0; i < a.segments.length; i++) if (a.segments[i] !== b.segments[i]) return false;
+	for (let i = 0; i < a.tangents.length; i++) if (!tangents_equal(a.tangents[i], b.tangents[i])) return false;
+	return true;
+}
+/**
+* Host-side state for vector content-edit (vertex / segment / tangent
+* gestures) on the supported source tags. "Vector" here names the
+* editing mode — NOT a `vn.VectorNetwork` wrapper. The session holds
+* the source tag's authored attrs plus a path-form session-d, and
+* delegates geometry to {@link PathModel} via the apply.ts shim.
+*/
+var VectorEditSession = class {
+	constructor(node_id, source, session_d) {
+		this.node_id = node_id;
+		this._source = source;
+		this._source_before_promotion = null;
+		this._session_d = session_d;
+		this._last_seen_d = session_d;
+		this._selected_vertices = [];
+		this._selected_segments = [];
+		this._selected_tangents = [];
+		this._hovered_control = null;
+	}
+	/** Source tag the session currently projects through. See `_source`. */
+	get source() {
+		return this._source;
+	}
+	/**
+	* Flip the source to `path` after the underlying element was promoted
+	* (rect / circle / ellipse → `<path>`). Idempotent: a second call while
+	* already promoted does nothing, so the pre-promotion source captured by
+	* the first flip is never clobbered.
+	*/
+	promote_source_to_path() {
+		if (this._source_before_promotion !== null) return;
+		if (this._source.kind === "path") return;
+		this._source_before_promotion = this._source;
+		this._source = {
+			kind: "path",
+			d: this._session_d
+		};
+	}
+	/** Reverse a {@link promote_source_to_path} (gesture undo). No-op if the
+	*  source was never promoted. */
+	restore_source() {
+		if (this._source_before_promotion === null) return;
+		this._source = this._source_before_promotion;
+		this._source_before_promotion = null;
+	}
+	/**
+	* Re-sync the source to the document's current tag, outright. Unlike
+	* {@link promote_source_to_path} / {@link restore_source} (which manage a
+	* single primitive→path flip within one gesture), this sets the source to
+	* an authoritative value derived from the live document and clears the
+	* promotion bookkeeping.
+	*
+	* The host calls this when an undo/redo re-types the node out from under a
+	* *different* live session object than the one that performed the original
+	* flip (exit + undo-exit creates a fresh session; the captured session's
+	* `restore_source` then no-ops). Without it the live session could keep
+	* `source.kind === "path"` while the node is back to a primitive, and the
+	* next gesture would write a stray `d` onto the native tag. Re-deriving
+	* from the document keeps the live session authoritative.
+	*/
+	sync_source(source) {
+		this._source = source;
+		this._source_before_promotion = null;
+	}
+	/** The session's current PathModel-form `d`. Gesture handlers read
+	*  this instead of `doc.get_attr(node_id, "d")` so they stay tag-
+	*  oblivious (non-path sources have no `d` on the document). */
+	get current_d() {
+		return this._session_d;
+	}
+	/** Update the session's view after a write produced `next_d`. Caller
+	*  is `apply_session_d` (or the gesture handler that called it). */
+	update_session_d(next_d) {
+		this._session_d = next_d;
+	}
+	get last_seen_d() {
+		return this._last_seen_d;
+	}
+	get selected_vertices() {
+		return this._selected_vertices;
+	}
+	get selected_segments() {
+		return this._selected_segments;
+	}
+	get selected_tangents() {
+		return this._selected_tangents;
+	}
+	get hovered_control() {
+		return this._hovered_control;
+	}
+	/**
+	* Record that the host's most recent gesture write produced `d`.
+	* Updates both the session-d (the in-session canonical form) and the
+	* last-seen mark. The next state-change tick uses last_seen to
+	* distinguish "we wrote this" from "the document changed under us".
+	*/
+	mark_seen(d) {
+		this._session_d = d;
+		this._last_seen_d = d;
+	}
+	/**
+	* The session's response to a detected external mutation of `d`
+	* (undo / redo / programmatic / collab). Atomically (a) advances
+	* `last_seen_d` to the now-current value and (b) drops sub-selection
+	* — selection indices reference vertices and segments by ordinal
+	* position, and an external mutation may have shifted or removed
+	* them.
+	*
+	* Exposed as a single method so callers cannot get the two halves
+	* out of order. Doing `clear_selection` without `mark_seen` would
+	* leave us "stuck dirty" — the next tick would reconcile again.
+	* Doing `mark_seen` without `clear_selection` would leave stale
+	* indices pointing into a geometry that no longer matches.
+	*/
+	reconcile_after_external_mutation(d) {
+		this.mark_seen(d);
+		this.clear_selection();
+	}
+	select_vertex(index, mode) {
+		switch (mode) {
+			case "replace":
+				this._selected_vertices = [index];
+				break;
+			case "add":
+				if (!this._selected_vertices.includes(index)) this._selected_vertices = [...this._selected_vertices, index];
+				break;
+			case "toggle":
+				this._selected_vertices = this._selected_vertices.includes(index) ? this._selected_vertices.filter((v) => v !== index) : [...this._selected_vertices, index];
+				break;
+		}
+		if (mode === "replace") {
+			this._selected_segments = [];
+			this._selected_tangents = [];
+		}
+	}
+	select_segment(index, mode) {
+		switch (mode) {
+			case "replace":
+				this._selected_segments = [index];
+				break;
+			case "add":
+				if (!this._selected_segments.includes(index)) this._selected_segments = [...this._selected_segments, index];
+				break;
+			case "toggle":
+				this._selected_segments = this._selected_segments.includes(index) ? this._selected_segments.filter((s) => s !== index) : [...this._selected_segments, index];
+				break;
+		}
+		if (mode === "replace") {
+			this._selected_vertices = [];
+			this._selected_tangents = [];
+		}
+	}
+	select_tangent(ref, mode) {
+		const has = this._selected_tangents.some((t) => tangents_equal(t, ref));
+		switch (mode) {
+			case "replace":
+				this._selected_tangents = [ref];
+				break;
+			case "add":
+				if (!has) this._selected_tangents = [...this._selected_tangents, ref];
+				break;
+			case "toggle":
+				this._selected_tangents = has ? this._selected_tangents.filter((t) => !tangents_equal(t, ref)) : [...this._selected_tangents, ref];
+				break;
+		}
+		if (mode === "replace") {
+			this._selected_vertices = [];
+			this._selected_segments = [];
+		}
+	}
+	/**
+	* Replace the entire sub-selection at once. Useful for marquee /
+	* lasso results, which compute the full set up-front.
+	*/
+	set_selection(next) {
+		this._selected_vertices = [...next.vertices];
+		this._selected_segments = [...next.segments];
+		this._selected_tangents = next.tangents.map((t) => [t[0], t[1]]);
+	}
+	/**
+	* Capture the current sub-selection as a frozen triple. The
+	* orchestrator closes over snapshots in gesture deltas (so undo
+	* restores selection alongside geometry) and in standalone selection
+	* deltas (so a click on a vertex is itself undoable).
+	*
+	* Returned arrays are fresh copies — safe to retain across
+	* subsequent mutations of the session.
+	*/
+	snapshot_selection() {
+		return Object.freeze({
+			vertices: Object.freeze([...this._selected_vertices]),
+			segments: Object.freeze([...this._selected_segments]),
+			tangents: Object.freeze(this._selected_tangents.map((t) => [t[0], t[1]]))
+		});
+	}
+	/**
+	* Restore a previously-captured sub-selection. Counterpart to
+	* {@link snapshot_selection}. Equivalent to calling
+	* {@link set_selection} with the snapshot's contents.
+	*/
+	restore_selection(snap) {
+		this.set_selection(snap);
+	}
+	clear_selection() {
+		if (this._selected_vertices.length === 0 && this._selected_segments.length === 0 && this._selected_tangents.length === 0) return;
+		this._selected_vertices = [];
+		this._selected_segments = [];
+		this._selected_tangents = [];
+	}
+};
+//#endregion
+//#region src/core/vector-edit/apply.ts
+/**
+* Build the in-session path-form `d` ("session-d") for a freshly-
+* entered vector-edit. For `<path>` this is the verbatim authored
+* string; for the two vertex-chain tags we route through
+* `vn.fromPolyline` / `vn.fromPolygon` and emit via `vn.toSVGPathData`
+* — same zero-tangent `M`/`L` sequence the gesture handlers'
+* `PathModel.toSvgPathD()` will produce on subsequent commits.
+*
+* The returned string is internal to the session — it is never written
+* to the document on its own. Native-attr writeback happens through
+* {@link apply_session_d} (which calls {@link PathModel.toNativeAttrs}
+* to project the path-form geometry back to source-tag attrs).
+*/
+function source_to_session_d(source) {
+	switch (source.kind) {
+		case "path": return source.d;
+		case "line": return vn.toSVGPathData(vn.fromPolyline([[source.x1, source.y1], [source.x2, source.y2]]));
+		case "polyline": return vn.toSVGPathData(vn.fromPolyline(source.points.map((p) => [p[0], p[1]])));
+		case "polygon": return vn.toSVGPathData(vn.fromPolygon(source.points.map((p) => [p[0], p[1]])));
+		case "circle": return vn.toSVGPathData(vn.fromEllipse({
+			x: source.cx - source.r,
+			y: source.cy - source.r,
+			width: source.r * 2,
+			height: source.r * 2
+		}));
+		case "ellipse": return vn.toSVGPathData(vn.fromEllipse({
+			x: source.cx - source.rx,
+			y: source.cy - source.ry,
+			width: source.rx * 2,
+			height: source.ry * 2
+		}));
+		case "rect": return SVGShapes.createRect(source.x, source.y, source.width, source.height, source.rx, source.ry).encode();
+	}
+}
+/**
+* Native-attribute writeback. Given a new path-data `d` from a gesture,
+* project it back into the source tag's native attrs and write those —
+* `<path>` takes `d` directly; `<line>` takes `x1/y1/x2/y2`;
+* `<polyline>` / `<polygon>` take `points`.
+*
+* Returns `true` if the geometry was written natively. Returns `false`
+* when the source tag cannot express the geometry — a curve was introduced
+* or the topology left the tag's canonical form, OR the source is a
+* geometry primitive (rect / circle / ellipse) which has no native vector
+* form at all. A `false` return is the re-type-to-`<path>` signal; the
+* caller ({@link vector_apply}) handles it. This function never re-types.
+*
+* Symmetric across apply / revert: callers use it for both the in-flight
+* write and the undo-revert (both are just "set the geometry to this d").
+*/
+function apply_session_d(doc, node_id, source, d) {
+	if (source.kind === "path") {
+		doc.set_attr(node_id, "d", d);
+		return true;
+	}
+	const native = PathModel.fromSvgPathD(d).toNativeAttrs(source.kind);
+	if (native === null) return false;
+	if (native.kind === "line") {
+		doc.set_attr(node_id, "x1", String(native.x1));
+		doc.set_attr(node_id, "y1", String(native.y1));
+		doc.set_attr(node_id, "x2", String(native.x2));
+		doc.set_attr(node_id, "y2", String(native.y2));
+		return true;
+	}
+	const points = native.points.map((p) => `${p[0]},${p[1]}`).join(" ");
+	doc.set_attr(node_id, "points", points);
+	return true;
+}
+/**
+* Session-aware geometry write — the single commit chokepoint the DOM
+* gesture handlers call so re-typing stays in one place rather than being
+* reimplemented per gesture. One uniform rule across every source:
+*
+*   1. Try native writeback ({@link apply_session_d}). For `<path>` and for
+*      a vertex tag (`line` / `polyline` / `polygon`) whose edit still fits
+*      its native form, this writes and we're done — the element keeps its
+*      tag.
+*   2. If native writeback refused (a curve was introduced, the topology
+*      escaped the canonical chain, or the source is a geometry primitive
+*      with no native form), re-type the element to `<path>` via
+*      {@link SvgDocument.retype_to_path} and flip the session source to
+*      `path` (so every downstream reader — overlay, gates, the
+*      external-mutation reconciler — behaves correctly).
+*
+* Returns the {@link RetypeRecord} token iff this call performed a re-type
+* (so the caller can pair it with the edit in one history bracket and hand
+* it to {@link vector_revert} on undo); otherwise `null`.
+*/
+function vector_apply(doc, session, d) {
+	if (apply_session_d(doc, session.node_id, session.source, d)) return null;
+	const token = doc.retype_to_path(session.node_id, d);
+	if (token) {
+		session.promote_source_to_path();
+		return token;
+	}
+	doc.set_attr(session.node_id, "d", d);
+	return null;
+}
+/**
+* Counterpart to {@link vector_apply}. If this gesture re-typed the element
+* (a non-null `promotion` token), restore the original tag/attrs and the
+* session source — the re-type and the edit undo as one step. Otherwise
+* re-write the baseline geometry natively; for a geometry primitive that
+* never re-typed, {@link apply_session_d} writes nothing (a correct no-op).
+*/
+function vector_revert(doc, session, baseline_d, promotion) {
+	if (promotion) {
+		doc.revert_retype(session.node_id, promotion);
+		session.restore_source();
+		return;
+	}
+	apply_session_d(doc, session.node_id, session.source, baseline_d);
+}
+//#endregion
+//#region src/core/vector-edit/marquee.ts
+let marquee;
+(function(_marquee) {
+	function points_in_rect(candidates, rect) {
+		const hits = [];
+		for (const c of candidates) if (cmath.rect.containsPoint(rect, c.pos)) hits.push(c.key);
+		return hits;
+	}
+	_marquee.points_in_rect = points_in_rect;
+	function points_in_polygon(candidates, polygon) {
+		const hits = [];
+		const poly = polygon;
+		for (const c of candidates) if (cmath.polygon.pointInPolygon(c.pos, poly)) hits.push(c.key);
+		return hits;
+	}
+	_marquee.points_in_polygon = points_in_polygon;
+	function subpath_select_candidates(model, selection, to_doc = identity_proj) {
+		const snap = model.snapshot();
+		const vertices = snap.vertices.map((v, i) => ({
+			key: i,
+			pos: to_doc(v)
+		}));
+		const neigh_set = new Set(model.neighbouringVertices(selection));
+		const tangents = [];
+		for (let si = 0; si < snap.segments.length; si++) {
+			const s = snap.segments[si];
+			if (neigh_set.has(s.a)) {
+				const va = snap.vertices[s.a];
+				tangents.push({
+					key: [s.a, 0],
+					pos: to_doc([va[0] + s.ta[0], va[1] + s.ta[1]])
+				});
+			}
+			if (neigh_set.has(s.b)) {
+				const vb = snap.vertices[s.b];
+				tangents.push({
+					key: [s.b, 1],
+					pos: to_doc([vb[0] + s.tb[0], vb[1] + s.tb[1]])
+				});
+			}
+		}
+		return {
+			vertices,
+			tangents,
+			segments: Array.from({ length: snap.segments.length }, (_, i) => i)
+		};
+	}
+	_marquee.subpath_select_candidates = subpath_select_candidates;
+	function identity_proj(p) {
+		return p;
+	}
+	function merge_subpath_hits(prev, hits, additive) {
+		if (!additive) return {
+			vertices: [...hits.vertices],
+			segments: [...hits.segments],
+			tangents: hits.tangents.map((t) => [t[0], t[1]])
+		};
+		const vertices = Array.from(new Set([...prev.vertices, ...hits.vertices]));
+		const segments = Array.from(new Set([...prev.segments, ...hits.segments]));
+		const tangents = prev.tangents.map((t) => [t[0], t[1]]);
+		for (const t of hits.tangents) if (!tangents.some((x) => x[0] === t[0] && x[1] === t[1])) tangents.push(t);
+		return {
+			vertices,
+			segments,
+			tangents
+		};
+	}
+	_marquee.merge_subpath_hits = merge_subpath_hits;
+})(marquee || (marquee = {}));
+//#endregion
+//#region src/dom.ts
+/** Stamped on every rendered SVG element by `render()` so external
+*  tooling (host inspectors, the layers panel, snapshot tests) can map
+*  a DOM node back to its `NodeId`. The cmath fat-hit picker doesn't
+*  use it — see `_pick_node_at_world`. The legacy elementFromPoint
+*  fallback (active when `hit_tolerance_px <= 0`) walks up via
+*  {@link walk_to_id} below. */
+const ID_ATTR = "data-grida-id";
+/** Walk from `target` up through `parentElement`, returning the first id
+*  found on a `[data-grida-id]` ancestor. When `exclude_root` matches an
+*  encountered id, the walk stops and returns `null` — selection HUD
+*  treats root as non-selectable; measurement HUD passes `undefined`
+*  so the root id can be returned. */
+function walk_to_id(target, exclude_root) {
+	let cur = target;
+	while (cur instanceof Element) {
+		const id = cur.getAttribute(ID_ATTR);
+		if (id) return id === exclude_root ? null : id;
+		cur = cur.parentElement;
+	}
+	return null;
+}
+const SVG_HUD_GROUP = {
+	selection: "svg-editor.selection",
+	selectionControls: "svg-editor.selection-controls",
+	sizeMeter: "svg-editor.size-meter",
+	memberOutline: "svg-editor.member-outline"
+};
+/** KeyboardEvent.key values for the modifiers the surface tracks. Used to
+*  short-circuit window-level `keydown`/`keyup` for non-modifier keystrokes. */
+const IS_MODIFIER_KEY = {
+	Shift: true,
+	Alt: true,
+	Meta: true,
+	Control: true
+};
+/** Sentinel placed in `text_edit` before `createTextEditor` returns, so the
+*  surface skips render() during the in-flight mount and doesn't yank the
+*  live `<text>` element out from under the about-to-mount text surface. */
+const TEXT_EDIT_PENDING = { __pending: true };
+/**
+* Wire a web-font settle source to the editor's geometry channel.
+*
+* The DOM surface re-serializes the `<svg>` on every editor tick, but a
+* `<text>` / `<tspan>` bbox can change with NO attribute write: a web font
+* finishing load AFTER its `font-family` / `font-size` was already written.
+* The IR never sees that reflow, so nothing bumps `geometry_version` and
+* every bounds-keyed consumer (snap, HUD chrome, size meter) stays stuck at
+* the fallback-face metrics until the next real edit.
+*
+* Listens for `loadingdone` on `source` (a `FontFaceSet`, or any injected
+* `EventTarget` in tests) and calls `bump` once per settle. COARSE on
+* purpose: one bump clears the WHOLE bounds cache, not just text nodes —
+* consistent with the package's pessimistic-invalidation stance, and far
+* cheaper than scoping the bump to the (possibly many) reflowed runs.
+*
+* Also bumps once when `source.ready` resolves (when present): fonts that
+* settled before attach — a cache hit, or `font-display` resolving the same
+* tick the surface mounts — never re-fire `loadingdone`, so a document
+* mounted post-settle still needs one bump to re-read at the real metrics.
+*
+* Returns a teardown that removes the listener and neutralizes the pending
+* `ready` bump (leak guard) — call it on surface detach.
+*
+* Factored out of the surface so it can be unit-tested with a fake
+* `EventTarget` in the node-only test env (jsdom's `FontFaceSet` is
+* incomplete); never a real font / network.
+*/
+function install_font_load_geometry_bump(source, bump) {
+	if (!source) return () => {};
+	const on_fonts_settled = () => bump();
+	source.addEventListener("loadingdone", on_fonts_settled);
+	let alive = true;
+	const ready = source.ready;
+	if (ready && typeof ready.then === "function") ready.then(() => {
+		if (alive) bump();
+	});
+	return () => {
+		alive = false;
+		source.removeEventListener("loadingdone", on_fonts_settled);
+	};
+}
+/**
+* Attach a DOM surface to a headless editor. Returns a `DomSurfaceHandle`
+* whose `detach()` is the inverse — DOM cleared, listeners removed,
+* gestures uninstalled.
+*
+* Usage is one-shot per container: the surface owns the container's children
+* for its lifetime, and `detach()` restores it to empty.
+*/
+function attach_dom_surface(editor, options) {
+	const surface = new DomSurface(editor, options);
+	const inner = editor.attach(surface);
+	return {
+		detach: () => {
+			surface.detach_gestures();
+			inner.detach();
+		},
+		camera: surface.camera,
+		gestures: surface.gestures,
+		attention: surface.attention_scope
+	};
+}
+var DomSurface = class DomSurface {
+	constructor(editor, options) {
+		this.editor = editor;
+		this.svg_root = null;
+		this.teardown = [];
+		this.element_index = /* @__PURE__ */ new Map();
+		this.rendered_doc_revision = -1;
+		this.last_pointer = {
+			x: 0,
+			y: 0
+		};
+		this.last_pointer_valid = false;
+		this.resize_observer = null;
+		this.redraw_raf_id = null;
+		this._geometry_provider = null;
+		this._hit_shapes = null;
+		this._z_order_cache = [];
+		this._z_order_dirty = true;
+		this.active_preview = null;
+		this.text_edit = null;
+		this.text_edit_target = null;
+		this.text_edit_original = "";
+		this.pending_text_insert = null;
+		this.vector_edit = null;
+		this.point_snap_guide = void 0;
+		this.suppress_point_snap = false;
+		this.vector_edit_region_baseline = null;
+		this.scene_marquee_baseline = null;
+		this.current_tool = TOOL_CURSOR;
+		this.pending_insert = null;
+		this.editor_hover_internal = null;
+		this.container = options.container;
+		const container = this.container;
+		this.fit_on_attach = options.fit === true;
+		this.clipboard_enabled = options.clipboard !== false;
+		this.attention = create_attention_tracker(container);
+		this.attention_scope = {
+			add: (element) => this.attention.add(element),
+			remove: (element) => this.attention.remove(element)
+		};
+		this.teardown.push(() => this.attention.dispose());
+		if (process.env.NODE_ENV !== "production" && container.children.length > 0) console.warn("@grida/svg-editor: surface container is not empty at attach time. Render chrome (toolbars, layer lists, inspectors) as siblings of the container, not children — otherwise clicks on those children will silently break. See README §Surface.");
+		if (getComputedStyle(container).position === "static") container.style.position = "relative";
+		container.style.overflow = "hidden";
+		container.style.userSelect = "none";
+		container.style.webkitUserSelect = "none";
+		container.tabIndex = -1;
+		container.style.outline = "none";
+		const translate_options = () => {
+			const style = this.editor.style;
+			const zoom = this.camera.zoom || 1;
+			return {
+				pixel_grid_quantum: style.snap_to_pixel_grid ? style.pixel_grid_size : null,
+				snap_enabled: style.snap_enabled,
+				snap_threshold_px: style.snap_threshold_px / zoom
+			};
+		};
+		this.translate_orchestrator = new TranslateOrchestrator({
+			get_doc: () => this.editor_internal().doc,
+			emit: () => this.editor_internal().emit(),
+			open_preview: (label) => this.editor_internal().history.preview(label),
+			open_snap: (ids) => this.open_snap_session_for(ids),
+			options: translate_options,
+			project_delta: (id, d) => this._geometry_provider?.world_delta_to_local(id, d) ?? d,
+			set_selection: (ids) => this.editor.commands.select(ids),
+			on_clone_commit: (record) => this.editor_internal().seed_duplication(record)
+		});
+		const resize_options = () => {
+			const style = this.editor.style;
+			const zoom = this.camera.zoom || 1;
+			return {
+				pixel_grid_quantum: style.snap_to_pixel_grid ? style.pixel_grid_size : null,
+				snap_enabled: style.snap_enabled,
+				snap_threshold_px: style.snap_threshold_px / zoom
+			};
+		};
+		this.resize_orchestrator = new ResizeOrchestrator({
+			get_doc: () => this.editor_internal().doc,
+			emit: () => this.editor_internal().emit(),
+			open_preview: (label) => this.editor_internal().history.preview(label),
+			open_snap: (ids) => this.open_snap_session_for(ids),
+			options: resize_options,
+			bbox_world: (id) => this.bbox_world(id) ?? {
+				x: 0,
+				y: 0,
+				width: 0,
+				height: 0
+			}
+		});
+		const rotate_options = () => ({ angle_snap_step_radians: this.editor.style.angle_snap_step_radians });
+		this.rotate_orchestrator = new RotateOrchestrator({
+			get_doc: () => this.editor_internal().doc,
+			emit: () => this.editor_internal().emit(),
+			open_preview: (label) => this.editor_internal().history.preview(label),
+			options: rotate_options,
+			bbox_world: (id) => this.bbox_world(id) ?? {
+				x: 0,
+				y: 0,
+				width: 0,
+				height: 0
+			}
+		});
+		const editor_ref = this.editor;
+		const editor_for_watcher = {
+			get document() {
+				return editor_ref.document;
+			},
+			get state() {
+				return editor_ref.state;
+			},
+			subscribe_translate_commit: (cb) => this.editor_internal().subscribe_translate_commit(cb)
+		};
+		this.nudge_dwell_watcher = new NudgeDwellWatcher({
+			editor: editor_for_watcher,
+			open_snap: (ids) => this.open_snap_session_for(ids),
+			options: translate_options,
+			on_guides_change: () => this.request_redraw(),
+			window: container.ownerDocument.defaultView ?? window
+		});
+		this.teardown.push(() => this.nudge_dwell_watcher.dispose());
+		this.hud_canvas = container.ownerDocument.createElement("canvas");
+		Object.assign(this.hud_canvas.style, {
+			position: "absolute",
+			left: "0",
+			top: "0",
+			pointerEvents: "none"
+		});
+		container.appendChild(this.hud_canvas);
+		this.hud = new Surface(this.hud_canvas, {
+			pick: (p) => this.hit_test(p[0], p[1]),
+			shapeOf: (id) => this.shape_of(id),
+			vectorOf: (id) => this.vector_of(id),
+			onIntent: (i) => this.commit_intent(i),
+			onTap: (t) => this.handle_tap(t),
+			style: {
+				chromeColor: editor.style.chrome_color,
+				showRotationHandles: true
+			},
+			groups: {
+				selection: SVG_HUD_GROUP.selection,
+				selectionControls: SVG_HUD_GROUP.selectionControls
+			},
+			visibility: ({ gesture }) => {
+				if (gesture.kind !== "translate") return void 0;
+				return { hidden: [
+					SVG_HUD_GROUP.selection,
+					SVG_HUD_GROUP.selectionControls,
+					SVG_HUD_GROUP.sizeMeter
+				] };
+			},
+			pixelGrid: {
+				enabled: editor.style.pixel_grid,
+				zoomThreshold: 4,
+				transform: options.initial_camera
+			}
+		});
+		this.hud.setCursorRenderer(cursors.defaultRenderer());
+		this.camera = new Camera({
+			resolve_bounds: (target) => this.resolve_world_bounds(target),
+			initial: options.initial_camera
+		});
+		this.hud.setPixelGridTransform(this.camera.transform);
+		this.teardown.push(this.camera.subscribe(() => {
+			this.apply_camera_transform();
+			this.hud.setPixelGridTransform(this.camera.transform);
+			this.sync_surface_selection();
+			this.redraw();
+		}));
+		this.render();
+		this.sync_canvas_size();
+		this.sync_surface_selection();
+		this.redraw();
+		const win = container.ownerDocument.defaultView ?? window;
+		const raf = win.requestAnimationFrame(() => {
+			this.sync_canvas_size();
+			this.honor_initial_fit();
+			this.redraw();
+		});
+		this.teardown.push(() => win.cancelAnimationFrame(raf));
+		this.gestures = new Gestures({
+			container,
+			svg_root: () => this.svg_root,
+			hud_canvas: this.hud_canvas,
+			camera: this.camera,
+			editor,
+			handle: { detach: () => {} },
+			is_attended: () => this.attention.is_attended()
+		});
+		if (options.gestures !== false) applyDefaultGestures(this.gestures);
+		const unsub = editor.subscribe(() => {
+			this.current_tool = editor.state.tool;
+			this.hud.setVectorSelectionMode(this.current_tool.type === "lasso" ? "lasso" : "marquee");
+			this.hud.setVectorBendMode(this.current_tool.type === "bend" ? "always" : "auto");
+			this.flush_dom();
+			this.sync_surface_selection();
+			this.hud.setPixelGrid({
+				enabled: editor.style.pixel_grid,
+				zoomThreshold: 4
+			});
+			this.sync_canvas_size();
+			this.sync_cursor();
+			if (this.pending_insert) {
+				const t = this.current_tool;
+				const cur = this.pending_insert;
+				if (t.type === "insert" ? t.tag !== cur.tag : cur.phase === "armed") {
+					if (cur.phase === "drawing") cur.session.discard();
+					this.pending_insert = null;
+				}
+			}
+			if (this.vector_edit && !this.active_preview) {
+				const ses = this.vector_edit;
+				const live_source = this.editor_internal().doc.is_vector_edit_target(ses.node_id);
+				const had_selection = ses.selected_vertices.length > 0 || ses.selected_segments.length > 0 || ses.selected_tangents.length > 0;
+				if (live_source === null || live_source.kind !== ses.source.kind) {
+					if (had_selection) {
+						ses.clear_selection();
+						this.sync_selection_mirror();
+					}
+				} else {
+					const live_d = source_to_session_d(live_source);
+					if (live_d !== ses.last_seen_d) {
+						ses.reconcile_after_external_mutation(live_d);
+						if (had_selection) this.sync_selection_mirror();
+					}
+				}
+			}
+			this.request_redraw();
+		});
+		this.teardown.push(unsub);
+		this.teardown.push(editor.subscribe_geometry(() => this.request_redraw()));
+		if (typeof ResizeObserver !== "undefined") {
+			this.resize_observer = new ResizeObserver(() => this.sync_canvas_size());
+			this.resize_observer.observe(container);
+			this.teardown.push(() => this.resize_observer?.disconnect());
+		} else {
+			const win = container.ownerDocument.defaultView ?? window;
+			const fn = () => this.sync_canvas_size();
+			win.addEventListener("resize", fn);
+			this.teardown.push(() => win.removeEventListener("resize", fn));
+		}
+		const detach_font_listener = install_font_load_geometry_bump(options.font_load_source ?? container.ownerDocument.fonts ?? null, () => editor._internal.bump_geometry());
+		this.teardown.push(detach_font_listener);
+		this.wire_events();
+		const internal = editor._internal;
+		this.editor_hover_internal = internal;
+		internal.set_content_edit_driver((id) => this.enter_content_edit(id));
+		this.teardown.push(() => internal.set_content_edit_driver(null));
+		internal.register_command("transform.nudge", (args) => this.handle_nudge_command(args));
+		this.teardown.push(() => internal.register_command("transform.nudge", default_nudge_handler(this.editor)));
+		internal.set_computed_resolver({
+			computed_property: (id, name) => {
+				this.flush_dom();
+				const el = this.element_index.get(id);
+				if (!el) return null;
+				const value = getComputedStyle(el).getPropertyValue(name);
+				return value === "" ? null : value;
+			},
+			computed_paint: (id, channel) => {
+				this.flush_dom();
+				const el = this.element_index.get(id);
+				if (!el) return null;
+				const computed = getComputedStyle(el).getPropertyValue(channel);
+				if (computed === "") return null;
+				return {
+					computed,
+					resolved_paint: paint.parse(computed)
+				};
+			}
+		});
+		this.teardown.push(() => internal.set_computed_resolver(null));
+		const geometry = new MemoizedGeometryProvider(new SvgGeometryDriver({
+			element_for: (id) => this.element_index.get(id) ?? null,
+			root: () => this.svg_root,
+			camera: () => this.camera,
+			container: () => this.container,
+			pick_at_world: (p, allow_root) => this._pick_node_at_world(p, allow_root),
+			flush: () => this.flush_dom()
+		}), {
+			subscribe_structure: (cb) => editor.subscribe_with_selector((s) => s.structure_version, () => cb()),
+			subscribe_geometry: (cb) => editor.subscribe_geometry(cb)
+		});
+		this._geometry_provider = geometry;
+		internal.set_geometry(geometry);
+		this.teardown.push(() => {
+			internal.set_geometry(null);
+			geometry.dispose();
+			this._geometry_provider = null;
+		});
+		const hit_shapes = new MemoizedHitShapeProvider(new SvgHitShapeDriver({
+			doc: () => {
+				try {
+					return this.editor_internal().doc;
+				} catch {
+					return null;
+				}
+			},
+			bounds_of: (id) => geometry.bounds_of(id)
+		}), {
+			subscribe_structure: (cb) => editor.subscribe_with_selector((s) => s.structure_version, () => cb()),
+			subscribe_geometry: (cb) => editor.subscribe_geometry(cb)
+		});
+		this._hit_shapes = hit_shapes;
+		this._z_order_dirty = true;
+		this.teardown.push(editor.subscribe_with_selector((s) => s.structure_version, () => {
+			this._z_order_dirty = true;
+		}));
+		this.teardown.push(() => {
+			hit_shapes.dispose();
+			this._hit_shapes = null;
+			this._z_order_cache = [];
+		});
+		internal.set_surface_hover_override_driver((id) => {
+			const response = this.hud.setHoverOverride(id);
+			if (response.hoverChanged) internal.push_surface_hover(this.hud.hover());
+			if (response.needsRedraw) this.redraw();
+		});
+		this.teardown.push(() => internal.set_surface_hover_override_driver(null));
+	}
+	hit_test(x, y) {
+		if (this.vector_edit) return null;
+		return this.pick_at(x, y, false);
+	}
+	/** Element-walk under (x, y) → first ancestor with `ID_ATTR`. When
+	*  `allow_root` is `false`, root hits are rejected (returns `null`) so
+	*  the HUD never hovers / selects / drags the document itself —
+	*  selection of the root is a host concern. When `true`, the root id
+	*  is returned for callers that need it as a measurement candidate
+	*  (`<svg>` is a snap target and should be a measurement target too;
+	*  see `compute_measurement_extra`). */
+	pick_at(x, y, allow_root) {
+		const world = this.camera.screen_to_world({
+			x,
+			y
+		});
+		return this._pick_node_at_world(world, allow_root);
+	}
+	/** Resolve a world-space point to a node id.
+	*
+	*  Two paths, selected at runtime by `EditorStyle.hit_tolerance_px`:
+	*
+	*    - **`> 0` (cmath fat-hit picker)** — walks document z-order
+	*      topmost-first via {@link pick_at_world}. Each candidate's
+	*      hit-shape comes from the memoized `SvgHitShapeDriver`
+	*      (intrinsic geometry or world-space bounds-rect fallback for
+	*      `<text>` / `<use>` / transformed nodes). Tolerance is screen-
+	*      CSS-px, converted to world units via `camera.zoom` so the band
+	*      stays the same width on screen regardless of zoom. Has known
+	*      issues — see https://grida.co/docs/wg/feat-svg-editor/hit-test.
+	*
+	*    - **`<= 0` (legacy elementFromPoint)** — opt-out of the cmath
+	*      picker. Uses the browser's painted-pixel hit-test plus a
+	*      walk-up of `data-grida-id`. Pixel-exact, no tolerance, but
+	*      renderer-correct on every real-world SVG feature (transforms,
+	*      cascade, clip-path, fill-rule, pointer-events). This is the
+	*      v1-baseline path; useful for A/B comparison and as a safe
+	*      fallback if the cmath path misbehaves.
+	*
+	*  `allow_root` controls whether the root `<svg>` may be returned:
+	*  selection HUD passes `false`, measurement HUD passes `true`.
+	*
+	*  Used by both `pick_at` (HUD hover / measurement) and
+	*  `SvgGeometryDriver.node_at_point` (core editor selection) so one
+	*  source of truth governs every click that resolves to a node. */
+	_pick_node_at_world(p, allow_root) {
+		const root_id = this.editor.tree().root;
+		const tol_px = this.editor.style.hit_tolerance_px;
+		if (tol_px <= 0) return this._pick_node_via_dom(p, allow_root, root_id);
+		const geometry = this._geometry_provider;
+		const hit_shapes = this._hit_shapes;
+		if (geometry && hit_shapes) {
+			const zoom = this.camera.zoom;
+			const hit = pick_at_world(p, {
+				tolerance_world: zoom > 0 ? tol_px / zoom : 0,
+				ordered_ids: this._ensure_z_order(false, root_id),
+				bounds_of: (id) => geometry.bounds_of(id),
+				hit_shape_of: (id) => hit_shapes.hit_shape_of(id)
+			});
+			if (hit !== null) return hit;
+		}
+		if (allow_root && geometry) {
+			const root_bounds = geometry.bounds_of(root_id);
+			if (root_bounds && cmath.rect.containsPoint(root_bounds, [p.x, p.y])) return root_id;
+		}
+		return null;
+	}
+	/** Legacy DOM-based picker. World point → container CSS px via camera,
+	*  then `elementFromPoint` + walk-up to `data-grida-id`. No tolerance,
+	*  no cmath, no z-order owned by us — the browser stacks paints and
+	*  returns the topmost. The picker the package shipped with at v1. */
+	_pick_node_via_dom(p, allow_root, root_id) {
+		const screen = this.camera.world_to_screen(p);
+		const cr = this.container.getBoundingClientRect();
+		const target = this.container.ownerDocument.elementFromPoint(cr.left + screen.x, cr.top + screen.y);
+		if (!(target instanceof SVGElement)) return null;
+		return walk_to_id(target, allow_root ? void 0 : root_id);
+	}
+	/** Lazily rebuild the z-order list. Walks the document depth-first,
+	*  emitting element ids in paint order (back → front). The root is
+	*  always pushed first; callers that disallow root pass `false` to
+	*  have the picker skip it. (Cheaper to keep one canonical list and
+	*  filter the root inline than to maintain two parallel arrays.) */
+	_ensure_z_order(allow_root, root_id) {
+		if (this._z_order_dirty) {
+			const out = [];
+			const doc = (() => {
+				try {
+					return this.editor_internal().doc;
+				} catch {
+					return null;
+				}
+			})();
+			if (doc) {
+				const walk = (id) => {
+					out.push(id);
+					for (const c of doc.element_children_of(id)) walk(c);
+				};
+				walk(doc.root);
+			}
+			this._z_order_cache = out;
+			this._z_order_dirty = false;
+		}
+		if (allow_root) return this._z_order_cache;
+		if (this._z_order_cache.length > 0 && this._z_order_cache[0] === root_id) return this._z_order_cache.slice(1);
+		return this._z_order_cache.filter((id) => id !== root_id);
+	}
+	dispose() {
+		if (this.text_edit) {
+			this.text_edit.cancel();
+			this.text_edit = null;
+			this.text_edit_target = null;
+		}
+		if (this.vector_edit) {
+			this.vector_edit = null;
+			this.vector_edit_region_baseline = null;
+			this.hud.setVectorSelection(null);
+		}
+		this.scene_marquee_baseline = null;
+		this.gestures._dispose();
+		this.translate_orchestrator.cancel();
+		this.resize_orchestrator.cancel();
+		this.rotate_orchestrator.cancel();
+		this.active_preview = null;
+		if (this.redraw_raf_id !== null) {
+			(this.container.ownerDocument.defaultView ?? window).cancelAnimationFrame(this.redraw_raf_id);
+			this.redraw_raf_id = null;
+		}
+		for (const fn of this.teardown) fn();
+		this.teardown = [];
+		this.hud.dispose();
+		this.hud_canvas.remove();
+		if (this.svg_root) this.svg_root.remove();
+		this.svg_root = null;
+		this.element_index.clear();
+		this.last_pointer_valid = false;
+	}
+	/** Public — invoked by the `DomSurfaceHandle` wrapper before `detach()`. */
+	detach_gestures() {
+		this.gestures._dispose();
+	}
+	/**
+	* Bring the live DOM up to date with the doc IR iff it is stale.
+	*
+	* Staleness contract: anything that reads the LIVE DOM as a proxy for
+	* document state — the geometry driver (`getBBox` / `getCTM`), the
+	* computed-style resolver — MUST call this first. Doc listeners (the
+	* geometry channel, editor `subscribe`) fire synchronously inside the
+	* mutation, BEFORE the surface's render listener has projected the new
+	* attrs into the DOM; a read in that window returns the PREVIOUS
+	* geometry, and through `MemoizedGeometryProvider` it would be cached as
+	* if current — every later consumer (align, resize_to, snap) then plans
+	* against one-mutation-stale bounds. Same model as CSS layout: reading
+	* `offsetWidth` flushes pending layout; reading `bounds_of` flushes the
+	* pending render.
+	*/
+	flush_dom() {
+		if (this.rendered_doc_revision === this.editor._internal.doc.revision) return;
+		this.render();
+	}
+	render() {
+		if (this.text_edit) return;
+		const owner_doc = this.container.ownerDocument;
+		const doc = this.editor._internal.doc;
+		const svg_text = this.editor.serialize();
+		const wrapper = owner_doc.createElement("div");
+		wrapper.innerHTML = svg_text;
+		const new_svg = wrapper.querySelector("svg");
+		if (!(new_svg instanceof SVGSVGElement)) return;
+		if (this.svg_root) this.svg_root.replaceWith(new_svg);
+		else this.container.insertBefore(new_svg, this.hud_canvas);
+		this.svg_root = new_svg;
+		this.apply_svg_layout();
+		this.apply_camera_transform();
+		this.element_index.clear();
+		const ids = doc.all_elements();
+		let i = 0;
+		const tag_walk = (el) => {
+			if (i < ids.length) {
+				const id = ids[i++];
+				el.setAttribute(ID_ATTR, id);
+				this.element_index.set(id, el);
+			}
+			for (let c = el.firstElementChild; c; c = c.nextElementSibling) if (c instanceof SVGElement) tag_walk(c);
+		};
+		tag_walk(new_svg);
+		this.rendered_doc_revision = doc.revision;
+	}
+	sync_canvas_size() {
+		const cr = this.container.getBoundingClientRect();
+		this.hud.setSize(cr.width, cr.height);
+		this.camera._set_viewport_size(cr.width, cr.height);
+		this.redraw();
+	}
+	/**
+	* Apply absolute positioning + transform-origin to the SVG so the camera's
+	* CSS matrix maps SVG-coord (0,0) cleanly to container-screen (tx, ty).
+	* Called after every render() that may have replaced the root element.
+	*/
+	apply_svg_layout() {
+		if (!this.svg_root) return;
+		const style = this.svg_root.style;
+		style.position = "absolute";
+		style.left = "0";
+		style.top = "0";
+		style.transformOrigin = "0 0";
+		const vb = this.svg_root.getAttribute("viewBox");
+		if (vb) {
+			const parts = vb.split(/[\s,]+/).map(Number);
+			if (parts.length === 4 && parts.every((n) => Number.isFinite(n))) {
+				const [, , w, h] = parts;
+				if (w > 0 && h > 0) {
+					style.width = `${w}px`;
+					style.height = `${h}px`;
+				}
+			}
+		}
+	}
+	/**
+	* Push the current camera transform to the SVG as a CSS `matrix(...)`.
+	* The HUD canvas stays at identity — selection chrome reads node bounds
+	* via `getScreenCTM()`, which already includes the CSS transform, so
+	* chrome aligns automatically and stays 1px sharp at any zoom.
+	*/
+	apply_camera_transform() {
+		if (!this.svg_root) return;
+		const t = this.camera.transform;
+		this.svg_root.style.transform = `matrix(${t[0][0]}, ${t[1][0]}, ${t[0][1]}, ${t[1][1]}, ${t[0][2]}, ${t[1][2]})`;
+	}
+	/** One-shot fit-on-attach. Runs after layout has settled. */
+	honor_initial_fit() {
+		if (!this.fit_on_attach) return;
+		this.fit_on_attach = false;
+		this.camera.fit("<root>");
+	}
+	/**
+	* BoundsResolver for `Camera.fit(target)`. The Camera class handles Rect
+	* passthrough itself; this resolver only sees string targets — sentinels
+	* ("<root>", "<selection>") and NodeIds.
+	*/
+	resolve_world_bounds(target) {
+		if (target === "<root>") return this.root_world_bounds();
+		const geometry = this.editor.geometry;
+		if (target === "<selection>") {
+			const sel = this.editor.state.selection;
+			if (sel.length === 0 || !geometry) return null;
+			const rects = [...geometry.bounds_of_many(sel).values()];
+			if (rects.length === 0) return null;
+			return cmath.rect.union(rects);
+		}
+		return geometry?.bounds_of(target) ?? null;
+	}
+	/**
+	* World-space bounds of the root document. Prefer `viewBox` (the SVG's
+	* declared world rect), fall back to `width`/`height` attrs, then the
+	* SVG root's `getBBox()` as a last resort.
+	*/
+	root_world_bounds() {
+		const root_id = this.editor.tree().root;
+		const doc = this.editor.document;
+		const view_box = doc.get_attr(root_id, "viewBox");
+		if (view_box) {
+			const parts = view_box.trim().split(/[\s,]+/).map(Number);
+			if (parts.length === 4 && parts.every((n) => Number.isFinite(n))) return {
+				x: parts[0],
+				y: parts[1],
+				width: parts[2],
+				height: parts[3]
+			};
+		}
+		const w = parseFloat(doc.get_attr(root_id, "width") ?? "");
+		const h = parseFloat(doc.get_attr(root_id, "height") ?? "");
+		if (Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0) return {
+			x: 0,
+			y: 0,
+			width: w,
+			height: h
+		};
+		if (this.svg_root) try {
+			const b = this.svg_root.getBBox();
+			if (b.width > 0 && b.height > 0) return {
+				x: b.x,
+				y: b.y,
+				width: b.width,
+				height: b.height
+			};
+		} catch {}
+		return null;
+	}
+	/** Single per-frame draw entry — merges host-fed extras with surface chrome. */
+	redraw() {
+		this.hud.draw(merge_hud_draws(this.compute_measurement_extra(), this.compute_size_meter_extra(), this.compute_snap_extra(), this.compute_member_outlines_extra()));
+	}
+	/** RAF-coalesced `redraw` for event sources that may emit many times per
+	*  frame (geometry-version bumps mid-drag). Camera/gesture paths still call
+	*  `redraw` directly for synchronous chrome alignment. */
+	request_redraw() {
+		if (this.redraw_raf_id !== null) return;
+		const win = this.container.ownerDocument.defaultView ?? window;
+		this.redraw_raf_id = win.requestAnimationFrame(() => {
+			this.redraw_raf_id = null;
+			this.redraw();
+		});
+	}
+	/**
+	* Build the host-fed measurement guide for the current frame, or
+	* `undefined` if no guide should be drawn.
+	*
+	* Master signal: Alt held (read from `surface.modifiers()`). Each
+	* additional condition is a derivation, not a separate flag — this keeps
+	* a single source of truth and lets future Alt-consumers (constrained
+	* resize, axis-lock, …) live next to this one without re-tracking the key.
+	*/
+	compute_measurement_extra() {
+		if (!this.hud.modifiers().alt) return void 0;
+		if (this.hud.gesture().kind !== "idle") return void 0;
+		const sel = this.editor.state.selection;
+		if (sel.length === 0) return void 0;
+		let hover = this.hud.hover();
+		if (!hover && this.last_pointer_valid) hover = this.pick_at(this.last_pointer.x, this.last_pointer.y, true);
+		if (!hover) return void 0;
+		if (sel.includes(hover)) return void 0;
+		const a_container = sel.map((id) => this.container_box(id)).filter((r) => r !== null);
+		if (a_container.length === 0) return void 0;
+		const b_container = this.container_box(hover);
+		if (!b_container) return void 0;
+		const m_container = measure(cmath.rect.union(a_container), b_container);
+		if (!m_container) return void 0;
+		const draw = measurementToHUDDraw(m_container, this.editor.style.measurement_color);
+		const geometry = this.editor.geometry;
+		if (geometry) {
+			const a_world = sel.map((id) => geometry.bounds_of(id)).filter((r) => r !== null);
+			const b_world = geometry.bounds_of(hover);
+			if (a_world.length > 0 && b_world) {
+				const m_world = measure(cmath.rect.union(a_world), b_world);
+				if (m_world) {
+					let cursor = 0;
+					for (const line of draw.lines ?? []) {
+						if (line.label === void 0) continue;
+						const side = next_labellable_side(cursor, m_container, m_world);
+						if (side < 0) break;
+						line.label = cmath.ui.formatNumber(m_world.distance[side], 1);
+						cursor = side + 1;
+					}
+				}
+			}
+		}
+		return draw;
+	}
+	/** Pill position is container-space (tracks camera); values are
+	*  world-space (zoom-invariant). Hidden in text-edit mode. */
+	compute_size_meter_extra() {
+		if (!this.editor.style.show_size_meter) return void 0;
+		if (this.editor.state.mode === "edit-content") return void 0;
+		const sel = this.editor.state.selection;
+		if (sel.length === 0) return void 0;
+		const geometry = this.editor.geometry;
+		if (!geometry) return void 0;
+		const color = this.editor.style.chrome_color;
+		if (sel.length === 1) {
+			const shape = this.shape_of(sel[0]);
+			if (shape && shape.kind === "transformed") {
+				const { local, matrix } = shape;
+				const { anchor, angle } = pick_lowest_side_anchor(cmath.rect.toCorners(local).map((p) => cmath.vector2.transform(p, matrix)), true);
+				const label = `${cmath.ui.formatNumber(local.width, 1)} × ${cmath.ui.formatNumber(local.height, 1)}`;
+				return { lines: [{
+					x1: anchor[0],
+					y1: anchor[1],
+					x2: anchor[0],
+					y2: anchor[1],
+					label,
+					color,
+					labelAngle: angle,
+					group: SVG_HUD_GROUP.sizeMeter
+				}] };
+			}
+			if (shape && shape.kind === "line") {
+				const { p1, p2 } = shape;
+				const { anchor, angle } = pick_lowest_side_anchor([p1, p2], false);
+				const dx = p2[0] - p1[0];
+				const dy = p2[1] - p1[1];
+				const label = `${cmath.ui.formatNumber(Math.abs(dx), 1)} × ${cmath.ui.formatNumber(Math.abs(dy), 1)}`;
+				return { lines: [{
+					x1: anchor[0],
+					y1: anchor[1],
+					x2: anchor[0],
+					y2: anchor[1],
+					label,
+					color,
+					labelAngle: angle,
+					group: SVG_HUD_GROUP.sizeMeter
+				}] };
+			}
+		}
+		const world_rects = [];
+		const container_rects = [];
+		for (const id of sel) {
+			const world = geometry.bounds_of(id);
+			const container = this.container_box(id);
+			if (!world || !container) continue;
+			world_rects.push(world);
+			container_rects.push(container);
+		}
+		if (world_rects.length === 0) return void 0;
+		const world_union = cmath.rect.union(world_rects);
+		const container_union = cmath.rect.union(container_rects);
+		const cx = container_union.x + container_union.width / 2;
+		const by = container_union.y + container_union.height;
+		return { lines: [{
+			x1: cx,
+			y1: by,
+			x2: cx,
+			y2: by,
+			label: `${cmath.ui.formatNumber(world_union.width, 1)} × ${cmath.ui.formatNumber(world_union.height, 1)}`,
+			color,
+			group: SVG_HUD_GROUP.sizeMeter
+		}] };
+	}
+	/**
+	* Thin outline rects for each individually-selected member, drawn
+	* inside the single envelope chrome when a multi-selection is active.
+	* Lets the user see _what_ is selected separately from _what will
+	* resize as a unit_ (the envelope itself, with corner handles).
+	*
+	* Single-member selections already get their outline from the
+	* chrome's own rect renderer — emitting outlines here would be
+	* redundant (double-stroked outline). Returns `undefined` then.
+	*/
+	compute_member_outlines_extra() {
+		if (this.editor.state.mode === "edit-content") return void 0;
+		const sel = this.editor.state.selection;
+		if (sel.length < 2) return void 0;
+		const color = this.editor.style.chrome_color;
+		const rects = [];
+		for (const id of sel) {
+			const r = this.container_box(id);
+			if (!r) continue;
+			rects.push({
+				x: r.x,
+				y: r.y,
+				width: r.width,
+				height: r.height,
+				stroke: true,
+				color,
+				group: SVG_HUD_GROUP.memberOutline
+			});
+		}
+		return rects.length > 0 ? { rects } : void 0;
+	}
+	compute_snap_extra() {
+		if (this.point_snap_guide) return snapGuideToHUDDraw(this.point_snap_guide, this.editor.style.measurement_color);
+		const insert_guide = this.pending_insert?.phase === "drawing" ? this.pending_insert.snap_session?.last_guide : void 0;
+		if (insert_guide) return snapGuideToHUDDraw(this.project_guide_to_screen(insert_guide), this.editor.style.measurement_color);
+		const guides = this.translate_orchestrator.last_guides.length > 0 ? this.translate_orchestrator.last_guides : this.resize_orchestrator.last_guides.length > 0 ? this.resize_orchestrator.last_guides : this.nudge_dwell_watcher.guides;
+		if (guides.length === 0) return void 0;
+		return snapGuideToHUDDraw(this.project_guide_to_screen(guides[0]), this.editor.style.measurement_color);
+	}
+	/** Project a snap guide from world space (pipeline output) to screen
+	*  CSS-px (the HUD canvas's identity-transform coordinate system).
+	*  Lines + points project via `camera.world_to_screen`; rules carry
+	*  a single axis-offset, so they project a representative point on
+	*  that axis (the camera has no rotation, so per-axis scale +
+	*  translate fully describes the projection). */
+	project_guide_to_screen(g) {
+		const cam = this.camera;
+		return {
+			lines: g.lines.map((l) => {
+				const p1 = cam.world_to_screen({
+					x: l.x1,
+					y: l.y1
+				});
+				const p2 = cam.world_to_screen({
+					x: l.x2,
+					y: l.y2
+				});
+				return {
+					...l,
+					x1: p1.x,
+					y1: p1.y,
+					x2: p2.x,
+					y2: p2.y
+				};
+			}),
+			points: g.points.map(([x, y]) => {
+				const p = cam.world_to_screen({
+					x,
+					y
+				});
+				return [p.x, p.y];
+			}),
+			rules: g.rules.map(([axis, offset]) => {
+				const p = cam.world_to_screen(axis === "x" ? {
+					x: offset,
+					y: 0
+				} : {
+					x: 0,
+					y: offset
+				});
+				return [axis, axis === "x" ? p.x : p.y];
+			})
+		};
+	}
+	/** Freeze snap inputs at gesture start: dragged agent rects +
+	*  neighbor candidate rects. Both come from `bbox_world_for_snap` →
+	*  `bbox_world`, which projects each element's `getBBox()` through
+	*  its own `transform=` so the rects sit in **doc space** — the root
+	*  SVG's user-coordinate system, with element-local rotations / etc.
+	*  already accounted for. The pipeline operates in this same space,
+	*  so snap inputs and pipeline deltas share a frame end-to-end.
+	*
+	*  Returns a fresh `SnapSession`; the caller (orchestrator OR
+	*  nudge-dwell watcher) owns its lifetime. */
+	open_snap_session_for(ids) {
+		const doc = this.editor.document;
+		const neighbor_ids = compute_neighborhood(doc, ids);
+		const agent_id_set = /* @__PURE__ */ new Set();
+		for (const id of ids) for (const inner of snap_descent(doc, id)) agent_id_set.add(inner);
+		const bounds_of = (id) => this._geometry_provider?.bounds_of(id) ?? null;
+		const agents = [];
+		for (const id of agent_id_set) {
+			const r = bounds_of(id);
+			if (r) agents.push(r);
+		}
+		const neighbors = [];
+		for (const id of neighbor_ids) {
+			const r = bounds_of(id);
+			if (r) neighbors.push(r);
+		}
+		return new SnapSession({
+			agents,
+			neighbors
+		});
+	}
+	/** Cancel any in-flight gesture (orchestrator + active_preview). Used
+	*  by Escape and the `cancel_gesture` intent. Returns whether anything
+	*  was canceled. */
+	cancel_in_flight() {
+		let canceled = false;
+		if (this.scene_marquee_baseline) {
+			this.scene_marquee_baseline = null;
+			canceled = true;
+		}
+		if (this.translate_orchestrator.has_active_session()) {
+			this.translate_orchestrator.cancel();
+			canceled = true;
+		}
+		if (this.resize_orchestrator.has_active_session()) {
+			this.resize_orchestrator.cancel();
+			canceled = true;
+		}
+		if (this.rotate_orchestrator.has_active_session()) {
+			this.rotate_orchestrator.cancel();
+			canceled = true;
+		}
+		if (this.active_preview) {
+			this.active_preview.session.discard();
+			this.active_preview = null;
+			this.point_snap_guide = void 0;
+			canceled = true;
+		}
+		if (this.pending_insert) {
+			if (this.pending_insert.phase === "drawing") {
+				this.pending_insert.session.discard();
+				this.pending_insert.snap_session?.dispose?.();
+			}
+			this.pending_insert = null;
+			this.editor.set_tool({ type: "cursor" });
+			canceled = true;
+		}
+		if (canceled) this.request_redraw();
+		return canceled;
+	}
+	sync_surface_selection() {
+		const state = this.editor.state;
+		if (state.mode === "edit-content") {
+			this.hud.setSelection([]);
+			return;
+		}
+		if (state.selection.length <= 1) {
+			this.hud.setSelection(state.selection);
+			return;
+		}
+		this.hud.setSelection(this.build_selection_groups(state.selection));
+	}
+	/**
+	* Build the HUD's `SelectionGroup[]` for a multi-member selection.
+	* Singleton selections do NOT go through this helper — see
+	* {@link sync_surface_selection} for the policy.
+	*/
+	build_selection_groups(selection) {
+		if (selection.length < 2) return [];
+		const rects = [];
+		for (const id of selection) {
+			const r = this.container_box(id);
+			if (r) rects.push(r);
+		}
+		if (rects.length === 0) return [];
+		return [{
+			ids: selection,
+			shape: {
+				kind: "rect",
+				rect: cmath.rect.union(rects)
+			}
+		}];
+	}
+	/**
+	* Return the selection shape for a node. Vector `<line>` nodes return
+	* `{ kind: "line", p1, p2 }` so the HUD lays out endpoint knobs; all
+	* other nodes return `{ kind: "rect", rect }` using the container-space
+	* bounding box.
+	*/
+	shape_of(id) {
+		const tag = this.tag_of(id);
+		if (tag === "line") {
+			const line = this.line_endpoints_in_container(id);
+			if (line) return {
+				kind: "line",
+				p1: line.p1,
+				p2: line.p2
+			};
+		}
+		const el = this.element_index.get(id);
+		if (!(el instanceof SVGGraphicsElement) || typeof el.getBBox !== "function" || typeof el.getScreenCTM !== "function" || tag === "svg") {
+			const rect = this.container_box(id);
+			return rect ? {
+				kind: "rect",
+				rect
+			} : null;
+		}
+		let bbox_local;
+		try {
+			const b = el.getBBox();
+			bbox_local = {
+				x: b.x,
+				y: b.y,
+				width: b.width,
+				height: b.height
+			};
+		} catch {
+			const rect = this.container_box(id);
+			return rect ? {
+				kind: "rect",
+				rect
+			} : null;
+		}
+		const ctm = el.getScreenCTM();
+		if (!ctm) {
+			const rect = this.container_box(id);
+			return rect ? {
+				kind: "rect",
+				rect
+			} : null;
+		}
+		if (ctm.b === 0 && ctm.c === 0) {
+			const rect = this.container_box(id);
+			return rect ? {
+				kind: "rect",
+				rect
+			} : null;
+		}
+		const cr = this.container.getBoundingClientRect();
+		const dx = -cr.left + this.container.scrollLeft;
+		const dy = -cr.top + this.container.scrollTop;
+		return {
+			kind: "transformed",
+			local: bbox_local,
+			matrix: [[
+				ctm.a,
+				ctm.c,
+				ctm.e + dx
+			], [
+				ctm.b,
+				ctm.d,
+				ctm.f + dy
+			]]
+		};
+	}
+	/**
+	* Project an SVG `<line>`'s `x1,y1,x2,y2` from its own coordinate space
+	* to the container's coordinate space, where the HUD operates.
+	*/
+	line_endpoints_in_container(id) {
+		const el = this.element_index.get(id);
+		if (!(el instanceof SVGGraphicsElement)) return null;
+		if (typeof el.getScreenCTM !== "function") return null;
+		const ctm = el.getScreenCTM();
+		if (!ctm || !this.svg_root) return null;
+		const x1 = parseFloat(el.getAttribute("x1") ?? "0");
+		const y1 = parseFloat(el.getAttribute("y1") ?? "0");
+		const x2 = parseFloat(el.getAttribute("x2") ?? "0");
+		const y2 = parseFloat(el.getAttribute("y2") ?? "0");
+		if (!Number.isFinite(x1) || !Number.isFinite(y1)) return null;
+		if (!Number.isFinite(x2) || !Number.isFinite(y2)) return null;
+		const project = (px, py) => {
+			return [ctm.a * px + ctm.c * py + ctm.e, ctm.b * px + ctm.d * py + ctm.f];
+		};
+		const cr = this.container.getBoundingClientRect();
+		const [s1x, s1y] = project(x1, y1);
+		const [s2x, s2y] = project(x2, y2);
+		return {
+			p1: [s1x - cr.left + this.container.scrollLeft, s1y - cr.top + this.container.scrollTop],
+			p2: [s2x - cr.left + this.container.scrollLeft, s2y - cr.top + this.container.scrollTop]
+		};
+	}
+	/** Container-space bounding rect for a node. Callers running a batch
+	*  (snap session open, marquee) can pass a pre-read `container_rect`
+	*  to avoid the per-call layout flush.
+	*
+	*  `<svg>` elements (root or nested) establish a viewport (SVG 2 §7.2).
+	*  Their visible canvas is the viewport rect, NOT the union of
+	*  descendant geometry that `getBBox()` reports (SVG 2 §4.6.4). For
+	*  those we read `getBoundingClientRect()` — the CSSOM rendered box
+	*  of the `<svg>` element itself, independent of children. Every
+	*  other element type still goes through `getBBox` + `getScreenCTM`. */
+	container_box(id, container_rect) {
+		const el = this.element_index.get(id);
+		if (!el) return null;
+		const ge = el;
+		if (typeof ge.getBBox !== "function" || typeof ge.getScreenCTM !== "function") return null;
+		const cr = container_rect ?? this.container.getBoundingClientRect();
+		if (this.tag_of(id) === "svg") {
+			const r = el.getBoundingClientRect();
+			return {
+				x: r.left - cr.left + this.container.scrollLeft,
+				y: r.top - cr.top + this.container.scrollTop,
+				width: r.width,
+				height: r.height
+			};
+		}
+		let bbox;
+		try {
+			const b = ge.getBBox();
+			bbox = {
+				x: b.x,
+				y: b.y,
+				width: b.width,
+				height: b.height
+			};
+		} catch {
+			return null;
+		}
+		const ctm = ge.getScreenCTM();
+		if (!ctm) return null;
+		const project = (px, py) => ({
+			x: ctm.a * px + ctm.c * py + ctm.e,
+			y: ctm.b * px + ctm.d * py + ctm.f
+		});
+		const corners = [
+			project(bbox.x, bbox.y),
+			project(bbox.x + bbox.width, bbox.y),
+			project(bbox.x + bbox.width, bbox.y + bbox.height),
+			project(bbox.x, bbox.y + bbox.height)
+		];
+		const xs = corners.map((c) => c.x);
+		const ys = corners.map((c) => c.y);
+		const left = Math.min(...xs);
+		const top = Math.min(...ys);
+		const right = Math.max(...xs);
+		const bottom = Math.max(...ys);
+		return {
+			x: left - cr.left + this.container.scrollLeft,
+			y: top - cr.top + this.container.scrollTop,
+			width: right - left,
+			height: bottom - top
+		};
+	}
+	wire_events() {
+		const owner_doc = this.container.ownerDocument;
+		const win = owner_doc.defaultView ?? window;
+		const on = (target, event, handler) => {
+			target.addEventListener(event, handler);
+			this.teardown.push(() => target.removeEventListener(event, handler));
+		};
+		on(this.container, "pointerdown", (e) => this.dispatch_pointer(e, "pointer_down"));
+		on(win, "pointermove", (e) => this.dispatch_pointer(e, "pointer_move"));
+		on(win, "pointerup", (e) => this.dispatch_pointer(e, "pointer_up"));
+		on(owner_doc, "keydown", (e) => this.on_keydown(e));
+		on(win, "keydown", (e) => {
+			if (e.repeat || !IS_MODIFIER_KEY[e.key]) return;
+			this.sync_modifiers(e);
+		});
+		on(win, "keyup", (e) => {
+			if (!IS_MODIFIER_KEY[e.key]) return;
+			this.sync_modifiers(e);
+		});
+		on(win, "blur", () => this.sync_modifiers(null));
+		on(this.container, "contextmenu", (e) => e.preventDefault());
+		if (this.clipboard_enabled) {
+			on(owner_doc, "copy", (e) => this.on_copy_or_cut(e, "copy"));
+			on(owner_doc, "cut", (e) => this.on_copy_or_cut(e, "cut"));
+			on(owner_doc, "paste", (e) => this.on_paste(e));
+		}
+	}
+	/**
+	* Gate for claiming a native clipboard gesture. Deliberately STRICTER
+	* than the keyboard attention gate: focus-based only — pointer-over is
+	* a sufficient signal for a keystroke (worst case: a stolen scroll) but
+	* not for clipboard (worst case: destroying what the user believed they
+	* copied, or routing a paste meant for a host text field into the
+	* document). A user with text selected in a sibling panel and the
+	* pointer idly over the canvas must get their text copy.
+	*/
+	claims_clipboard(kind) {
+		if (this.text_edit) return false;
+		if (this.editor.state.mode !== "select") return false;
+		if (!this.attention.is_focus_within()) return false;
+		if (is_text_input_focused()) return false;
+		if (kind !== "paste") {
+			const sel = this.container.ownerDocument.getSelection();
+			if (sel && !sel.isCollapsed) return false;
+		}
+		return true;
+	}
+	/**
+	* Act-then-claim: an empty selection returns without `preventDefault()`,
+	* leaving the browser default (and the OS clipboard) untouched. The
+	* buffer-only `_internal.clipboard` variants are used here — the event's
+	* DataTransfer is this gesture's ONE external channel (the public
+	* commands would additionally write the provider; one gesture, one
+	* external write — FRD §Transport).
+	*/
+	on_copy_or_cut(e, kind) {
+		if (!this.claims_clipboard(kind)) return;
+		if (!e.clipboardData) return;
+		const internal = this.editor_internal();
+		const payload = kind === "copy" ? internal.clipboard.copy() : internal.clipboard.cut();
+		if (payload === null) return;
+		e.clipboardData.setData("text/plain", payload);
+		e.preventDefault();
+	}
+	/**
+	* Claim-then-act (mirrors the keydown claim doctrine: swallow when the
+	* gesture is aimed at the editor, not just when a handler consumed):
+	* a refused paste — junk text — still claims; the suppressed default is
+	* a no-op on a div anyway.
+	*/
+	on_paste(e) {
+		if (!this.claims_clipboard("paste")) return;
+		e.preventDefault();
+		const text = e.clipboardData?.getData("text/plain");
+		if (text) this.editor.commands.paste(text);
+	}
+	/**
+	* Master signal for modifier-driven UX consumers (measurement, future
+	* constrained-resize, …). Modifier changes aren't on the pointer-event
+	* path, so derived overlays would otherwise wait for the next pointer
+	* move; redraw eagerly. `null` means modifiers are forced clear
+	* (blur / focus-out).
+	*/
+	sync_modifiers(e) {
+		const next = e ? {
+			shift: e.shiftKey,
+			alt: e.altKey,
+			meta: e.metaKey,
+			ctrl: e.ctrlKey
+		} : NO_MODS;
+		const prev = this.hud.modifiers();
+		if (prev.shift === next.shift && prev.alt === next.alt && prev.meta === next.meta && prev.ctrl === next.ctrl) return;
+		const response = this.hud.dispatch({
+			kind: "modifiers",
+			mods: next
+		});
+		if ((prev.shift !== next.shift || prev.alt !== next.alt) && this.translate_orchestrator.has_active_session()) this.translate_orchestrator.redrive_modifiers(this.current_translate_modifiers());
+		if (prev.shift !== next.shift && this.resize_orchestrator.has_active_session()) this.resize_orchestrator.redrive_modifiers(this.current_resize_modifiers());
+		if (prev.shift !== next.shift && this.rotate_orchestrator.has_active_session()) this.rotate_orchestrator.redrive_modifiers(this.current_rotate_modifiers());
+		this.redraw();
+		if (response.cursorChanged) this.sync_cursor();
+		if (response.hoverChanged) this.editor_hover_internal?.push_surface_hover(this.hud.hover());
+	}
+	dispatch_pointer(e, kind) {
+		if (this.text_edit) {
+			const target_el = this.text_edit_target ? this.element_index.get(this.text_edit_target) : null;
+			const over_target = !!target_el && e.target instanceof Element && (e.target === target_el || target_el.contains(e.target));
+			if (kind === "pointer_down") {
+				e.preventDefault();
+				if (over_target) this.text_edit.pointerDown(e.clientX, e.clientY, e.shiftKey);
+				else this.text_edit.commit();
+			} else if (kind === "pointer_move") {
+				this.text_edit.pointerMove(e.clientX, e.clientY);
+				this.container.style.cursor = over_target ? "text" : "default";
+			} else if (kind === "pointer_up") this.text_edit.pointerUp();
+			return;
+		}
+		if (kind === "pointer_down") this.container.focus({ preventScroll: true });
+		const cr = this.container.getBoundingClientRect();
+		const x = e.clientX - cr.left;
+		const y = e.clientY - cr.top;
+		this.last_pointer.x = x;
+		this.last_pointer.y = y;
+		this.last_pointer_valid = true;
+		const mods = {
+			shift: e.shiftKey,
+			alt: e.altKey,
+			meta: e.metaKey,
+			ctrl: e.ctrlKey
+		};
+		const tool = this.current_tool;
+		if (tool.type === "insert") {
+			if (kind === "pointer_down") {
+				if (e.button === 0) {
+					try {
+						this.container.setPointerCapture(e.pointerId);
+					} catch {}
+					this.start_insert_gesture(tool.tag, {
+						x,
+						y
+					});
+					return;
+				}
+			} else if (this.pending_insert) {
+				if (kind === "pointer_move") {
+					this.update_insert_gesture({
+						x,
+						y
+					}, mods);
+					return;
+				}
+				if (kind === "pointer_up" && e.button === 0) {
+					this.commit_insert_gesture({
+						x,
+						y
+					}, mods);
+					return;
+				}
+			}
+		}
+		if (tool.type === "insert-text") {
+			if (kind === "pointer_down" && e.button === 0) {
+				const world = this.camera.screen_to_world({
+					x,
+					y
+				});
+				this.editor.set_tool({ type: "cursor" });
+				this.begin_text_insert(world);
+				return;
+			}
+		}
+		const button = e.button === 0 ? "primary" : e.button === 2 ? "secondary" : "middle";
+		let event;
+		if (kind === "pointer_move") event = {
+			kind,
+			x,
+			y,
+			mods
+		};
+		else event = {
+			kind,
+			x,
+			y,
+			button,
+			mods
+		};
+		const gesture_before_kind = kind === "pointer_up" ? null : this.hud.gesture().kind;
+		const response = this.hud.dispatch(event);
+		if (gesture_before_kind === "idle" && this.hud.gesture().kind !== "idle") try {
+			this.container.setPointerCapture(e.pointerId);
+		} catch {}
+		if (response.needsRedraw) this.redraw();
+		if (response.cursorChanged) this.sync_cursor();
+		if (response.hoverChanged) this.editor_hover_internal?.push_surface_hover(this.hud.hover());
+	}
+	static {
+		this.INSERT_DRAG_THRESHOLD_PX_SQ = 4;
+	}
+	/** Arm an insertion gesture on pointer-down. No IR mutation — keeping
+	*  the IR pristine through the click window lets click-no-drag commit
+	*  as one atomic `commands.insert` rather than create-zero-then-resize. */
+	start_insert_gesture(tag, screen_pt) {
+		this.pending_insert = {
+			phase: "armed",
+			tag,
+			anchor: this.camera.screen_to_world(screen_pt),
+			anchor_screen: {
+				x: screen_pt.x,
+				y: screen_pt.y
+			}
+		};
+	}
+	/** Per-frame update. `armed` waits for the drag threshold; `drawing`
+	*  pushes a frame through the preview session. */
+	update_insert_gesture(screen_pt, mods) {
+		const cur = this.pending_insert;
+		if (!cur) return;
+		if (cur.phase === "armed") {
+			const dx = screen_pt.x - cur.anchor_screen.x;
+			const dy = screen_pt.y - cur.anchor_screen.y;
+			if (dx * dx + dy * dy < DomSurface.INSERT_DRAG_THRESHOLD_PX_SQ) return;
+			this.arm_to_draw(cur);
+		}
+		const live = this.pending_insert;
+		if (live?.phase !== "drawing") return;
+		this.push_drawing_frame(live, screen_pt, mods);
+	}
+	/** Transition `armed` → `drawing`: open `insert_preview` + snap session. */
+	arm_to_draw(armed) {
+		const session = this.editor.commands.insert_preview(armed.tag, insertions.initial_attrs(armed.tag, armed.anchor));
+		const snap_session = this.editor.style.snap_enabled && (armed.tag === "rect" || armed.tag === "ellipse") ? this.open_snap_session_for([session.id]) : null;
+		this.pending_insert = {
+			phase: "drawing",
+			tag: armed.tag,
+			anchor: armed.anchor,
+			anchor_screen: armed.anchor_screen,
+			session,
+			snap_session
+		};
+	}
+	/** Push one drag frame through the preview session. */
+	push_drawing_frame(drawing, screen_pt, mods) {
+		let world = this.camera.screen_to_world(screen_pt);
+		if (drawing.snap_session) {
+			const corrected = this.snap_insert_point(drawing.tag, drawing.anchor, drawing.anchor_screen, world, drawing.snap_session);
+			if (corrected) world = corrected;
+		}
+		const dm = {
+			shift: mods.shift,
+			alt: mods.alt
+		};
+		drawing.session.update(insertions.compute_drag_attrs(drawing.tag, drawing.anchor, world, dm));
+	}
+	/** Commit on pointer-up. `armed` → one-shot `commands.insert` with
+	*  `default_attrs` (click-no-drag, never touches the IR mid-gesture).
+	*  `drawing` → push final frame + close the preview. */
+	commit_insert_gesture(screen_pt, mods) {
+		const cur = this.pending_insert;
+		if (!cur) return;
+		if (cur.phase === "armed") this.editor.commands.insert(cur.tag, insertions.default_attrs(cur.tag, cur.anchor));
+		else {
+			this.push_drawing_frame(cur, screen_pt, mods);
+			cur.session.commit();
+			cur.snap_session?.dispose?.();
+		}
+		this.pending_insert = null;
+		this.editor.set_tool({ type: "cursor" });
+	}
+	/** Snap the in-progress insert's moving corner to neighbor geometry.
+	*  Returns a corrected world-space pointer, or `null` to leave the
+	*  input uncorrected. Operates in container CSS-px (the snap engine's
+	*  native space) and projects the correction back to world via
+	*  `camera.zoom`. Rect / ellipse only. */
+	snap_insert_point(tag, anchor, anchor_screen, current, snap_session) {
+		if (tag !== "rect" && tag !== "ellipse") return null;
+		const zoom = this.camera.zoom;
+		if (zoom <= 0) return null;
+		if (current.x === anchor.x && current.y === anchor.y) return null;
+		const current_screen = this.camera.world_to_screen(current);
+		const effective = {
+			x: Math.min(anchor_screen.x, current_screen.x),
+			y: Math.min(anchor_screen.y, current_screen.y),
+			width: Math.abs(current_screen.x - anchor_screen.x),
+			height: Math.abs(current_screen.y - anchor_screen.y)
+		};
+		const edges_x = current.x === anchor.x ? null : current.x > anchor.x ? "right" : "left";
+		const edges_y = current.y === anchor.y ? null : current.y > anchor.y ? "bottom" : "top";
+		const opts = {
+			enabled: this.editor.style.snap_enabled,
+			threshold_px: this.editor.style.snap_threshold_px
+		};
+		const result = snap_session.snap_resize(effective, {
+			x: edges_x,
+			y: edges_y
+		}, opts);
+		if (result.dx === 0 && result.dy === 0) return current;
+		return {
+			x: current.x + result.dx / zoom,
+			y: current.y + result.dy / zoom
+		};
+	}
+	sync_cursor() {
+		if (this.text_edit) {
+			this.container.style.cursor = "default";
+			return;
+		}
+		if (this.current_tool.type === "insert") {
+			this.container.style.cursor = "crosshair";
+			return;
+		}
+		if (this.current_tool.type === "insert-text") {
+			this.container.style.cursor = "text";
+			return;
+		}
+		this.container.style.cursor = this.hud.cursorCss();
+	}
+	on_keydown(e) {
+		if (this.text_edit) return;
+		if (e.code !== "Escape" && !this.attention.is_attended()) return;
+		if (e.code === "Escape") {
+			const canceled = this.cancel_in_flight();
+			if (!this.attention.is_attended()) return;
+			if (!canceled && this.vector_edit) this.exit_vector_edit();
+		}
+		if ((this.active_preview || this.translate_orchestrator.has_active_session() || this.resize_orchestrator.has_active_session() || this.rotate_orchestrator.has_active_session() || this.pending_insert) && e.code !== "Escape") return;
+		if (this.editor.keymap.claims(e)) e.preventDefault();
+		this.editor.keymap.dispatch(e);
+	}
+	/**
+	* Re-express a HUD tap as an editor {@link PickEvent} and fan it out on the
+	* editor's pick channel. The HUD already resolved everything that matters —
+	* the pointer-down point, the hit node, and click-vs-drag — so this is a
+	* pure translation (HUD `[x, y]` tuple → editor `{ x, y }` doc-space point)
+	* with NO re-hit-testing. Taking the hit from the HUD (not a fresh
+	* `node_at_point`) guarantees the pick and the selection it accompanies can
+	* never disagree. Observe-only: this mutates no editor state.
+	*/
+	handle_tap(tap) {
+		this.editor._internal.push_pick({
+			point: {
+				x: tap.point[0],
+				y: tap.point[1]
+			},
+			node_id: tap.hit,
+			button: tap.button,
+			mods: tap.mods
+		});
+	}
+	commit_intent(intent) {
+		switch (intent.kind) {
+			case "select":
+				this.editor.commands.select(intent.ids, { mode: intent.mode });
+				return;
+			case "deselect_all":
+				this.editor.commands.deselect();
+				return;
+			case "clear_vector_selection": {
+				if (!this.vector_edit) return;
+				const before = this.vector_edit.snapshot_selection();
+				this.vector_edit.clear_selection();
+				this.sync_selection_mirror();
+				this.redraw();
+				this.record_vector_selection_change(before, "clear vector selection");
+				return;
+			}
+			case "translate":
+				this.handle_translate(intent);
+				return;
+			case "resize":
+				this.handle_resize(intent);
+				return;
+			case "rotate":
+				this.handle_rotate(intent);
+				return;
+			case "marquee_select":
+				this.handle_marquee(intent);
+				return;
+			case "lasso_select":
+				this.handle_lasso_select(intent);
+				return;
+			case "set_endpoint":
+				this.handle_set_endpoint(intent);
+				return;
+			case "enter_content_edit":
+				this.editor.commands.select(intent.id);
+				this.editor.enter_content_edit(intent.id);
+				return;
+			case "exit_content_edit":
+				this.exit_vector_edit();
+				return;
+			case "select_vertex":
+				this.handle_select_vertex(intent);
+				return;
+			case "translate_vertices":
+				this.handle_translate_vertices(intent);
+				return;
+			case "translate_vector_selection":
+				this.handle_translate_vector_selection(intent);
+				return;
+			case "select_segment":
+				this.handle_select_segment(intent);
+				return;
+			case "select_tangent":
+				this.handle_select_tangent(intent);
+				return;
+			case "set_tangent":
+				this.handle_set_tangent_intent(intent);
+				return;
+			case "split_segment":
+				this.handle_split_segment(intent);
+				return;
+			case "bend_segment":
+				this.handle_bend_segment(intent);
+				return;
+			case "cancel_gesture":
+				this.cancel_in_flight();
+				return;
+		}
+	}
+	handle_translate(intent) {
+		if (intent.ids.length === 0) return;
+		const zoom = this.camera.zoom || 1;
+		const dx_world = intent.dx / zoom;
+		const dy_world = intent.dy / zoom;
+		this.translate_orchestrator.drive({
+			ids: intent.ids,
+			movement: [dx_world, dy_world]
+		}, this.current_translate_modifiers(), {
+			phase: intent.phase,
+			policy: "engine",
+			snap: true
+		});
+		if (intent.phase === "commit") this.request_redraw();
+	}
+	/**
+	* Shift axis-lock for point-level drags (gridaco/grida#848) — the
+	* vertex / endpoint counterpart of whole-object translate's
+	* `axis_lock: "by_dominance"` (see `current_translate_modifiers`).
+	* Collapses the lesser axis of a local-frame delta when Shift is held,
+	* via the same cmath rule the translate pipeline's `axis_lock` stage
+	* uses; identity when Shift is up. Pull-at-consume from the HUD modifier
+	* store so a mid-drag Shift press/release reflects on the next frame.
+	*/
+	axis_lock_point_delta(dx, dy) {
+		if (!this.hud.modifiers().shift) return [dx, dy];
+		const locked = cmath.ext.movement.axisLockedByDominance([dx, dy]);
+		return cmath.ext.movement.normalize(locked);
+	}
+	/**
+	* Point-level snap (gridaco/grida#844) — the vertex / endpoint counterpart
+	* of whole-object translate's edge/center snap. Snaps a dragged point's
+	* delta so it aligns with (or lands on) a sibling point: a path's other
+	* vertices, or a `<line>`'s opposite endpoint.
+	*
+	* Runs entirely in the element's **local frame**: agents (the moving
+	* point[s]) and neighbors (the static sibling points) come straight from
+	* the path's vector network / line attributes — no projection, no separate
+	* neighbor source. The corrected delta is returned in that same local frame
+	* so the caller applies it exactly where it already applies the local drag
+	* delta. Only the snap GUIDE is projected to screen (via the element CTM)
+	* for HUD rendering.
+	*
+	* Honors the global snap toggle (`style.snap_enabled`) and threshold
+	* (`style.snap_threshold_px`, converted to local units by the CTM scale) —
+	* snap off ⇒ free point dragging, per the issue. Bypassed when
+	* `suppress_point_snap` is set (keyboard nudge). Identity when there are no
+	* neighbors / agents.
+	*
+	* The shared `SnapSession` drops 0-area rects (its empty-`<g>` "jerk to
+	* origin" defense), so each point is modeled as a sub-pixel square centered
+	* on it. Symmetric inflation cancels in the corrected delta (the engine's
+	* matched same-edge offset carries the same ±eps on both sides), so eps
+	* magnitude is immaterial as long as it stays far below the threshold.
+	*/
+	snap_local_point_delta(raw_dx, raw_dy, agents_local, neighbors_local, ctm) {
+		this.point_snap_guide = void 0;
+		const style = this.editor.style;
+		if (this.suppress_point_snap || !style.snap_enabled || agents_local.length === 0 || neighbors_local.length === 0 || raw_dx === 0 && raw_dy === 0) return [raw_dx, raw_dy];
+		const det = ctm.a * ctm.d - ctm.c * ctm.b;
+		const scale = Math.sqrt(Math.abs(det)) || 1;
+		const threshold_local = style.snap_threshold_px / scale;
+		const eps = threshold_local * 1e-6 || 1e-9;
+		const to_rect = (p) => ({
+			x: p[0] - eps / 2,
+			y: p[1] - eps / 2,
+			width: eps,
+			height: eps
+		});
+		const session = new SnapSession({
+			agents: agents_local.map(to_rect),
+			neighbors: neighbors_local.map(to_rect)
+		});
+		const { delta, guide } = session.snap({
+			x: raw_dx,
+			y: raw_dy
+		}, {
+			enabled: true,
+			threshold_px: threshold_local
+		});
+		session.dispose();
+		if (guide) this.point_snap_guide = this.project_local_guide_to_screen(guide, ctm, this.container_offset());
+		return [delta.x, delta.y];
+	}
+	/** Split a path's baseline vertices into the snap agents (the moving
+	*  sub-selection) and neighbors (everything else) for
+	*  {@link snap_local_point_delta}. Both in path-local space. */
+	vertex_snap_points(model, moving) {
+		const verts = model.snapshot().vertices;
+		const moving_set = new Set(moving);
+		const agents = [];
+		const neighbors = [];
+		for (let i = 0; i < verts.length; i++) (moving_set.has(i) ? agents : neighbors).push(verts[i]);
+		return {
+			agents,
+			neighbors
+		};
+	}
+	/** Project a point-snap guide from an element's local frame to screen
+	*  CSS-px (the HUD canvas's identity coordinate system), via the element
+	*  CTM + container offset — the same projection `vector_of` uses for
+	*  vertex chrome. The local-frame analog of `project_guide_to_screen`
+	*  (which projects world-space orchestrator guides via the camera). */
+	project_local_guide_to_screen(g, ctm, container_offset) {
+		return {
+			lines: g.lines.map((l) => {
+				const [x1, y1] = project_point_through_ctm(l.x1, l.y1, ctm, container_offset);
+				const [x2, y2] = project_point_through_ctm(l.x2, l.y2, ctm, container_offset);
+				return {
+					...l,
+					x1,
+					y1,
+					x2,
+					y2
+				};
+			}),
+			points: g.points.map(([x, y]) => project_point_through_ctm(x, y, ctm, container_offset)),
+			rules: g.rules.map(([axis, value]) => {
+				const [px, py] = project_point_through_ctm(axis === "x" ? value : 0, axis === "x" ? 0 : value, ctm, container_offset);
+				return [axis, axis === "x" ? px : py];
+			})
+		};
+	}
+	/** Translation from screen/page CSS-px to the HUD's container-identity
+	*  space: subtract the container's page offset, add its scroll. Used at
+	*  every `getScreenCTM` projection boundary (chrome, marquee, point snap)
+	*  so they share one definition of "where the container's origin is". */
+	container_offset() {
+		const cr = this.container.getBoundingClientRect();
+		return [-cr.left + this.container.scrollLeft, -cr.top + this.container.scrollTop];
+	}
+	/**
+	* Local-frame drag delta for a vertex sub-selection, from the HUD's
+	* container-space `dx/dy`. Inverse-projects through the element CTM (so a
+	* path under a scaled `<g>` / nested viewport tracks the cursor 1:1) then
+	* point-snaps to the path's other vertices (#844) — before axis-lock, so
+	* the lock keeps final say on a constrained axis. Identity when the element
+	* has no usable CTM. A tangent-only drag (empty `indices`) yields no snap
+	* agents, so snap is a no-op. Shared by the two vertex-translate handlers;
+	* the caller applies axis-lock and feeds the result to `translateVertices`.
+	*/
+	vertex_drag_local_delta(node_id, baseline_model, indices, dx, dy) {
+		const el = this.element_index.get(node_id);
+		const ctm = el instanceof SVGGraphicsElement && typeof el.getScreenCTM === "function" ? el.getScreenCTM() : null;
+		if (!ctm) return [dx, dy];
+		let local_dx = dx;
+		let local_dy = dy;
+		if (ctm.a * ctm.d - ctm.c * ctm.b !== 0) [local_dx, local_dy] = project_delta_inverse_ctm(dx, dy, ctm);
+		const { agents, neighbors } = this.vertex_snap_points(baseline_model, indices);
+		return this.snap_local_point_delta(local_dx, local_dy, agents, neighbors, ctm);
+	}
+	/** Snapshot of HUD modifier state mapped to the orchestrator's `GestureModifiers`.
+	*  Pull-at-consume: HUD is the canonical store (see `sync_modifiers`),
+	*  read live so mid-drag Shift press/release reflects on the next pass. */
+	current_translate_modifiers() {
+		const mods = this.hud.modifiers();
+		return {
+			axis_lock: mods.shift ? "by_dominance" : "off",
+			force_disable_snap: false,
+			clone: mods.alt
+		};
+	}
+	/** Snapshot of HUD modifier state mapped to `ResizeModifiers`. Same
+	*  pull-at-consume discipline as `current_translate_modifiers`. */
+	current_resize_modifiers() {
+		return {
+			aspect_lock: this.hud.modifiers().shift ? "uniform" : "off",
+			force_disable_snap: false
+		};
+	}
+	handle_resize(intent) {
+		if (intent.ids.length === 0) return;
+		for (const id of intent.ids) if (!resize_pipeline.intent.is_resizable_node(this.editor.document, id)) return;
+		const dir = intent.anchor;
+		let target_width;
+		let target_height;
+		if (intent.shape && intent.shape.kind === "transformed") {
+			target_width = intent.shape.local.width;
+			target_height = intent.shape.local.height;
+		} else {
+			const zoom = this.camera.zoom || 1;
+			target_width = intent.rect.width / zoom;
+			target_height = intent.rect.height / zoom;
+		}
+		this.resize_orchestrator.drive({
+			ids: intent.ids,
+			direction: dir,
+			target_width,
+			target_height
+		}, this.current_resize_modifiers(), {
+			phase: intent.phase === "commit" ? "commit" : "preview",
+			snap: true
+		});
+		if (intent.phase === "commit") this.request_redraw();
+	}
+	/** Snapshot of HUD modifier state mapped to `RotateModifiers`. Same
+	*  pull-at-consume discipline as the translate / resize equivalents. */
+	current_rotate_modifiers() {
+		return {
+			angle_snap: this.hud.modifiers().shift ? "step" : "off",
+			force_disable_snap: false
+		};
+	}
+	handle_rotate(intent) {
+		if (intent.ids.length === 0) return;
+		const result = this.rotate_orchestrator.drive({
+			ids: intent.ids,
+			angle_radians: intent.angle
+		}, this.current_rotate_modifiers(), { phase: intent.phase === "commit" ? "commit" : "preview" });
+		if (result && result.outcome && result.outcome.kind === "refused") this.emit_rotate_refusal(result.outcome.verdicts);
+		if (intent.phase === "commit") this.request_redraw();
+	}
+	/** Map each refusal verdict to a user-facing chip message. v1 fires
+	*  one toast for the first refusal encountered — the user can address
+	*  it and try again. Refusal verdicts come straight from
+	*  `is_rotatable`. */
+	emit_rotate_refusal(verdicts) {
+		for (const v of verdicts.values()) {
+			if (v.kind !== "refuse") continue;
+			const message = v.reason === "non-trivial-transform" ? "Cannot rotate cleanly — element has a composite transform. Use Flatten Transform first." : v.reason === "text-with-glyph-rotate" ? "Cannot rotate — text has per-glyph rotation. Edit `rotate=` or remove it first." : v.reason === "css-property-transform" ? "Cannot rotate — transform is set via CSS. Move the declaration to the `transform` attribute first." : "Cannot rotate — element has an animated transform. Remove `<animateTransform>` first.";
+			console.warn(`[svg-editor] ${message}`);
+			return;
+		}
+	}
+	/**
+	* Apply a `set_endpoint` intent — moving one endpoint of a vector
+	* `<line>` to a new container-space position. Unprojects to the element's
+	* own (SVG) coord space and updates the corresponding attribute.
+	*/
+	handle_set_endpoint(intent) {
+		const id = intent.id;
+		if (this.tag_of(id) !== "line") return;
+		const internal = this.editor_internal();
+		const doc = internal.doc;
+		const emit = internal.emit;
+		if (!this.active_preview || this.active_preview.kind !== "endpoint" || this.active_preview.id !== id || this.active_preview.endpoint !== intent.endpoint) {
+			if (this.active_preview) this.active_preview.session.discard();
+			const initial = {
+				x1: numAttr(doc, id, "x1"),
+				y1: numAttr(doc, id, "y1"),
+				x2: numAttr(doc, id, "x2"),
+				y2: numAttr(doc, id, "y2")
+			};
+			this.active_preview = {
+				kind: "endpoint",
+				id,
+				endpoint: intent.endpoint,
+				initial,
+				session: internal.history.preview("set-endpoint")
+			};
+		}
+		const initial = this.active_preview.initial;
+		const endpoint = this.active_preview.endpoint;
+		const pos_own = this.container_point_in_own_frame(id, intent.pos[0], intent.pos[1]);
+		if (!pos_own) return;
+		const target_x = pos_own.x;
+		const target_y = pos_own.y;
+		const base_x = endpoint === "p1" ? initial.x1 : initial.x2;
+		const base_y = endpoint === "p1" ? initial.y1 : initial.y2;
+		let dx = target_x - base_x;
+		let dy = target_y - base_y;
+		const el = this.element_index.get(id);
+		const ctm = el instanceof SVGGraphicsElement && typeof el.getScreenCTM === "function" ? el.getScreenCTM() : null;
+		if (ctm) {
+			const other = endpoint === "p1" ? [initial.x2, initial.y2] : [initial.x1, initial.y1];
+			[dx, dy] = this.snap_local_point_delta(dx, dy, [[base_x, base_y]], [other], ctm);
+		}
+		const [locked_dx, locked_dy] = this.axis_lock_point_delta(dx, dy);
+		const final_x = base_x + locked_dx;
+		const final_y = base_y + locked_dy;
+		const apply = () => {
+			if (endpoint === "p1") {
+				doc.set_attr(id, "x1", String(final_x));
+				doc.set_attr(id, "y1", String(final_y));
+			} else {
+				doc.set_attr(id, "x2", String(final_x));
+				doc.set_attr(id, "y2", String(final_y));
+			}
+			emit();
+		};
+		const revert = () => {
+			doc.set_attr(id, "x1", String(initial.x1));
+			doc.set_attr(id, "y1", String(initial.y1));
+			doc.set_attr(id, "x2", String(initial.x2));
+			doc.set_attr(id, "y2", String(initial.y2));
+			emit();
+		};
+		this.active_preview.session.set({
+			providerId: "svg-editor",
+			apply,
+			revert
+		});
+		if (intent.phase === "commit") {
+			this.point_snap_guide = void 0;
+			this.active_preview.session.commit();
+			this.active_preview = null;
+		}
+	}
+	/**
+	* Convert a container-space point to the element's own SVG coord space.
+	* Inverse of `line_endpoints_in_container`'s projection.
+	*/
+	container_point_in_own_frame(id, cx, cy) {
+		const el = this.element_index.get(id);
+		if (!(el instanceof SVGGraphicsElement)) return null;
+		if (typeof el.getScreenCTM !== "function") return null;
+		const ctm = el.getScreenCTM();
+		if (!ctm || !this.svg_root) return null;
+		const cr = this.container.getBoundingClientRect();
+		const inv = ctm.inverse();
+		const p = this.svg_root.createSVGPoint();
+		p.x = cx + cr.left - this.container.scrollLeft;
+		p.y = cy + cr.top - this.container.scrollTop;
+		const t = p.matrixTransform(inv);
+		return {
+			x: t.x,
+			y: t.y
+		};
+	}
+	/**
+	* Capture the vector-edit sub-selection on the first region-gesture
+	* preview, and reuse it for every subsequent preview + the commit.
+	* Anchors additive merging and tangent-candidate eligibility to the
+	* gesture-start state so they don't shift mid-drag. Shared by marquee
+	* and lasso — both gestures emit a preview-per-move, both consume the
+	* same baseline. See `vector_edit_region_baseline` doc-comment for the
+	* full rationale. Caller must have a non-null `this.vector_edit`.
+	*/
+	ensure_region_baseline() {
+		if (!this.vector_edit_region_baseline) this.vector_edit_region_baseline = {
+			vertices: this.vector_edit.selected_vertices.slice(),
+			segments: this.vector_edit.selected_segments.slice(),
+			tangents: this.vector_edit.selected_tangents.map((t) => [t[0], t[1]])
+		};
+		return this.vector_edit_region_baseline;
+	}
+	handle_marquee(intent) {
+		if (this.vector_edit) {
+			this.handle_marquee_vectors(intent);
+			return;
+		}
+		if (!this.scene_marquee_baseline) {
+			const cr = this.container.getBoundingClientRect();
+			const root = this.editor.tree().root;
+			const boxes = [];
+			for (const id of this._ensure_z_order(false, root)) {
+				const box = this.container_box(id, cr);
+				if (box) boxes.push([id, box]);
+			}
+			this.scene_marquee_baseline = {
+				boxes,
+				selection: this.editor.state.selection
+			};
+		}
+		const next = this.resolve_scene_marquee(intent.rect, intent.additive);
+		this.editor.commands.select(next, { mode: "replace" });
+		if (intent.phase === "commit") this.scene_marquee_baseline = null;
+	}
+	/** Resolve the scene marquee selection for one frame from the frozen,
+	*  paint-ordered box snapshot. The rule (shadow + additive) lives in the
+	*  headless `marquee_selection` policy (`src/selection/marquee.ts`, spec
+	*  `docs/marquee-selection.md`); the surface only supplies the boxes and
+	*  the gesture-start baseline. Selection is deterministic in (marquee rect,
+	*  gesture-start selection, shift) — meta is a gesture-routing modifier
+	*  only (it decides that a drag IS a marquee), not a resolution input. */
+	resolve_scene_marquee(rect, additive) {
+		const { boxes, selection } = this.scene_marquee_baseline;
+		return marquee_selection.resolve(boxes, rect, selection, { additive });
+	}
+	/**
+	* Vector marquee predicate — applies the **vertex-priority precedence
+	* rule** ported from the main editor:
+	*
+	*   1. Vertices: keep those whose container-space position falls inside
+	*      the marquee rect.
+	*   2. Tangents: keep only those at the (new) selection's neighbouring
+	*      vertices whose control point falls inside the rect.
+	*   3. Segments: keep only segments **fully contained** in the rect AND
+	*      whose endpoints are NOT among the selected vertices. (If a vertex
+	*      is selected, the segments meeting it would double-credit the
+	*      drag, so they're dropped — "vertex priority.")
+	*
+	* The rect comes in container CSS-px (HUD's frame). We project it back
+	* to path-local by applying the inverse-CTM linear part to its size and
+	* shifting its position via `project_delta_inverse_ctm` against the
+	* top-left in doc-space — but a cleaner approach is to project each
+	* vertex/tangent/segment-sample into doc-space and test against the rect
+	* directly. For consistency with how `vector_of` projects, we do the
+	* "project geometry to doc-space, test against doc-space rect" approach.
+	*/
+	handle_marquee_vectors(intent) {
+		if (!this.vector_edit) return;
+		const node_id = this.vector_edit.node_id;
+		const el = this.element_index.get(node_id);
+		if (!(el instanceof SVGGraphicsElement)) return;
+		if (typeof el.getScreenCTM !== "function") return;
+		const ctm = el.getScreenCTM();
+		if (!ctm) return;
+		const offset = this.container_offset();
+		const model = this.session_model();
+		if (!model) return;
+		const rect = intent.rect;
+		const baseline = this.ensure_region_baseline();
+		const pre_selection = {
+			vertices: baseline.vertices,
+			segments: baseline.segments,
+			tangents: baseline.tangents
+		};
+		const candidates = marquee.subpath_select_candidates(model, pre_selection, (p) => project_point_through_ctm(p[0], p[1], ctm, offset));
+		const vertex_hits = marquee.points_in_rect(candidates.vertices, rect);
+		const tangent_hits = marquee.points_in_rect(candidates.tangents, rect);
+		const rect_local = inverse_project_rect(rect, ctm, offset);
+		const vertex_hit_set = new Set(vertex_hits);
+		const segment_hits = [];
+		if (rect_local) {
+			const segs = model.snapshot().segments;
+			for (const sid of candidates.segments) {
+				const s = segs[sid];
+				if (vertex_hit_set.has(s.a) || vertex_hit_set.has(s.b)) continue;
+				if (model.segmentContainedByRect(sid, rect_local)) segment_hits.push(sid);
+			}
+		}
+		const merged = marquee.merge_subpath_hits(pre_selection, {
+			vertices: vertex_hits,
+			segments: segment_hits,
+			tangents: tangent_hits
+		}, intent.additive);
+		this.vector_edit.set_selection(merged);
+		this.sync_selection_mirror();
+		if (intent.phase === "commit") {
+			const baseline_snapshot = Object.freeze({
+				vertices: baseline.vertices,
+				segments: baseline.segments,
+				tangents: baseline.tangents
+			});
+			this.vector_edit_region_baseline = null;
+			this.record_vector_selection_change(baseline_snapshot, "marquee select");
+		}
+		this.redraw();
+	}
+	/**
+	* Lasso (freeform polygon) sub-selection — vector analogue of
+	* `handle_marquee`. Per the main editor's decision
+	* (editor/grida-canvas/reducers/methods/vector.ts:163–291 +
+	* event-target.reducer.ts:629–641) lasso targets **vertices and
+	* tangents only** — segments are NOT tested against the polygon. The
+	* segment-vs-region test is rect-only and lives in the marquee path.
+	*
+	* Lifecycle / baseline behaviour matches marquee: snapshot on first
+	* preview, reuse for additive merge and tangent-eligibility, clear on
+	* commit and on vector-edit exit. Scene (non-vector-edit) lasso is a
+	* follow-up.
+	*/
+	handle_lasso_select(intent) {
+		if (!this.vector_edit) return;
+		const node_id = this.vector_edit.node_id;
+		const el = this.element_index.get(node_id);
+		if (!(el instanceof SVGGraphicsElement)) return;
+		if (typeof el.getScreenCTM !== "function") return;
+		const ctm = el.getScreenCTM();
+		if (!ctm) return;
+		const offset = this.container_offset();
+		const model = this.session_model();
+		if (!model) return;
+		const polygon = intent.polygon;
+		if (polygon.length < 3) return;
+		const baseline = this.ensure_region_baseline();
+		const pre_selection = {
+			vertices: baseline.vertices,
+			segments: baseline.segments,
+			tangents: baseline.tangents
+		};
+		const candidates = marquee.subpath_select_candidates(model, pre_selection, (p) => project_point_through_ctm(p[0], p[1], ctm, offset));
+		const vertex_hits = marquee.points_in_polygon(candidates.vertices, polygon);
+		const tangent_hits = marquee.points_in_polygon(candidates.tangents, polygon);
+		const merged = marquee.merge_subpath_hits(pre_selection, {
+			vertices: vertex_hits,
+			segments: [],
+			tangents: tangent_hits
+		}, intent.additive);
+		this.vector_edit.set_selection(merged);
+		this.sync_selection_mirror();
+		if (intent.phase === "commit") {
+			const baseline_snapshot = Object.freeze({
+				vertices: baseline.vertices,
+				segments: baseline.segments,
+				tangents: baseline.tangents
+			});
+			this.vector_edit_region_baseline = null;
+			this.record_vector_selection_change(baseline_snapshot, "lasso select");
+		}
+		this.redraw();
+	}
+	/**
+	* Dispatched by the editor when `enter_content_edit(id)` is called. The
+	* editor has already gated on text-OR-path eligibility; this method
+	* routes on the actual tag.
+	*/
+	enter_content_edit(id) {
+		if (this.text_edit || this.vector_edit) return false;
+		const tag = this.tag_of(id);
+		if (tag === "text" || tag === "tspan") return this.enter_text_edit(id);
+		if (this.editor_internal().doc.is_vector_edit_target(id) !== null) return this.enter_vector_edit(id);
+		return false;
+	}
+	/**
+	* Place a new single-line `<text>` at `world` and immediately enter
+	* content-edit on it. Creation + first edit are bracketed in one history
+	* preview (via `insert_text_preview`): committing with content is one
+	* undo step, exiting empty discards the node entirely (empty-equals-
+	* delete). The bracket is finalized in {@link enter_text_edit}'s
+	* commit/cancel callbacks via `this.pending_text_insert`.
+	*
+	* Default font appearance lives in `core/insertions.ts`
+	* (`default_text_attrs`), alongside the shape insertion defaults — not
+	* hard-coded here — so the per-element insert semantics stay in core (P3).
+	*/
+	begin_text_insert(world) {
+		if (this.text_edit || this.vector_edit) return;
+		const session = this.editor_internal().insert_text_preview(insertions.default_text_attrs(world));
+		this.pending_text_insert = {
+			id: session.id,
+			session
+		};
+		this.editor.enter_content_edit(session.id);
+		if (this.text_edit_target !== session.id) {
+			this.pending_text_insert = null;
+			session.discard();
+		}
+	}
+	enter_text_edit(id) {
+		if (this.text_edit) return false;
+		const el = this.element_index.get(id);
+		if (!(el instanceof SVGElement)) return false;
+		const doc = this.editor._internal;
+		if (!(el instanceof SVGTextContentElement)) return false;
+		this.text_edit_target = id;
+		this.text_edit_original = doc.doc.text_of(id);
+		this.text_edit = TEXT_EDIT_PENDING;
+		this.editor.commands.set_mode("edit-content");
+		this.sync_surface_selection();
+		this.sync_cursor();
+		this.redraw();
+		const text_surface = new SvgTextSurface(this.element_index.get(id) ?? el);
+		const is_mac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
+		let settled = false;
+		this.text_edit = createTextEditor({
+			container: this.container,
+			initialText: this.text_edit_original,
+			layout: text_surface,
+			surface: text_surface,
+			isMac: is_mac,
+			ariaLabel: "edit svg text",
+			requiresMutationsForCommit: (text) => /\s{2,}|^\s|\s$/.test(text),
+			callbacks: {
+				onChange: (text) => {
+					doc.doc.set_text(id, text);
+				},
+				onCommit: (final_text) => {
+					if (settled) return;
+					settled = true;
+					this.finalize_text_exit(id, final_text);
+				},
+				onCancel: () => {
+					if (settled) return;
+					settled = true;
+					this.finalize_text_exit(id, this.text_edit_original);
+				},
+				onUndoFallthrough: () => {
+					this.text_edit?.commit();
+					this.editor.commands.undo();
+				},
+				onRedoFallthrough: () => {
+					this.text_edit?.commit();
+					this.editor.commands.redo();
+				}
+			}
+		});
+		return true;
+	}
+	/**
+	* Exit inline text-edit back to select mode. P4 — observers should see a
+	* consistent post-edit state, so do all observable mutations + surface
+	* syncs first, then clear the text-edit handles last (so anything polling
+	* "is text-edit active?" still says yes until the world is settled).
+	*/
+	cleanup_text_edit() {
+		this.editor.commands.set_mode("select");
+		this.render();
+		this.sync_surface_selection();
+		this.sync_cursor();
+		this.redraw();
+		this.text_edit = null;
+		this.text_edit_target = null;
+	}
+	/**
+	* Realize the result of a text content-edit session and exit. `result`
+	* is the text that should remain — the typed text on commit, the original
+	* on cancel. Implements the empty-equals-delete rule (design:
+	* docs/wg/feat-svg-editor/text-tool.md): an empty result removes the node.
+	* (see test/svg-editor-text-empty-delete.md)
+	*
+	* The empty-equals-delete decision is pure and lives in
+	* {@link resolve_text_exit} (`core/text-edit.ts`) — tested headlessly.
+	* This method is the thin dispatcher that realizes each action against
+	* the surface + editor.
+	*/
+	finalize_text_exit(id, result) {
+		const internal = this.editor_internal();
+		const insert = this.pending_text_insert;
+		this.pending_text_insert = null;
+		const action = resolve_text_exit({
+			origin: insert && insert.id === id ? "fresh" : "existing",
+			result,
+			original: this.text_edit_original
+		});
+		if (action.kind === "commit_insert" || action.kind === "discard_insert") {
+			if (!insert) return;
+			if (action.kind === "discard_insert") {
+				this.cleanup_text_edit();
+				insert.session.discard();
+			} else {
+				this.cleanup_text_edit();
+				insert.session.commit();
+			}
+			return;
+		}
+		internal.doc.set_text(id, this.text_edit_original);
+		this.cleanup_text_edit();
+		switch (action.kind) {
+			case "remove":
+				this.editor.commands.select(id);
+				this.editor.commands.remove();
+				break;
+			case "set_text":
+				this.editor.commands.set_text(action.value);
+				break;
+			case "noop":
+				internal.emit();
+				break;
+			default:
+		}
+	}
+	/**
+	* Enter path-vertex-edit mode. Mirrors `enter_text_edit` shape: capture
+	* the original `d`, flip the editor mode, push a vector-selection mirror
+	* to the HUD, and start serving `vectorOf` from the live session.
+	*
+	* Exit happens via `exit_vector_edit` (Esc / `set_mode("select")` /
+	* dblclick away). On exit, any in-flight preview is discarded; committed
+	* intermediate states stay (each gesture's commit was its own history
+	* entry, per the gesture-bracketed history doctrine).
+	*
+	* The enter is itself a history step (tagged `vector-mode-enter`) so
+	* undo from inside vector-edit reverts the entry — symmetric to the
+	* `vector-mode-exit` push in {@link exit_vector_edit}. Both deltas
+	* delegate to the unchecked {@link _do_enter_vector_edit} /
+	* {@link _do_exit_vector_edit} helpers; the public wrappers below own
+	* the history side, the unchecked helpers own the state mutation.
+	*/
+	enter_vector_edit(id) {
+		if (this.vector_edit) return false;
+		if (!this._do_enter_vector_edit(id)) return false;
+		const internal = this.editor_internal();
+		const node_id = id;
+		const preview = internal.history.preview("enter vector edit");
+		preview.set({
+			providerId: "svg-editor",
+			descriptor: { kind: "vector-mode-enter" },
+			apply: () => {
+				this._do_enter_vector_edit(node_id);
+			},
+			revert: () => {
+				this._do_exit_vector_edit();
+			}
+		});
+		preview.commit();
+		return true;
+	}
+	/**
+	* Discard any in-flight preview, clear the vector-edit session, and return
+	* the editor to select mode. Safe to call when no vector-edit is active
+	* (no-op). Idempotent.
+	*
+	* Pushes a `vector-mode-exit` history step that closes over the
+	* session's `node_id` and its final sub-selection, so undo re-enters
+	* the same path and restores the selection the user was about to
+	* leave. Pairs with {@link enter_vector_edit}.
+	*/
+	exit_vector_edit() {
+		if (!this.vector_edit) return;
+		const node_id = this.vector_edit.node_id;
+		const final_selection = this.vector_edit.snapshot_selection();
+		this._do_exit_vector_edit();
+		const preview = this.editor_internal().history.preview("exit vector edit");
+		preview.set({
+			providerId: "svg-editor",
+			descriptor: { kind: "vector-mode-exit" },
+			apply: () => {
+				this._do_exit_vector_edit();
+			},
+			revert: () => {
+				if (this._do_enter_vector_edit(node_id)) {
+					this.vector_edit?.restore_selection(final_selection);
+					this.sync_selection_mirror();
+					this.redraw();
+				}
+			}
+		});
+		preview.commit();
+	}
+	/**
+	* Unchecked enter — performs the mode flip + HUD wiring without
+	* pushing to history. Called by {@link enter_vector_edit} (user-facing,
+	* which pushes the delta) and by the exit-delta's revert (history-
+	* driven re-entry on undo). Returns `false` if the node has no usable
+	* `d` attribute, leaving editor state untouched.
+	*/
+	_do_enter_vector_edit(id) {
+		if (this.vector_edit) return false;
+		const source = this.editor_internal().doc.is_vector_edit_target(id);
+		if (source === null) return false;
+		const session_d = source_to_session_d(source);
+		this.vector_edit = new VectorEditSession(id, source, session_d);
+		this.editor.commands.set_mode("edit-content");
+		this.sync_selection_mirror();
+		this.sync_surface_selection();
+		this.sync_cursor();
+		this.redraw();
+		return true;
+	}
+	/**
+	* Unchecked exit — counterpart to {@link _do_enter_vector_edit}. No
+	* history push. Safe to call when no session is active.
+	*/
+	_do_exit_vector_edit() {
+		if (!this.vector_edit) return;
+		if (this.active_preview && (this.active_preview.kind === "vector_vertex_translate" || this.active_preview.kind === "vector_set_tangent" || this.active_preview.kind === "vector_bend_segment" || this.active_preview.kind === "vector_translate_selection")) {
+			this.active_preview.session.discard();
+			this.active_preview = null;
+		}
+		this.vector_edit = null;
+		this.vector_edit_region_baseline = null;
+		this.hud.setVectorSelection(null);
+		if (this.current_tool.type === "lasso" || this.current_tool.type === "bend") this.editor.set_tool({ type: "cursor" });
+		this.editor.commands.set_mode("select");
+		this.sync_surface_selection();
+		this.sync_cursor();
+		this.redraw();
+	}
+	/**
+	* `vectorOf` provider for the HUD. Returns the live PathSnapshot for the
+	* named node when a vector-edit session is active for it; otherwise null.
+	* HUD calls this each frame; cheap enough to recompute (snapshot just
+	* copies the underlying network's arrays via the model's getter).
+	*/
+	vector_of(id) {
+		if (!this.vector_edit || this.vector_edit.node_id !== id) return null;
+		const model = this.active_preview_model_for(id) ?? this.session_model();
+		if (!model) return null;
+		const snap = model.snapshot();
+		const el = this.element_index.get(id);
+		if (!(el instanceof SVGGraphicsElement)) return null;
+		if (typeof el.getScreenCTM !== "function") return null;
+		const ctm = el.getScreenCTM();
+		if (!ctm) return null;
+		const offset = this.container_offset();
+		return {
+			vertices: Array.from({ length: snap.vertices.length }, (_, i) => {
+				const v = snap.vertices[i];
+				return project_point_through_ctm(v[0], v[1], ctm, offset);
+			}),
+			segments: snap.segments.map((s) => {
+				const va = snap.vertices[s.a];
+				const vb = snap.vertices[s.b];
+				const a_ctrl_local = [va[0] + s.ta[0], va[1] + s.ta[1]];
+				const b_ctrl_local = [vb[0] + s.tb[0], vb[1] + s.tb[1]];
+				return {
+					a: s.a,
+					b: s.b,
+					a_control: project_point_through_ctm(a_ctrl_local[0], a_ctrl_local[1], ctm, offset),
+					b_control: project_point_through_ctm(b_ctrl_local[0], b_ctrl_local[1], ctm, offset)
+				};
+			}),
+			neighbours: model.neighbouringVertices({
+				vertices: this.vector_edit.selected_vertices,
+				segments: this.vector_edit.selected_segments,
+				tangents: this.vector_edit.selected_tangents
+			}),
+			origin: [0, 0]
+		};
+	}
+	/**
+	* The session's in-memory PathModel-form `d`. For `<path>` sources
+	* this stays in lock-step with `doc.get_attr(id, "d")`; for
+	* `<line>` / `<polyline>` / `<polygon>` sources the document holds
+	* native attrs and the session-d is the lingua-franca view that
+	* gesture handlers parse from and write back to via
+	* {@link apply_session_d}. Returns `null` if no session is active.
+	*/
+	read_session_d() {
+		if (!this.vector_edit) return null;
+		return this.vector_edit.current_d;
+	}
+	/**
+	* Derive a fresh `PathModel` from the current `d` for the path under
+	* edit. Computed on read — there is no cached copy held on the session.
+	* See `vector-edit/session.ts` for the doctrine ("d is the live store").
+	*/
+	session_model() {
+		const d = this.read_session_d();
+		if (d === null) return null;
+		return PathModel.fromSvgPathD(d);
+	}
+	/**
+	* Republish the vector-edit sub-selection to the HUD. No-op when no
+	* session is open. Every selection-changing handler ends with this so
+	* the surface mirror stays in lock-step with `this.vector_edit` — the
+	* inline `setVectorSelection({ node_id, vertices, segments, tangents })`
+	* block was repeated at 6+ sites before this collapse.
+	*/
+	sync_selection_mirror() {
+		if (!this.vector_edit) return;
+		this.hud.setVectorSelection({
+			node_id: this.vector_edit.node_id,
+			vertices: this.vector_edit.selected_vertices,
+			segments: this.vector_edit.selected_segments,
+			tangents: this.vector_edit.selected_tangents
+		});
+	}
+	/**
+	* Replay the session-side effects of a committed vector-edit delta onto
+	* the LIVE `this.vector_edit` session — but only if it is still aimed at
+	* the same node. Geometry restoration is the closure's `commit(d)` job
+	* (document-level, always safe); this method handles the bits the
+	* geometry write cannot reach on its own: advancing `last_seen_d` so
+	* the external-mutation watcher doesn't pounce, and re-installing the
+	* captured sub-selection.
+	*
+	* Closures used to call `session.mark_seen(...)` / `session.restore_selection(...)`
+	* on a `const session = this.vector_edit` captured at gesture start.
+	* After exit + undo-exit + undo-geometry, that capture pointed at the
+	* disposed session while the live session was a fresh one — geometry
+	* still restored correctly (via `commit`), but sub-selection didn't,
+	* and the live session's stale `last_seen_d` would then cause the
+	* watcher to clear the new session's selection on its next tick.
+	*
+	* Pass `d = null` for selection-only deltas (no geometry change → no
+	* watermark advance).
+	*/
+	replay_vector_session_state(target_node_id, d, selection) {
+		const cur = this.vector_edit;
+		if (!cur || cur.node_id !== target_node_id) return;
+		if (d !== null) {
+			cur.mark_seen(d);
+			const live_source = this.editor_internal().doc.is_vector_edit_target(cur.node_id);
+			if (live_source) cur.sync_source(live_source);
+		}
+		cur.restore_selection(selection);
+		this.sync_selection_mirror();
+	}
+	/**
+	* Build the `{ apply, revert }` history step for a vector-edit geometry
+	* delta — the single chokepoint that routes the write through
+	* {@link vector_apply} / {@link vector_revert} so promote-to-path of a
+	* primitive source (rect / circle / ellipse) is handled in one place
+	* rather than per gesture.
+	*
+	* `promo` is the per-gesture token holder (shared by reference across an
+	* `active_preview`'s preview frames and its committed step) so the
+	* promotion that fires on the first frame is the one undo reverses —
+	* promotion + first edit collapse into a single undo step. On redo after
+	* an undo-demote, `apply` re-promotes and refreshes the token.
+	*
+	* `after_selection` / `before_selection` drive sub-selection replay;
+	* pass `null` (preview frames) to skip it.
+	*/
+	vector_geometry_step(node_id, target_d, baseline_d, promo, after_selection, before_selection) {
+		const internal = this.editor_internal();
+		const doc = internal.doc;
+		const emit = internal.emit;
+		const session = this.vector_edit;
+		return {
+			providerId: "svg-editor",
+			apply: () => {
+				if (session) {
+					const tok = vector_apply(doc, session, target_d);
+					if (tok) promo.token = tok;
+				}
+				if (after_selection) this.replay_vector_session_state(node_id, target_d, after_selection);
+				emit();
+			},
+			revert: () => {
+				if (session) vector_revert(doc, session, baseline_d, promo.token);
+				promo.token = null;
+				if (before_selection) this.replay_vector_session_state(node_id, baseline_d, before_selection);
+				emit();
+			}
+		};
+	}
+	/**
+	* Push a standalone vector sub-selection change as one history entry.
+	*
+	* Called by selection-only handlers (vertex / segment / tangent click,
+	* marquee / lasso commit, clear-vector-selection) AFTER the
+	* `VectorEditSession` has been mutated to the new state. `before` is the
+	* snapshot captured before the mutation; the current session state is
+	* captured here as `after`.
+	*
+	* Tagged with `descriptor: { kind: "vector-selection" }` so hosts that
+	* want Figma-style "skip selection on undo" can filter on the
+	* descriptor without inspecting closure internals. Default behavior:
+	* standalone vector-selection IS undoable.
+	*
+	* No-op when the snapshot is unchanged — avoids spamming the stack
+	* with entries from clicks that resolve to the same state (e.g.
+	* clicking an already-selected vertex in `replace` mode).
+	*/
+	record_vector_selection_change(before, label) {
+		if (!this.vector_edit) return;
+		const after = this.vector_edit.snapshot_selection();
+		if (sub_selection_equal(before, after)) return;
+		const target_node_id = this.vector_edit.node_id;
+		const preview = this.editor_internal().history.preview(label);
+		preview.set({
+			providerId: "svg-editor",
+			descriptor: { kind: "vector-selection" },
+			apply: () => {
+				this.replay_vector_session_state(target_node_id, null, after);
+				this.redraw();
+			},
+			revert: () => {
+				this.replay_vector_session_state(target_node_id, null, before);
+				this.redraw();
+			}
+		});
+		preview.commit();
+	}
+	/** Resolve the in-flight `PathModel` for the named node id when a
+	*  vector-preview is active; null otherwise. */
+	active_preview_model_for(id) {
+		const ap = this.active_preview;
+		if (!ap) return null;
+		switch (ap.kind) {
+			case "vector_vertex_translate": return ap.node_id === id ? ap.preview_model : null;
+			case "vector_set_tangent": return ap.node_id === id ? ap.preview_model : null;
+			case "vector_bend_segment": return ap.node_id === id ? ap.preview_model : null;
+			case "vector_translate_selection": return ap.node_id === id ? ap.preview_model : null;
+			default: return null;
+		}
+	}
+	/**
+	* Apply a `select_vertex` intent. Updates the vector-edit session's sub-
+	* selection and pushes a fresh mirror to the HUD.
+	*/
+	handle_select_vertex(intent) {
+		if (!this.vector_edit || this.vector_edit.node_id !== intent.node_id) return;
+		const before = this.vector_edit.snapshot_selection();
+		this.vector_edit.select_vertex(intent.index, intent.mode);
+		this.sync_selection_mirror();
+		this.redraw();
+		this.record_vector_selection_change(before, "select vertex");
+	}
+	/**
+	* Apply a `select_segment` intent. Mirrors {@link handle_select_vertex}.
+	* Fired when the user clicks a segment OFF the ghost insertion knob —
+	* clicking the ghost itself fires `split_segment` instead.
+	*/
+	handle_select_segment(intent) {
+		if (!this.vector_edit || this.vector_edit.node_id !== intent.node_id) return;
+		const before = this.vector_edit.snapshot_selection();
+		this.vector_edit.select_segment(intent.segment, intent.mode);
+		this.sync_selection_mirror();
+		this.redraw();
+		this.record_vector_selection_change(before, "select segment");
+	}
+	/**
+	* Apply a `translate_vertices` intent. Mirrors the `set_endpoint` flow:
+	* - First frame opens a `history.preview` session capturing the original `d`.
+	* - Each subsequent preview frame applies a fresh translation FROM the
+	*   original baseline (so the cumulative delta on the intent stays correct
+	*   and we don't accumulate drift across frames).
+	* - The commit frame finalizes the preview; the session keeps its updated
+	*   model for the next gesture.
+	*
+	* The vector-edit session's `model` is updated to reflect the committed
+	* state (preview model is computed on the fly each frame from the
+	* baseline; only commit writes back into session.model).
+	*/
+	handle_translate_vertices(intent) {
+		if (!this.vector_edit || this.vector_edit.node_id !== intent.node_id) return;
+		const internal = this.editor_internal();
+		const node_id = intent.node_id;
+		if (!this.active_preview || this.active_preview.kind !== "vector_vertex_translate" || this.active_preview.node_id !== node_id || !array_shallow_equal(this.active_preview.indices, intent.indices)) {
+			if (this.active_preview) {
+				if ("session" in this.active_preview) this.active_preview.session.discard();
+			}
+			const initial_d = this.read_session_d();
+			if (initial_d === null) return;
+			const baseline_model = PathModel.fromSvgPathD(initial_d);
+			this.active_preview = {
+				kind: "vector_vertex_translate",
+				node_id,
+				promo: { token: null },
+				indices: [...intent.indices],
+				initial_d,
+				baseline_model,
+				before_selection: this.vector_edit.snapshot_selection(),
+				preview_model: baseline_model,
+				session: internal.history.preview("vector/translate-vertex")
+			};
+		}
+		const baseline_d = this.active_preview.initial_d;
+		const indices = this.active_preview.indices;
+		let [local_dx, local_dy] = this.vertex_drag_local_delta(node_id, this.active_preview.baseline_model, indices, intent.dx, intent.dy);
+		[local_dx, local_dy] = this.axis_lock_point_delta(local_dx, local_dy);
+		const preview_model = this.active_preview.baseline_model.translateVertices(indices, [local_dx, local_dy]);
+		const target_d = preview_model.toSvgPathD();
+		this.active_preview.preview_model = preview_model;
+		if (intent.phase === "commit") {
+			this.point_snap_guide = void 0;
+			const before_selection = this.active_preview.before_selection;
+			const after_selection = this.vector_edit.snapshot_selection();
+			this.active_preview.session.set(this.vector_geometry_step(node_id, target_d, baseline_d, this.active_preview.promo, after_selection, before_selection));
+			this.active_preview.session.commit();
+			this.active_preview = null;
+		} else this.active_preview.session.set(this.vector_geometry_step(node_id, target_d, baseline_d, this.active_preview.promo, null, null));
+	}
+	/**
+	* `translate_vector_selection` — the sub-selection-aware delta-translate.
+	*
+	* Mirrors main editor's `translate-vector-controls`
+	* (`editor/grida-canvas/reducers/tools/event-target.cem-vector.reducer.ts:667-675`).
+	* Translates the union of:
+	*
+	*   - selected vertices                       (authoritative sub-selection)
+	*   - endpoints of selected segments          (segment selection implies
+	*                                              its two endpoints translate)
+	*   - intent.additional_vertex_indices        (carried by segment drag so
+	*                                              endpoints translate even
+	*                                              when the segment isn't yet
+	*                                              in sub-selection — the
+	*                                              deferred select_segment was
+	*                                              canceled by drag promotion)
+	*
+	* AND delta-translates selected tangents, EXCLUDING tangents whose parent
+	* vertex is already in the translated set (mirrors `vector.ts:39-42`'s
+	* `getUXNeighbouringVertices`-style exclusion: the vertex move already
+	* carries its tangent controls, so double-applying would shift them
+	* twice). Mirror policy pinned to `"none"` during multi-translate; mirror
+	* behavior is reserved for the singleton-tangent curve gesture.
+	*
+	* Opens a dedicated `vector_translate_selection` preview so the
+	* vertex translate AND tangent delta apply atomically per frame.
+	*/
+	handle_translate_vector_selection(intent) {
+		if (!this.vector_edit || this.vector_edit.node_id !== intent.node_id) return;
+		const internal = this.editor_internal();
+		const node_id = intent.node_id;
+		const ses = this.vector_edit;
+		const current_d = this.read_session_d();
+		if (current_d === null) return;
+		const resolved_model = PathModel.fromSvgPathD(current_d);
+		const vertex_count = resolved_model.vertexCount();
+		const segment_snapshot = resolved_model.snapshot().segments;
+		const indices_set = /* @__PURE__ */ new Set();
+		const add_if_valid = (i) => {
+			if (i >= 0 && i < vertex_count) indices_set.add(i);
+		};
+		for (const v of ses.selected_vertices) add_if_valid(v);
+		for (const s of ses.selected_segments) {
+			const seg = segment_snapshot[s];
+			if (!seg) continue;
+			add_if_valid(seg.a);
+			add_if_valid(seg.b);
+		}
+		for (const v of intent.additional_vertex_indices) add_if_valid(v);
+		const tangent_refs = [];
+		for (const ref of ses.selected_tangents) {
+			if (indices_set.has(ref[0])) continue;
+			tangent_refs.push(ref);
+		}
+		if (indices_set.size === 0 && tangent_refs.length === 0) return;
+		const indices = Array.from(indices_set).sort((a, b) => a - b);
+		if (!this.active_preview || this.active_preview.kind !== "vector_translate_selection" || this.active_preview.node_id !== node_id || !array_shallow_equal(this.active_preview.indices, indices) || !sameTangentRefs(this.active_preview.tangent_refs, tangent_refs)) {
+			if (this.active_preview) {
+				if ("session" in this.active_preview) this.active_preview.session.discard();
+			}
+			const initial_d = this.read_session_d();
+			if (initial_d === null) return;
+			const baseline_model = PathModel.fromSvgPathD(initial_d);
+			const baseline_tangent_abs = tangent_refs.map((ref) => baseline_model.tangentAbsolute(ref, [0, 0]));
+			this.active_preview = {
+				kind: "vector_translate_selection",
+				node_id,
+				promo: { token: null },
+				indices: [...indices],
+				tangent_refs: [...tangent_refs],
+				initial_d,
+				before_selection: this.vector_edit.snapshot_selection(),
+				preview_model: baseline_model,
+				baseline_model,
+				baseline_tangent_abs,
+				session: internal.history.preview("vector/translate-selection")
+			};
+		}
+		const baseline_d = this.active_preview.initial_d;
+		let [local_dx, local_dy] = this.vertex_drag_local_delta(node_id, this.active_preview.baseline_model, indices, intent.dx, intent.dy);
+		[local_dx, local_dy] = this.axis_lock_point_delta(local_dx, local_dy);
+		const baseline_model = this.active_preview.baseline_model;
+		const baseline_tangent_abs = this.active_preview.baseline_tangent_abs;
+		let preview_model = indices.length > 0 ? baseline_model.translateVertices(indices, [local_dx, local_dy]) : baseline_model;
+		for (let i = 0; i < tangent_refs.length; i++) {
+			const baseline_abs = baseline_tangent_abs[i];
+			if (baseline_abs === null) continue;
+			preview_model = preview_model.setTangent(tangent_refs[i], [baseline_abs[0] + local_dx, baseline_abs[1] + local_dy], "none");
+		}
+		const target_d = preview_model.toSvgPathD();
+		this.active_preview.preview_model = preview_model;
+		if (intent.phase === "commit") {
+			this.point_snap_guide = void 0;
+			const before_selection = this.active_preview.before_selection;
+			const after_selection = this.vector_edit.snapshot_selection();
+			this.active_preview.session.set(this.vector_geometry_step(node_id, target_d, baseline_d, this.active_preview.promo, after_selection, before_selection));
+			this.active_preview.session.commit();
+			this.active_preview = null;
+		} else this.active_preview.session.set(this.vector_geometry_step(node_id, target_d, baseline_d, this.active_preview.promo, null, null));
+	}
+	/**
+	* Surface-aware `transform.nudge` handler — registered over the headless
+	* default on attach (gridaco/grida#849). In vector content-edit, arrow
+	* keys nudge the path sub-selection (the keyboard counterpart of
+	* dragging vertices / segments / tangents) rather than leaking to a
+	* whole-element move (the bug). This mirrors text-edit, where the inline
+	* editor owns the arrow keys. Outside content-edit it delegates to the
+	* headless `default_nudge_handler` (whole-element nudge) — the same
+	* handler the registry restores on detach, so the override and the
+	* default can never drift.
+	*
+	* While a vector session is open the arrows are OWNED by it: an empty
+	* sub-selection is a consumed no-op, never a whole-element nudge — same
+	* "content-edit captures arrows" contract as text-edit.
+	*/
+	handle_nudge_command(args) {
+		const { dx, dy } = args;
+		if (this.editor.state.mode === "edit-content" && this.vector_edit) {
+			this.nudge_vector_selection(dx, dy);
+			return true;
+		}
+		return default_nudge_handler(this.editor)(args) === true;
+	}
+	/**
+	* Discrete keyboard nudge of the vector sub-selection. Reuses the drag
+	* path ({@link handle_translate_vector_selection}) by synthesizing a
+	* single commit-phase intent, so a nudge is byte-identical to a one-step
+	* drag of the same points: same union resolution (selected vertices ∪
+	* selected-segment endpoints ∪ tangents), same parent-vertex tangent
+	* exclusion, same history bracket + sub-selection capture.
+	*
+	* `dx`/`dy` arrive in world units (1px, or 10px with Shift — already
+	* resolved by the keymap binding). `handle_translate_vector_selection`
+	* expects container CSS-px (it projects back through the inverse
+	* screen-CTM), so scale by the camera zoom on the way in; the projection
+	* recovers the world delta in the path's local frame. A no-sub-selection
+	* session resolves to a no-op inside the handler.
+	*/
+	nudge_vector_selection(dx, dy) {
+		const ses = this.vector_edit;
+		if (!ses) return;
+		const zoom = this.camera.zoom || 1;
+		this.suppress_point_snap = true;
+		try {
+			this.handle_translate_vector_selection({
+				kind: "translate_vector_selection",
+				node_id: ses.node_id,
+				additional_vertex_indices: [],
+				dx: dx * zoom,
+				dy: dy * zoom,
+				phase: "commit"
+			});
+		} finally {
+			this.suppress_point_snap = false;
+		}
+		this.request_redraw();
+	}
+	/** Mirror handler for `select_tangent` (analogous to `select_vertex`). */
+	handle_select_tangent(intent) {
+		if (!this.vector_edit || this.vector_edit.node_id !== intent.node_id) return;
+		const before = this.vector_edit.snapshot_selection();
+		this.vector_edit.select_tangent(intent.tangent, intent.mode);
+		this.sync_selection_mirror();
+		this.redraw();
+		this.record_vector_selection_change(before, "select tangent");
+	}
+	/**
+	* Tangent drag handler. Mirrors `handle_translate_vertices`:
+	*
+	* - First frame opens a `history.preview` session, captures `original_d`.
+	* - Each preview frame replays setTangent from the baseline model so
+	*   cumulative drift never accumulates.
+	* - Commit finalizes the preview and reseeds the session.
+	*
+	* `intent.pos` arrives in container CSS-px (HUD's doc-space). We project
+	* it back through the inverse-CTM to path-local before calling
+	* `PathModel.setTangent`.
+	*/
+	handle_set_tangent_intent(intent) {
+		if (!this.vector_edit || this.vector_edit.node_id !== intent.node_id) return;
+		const internal = this.editor_internal();
+		const node_id = intent.node_id;
+		if (!this.active_preview || this.active_preview.kind !== "vector_set_tangent" || this.active_preview.node_id !== node_id || this.active_preview.tangent[0] !== intent.tangent[0] || this.active_preview.tangent[1] !== intent.tangent[1]) {
+			if (this.active_preview && "session" in this.active_preview) this.active_preview.session.discard();
+			const initial_d = this.read_session_d();
+			if (initial_d === null) return;
+			const baseline_model = PathModel.fromSvgPathD(initial_d);
+			this.active_preview = {
+				kind: "vector_set_tangent",
+				node_id,
+				promo: { token: null },
+				tangent: [intent.tangent[0], intent.tangent[1]],
+				initial_d,
+				baseline_model,
+				before_selection: this.vector_edit.snapshot_selection(),
+				preview_model: baseline_model,
+				session: internal.history.preview("vector/set-tangent")
+			};
+		}
+		const baseline_d = this.active_preview.initial_d;
+		const local_pos = this.project_doc_point_to_local(node_id, intent.pos);
+		if (!local_pos) return;
+		const preview_model = this.active_preview.baseline_model.setTangent(intent.tangent, local_pos, intent.mirror);
+		const target_d = preview_model.toSvgPathD();
+		this.active_preview.preview_model = preview_model;
+		if (intent.phase === "commit") {
+			const before_selection = this.active_preview.before_selection;
+			const after_selection = this.vector_edit.snapshot_selection();
+			this.active_preview.session.set(this.vector_geometry_step(node_id, target_d, baseline_d, this.active_preview.promo, after_selection, before_selection));
+			this.active_preview.session.commit();
+			this.active_preview = null;
+		} else this.active_preview.session.set(this.vector_geometry_step(node_id, target_d, baseline_d, this.active_preview.promo, null, null));
+	}
+	/**
+	* Split a segment at parametric position `t`. One-shot atomic edit; no
+	* preview phase. After the split, the new vertex is auto-selected — this
+	* matches Figma's add-anchor behavior and prepares the user to immediately
+	* drag the newly inserted anchor.
+	*/
+	handle_split_segment(intent) {
+		if (!this.vector_edit || this.vector_edit.node_id !== intent.node_id) return;
+		const node_id = intent.node_id;
+		const baseline_d = this.read_session_d();
+		if (baseline_d === null) return;
+		const { model: next_model, new_vertex } = PathModel.fromSvgPathD(baseline_d).splitSegment(intent.segment, intent.t);
+		const target_d = next_model.toSvgPathD();
+		const internal = this.editor_internal();
+		const before_selection = this.vector_edit.snapshot_selection();
+		const after_selection = Object.freeze({
+			vertices: Object.freeze([new_vertex]),
+			segments: Object.freeze([]),
+			tangents: Object.freeze([])
+		});
+		const promo = { token: null };
+		const split_session = internal.history.preview("vector/split-segment");
+		split_session.set(this.vector_geometry_step(node_id, target_d, baseline_d, promo, after_selection, before_selection));
+		split_session.commit();
+		this.redraw();
+	}
+	/**
+	* Bend a segment by dragging an interior point. Mirrors set_tangent —
+	* preview session opened on first frame, replays from baseline each
+	* frame, commits / reseeds on phase===commit.
+	*
+	* `frozen` is captured ONCE at session open from the baseline model;
+	* `vne.bendSegment` solves for new tangents against this snapshot, so
+	* the cumulative drag delta is correct without per-frame drift.
+	*/
+	handle_bend_segment(intent) {
+		if (!this.vector_edit || this.vector_edit.node_id !== intent.node_id) return;
+		const internal = this.editor_internal();
+		const node_id = intent.node_id;
+		if (!this.active_preview || this.active_preview.kind !== "vector_bend_segment" || this.active_preview.node_id !== node_id || this.active_preview.segment !== intent.segment || this.active_preview.ca !== intent.ca) {
+			if (this.active_preview && "session" in this.active_preview) this.active_preview.session.discard();
+			const initial_d = this.read_session_d();
+			if (initial_d === null) return;
+			const baseline_model = PathModel.fromSvgPathD(initial_d);
+			const snap = baseline_model.snapshot();
+			const s = snap.segments[intent.segment];
+			if (!s) return;
+			const va = snap.vertices[s.a];
+			const vb = snap.vertices[s.b];
+			this.active_preview = {
+				kind: "vector_bend_segment",
+				node_id,
+				promo: { token: null },
+				segment: intent.segment,
+				ca: intent.ca,
+				frozen: {
+					a: [va[0], va[1]],
+					b: [vb[0], vb[1]],
+					ta: [s.ta[0], s.ta[1]],
+					tb: [s.tb[0], s.tb[1]]
+				},
+				initial_d,
+				baseline_model,
+				before_selection: this.vector_edit.snapshot_selection(),
+				preview_model: baseline_model,
+				session: internal.history.preview("vector/bend-segment")
+			};
+		}
+		const baseline_d = this.active_preview.initial_d;
+		const frozen = this.active_preview.frozen;
+		const local_cb = this.project_doc_point_to_local(node_id, intent.cb);
+		if (!local_cb) return;
+		const preview_model = this.active_preview.baseline_model.bendSegment(intent.segment, intent.ca, local_cb, frozen);
+		const target_d = preview_model.toSvgPathD();
+		this.active_preview.preview_model = preview_model;
+		if (intent.phase === "commit") {
+			const before_selection = this.active_preview.before_selection;
+			const after_selection = this.vector_edit.snapshot_selection();
+			this.active_preview.session.set(this.vector_geometry_step(node_id, target_d, baseline_d, this.active_preview.promo, after_selection, before_selection));
+			this.active_preview.session.commit();
+			this.active_preview = null;
+		} else this.active_preview.session.set(this.vector_geometry_step(node_id, target_d, baseline_d, this.active_preview.promo, null, null));
+	}
+	/**
+	* Project a doc-space point (HUD's container CSS-px frame) back to the
+	* named element's local frame via inverse-CTM. Returns null if no CTM
+	* is available or the CTM is singular.
+	*/
+	project_doc_point_to_local(id, p) {
+		const el = this.element_index.get(id);
+		if (!(el instanceof SVGGraphicsElement)) return null;
+		if (typeof el.getScreenCTM !== "function") return null;
+		const ctm = el.getScreenCTM();
+		if (!ctm) return null;
+		const cr = this.container.getBoundingClientRect();
+		const offset_x = -cr.left + this.container.scrollLeft;
+		const offset_y = -cr.top + this.container.scrollTop;
+		const det = ctm.a * ctm.d - ctm.c * ctm.b;
+		if (det === 0) return null;
+		const px = p[0] - offset_x;
+		const py = p[1] - offset_y;
+		return [(ctm.d * (px - ctm.e) - ctm.c * (py - ctm.f)) / det, (-ctm.b * (px - ctm.e) + ctm.a * (py - ctm.f)) / det];
+	}
+	tag_of(id) {
+		return this.editor.tree().nodes.get(id)?.tag ?? "";
+	}
+	bbox_local(id) {
+		const el = this.element_index.get(id);
+		if (!el) return null;
+		const ge = el;
+		if (typeof ge.getBBox !== "function") return null;
+		try {
+			const b = ge.getBBox();
+			return {
+				x: b.x,
+				y: b.y,
+				width: b.width,
+				height: b.height
+			};
+		} catch {
+			return null;
+		}
+	}
+	/** Doc-space AABB of `id`'s rendered geometry — local box projected
+	*  through the element's own `transform=`. This is the rect snap,
+	*  resize-baseline, and rotate-pivot consumers want: where the user
+	*  actually sees the element in the root SVG's user-coordinate system.
+	*
+	*  Flat-doc design target: ancestor transforms (`<g transform=...>`)
+	*  are out of scope; only the element's own transform is projected.
+	*  `getBBox` (called via `bbox_local`) ignores the element's transform
+	*  per SVG 2 §4.6.4, so the projection here is what bridges the gap. */
+	bbox_world(id) {
+		const local = this.bbox_local(id);
+		if (!local) return null;
+		const transform_str = this.editor.document.get_attr(id, "transform");
+		return transform.project(local, transform_str);
+	}
+	editor_internal() {
+		return this.editor._internal;
+	}
+};
+function numAttr(doc, id, name) {
+	return svg_parse.parse_number(doc.get_attr(id, name));
+}
+/** Order-sensitive shallow equality for tangent-ref arrays. */
+function sameTangentRefs(a, b) {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i][0] !== b[i][0] || a[i][1] !== b[i][1]) return false;
+	return true;
+}
+/**
+* Affine projection of a point through a 2×3 CTM, then offset by a
+* container origin (in page CSS-px). Mirrors how `line_endpoints_in_container`
+* and `shape_of` (transformed branch) bridge from local SVG coords to the
+* HUD's container-CSS-px space (HUD keeps its own transform at identity;
+* the SVG carries the camera as a CSS transform, which getScreenCTM
+* folds in).
+*
+* Exported for headless test coverage — pure function, no DOM types.
+*/
+function project_point_through_ctm(px, py, ctm, container_offset) {
+	const [sx, sy] = cmath.vector2.transform([px, py], [[
+		ctm.a,
+		ctm.c,
+		ctm.e
+	], [
+		ctm.b,
+		ctm.d,
+		ctm.f
+	]]);
+	return [sx + container_offset[0], sy + container_offset[1]];
+}
+/**
+* Inverse of the CTM's linear part applied to a delta vector. Drops
+* translation. Used to convert a HUD-reported container-space drag delta
+* back to the path's local coord space for `PathModel.translateVertices`.
+*
+* Throws on a degenerate (det = 0) matrix — the caller is expected to
+* have a non-singular CTM for any visible element.
+*/
+function project_delta_inverse_ctm(dx, dy, ctm) {
+	if (ctm.a * ctm.d - ctm.c * ctm.b === 0) throw new Error("project_delta_inverse_ctm: singular CTM linear part");
+	const inv = cmath.transform.invert([[
+		ctm.a,
+		ctm.c,
+		0
+	], [
+		ctm.b,
+		ctm.d,
+		0
+	]]);
+	return cmath.vector2.transform([dx, dy], inv);
+}
+/**
+* Inverse-project a doc-space rect through a CTM + container offset back
+* into the element's local frame. The output is the AABB of the four
+* inverse-projected corners — when the CTM has a rotation component the
+* AABB is an approximation, but it matches what the user visually
+* expects from a screen-aligned marquee drag.
+*
+* Returns `null` when the CTM's linear part is singular (degenerate
+* camera) — the caller should skip any test that needs the local rect.
+*/
+function inverse_project_rect(rect, ctm, offset) {
+	if (ctm.a * ctm.d - ctm.c * ctm.b === 0) return null;
+	const inv = cmath.transform.invert([[
+		ctm.a,
+		ctm.c,
+		ctm.e
+	], [
+		ctm.b,
+		ctm.d,
+		ctm.f
+	]]);
+	const to_local = (px, py) => cmath.vector2.transform([px - offset[0], py - offset[1]], inv);
+	const corners = [
+		to_local(rect.x, rect.y),
+		to_local(rect.x + rect.width, rect.y),
+		to_local(rect.x, rect.y + rect.height),
+		to_local(rect.x + rect.width, rect.y + rect.height)
+	];
+	return cmath.rect.fromPoints(corners);
+}
+/** World-space viewport rect of an `<svg>` element. Prefers `viewBox`
+*  (the declared user-space rect — what the user perceives as canvas),
+*  falls back to `width`/`height` at (0,0). For nested `<svg>` with a
+*  positional `x`/`y`, the declared viewBox/(0,0) is in the nested
+*  element's OWN user space; callers are responsible for CTM
+*  projection if a different frame is desired. v1 nested-svg story is
+*  documented in ../docs/geometry.md as out of scope. */
+function svg_viewport_bounds(el) {
+	const vb = el.getAttribute("viewBox");
+	if (vb) {
+		const parts = vb.trim().split(/[\s,]+/).map(Number);
+		if (parts.length === 4 && parts.every(Number.isFinite)) return {
+			x: parts[0],
+			y: parts[1],
+			width: parts[2],
+			height: parts[3]
+		};
+	}
+	const w = parseFloat(el.getAttribute("width") ?? "");
+	const h = parseFloat(el.getAttribute("height") ?? "");
+	if (Number.isFinite(w) && Number.isFinite(h)) return {
+		x: 0,
+		y: 0,
+		width: w,
+		height: h
+	};
+	return null;
+}
+/** Index of the next side ≥ `start` (in [top, right, bottom, left] order)
+*  where both measurements have a positive distance — i.e. the next side
+*  that `measurementToHUDDraw` would emit a labelled line for. -1 if
+*  none. */
+/** Among the edges of a point sequence, pick the one whose outward
+*  normal points most downward — i.e. which edge visually FORMS the
+*  bottom of the shape. For a CW-wound polygon (TL/TR/BR/BL, in y-down
+*  screen space) the outward normal of an edge `(p1, p2)` is the edge
+*  direction rotated 90° CW: `(dy, -dx)`, so the normal's Y component
+*  equals `-dx / |edge|`. Ranking by *normalized* outward-Y, not by
+*  midpoint-Y, makes a long-thin rotated rect anchor the label on its
+*  long bottom edge (correct) instead of the short bottom corner
+*  (which happens to have a lower midpoint but doesn't read as "the
+*  bottom side"). Returns the midpoint as `anchor` and the edge's
+*  direction angle normalized to `(-π/2, π/2]` — so a HUDLine label
+*  drawn at the anchor with `labelAngle = angle` reads right-side-up
+*  and its perpendicular offset points further down.
+*
+*  - `closed = true`: pts are polygon vertices, all consecutive pairs
+*    (incl. last→first) are edges. Use for rects (4 corners → 4 edges).
+*  - `closed = false`: only consecutive pairs in order are edges. Use
+*    for lines (2 endpoints → 1 edge). With a single edge there's no
+*    "outward" to rank — the function just returns the midpoint and
+*    normalized angle. */
+function pick_lowest_side_anchor(pts, closed) {
+	const edge_count = closed ? pts.length : pts.length - 1;
+	let best_score = -Infinity;
+	let best = null;
+	for (let i = 0; i < edge_count; i++) {
+		const p1 = pts[i];
+		const p2 = pts[(i + 1) % pts.length];
+		const dx = p2[0] - p1[0];
+		const dy = p2[1] - p1[1];
+		const len = Math.hypot(dx, dy) || 1;
+		const score = -dx / len;
+		if (score > best_score) {
+			best_score = score;
+			let theta = Math.atan2(dy, dx);
+			if (theta > Math.PI / 2) theta -= Math.PI;
+			else if (theta <= -Math.PI / 2) theta += Math.PI;
+			best = {
+				anchor: [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2],
+				angle: theta
+			};
+		}
+	}
+	return best;
+}
+function next_labellable_side(start, a, b) {
+	for (let i = start; i < 4; i++) if (a.distance[i] > 0 && b.distance[i] > 0) return i;
+	return -1;
+}
+/** Concatenate the primitive arrays of N `HUDDraw`s. `undefined` inputs
+*  collapse cleanly so callers can pass per-feature builders without
+*  null-guarding each one. */
+function merge_hud_draws(...draws) {
+	const present = draws.filter((d) => d !== void 0);
+	if (present.length === 0) return void 0;
+	if (present.length === 1) return present[0];
+	const out = {};
+	for (const d of present) {
+		if (d.lines) (out.lines ??= []).push(...d.lines);
+		if (d.rects) (out.rects ??= []).push(...d.rects);
+		if (d.rules) (out.rules ??= []).push(...d.rules);
+		if (d.points) (out.points ??= []).push(...d.points);
+		if (d.polylines) (out.polylines ??= []).push(...d.polylines);
+		if (d.screenRects) (out.screenRects ??= []).push(...d.screenRects);
+	}
+	return out;
+}
+var SvgGeometryDriver = class {
+	constructor(accessors) {
+		this.accessors = accessors;
+	}
+	bounds_of(id) {
+		this.accessors.flush();
+		const el = this.accessors.element_for(id);
+		if (!el) return null;
+		if (el instanceof SVGSVGElement) return svg_viewport_bounds(el);
+		const ge = el;
+		if (typeof ge.getBBox !== "function" || typeof ge.getCTM !== "function") return null;
+		let bbox;
+		try {
+			const b = ge.getBBox();
+			bbox = {
+				x: b.x,
+				y: b.y,
+				width: b.width,
+				height: b.height
+			};
+		} catch {
+			return null;
+		}
+		const ctm = ge.getCTM();
+		if (!ctm) return bbox;
+		const project = (px, py) => ({
+			x: ctm.a * px + ctm.c * py + ctm.e,
+			y: ctm.b * px + ctm.d * py + ctm.f
+		});
+		const corners = [
+			project(bbox.x, bbox.y),
+			project(bbox.x + bbox.width, bbox.y),
+			project(bbox.x + bbox.width, bbox.y + bbox.height),
+			project(bbox.x, bbox.y + bbox.height)
+		];
+		const xs = corners.map((c) => c.x);
+		const ys = corners.map((c) => c.y);
+		const left = Math.min(...xs);
+		const top = Math.min(...ys);
+		const right = Math.max(...xs);
+		const bottom = Math.max(...ys);
+		return {
+			x: left,
+			y: top,
+			width: right - left,
+			height: bottom - top
+		};
+	}
+	bounds_of_many(ids) {
+		const out = /* @__PURE__ */ new Map();
+		for (const id of ids) {
+			const r = this.bounds_of(id);
+			if (r) out.set(id, r);
+		}
+		return out;
+	}
+	nodes_in_rect(rect) {
+		this.accessors.flush();
+		const root = this.accessors.root();
+		if (!root) return [];
+		const hits = [];
+		root.querySelectorAll(`[${ID_ATTR}]`).forEach((el) => {
+			const id = el.getAttribute(ID_ATTR);
+			if (!id) return;
+			const b = this.bounds_of(id);
+			if (b && cmath.rect.intersects(b, rect)) hits.push(id);
+		});
+		return hits;
+	}
+	node_at_point(p) {
+		this.accessors.flush();
+		return this.accessors.pick_at_world(p, true);
+	}
+	/** World→local delta projection. The frame an element's position is
+	*  written in is its PARENT user-space: a `<rect>`'s `x`/`y` and the
+	*  leading `translate(...)` composed onto a `<g>`/transformed node are
+	*  both interpreted there. We take the parent element's frame (not the
+	*  element's own) so that translating a node whose OWN transform has a
+	*  scale/rotation is not double-counted.
+	*
+	*  Camera-free: `inv(root.getScreenCTM) ∘ parent.getScreenCTM` maps
+	*  parent user-space → root world-space, cancelling the shared CSS /
+	*  camera transform. Inverting its linear part turns a world delta into
+	*  the local delta. Identity (→ delta unchanged) for flat frames,
+	*  top-level nodes, and any degenerate / unavailable matrix. */
+	world_delta_to_local(id, delta) {
+		this.accessors.flush();
+		const parent = this.accessors.element_for(id)?.parentNode;
+		const root = this.accessors.root();
+		if (!(parent instanceof SVGGraphicsElement) || !root) return delta;
+		if (parent === root) return delta;
+		if (typeof parent.getScreenCTM !== "function" || typeof root.getScreenCTM !== "function") return delta;
+		const parent_ctm = parent.getScreenCTM();
+		const root_ctm = root.getScreenCTM();
+		if (!parent_ctm || !root_ctm) return delta;
+		const m = root_ctm.inverse().multiply(parent_ctm);
+		const det = m.a * m.d - m.c * m.b;
+		if (!Number.isFinite(det) || det === 0) return delta;
+		const [x, y] = project_delta_inverse_ctm(delta.x, delta.y, m);
+		return {
+			x,
+			y
+		};
+	}
+};
+var SvgHitShapeDriver = class {
+	constructor(accessors) {
+		this.accessors = accessors;
+	}
+	hit_shape_of(id) {
+		const doc = this.accessors.doc();
+		if (!doc) return null;
+		const intrinsic = hit_shape_svg.of_doc(doc, id);
+		if (intrinsic) return intrinsic;
+		if (hit_shape_svg.is_transparent_tag(doc.tag_of(id))) return null;
+		const bounds = this.accessors.bounds_of(id);
+		if (!bounds) return null;
+		return {
+			kind: "rect",
+			x: bounds.x,
+			y: bounds.y,
+			width: bounds.width,
+			height: bounds.height
+		};
+	}
+};
+//#endregion
+export { project_point_through_ctm as a, MemoizedGeometryProvider as c, project_delta_inverse_ctm as i, Camera as l, install_font_load_geometry_bump as n, Gestures as o, inverse_project_rect as r, DEFAULT_SNAP_OPTIONS as s, attach_dom_surface as t };