@grida/svg-editor 1.0.0-alpha.4 → 1.0.0

package/dist/dom-CmOu0HvI.mjs

@@ -1,1623 +0,0 @@
-import { a as capture_resize_baseline, c as is_resizable, i as apply_translate, l as is_text_input_focused, o as capture_translate_baseline, r as apply_resize, s as compute_resize_factors, t as parse_paint } from "./paint-Cfiw4g_J.mjs";
-import { createTextEditor } from "@grida/text-editor/dom";
-import { NO_MODS, Surface, measurementToHUDDraw } from "@grida/hud";
-import { measure } from "@grida/cmath/_measurement";
-import cmath from "@grida/cmath";
-//#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 tx = sw > vp_w ? cmath.clamp(t[0][2], vp_w - s * (bounds.x + bounds.width), -s * bounds.x) : (vp_w - sw) / 2 - s * bounds.x;
-	const ty = sh > vp_h ? cmath.clamp(t[1][2], vp_h - s * (bounds.y + bounds.height), -s * bounds.y) : (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/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;
-		const parent = textEl.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, textEl);
-		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, textEl.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
-const ID_ATTR = "data-grida-id";
-/** 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 {
-	constructor(editor, options) {
-		this.editor = editor;
-		this.svg_root = null;
-		this.teardown = [];
-		this.element_index = /* @__PURE__ */ new Map();
-		this.resize_observer = null;
-		this.active_preview = null;
-		this.text_edit = null;
-		this.text_edit_target = null;
-		this.text_edit_original = "";
-		this.editor_hover_internal = null;
-		this.container = options.container;
-		const container = this.container;
-		this.fit_on_attach = options.fit === true;
-		if (getComputedStyle(container).position === "static") container.style.position = "relative";
-		container.style.userSelect = "none";
-		container.style.webkitUserSelect = "none";
-		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 }
-		});
-		this.camera = new Camera({
-			resolve_bounds: (target) => this.resolve_world_bounds(target),
-			initial: options.initial_camera
-		});
-		this.teardown.push(this.camera.subscribe(() => {
-			this.apply_camera_transform();
-			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.render();
-			this.sync_surface_selection();
-			this.sync_canvas_size();
-		});
-		this.teardown.push(unsub);
-		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));
-		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) {
-		const owner_doc = this.container.ownerDocument;
-		const cr = this.container.getBoundingClientRect();
-		const target = owner_doc.elementFromPoint(cr.left + x, cr.top + y);
-		if (!(target instanceof SVGElement)) return null;
-		const root_id = this.editor.tree().root;
-		let cur = target;
-		while (cur instanceof Element) {
-			const id = cur.getAttribute(ID_ATTR);
-			if (id) return id === root_id ? null : id;
-			cur = cur.parentElement;
-		}
-		return null;
-	}
-	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();
-		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.active_preview = null;
-	}
-	/** 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();
-		if (target === "<selection>") {
-			const sel = this.editor.state.selection;
-			if (sel.length === 0) return null;
-			const rects = [];
-			for (const id of sel) {
-				const r = this.node_world_bounds(id);
-				if (r) rects.push(r);
-			}
-			if (rects.length === 0) return null;
-			return cmath.rect.union(rects);
-		}
-		return this.node_world_bounds(target);
-	}
-	/**
-	* 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;
-	}
-	/**
-	* World-space bounds of a single node. Uses `getBBox()` (element-local)
-	* and projects through `getCTM()` (local → nearest viewport = SVG root).
-	*/
-	node_world_bounds(id) {
-		const el = this.element_index.get(id);
-		if (!el) return null;
-		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
-		};
-	}
-	/** Single per-frame draw entry — merges host-fed extras with surface chrome. */
-	redraw() {
-		this.hud.draw(this.compute_measurement_extra());
-	}
-	/**
-	* 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;
-		const hover = this.hud.hover();
-		if (!hover) return void 0;
-		if (sel.includes(hover)) return void 0;
-		const a_rects = sel.map((id) => this.container_box(id)).filter((r) => r !== null);
-		if (a_rects.length === 0) return void 0;
-		const b_rect = this.container_box(hover);
-		if (!b_rect) return void 0;
-		const m = measure(cmath.rect.union(a_rects), b_rect);
-		if (!m) return void 0;
-		return measurementToHUDDraw(m, this.editor.style.measurement_color);
-	}
-	sync_surface_selection() {
-		const state = this.editor.state;
-		if (state.mode === "edit-content") {
-			this.hud.setSelection([]);
-			return;
-		}
-		this.hud.setSelection(state.selection);
-	}
-	/**
-	* 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) {
-		if (this.tag_of(id) === "line") {
-			const line = this.line_endpoints_in_container(id);
-			if (line) return {
-				kind: "line",
-				p1: line.p1,
-				p2: line.p2
-			};
-		}
-		const rect = this.container_box(id);
-		if (!rect) return null;
-		return {
-			kind: "rect",
-			rect
-		};
-	}
-	/**
-	* 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_box(id) {
-		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;
-		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);
-		const cr = this.container.getBoundingClientRect();
-		return {
-			x: left - cr.left + this.container.scrollLeft,
-			y: top - cr.top + this.container.scrollTop,
-			width: right - left,
-			height: bottom - top
-		};
-	}
-	screen_delta_in_own_frame(id, dx, dy) {
-		const el = this.element_index.get(id);
-		if (!el) return {
-			x: dx,
-			y: dy
-		};
-		return this.unproject_delta(el, dx, dy);
-	}
-	screen_delta_in_parent_frame(id, dx, dy) {
-		const el = this.element_index.get(id);
-		if (!el) return {
-			x: dx,
-			y: dy
-		};
-		const parent = el.parentNode ?? el;
-		return this.unproject_delta(parent, dx, dy);
-	}
-	unproject_delta(frame, dx, dy) {
-		const ctm = typeof frame.getScreenCTM === "function" ? frame.getScreenCTM() : null;
-		if (!ctm || !this.svg_root) return {
-			x: dx,
-			y: dy
-		};
-		const inv = ctm.inverse();
-		const p0 = this.svg_root.createSVGPoint();
-		p0.x = 0;
-		p0.y = 0;
-		const p1 = this.svg_root.createSVGPoint();
-		p1.x = dx;
-		p1.y = dy;
-		const tp0 = p0.matrixTransform(inv);
-		const tp1 = p1.matrixTransform(inv);
-		return {
-			x: tp1.x - tp0.x,
-			y: tp1.y - tp0.y
-		};
-	}
-	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
-		});
-		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) {
-			if (kind === "pointer_down") {
-				e.preventDefault();
-				const el = this.text_edit_target ? this.element_index.get(this.text_edit_target) : null;
-				if (el && e.target instanceof Element && (e.target === el || el.contains(e.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);
-			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;
-		const mods = {
-			shift: e.shiftKey,
-			alt: e.altKey,
-			meta: e.metaKey,
-			ctrl: e.ctrlKey
-		};
-		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
-			};
-			if (kind === "pointer_down") try {
-				this.container.setPointerCapture(e.pointerId);
-			} catch {}
-		}
-		const response = this.hud.dispatch(event);
-		if (response.needsRedraw) this.redraw();
-		if (response.cursorChanged) this.sync_cursor();
-		if (response.hoverChanged) this.editor_hover_internal?.push_surface_hover(this.hud.hover());
-	}
-	sync_cursor() {
-		const c = this.hud.cursor();
-		let css = "default";
-		if (typeof c === "string") css = c === "default" ? "default" : c;
-		else if (c.kind === "resize") css = `${c.direction}-resize`;
-		else if (c.kind === "rotate") css = "crosshair";
-		this.container.style.cursor = css;
-	}
-	on_keydown(e) {
-		if (this.text_edit) return;
-		if (e.code === "Escape" && this.active_preview) {
-			this.active_preview.session.discard();
-			this.active_preview = null;
-		}
-		this.editor.keymap.dispatch(e);
-	}
-	commit_intent(intent) {
-		switch (intent.kind) {
-			case "select":
-				this.editor.commands.select(intent.ids, { additive: intent.mode !== "replace" });
-				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": 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":
-				if (this.active_preview) {
-					this.active_preview.session.discard();
-					this.active_preview = null;
-				}
-				return;
-		}
-	}
-	handle_translate(intent) {
-		const ids = intent.ids;
-		if (ids.length === 0) return;
-		const internal = this.editor_internal();
-		const doc = internal.doc;
-		const emit = internal.emit;
-		if (!this.active_preview || this.active_preview.kind !== "translate") {
-			if (this.active_preview) this.active_preview.session.discard();
-			const baselines = /* @__PURE__ */ new Map();
-			for (const id of ids) baselines.set(id, capture_translate_baseline(doc, id));
-			this.active_preview = {
-				kind: "translate",
-				ids,
-				baselines,
-				session: internal.history.preview("move")
-			};
-		}
-		const baselines = this.active_preview.baselines;
-		const deltas = /* @__PURE__ */ new Map();
-		for (const id of ids) deltas.set(id, this.screen_delta_in_parent_frame(id, intent.dx, intent.dy));
-		const apply = () => {
-			for (const id of ids) {
-				const baseline = baselines.get(id);
-				const d = deltas.get(id);
-				if (!baseline || !d) continue;
-				apply_translate(doc, id, baseline, d.x, d.y);
-			}
-			emit();
-		};
-		const revert = () => {
-			for (const id of ids) {
-				const baseline = baselines.get(id);
-				if (!baseline) continue;
-				apply_translate(doc, id, baseline, 0, 0);
-			}
-			emit();
-		};
-		this.active_preview.session.set({
-			providerId: "svg-editor",
-			apply,
-			revert
-		});
-		if (intent.phase === "commit") {
-			this.active_preview.session.commit();
-			this.active_preview = null;
-		}
-	}
-	handle_resize(intent) {
-		const id = intent.ids[0];
-		if (!id || !is_resizable(this.tag_of(id))) return;
-		const internal = this.editor_internal();
-		const doc = internal.doc;
-		const emit = internal.emit;
-		if (!this.active_preview || this.active_preview.kind !== "resize" || this.active_preview.id !== id) {
-			if (this.active_preview) this.active_preview.session.discard();
-			const bbox = this.bbox_local(id) ?? {
-				x: 0,
-				y: 0,
-				width: 0,
-				height: 0
-			};
-			const initial_screen = this.container_box(id) ?? {
-				x: 0,
-				y: 0,
-				width: 0,
-				height: 0
-			};
-			this.active_preview = {
-				kind: "resize",
-				id,
-				direction: intent.anchor,
-				baseline: capture_resize_baseline(doc, id, bbox),
-				initial_screen,
-				session: internal.history.preview("resize")
-			};
-		}
-		const baseline = this.active_preview.baseline;
-		const dir = this.active_preview.direction;
-		const initial = this.active_preview.initial_screen;
-		const dx_screen = intent.rect.width - initial.width;
-		const dy_screen = intent.rect.height - initial.height;
-		const signed_dx = dir === "w" || dir === "nw" || dir === "sw" ? -dx_screen : dx_screen;
-		const signed_dy = dir === "n" || dir === "ne" || dir === "nw" ? -dy_screen : dy_screen;
-		const d = this.screen_delta_in_own_frame(id, signed_dx, signed_dy);
-		const f = compute_resize_factors(baseline, dir, d.x, d.y, false);
-		const apply = () => {
-			apply_resize(doc, id, baseline, f.sx, f.sy, f.origin);
-			emit();
-		};
-		const revert = () => {
-			apply_resize(doc, id, baseline, 1, 1, f.origin);
-			emit();
-		};
-		this.active_preview.session.set({
-			providerId: "svg-editor",
-			apply,
-			revert
-		});
-		if (intent.phase === "commit") {
-			this.active_preview.session.commit();
-			this.active_preview = null;
-		}
-	}
-	/**
-	* 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, el] of this.element_index) {
-			if (id === this.editor.tree().root) continue;
-			const box = this.container_box(id);
-			if (!box) continue;
-			if (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, { additive: intent.additive });
-	}
-	enter_content_edit(id) {
-		if (this.text_edit) return false;
-		const el = this.element_index.get(id);
-		if (!(el instanceof SVGTextElement)) return false;
-		const doc = this.editor._internal;
-		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.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.text_edit = null;
-			this.text_edit_target = null;
-			this.editor.commands.set_mode("select");
-			this.render();
-			this.sync_surface_selection();
-			this.redraw();
-		};
-		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;
-		}
-	}
-	editor_internal() {
-		return this.editor._internal;
-	}
-};
-function numAttr(doc, id, name) {
-	const v = doc.get_attr(id, name);
-	if (v === null || v === "") return 0;
-	const n = parseFloat(v);
-	return Number.isFinite(n) ? n : 0;
-}
-function rect_intersects(a, b) {
-	return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
-}
-//#endregion
-export { attach_dom_surface as t };