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

package/README.md

@@ -962,7 +962,7 @@ What this editor will never be. Each one is a defensive perimeter for the princi
 - **Not a plugin host.** No public registry for tools, capabilities, gestures, HUD overlays, or serializers. (P1, P6.)
 - **Not a Figma-style multiplayer canvas.** State is local. Sync is the consumer's problem.
 - **Not customizable in HUD layout.** Style spec only — no overlay slots, no handle replacement, no custom chrome components.
-- **Not a customizable selection policy.** What a pick or a marquee selects (the marquee shadow rule, meta routing, additive) is a fixed product decision, owned by the labeled policy layer (`src/selection/`, spec [`docs/marquee-selection.md`](./docs/marquee-selection.md)). No host hook, provider, or registry swaps it; the opinion lives above the engine, never inside it, and never as a public knob.
+- **Not a customizable selection policy.** What a pick or a marquee selects (the marquee shadow rule, meta routing, additive, and the group-first targeting that lifts a click to its container) is a fixed product decision, owned by the labeled policy layer (`src/selection/`, specs [`docs/marquee-selection.md`](./docs/marquee-selection.md) and [`docs/group-first-targeting.md`](./docs/group-first-targeting.md)). No host hook, provider, or registry swaps it; the opinion lives above the engine, never inside it, and never as a public knob.
 - **Not a private IR.** SVG is the source of truth. The editor does not maintain an alternative on-disk format, and the bytes are not projected from any in-memory canonical store. (The internal typed element IR described under [Paradigm § Element IR (internal)](#element-ir-internal) is a typed view over the parsed AST, not a store the file is derived from — the AST and the file are the source of truth, and the IR is rebuilt from them on each load.)
 - **Not a serializer playground.** Round-trip rules are fixed (P1). No "compact mode," no "Prettier mode," no consumer-supplied formatter.
 - **Not an input-interception hook.** The pick/tap observation (`subscribe_pick`) reports a click that already happened; it cannot prevent, delay, or replace the editor's own selection and gesture handling. A host that needs to intercept input owns the container and splices its own layer in (the DOM escape hatch) — it does not get a veto through the observation surface.

package/dist/{dom-CfYDV311.js → dom-CuK0LFUY.js}

@@ -1,4 +1,4 @@
-const require_model = require("./model-CzL6_zId.js");
+const require_model = require("./model-DVwjrVYp.js");
 let _grida_cmath = require("@grida/cmath");
 _grida_cmath = require_model.__toESM(_grida_cmath);
 let _grida_svg_parse = require("@grida/svg/parse");
@@ -788,6 +788,139 @@ let marquee_selection;
 	_marquee_selection.resolve = resolve;
 })(marquee_selection || (marquee_selection = {}));
 //#endregion
