@grida/svg-editor 1.0.0-alpha.15 → 1.0.0-alpha.16

package/dist/{editor-CvWpD5mu.mjs → editor-DKQOIKuU.mjs}

@@ -1,9 +1,7 @@
-import { _ as is_text_input_focused, a as paint, g as array_shallow_equal, h as group, i as TOOL_CURSOR, m as transform, n as insertions, p as translate_pipeline, r as DEFAULT_STYLE, s as resize_pipeline, u as rotate_pipeline } from "./model-B2UWgViT.mjs";
+import { _ as XLINK_NS, a as paint, b as is_text_input_focused, g as SvgDocument, h as transform, i as TOOL_CURSOR, m as group, n as insertions, p as translate_pipeline, r as DEFAULT_STYLE, s as resize_pipeline, u as rotate_pipeline, v as XMLNS_NS, y as array_shallow_equal } from "./model-L3t9ixT_.mjs";
 import { HistoryImpl } from "@grida/history";
 import { KeyCode, M, chunkKey, eventToChunk, getKeyboardOS, kb, keybindingsToKeyCodes } from "@grida/keybinding";
 import cmath from "@grida/cmath";
-import { XLINK_NS, encode_attr_value, encode_text, parse_svg } from "@grida/svg/parser";
-import { svg_parse } from "@grida/svg/parse";
 //#region src/commands/registry.ts
 var CommandRegistry = class {
 	constructor() {
@@ -84,12 +82,26 @@ function registerDefaultCommands(reg, editor) {
 		if (editor.state.selection.length === 0) return false;
 		return editor.commands.group();
 	});
+	reg.register("selection.ungroup", () => {
+		if (editor.state.mode !== "select") return false;
+		if (editor.state.selection.length !== 1) return false;
+		return editor.commands.ungroup();
+	});
 	reg.register("selection.resize_to", (args) => {
 		if (editor.state.mode !== "select") return false;
 		if (editor.state.selection.length === 0) return false;
 		const target = args;
 		return editor.commands.resize_to(target);
 	});
+	reg.register("selection.nudge_resize", (args) => {
+		if (editor.state.mode !== "select") return false;
+		if (editor.state.selection.length === 0) return false;
+		const { dw, dh } = args;
+		return editor.commands.resize_by({
+			dw,
+			dh
+		});
+	});
 	reg.register("selection.rotate", (args) => {
 		if (editor.state.mode !== "select") return false;
 		if (editor.state.selection.length === 0) return false;
@@ -309,7 +321,8 @@ function compareEntries(a, b) {
 * Same key, multiple meanings? Add multiple rows. The chain semantics
 * (handler returns `false` when not applicable) handle the rest.
 */
-const NUDGE_MEANINGFUL = M.Shift;
+const NUDGE_MEANINGFUL = M.Shift | M.Ctrl;
+const RESIZE_MEANINGFUL = M.Shift | M.Ctrl | M.Alt;
 const DEFAULT_BINDINGS = [
 	{
 		keybinding: kb(KeyCode.KeyZ, M.CtrlCmd),
@@ -339,6 +352,10 @@ const DEFAULT_BINDINGS = [
 		keybinding: kb(KeyCode.KeyG, M.CtrlCmd),
 		command: "selection.group"
 	},
+	{
+		keybinding: kb(KeyCode.KeyG, M.CtrlCmd | M.Shift),
+		command: "selection.ungroup"
+	},
 	{
 		keybinding: kb(KeyCode.KeyA, M.CtrlCmd),
 		command: "selection.all"
@@ -459,6 +476,70 @@ const DEFAULT_BINDINGS = [
 			dy: 10
 		}
 	},
+	{
+		keybinding: kb(KeyCode.RightArrow, M.Ctrl | M.Alt, RESIZE_MEANINGFUL),
+		command: "selection.nudge_resize",
+		args: {
+			dw: 1,
+			dh: 0
+		}
+	},
+	{
+		keybinding: kb(KeyCode.LeftArrow, M.Ctrl | M.Alt, RESIZE_MEANINGFUL),
+		command: "selection.nudge_resize",
+		args: {
+			dw: -1,
+			dh: 0
+		}
+	},
+	{
+		keybinding: kb(KeyCode.DownArrow, M.Ctrl | M.Alt, RESIZE_MEANINGFUL),
+		command: "selection.nudge_resize",
+		args: {
+			dw: 0,
+			dh: 1
+		}
+	},
+	{
+		keybinding: kb(KeyCode.UpArrow, M.Ctrl | M.Alt, RESIZE_MEANINGFUL),
+		command: "selection.nudge_resize",
+		args: {
+			dw: 0,
+			dh: -1
+		}
+	},
+	{
+		keybinding: kb(KeyCode.RightArrow, M.Ctrl | M.Alt | M.Shift, RESIZE_MEANINGFUL),
+		command: "selection.nudge_resize",
+		args: {
+			dw: 10,
+			dh: 0
+		}
+	},
+	{
+		keybinding: kb(KeyCode.LeftArrow, M.Ctrl | M.Alt | M.Shift, RESIZE_MEANINGFUL),
+		command: "selection.nudge_resize",
+		args: {
+			dw: -10,
+			dh: 0
+		}
+	},
+	{
+		keybinding: kb(KeyCode.DownArrow, M.Ctrl | M.Alt | M.Shift, RESIZE_MEANINGFUL),
+		command: "selection.nudge_resize",
+		args: {
+			dw: 0,
+			dh: 10
+		}
+	},
+	{
+		keybinding: kb(KeyCode.UpArrow, M.Ctrl | M.Alt | M.Shift, RESIZE_MEANINGFUL),
+		command: "selection.nudge_resize",
+		args: {
+			dw: 0,
+			dh: -10
+		}
+	},
 	{
 		keybinding: kb(KeyCode.KeyV),
 		command: TOOL_SET,
@@ -755,825 +836,6 @@ function create_defs(doc) {
 	return { gradients: new GradientsRegistry(doc) };
 }
 //#endregion
-//#region src/core/document.ts
-/** The native vector tags `retype_to_path` can re-type, keyed by tag → the
-*  native geometry attributes it consumes (so no orphaned geometry attr
-*  survives on the resulting `<path>`). Covers the geometry primitives
-*  (rect / circle / ellipse — always re-typed) and the vertex tags (line /
-*  polyline / polygon — re-typed only when an edit escapes their native
-*  form). */
-const RETYPABLE_GEOMETRY_ATTRS = {
-	line: new Set([
-		"x1",
-		"y1",
-		"x2",
-		"y2"
-	]),
-	polyline: new Set(["points"]),
-	polygon: new Set(["points"]),
-	rect: new Set([
-		"x",
-		"y",
-		"width",
-		"height",
-		"rx",
-		"ry"
-	]),
-	circle: new Set([
-		"cx",
-		"cy",
-		"r"
-	]),
-	ellipse: new Set([
-		"cx",
-		"cy",
-		"rx",
-		"ry"
-	])
-};
-/**
-* Parse a single SVG length attribute as a plain user-unit number. Returns
-* `null` for absent, non-finite, or unit/percentage values (`50%`, `5px`,
-* `5em`) — those are an out-of-scope geometry gap, and refusing them here
-* means the editor never offers a promotion it cannot perform faithfully.
-*/
-function parse_user_unit(raw) {
-	if (raw === null) return null;
-	const s = raw.trim();
-	if (s === "") return null;
-	if (!/^[+-]?(\d+\.?\d*|\.\d+)([eE][+-]?\d+)?$/.test(s)) return null;
-	const n = Number(s);
-	return Number.isFinite(n) ? n : null;
-}
-/**
-* Attribute names whose writes can shift a node's rendered bounds.
-* Membership drives `_geometry_version` bumps in `set_attr`. Only
-* non-namespaced attribute names — namespaced writes (xlink:href, etc.)
-* never bump because they're references, not geometry.
-*
-* Includes text-shaping attributes (font-*) because they re-shape glyph
-* runs and change `<text>` bbox.
-*/
-const GEOMETRY_ATTRS = new Set([
-	"x",
-	"y",
-	"x1",
-	"y1",
-	"x2",
-	"y2",
-	"cx",
-	"cy",
-	"width",
-	"height",
-	"r",
-	"rx",
-	"ry",
-	"points",
-	"d",
-	"transform",
-	"viewBox",
-	"font-size",
-	"font-family",
-	"font-weight",
-	"font-style",
-	"text-anchor",
-	"dx",
-	"dy",
-	"rotate",
-	"textLength",
-	"lengthAdjust",
-	"pathLength",
-	"marker-start",
-	"marker-mid",
-	"marker-end"
-]);
-/** `transform:` CSS property at the start of a declaration list or after `;`. */
-const CSS_TRANSFORM_PROPERTY = /(?:^|;)\s*transform\s*:/i;
-var SvgDocument = class SvgDocument {
-	constructor(svg) {
-		this.listeners = /* @__PURE__ */ new Set();
-		this._structure_version = 0;
-		this._geometry_version = 0;
-		if (typeof svg !== "string") throw new TypeError(`new SvgDocument(svg) requires a string source, got ${svg === null ? "null" : typeof svg}`);
-		this.source = svg;
-		const parsed = parse_svg(svg);
-		this.original = parsed;
-		this.nodes = parsed.nodes;
-		this.prolog = parsed.prolog;
-		this.epilog = parsed.epilog;
-		this.root = parsed.root;
-	}
-	static parse(svg) {
-		return new SvgDocument(svg);
-	}
-	/** Reload from the original parse, discarding all edits. */
-	reset_to_original() {
-		const parsed = parse_svg(this.source);
-		this.original = parsed;
-		this.nodes = parsed.nodes;
-		this.prolog = parsed.prolog;
-		this.epilog = parsed.epilog;
-		this.root = parsed.root;
-		this._structure_version++;
-		this._geometry_version++;
-		this.emit();
-	}
-	/** Replace document with new svg source (clears edits + history-owned state). */
-	load(svg) {
-		if (typeof svg !== "string") throw new TypeError(`SvgDocument.load(svg) requires a string source, got ${svg === null ? "null" : typeof svg}`);
-		this.source = svg;
-		const parsed = parse_svg(svg);
-		this.original = parsed;
-		this.nodes = parsed.nodes;
-		this.prolog = parsed.prolog;
-		this.epilog = parsed.epilog;
-		this.root = parsed.root;
-		this._structure_version++;
-		this._geometry_version++;
-		this.emit();
-	}
-	on_change(fn) {
-		this.listeners.add(fn);
-		return () => this.listeners.delete(fn);
-	}
-	/** See `_structure_version` for what this counter signals. */
-	get structure_version() {
-		return this._structure_version;
-	}
-	/** See `_geometry_version` for what this counter signals. */
-	get geometry_version() {
-		return this._geometry_version;
-	}
-	emit() {
-		for (const fn of this.listeners) fn();
-	}
-	/** Notify subscribers — for callers that mutate directly via setAttr/etc. */
-	notify() {
-		this.emit();
-	}
-	get(id) {
-		return this.nodes.get(id) ?? null;
-	}
-	is_element(id) {
-		return this.nodes.get(id)?.kind === "element";
-	}
-	parent_of(id) {
-		return this.nodes.get(id)?.parent ?? null;
-	}
-	children_of(id) {
-		const n = this.nodes.get(id);
-		if (!n || n.kind !== "element") return [];
-		return n.children;
-	}
-	/** Element children only — text/comment/cdata filtered out. */
-	element_children_of(id) {
-		return this.children_of(id).filter((c) => this.is_element(c));
-	}
-	next_sibling_of(id) {
-		const parent = this.parent_of(id);
-		if (parent === null) return null;
-		const siblings = this.children_of(parent);
-		const i = siblings.indexOf(id);
-		return i >= 0 && i + 1 < siblings.length ? siblings[i + 1] : null;
-	}
-	next_element_sibling_of(id) {
-		const parent = this.parent_of(id);
-		if (parent === null) return null;
-		const siblings = this.element_children_of(parent);
-		const i = siblings.indexOf(id);
-		return i >= 0 && i + 1 < siblings.length ? siblings[i + 1] : null;
-	}
-	tag_of(id) {
-		const n = this.nodes.get(id);
-		return n && n.kind === "element" ? n.local : "";
-	}
-	contains(ancestor, descendant) {
-		if (ancestor === descendant) return true;
-		let cur = this.parent_of(descendant);
-		while (cur !== null) {
-			if (cur === ancestor) return true;
-			cur = this.parent_of(cur);
-		}
-		return false;
-	}
-	/**
-	* Filter a selection down to its **subtree roots** — drop any id whose
-	* ancestor is also in the input set.
-	*
-	* Mirrors `pruneNestedNodes` in the main canvas editor's query module
-	* ([editor/grida-canvas/query/index.ts:138](../../../../editor/grida-canvas/query/index.ts)) and shares its UX motivation:
-	* when a parent and a descendant are both selected, only the parent
-	* should drive multi-node mutations — otherwise the descendant
-	* accumulates the transform twice (once via the parent's `transform`,
-	* once via its own attribute write). Required for `commands.remove`
-	* (avoids re-attaching detached descendants on undo) and any multi-
-	* member translate path (avoids 2× drift for the Bar-chart marquee
-	* case).
-	*
-	* Order: preserves the input order for retained ids. Duplicates in
-	* the input are not deduplicated — callers are responsible (the
-	* editor's `commands.select` already dedupes).
-	*
-	* Performance: `O(n × depth)`. Builds a `Set` over the input once,
-	* then walks each id's ancestor chain at most once. The main editor's
-	* version is `O(n² × depth)` (per-pair `isAncestor`) — fine at typical
-	* selection sizes (a few dozen), worth winning here for free since
-	* `parent_of` is `O(1)` on our parent-map.
-	*/
-	prune_nested_nodes(ids) {
-		if (ids.length <= 1) return [...ids];
-		const set = new Set(ids);
-		const out = [];
-		for (const id of ids) {
-			let nested = false;
-			let cur = this.parent_of(id);
-			while (cur !== null) {
-				if (set.has(cur)) {
-					nested = true;
-					break;
-				}
-				cur = this.parent_of(cur);
-			}
-			if (!nested) out.push(id);
-		}
-		return out;
-	}
-	all_nodes() {
-		const out = [];
-		const walk = (id) => {
-			out.push(id);
-			const c = this.children_of(id);
-			for (const ch of c) walk(ch);
-		};
-		walk(this.root);
-		return out;
-	}
-	all_elements() {
-		return this.all_nodes().filter((id) => this.is_element(id));
-	}
-	find_by_tag(ancestor, tag) {
-		const out = [];
-		const walk = (id) => {
-			if (id !== ancestor && this.is_element(id) && this.tag_of(id) === tag) out.push(id);
-			for (const c of this.children_of(id)) walk(c);
-		};
-		walk(ancestor);
-		return out;
-	}
-	/** Read attribute by local name, optionally namespace-filtered. */
-	get_attr(id, name, ns = null) {
-		const n = this.nodes.get(id);
-		if (!n || n.kind !== "element") return null;
-		for (const a of n.attrs) if (a.local === name && (ns === null || a.ns === ns)) return a.value;
-		return null;
-	}
-	/**
-	* Set / remove an attribute. If the attribute exists, it is mutated in place
-	* (preserving source position). If it doesn't, it's appended.
-	*/
-	set_attr(id, name, value, ns = null) {
-		const n = this.nodes.get(id);
-		if (!n || n.kind !== "element") return;
-		const structural = name === "id";
-		const geometry = ns === null && GEOMETRY_ATTRS.has(name);
-		for (let i = 0; i < n.attrs.length; i++) {
-			const a = n.attrs[i];
-			if (a.local === name && (ns === null || a.ns === ns)) {
-				if (value === null) n.attrs.splice(i, 1);
-				else a.value = value;
-				if (structural) this._structure_version++;
-				if (geometry) this._geometry_version++;
-				this.emit();
-				return;
-			}
-		}
-		if (value !== null) {
-			const prefix = ns === XLINK_NS ? "xlink" : null;
-			n.attrs.push({
-				raw_name: prefix ? `${prefix}:${name}` : name,
-				prefix,
-				local: name,
-				ns,
-				value,
-				pre: " ",
-				eq_trivia: "",
-				quote: "\""
-			});
-			if (structural) this._structure_version++;
-			if (geometry) this._geometry_version++;
-			this.emit();
-		}
-	}
-	attributes_of(id) {
-		const n = this.nodes.get(id);
-		if (!n || n.kind !== "element") return [];
-		return n.attrs.map((a) => ({
-			name: a.local,
-			ns: a.ns,
-			value: a.value
-		}));
-	}
-	get_style(id, property) {
-		const style = this.get_attr(id, "style");
-		if (!style) return null;
-		const decls = parse_inline_style(style);
-		for (const d of decls) if (d.property === property) return d.value;
-		return null;
-	}
-	set_style(id, property, value) {
-		const decls = parse_inline_style(this.get_attr(id, "style") ?? "");
-		const idx = decls.findIndex((d) => d.property === property);
-		if (value === null) {
-			if (idx === -1) return;
-			decls.splice(idx, 1);
-		} else if (idx === -1) decls.push({
-			property,
-			value
-		});
-		else decls[idx].value = value;
-		const next = decls.map((d) => `${d.property}: ${d.value}`).join("; ");
-		this.set_attr(id, "style", next === "" ? null : next);
-	}
-	get_all_styles(id) {
-		const style = this.get_attr(id, "style");
-		if (!style) return [];
-		return parse_inline_style(style);
-	}
-	/**
-	* Whether `id` can be opened in the flat-string text editor.
-	*
-	* v1 contract: the editor only operates on a *single flat text run*. That
-	* means the target must be a `<text>` or `<tspan>` whose direct children
-	* are all text nodes (or it has no children). A `<text>` containing a
-	* `<tspan>` is *not* honestly editable — `text_of` would drop the tspan
-	* content from the editor's view, and a flat-text write would leave the
-	* tspan dangling. Tspan-as-target is fine and well-defined when it's a
-	* leaf; only the host decides whether to route double-click to a tspan
-	* or its parent text.
-	*/
-	is_text_edit_target(id) {
-		const n = this.nodes.get(id);
-		if (!n || n.kind !== "element") return false;
-		if (n.local !== "text" && n.local !== "tspan") return false;
-		for (const c of n.children) if (this.nodes.get(c)?.kind !== "text") return false;
-		return true;
-	}
-	/**
-	* Returns a tag-discriminated snapshot of the authored geometry attrs
-	* if this node is eligible for vector (vertex) editing — else `null`.
-	*
-	* Eligibility:
-	*   - `<path>`     — requires non-empty `d`.
-	*   - `<line>`     — requires two distinct finite user-unit endpoints.
-	*   - `<polyline>` — requires `points` parseable to ≥ 2 vertices.
-	*   - `<polygon>`  — same as polyline.
-	*   - `<rect>`     — requires finite user-unit `width`/`height` > 0.
-	*   - `<circle>`   — requires finite user-unit `r` > 0.
-	*   - `<ellipse>`  — requires finite user-unit `rx`/`ry` > 0.
-	*
-	* The vertex tags (`line` / `polyline` / `polygon`) write edits back to
-	* their native attributes while the geometry stays expressible there; an
-	* edit that escapes the native form (a curve, or a topology change that
-	* leaves the canonical chain) re-types the element to `<path>`. The
-	* geometry primitives (`rect` / `circle` / `ellipse`) have no native
-	* vector form, so any vector edit re-types them. In all cases the native
-	* tag is preserved byte-for-byte until the first re-typing edit commits
-	* (see `retype_to_path`). Design:
-	* `docs/wg/feat-svg-editor/promote-to-path.md`.
-	*
-	* Geometry that is not a plain user-unit number (`%`, `px`, `em`, …) is
-	* an out-of-scope gap, so such an element returns `null` rather than
-	* advertising an edit the editor cannot perform faithfully.
-	*
-	* Rejects `<image>` / `<use>` (raster / reference bounding boxes, no
-	* editable outline).
-	*/
-	/**
-	* Parse an optional SVG geometry coordinate (`x`/`y`, `cx`/`cy`, the line
-	* endpoints). An **absent** attribute takes the SVG default (`0`); a
-	* **present** attribute that is not a plain user-unit number (`%`, `px`,
-	* `em`, …) is out of scope and yields `null` so the caller refuses the
-	* element — the same gate required attrs (width / radius) already apply.
-	*
-	* The absent-vs-present distinction is the point: a bare `?? 0` would
-	* silently coerce an authored `x1="5px"` to `0`, then the first native
-	* writeback would overwrite that authored value. Refusing keeps the
-	* editor from misrepresenting geometry it cannot read faithfully.
-	*/
-	optional_user_unit_coord(id, name) {
-		const raw = this.get_attr(id, name);
-		if (raw === null) return 0;
-		return parse_user_unit(raw);
-	}
-	is_vector_edit_target(id) {
-		const n = this.nodes.get(id);
-		if (!n || n.kind !== "element") return null;
-		if (RETYPABLE_GEOMETRY_ATTRS[n.local] && n.attrs.some((a) => a.prefix === null && a.ns === null && a.local === "d")) return null;
-		switch (n.local) {
-			case "path": {
-				const d = this.get_attr(id, "d");
-				if (d === null || d.trim().length === 0) return null;
-				return {
-					kind: "path",
-					d
-				};
-			}
-			case "line": {
-				const x1 = this.optional_user_unit_coord(id, "x1");
-				const y1 = this.optional_user_unit_coord(id, "y1");
-				const x2 = this.optional_user_unit_coord(id, "x2");
-				const y2 = this.optional_user_unit_coord(id, "y2");
-				if (x1 === null || y1 === null || x2 === null || y2 === null) return null;
-				if (x1 === x2 && y1 === y2) return null;
-				return {
-					kind: "line",
-					x1,
-					y1,
-					x2,
-					y2
-				};
-			}
-			case "polyline":
-			case "polygon": {
-				const raw = this.get_attr(id, "points") ?? "";
-				const parsed = svg_parse.parse_points(raw);
-				if (parsed.length < 2) return null;
-				const points = parsed.map((p) => [p.x, p.y]);
-				return n.local === "polyline" ? {
-					kind: "polyline",
-					points
-				} : {
-					kind: "polygon",
-					points
-				};
-			}
-			case "rect": {
-				const x = this.optional_user_unit_coord(id, "x");
-				const y = this.optional_user_unit_coord(id, "y");
-				if (x === null || y === null) return null;
-				const width = parse_user_unit(this.get_attr(id, "width"));
-				const height = parse_user_unit(this.get_attr(id, "height"));
-				if (width === null || height === null) return null;
-				if (width <= 0 || height <= 0) return null;
-				const rx_attr = this.get_attr(id, "rx");
-				const ry_attr = this.get_attr(id, "ry");
-				const rx_parsed = rx_attr === null ? null : parse_user_unit(rx_attr);
-				const ry_parsed = ry_attr === null ? null : parse_user_unit(ry_attr);
-				if (rx_attr !== null && rx_parsed === null) return null;
-				if (ry_attr !== null && ry_parsed === null) return null;
-				let rx = rx_parsed ?? ry_parsed ?? 0;
-				let ry = ry_parsed ?? rx_parsed ?? 0;
-				rx = Math.max(0, Math.min(rx, width / 2));
-				ry = Math.max(0, Math.min(ry, height / 2));
-				return {
-					kind: "rect",
-					x,
-					y,
-					width,
-					height,
-					rx,
-					ry
-				};
-			}
-			case "circle": {
-				const cx = this.optional_user_unit_coord(id, "cx");
-				const cy = this.optional_user_unit_coord(id, "cy");
-				if (cx === null || cy === null) return null;
-				const r = parse_user_unit(this.get_attr(id, "r"));
-				if (r === null || r <= 0) return null;
-				return {
-					kind: "circle",
-					cx,
-					cy,
-					r
-				};
-			}
-			case "ellipse": {
-				const cx = this.optional_user_unit_coord(id, "cx");
-				const cy = this.optional_user_unit_coord(id, "cy");
-				if (cx === null || cy === null) return null;
-				const rx = parse_user_unit(this.get_attr(id, "rx"));
-				const ry = parse_user_unit(this.get_attr(id, "ry"));
-				if (rx === null || ry === null) return null;
-				if (rx <= 0 || ry <= 0) return null;
-				return {
-					kind: "ellipse",
-					cx,
-					cy,
-					rx,
-					ry
-				};
-			}
-			default: return null;
-		}
-	}
-	/**
-	* Re-type a native vector element (`<line>` / `<polyline>` / `<polygon>` /
-	* `<rect>` / `<circle>` / `<ellipse>`) into a `<path>` in place, consuming
-	* its native geometry attributes and setting `d`. A structural mutation:
-	* this layer executes the re-type; it does not decide when one is
-	* warranted.
-	*
-	* Idempotent: returns `null` if `id` is not currently one of those tags
-	* (so it is safe to call repeatedly — once re-typed, e.g. already a
-	* `<path>`, further calls are no-ops). Otherwise mutates the node and
-	* returns an opaque {@link RetypeRecord} reversal token.
-	*
-	* Identity, children, `self_closing`, non-geometry attributes, and all
-	* source trivia are preserved unchanged — only the tag and the geometry
-	* attributes move. Pass the token to {@link revert_retype} to restore
-	* the original primitive byte-for-byte.
-	*
-	* (see test/svg-editor-vector-promote-to-path.md)
-	*/
-	retype_to_path(id, d) {
-		const n = this.nodes.get(id);
-		if (!n || n.kind !== "element") return null;
-		const geom = RETYPABLE_GEOMETRY_ATTRS[n.local];
-		if (!geom) return null;
-		const prev_local = n.local;
-		const prev_raw_tag = n.raw_tag;
-		const removed = [];
-		for (let i = n.attrs.length - 1; i >= 0; i--) {
-			const a = n.attrs[i];
-			if (a.prefix === null && a.ns === null && geom.has(a.local)) {
-				removed.push({
-					index: i,
-					token: a
-				});
-				n.attrs.splice(i, 1);
-			}
-		}
-		removed.reverse();
-		n.local = "path";
-		n.raw_tag = n.prefix ? `${n.prefix}:path` : "path";
-		n.attrs.push({
-			raw_name: "d",
-			prefix: null,
-			local: "d",
-			ns: null,
-			value: d,
-			pre: " ",
-			eq_trivia: "",
-			quote: "\""
-		});
-		let added_fill_none = false;
-		if (prev_local === "line" && this.get_attr(id, "fill") === null && this.get_style(id, "fill") === null) {
-			n.attrs.push({
-				raw_name: "fill",
-				prefix: null,
-				local: "fill",
-				ns: null,
-				value: "none",
-				pre: " ",
-				eq_trivia: "",
-				quote: "\""
-			});
-			added_fill_none = true;
-		}
-		this._structure_version++;
-		this._geometry_version++;
-		this.emit();
-		return {
-			prev_local,
-			prev_raw_tag,
-			removed,
-			added_fill_none
-		};
-	}
-	/**
-	* Reverse a {@link retype_to_path}: restore the original tag, remove the
-	* `d` attribute the promotion added, and splice the captured geometry
-	* attribute tokens back at their original positions (preserving their
-	* trivia, so a later `serialize()` is byte-equal to the pre-promotion
-	* source).
-	*/
-	revert_retype(id, token) {
-		const n = this.nodes.get(id);
-		if (!n || n.kind !== "element") return;
-		for (let i = n.attrs.length - 1; i >= 0; i--) {
-			const a = n.attrs[i];
-			if (a.prefix === null && a.ns === null && a.local === "d") {
-				n.attrs.splice(i, 1);
-				break;
-			}
-		}
-		if (token.added_fill_none) for (let i = n.attrs.length - 1; i >= 0; i--) {
-			const a = n.attrs[i];
-			if (a.prefix === null && a.ns === null && a.local === "fill") {
-				n.attrs.splice(i, 1);
-				break;
-			}
-		}
-		n.local = token.prev_local;
-		n.raw_tag = token.prev_raw_tag;
-		for (const { index, token: t } of token.removed) n.attrs.splice(index, 0, t);
-		this._structure_version++;
-		this._geometry_version++;
-		this.emit();
-	}
-	/**
-	* True iff this `<text>` / `<tspan>` carries a non-empty `rotate=""`
-	* per-glyph attribute (which conflicts with element-level rotation).
-	*/
-	has_glyph_rotate(id) {
-		const tag = this.tag_of(id);
-		if (tag !== "text" && tag !== "tspan") return false;
-		const value = this.get_attr(id, "rotate");
-		if (value === null) return false;
-		return value.trim() !== "";
-	}
-	/**
-	* True iff this element's inline `style=""` declares a `transform:`
-	* CSS property (which would shadow the editor's `transform=` writes).
-	*/
-	has_inline_css_transform(id) {
-		const style = this.get_attr(id, "style");
-		if (!style) return false;
-		return CSS_TRANSFORM_PROPERTY.test(style);
-	}
-	/**
-	* True iff this element has a direct `<animateTransform>` child
-	* (which produces a time-varying transform invisible to attribute writes).
-	* Only direct children are checked — nested cases attach to the nearer ancestor.
-	*/
-	has_animate_transform_child(id) {
-		for (const c of this.children_of(id)) {
-			const n = this.nodes.get(c);
-			if (n?.kind === "element" && n.local === "animateTransform") return true;
-		}
-		return false;
-	}
-	text_of(id) {
-		const n = this.nodes.get(id);
-		if (!n || n.kind !== "element") return "";
-		let out = "";
-		for (const c of n.children) {
-			const cn = this.nodes.get(c);
-			if (cn?.kind === "text") out += cn.value;
-		}
-		return out;
-	}
-	/** Replace all direct text children with a single text node carrying `value`. */
-	set_text(id, value) {
-		const n = this.nodes.get(id);
-		if (!n || n.kind !== "element") return;
-		n.children = n.children.filter((c) => this.nodes.get(c)?.kind !== "text");
-		if (value !== "") {
-			const text_id = `t${Math.random().toString(36).slice(2, 10)}`;
-			const text_node = {
-				kind: "text",
-				id: text_id,
-				parent: id,
-				value
-			};
-			this.nodes.set(text_id, text_node);
-			n.children.push(text_id);
-		}
-		this._structure_version++;
-		this._geometry_version++;
-		this.emit();
-	}
-	insert(id, parent, before) {
-		const node = this.nodes.get(id);
-		const parent_node = this.nodes.get(parent);
-		if (!node || !parent_node || parent_node.kind !== "element") return;
-		if (node.parent !== null) {
-			const old_parent = this.nodes.get(node.parent);
-			if (old_parent && old_parent.kind === "element") {
-				const i = old_parent.children.indexOf(id);
-				if (i >= 0) old_parent.children.splice(i, 1);
-			}
-		}
-		const ix = before === null ? -1 : parent_node.children.indexOf(before);
-		if (ix < 0) parent_node.children.push(id);
-		else parent_node.children.splice(ix, 0, id);
-		node.parent = parent;
-		this._structure_version++;
-		this._geometry_version++;
-		this.emit();
-	}
-	remove(id) {
-		const n = this.nodes.get(id);
-		if (!n || n.parent === null) return;
-		const parent = this.nodes.get(n.parent);
-		if (!parent || parent.kind !== "element") return;
-		const i = parent.children.indexOf(id);
-		if (i >= 0) parent.children.splice(i, 1);
-		n.parent = null;
-		this._structure_version++;
-		this._geometry_version++;
-		this.emit();
-	}
-	/** Create a new element node and register it (not yet inserted). */
-	create_element(local, opts) {
-		const id = `e${Math.random().toString(36).slice(2, 10)}`;
-		const prefix = opts?.prefix ?? null;
-		const ns = opts?.ns ?? null;
-		const node = {
-			kind: "element",
-			id,
-			parent: null,
-			raw_tag: prefix ? `${prefix}:${local}` : local,
-			prefix,
-			local,
-			ns,
-			attrs: [],
-			children: [],
-			self_closing: false,
-			open_tag_trailing: "",
-			close_tag_leading: "",
-			close_tag_trailing: ""
-		};
-		this.nodes.set(id, node);
-		return id;
-	}
-	serialize() {
-		let out = "";
-		for (const p of this.prolog) out += this.emit_node(p);
-		out += this.emit_node(this.nodes.get(this.root));
-		for (const e of this.epilog) out += this.emit_node(e);
-		return out;
-	}
-	/**
-	* Serialize a single element's subtree as an SVG **fragment**, using the
-	* same trivia-preserving rules as {@link serialize} (attribute order,
-	* quote style, whitespace, comments — emitted exactly as authored).
-	*
-	* This is NOT {@link serialize} scoped to a node — it is a deliberately
-	* weaker output (sdk-design D3, asymmetric outputs stay separate):
-	*
-	*   - `serialize()` emits the whole document and carries the P1
-	*     whole-document round-trip guarantee.
-	*   - `serialize_node()` emits a fragment and does NOT. Namespace
-	*     declarations that live on an ancestor (`xmlns:xlink` and friends,
-	*     normally on the root `<svg>`) are NOT inlined — a node using
-	*     `xlink:href` serializes without `xmlns:xlink`. The fragment is the
-	*     element's markup as authored, not a standalone parseable document.
-	*
-	* Throws on an unknown id, a non-element node, or a node detached from
-	* the live tree: the contract is "the markup for a selected element,"
-	* selections are always live elements, and a string return of `""` for a
-	* bad id would hide consumer bugs. The detached case matters because
-	* `remove()` keeps the node in the id map for undo — a stale id from a
-	* removed node would otherwise serialize content no longer in the
-	* document, silently feeding a consumer deleted markup.
-	*/
-	serialize_node(id) {
-		const n = this.nodes.get(id);
-		if (!n) throw new Error(`serialize_node: unknown node id ${JSON.stringify(id)}`);
-		if (n.kind !== "element") throw new Error(`serialize_node: node ${JSON.stringify(id)} is a ${n.kind} node, not an element`);
-		if (!this.contains(this.root, id)) throw new Error(`serialize_node: node ${JSON.stringify(id)} is detached from the current document`);
-		return this.emit_node(n);
-	}
-	emit_node(n) {
-		switch (n.kind) {
-			case "text": return encode_text(n.value);
-			case "comment": return `<!--${n.value}-->`;
-			case "cdata": return `<![CDATA[${n.value}]]>`;
-			case "pi": {
-				const pi = n;
-				return `<?${pi.target}${pi.value ? " " + pi.value : ""}?>`;
-			}
-			case "doctype": return `<!DOCTYPE${n.value}>`;
-			case "element": {
-				const e = n;
-				let s = `<${e.raw_tag}`;
-				for (const a of e.attrs) s += this.emit_attr(a);
-				if (e.children.length === 0 && e.self_closing) {
-					s += `${e.open_tag_trailing}/>`;
-					return s;
-				}
-				s += `${e.open_tag_trailing}>`;
-				for (const cid of e.children) {
-					const cn = this.nodes.get(cid);
-					if (cn) s += this.emit_node(cn);
-				}
-				s += `</${e.close_tag_leading}${e.raw_tag}${e.close_tag_trailing}>`;
-				return s;
-			}
-		}
-	}
-	emit_attr(a) {
-		return `${a.pre}${a.raw_name}${a.eq_trivia}=${a.quote}${encode_attr_value(a.value, a.quote)}${a.quote}`;
-	}
-};
-function parse_inline_style(s) {
-	const out = [];
-	const decls = s.split(";");
-	for (const decl of decls) {
-		const colon = decl.indexOf(":");
-		if (colon === -1) continue;
-		const property = decl.slice(0, colon).trim();
-		const value = decl.slice(colon + 1).trim();
-		if (property) out.push({
-			property,
-			value
-		});
-	}
-	return out;
-}
-//#endregion
 //#region src/core/align.ts
 /**
 * Compute per-member translation deltas to align `members` against `target`.
@@ -1844,12 +1106,22 @@ function _create_svg_editor_internal(opts) {
 	const notify_translate_commit = () => {
 		for (const cb of translate_commit_listeners) cb();
 	};
-	doc.on_change(() => {
-		doc_version++;
+	/**
+	* Fan out the geometry channel iff the doc's `geometry_version` has
+	* moved since we last fired. Shared by the `doc.on_change` handler
+	* (mutation-driven bumps) and the surface-driven `bump_geometry` seam
+	* (font-load reflow). Idempotent against a stale version — never
+	* double-fires for the same value.
+	*/
+	function fire_geometry_listeners_if_advanced() {
 		if (doc.geometry_version !== last_emitted_geometry_version) {
 			last_emitted_geometry_version = doc.geometry_version;
 			for (const cb of geometry_listeners) cb();
 		}
+	}
+	doc.on_change(() => {
+		doc_version++;
+		fire_geometry_listeners_if_advanced();
 	});
 	function subscribe(fn) {
 		listeners.add(fn);
@@ -2149,66 +1421,79 @@ function _create_svg_editor_internal(opts) {
 		if (do_translate_oneshot(delta, translate_pipeline.stages.NUDGE, "nudge")) notify_translate_commit();
 	}
 	/**
-	* One-shot multi-member resize to an explicit target rect. Mirrors a
-	* drag-resize gesture in mechanics — capture per-member baselines,
-	* scale around the union's NW corner, translate the result so the
-	* union NW lands at the requested position — but as a single
-	* atomic step rather than a preview session.
-	*
-	* The function does its own geometry lookup via the
-	* `geometry_provider` registered by the DOM surface. When no surface
-	* is attached, the call is a no-op (returns `false`). Members whose
-	* tag is not resizable are silently filtered.
+	* Gate + capture for a resize gesture. Returns the resizable members (with
+	* captured baseline / pre-transform / bbox), or `null` if the gesture can't
+	* run: no geometry provider, empty selection, or — in `all_or_nothing` mode
+	* — any member fails the gate.
 	*
-	* Revert restores the captured `transform` attribute and all
-	* geometry attrs the apply step wrote — so a `<rect>` with an
-	* existing `transform` round-trips cleanly. See `apply_translate`'s
-	* `viaTransform` arm for why this matters.
+	* `mode`:
+	*  - `"skip"`           — drop members failing the `is_resizable_node` gate
+	*    (tag + transform class) or lacking a bbox; resize the rest. Used by the
+	*    inspector `resize_to` (set-bbox) path.
+	*  - `"all_or_nothing"` — refuse the WHOLE gesture (return `null`) if ANY
+	*    member fails. Used by keyboard `resize_by` (nudge), matching the resize
+	*    HUD, whose handle-drag is rejected when any member is unsafe.
 	*/
-	function resize_to(target, opts) {
-		const ids = opts?.ids ?? selection;
-		if (ids.length === 0) return false;
-		if (!geometry_provider) return false;
+	function collect_resize_members(ids, mode) {
+		if (ids.length === 0) return null;
+		if (!geometry_provider) return null;
 		const members = [];
 		for (const id of ids) {
-			if (!resize_pipeline.intent.is_resizable(doc.tag_of(id))) continue;
+			if (!resize_pipeline.intent.is_resizable_node(doc, id)) {
+				if (mode === "all_or_nothing") return null;
+				continue;
+			}
 			const bbox = geometry_provider.bounds_of(id);
-			if (!bbox) continue;
+			if (!bbox) {
+				if (mode === "all_or_nothing") return null;
+				continue;
+			}
 			members.push({
 				id,
 				rz: resize_pipeline.intent.capture_baseline(doc, id, bbox),
-				tx_pre: translate_pipeline.intent.capture_baseline(doc, id),
 				transform_pre: doc.get_attr(id, "transform"),
 				bbox
 			});
 		}
-		if (members.length === 0) return false;
-		const union = cmath.rect.union(members.map((m) => m.bbox));
-		const sx = union.width === 0 ? 1 : target.width / union.width;
-		const sy = union.height === 0 ? 1 : target.height / union.height;
-		const origin = {
-			x: union.x,
-			y: union.y
-		};
-		const dx = target.x - union.x;
-		const dy = target.y - union.y;
+		return members.length === 0 ? null : members;
+	}
+	/**
+	* Apply a resize to each member, optionally followed by a uniform group
+	* translate, as ONE atomic history step. `op` resolves each member's scale
+	* factors + scale origin; `group_translate` is the post-scale envelope shift
+	* (group resize only — `null` for per-element). Callers guarantee `members`
+	* is non-empty. Returns `true` when a history step was pushed; `false` when
+	* the gesture is geometrically identity (no member scales and no group
+	* translate) so undo isn't polluted with an empty step. NOTE: a per-tag
+	* constraint that collapses a non-1 factor to identity *inside* the handler
+	* (e.g. `<circle>` uniform `min` on a single-axis nudge) is not detected
+	* here — the op-level factor is still ≠ 1, so that case still pushes a step.
+	*/
+	function commit_resize(members, op, group_translate, label) {
+		const ops = members.map((m) => ({
+			m,
+			...op(m)
+		}));
+		const scales = ops.some(({ sx, sy }) => sx !== 1 || sy !== 1);
+		const translates = !!group_translate && (group_translate.dx !== 0 || group_translate.dy !== 0);
+		if (!scales && !translates) return false;
 		const apply = () => {
-			for (const m of members) resize_pipeline.intent.apply(doc, m.id, m.rz, sx, sy, origin);
-			if (dx !== 0 || dy !== 0) for (const m of members) {
+			for (const { m, sx, sy, origin } of ops) resize_pipeline.intent.apply(doc, m.id, m.rz, sx, sy, origin);
+			if (group_translate && (group_translate.dx !== 0 || group_translate.dy !== 0)) for (const m of members) {
 				const tx_after = translate_pipeline.intent.capture_baseline(doc, m.id);
-				translate_pipeline.intent.apply(doc, m.id, tx_after, dx, dy);
+				translate_pipeline.intent.apply(doc, m.id, tx_after, group_translate.dx, group_translate.dy);
 			}
 			emit();
 		};
 		const revert = () => {
-			for (const m of members) {
+			for (const { m, origin } of ops) {
 				resize_pipeline.intent.apply(doc, m.id, m.rz, 1, 1, origin);
 				doc.set_attr(m.id, "transform", m.transform_pre);
 			}
 			emit();
 		};
 		apply();
-		history.atomic("resize-to", (tx) => {
+		history.atomic(label, (tx) => {
 			tx.push({
 				providerId: PROVIDER_ID,
 				apply,
@@ -2217,6 +1502,73 @@ function _create_svg_editor_internal(opts) {
 		});
 		return true;
 	}
+	/**
+	* One-shot multi-member resize to an explicit target rect. Mirrors a
+	* drag-resize gesture in mechanics — capture per-member baselines,
+	* scale around the union's NW corner, translate the result so the
+	* union NW lands at the requested position — but as a single
+	* atomic step rather than a preview session. This is the GROUP path:
+	* the whole selection is treated as one envelope.
+	*
+	* The function does its own geometry lookup via the
+	* `geometry_provider` registered by the DOM surface. When no surface
+	* is attached, the call is a no-op (returns `false`). Members that fail
+	* the `is_resizable_node` gate — an unresizable tag (e.g. `<g>`) OR a
+	* non-trivially-transformed element — are silently skipped (see
+	* `collect_resize_members`).
+	*
+	* Revert restores the captured `transform` attribute and all
+	* geometry attrs the apply step wrote — so a `<rect>` with an
+	* existing `transform` round-trips cleanly. See `apply_translate`'s
+	* `viaTransform` arm for why this matters.
+	*/
+	function resize_to(target, opts) {
+		const members = collect_resize_members(opts?.ids ?? selection, "skip");
+		if (!members) return false;
+		const union = cmath.rect.union(members.map((m) => m.bbox));
+		const sx = union.width === 0 ? 1 : target.width / union.width;
+		const sy = union.height === 0 ? 1 : target.height / union.height;
+		const origin = {
+			x: union.x,
+			y: union.y
+		};
+		return commit_resize(members, () => ({
+			sx,
+			sy,
+			origin
+		}), {
+			dx: target.x - union.x,
+			dy: target.y - union.y
+		}, opts?.label ?? "resize-to");
+	}
+	/**
+	* Resize by a `{dw, dh}` delta — the core verb behind keyboard nudge-resize
+	* (`Ctrl+Alt+Arrow`). This is the PER-ELEMENT path: each selected member
+	* grows/shrinks by the delta around ITS OWN NW corner, so members keep their
+	* positions relative to one another. This deliberately differs from
+	* {@link resize_to} (the group/envelope path): a HUD group-resize scales the
+	* whole selection around the shared union origin, translating off-origin
+	* members — correct for a drag handle, wrong for a keyboard nudge, whose UX
+	* is "apply the delta to each".
+	*
+	* ALL-OR-NOTHING gate (`collect_resize_members("all_or_nothing")`): refuses
+	* (returns `false`, no history step) on empty selection, no geometry
+	* provider, or any member failing the `is_resizable_node` gate — matching
+	* the resize HUD rather than `resize_to`'s per-member skip.
+	*/
+	function resize_by(delta, opts) {
+		const members = collect_resize_members(opts?.ids ?? selection, "all_or_nothing");
+		if (!members) return false;
+		const axis = (size, d) => size === 0 ? 1 : Math.max(0, size + d) / size;
+		return commit_resize(members, (m) => ({
+			sx: axis(m.bbox.width, delta.dw),
+			sy: axis(m.bbox.height, delta.dh),
+			origin: {
+				x: m.bbox.x,
+				y: m.bbox.y
+			}
+		}), null, "nudge-resize");
+	}
 	/** Shared helper: compute a default rotation pivot from the live
 	*  geometry_provider when the caller omitted one. Falls back to (0,0)
 	*  if no surface is attached. */
@@ -2298,6 +1650,70 @@ function _create_svg_editor_internal(opts) {
 		});
 		return true;
 	}
+	/**
+	* Relative affine compose about a pivot. See the `Commands.transform`
+	* doc for the full contract. This function owns ONLY the pivot/effective-
+	* matrix computation (which needs `geometry_provider`); the parse→fold→
+	* emit round-trip is delegated per-member to the pure
+	* `transform.apply_affine` helper.
+	*/
+	function apply_transform(matrix, opts) {
+		const ids = opts?.ids ?? selection;
+		if (ids.length === 0) return false;
+		if (!geometry_provider) return false;
+		for (const id of ids) if (rotate_pipeline.intent.is_transformable(doc, id).kind === "refuse") return false;
+		const pivot = opts?.pivot ?? default_rotate_pivot(ids);
+		const [a, b, c, d, e, f] = matrix;
+		const requested = [[
+			a,
+			c,
+			e
+		], [
+			b,
+			d,
+			f
+		]];
+		const t_pivot = [[
+			1,
+			0,
+			pivot.x
+		], [
+			0,
+			1,
+			pivot.y
+		]];
+		const t_neg_pivot = [[
+			1,
+			0,
+			-pivot.x
+		], [
+			0,
+			1,
+			-pivot.y
+		]];
+		const effective = cmath.transform.multiply(cmath.transform.multiply(t_pivot, requested), t_neg_pivot);
+		const members = ids.map((id) => ({
+			id,
+			transform_pre: doc.get_attr(id, "transform")
+		}));
+		const apply = () => {
+			for (const m of members) doc.set_attr(m.id, "transform", transform.apply_affine(m.transform_pre, effective));
+			emit();
+		};
+		const revert = () => {
+			for (const m of members) doc.set_attr(m.id, "transform", m.transform_pre);
+			emit();
+		};
+		apply();
+		history.atomic("transform", (tx) => {
+			tx.push({
+				providerId: PROVIDER_ID,
+				apply,
+				revert
+			});
+		});
+		return true;
+	}
 	function flatten_transform(opts) {
 		const ids = opts?.ids ?? selection;
 		if (ids.length === 0) return false;
@@ -2549,6 +1965,47 @@ function _create_svg_editor_internal(opts) {
 		});
 		return true;
 	}
+	function ungroup(opts) {
+		let target;
+		if (opts?.id !== void 0) target = opts.id;
+		else {
+			if (selection.length !== 1) return false;
+			target = selection[0];
+		}
+		const plan = group.plan_ungroup(doc, target);
+		if (!plan) return false;
+		const group_id = plan.group_id;
+		const group_next_sibling = doc.next_element_sibling_of(group_id);
+		const original_child_transforms = /* @__PURE__ */ new Map();
+		for (const child of plan.children) original_child_transforms.set(child, doc.get_attr(child, "transform"));
+		const group_ops = plan.group_transform === null ? [] : transform.parse(plan.group_transform) ?? [];
+		const original_selection = selection;
+		const apply = () => {
+			if (group_ops.length > 0) for (const child of plan.children) {
+				const child_ops = transform.parse(doc.get_attr(child, "transform")) ?? [];
+				const next = transform.emit([...group_ops, ...child_ops]);
+				doc.set_attr(child, "transform", next === "" ? null : next);
+			}
+			for (const child of plan.children) doc.insert(child, plan.parent, group_id);
+			doc.remove(group_id);
+			set_selection(plan.children);
+		};
+		const revert = () => {
+			doc.insert(group_id, plan.parent, group_next_sibling);
+			for (const child of plan.children) doc.insert(child, group_id, null);
+			if (group_ops.length > 0) for (const child of plan.children) doc.set_attr(child, "transform", original_child_transforms.get(child) ?? null);
+			set_selection(original_selection);
+		};
+		apply();
+		history.atomic("ungroup", (tx) => {
+			tx.push({
+				providerId: PROVIDER_ID,
+				apply,
+				revert
+			});
+		});
+		return true;
+	}
 	/**
 	* Atomic one-shot insertion. Used by paste, programmatic RPC, and the
 	* click-no-drag commit path inside the insertion gesture driver. One
@@ -2558,11 +2015,20 @@ function _create_svg_editor_internal(opts) {
 	* win. `opts.parent` defaults to root; `opts.index` (insert-before
 	* sibling index) defaults to append; `opts.select` defaults to `true`.
 	*/
+	/**
+	* Resolve an optional `index` (position in `parent`'s element-children
+	* list to insert AT — anything at or after it shifts; out-of-range or
+	* `undefined` appends) to an insert-before anchor. Shared by `insert`,
+	* `insert_fragment`, and `insert_preview`.
+	*/
+	function resolve_insert_before(parent, index) {
+		if (index === void 0) return null;
+		return doc.element_children_of(parent)[index] ?? null;
+	}
 	function insert(tag, attrs, opts) {
 		const parent = opts?.parent ?? doc.root;
 		const select_after = opts?.select !== false;
-		let insert_before = null;
-		if (opts?.index !== void 0) insert_before = doc.element_children_of(parent)[opts.index] ?? null;
+		const insert_before = resolve_insert_before(parent, opts?.index);
 		const id = doc.create_element(tag);
 		const merged_attrs = {
 			...default_paint_attrs_for(tag),
@@ -2590,6 +2056,56 @@ function _create_svg_editor_internal(opts) {
 		return id;
 	}
 	/**
+	* Atomic fragment insertion — contract in {@link Commands.insert_fragment}.
+	* Parses + adopts via `doc.create_fragment` (subtrees registered but
+	* detached, like `create_element` — history.redo finds them via
+	* closure), computes the namespace hoist plan, then brackets inserts +
+	* hoisted declarations + selection in ONE history step.
+	*/
+	function insert_fragment(svg, opts) {
+		const parent = opts?.parent ?? doc.root;
+		if (!doc.is_element(parent) || !doc.contains(doc.root, parent)) throw new Error(`insert_fragment: parent ${JSON.stringify(parent)} is not an element in the current document`);
+		const select_after = opts?.select !== false;
+		const { roots, xmlns } = doc.create_fragment(svg);
+		if (roots.length === 0) return [];
+		const known_uri = new Map([["xlink", XLINK_NS]]);
+		for (const d of xmlns) known_uri.set(d.prefix, d.uri);
+		const hoist = [];
+		const considered = /* @__PURE__ */ new Set();
+		for (const id of roots) for (const prefix of doc.undeclared_ns_prefixes(id)) {
+			if (considered.has(prefix)) continue;
+			considered.add(prefix);
+			if (doc.get_attr(doc.root, prefix, XMLNS_NS) !== null) continue;
+			const uri = known_uri.get(prefix);
+			if (uri === void 0) continue;
+			hoist.push({
+				prefix,
+				uri
+			});
+		}
+		const insert_before = resolve_insert_before(parent, opts?.index);
+		const previous_selection = selection;
+		const apply = () => {
+			for (const { prefix, uri } of hoist) doc.declare_xmlns(prefix, uri);
+			for (const id of roots) doc.insert(id, parent, insert_before);
+			if (select_after) set_selection(roots);
+		};
+		const revert = () => {
+			for (let i = roots.length - 1; i >= 0; i--) doc.remove(roots[i]);
+			for (const { prefix } of hoist) doc.set_attr(doc.root, prefix, null, XMLNS_NS);
+			if (select_after) set_selection(previous_selection);
+		};
+		apply();
+		history.atomic("insert fragment", (tx) => {
+			tx.push({
+				providerId: PROVIDER_ID,
+				apply,
+				revert
+			});
+		});
+		return roots;
+	}
+	/**
 	* Preview-bracketed insertion. Used by the pointer-driven drag gesture
 	* in the DOM surface. Per-frame attr writes call `update(attrs)`; one
 	* undo step on `commit()`; clean rollback on `discard()`.
@@ -2600,8 +2116,7 @@ function _create_svg_editor_internal(opts) {
 	*/
 	function insert_preview(tag, initial, opts) {
 		const parent = opts?.parent ?? doc.root;
-		let insert_before = null;
-		if (opts?.index !== void 0) insert_before = doc.element_children_of(parent)[opts.index] ?? null;
+		const insert_before = resolve_insert_before(parent, opts?.index);
 		const id = doc.create_element(tag);
 		const previous_selection = selection;
 		const live_attrs = {
@@ -2759,6 +2274,10 @@ function _create_svg_editor_internal(opts) {
 		current_surface_hover = id;
 		notify_surface_hover();
 	}
+	const pick_listeners = /* @__PURE__ */ new Set();
+	function notify_pick(e) {
+		for (const cb of pick_listeners) cb(e);
+	}
 	function enter_content_edit(target) {
 		const id = target ?? (selection.length === 1 ? selection[0] : null);
 		if (!id) return false;
@@ -2804,14 +2323,18 @@ function _create_svg_editor_internal(opts) {
 		translate,
 		nudge,
 		resize_to,
+		resize_by,
 		rotate,
 		rotate_to,
+		transform: apply_transform,
 		flatten_transform,
 		align,
 		reorder,
 		remove,
 		group: group$1,
+		ungroup,
 		insert,
+		insert_fragment,
 		insert_preview,
 		set_text,
 		load_svg,
@@ -2857,6 +2380,10 @@ function _create_svg_editor_internal(opts) {
 	function dispose() {
 		detach();
 		listeners.clear();
+		surface_hover_listeners.clear();
+		geometry_listeners.clear();
+		translate_commit_listeners.clear();
+		pick_listeners.clear();
 	}
 	function set_style(partial) {
 		style = {
@@ -2948,6 +2475,22 @@ function _create_svg_editor_internal(opts) {
 			};
 		},
 		/**
+		* Subscribe to pick (tap) outcomes — a discrete click on the canvas,
+		* reporting the document-space point and the node under it (`null` for
+		* empty canvas), plus the button and modifier snapshot. Fires once per
+		* tap, after the editor's own selection handling. Observe-only: a pick
+		* cannot alter selection, and the channel does NOT bump `state.version`.
+		* See {@link PickEvent}.
+		*
+		* @unstable
+		*/
+		subscribe_pick(cb) {
+			pick_listeners.add(cb);
+			return () => {
+				pick_listeners.delete(cb);
+			};
+		},
+		/**
 		* Subscribe to bounds-affecting changes. Fires when any document
 		* mutation advances `state.geometry_version` — drag, resize, text
 		* edit, structural insert/remove. Skips presentation-only writes
@@ -3018,11 +2561,18 @@ function _create_svg_editor_internal(opts) {
 			push_surface_hover(id) {
 				_set_current_surface_hover(id);
 			},
+			push_pick(e) {
+				notify_pick(e);
+			},
 			set_computed_resolver(fn) {
 				computed_resolver = fn;
 			},
 			set_geometry(p) {
 				geometry_provider = p;
+			},
+			bump_geometry() {
+				doc.bump_geometry();
+				fire_geometry_listeners_if_advanced();
 			}
 		},
 		keymap