@grida/svg-editor 1.0.0-alpha.3 → 1.0.0-alpha.5

package/dist/{dom-D-5D_3o0.mjs → dom-l5Y1Wf8C.mjs}

@@ -1,4 +1,4 @@
-import { a as capture_resize_baseline, c as is_resizable, i as apply_translate, l as is_text_input_focused, o as capture_translate_baseline, r as apply_resize, s as compute_resize_factors, t as parse_paint } from "./paint-BTKvRItP.mjs";
+import { a as capture_resize_baseline, c as is_resizable, i as apply_translate, l as is_text_input_focused, o as capture_translate_baseline, r as apply_resize, s as compute_resize_factors, t as parse_paint } from "./paint-Cfiw4g_J.mjs";
 import { createTextEditor } from "@grida/text-editor/dom";
 import { NO_MODS, Surface, measurementToHUDDraw } from "@grida/hud";
 import { measure } from "@grida/cmath/_measurement";
@@ -16,9 +16,26 @@ var Camera = class {
 		this.viewport_w = 0;
 		this.viewport_h = 0;
 		this.listeners = /* @__PURE__ */ new Set();
+		this._constraints = null;
 		this._transform = opts.initial ?? cmath.transform.identity;
 		this.resolve_bounds = opts.resolve_bounds;
 	}
