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

package/dist/{dom-kA8NDuVh.mjs → dom-CmOu0HvI.mjs}

@@ -1,14 +1,531 @@
-import { a as capture_resize_baseline, c as is_resizable, i as apply_translate, o as capture_translate_baseline, r as apply_resize, s as compute_resize_factors, t as parse_paint } from "./paint-DuCg6Y-K.mjs";
+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;
@@ -22,6 +539,8 @@ var SvgTextSurface = class {
 			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");
@@ -79,7 +598,10 @@ var SvgTextSurface = class {
 		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();
@@ -169,20 +691,28 @@ const IS_MODIFIER_KEY = {
 *  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 `SurfaceHandle` whose
-* `detach()` is the inverse — DOM cleared, listeners removed.
+* 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.container);
-	return editor.attach(surface);
+	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, container) {
+	constructor(editor, options) {
 		this.editor = editor;
-		this.container = container;
 		this.svg_root = null;
 		this.teardown = [];
 		this.element_index = /* @__PURE__ */ new Map();
@@ -192,6 +722,9 @@ var DomSurface = class {
 		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";
@@ -209,6 +742,14 @@ var DomSurface = class {
 			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();
@@ -216,9 +757,19 @@ var DomSurface = class {
 		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();
@@ -290,6 +841,7 @@ var DomSurface = class {
 			this.text_edit = null;
 			this.text_edit_target = null;
 		}
+		this.gestures._dispose();
 		for (const fn of this.teardown) fn();
 		this.teardown = [];
 		this.hud.dispose();
@@ -299,6 +851,10 @@ var DomSurface = class {
 		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;
@@ -311,6 +867,8 @@ var DomSurface = class {
 		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;
@@ -327,8 +885,142 @@ var DomSurface = class {
 	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());
@@ -544,8 +1236,10 @@ var DomSurface = class {
 	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;