@grida/svg-editor 1.0.0-alpha.1

package/dist/dom-CfP_ZURh.js

@@ -0,0 +1,963 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+const require_paint = require("./paint-DHq_3iwU.js");
+let _grida_text_editor_dom = require("@grida/text-editor/dom");
+let _grida_hud = require("@grida/hud");
+let _grida_cmath__measurement = require("@grida/cmath/_measurement");
+let _grida_cmath = require("@grida/cmath");
+_grida_cmath = __toESM(_grida_cmath);
+//#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.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");
+		}
+		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);
+		this.prevXmlSpace = 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 `SurfaceHandle` whose
+* `detach()` is the inverse — DOM cleared, listeners removed.
+*
+* 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);
+}
+var DomSurface = class {
+	constructor(editor, container) {
+		this.editor = editor;
+		this.container = container;
+		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;
+		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 _grida_hud.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.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.redraw();
+		});
+		this.teardown.push(() => win.cancelAnimationFrame(raf));
+		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: require_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;
+		}
+		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;
+	}
+	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.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.redraw();
+	}
+	/** 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 = (0, _grida_cmath__measurement.measure)(_grida_cmath.default.rect.union(a_rects), b_rect);
+		if (!m) return void 0;
+		return (0, _grida_hud.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
+		} : _grida_hud.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") {
+				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 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, require_paint.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;
+				require_paint.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;
+				require_paint.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 || !require_paint.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: require_paint.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 = require_paint.compute_resize_factors(baseline, dir, d.x, d.y, false);
+		const apply = () => {
+			require_paint.apply_resize(doc, id, baseline, f.sx, f.sy, f.origin);
+			emit();
+		};
+		const revert = () => {
+			require_paint.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 = (0, _grida_text_editor_dom.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
+Object.defineProperty(exports, "__toESM", {
+	enumerable: true,
+	get: function() {
+		return __toESM;
+	}
+});
+Object.defineProperty(exports, "attach_dom_surface", {
+	enumerable: true,
+	get: function() {
+		return attach_dom_surface;
+	}
+});