+//#region src/selection/targeting.ts
+let targeting;
+(function(_targeting) {
+	/** Siblings are treated as closer than parent/child (distance 1) so a tap
+	*  into a sibling subtree resolves to the sibling at the focus depth without
+	*  a tie-breaker. Mirrors Grida Canvas `weights: { sibling: 0.9 }`. */
+	const SIBLING_WEIGHT = .9;
+	function resolve_target(hits, tree, opts) {
+		if (hits.length === 0) return null;
+		const depth_cache = /* @__PURE__ */ new Map();
+		const depth = (id) => {
+			const cached = depth_cache.get(id);
+			if (cached !== void 0) return cached;
+			let d = 0;
+			const seen = new Set([id]);
+			let cur = tree.parent_of(id);
+			while (cur !== null && !seen.has(cur)) {
+				d++;
+				seen.add(cur);
+				cur = tree.parent_of(cur);
+			}
+			depth_cache.set(id, d);
+			return d;
+		};
+		const ancestors_inclusive = (id) => {
+			const set = /* @__PURE__ */ new Set();
+			let cur = id;
+			while (cur !== null && !set.has(cur)) {
+				set.add(cur);
+				cur = tree.parent_of(cur);
+			}
+			return set;
+		};
+		/** Lowest common ancestor, or `null` if the two ids are not connected
+		*  (e.g. a stale selection id from a different/old tree). */
+		const lca = (a, b) => {
+			const a_anc = ancestors_inclusive(a);
+			const seen = /* @__PURE__ */ new Set();
+			let cur = b;
+			while (cur !== null && !seen.has(cur)) {
+				if (a_anc.has(cur)) return cur;
+				seen.add(cur);
+				cur = tree.parent_of(cur);
+			}
+			return null;
+		};
+		/** Is `a` a (strict) descendant of `b`? */
+		const is_descendant_of = (a, b) => {
+			const seen = /* @__PURE__ */ new Set();
+			let cur = tree.parent_of(a);
+			while (cur !== null && !seen.has(cur)) {
+				if (cur === b) return true;
+				seen.add(cur);
+				cur = tree.parent_of(cur);
+			}
+			return false;
+		};
+		const graph_distance = (a, b) => {
+			if (a === b) return 0;
+			const m = lca(a, b);
+			if (m === null) return Infinity;
+			return depth(a) + depth(b) - 2 * depth(m);
+		};
+		const weighted_distance = (a, b) => {
+			if (a === b) return 0;
+			const pa = tree.parent_of(a);
+			if (pa !== null && pa === tree.parent_of(b)) return SIBLING_WEIGHT;
+			return graph_distance(a, b);
+		};
+		if (opts.deepest) {
+			let best = null;
+			let best_depth = -Infinity;
+			for (const id of hits) {
+				const d = depth(id);
+				if (d > best_depth) {
+					best_depth = d;
+					best = id;
+				}
+			}
+			return best;
+		}
+		const by_depth = [...hits].sort((a, b) => {
+			const dd = depth(a) - depth(b);
+			return dd !== 0 ? dd : hits.indexOf(a) - hits.indexOf(b);
+		});
+		const leaf = hits[0];
+		const selection = opts.selection.filter((s) => lca(leaf, s) !== null);
+		const find_nearest = (candidates, sel, use_sibling_weight, prefer_children) => {
+			if (candidates.length === 0 || sel.length === 0) return null;
+			const dist = use_sibling_weight ? weighted_distance : graph_distance;
+			const scored = candidates.map((c) => {
+				let min = Infinity;
+				for (const s of sel) {
+					const d = dist(c, s);
+					if (d < min) min = d;
+				}
+				return {
+					id: c,
+					distance: min,
+					is_child: prefer_children ? sel.some((s) => is_descendant_of(c, s)) : false,
+					depth: depth(c)
+				};
+			});
+			scored.sort((a, b) => {
+				if (a.distance !== b.distance) return a.distance - b.distance;
+				if (prefer_children) {
+					if (a.is_child && !b.is_child) return -1;
+					if (!a.is_child && b.is_child) return 1;
+				}
+				return a.depth - b.depth;
+			});
+			return scored[0]?.id ?? null;
+		};
+		if (selection.length > 0) {
+			if (opts.nested_first) {
+				const descendants = by_depth.filter((c) => !selection.includes(c) && selection.some((s) => is_descendant_of(c, s)));
+				if (descendants.length > 0) {
+					const r = find_nearest(descendants, selection, false, false);
+					if (r !== null) return r;
+				}
+			}
+			const focus_ancestors = /* @__PURE__ */ new Set();
+			for (const s of selection) for (const a of ancestors_inclusive(s)) focus_ancestors.add(a);
+			for (const s of selection) focus_ancestors.delete(s);
+			const lateral = by_depth.filter((c) => !focus_ancestors.has(c));
+			const nearest = find_nearest(lateral.length > 0 ? lateral : by_depth, selection, true, opts.nested_first);
+			if (nearest !== null) return nearest;
+		}
+		return by_depth[0] ?? null;
+	}
+	_targeting.resolve_target = resolve_target;
+})(targeting || (targeting = {}));
+//#endregion
 //#region src/gestures/gestures.ts
 /**
 * Sibling to `Keymap`. Owns a list of installed gesture bindings; each
@@ -1783,6 +1916,7 @@ var DomSurface = class DomSurface {
 		this.last_pointer_valid = false;
 		this.resize_observer = null;
 		this.redraw_raf_id = null;
+		this.hover_repick_raf_id = null;
 		this._geometry_provider = null;
 		this._hit_shapes = null;
 		this._z_order_cache = [];
@@ -1999,6 +2133,7 @@ var DomSurface = class DomSurface {
 		});
 		this.teardown.push(unsub);
 		this.teardown.push(editor.subscribe_geometry(() => this.request_redraw()));
+		this.teardown.push(editor.subscribe_with_selector((s) => s.selection, () => this.request_hover_repick(), require_model.array_shallow_equal));
 		if (typeof ResizeObserver !== "undefined") {
 			this.resize_observer = new ResizeObserver(() => this.sync_canvas_size());
 			this.resize_observer.observe(container);
@@ -2089,7 +2224,62 @@ var DomSurface = class DomSurface {
 	}
 	hit_test(x, y) {
 		if (this.vector_edit) return null;
-		return this.pick_at(x, y, false);
+		const leaf = this.pick_at(x, y, false);
+		if (leaf === null) return null;
+		return this.resolve_group_first(leaf, { nested_first: false });
+	}
+	/** Group-first targeting over the raw leaf's ancestor chain — the host's
+	*  selection POLICY (pure rules in `src/selection/targeting.ts`). The
+	*  current selection defines the focus depth: a tap moves laterally /
+	*  sibling-aware at that depth, meta/ctrl jumps to the leaf, and
+	*  `nested_first` (double-click) descends one level. Returns the raw `leaf`
+	*  unchanged if the document is momentarily unavailable. */
+	resolve_group_first(leaf, opts) {
+		const doc = (() => {
+			try {
+				return this.editor_internal().doc;
+			} catch {
+				return null;
+			}
+		})();
+		if (!doc) return leaf;
+		const root = doc.root;
+		const hits = [];
+		const seen = /* @__PURE__ */ new Set();
+		let cur = leaf;
+		while (cur !== null && cur !== root && !seen.has(cur)) {
+			hits.push(cur);
+			seen.add(cur);
+			cur = doc.parent_of(cur);
+		}
+		const mods = this.hud.modifiers();
+		return targeting.resolve_target(hits, { parent_of: (id) => doc.parent_of(id) }, {
+			selection: this.editor.state.selection,
+			deepest: mods.meta || mods.ctrl,
+			nested_first: opts.nested_first
+		});
+	}
+	/** Double-click behaviour, as two distinct phases over the hierarchy:
+	*
+	*   1. **Descend** — resolve one level deeper toward `leaf` (relative to the
+	*      current focus, via `resolve_group_first` with `nested_first`). A
+	*      double-click that lands on a node deeper than the selection just
+	*      SELECTS it.
+	*   2. **Enter content-edit** — only when there is nowhere deeper to go: the
+	*      resolved target is already the sole selection. Then (and only then) a
+	*      double-click opens content-edit, when the node is editable.
+	*
+	*  Descending and editing never collide: progressive double-clicks peel
+	*  `G1 → G2 → … → leaf`, and one more double-click on the now-focused leaf
+	*  edits it. A top-level editable node (no container to peel) is selected by
+	*  the double-click's own first press, so its second press lands in the
+	*  edit phase — it still edits on a single double-click. */
+	descend_or_enter_content_edit(leaf) {
+		const target = this.resolve_group_first(leaf, { nested_first: true });
+		if (target === null) return;
+		const selection = this.editor.state.selection;
+		if (selection.length === 1 && selection[0] === target) this.editor.enter_content_edit(target);
+		else this.editor.commands.select(target);
 	}
 	/** Element-walk under (x, y) → first ancestor with `ID_ATTR`. When
 	*  `allow_root` is `false`, root hits are rejected (returns `null`) so
@@ -2129,9 +2319,12 @@ var DomSurface = class DomSurface {
 	*  `allow_root` controls whether the root `<svg>` may be returned:
 	*  selection HUD passes `false`, measurement HUD passes `true`.
 	*
-	*  Used by both `pick_at` (HUD hover / measurement) and
-	*  `SvgGeometryDriver.node_at_point` (core editor selection) so one
-	*  source of truth governs every click that resolves to a node. */
+	*  This is the RAW (leaf-first) picker — one source of truth for "what
+	*  element is under this point." Used by `pick_at` (HUD hover / measurement)
+	*  and `SvgGeometryDriver.node_at_point` (core geometry queries). Selection
+	*  targeting policy (group-first / meta-deepest / focus-depth) is applied on
+	*  top of the raw leaf by `hit_test` → `resolve_group_first`, NOT here, so
+	*  measurement and geometry queries stay leaf-exact. */
 	_pick_node_at_world(p, allow_root) {
 		const root_id = this.editor.tree().root;
 		const tol_px = this.editor.style.hit_tolerance_px;
@@ -2215,6 +2408,10 @@ var DomSurface = class DomSurface {
 			(this.container.ownerDocument.defaultView ?? window).cancelAnimationFrame(this.redraw_raf_id);
 			this.redraw_raf_id = null;
 		}
+		if (this.hover_repick_raf_id !== null) {
+			(this.container.ownerDocument.defaultView ?? window).cancelAnimationFrame(this.hover_repick_raf_id);
+			this.hover_repick_raf_id = null;
+		}
 		for (const fn of this.teardown) fn();
 		this.teardown = [];
 		this.hud.dispose();
@@ -2392,6 +2589,53 @@ var DomSurface = class DomSurface {
 		});
 	}
 	/**
+	* Re-pick the hover / target id at the RESTING pointer and return what
+	* changed. The hover target is a pure function of (pointer, modifiers,
+	* selection, tree) resolved through `hit_test` → group-first targeting;
+	* every input OTHER than the pointer changes off the pointer path, so the
+	* stored hover goes stale until the next real move. Replaying a synthetic
+	* idle pointer-move re-runs `pick` under the current state, keeping the
+	* highlight a faithful preview of what the next click would select.
+	*
+	* Idle-only: a synthetic move opens / cancels no gesture and leaves any tap
+	* candidate / pending press untouched. No-op (all-false) when the pointer
+	* has never been observed, has left the canvas, or a text / vector edit owns
+	* it. Pushes nothing and redraws nothing — the caller reflects the flags.
+	*/
+	repick_hover_at_rest() {
+		if (!this.last_pointer_valid || this.hud.gesture().kind !== "idle" || this.text_edit || this.vector_edit) return {
+			needsRedraw: false,
+			cursorChanged: false,
+			hoverChanged: false
+		};
+		return this.hud.dispatch({
+			kind: "pointer_move",
+			x: this.last_pointer.x,
+			y: this.last_pointer.y,
+			mods: this.hud.modifiers()
+		});
+	}
+	/**
+	* Schedule an idle hover re-pick on the next frame (RAF-coalesced, like
+	* `request_redraw`). DEFERRED on purpose: the trigger — a selection change —
+	* frequently fires from inside `hud.dispatch` (a double-click drill resolves
+	* its new selection via `onIntent`, mid-dispatch), and re-picking there would
+	* re-enter the HUD. By next frame the dispatch has unwound and the gesture
+	* has settled, so `repick_hover_at_rest` runs against stable state. Multiple
+	* changes within a frame fold into one re-pick.
+	*/
+	request_hover_repick() {
+		if (this.hover_repick_raf_id !== null) return;
+		const win = this.container.ownerDocument.defaultView ?? window;
+		this.hover_repick_raf_id = win.requestAnimationFrame(() => {
+			this.hover_repick_raf_id = null;
+			const moved = this.repick_hover_at_rest();
+			if (moved.needsRedraw || moved.hoverChanged) this.redraw();
+			if (moved.cursorChanged) this.sync_cursor();
+			if (moved.hoverChanged) this.editor_hover_internal?.push_surface_hover(this.hud.hover());
+		});
+	}
+	/**
 	* Build the host-fed measurement guide for the current frame, or
 	* `undefined` if no guide should be drawn.
 	*
@@ -2952,9 +3196,16 @@ var DomSurface = class DomSurface {
 		if ((prev.shift !== next.shift || prev.alt !== next.alt) && this.translate_orchestrator.has_active_session()) this.translate_orchestrator.redrive_modifiers(this.current_translate_modifiers());
 		if (prev.shift !== next.shift && this.resize_orchestrator.has_active_session()) this.resize_orchestrator.redrive_modifiers(this.current_resize_modifiers());
 		if (prev.shift !== next.shift && this.rotate_orchestrator.has_active_session()) this.rotate_orchestrator.redrive_modifiers(this.current_rotate_modifiers());
+		let cursor_changed = response.cursorChanged;
+		let hover_changed = response.hoverChanged;
+		if (prev.meta !== next.meta || prev.ctrl !== next.ctrl) {
+			const moved = this.repick_hover_at_rest();
+			if (moved.cursorChanged) cursor_changed = true;
+			if (moved.hoverChanged) hover_changed = true;
+		}
 		this.redraw();
-		if (response.cursorChanged) this.sync_cursor();
-		if (response.hoverChanged) this.editor_hover_internal?.push_surface_hover(this.hud.hover());
+		if (cursor_changed) this.sync_cursor();
+		if (hover_changed) this.editor_hover_internal?.push_surface_hover(this.hud.hover());
 	}
 	dispatch_pointer(e, kind) {
 		if (this.text_edit) {
@@ -3236,10 +3487,16 @@ var DomSurface = class DomSurface {
 			case "set_endpoint":
 				this.handle_set_endpoint(intent);
 				return;
-			case "enter_content_edit":
-				this.editor.commands.select(intent.id);
-				this.editor.enter_content_edit(intent.id);
+			case "enter_content_edit": {
+				const leaf = this.last_pointer_valid ? this.pick_at(this.last_pointer.x, this.last_pointer.y, false) : null;
+				if (leaf === null) {
+					this.editor.commands.select(intent.id);
+					this.editor.enter_content_edit(intent.id);
+					return;
+				}
+				this.descend_or_enter_content_edit(leaf);
 				return;
+			}
 			case "exit_content_edit":
 				this.exit_vector_edit();
 				return;
@@ -3291,10 +3548,12 @@ var DomSurface = class DomSurface {
 	* Shift axis-lock for point-level drags (gridaco/grida#848) — the
 	* vertex / endpoint counterpart of whole-object translate's
 	* `axis_lock: "by_dominance"` (see `current_translate_modifiers`).
-	* Collapses the lesser axis of a local-frame delta when Shift is held,
-	* via the same cmath rule the translate pipeline's `axis_lock` stage
-	* uses; identity when Shift is up. Pull-at-consume from the HUD modifier
-	* store so a mid-drag Shift press/release reflects on the next frame.
+	* Collapses the lesser axis of a delta when Shift is held, via the same
+	* cmath rule the translate pipeline's `axis_lock` stage uses; identity when
+	* Shift is up. Space-agnostic: the point path applies it to the raw screen
+	* delta (before snap), so dominance reflects the user's drag intent. Pull-
+	* at-consume from the HUD modifier store so a mid-drag Shift press/release
+	* reflects on the next frame.
 	*/
 	axis_lock_point_delta(dx, dy) {
 		if (!this.hud.modifiers().shift) return [dx, dy];
@@ -3307,19 +3566,21 @@ var DomSurface = class DomSurface {
 	* delta so it aligns with (or lands on) a sibling point: a path's other
 	* vertices, or a `<line>`'s opposite endpoint.
 	*
-	* Runs entirely in the element's **local frame**: agents (the moving
-	* point[s]) and neighbors (the static sibling points) come straight from
-	* the path's vector network / line attributes — no projection, no separate
-	* neighbor source. The corrected delta is returned in that same local frame
-	* so the caller applies it exactly where it already applies the local drag
-	* delta. Only the snap GUIDE is projected to screen (via the element CTM)
-	* for HUD rendering.
+	* Runs in **screen space** (container CSS-px, the HUD's identity frame). The
+	* caller projects the moving point[s] (agents) and the static sibling points
+	* (neighbors) through the element CTM first, and feeds the drag delta in the
+	* same space. Screen space is the right frame because the threshold and the
+	* rendered guide are both screen-pixel concepts: the configured
+	* `snap_threshold_px` stays user-visible pixels on BOTH axes for any element
+	* CTM — even a non-uniform / rotated one, which a single area-scale would
+	* distort (gridaco/grida#844 review) — and the guide needs no reprojection.
+	* The caller converts the returned screen delta back to local for the write.
 	*
-	* Honors the global snap toggle (`style.snap_enabled`) and threshold
-	* (`style.snap_threshold_px`, converted to local units by the CTM scale) —
+	* Honors the global snap toggle (`style.snap_enabled`) and threshold —
 	* snap off ⇒ free point dragging, per the issue. Bypassed when
-	* `suppress_point_snap` is set (keyboard nudge). Identity when there are no
-	* neighbors / agents.
+	* `suppress_point_snap` is set (keyboard nudge) or the point hasn't moved
+	* (a pure tap / select must never relocate a control). Identity when there
+	* are no neighbors / agents.
 	*
 	* The shared `SnapSession` drops 0-area rects (its empty-`<g>` "jerk to
 	* origin" defense), so each point is modeled as a sub-pixel square centered
@@ -3327,14 +3588,12 @@ var DomSurface = class DomSurface {
 	* matched same-edge offset carries the same ±eps on both sides), so eps
 	* magnitude is immaterial as long as it stays far below the threshold.
 	*/
-	snap_local_point_delta(raw_dx, raw_dy, agents_local, neighbors_local, ctm) {
+	snap_point_delta_screen(raw_dx, raw_dy, agents_screen, neighbors_screen) {
 		this.point_snap_guide = void 0;
 		const style = this.editor.style;
-		if (this.suppress_point_snap || !style.snap_enabled || agents_local.length === 0 || neighbors_local.length === 0 || raw_dx === 0 && raw_dy === 0) return [raw_dx, raw_dy];
-		const det = ctm.a * ctm.d - ctm.c * ctm.b;
-		const scale = Math.sqrt(Math.abs(det)) || 1;
-		const threshold_local = style.snap_threshold_px / scale;
-		const eps = threshold_local * 1e-6 || 1e-9;
+		if (this.suppress_point_snap || !style.snap_enabled || agents_screen.length === 0 || neighbors_screen.length === 0 || raw_dx === 0 && raw_dy === 0) return [raw_dx, raw_dy];
+		const threshold = style.snap_threshold_px;
+		const eps = threshold * 1e-6 || 1e-9;
 		const to_rect = (p) => ({
 			x: p[0] - eps / 2,
 			y: p[1] - eps / 2,
@@ -3342,23 +3601,23 @@ var DomSurface = class DomSurface {
 			height: eps
 		});
 		const session = new SnapSession({
-			agents: agents_local.map(to_rect),
-			neighbors: neighbors_local.map(to_rect)
+			agents: agents_screen.map(to_rect),
+			neighbors: neighbors_screen.map(to_rect)
 		});
 		const { delta, guide } = session.snap({
 			x: raw_dx,
 			y: raw_dy
 		}, {
 			enabled: true,
-			threshold_px: threshold_local
+			threshold_px: threshold
 		});
 		session.dispose();
-		if (guide) this.point_snap_guide = this.project_local_guide_to_screen(guide, ctm, this.container_offset());
+		this.point_snap_guide = guide;
 		return [delta.x, delta.y];
 	}
 	/** Split a path's baseline vertices into the snap agents (the moving
-	*  sub-selection) and neighbors (everything else) for
-	*  {@link snap_local_point_delta}. Both in path-local space. */
+	*  sub-selection) and neighbors (everything else) for the point-snap pass.
+	*  Both in path-local space; the caller projects them to screen. */
 	vertex_snap_points(model, moving) {
 		const verts = model.snapshot().vertices;
 		const moving_set = new Set(moving);
@@ -3370,31 +3629,6 @@ var DomSurface = class DomSurface {
 			neighbors
 		};
 	}
-	/** Project a point-snap guide from an element's local frame to screen
-	*  CSS-px (the HUD canvas's identity coordinate system), via the element
-	*  CTM + container offset — the same projection `vector_of` uses for
-	*  vertex chrome. The local-frame analog of `project_guide_to_screen`
-	*  (which projects world-space orchestrator guides via the camera). */
-	project_local_guide_to_screen(g, ctm, container_offset) {
-		return {
-			lines: g.lines.map((l) => {
-				const [x1, y1] = project_point_through_ctm(l.x1, l.y1, ctm, container_offset);
-				const [x2, y2] = project_point_through_ctm(l.x2, l.y2, ctm, container_offset);
-				return {
-					...l,
-					x1,
-					y1,
-					x2,
-					y2
-				};
-			}),
-			points: g.points.map(([x, y]) => project_point_through_ctm(x, y, ctm, container_offset)),
-			rules: g.rules.map(([axis, value]) => {
-				const [px, py] = project_point_through_ctm(axis === "x" ? value : 0, axis === "x" ? 0 : value, ctm, container_offset);
-				return [axis, axis === "x" ? px : py];
-			})
-		};
-	}
 	/** Translation from screen/page CSS-px to the HUD's container-identity
 	*  space: subtract the container's page offset, add its scroll. Used at
 	*  every `getScreenCTM` projection boundary (chrome, marquee, point snap)
@@ -3404,24 +3638,45 @@ var DomSurface = class DomSurface {
 		return [-cr.left + this.container.scrollLeft, -cr.top + this.container.scrollTop];
 	}
 	/**
+	* Local-frame drag delta for a point sub-selection (vertices or a `<line>`
+	* endpoint), composed exactly like whole-object translate: **axis-lock then
+	* snap** (translate-pipeline stage order `axis_lock → snap`). The raw delta
+	* and the agent / neighbor points are all in screen space (container
+	* CSS-px):
+	*
+	*   1. Shift axis-lock collapses the lesser axis of the RAW screen delta —
+	*      dominance is the user's intent, decided before snap can perturb it
+	*      (gridaco/grida#844 review: locking the snapped delta could flip the
+	*      axis). The lock is screen-aligned, matching the drag and the guides.
+	*   2. Point snap aligns the locked delta to the sibling points.
+	*   3. The result projects back into the element's local frame via the
+	*      inverse CTM for `translateVertices` / the endpoint write.
+	*
+	* `agents_local` / `neighbors_local` are projected to screen here so the
+	* snap threshold stays user-visible pixels under any element CTM.
+	*/
+	point_drag_local_delta(ctm, raw_screen_dx, raw_screen_dy, agents_local, neighbors_local) {
+		let [sx, sy] = this.axis_lock_point_delta(raw_screen_dx, raw_screen_dy);
+		const offset = this.container_offset();
+		const to_screen = (p) => project_point_through_ctm(p[0], p[1], ctm, offset);
+		[sx, sy] = this.snap_point_delta_screen(sx, sy, agents_local.map(to_screen), neighbors_local.map(to_screen));
+		return ctm.a * ctm.d - ctm.c * ctm.b !== 0 ? project_delta_inverse_ctm(sx, sy, ctm) : [sx, sy];
+	}
+	/**
 	* Local-frame drag delta for a vertex sub-selection, from the HUD's
-	* container-space `dx/dy`. Inverse-projects through the element CTM (so a
-	* path under a scaled `<g>` / nested viewport tracks the cursor 1:1) then
-	* point-snaps to the path's other vertices (#844) — before axis-lock, so
-	* the lock keeps final say on a constrained axis. Identity when the element
-	* has no usable CTM. A tangent-only drag (empty `indices`) yields no snap
-	* agents, so snap is a no-op. Shared by the two vertex-translate handlers;
-	* the caller applies axis-lock and feeds the result to `translateVertices`.
+	* container-space `dx/dy`. Resolves the element CTM and the snap neighbor
+	* set (the path's other vertices), then defers to `point_drag_local_delta`
+	* for the axis-lock → snap → project composition. Falls back to a plain
+	* axis-lock of the raw delta when the element has no usable CTM. A
+	* tangent-only drag (empty `indices`) has no vertex agents, so snap is a
+	* no-op. Shared by the two vertex-translate handlers.
 	*/
 	vertex_drag_local_delta(node_id, baseline_model, indices, dx, dy) {
 		const el = this.element_index.get(node_id);
 		const ctm = el instanceof SVGGraphicsElement && typeof el.getScreenCTM === "function" ? el.getScreenCTM() : null;
-		if (!ctm) return [dx, dy];
-		let local_dx = dx;
-		let local_dy = dy;
-		if (ctm.a * ctm.d - ctm.c * ctm.b !== 0) [local_dx, local_dy] = project_delta_inverse_ctm(dx, dy, ctm);
+		if (!ctm) return this.axis_lock_point_delta(dx, dy);
 		const { agents, neighbors } = this.vertex_snap_points(baseline_model, indices);
-		return this.snap_local_point_delta(local_dx, local_dy, agents, neighbors, ctm);
+		return this.point_drag_local_delta(ctm, dx, dy, agents, neighbors);
 	}
 	/** Snapshot of HUD modifier state mapped to the orchestrator's `GestureModifiers`.
 	*  Pull-at-consume: HUD is the canonical store (see `sync_modifiers`),
@@ -3531,17 +3786,21 @@ var DomSurface = class DomSurface {
 		const target_y = pos_own.y;
 		const base_x = endpoint === "p1" ? initial.x1 : initial.x2;
 		const base_y = endpoint === "p1" ? initial.y1 : initial.y2;
-		let dx = target_x - base_x;
-		let dy = target_y - base_y;
 		const el = this.element_index.get(id);
 		const ctm = el instanceof SVGGraphicsElement && typeof el.getScreenCTM === "function" ? el.getScreenCTM() : null;
+		let final_x;
+		let final_y;
 		if (ctm) {
+			const base_screen = project_point_through_ctm(base_x, base_y, ctm, this.container_offset());
 			const other = endpoint === "p1" ? [initial.x2, initial.y2] : [initial.x1, initial.y1];
-			[dx, dy] = this.snap_local_point_delta(dx, dy, [[base_x, base_y]], [other], ctm);
+			const [ldx, ldy] = this.point_drag_local_delta(ctm, intent.pos[0] - base_screen[0], intent.pos[1] - base_screen[1], [[base_x, base_y]], [other]);
+			final_x = base_x + ldx;
+			final_y = base_y + ldy;
+		} else {
+			const [ldx, ldy] = this.axis_lock_point_delta(target_x - base_x, target_y - base_y);
+			final_x = base_x + ldx;
+			final_y = base_y + ldy;
 		}
-		const [locked_dx, locked_dy] = this.axis_lock_point_delta(dx, dy);
-		const final_x = base_x + locked_dx;
-		const final_y = base_y + locked_dy;
 		const apply = () => {
 			if (endpoint === "p1") {
 				doc.set_attr(id, "x1", String(final_x));
@@ -4015,6 +4274,7 @@ var DomSurface = class DomSurface {
 		}
 		this.vector_edit = null;
 		this.vector_edit_region_baseline = null;
+		this.point_snap_guide = void 0;
 		this.hud.setVectorSelection(null);
 		if (this.current_tool.type === "lasso" || this.current_tool.type === "bend") this.editor.set_tool({ type: "cursor" });
 		this.editor.commands.set_mode("select");
@@ -4286,8 +4546,7 @@ var DomSurface = class DomSurface {
 		}
 		const baseline_d = this.active_preview.initial_d;
 		const indices = this.active_preview.indices;
-		let [local_dx, local_dy] = this.vertex_drag_local_delta(node_id, this.active_preview.baseline_model, indices, intent.dx, intent.dy);
-		[local_dx, local_dy] = this.axis_lock_point_delta(local_dx, local_dy);
+		const [local_dx, local_dy] = this.vertex_drag_local_delta(node_id, this.active_preview.baseline_model, indices, intent.dx, intent.dy);
 		const preview_model = this.active_preview.baseline_model.translateVertices(indices, [local_dx, local_dy]);
 		const target_d = preview_model.toSvgPathD();
 		this.active_preview.preview_model = preview_model;
@@ -4379,8 +4638,7 @@ var DomSurface = class DomSurface {
 			};
 		}
 		const baseline_d = this.active_preview.initial_d;
-		let [local_dx, local_dy] = this.vertex_drag_local_delta(node_id, this.active_preview.baseline_model, indices, intent.dx, intent.dy);
-		[local_dx, local_dy] = this.axis_lock_point_delta(local_dx, local_dy);
+		const [local_dx, local_dy] = this.vertex_drag_local_delta(node_id, this.active_preview.baseline_model, indices, intent.dx, intent.dy);
 		const baseline_model = this.active_preview.baseline_model;
 		const baseline_tangent_abs = this.active_preview.baseline_tangent_abs;
 		let preview_model = indices.length > 0 ? baseline_model.translateVertices(indices, [local_dx, local_dy]) : baseline_model;