@grida/svg-editor 1.0.0-alpha.22 → 1.0.0-alpha.24

package/README.md

@@ -636,6 +636,12 @@ editor.commands.{
     opts?: { reuse_existing?: boolean },
   ): { gradient_id: string };
 
+  // opacity — typed, clamped sugar for set_property("opacity", …); one
+  // history step across the selection. `value` is clamped to [0, 1]. This
+  // is the command behind the digit → opacity shortcut; the digit
+  // keybindings are NOT shipped in the default keymap (host-wired).
+  set_opacity(value: number): void;
+
   // transforms (atomic — the bundled HUD drives drag-resize-rotate internally)
   translate(delta: { dx: number; dy: number }): void;
   nudge(direction: "left" | "right" | "up" | "down", step?: number): void;

package/dist/{dom-H4PvmPe3.js → dom-8wNtJcu9.js}

@@ -1,4 +1,4 @@
-const require_model = require("./model-HEKGO-56.js");
+const require_model = require("./model-HVpmlF_I.js");
 let _grida_cmath = require("@grida/cmath");
 _grida_cmath = require_model.__toESM(_grida_cmath);
 let _grida_svg_parse = require("@grida/svg/parse");
@@ -1224,44 +1224,32 @@ function create_attention_tracker(container) {
 }
 //#endregion
 //#region src/text-surface.ts
