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

package/dist/dom-CfP_ZURh.js

@@ -1,963 +0,0 @@
-//#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;
-	}
-});