@grida/svg-editor 1.0.0-alpha.1 → 1.0.0-alpha.12

package/dist/dom-BlMk07oX.mjs

@@ -0,0 +1,3515 @@
+import { A as is_text_input_focused, C as hit_shape_of_doc, O as STRUCTURAL_GRAPHICS_SET, S as is_resizable_node, T as project_local_bbox, b as compute_resize_factors, d as NudgeDwellWatcher, f as TranslateOrchestrator, h as apply_resize, i as initial_attrs, l as RotateOrchestrator, n as default_attrs, o as TOOL_CURSOR, s as parse_paint, t as compute_drag_attrs, v as capture_resize_baseline, w as is_transparent_tag } from "./insertions-Okcuo-Ck.mjs";
+import cmath from "@grida/cmath";
+import { svg_parse } from "@grida/svg/parse";
+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/wg/feat-svg-editor/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);
+	}
+	/** 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 (!STRUCTURAL_GRAPHICS_SET.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) && STRUCTURAL_GRAPHICS_SET.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 (!STRUCTURAL_GRAPHICS_SET.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/resize-pipeline/pipeline.ts
+/** The funnel. Threads `plan` through `stages` in order; aggregates guide
+*  emissions. Pure: same inputs → same outputs. */
+function run_resize_pipeline(init, stages, ctx) {
+	let plan = init;
+	const guides = [];
+	for (const stage of stages) {
+		const out = stage.run(plan, ctx);
+		plan = out.plan;
+		if (out.emit?.guide) guides.push(out.emit.guide);
+	}
+	return {
+		plan,
+		guides
+	};
+}
+//#endregion
+//#region src/core/resize-capability.ts
+function direction_mask(dir) {
+	const has_n = dir === "n" || dir === "ne" || dir === "nw";
+	const has_s = dir === "s" || dir === "se" || dir === "sw";
+	const has_e = dir === "e" || dir === "ne" || dir === "se";
+	const has_w = dir === "w" || dir === "nw" || dir === "sw";
+	return {
+		affects_x: has_e || has_w,
+		affects_y: has_n || has_s,
+		x_edge: has_e ? "right" : has_w ? "left" : null,
+		y_edge: has_n ? "top" : has_s ? "bottom" : null
+	};
+}
+/** Is this direction one of the four corners (vs. an edge handle)? */
+function is_corner_direction(dir) {
+	return dir === "nw" || dir === "ne" || dir === "se" || dir === "sw";
+}
+/**
+* Apply per-element resize constraints to a gesture's proposed `(sx, sy)`.
+*
+* The constraint mirrors `apply_resize` exactly so that the *effective
+* rect* the caller computes from `(sx, sy)` matches what attribute writes
+* actually produce. This is the keystone of resize snap: snapping on the
+* gesture-proposed rect would lie about where the geometry lands when an
+* element-type constraint kicks in.
+*
+* Constraints:
+*   - `rect` / `image` / `use` / `ellipse` / `line` / `polyline` /
+*     `polygon` / `path`: free per-axis. Identity.
+*   - `circle`: uniform. `s = min(sx, sy)`.
+*   - `text`: uniform on corner drags; no-op on edge drags. Mirrors the
+*     `isCorner = sx !== 1 && sy !== 1` check in `apply_resize`.
+*   - `unsupported`: no-op.
+*/
+function resize_constraint(baseline, dir, sx_gesture, sy_gesture) {
+	switch (baseline.attrs.kind) {
+		case "rect":
+		case "image":
+		case "use":
+		case "ellipse":
+		case "line":
+		case "polyline":
+		case "polygon":
+		case "path": return {
+			sx: sx_gesture,
+			sy: sy_gesture,
+			no_op: false,
+			uniform: false
+		};
+		case "circle": {
+			const s = Math.min(sx_gesture, sy_gesture);
+			return {
+				sx: s,
+				sy: s,
+				no_op: false,
+				uniform: true
+			};
+		}
+		case "text": {
+			if (!is_corner_direction(dir)) return {
+				sx: 1,
+				sy: 1,
+				no_op: true,
+				uniform: true
+			};
+			const s = Math.min(sx_gesture, sy_gesture);
+			return {
+				sx: s,
+				sy: s,
+				no_op: false,
+				uniform: true
+			};
+		}
+		case "unsupported": return {
+			sx: 1,
+			sy: 1,
+			no_op: true,
+			uniform: false
+		};
+	}
+}
+/** Position of a bbox corner / edge midpoint by direction. */
+function corner_of_rect(r, dir) {
+	switch (dir) {
+		case "nw": return {
+			x: r.x,
+			y: r.y
+		};
+		case "n": return {
+			x: r.x + r.width / 2,
+			y: r.y
+		};
+		case "ne": return {
+			x: r.x + r.width,
+			y: r.y
+		};
+		case "e": return {
+			x: r.x + r.width,
+			y: r.y + r.height / 2
+		};
+		case "se": return {
+			x: r.x + r.width,
+			y: r.y + r.height
+		};
+		case "s": return {
+			x: r.x + r.width / 2,
+			y: r.y + r.height
+		};
+		case "sw": return {
+			x: r.x,
+			y: r.y + r.height
+		};
+		case "w": return {
+			x: r.x,
+			y: r.y + r.height / 2
+		};
+	}
+}
+/** The fixed-origin corner for a drag (opposite the moving corner). */
+function origin_of_direction(r, dir) {
+	switch (dir) {
+		case "nw": return {
+			x: r.x + r.width,
+			y: r.y + r.height
+		};
+		case "n": return {
+			x: r.x + r.width / 2,
+			y: r.y + r.height
+		};
+		case "ne": return {
+			x: r.x,
+			y: r.y + r.height
+		};
+		case "e": return {
+			x: r.x,
+			y: r.y + r.height / 2
+		};
+		case "se": return {
+			x: r.x,
+			y: r.y
+		};
+		case "s": return {
+			x: r.x + r.width / 2,
+			y: r.y
+		};
+		case "sw": return {
+			x: r.x + r.width,
+			y: r.y
+		};
+		case "w": return {
+			x: r.x + r.width,
+			y: r.y + r.height / 2
+		};
+	}
+}
+/**
+* Compute the effective rect that `apply_resize` would write for the
+* given gesture. This is what snap operates on.
+*
+* The rect is computed by scaling `baseline.bbox` around `origin` by the
+* constrained `(sx, sy)`. For free elements this matches the gesture
+* exactly; for circle / text-on-corner it collapses to a uniform-scale
+* rect; for text-on-edge it returns the baseline rect unchanged.
+*/
+function effective_resize(baseline, dir, sx_gesture, sy_gesture) {
+	const bbox = baseline.bbox;
+	const origin = origin_of_direction(bbox, dir);
+	const c = resize_constraint(baseline, dir, sx_gesture, sy_gesture);
+	const mask = direction_mask(dir);
+	const rect = {
+		x: origin.x + (bbox.x - origin.x) * c.sx,
+		y: origin.y + (bbox.y - origin.y) * c.sy,
+		width: bbox.width * c.sx,
+		height: bbox.height * c.sy
+	};
+	const moving_corner = corner_of_rect(rect, dir);
+	return {
+		rect,
+		sx: c.sx,
+		sy: c.sy,
+		moving_corner,
+		origin,
+		no_op: c.no_op,
+		uniform: c.uniform,
+		mask
+	};
+}
+//#endregion
+//#region src/core/resize-pipeline/stages.ts
+function pipeline_baseline(plan) {
+	return plan.baseline;
+}
+/** Collapse `(dx, dy)` to a uniform scale when Shift-drag is active.
+*  Element-driven uniform (circle / text-on-corner) is enforced inside
+*  `resize_constraint`, not here — this stage is *only* the user-visible
+*  modifier. No-op on edge handles (uniform across one axis isn't a
+*  meaningful constraint). */
+const stage_aspect_lock = {
+	name: "aspect_lock",
+	run(plan, ctx) {
+		if (ctx.modifiers.aspect_lock !== "uniform") return { plan };
+		if (!is_corner_direction(plan.direction)) return { plan };
+		const pbase = pipeline_baseline(plan);
+		const locked = compute_resize_factors(pbase, plan.direction, plan.dx, plan.dy, true);
+		const bbox = pbase.bbox;
+		const Hx_base = (() => {
+			switch (plan.direction) {
+				case "nw":
+				case "w":
+				case "sw": return bbox.x;
+				case "ne":
+				case "e":
+				case "se": return bbox.x + bbox.width;
+				case "n":
+				case "s": return bbox.x + bbox.width / 2;
+			}
+		})();
+		const Hy_base = (() => {
+			switch (plan.direction) {
+				case "nw":
+				case "n":
+				case "ne": return bbox.y;
+				case "sw":
+				case "s":
+				case "se": return bbox.y + bbox.height;
+				case "e":
+				case "w": return bbox.y + bbox.height / 2;
+			}
+		})();
+		const new_Hx = locked.origin.x + (Hx_base - locked.origin.x) * locked.sx;
+		const new_Hy = locked.origin.y + (Hy_base - locked.origin.y) * locked.sy;
+		return { plan: {
+			...plan,
+			dx: new_Hx - Hx_base,
+			dy: new_Hy - Hy_base
+		} };
+	}
+};
+/** Consults `ctx.snap_session` for moving-edge alignment correction.
+*  Identity on `force_disable_snap`, missing session, or
+*  `snap_enabled === false`. */
+const stage_snap = {
+	name: "snap",
+	run(plan, ctx) {
+		if (ctx.modifiers.force_disable_snap) return { plan };
+		if (!ctx.snap_session) return { plan };
+		if (!ctx.options.snap_enabled) return { plan };
+		const pbase = pipeline_baseline(plan);
+		const f = compute_resize_factors(pbase, plan.direction, plan.dx, plan.dy, false);
+		const eff = effective_resize(pbase, plan.direction, f.sx, f.sy);
+		if (eff.no_op) return { plan };
+		const r = ctx.snap_session.snap_resize(eff.rect, {
+			x: eff.mask.x_edge,
+			y: eff.mask.y_edge
+		}, {
+			enabled: true,
+			threshold_px: ctx.options.snap_threshold_px
+		});
+		if (r.dx === 0 && r.dy === 0) return {
+			plan,
+			emit: r.guide ? { guide: r.guide } : void 0
+		};
+		if (eff.uniform) {
+			const bbox = pbase.bbox;
+			const new_Hx = eff.moving_corner.x + r.dx;
+			const new_Hy = eff.moving_corner.y + r.dy;
+			const sx_from_x = eff.mask.x_edge !== null && r.dx !== 0 && bbox.width !== 0 ? (new_Hx - eff.origin.x) / (eff.moving_corner.x - eff.origin.x) * eff.sx : null;
+			const sy_from_y = eff.mask.y_edge !== null && r.dy !== 0 && bbox.height !== 0 ? (new_Hy - eff.origin.y) / (eff.moving_corner.y - eff.origin.y) * eff.sy : null;
+			let s = eff.sx;
+			if (sx_from_x !== null && sy_from_y !== null) s = Math.min(sx_from_x, sy_from_y);
+			else if (sx_from_x !== null) s = sx_from_x;
+			else if (sy_from_y !== null) s = sy_from_y;
+			const Hx_base = corner_x_of(bbox, plan.direction);
+			const Hy_base = corner_y_of(bbox, plan.direction);
+			const target_Hx = eff.origin.x + (Hx_base - eff.origin.x) * s;
+			const target_Hy = eff.origin.y + (Hy_base - eff.origin.y) * s;
+			return {
+				plan: {
+					...plan,
+					dx: eff.mask.affects_x ? target_Hx - Hx_base : 0,
+					dy: eff.mask.affects_y ? target_Hy - Hy_base : 0
+				},
+				emit: r.guide ? { guide: r.guide } : void 0
+			};
+		}
+		return {
+			plan: {
+				...plan,
+				dx: eff.mask.affects_x ? plan.dx + r.dx : plan.dx,
+				dy: eff.mask.affects_y ? plan.dy + r.dy : plan.dy
+			},
+			emit: r.guide ? { guide: r.guide } : void 0
+		};
+	}
+};
+/** Quantize the moving corner's *post-resize* position to integer
+*  multiples of `pixel_grid_quantum` in own-frame space. Identity when
+*  quantum is `null` / `<= 0` or the gesture is a no-op. */
+const stage_pixel_grid = {
+	name: "pixel_grid",
+	run(plan, ctx) {
+		const q = ctx.options.pixel_grid_quantum;
+		if (q === null || q <= 0) return { plan };
+		const pbase = pipeline_baseline(plan);
+		const f = compute_resize_factors(pbase, plan.direction, plan.dx, plan.dy, false);
+		const eff = effective_resize(pbase, plan.direction, f.sx, f.sy);
+		if (eff.no_op) return { plan };
+		const target_Hx = eff.mask.affects_x ? Math.round(eff.moving_corner.x / q) * q : eff.moving_corner.x;
+		const target_Hy = eff.mask.affects_y ? Math.round(eff.moving_corner.y / q) * q : eff.moving_corner.y;
+		const bbox = pbase.bbox;
+		const Hx_base = corner_x_of(bbox, plan.direction);
+		const Hy_base = corner_y_of(bbox, plan.direction);
+		return { plan: {
+			...plan,
+			dx: eff.mask.affects_x ? target_Hx - Hx_base : 0,
+			dy: eff.mask.affects_y ? target_Hy - Hy_base : 0
+		} };
+	}
+};
+function corner_x_of(r, dir) {
+	switch (dir) {
+		case "nw":
+		case "w":
+		case "sw": return r.x;
+		case "ne":
+		case "e":
+		case "se": return r.x + r.width;
+		case "n":
+		case "s": return r.x + r.width / 2;
+	}
+}
+function corner_y_of(r, dir) {
+	switch (dir) {
+		case "nw":
+		case "n":
+		case "ne": return r.y;
+		case "sw":
+		case "s":
+		case "se": return r.y + r.height;
+		case "e":
+		case "w": return r.y + r.height / 2;
+	}
+}
+/** Default stage list for HUD-driven resize gestures (drag).
+*  No NUDGE / RPC analogs at v1 (no `commands.resize` per README). */
+const STAGES_DEFAULT = Object.freeze([
+	stage_aspect_lock,
+	stage_snap,
+	stage_pixel_grid
+]);
+//#endregion
+//#region src/core/resize-pipeline/apply.ts
+function applyResizePlan(doc, plan, phase = "commit") {
+	const f = compute_resize_factors(plan.baseline, plan.direction, plan.dx, plan.dy, false);
+	const members = plan.members ?? [{
+		id: plan.id,
+		baseline: plan.baseline
+	}];
+	for (const m of members) apply_resize(doc, m.id, m.baseline, f.sx, f.sy, f.origin, phase);
+}
+function revertResizePlan(doc, plan) {
+	const f = compute_resize_factors(plan.baseline, plan.direction, 0, 0, false);
+	const members = plan.members ?? [{
+		id: plan.id,
+		baseline: plan.baseline
+	}];
+	for (const m of members) apply_resize(doc, m.id, m.baseline, 1, 1, f.origin, "preview");
+}
+/**
+* Synthesize a "group" baseline over an arbitrary union rect. The attrs
+* carrier is `rect`-kind so the pipeline math (snap / pixel-grid)
+* treats the group as free per-axis — per-member constraints (circle
+* uniform, text edge no-op) kick in at apply time against each
+* member's own captured baseline.
+*
+* For single-member groups callers should pass the member's own
+* baseline directly so the per-element snap correction (`eff.uniform`
+* branch) fires correctly.
+*/
+function synthesize_group_baseline(union) {
+	return {
+		bbox: {
+			x: union.x,
+			y: union.y,
+			width: union.width,
+			height: union.height
+		},
+		attrs: {
+			kind: "rect",
+			x: union.x,
+			y: union.y,
+			w: union.width,
+			h: union.height
+		}
+	};
+}
+//#endregion
+//#region src/core/resize-pipeline/orchestrator.ts
+const PROVIDER_ID = "svg-editor";
+/** West/north-anchor flips invert the corresponding world delta so a
+*  positive value always grows the moving edge outward — the convention
+*  `compute_resize_factors` consumes. */
+function sign_adjust(dir, dx_world, dy_world) {
+	return {
+		dx: dir === "w" || dir === "nw" || dir === "sw" ? -dx_world : dx_world,
+		dy: dir === "n" || dir === "ne" || dir === "nw" ? -dy_world : dy_world
+	};
+}
+/** Stable, order-independent key for an id set — used by `is_active_for`
+*  to decide whether the current session targets the same group. */
+function ids_key(ids) {
+	return [...ids].sort().join("\0");
+}
+var ResizeOrchestrator = class {
+	constructor(deps) {
+		this.deps = deps;
+		this.active = null;
+		this._last_guides = [];
+	}
+	/** Guides emitted by the most recent pipeline run. Cleared on
+	*  cancel/dispose. */
+	get last_guides() {
+		return this._last_guides;
+	}
+	has_active_session() {
+		return this.active !== null;
+	}
+	/** Is the gesture currently targeting `ids` with `direction`? Used by
+	*  the HUD dispatch to decide whether to reset the session on a new
+	*  handle / target. Order-independent. */
+	is_active_for(ids, direction) {
+		return this.active !== null && this.active.direction === direction && this.active.ids_key === ids_key(ids);
+	}
+	/** Per-frame drive. Opens a session lazily on the first call. The
+	*  HUD passes its gesture-target rect dimensions in **world space**;
+	*  the orchestrator derives the signed world-frame delta against its
+	*  captured `baseline.bbox`. The DOM adapter is responsible for the
+	*  CSS-px → world conversion at the intent boundary. */
+	drive(input, modifiers, opts) {
+		if (input.ids.length === 0) return null;
+		const doc = this.deps.get_doc();
+		for (const id of input.ids) if (!is_resizable_node(doc, id)) return null;
+		const key = ids_key(input.ids);
+		if (this.active && (this.active.ids_key !== key || this.active.direction !== input.direction)) {
+			this.active.preview.discard();
+			this.dispose_session();
+		}
+		if (this.active === null) this.active = this.open(input.ids, input.direction, opts.snap, opts.label ?? "resize");
+		const session = this.active;
+		const bbox = session.baseline.bbox;
+		const dx_world = input.target_width - bbox.width;
+		const dy_world = input.target_height - bbox.height;
+		const d = sign_adjust(input.direction, dx_world, dy_world);
+		const stages = opts.stages ?? STAGES_DEFAULT;
+		const result = this.run_pass(session, d.dx, d.dy, modifiers, stages);
+		session.last_dx = d.dx;
+		session.last_dy = d.dy;
+		session.last_stages = stages;
+		this.write_preview(session, result.plan, opts.phase);
+		if (opts.phase === "commit") {
+			session.preview.commit();
+			this.dispose_session();
+		}
+		return result;
+	}
+	/** Re-run the current preview frame with new modifiers. */
+	redrive_modifiers(modifiers) {
+		if (!this.active) return null;
+		const session = this.active;
+		const result = this.run_pass(session, session.last_dx, session.last_dy, modifiers, session.last_stages);
+		this.write_preview(session, result.plan, "preview");
+		return result;
+	}
+	cancel() {
+		if (!this.active) return;
+		this.active.preview.discard();
+		this.dispose_session();
+	}
+	run_pass(session, dx, dy, modifiers, stages) {
+		const result = run_resize_pipeline({
+			id: session.primary_id,
+			baseline: session.baseline,
+			members: session.members,
+			direction: session.direction,
+			dx,
+			dy
+		}, stages, {
+			input: {
+				id: session.primary_id,
+				direction: session.direction,
+				dx,
+				dy
+			},
+			modifiers,
+			options: this.deps.options(),
+			snap_session: session.snap
+		});
+		this._last_guides = result.guides;
+		return result;
+	}
+	open(ids, direction, snap, label) {
+		const doc = this.deps.get_doc();
+		const members = ids.map((id) => ({
+			id,
+			baseline: capture_resize_baseline(doc, id, this.deps.bbox_world(id))
+		}));
+		const baseline = members.length === 1 ? members[0].baseline : synthesize_group_baseline(cmath.rect.union(members.map((m) => m.baseline.bbox)));
+		return {
+			ids_key: ids_key(ids),
+			primary_id: members[0].id,
+			direction,
+			members,
+			baseline,
+			snap: snap ? this.deps.open_snap(ids) : null,
+			preview: this.deps.open_preview(label),
+			last_dx: 0,
+			last_dy: 0,
+			last_stages: STAGES_DEFAULT
+		};
+	}
+	write_preview(session, plan, phase) {
+		const doc = this.deps.get_doc();
+		const emit = this.deps.emit;
+		session.preview.set({
+			providerId: PROVIDER_ID,
+			apply: () => {
+				applyResizePlan(doc, plan, phase);
+				emit();
+			},
+			revert: () => {
+				revertResizePlan(doc, plan);
+				emit();
+			}
+		});
+	}
+	dispose_session() {
+		if (!this.active) return;
+		this.active.snap?.dispose();
+		this.active = null;
+		this._last_guides = [];
+	}
+};
+//#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 }) {
+			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;
+				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 }) {
+			const owner_doc = container.ownerDocument;
+			const on_keydown = (e) => {
+				const active = owner_doc.activeElement;
+				if (active && active !== owner_doc.body && !container.contains(active)) 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/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/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 };
+/**
+* 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
+	};
+}
+var DomSurface = class DomSurface {
+	constructor(editor, options) {
+		this.editor = editor;
+		this.svg_root = null;
+		this.teardown = [];
+		this.element_index = /* @__PURE__ */ new Map();
+		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.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;
+		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.userSelect = "none";
+		container.style.webkitUserSelect = "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
+		});
+		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),
+			onIntent: (i) => this.commit_intent(i),
+			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: () => {} }
+		});
+		if (options.gestures !== false) applyDefaultGestures(this.gestures);
+		const unsub = editor.subscribe(() => {
+			this.current_tool = editor.state.tool;
+			this.render();
+			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;
+				}
+			}
+			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));
+		}
+		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.set_computed_resolver({
+			computed_property: (id, name) => {
+				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) => {
+				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: parse_paint(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)
+		}), {
+			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));
+	}
+	paint(_snapshot) {}
+	hit_test(x, y) {
+		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 `docs/wg/feat-svg-editor/hit-test.md`.
+	*
+	*    - **`<= 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);
+	}
+	on_input(_listener) {
+		return () => {};
+	}
+	dispose() {
+		if (this.text_edit) {
+			this.text_edit.cancel();
+			this.text_edit = null;
+			this.text_edit_target = 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();
+	}
+	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);
+	}
+	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";
+	}
+	/**
+	* 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() {
+		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 agents = [];
+		for (const id of agent_id_set) {
+			const r = this.bbox_world_for_snap(id);
+			if (r) agents.push(r);
+		}
+		const neighbors = [];
+		for (const id of neighbor_ids) {
+			const r = this.bbox_world_for_snap(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.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;
+			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());
+	}
+	/**
+	* 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 && 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;
+		}
+		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;
+				}
+			}
+		}
+		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, 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(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, 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;
+		}
+		this.container.style.cursor = this.hud.cursorCss();
+	}
+	on_keydown(e) {
+		if (this.text_edit) return;
+		if (e.code === "Escape") this.cancel_in_flight();
+		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);
+	}
+	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 "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 "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 "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();
+	}
+	/** Snapshot of HUD modifier state mapped to pipeline `TranslateModifiers`.
+	*  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() {
+		return {
+			axis_lock: this.hud.modifiers().shift ? "by_dominance" : "off",
+			force_disable_snap: false
+		};
+	}
+	/** 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 (!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.";
+			const hud = this.hud;
+			if (typeof hud.setTransientToast === "function") hud.setTransientToast(message);
+			else 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 apply = () => {
+			if (endpoint === "p1") {
+				doc.set_attr(id, "x1", String(target_x));
+				doc.set_attr(id, "y1", String(target_y));
+			} else {
+				doc.set_attr(id, "x2", String(target_x));
+				doc.set_attr(id, "y2", String(target_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.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
+		};
+	}
+	handle_marquee(intent) {
+		if (intent.phase !== "commit") return;
+		const ids = [];
+		for (const id of this.element_index.keys()) {
+			if (id === this.editor.tree().root) continue;
+			const box = this.container_box(id);
+			if (!box) continue;
+			if (cmath.rect.intersects(box, intent.rect)) ids.push(id);
+		}
+		if (ids.length === 0) {
+			if (!intent.additive) this.editor.commands.deselect();
+			return;
+		}
+		this.editor.commands.select(ids, { mode: intent.additive ? "add" : "replace" });
+	}
+	enter_content_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;
+		const cleanup_after_commit_or_cancel = () => {
+			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;
+		};
+		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;
+					doc.doc.set_text(id, this.text_edit_original);
+					cleanup_after_commit_or_cancel();
+					if (final_text !== this.text_edit_original) this.editor.commands.set_text(final_text);
+				},
+				onCancel: () => {
+					if (settled) return;
+					settled = true;
+					doc.doc.set_text(id, this.text_edit_original);
+					cleanup_after_commit_or_cancel();
+					doc.emit();
+				},
+				onUndoFallthrough: () => {
+					this.text_edit?.commit();
+					this.editor.commands.undo();
+				},
+				onRedoFallthrough: () => {
+					this.text_edit?.commit();
+					this.editor.commands.redo();
+				}
+			}
+		});
+		return true;
+	}
+	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;
+		return project_local_bbox(local, this.editor.document.get_attr(id, "transform"));
+	}
+	/** World-space rect for snap purposes. Differs from `bbox_world` for
+	*  `<svg>` viewport-establishing elements: `getBBox()` on an `<svg>`
+	*  reports the union of descendant geometry (SVG 2 §4.6.4), which —
+	*  when the dragged element is a descendant — silently turns the
+	*  dragged element's own pre-gesture position into a snap target via
+	*  the parent's edges. Use the viewport extent instead so the root
+	*  SVG's snap edges represent the canvas boundary, not "wherever the
+	*  children happen to be right now". */
+	bbox_world_for_snap(id) {
+		if (this.tag_of(id) === "svg") {
+			const el = this.element_index.get(id);
+			if (el instanceof SVGSVGElement) {
+				const vp = svg_viewport_bounds(el);
+				if (vp) return vp;
+			}
+		}
+		return this.bbox_world(id);
+	}
+	editor_internal() {
+		return this.editor._internal;
+	}
+};
+function numAttr(doc, id, name) {
+	return svg_parse.parse_number(doc.get_attr(id, name));
+}
+/** 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/wg/feat-svg-editor/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) {
+		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) {
+		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) {
+		return this.accessors.pick_at_world(p, true);
+	}
+};
+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_of_doc(doc, id);
+		if (intrinsic) return intrinsic;
+		if (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 { Camera as a, MemoizedGeometryProvider as i, Gestures as n, DEFAULT_SNAP_OPTIONS as r, attach_dom_surface as t };