-const SVG_NS = "http://www.w3.org/2000/svg";
 const XML_NS = "http://www.w3.org/XML/1998/namespace";
 var SvgTextSurface = class {
-	constructor(textEl) {
+	/**
+	* @param textEl the live text element to drive.
+	* @param sink   receives the caret + selection geometry (local space) on
+	*   every change; the host projects + forwards it to the HUD. Called with
+	*   `null` on dispose so the host clears the chrome.
+	*/
+	constructor(textEl, sink) {
 		this.prevXmlSpace = void 0;
 		this.prevPointerEvents = void 0;
+		this.caret = null;
+		this.selection = null;
 		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;
-		let mountAnchor = textEl;
-		while (mountAnchor.parentElement instanceof SVGElement && (mountAnchor.localName === "tspan" || mountAnchor.localName === "textPath")) mountAnchor = mountAnchor.parentElement;
-		const parent = mountAnchor.parentNode;
-		if (!parent) throw new Error("text element has no parent");
-		const computedWhitespace = ownerDoc.defaultView?.getComputedStyle(textEl).whiteSpace;
+		this.sink = sink;
+		const computedWhitespace = textEl.ownerDocument.defaultView?.getComputedStyle(textEl).whiteSpace;
 		if (!(computedWhitespace === "pre" || computedWhitespace === "pre-wrap" || computedWhitespace === "break-spaces")) {
 			this.prevXmlSpace = textEl.getAttributeNS(XML_NS, "space");
 			textEl.setAttributeNS(XML_NS, "xml:space", "preserve");
 		}
 		this.prevPointerEvents = textEl.getAttribute("pointer-events");
 		textEl.setAttribute("pointer-events", "bounding-box");
-		const selection = ownerDoc.createElementNS(SVG_NS, "rect");
-		selection.setAttribute("fill", "#2563eb");
-		selection.setAttribute("fill-opacity", "0.25");
-		selection.setAttribute("pointer-events", "none");
-		selection.setAttribute("data-svg-text-edit-selection", "");
-		selection.style.display = "none";
-		parent.insertBefore(selection, mountAnchor);
-		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, mountAnchor.nextSibling);
-		this.caretRect = caret;
 	}
 	setText(text) {
 		if (this.textEl.textContent !== text) this.textEl.textContent = text;
@@ -1270,38 +1258,43 @@ var SvgTextSurface = class {
 		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";
+		this.caret = {
+			top: [x, m.top],
+			bottom: [x, m.top + m.height],
+			visible
+		};
+		this.emit();
 	}
 	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";
+			this.selection = null;
+			this.emit();
 			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";
+		this.selection = {
+			x: Math.min(x1, x2),
+			y: m.top,
+			width: Math.abs(x2 - x1),
+			height: m.height
+		};
+		this.emit();
+	}
+	emit() {
+		this.sink({
+			caret: this.caret,
+			selection: this.selection
+		});
 	}
 	dispose(keepEditMutations = false) {
-		this.caretRect.remove();
-		this.selectionRect.remove();
+		this.sink(null);
 		if (this.prevXmlSpace !== void 0 && !keepEditMutations) if (this.prevXmlSpace === null) this.textEl.removeAttributeNS(XML_NS, "space");
 		else this.textEl.setAttributeNS(XML_NS, "xml:space", this.prevXmlSpace);
 		if (this.prevPointerEvents !== void 0) if (this.prevPointerEvents === null) this.textEl.removeAttribute("pointer-events");
@@ -1925,6 +1918,7 @@ var DomSurface = class DomSurface {
 		this.text_edit = null;
 		this.text_edit_target = null;
 		this.text_edit_original = "";
+		this.text_edit_geom = null;
 		this.pending_text_insert = null;
 		this.vector_edit = null;
 		this.point_snap_guide = void 0;
@@ -2069,6 +2063,7 @@ var DomSurface = class DomSurface {
 			this.apply_camera_transform();
 			this.hud.setPixelGridTransform(this.camera.transform);
 			this.sync_surface_selection();
+			if (this.text_edit_geom) this.push_text_edit_chrome(this.text_edit_geom);
 			this.redraw();
 		}));
 		this.render();
@@ -4076,7 +4071,10 @@ var DomSurface = class DomSurface {
 		this.sync_surface_selection();
 		this.sync_cursor();
 		this.redraw();
-		const text_surface = new SvgTextSurface(this.element_index.get(id) ?? el);
+		const text_surface = new SvgTextSurface(this.element_index.get(id) ?? el, (geom) => {
+			this.push_text_edit_chrome(geom);
+			this.request_redraw();
+		});
 		const is_mac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
 		let settled = false;
 		this.text_edit = (0, _grida_text_editor_dom.createTextEditor)({
@@ -4124,11 +4122,45 @@ var DomSurface = class DomSurface {
 		this.render();
 		this.sync_surface_selection();
 		this.sync_cursor();
+		this.push_text_edit_chrome(null);
 		this.redraw();
 		this.text_edit = null;
 		this.text_edit_target = null;
 	}
 	/**
+	* Project the active session's text-edit geometry (LOCAL svg user-space) and
+	* push it to the HUD as text-edit chrome (caret + selection), or clear it on
+	* `null`. The local→container-px transform comes from the live text
+	* element's `getScreenCTM` (which folds in the camera's CSS transform on the
+	* SVG root) minus the container offset — the same projection convention
+	* `vector_of` / `container_box` use. The HUD keeps its own transform at
+	* identity, so this per-chrome transform is the whole projection. Does NOT
+	* redraw — callers own that.
+	*/
+	push_text_edit_chrome(geom) {
+		this.text_edit_geom = geom;
+		if (!geom) {
+			this.hud.setTextEditChrome(null);
+			return;
+		}
+		const ctm = (this.text_edit_target ? this.element_index.get(this.text_edit_target) : void 0)?.getScreenCTM?.() ?? null;
+		if (!ctm) {
+			this.hud.setTextEditChrome(null);
+			return;
+		}
+		const input = {
+			transform: ctm_to_container_transform(ctm, this.container_offset()),
+			caret: geom.caret ? {
+				top: geom.caret.top,
+				bottom: geom.caret.bottom
+			} : void 0,
+			caretVisible: geom.caret?.visible ?? false,
+			selectionRects: geom.selection ? [geom.selection] : void 0,
+			style: { caretColor: "#000000" }
+		};
+		this.hud.setTextEditChrome(input);
+	}
+	/**
 	* Realize the result of a text content-edit session and exit. `result`
 	* is the text that should remain — the typed text on commit, the original
 	* on cancel. Implements the empty-equals-delete rule (design:
@@ -4947,6 +4979,25 @@ function project_point_through_ctm(px, py, ctm, container_offset) {
 	return [sx + container_offset[0], sy + container_offset[1]];
 }
 /**
+* The matrix form of {@link project_point_through_ctm}: the full
+* `local → container-px` affine for a CTM + container offset, as a
+* `cmath.Transform`. Use when handing the transform to a downstream projector
+* (e.g. HUD chrome) instead of projecting a single point.
+*
+* Pure function, no DOM types.
+*/
+function ctm_to_container_transform(ctm, container_offset) {
+	return [[
+		ctm.a,
+		ctm.c,
+		ctm.e + container_offset[0]
+	], [
+		ctm.b,
+		ctm.d,
+		ctm.f + container_offset[1]
+	]];
+}
+/**
 * Inverse of the CTM's linear part applied to a delta vector. Drops
 * translation. Used to convert a HUD-reported container-space drag delta
 * back to the path's local coord space for `PathModel.translateVertices`.
@@ -5252,6 +5303,12 @@ Object.defineProperty(exports, "attach_dom_surface", {
 		return attach_dom_surface;
 	}
 });
+Object.defineProperty(exports, "ctm_to_container_transform", {
+	enumerable: true,
+	get: function() {
+		return ctm_to_container_transform;
+	}
+});
 Object.defineProperty(exports, "install_font_load_geometry_bump", {
 	enumerable: true,
 	get: function() {

package/dist/{dom-CQkWJNrK.d.ts → dom-CYzYf9lz.d.ts}

@@ -1,4 +1,4 @@
-import { c as SvgEditor, p as Gestures, s as SurfaceHandle, w as Camera } from "./editor-CxqRhhzP.js";
+import { c as SvgEditor, p as Gestures, s as SurfaceHandle, w as Camera } from "./editor-D4TvRpm6.js";
 import cmath from "@grida/cmath";
 //#region src/util/attention.d.ts
 /** The runtime handle returned by `create_attention_tracker`. */
@@ -196,6 +196,22 @@ declare function project_point_through_ctm(px: number, py: number, ctm: {
   e: number;
   f: number;
 }, container_offset: readonly [number, number]): [number, number];
+/**
+ * The matrix form of {@link project_point_through_ctm}: the full
+ * `local → container-px` affine for a CTM + container offset, as a
+ * `cmath.Transform`. Use when handing the transform to a downstream projector
+ * (e.g. HUD chrome) instead of projecting a single point.
+ *
+ * Pure function, no DOM types.
+ */
+declare function ctm_to_container_transform(ctm: {
+  a: number;
+  b: number;
+  c: number;
+  d: number;
+  e: number;
+  f: number;
+}, container_offset: readonly [number, number]): cmath.Transform;
 /**
  * Inverse of the CTM's linear part applied to a delta vector. Drops
  * translation. Used to convert a HUD-reported container-space drag delta
@@ -234,4 +250,4 @@ declare function inverse_project_rect(rect: {
   f: number;
 }, offset: readonly [number, number]): cmath.Rectangle | null;
 //#endregion
-export { install_font_load_geometry_bump as a, project_point_through_ctm as c, attach_dom_surface as i, DEFAULT_SNAP_OPTIONS as l, DomSurfaceHandle as n, inverse_project_rect as o, DomSurfaceOptions as r, project_delta_inverse_ctm as s, AttentionScope as t, SnapOptions as u };
+export { ctm_to_container_transform as a, project_delta_inverse_ctm as c, SnapOptions as d, attach_dom_surface as i, project_point_through_ctm as l, DomSurfaceHandle as n, install_font_load_geometry_bump as o, DomSurfaceOptions as r, inverse_project_rect as s, AttentionScope as t, DEFAULT_SNAP_OPTIONS as u };

package/dist/{dom-BIjCxCgx.mjs → dom-DE0Je0o1.mjs}

@@ -1,4 +1,4 @@
-import { S as is_text_input_focused, a as paint, c as hit_shape_svg, d as NudgeDwellWatcher, f as TranslateOrchestrator, h as transform, i as TOOL_CURSOR, l as RotateOrchestrator, m as group, n as insertions, o as ResizeOrchestrator, s as resize_pipeline, t as PathModel, w as default_nudge_handler, x as array_shallow_equal } from "./model-zMPCOVAr.mjs";
+import { S as is_text_input_focused, a as paint, c as hit_shape_svg, d as NudgeDwellWatcher, f as TranslateOrchestrator, h as transform, i as TOOL_CURSOR, l as RotateOrchestrator, m as group, n as insertions, o as ResizeOrchestrator, s as resize_pipeline, t as PathModel, w as default_nudge_handler, x as array_shallow_equal } from "./model-DcOLgMdU.mjs";
 import cmath from "@grida/cmath";
 import { svg_parse } from "@grida/svg/parse";
 import { SVGShapes } from "@grida/svg/pathdata";
@@ -1222,44 +1222,32 @@ function create_attention_tracker(container) {
 }
 //#endregion
 //#region src/text-surface.ts
-const SVG_NS = "http://www.w3.org/2000/svg";
 const XML_NS = "http://www.w3.org/XML/1998/namespace";
 var SvgTextSurface = class {
-	constructor(textEl) {
+	/**
+	* @param textEl the live text element to drive.
+	* @param sink   receives the caret + selection geometry (local space) on
+	*   every change; the host projects + forwards it to the HUD. Called with
+	*   `null` on dispose so the host clears the chrome.
+	*/
+	constructor(textEl, sink) {
 		this.prevXmlSpace = void 0;
 		this.prevPointerEvents = void 0;
+		this.caret = null;
+		this.selection = null;
 		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;
-		let mountAnchor = textEl;
-		while (mountAnchor.parentElement instanceof SVGElement && (mountAnchor.localName === "tspan" || mountAnchor.localName === "textPath")) mountAnchor = mountAnchor.parentElement;
-		const parent = mountAnchor.parentNode;
-		if (!parent) throw new Error("text element has no parent");
-		const computedWhitespace = ownerDoc.defaultView?.getComputedStyle(textEl).whiteSpace;
+		this.sink = sink;
+		const computedWhitespace = textEl.ownerDocument.defaultView?.getComputedStyle(textEl).whiteSpace;
 		if (!(computedWhitespace === "pre" || computedWhitespace === "pre-wrap" || computedWhitespace === "break-spaces")) {
 			this.prevXmlSpace = textEl.getAttributeNS(XML_NS, "space");
 			textEl.setAttributeNS(XML_NS, "xml:space", "preserve");
 		}
 		this.prevPointerEvents = textEl.getAttribute("pointer-events");
 		textEl.setAttribute("pointer-events", "bounding-box");
-		const selection = ownerDoc.createElementNS(SVG_NS, "rect");
-		selection.setAttribute("fill", "#2563eb");
-		selection.setAttribute("fill-opacity", "0.25");
-		selection.setAttribute("pointer-events", "none");
-		selection.setAttribute("data-svg-text-edit-selection", "");
-		selection.style.display = "none";
-		parent.insertBefore(selection, mountAnchor);
-		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, mountAnchor.nextSibling);
-		this.caretRect = caret;
 	}
 	setText(text) {
 		if (this.textEl.textContent !== text) this.textEl.textContent = text;
@@ -1268,38 +1256,43 @@ var SvgTextSurface = class {
 		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";
+		this.caret = {
+			top: [x, m.top],
+			bottom: [x, m.top + m.height],
+			visible
+		};
+		this.emit();
 	}
 	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";
+			this.selection = null;
+			this.emit();
 			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";
+		this.selection = {
+			x: Math.min(x1, x2),
+			y: m.top,
+			width: Math.abs(x2 - x1),
+			height: m.height
+		};
+		this.emit();
+	}
+	emit() {
+		this.sink({
+			caret: this.caret,
+			selection: this.selection
+		});
 	}
 	dispose(keepEditMutations = false) {
-		this.caretRect.remove();
-		this.selectionRect.remove();
+		this.sink(null);
 		if (this.prevXmlSpace !== void 0 && !keepEditMutations) if (this.prevXmlSpace === null) this.textEl.removeAttributeNS(XML_NS, "space");
 		else this.textEl.setAttributeNS(XML_NS, "xml:space", this.prevXmlSpace);
 		if (this.prevPointerEvents !== void 0) if (this.prevPointerEvents === null) this.textEl.removeAttribute("pointer-events");
@@ -1923,6 +1916,7 @@ var DomSurface = class DomSurface {
 		this.text_edit = null;
 		this.text_edit_target = null;
 		this.text_edit_original = "";
+		this.text_edit_geom = null;
 		this.pending_text_insert = null;
 		this.vector_edit = null;
 		this.point_snap_guide = void 0;
@@ -2067,6 +2061,7 @@ var DomSurface = class DomSurface {
 			this.apply_camera_transform();
 			this.hud.setPixelGridTransform(this.camera.transform);
 			this.sync_surface_selection();
+			if (this.text_edit_geom) this.push_text_edit_chrome(this.text_edit_geom);
 			this.redraw();
 		}));
 		this.render();
@@ -4074,7 +4069,10 @@ var DomSurface = class DomSurface {
 		this.sync_surface_selection();
 		this.sync_cursor();
 		this.redraw();
-		const text_surface = new SvgTextSurface(this.element_index.get(id) ?? el);
+		const text_surface = new SvgTextSurface(this.element_index.get(id) ?? el, (geom) => {
+			this.push_text_edit_chrome(geom);
+			this.request_redraw();
+		});
 		const is_mac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
 		let settled = false;
 		this.text_edit = createTextEditor({
@@ -4122,11 +4120,45 @@ var DomSurface = class DomSurface {
 		this.render();
 		this.sync_surface_selection();
 		this.sync_cursor();
+		this.push_text_edit_chrome(null);
 		this.redraw();
 		this.text_edit = null;
 		this.text_edit_target = null;
 	}
 	/**
+	* Project the active session's text-edit geometry (LOCAL svg user-space) and
+	* push it to the HUD as text-edit chrome (caret + selection), or clear it on
+	* `null`. The local→container-px transform comes from the live text
+	* element's `getScreenCTM` (which folds in the camera's CSS transform on the
+	* SVG root) minus the container offset — the same projection convention
+	* `vector_of` / `container_box` use. The HUD keeps its own transform at
+	* identity, so this per-chrome transform is the whole projection. Does NOT
+	* redraw — callers own that.
+	*/
+	push_text_edit_chrome(geom) {
+		this.text_edit_geom = geom;
+		if (!geom) {
+			this.hud.setTextEditChrome(null);
+			return;
+		}
+		const ctm = (this.text_edit_target ? this.element_index.get(this.text_edit_target) : void 0)?.getScreenCTM?.() ?? null;
+		if (!ctm) {
+			this.hud.setTextEditChrome(null);
+			return;
+		}
+		const input = {
+			transform: ctm_to_container_transform(ctm, this.container_offset()),
+			caret: geom.caret ? {
+				top: geom.caret.top,
+				bottom: geom.caret.bottom
+			} : void 0,
+			caretVisible: geom.caret?.visible ?? false,
+			selectionRects: geom.selection ? [geom.selection] : void 0,
+			style: { caretColor: "#000000" }
+		};
+		this.hud.setTextEditChrome(input);
+	}
+	/**
 	* Realize the result of a text content-edit session and exit. `result`
 	* is the text that should remain — the typed text on commit, the original
 	* on cancel. Implements the empty-equals-delete rule (design:
@@ -4945,6 +4977,25 @@ function project_point_through_ctm(px, py, ctm, container_offset) {
 	return [sx + container_offset[0], sy + container_offset[1]];
 }
 /**
+* The matrix form of {@link project_point_through_ctm}: the full
+* `local → container-px` affine for a CTM + container offset, as a
+* `cmath.Transform`. Use when handing the transform to a downstream projector
+* (e.g. HUD chrome) instead of projecting a single point.
+*
+* Pure function, no DOM types.
+*/
+function ctm_to_container_transform(ctm, container_offset) {
+	return [[
+		ctm.a,
+		ctm.c,
+		ctm.e + container_offset[0]
+	], [
+		ctm.b,
+		ctm.d,
+		ctm.f + container_offset[1]
+	]];
+}
+/**
 * Inverse of the CTM's linear part applied to a delta vector. Drops
 * translation. Used to convert a HUD-reported container-space drag delta
 * back to the path's local coord space for `PathModel.translateVertices`.
@@ -5220,4 +5271,4 @@ var SvgHitShapeDriver = class {
 	}
 };
 //#endregion
-export { project_point_through_ctm as a, MemoizedGeometryProvider as c, project_delta_inverse_ctm as i, Camera as l, install_font_load_geometry_bump as n, Gestures as o, inverse_project_rect as r, DEFAULT_SNAP_OPTIONS as s, attach_dom_surface as t };
+export { project_delta_inverse_ctm as a, DEFAULT_SNAP_OPTIONS as c, inverse_project_rect as i, MemoizedGeometryProvider as l, ctm_to_container_transform as n, project_point_through_ctm as o, install_font_load_geometry_bump as r, Gestures as s, attach_dom_surface as t, Camera as u };

package/dist/{dom-Dw2SPHgc.d.mts → dom-DeHyTJ2i.d.mts}

@@ -1,4 +1,4 @@
-import { c as SvgEditor, p as Gestures, s as SurfaceHandle, w as Camera } from "./editor-CcW4BVth.mjs";
+import { c as SvgEditor, p as Gestures, s as SurfaceHandle, w as Camera } from "./editor-DsJweR76.mjs";
 import cmath from "@grida/cmath";
 import { guide } from "@grida/cmath/_snap";
 
@@ -198,6 +198,22 @@ declare function project_point_through_ctm(px: number, py: number, ctm: {
   e: number;
   f: number;
 }, container_offset: readonly [number, number]): [number, number];
+/**
+ * The matrix form of {@link project_point_through_ctm}: the full
+ * `local → container-px` affine for a CTM + container offset, as a
+ * `cmath.Transform`. Use when handing the transform to a downstream projector
+ * (e.g. HUD chrome) instead of projecting a single point.
+ *
+ * Pure function, no DOM types.
+ */
+declare function ctm_to_container_transform(ctm: {
+  a: number;
+  b: number;
+  c: number;
+  d: number;
+  e: number;
+  f: number;
+}, container_offset: readonly [number, number]): cmath.Transform;
 /**
  * Inverse of the CTM's linear part applied to a delta vector. Drops
  * translation. Used to convert a HUD-reported container-space drag delta
@@ -236,4 +252,4 @@ declare function inverse_project_rect(rect: {
   f: number;
 }, offset: readonly [number, number]): cmath.Rectangle | null;
 //#endregion
-export { install_font_load_geometry_bump as a, project_point_through_ctm as c, attach_dom_surface as i, DEFAULT_SNAP_OPTIONS as l, DomSurfaceHandle as n, inverse_project_rect as o, DomSurfaceOptions as r, project_delta_inverse_ctm as s, AttentionScope as t, SnapOptions as u };
+export { ctm_to_container_transform as a, project_delta_inverse_ctm as c, SnapOptions as d, attach_dom_surface as i, project_point_through_ctm as l, DomSurfaceHandle as n, install_font_load_geometry_bump as o, DomSurfaceOptions as r, inverse_project_rect as s, AttentionScope as t, DEFAULT_SNAP_OPTIONS as u };

package/dist/dom.d.mts

@@ -1,3 +1,3 @@
-import { C as BoundsResolver, E as CameraOptions, T as CameraConstraints, d as GestureContext, f as GestureId, g as MemoizedGeometryProvider, h as GeometrySignals, i as DomComputedResolver, m as GeometryProvider, p as Gestures, r as DomComputedPaint, u as GestureBinding, w as Camera } from "./editor-CcW4BVth.mjs";
-import { a as install_font_load_geometry_bump, c as project_point_through_ctm, i as attach_dom_surface, l as DEFAULT_SNAP_OPTIONS, n as DomSurfaceHandle, o as inverse_project_rect, r as DomSurfaceOptions, s as project_delta_inverse_ctm, t as AttentionScope, u as SnapOptions } from "./dom-Dw2SPHgc.mjs";
-export { AttentionScope, type BoundsResolver, Camera, type CameraConstraints, type CameraOptions, DEFAULT_SNAP_OPTIONS, type DomComputedPaint, type DomComputedResolver, DomSurfaceHandle, DomSurfaceOptions, type GeometryProvider, type GeometrySignals, type GestureBinding, type GestureContext, type GestureId, Gestures, MemoizedGeometryProvider, type SnapOptions, attach_dom_surface, install_font_load_geometry_bump, inverse_project_rect, project_delta_inverse_ctm, project_point_through_ctm };
+import { C as BoundsResolver, E as CameraOptions, T as CameraConstraints, d as GestureContext, f as GestureId, g as MemoizedGeometryProvider, h as GeometrySignals, i as DomComputedResolver, m as GeometryProvider, p as Gestures, r as DomComputedPaint, u as GestureBinding, w as Camera } from "./editor-DsJweR76.mjs";
+import { a as ctm_to_container_transform, c as project_delta_inverse_ctm, d as SnapOptions, i as attach_dom_surface, l as project_point_through_ctm, n as DomSurfaceHandle, o as install_font_load_geometry_bump, r as DomSurfaceOptions, s as inverse_project_rect, t as AttentionScope, u as DEFAULT_SNAP_OPTIONS } from "./dom-DeHyTJ2i.mjs";
+export { AttentionScope, type BoundsResolver, Camera, type CameraConstraints, type CameraOptions, DEFAULT_SNAP_OPTIONS, type DomComputedPaint, type DomComputedResolver, DomSurfaceHandle, DomSurfaceOptions, type GeometryProvider, type GeometrySignals, type GestureBinding, type GestureContext, type GestureId, Gestures, MemoizedGeometryProvider, type SnapOptions, attach_dom_surface, ctm_to_container_transform, install_font_load_geometry_bump, inverse_project_rect, project_delta_inverse_ctm, project_point_through_ctm };

package/dist/dom.d.ts

@@ -1,3 +1,3 @@
-import { C as BoundsResolver, E as CameraOptions, T as CameraConstraints, d as GestureContext, f as GestureId, g as MemoizedGeometryProvider, h as GeometrySignals, i as DomComputedResolver, m as GeometryProvider, p as Gestures, r as DomComputedPaint, u as GestureBinding, w as Camera } from "./editor-CxqRhhzP.js";
-import { a as install_font_load_geometry_bump, c as project_point_through_ctm, i as attach_dom_surface, l as DEFAULT_SNAP_OPTIONS, n as DomSurfaceHandle, o as inverse_project_rect, r as DomSurfaceOptions, s as project_delta_inverse_ctm, t as AttentionScope, u as SnapOptions } from "./dom-CQkWJNrK.js";
-export { AttentionScope, type BoundsResolver, Camera, type CameraConstraints, type CameraOptions, DEFAULT_SNAP_OPTIONS, type DomComputedPaint, type DomComputedResolver, DomSurfaceHandle, DomSurfaceOptions, type GeometryProvider, type GeometrySignals, type GestureBinding, type GestureContext, type GestureId, Gestures, MemoizedGeometryProvider, type SnapOptions, attach_dom_surface, install_font_load_geometry_bump, inverse_project_rect, project_delta_inverse_ctm, project_point_through_ctm };
+import { C as BoundsResolver, E as CameraOptions, T as CameraConstraints, d as GestureContext, f as GestureId, g as MemoizedGeometryProvider, h as GeometrySignals, i as DomComputedResolver, m as GeometryProvider, p as Gestures, r as DomComputedPaint, u as GestureBinding, w as Camera } from "./editor-D4TvRpm6.js";
+import { a as ctm_to_container_transform, c as project_delta_inverse_ctm, d as SnapOptions, i as attach_dom_surface, l as project_point_through_ctm, n as DomSurfaceHandle, o as install_font_load_geometry_bump, r as DomSurfaceOptions, s as inverse_project_rect, t as AttentionScope, u as DEFAULT_SNAP_OPTIONS } from "./dom-CYzYf9lz.js";
+export { AttentionScope, type BoundsResolver, Camera, type CameraConstraints, type CameraOptions, DEFAULT_SNAP_OPTIONS, type DomComputedPaint, type DomComputedResolver, DomSurfaceHandle, DomSurfaceOptions, type GeometryProvider, type GeometrySignals, type GestureBinding, type GestureContext, type GestureId, Gestures, MemoizedGeometryProvider, type SnapOptions, attach_dom_surface, ctm_to_container_transform, install_font_load_geometry_bump, inverse_project_rect, project_delta_inverse_ctm, project_point_through_ctm };

package/dist/dom.js

@@ -1,10 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_dom = require("./dom-H4PvmPe3.js");
+const require_dom = require("./dom-8wNtJcu9.js");
 exports.Camera = require_dom.Camera;
 exports.DEFAULT_SNAP_OPTIONS = require_dom.DEFAULT_SNAP_OPTIONS;
 exports.Gestures = require_dom.Gestures;
 exports.MemoizedGeometryProvider = require_dom.MemoizedGeometryProvider;
 exports.attach_dom_surface = require_dom.attach_dom_surface;
+exports.ctm_to_container_transform = require_dom.ctm_to_container_transform;
 exports.install_font_load_geometry_bump = require_dom.install_font_load_geometry_bump;
 exports.inverse_project_rect = require_dom.inverse_project_rect;
 exports.project_delta_inverse_ctm = require_dom.project_delta_inverse_ctm;

package/dist/dom.mjs

@@ -1,2 +1,2 @@
-import { a as project_point_through_ctm, c as MemoizedGeometryProvider, i as project_delta_inverse_ctm, l as Camera, n as install_font_load_geometry_bump, o as Gestures, r as inverse_project_rect, s as DEFAULT_SNAP_OPTIONS, t as attach_dom_surface } from "./dom-BIjCxCgx.mjs";
-export { Camera, DEFAULT_SNAP_OPTIONS, Gestures, MemoizedGeometryProvider, attach_dom_surface, install_font_load_geometry_bump, inverse_project_rect, project_delta_inverse_ctm, project_point_through_ctm };
+import { a as project_delta_inverse_ctm, c as DEFAULT_SNAP_OPTIONS, i as inverse_project_rect, l as MemoizedGeometryProvider, n as ctm_to_container_transform, o as project_point_through_ctm, r as install_font_load_geometry_bump, s as Gestures, t as attach_dom_surface, u as Camera } from "./dom-DE0Je0o1.mjs";
+export { Camera, DEFAULT_SNAP_OPTIONS, Gestures, MemoizedGeometryProvider, attach_dom_surface, ctm_to_container_transform, install_font_load_geometry_bump, inverse_project_rect, project_delta_inverse_ctm, project_point_through_ctm };

package/dist/{editor-DCDQl18y.mjs → editor-CdSQ5BWb.mjs}

@@ -1,4 +1,4 @@
-import { C as TOOL_SET, S as is_text_input_focused, T as registerDefaultCommands, _ as SVG_NS, a as paint, b as XMLNS_NS, g as subtree, 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 SvgDocument, x as array_shallow_equal, y as WELL_KNOWN_NS_PREFIXES } from "./model-zMPCOVAr.mjs";
+import { C as TOOL_SET, S as is_text_input_focused, T as registerDefaultCommands, _ as SVG_NS, a as paint, b as XMLNS_NS, g as subtree, 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 SvgDocument, x as array_shallow_equal, y as WELL_KNOWN_NS_PREFIXES } from "./model-DcOLgMdU.mjs";
 import { HistoryImpl } from "@grida/history";
 import { KeyCode, M, chunkKey, eventToChunk, getKeyboardOS, kb, keybindingsToKeyCodes } from "@grida/keybinding";
 import cmath from "@grida/cmath";
@@ -1489,6 +1489,11 @@ function _create_svg_editor_internal(opts) {
 		});
 		return { gradient_id };
 	}
+	function set_opacity(value) {
+		if (!Number.isFinite(value)) return;
+		const clamped = cmath.clamp01(value);
+		set_property("opacity", String(clamped));
+	}
 	/** World→local delta projection shared by every one-shot translate
 	*  writer (translate / nudge via `prepare_rpc`, align). Re-expresses a
 	*  world-space delta in the frame the target's position attributes are
@@ -2539,6 +2544,7 @@ function _create_svg_editor_internal(opts) {
 		set_paint,
 		preview_paint,
 		set_paint_from_gradient,
+		set_opacity,
 		translate,
 		nudge,
 		resize_to,

package/dist/{editor-CxqRhhzP.d.ts → editor-D4TvRpm6.d.ts}

@@ -1816,6 +1816,21 @@ type Commands = {
   }): {
     gradient_id: string;
   };
+  /**
+   * Set the `opacity` presentation property across the whole selection in
+   * one history step. Typed, clamped sugar over `set_property("opacity", …)`
+   * — `value` is clamped to `[0, 1]` (CSS clamps opacity to that range at
+   * used-value time), so callers don't have to. A non-finite `value` is a
+   * no-op, as is an empty selection. The write picks each member's winning
+   * cascade carrier exactly like `set_property` (P1), and an in-flight
+   * `preview_property("opacity")` session is superseded the same way a
+   * discrete `set_property` write is.
+   *
+   * This is the editor-owned command behind the digit → opacity shortcut
+   * (see `docs/keybindings.md` → Object Properties); the keybindings
+   * themselves are intentionally not shipped in the default keymap.
+   */
+  set_opacity(value: number): void;
   translate(delta: {
     dx: number;
     dy: number;

package/dist/{editor-CcW4BVth.d.mts → editor-DsJweR76.d.mts}

@@ -1816,6 +1816,21 @@ type Commands = {
   }): {
     gradient_id: string;
   };
+  /**
+   * Set the `opacity` presentation property across the whole selection in
+   * one history step. Typed, clamped sugar over `set_property("opacity", …)`
+   * — `value` is clamped to `[0, 1]` (CSS clamps opacity to that range at
+   * used-value time), so callers don't have to. A non-finite `value` is a
+   * no-op, as is an empty selection. The write picks each member's winning
+   * cascade carrier exactly like `set_property` (P1), and an in-flight
+   * `preview_property("opacity")` session is superseded the same way a
+   * discrete `set_property` write is.
+   *
+   * This is the editor-owned command behind the digit → opacity shortcut
+   * (see `docs/keybindings.md` → Object Properties); the keybindings
+   * themselves are intentionally not shipped in the default keymap.
+   */
+  set_opacity(value: number): void;
   translate(delta: {
     dx: number;
     dy: number;

package/dist/{editor-DFvojUwn.js → editor-YelJorw6.js}

@@ -1,4 +1,4 @@
-const require_model = require("./model-HEKGO-56.js");
+const require_model = require("./model-HVpmlF_I.js");
 let _grida_history = require("@grida/history");
 let _grida_keybinding = require("@grida/keybinding");
 let _grida_cmath = require("@grida/cmath");
@@ -1490,6 +1490,11 @@ function _create_svg_editor_internal(opts) {
 		});
 		return { gradient_id };
 	}
+	function set_opacity(value) {
+		if (!Number.isFinite(value)) return;
+		const clamped = _grida_cmath.default.clamp01(value);
+		set_property("opacity", String(clamped));
+	}
 	/** World→local delta projection shared by every one-shot translate
 	*  writer (translate / nudge via `prepare_rpc`, align). Re-expresses a
 	*  world-space delta in the frame the target's position attributes are
@@ -2540,6 +2545,7 @@ function _create_svg_editor_internal(opts) {
 		set_paint,
 		preview_paint,
 		set_paint_from_gradient,
+		set_opacity,
 		translate,
 		nudge,
 		resize_to,

package/dist/index.d.mts

@@ -1,2 +1,2 @@
-import { $ as RadialGradientDefinition, A as EditorState, B as LinearGradientDefinition, D as ClipboardProvider, F as GradientEntry, G as PaintFallback, H as Mode, I as GradientStop, K as PaintPreviewSession, L as InsertPreviewSession, M as FileIOProvider, N as FontResolver, O as Color, P as GradientDefinition, Q as Providers, R as InsertableTag, S as AlignDirection, U as NodeId, V as Matrix2D, W as Paint, X as PropertyValue, Y as PreviewSession, Z as Provenance, _ as PathModel, a as SelectMode, at as Vec2, b as Verb, c as SvgEditor, et as Rect, it as Unsubscribe, j as EditorStyle, k as DEFAULT_STYLE, l as createSvgEditor, n as CreateSvgEditorOptions, nt as TOOL_CURSOR, o as Surface, q as PaintValue, rt as Tool, s as SurfaceHandle, t as Commands, tt as ReorderDirection, v as PathSnapshot, x as VertexId, y as SegmentId, z as InvalidComputedValue } from "./editor-CcW4BVth.mjs";
+import { $ as RadialGradientDefinition, A as EditorState, B as LinearGradientDefinition, D as ClipboardProvider, F as GradientEntry, G as PaintFallback, H as Mode, I as GradientStop, K as PaintPreviewSession, L as InsertPreviewSession, M as FileIOProvider, N as FontResolver, O as Color, P as GradientDefinition, Q as Providers, R as InsertableTag, S as AlignDirection, U as NodeId, V as Matrix2D, W as Paint, X as PropertyValue, Y as PreviewSession, Z as Provenance, _ as PathModel, a as SelectMode, at as Vec2, b as Verb, c as SvgEditor, et as Rect, it as Unsubscribe, j as EditorStyle, k as DEFAULT_STYLE, l as createSvgEditor, n as CreateSvgEditorOptions, nt as TOOL_CURSOR, o as Surface, q as PaintValue, rt as Tool, s as SurfaceHandle, t as Commands, tt as ReorderDirection, v as PathSnapshot, x as VertexId, y as SegmentId, z as InvalidComputedValue } from "./editor-DsJweR76.mjs";
 export { type AlignDirection, type ClipboardProvider, type Color, type Commands, type CreateSvgEditorOptions, DEFAULT_STYLE, type EditorState, type EditorStyle, type FileIOProvider, type FontResolver, type GradientDefinition, type GradientEntry, type GradientStop, type InsertPreviewSession, type InsertableTag, type InvalidComputedValue, type LinearGradientDefinition, type Matrix2D, type Mode, type NodeId, type Paint, type PaintFallback, type PaintPreviewSession, type PaintValue, PathModel, type PathSnapshot, type PreviewSession, type PropertyValue, type Provenance, type Providers, type RadialGradientDefinition, type Rect, type ReorderDirection, type SegmentId, type SelectMode, type Surface, type SurfaceHandle, type SvgEditor, TOOL_CURSOR, type Tool, type Unsubscribe, type Vec2, type Verb, type VertexId, createSvgEditor };

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-import { $ as RadialGradientDefinition, A as EditorState, B as LinearGradientDefinition, D as ClipboardProvider, F as GradientEntry, G as PaintFallback, H as Mode, I as GradientStop, K as PaintPreviewSession, L as InsertPreviewSession, M as FileIOProvider, N as FontResolver, O as Color, P as GradientDefinition, Q as Providers, R as InsertableTag, S as AlignDirection, U as NodeId, V as Matrix2D, W as Paint, X as PropertyValue, Y as PreviewSession, Z as Provenance, _ as PathModel, a as SelectMode, at as Vec2, b as Verb, c as SvgEditor, et as Rect, it as Unsubscribe, j as EditorStyle, k as DEFAULT_STYLE, l as createSvgEditor, n as CreateSvgEditorOptions, nt as TOOL_CURSOR, o as Surface, q as PaintValue, rt as Tool, s as SurfaceHandle, t as Commands, tt as ReorderDirection, v as PathSnapshot, x as VertexId, y as SegmentId, z as InvalidComputedValue } from "./editor-CxqRhhzP.js";
+import { $ as RadialGradientDefinition, A as EditorState, B as LinearGradientDefinition, D as ClipboardProvider, F as GradientEntry, G as PaintFallback, H as Mode, I as GradientStop, K as PaintPreviewSession, L as InsertPreviewSession, M as FileIOProvider, N as FontResolver, O as Color, P as GradientDefinition, Q as Providers, R as InsertableTag, S as AlignDirection, U as NodeId, V as Matrix2D, W as Paint, X as PropertyValue, Y as PreviewSession, Z as Provenance, _ as PathModel, a as SelectMode, at as Vec2, b as Verb, c as SvgEditor, et as Rect, it as Unsubscribe, j as EditorStyle, k as DEFAULT_STYLE, l as createSvgEditor, n as CreateSvgEditorOptions, nt as TOOL_CURSOR, o as Surface, q as PaintValue, rt as Tool, s as SurfaceHandle, t as Commands, tt as ReorderDirection, v as PathSnapshot, x as VertexId, y as SegmentId, z as InvalidComputedValue } from "./editor-D4TvRpm6.js";
 export { type AlignDirection, type ClipboardProvider, type Color, type Commands, type CreateSvgEditorOptions, DEFAULT_STYLE, type EditorState, type EditorStyle, type FileIOProvider, type FontResolver, type GradientDefinition, type GradientEntry, type GradientStop, type InsertPreviewSession, type InsertableTag, type InvalidComputedValue, type LinearGradientDefinition, type Matrix2D, type Mode, type NodeId, type Paint, type PaintFallback, type PaintPreviewSession, type PaintValue, PathModel, type PathSnapshot, type PreviewSession, type PropertyValue, type Provenance, type Providers, type RadialGradientDefinition, type Rect, type ReorderDirection, type SegmentId, type SelectMode, type Surface, type SurfaceHandle, type SvgEditor, TOOL_CURSOR, type Tool, type Unsubscribe, type Vec2, type Verb, type VertexId, createSvgEditor };

package/dist/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_model = require("./model-HEKGO-56.js");
-const require_editor = require("./editor-DFvojUwn.js");
+const require_model = require("./model-HVpmlF_I.js");
+const require_editor = require("./editor-YelJorw6.js");
 exports.DEFAULT_STYLE = require_model.DEFAULT_STYLE;
 exports.PathModel = require_model.PathModel;
 exports.TOOL_CURSOR = require_model.TOOL_CURSOR;

package/dist/index.mjs

@@ -1,3 +1,3 @@
-import { t as createSvgEditor } from "./editor-DCDQl18y.mjs";
-import { i as TOOL_CURSOR, r as DEFAULT_STYLE, t as PathModel } from "./model-zMPCOVAr.mjs";
+import { t as createSvgEditor } from "./editor-CdSQ5BWb.mjs";
+import { i as TOOL_CURSOR, r as DEFAULT_STYLE, t as PathModel } from "./model-DcOLgMdU.mjs";
 export { DEFAULT_STYLE, PathModel, TOOL_CURSOR, createSvgEditor };

package/dist/{model-zMPCOVAr.mjs → model-DcOLgMdU.mjs}

@@ -92,6 +92,12 @@ function registerDefaultCommands(reg, editor) {
 		if (editor.state.selection.length === 0) return false;
 		return editor.commands.flatten_transform();
 	});
+	reg.register("selection.set_opacity", (args) => {
+		if (editor.state.mode !== "select") return false;
+		if (editor.state.selection.length === 0) return false;
+		editor.commands.set_opacity(args);
+		return true;
+	});
 	reg.register("selection.all", () => {
 		if (editor.state.mode !== "select") return false;
 		return editor.commands.select_all();

package/dist/{model-HEKGO-56.js → model-HVpmlF_I.js}

@@ -126,6 +126,12 @@ function registerDefaultCommands(reg, editor) {
 		if (editor.state.selection.length === 0) return false;
 		return editor.commands.flatten_transform();
 	});
+	reg.register("selection.set_opacity", (args) => {
+		if (editor.state.mode !== "select") return false;
+		if (editor.state.selection.length === 0) return false;
+		editor.commands.set_opacity(args);
+		return true;
+	});
 	reg.register("selection.all", () => {
 		if (editor.state.mode !== "select") return false;
 		return editor.commands.select_all();

package/dist/presets.d.mts

@@ -1,5 +1,5 @@
-import { c as SvgEditor } from "./editor-CcW4BVth.mjs";
-import { n as DomSurfaceHandle, r as DomSurfaceOptions } from "./dom-Dw2SPHgc.mjs";
+import { c as SvgEditor } from "./editor-DsJweR76.mjs";
+import { n as DomSurfaceHandle, r as DomSurfaceOptions } from "./dom-DeHyTJ2i.mjs";
 
 //#region src/presets/keynote.d.ts
 declare namespace keynote_d_exports {

package/dist/presets.d.ts

@@ -1,5 +1,5 @@
-import { c as SvgEditor } from "./editor-CxqRhhzP.js";
-import { n as DomSurfaceHandle, r as DomSurfaceOptions } from "./dom-CQkWJNrK.js";
+import { c as SvgEditor } from "./editor-D4TvRpm6.js";
+import { n as DomSurfaceHandle, r as DomSurfaceOptions } from "./dom-CYzYf9lz.js";
 
 //#region \0rolldown/runtime.js
 declare namespace keynote_d_exports {

package/dist/presets.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_model = require("./model-HEKGO-56.js");
-const require_dom = require("./dom-H4PvmPe3.js");
+const require_model = require("./model-HVpmlF_I.js");
+const require_dom = require("./dom-8wNtJcu9.js");
 //#region src/presets/keynote.ts
 var keynote_exports = /* @__PURE__ */ require_model.__exportAll({ attach: () => attach });
 /**

package/dist/presets.mjs

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./chunk-D7D4PA-g.mjs";
-import { t as attach_dom_surface } from "./dom-BIjCxCgx.mjs";
+import { t as attach_dom_surface } from "./dom-DE0Je0o1.mjs";
 //#region src/presets/keynote.ts
 var keynote_exports = /* @__PURE__ */ __exportAll({ attach: () => attach });
 /**

package/dist/react.d.mts

@@ -1,5 +1,5 @@
-import { A as EditorState, H as Mode, J as PickEvent, K as PaintPreviewSession, Q as Providers, U as NodeId, Y as PreviewSession, c as SvgEditor, j as EditorStyle, rt as Tool, t as Commands } from "./editor-CcW4BVth.mjs";
-import { n as DomSurfaceHandle } from "./dom-Dw2SPHgc.mjs";
+import { A as EditorState, H as Mode, J as PickEvent, K as PaintPreviewSession, Q as Providers, U as NodeId, Y as PreviewSession, c as SvgEditor, j as EditorStyle, rt as Tool, t as Commands } from "./editor-DsJweR76.mjs";
+import { n as DomSurfaceHandle } from "./dom-DeHyTJ2i.mjs";
 import cmath from "@grida/cmath";
 import { ReactNode } from "react";
 

package/dist/react.d.ts

@@ -1,5 +1,5 @@
-import { A as EditorState, H as Mode, J as PickEvent, K as PaintPreviewSession, Q as Providers, U as NodeId, Y as PreviewSession, c as SvgEditor, j as EditorStyle, rt as Tool, t as Commands } from "./editor-CxqRhhzP.js";
-import { n as DomSurfaceHandle } from "./dom-CQkWJNrK.js";
+import { A as EditorState, H as Mode, J as PickEvent, K as PaintPreviewSession, Q as Providers, U as NodeId, Y as PreviewSession, c as SvgEditor, j as EditorStyle, rt as Tool, t as Commands } from "./editor-D4TvRpm6.js";
+import { n as DomSurfaceHandle } from "./dom-CYzYf9lz.js";
 import cmath from "@grida/cmath";
 import { ReactNode } from "react";
 

package/dist/react.js

@@ -1,7 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_editor = require("./editor-DFvojUwn.js");
-const require_dom = require("./dom-H4PvmPe3.js");
+const require_editor = require("./editor-YelJorw6.js");
+const require_dom = require("./dom-8wNtJcu9.js");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/react.tsx

package/dist/react.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { t as createSvgEditor } from "./editor-DCDQl18y.mjs";
-import { t as attach_dom_surface } from "./dom-BIjCxCgx.mjs";
+import { t as createSvgEditor } from "./editor-CdSQ5BWb.mjs";
+import { t as attach_dom_surface } from "./dom-DE0Je0o1.mjs";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grida/svg-editor",
-  "version": "1.0.0-alpha.22",
+  "version": "1.0.0-alpha.24",
   "description": "Headless SVG editor (experimental).",
   "keywords": [
     "bezier",
@@ -60,12 +60,12 @@
   "dependencies": {
     "@grida/cmath": "0.2.3",
     "@grida/color": "0.1.0",
+    "@grida/hud": "0.3.0",
     "@grida/history": "0.1.2",
-    "@grida/keybinding": "0.2.1",
-    "@grida/hud": "0.2.4",
+    "@grida/keybinding": "0.2.2",
     "@grida/svg": "0.2.0",
-    "@grida/text-editor": "0.1.2",
-    "@grida/vn": "0.1.0"
+    "@grida/vn": "0.1.0",
+    "@grida/text-editor": "0.1.2"
   },
   "devDependencies": {
     "@types/react": "^19",