+	/**
+	* Current viewport constraint, or `null` for free pan/zoom. Set with
+	* `camera.constraints = { type: 'cover', bounds: '<root>', padding: 80 }`
+	* to clamp zoom + pan; assign `null` to clear.
+	*
+	* Constraints are applied synchronously inside `set_transform` (and
+	* `_set_viewport_size`), so every public mutation respects them
+	* automatically — the host never needs to subscribe-and-clamp itself.
+	*/
+	get constraints() {
+		return this._constraints;
+	}
+	set constraints(c) {
+		this._constraints = c;
+		if (c) this.reenforce();
+	}
 	/** Underlying 2D affine. World→screen. */
 	get transform() {
 		return this._transform;
@@ -117,10 +134,15 @@ var Camera = class {
 	* makes external constraint loops (e.g. "subscribe → compute clamped →
 	* set_transform") terminate: the clamp re-emits the same transform on
 	* the second pass, set_transform short-circuits, no recursion.
+	*
+	* When `camera.constraints` is non-null, the input transform is clamped
+	* synchronously before being stored — every public mutation respects the
+	* constraint automatically.
 	*/
 	set_transform(t) {
-		if (transform_equal(this._transform, t)) return;
-		this._transform = t;
+		const next = this.apply_constraints(t);
+		if (transform_equal(this._transform, next)) return;
+		this._transform = next;
 		this.notify();
 	}
 	/** Viewport size in screen pixels. Read by host code computing constraints. */
@@ -174,6 +196,10 @@ var Camera = class {
 		if (w === this.viewport_w && h === this.viewport_h) return;
 		this.viewport_w = w;
 		this.viewport_h = h;
+		if (this._constraints) {
+			const next = this.apply_constraints(this._transform);
+			if (!transform_equal(this._transform, next)) this._transform = next;
+		}
 		this.notify();
 	}
 	/** Convert a screen-space point to world-space. */
@@ -193,10 +219,71 @@ var Camera = class {
 			y: sy
 		};
 	}
+	/**
+	* Apply the current constraint (if any) to a candidate transform.
+	* Pure: returns the clamped result, never mutates state. Returns the
+	* input unchanged when constraints are null / bounds are unresolvable /
+	* viewport is 0.
+	*/
+	apply_constraints(t) {
+		if (!this._constraints) return t;
+		if (this.viewport_w <= 0 || this.viewport_h <= 0) return t;
+		switch (this._constraints.type) {
+			case "cover": return clamp_cover(t, this._constraints, this.viewport_w, this.viewport_h, this.resolve_bounds);
+		}
+	}
+	/**
+	* Re-clamp the stored transform against the current constraint. Called
+	* from the `constraints` setter; `_set_viewport_size` has its own
+	* notify-inclusive path.
+	*/
+	reenforce() {
+		if (!this._constraints) return;
+		const next = this.apply_constraints(this._transform);
+		if (transform_equal(this._transform, next)) return;
+		this._transform = next;
+		this.notify();
+	}
 	notify() {
 		for (const cb of this.listeners) cb();
 	}
 };
+/**
+* Clamp a transform under a `'cover'` constraint:
+* - Zoom lower-bounded at fit-with-padding (the slide always fills the
+*   viewport edge-to-edge).
+* - When at min-zoom the slide is locked centered (bounds smaller than
+*   viewport on the constrained axis is impossible above min_zoom; below
+*   is impossible because zoom is clamped up).
+* - When zoomed in, pan is clamped so the slide always covers the viewport
+*   (no black bars).
+*
+* Returns the input transform unchanged when bounds can't be resolved or
+* are degenerate.
+*/
+function clamp_cover(t, c, vp_w, vp_h, resolve) {
+	const bounds = typeof c.bounds === "string" ? resolve(c.bounds) : c.bounds;
+	if (!bounds || bounds.width <= 0 || bounds.height <= 0) return t;
+	const padding = c.padding ?? 0;
+	const eff_w = vp_w - 2 * padding;
+	const eff_h = vp_h - 2 * padding;
+	if (eff_w <= 0 || eff_h <= 0) return t;
+	const min_zoom = Math.min(eff_w / bounds.width, eff_h / bounds.height);
+	const s = Math.max(t[0][0], min_zoom);
+	const sw = s * bounds.width;
+	const sh = s * bounds.height;
+	const tx = sw > vp_w ? cmath.clamp(t[0][2], vp_w - s * (bounds.x + bounds.width), -s * bounds.x) : (vp_w - sw) / 2 - s * bounds.x;
+	const ty = sh > vp_h ? cmath.clamp(t[1][2], vp_h - s * (bounds.y + bounds.height), -s * bounds.y) : (vp_h - sh) / 2 - s * bounds.y;
+	return [[
+		s,
+		0,
+		tx
+	], [
+		0,
+		s,
+		ty
+	]];
+}
 function transform_equal(a, b) {
 	return a[0][0] === b[0][0] && a[0][1] === b[0][1] && a[0][2] === b[0][2] && a[1][0] === b[1][0] && a[1][1] === b[1][1] && a[1][2] === b[1][2];
 }
@@ -445,7 +532,9 @@ var SvgTextSurface = class {
 		this.last_sel_end = -1;
 		this.textEl = textEl;
 		const ownerDoc = textEl.ownerDocument;
-		const parent = textEl.parentNode;
+		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;
 		if (!(computedWhitespace === "pre" || computedWhitespace === "pre-wrap" || computedWhitespace === "break-spaces")) {
@@ -460,14 +549,14 @@ var SvgTextSurface = class {
 		selection.setAttribute("pointer-events", "none");
 		selection.setAttribute("data-svg-text-edit-selection", "");
 		selection.style.display = "none";
-		parent.insertBefore(selection, textEl);
+		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, textEl.nextSibling);
+		parent.insertBefore(caret, mountAnchor.nextSibling);
 		this.caretRect = caret;
 	}
 	setText(text) {
@@ -1210,7 +1299,7 @@ var DomSurface = class {
 	commit_intent(intent) {
 		switch (intent.kind) {
 			case "select":
-				this.editor.commands.select(intent.ids, { additive: intent.mode !== "replace" });
+				this.editor.commands.select(intent.ids, { mode: intent.mode });
 				return;
 			case "deselect_all":
 				this.editor.commands.deselect();
@@ -1437,13 +1526,15 @@ var DomSurface = class {
 			if (!intent.additive) this.editor.commands.deselect();
 			return;
 		}
-		this.editor.commands.select(ids, { additive: intent.additive });
+		this.editor.commands.select(ids, { mode: intent.additive ? "add" : "replace" });
 	}
 	enter_content_edit(id) {
 		if (this.text_edit) return false;
 		const el = this.element_index.get(id);
-		if (!(el instanceof SVGTextElement)) return false;
+		if (!(el instanceof SVGElement)) return false;
 		const doc = this.editor._internal;
+		if (!doc.doc.is_text_edit_target(id)) return false;
+		if (!(el instanceof SVGTextContentElement)) return false;
 		this.text_edit_target = id;
 		this.text_edit_original = doc.doc.text_of(id);
 		this.text_edit = TEXT_EDIT_PENDING;

package/dist/dom.d.mts

@@ -1,48 +1,2 @@
-import { a as SurfaceHandle, d as Gestures, g as Camera, o as SvgEditor } from "./editor-DSADZszj.mjs";
-import cmath from "@grida/cmath";
-
-//#region src/dom.d.ts
-type DomSurfaceOptions = {
-  /** Mount the SVG inside this container. */container: HTMLElement;
-  /**
-   * Install the default gesture set (wheel-pan/zoom, space-drag, middle-mouse,
-   * keyboard zoom). Default `true`. Pass `false` to start blank and bind à la
-   * carte via `handle.gestures.bind(...)`.
-   */
-  gestures?: boolean;
-  /**
-   * Auto-fit the document into the viewport on initial attach. Default
-   * `false`. Mirrors Excalidraw's `initialData.scrollToContent`.
-   * Subsequent `editor.load()` calls do NOT re-fit — call
-   * `handle.camera.fit("<root>")` yourself if you want that behavior.
-   */
-  fit?: boolean;
-  /**
-   * Initial camera transform. Default `cmath.transform.identity`. Ignored
-   * when `fit: true`.
-   */
-  initial_camera?: cmath.Transform;
-};
-/**
- * Surface handle for the DOM surface. Extends the editor's core
- * `SurfaceHandle` with the viewport-scoped concerns: pan/zoom (`camera`)
- * and pointer/wheel/keyboard gesture bindings (`gestures`).
- *
- * Camera + gestures are **surface-scoped**: detaching the surface drops
- * both. They never appear on the headless `SvgEditor`.
- */
-type DomSurfaceHandle = SurfaceHandle & {
-  camera: Camera;
-  gestures: Gestures;
-};
-/**
- * Attach a DOM surface to a headless editor. Returns a `DomSurfaceHandle`
- * whose `detach()` is the inverse — DOM cleared, listeners removed,
- * gestures uninstalled.
- *
- * Usage is one-shot per container: the surface owns the container's children
- * for its lifetime, and `detach()` restores it to empty.
- */
-declare function attach_dom_surface(editor: SvgEditor, options: DomSurfaceOptions): DomSurfaceHandle;
-//#endregion
+import { n as DomSurfaceOptions, r as attach_dom_surface, t as DomSurfaceHandle } from "./dom-CMXNUMjP.mjs";
 export { DomSurfaceHandle, DomSurfaceOptions, attach_dom_surface };

package/dist/dom.d.ts

@@ -1,48 +1,2 @@
-import { a as SurfaceHandle, d as Gestures, g as Camera, o as SvgEditor } from "./editor-Da446SPO.js";
-import cmath from "@grida/cmath";
-
-//#region src/dom.d.ts
-type DomSurfaceOptions = {
-  /** Mount the SVG inside this container. */container: HTMLElement;
-  /**
-   * Install the default gesture set (wheel-pan/zoom, space-drag, middle-mouse,
-   * keyboard zoom). Default `true`. Pass `false` to start blank and bind à la
-   * carte via `handle.gestures.bind(...)`.
-   */
-  gestures?: boolean;
-  /**
-   * Auto-fit the document into the viewport on initial attach. Default
-   * `false`. Mirrors Excalidraw's `initialData.scrollToContent`.
-   * Subsequent `editor.load()` calls do NOT re-fit — call
-   * `handle.camera.fit("<root>")` yourself if you want that behavior.
-   */
-  fit?: boolean;
-  /**
-   * Initial camera transform. Default `cmath.transform.identity`. Ignored
-   * when `fit: true`.
-   */
-  initial_camera?: cmath.Transform;
-};
-/**
- * Surface handle for the DOM surface. Extends the editor's core
- * `SurfaceHandle` with the viewport-scoped concerns: pan/zoom (`camera`)
- * and pointer/wheel/keyboard gesture bindings (`gestures`).
- *
- * Camera + gestures are **surface-scoped**: detaching the surface drops
- * both. They never appear on the headless `SvgEditor`.
- */
-type DomSurfaceHandle = SurfaceHandle & {
-  camera: Camera;
-  gestures: Gestures;
-};
-/**
- * Attach a DOM surface to a headless editor. Returns a `DomSurfaceHandle`
- * whose `detach()` is the inverse — DOM cleared, listeners removed,
- * gestures uninstalled.
- *
- * Usage is one-shot per container: the surface owns the container's children
- * for its lifetime, and `detach()` restores it to empty.
- */
-declare function attach_dom_surface(editor: SvgEditor, options: DomSurfaceOptions): DomSurfaceHandle;
-//#endregion
+import { n as DomSurfaceOptions, r as attach_dom_surface, t as DomSurfaceHandle } from "./dom-eIgcZ4JC.js";
 export { DomSurfaceHandle, DomSurfaceOptions, attach_dom_surface };

package/dist/dom.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_dom = require("./dom-BlJZWpR_.js");
+const require_dom = require("./dom-DyJy1H6Q.js");
 exports.attach_dom_surface = require_dom.attach_dom_surface;

package/dist/dom.mjs

@@ -1,2 +1,2 @@
-import { t as attach_dom_surface } from "./dom-D-5D_3o0.mjs";
+import { t as attach_dom_surface } from "./dom-l5Y1Wf8C.mjs";
 export { attach_dom_surface };

package/dist/{editor-DP36h-SE.mjs → editor-CRflVqEz.mjs}

@@ -1,4 +1,4 @@
-import { i as apply_translate, l as is_text_input_focused, n as serialize_paint, o as capture_translate_baseline, t as parse_paint } from "./paint-BTKvRItP.mjs";
+import { i as apply_translate, l as is_text_input_focused, n as serialize_paint, o as capture_translate_baseline, t as parse_paint } from "./paint-Cfiw4g_J.mjs";
 import { HistoryImpl } from "@grida/history";
 import { KeyCode, M, chunkKey, eventToChunk, getKeyboardOS, kb, keybindingsToKeyCodes } from "@grida/keybinding";
 //#region src/commands/registry.ts
@@ -489,7 +489,7 @@ var GradientsRegistry = class {
 		};
 	}
 	write_gradient(node, def) {
-		for (const c of [...this.doc.children_of(node)]) this.doc.remove(c);
+		for (const c of this.doc.children_of(node).slice()) this.doc.remove(c);
 		const set_num = (name, v) => {
 			this.doc.set_attr(node, name, v === void 0 ? null : String(v));
 		};
@@ -730,7 +730,6 @@ function parse_attrs(src, from) {
 		const c = src[i];
 		if (c === "/") {
 			if (src[i + 1] !== ">") throw new Error("expected '/>' at " + i);
-			pre + "";
 			return {
 				attrs,
 				end_index: i + 2,
@@ -1012,6 +1011,25 @@ var SvgDocument = class SvgDocument {
 		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;
+	}
 	text_of(id) {
 		const n = this.nodes.get(id);
 		if (!n || n.kind !== "element") return "";
@@ -1318,9 +1336,16 @@ function createSvgEditor(opts) {
 	let doc_version = 0;
 	/** doc_version at the last load()/serialize(); compared to derive `dirty`. */
 	let baseline_doc_version = 0;
+	/**
+	* Bumps once per `editor.load(svg)` call. The constructor's initial parse
+	* does NOT count — it's the "factory" state. Hosts subscribe via
+	* `subscribe_with_selector(s => s.load_version, ...)` to react to fresh
+	* document loads without firing on every edit.
+	*/
+	let load_version = 0;
 	let style = {
 		...DEFAULT_STYLE,
-		...opts.style ?? {}
+		...opts.style
 	};
 	const providers = opts.providers ?? {};
 	const listeners = /* @__PURE__ */ new Set();
@@ -1335,7 +1360,8 @@ function createSvgEditor(opts) {
 			can_undo: history.stack.canUndo,
 			can_redo: history.stack.canRedo,
 			version,
-			structure_version: doc.structure_version
+			structure_version: doc.structure_version,
+			load_version
 		});
 	}
 	function emit() {
@@ -1372,11 +1398,16 @@ function createSvgEditor(opts) {
 	}
 	function select(target, opts) {
 		const ids = typeof target === "string" ? [target] : [...target];
-		if (opts?.additive) {
-			const merged = new Set(selection);
-			for (const id of ids) merged.add(id);
-			set_selection([...merged]);
-		} else set_selection(ids);
+		const mode = opts?.mode ?? "replace";
+		if (mode === "replace") {
+			set_selection(ids);
+			return;
+		}
+		const next = new Set(selection);
+		if (mode === "add") for (const id of ids) next.add(id);
+		else for (const id of ids) if (next.has(id)) next.delete(id);
+		else next.add(id);
+		set_selection([...next]);
 	}
 	function deselect() {
 		set_selection([]);
@@ -1589,7 +1620,7 @@ function createSvgEditor(opts) {
 	function set_text(value) {
 		if (selection.length !== 1) return;
 		const target = selection[0];
-		if (doc.tag_of(target) !== "text") return;
+		if (!doc.is_text_edit_target(target)) return;
 		const original = doc.text_of(target);
 		if (original === value) return;
 		const apply = () => {
@@ -1632,7 +1663,7 @@ function createSvgEditor(opts) {
 	function enter_content_edit(target) {
 		const id = target ?? (selection.length === 1 ? selection[0] : null);
 		if (!id) return false;
-		if (doc.tag_of(id) !== "text") return false;
+		if (!doc.is_text_edit_target(id)) return false;
 		if (!content_edit_driver) return false;
 		return content_edit_driver(id);
 	}
@@ -1643,6 +1674,7 @@ function createSvgEditor(opts) {
 		mode = "select";
 		history.clear();
 		baseline_doc_version = doc_version;
+		load_version++;
 		emit();
 	}
 	function serialize_svg() {