From d4b20b95be8f94e291c98b21dff17eb7bc0a1960 Mon Sep 17 00:00:00 2001
From: tfukaza <tfukaza@git.com>
Date: Mon, 27 Jul 2026 21:05:39 -0700
Subject: [PATCH 01/10] =?UTF-8?q?snapline:=20Phase=201a=20=E2=80=94=20dele?=
 =?UTF-8?q?te=20dead=20code=20and=20collapse=20duplicated=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removes code with no reachable callers anywhere in core, adapters, demos,
website, tests, or docs, and collapses public surfaces that offered two ways
to do one thing (SNAPZEN: "there should only be one way to do something").

Unreachable methods: ConnectorMirror.requestDomGeometrySync,
writeAllLinesNow, findClosestConnector, findClosestConnectorAtPoint,
hoverWhileDragging, startPickUpLine, disconnectFromConnector;
LineMirror.setLineStartAtConnector/setLineEndAtConnector;
NodeMirror.setUpPosition.

Unread state: GraphMirror.reconcilerActive (its comment described an
authority gate that no longer exists), ConnectorMirror.#targetConnector and
its accessors, numIncomingLines/numOutgoingLines, the never-populated
LineChangeRequest.originalEvent, and 4 of 7 ReconciliationError codes that
nothing emits.

Dead accessors and no-op overrides: the `callbacks` setters on
ConnectorMirror and NodeMirror (adapters use updateConfig or in-place
mutation), NodeMirror.writeTransformRecursive and
GroupNodeMirror.writeTransformAndLines (pure super passthroughs — the former
carried a comment describing a re-glue it never performed; the re-glue
actually happens via the sibling scheduleLineWrites in
scheduleTransformAndLines), and RectSelectController.onCollideNode.

Collapses LineMirror's seven positioning methods to three: setLineStart,
setLineEnd, setLinePosition, endWorldX/endWorldY, and the
moveLineToConnectorTransform alias are gone in favour of
setLineStartAnchor/setLineEndAnchor/updateAnchors. cloneAnchor was defined
byte-identically in line.ts and connector.ts; connector.ts now imports it.

Removes the query.ts free functions and the package.json subpath exports map
(both gave every symbol a second import path with no consumers). Adds
GraphQuery.selection() first — getSelectedNodes was the only one of the four
with no query() equivalent, so deleting it outright would have removed the
sole public way to read the selection.

Docs updated for every removed symbol.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 SNAPZEN.md                                    |   2 +-
 assets/snapline/core/README.md                |   6 +-
 assets/snapline/core/package.json             |  12 +-
 assets/snapline/core/src/connector.ts         | 151 +-----------------
 assets/snapline/core/src/graph-mirror.ts      |  14 +-
 assets/snapline/core/src/group.ts             |   4 -
 assets/snapline/core/src/index.ts             |   8 +-
 assets/snapline/core/src/line-reconciler.ts   |   3 -
 assets/snapline/core/src/line.ts              |  64 +-------
 assets/snapline/core/src/node.ts              |  26 +--
 assets/snapline/core/src/query.ts             |  29 +---
 assets/snapline/core/src/select.ts            |   2 -
 assets/snapline/react/src/Group.tsx           |   1 -
 docs/snapline/design/current-architecture.md  |  23 +--
 docs/snapline/design/migration-notes.md       |   5 +-
 docs/snapline/guides/02_selection_resize.mdx  |   2 +-
 docs/snapline/reference/react/connector.mdx   |   2 +-
 .../reference/react/controlled-graph.mdx      |   2 +-
 docs/snapline/reference/react/select.mdx      |   2 +-
 docs/snapline/reference/svelte/connector.mdx  |   2 +-
 .../reference/svelte/controlled-graph.mdx     |   2 +-
 docs/snapline/reference/svelte/select.mdx     |   2 +-
 docs/snapline/reference/vanilla/connector.mdx |   5 +-
 .../reference/vanilla/controlled-graph.mdx    |   2 +-
 docs/snapline/reference/vanilla/index.mdx     |   6 +-
 docs/snapline/reference/vanilla/node.mdx      |   2 +-
 docs/snapline/reference/vanilla/select.mdx    |   2 +-
 tests/ut/snapline-connector-config.spec.ts    |   3 +-
 28 files changed, 48 insertions(+), 336 deletions(-)

diff --git a/SNAPZEN.md b/SNAPZEN.md
index 88ccafd..58c48f6 100644
--- a/SNAPZEN.md
+++ b/SNAPZEN.md
@@ -10,5 +10,5 @@
 - The engine owns the representation.
 - When representation must change due to data mutation, request the engine to update.
 
-- No external dependancies.
+- No external dependencies.
 - Prioritize code maintainability, reliability, feature set, browser support, bundle size, in that order.
diff --git a/assets/snapline/core/README.md b/assets/snapline/core/README.md
index 3734882..8fbe0cb 100644
--- a/assets/snapline/core/README.md
+++ b/assets/snapline/core/README.md
@@ -47,9 +47,9 @@ separate. A custom line renderer should mount its SVG/Canvas structure once,
 bind a writer, and call the returned cleanup function when it unmounts.
 
 When another interaction system applies transient transforms inside a node,
-call `connector.requestDomGeometrySync()` for each affected connector. The
-request is coalesced into the next read/write cycle and updates every connected
-line without coupling SnapLine to the external system.
+call `node.remeasureDomGeometry()`. The remeasure is coalesced into the next
+read/write cycle and re-glues every connected line without coupling SnapLine to
+the external system.
 
 Surface strategies decouple connection hit testing from visible connector
 elements. They can activate from a node border, rank shape-specific target
diff --git a/assets/snapline/core/package.json b/assets/snapline/core/package.json
index 37da1a5..74abcf9 100644
--- a/assets/snapline/core/package.json
+++ b/assets/snapline/core/package.json
@@ -11,17 +11,7 @@
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./node": "./src/node.ts",
-    "./connector": "./src/connector.ts",
-    "./line": "./src/line.ts",
-    "./select": "./src/select.ts",
-    "./group": "./src/group.ts",
-    "./placement": "./src/placement.ts",
-    "./query": "./src/query.ts",
-    "./graph-mirror": "./src/graph-mirror.ts",
-    "./line-reconciler": "./src/line-reconciler.ts",
-    "./geometry": "./src/geometry.ts"
+    ".": "./src/index.ts"
   },
   "files": [
     "src",
diff --git a/assets/snapline/core/src/connector.ts b/assets/snapline/core/src/connector.ts
index b9f2c3a..a269254 100644
--- a/assets/snapline/core/src/connector.ts
+++ b/assets/snapline/core/src/connector.ts
@@ -9,9 +9,8 @@ import type {
 } from "@snap-engine/core";
 import { CircleCollider } from "@snap-engine/core/collision";
 import type { NodeMirror } from "./node";
-import { LineMirror, type LineMirrorPhase } from "./line";
-import { getGraphMirror } from "./snapline-globals";
-import { getSourceSurfaces } from "./snapline-globals";
+import { LineMirror, cloneAnchor, type LineMirrorPhase } from "./line";
+import { getGraphMirror, getSourceSurfaces } from "./snapline-globals";
 import { mintDomainId } from "./graph-mirror";
 import type { LineChangeRequest } from "./line-reconciler";
 
@@ -234,7 +233,6 @@ class ConnectorMirror extends ElementObject {
   #state: ConnectorState = ConnectorState.IDLE;
 
   #hitCircle: CircleCollider;
-  #targetConnector: ConnectorMirror | null = null;
   #candidate: ConnectorResolvedHit | null = null;
   #dragLine: LineMirror | null = null;
   #edgePanPointerId: number | null = null;
@@ -328,12 +326,8 @@ class ConnectorMirror extends ElementObject {
     return this.#callbacks;
   }
 
-  set callbacks(callbacks: ConnectorCallbacks) {
-    this.updateConfig({ callbacks });
-  }
-
   // Snapshots, never the internal arrays — topology mutation goes through
-  // connectToConnector/deleteLine/disconnectFromConnector.
+  // the reconciler-only lifecycle operations, never these accessors.
   get outgoingLines(): readonly LineMirror[] {
     return [...this.#outgoingLines];
   }
@@ -342,35 +336,6 @@ class ConnectorMirror extends ElementObject {
     return [...this.#incomingLines];
   }
 
-  get targetConnector(): ConnectorMirror | null {
-    return this.#targetConnector;
-  }
-
-  set targetConnector(value: ConnectorMirror | null) {
-    const resolved = value
-      ? {
-          candidate: {
-            connector: value,
-            hit: {
-              anchor: value.center,
-              distance: 0,
-            },
-          },
-          strategy: value.#defaultAnchorStrategy(),
-          strategyIndex: -1,
-        }
-      : null;
-    this.#setCandidate(resolved);
-  }
-
-  get numIncomingLines(): number {
-    return this.#incomingLines.length;
-  }
-
-  get numOutgoingLines(): number {
-    return this.#outgoingLines.length;
-  }
-
   /**
    * Updates runtime connector policy without replacing the connector or its
    * existing topology. `name` remains construction-only because it keys the
@@ -479,34 +444,6 @@ class ConnectorMirror extends ElementObject {
     };
   }
 
-  requestDomGeometrySync(): boolean {
-    if (!this.element?.isConnected || !this.parent) return false;
-
-    this.schedule(
-      () => {
-        if (!this.element?.isConnected || !this.parent) return;
-        this.measureLocalCenter("READ_1");
-      },
-      {
-        stage: "READ_1",
-        queueId: `${this.id}-dom-geometry`,
-      },
-    );
-    for (const line of [...this.#outgoingLines, ...this.#incomingLines]) {
-      line.schedule(
-        () => {
-          line.moveLineToConnectorTransform();
-          line.writeTransform();
-        },
-        {
-          stage: "WRITE_1",
-          queueId: `${line.id}-dom-geometry`,
-        },
-      );
-    }
-    return true;
-  }
-
   onCursorDown(prop: pointerDownProp): void {
     if (prop.event.button !== 0) return;
     const sourceHit = this.#resolveOwnSourceHit(prop.position, "source-start");
@@ -644,7 +581,7 @@ class ConnectorMirror extends ElementObject {
     for (const line of [...this.#outgoingLines, ...this.#incomingLines]) {
       line.schedule(
         () => {
-          line.moveLineToConnectorTransform();
+          line.updateAnchors();
           line.writeTransform();
         },
         {
@@ -655,13 +592,6 @@ class ConnectorMirror extends ElementObject {
     }
   }
 
-  writeAllLinesNow(): void {
-    for (const line of [...this.#outgoingLines, ...this.#incomingLines]) {
-      line.moveLineToConnectorTransform();
-      line.writeTransform();
-    }
-  }
-
   assignToNode(parent: NodeMirror): void {
     this.parent = parent;
     const parentRef = this.parent;
@@ -681,27 +611,6 @@ class ConnectorMirror extends ElementObject {
     return line;
   }
 
-  findClosestConnector(): void {
-    if (!this.#dragLine) {
-      this.#setCandidate(null);
-      return;
-    }
-    const position = {
-      ...this.#dragLine.endAnchor,
-      cameraX: this.#dragLine.endAnchor.x,
-      cameraY: this.#dragLine.endAnchor.y,
-      screenX: this.#dragLine.endAnchor.x,
-      screenY: this.#dragLine.endAnchor.y,
-    };
-    this.#setCandidate(this.#resolveTargetAtPoint(position, "preview-target"));
-  }
-
-  findClosestConnectorAtPoint(
-    position: ConnectorPoint,
-  ): ConnectorMirror | null {
-    return this.findCandidateAtPoint(position)?.connector ?? null;
-  }
-
   findCandidateAtPoint(
     position: ConnectorPoint,
     phase: "preview-target" | "drop" = "preview-target",
@@ -821,24 +730,6 @@ class ConnectorMirror extends ElementObject {
     });
   }
 
-  hoverWhileDragging(
-    targetConnector: ConnectorMirror,
-  ): [number, number] | void {
-    if (!(targetConnector instanceof ConnectorMirror) || !this.#dragLine) {
-      return;
-    }
-    const anchor = targetConnector.resolveAnchor({
-      line: this.#dragLine,
-      role: "target",
-      phase: "preview-target",
-      peer: this,
-      position: this.geometry.center,
-      hit: this.#candidate?.candidate.hit ?? null,
-      strategy: this.#candidate?.strategy ?? null,
-    });
-    return [anchor.x, anchor.y];
-  }
-
   endDragOutLine(prop: dragEndProp): void {
     if (
       this.#state !== ConnectorState.DRAGGING ||
@@ -1008,15 +899,6 @@ class ConnectorMirror extends ElementObject {
     this.parent?.updateNodeLineList();
   }
 
-  startPickUpLine(line: LineMirror, prop: pointerDownProp): void {
-    this.engine.input.setPointerDragOwner(prop.event.pointerId, line.start);
-    line.start.#arm(prop, {
-      sourceHit: null,
-      sourceStrategy: null,
-      reconnectLine: line,
-    });
-  }
-
   /**
    * Settle a line that already sits in this connector's outgoing list onto
    * its target: run the explicit replacement policy, detach any previous
@@ -1057,17 +939,6 @@ class ConnectorMirror extends ElementObject {
     this.#emitConnect(target, line, origin);
   }
 
-  /** @internal Reconciler/teardown-only. */
-  disconnectFromConnector(
-    connector: ConnectorMirror,
-    reason: DisconnectReason = "programmatic",
-  ): void {
-    const line = this.#outgoingLines.find(
-      (outgoingLine) => outgoingLine.target === connector,
-    );
-    if (line) this.deleteLine(line, reason);
-  }
-
   resolveAnchor({
     line,
     role,
@@ -1221,7 +1092,6 @@ class ConnectorMirror extends ElementObject {
       return;
     }
     this.#candidate = candidate;
-    this.#targetConnector = candidate?.candidate.connector ?? null;
     this.#dragLine?.setCandidate(
       candidate?.candidate ?? null,
       candidate?.strategy ?? null,
@@ -1346,9 +1216,6 @@ class ConnectorMirror extends ElementObject {
     return true;
   }
 
-  /** Strict structural admission for canonical records: roles, capacity
-   * without replacement, and the parallel rule. */
-
   #liveIncomingLines(): LineMirror[] {
     return this.#incomingLines.filter((line) => !line.isDeleteRequested);
   }
@@ -1441,16 +1308,6 @@ function isFinitePoint(point: ConnectorPoint): boolean {
   return Number.isFinite(point.x) && Number.isFinite(point.y);
 }
 
-function cloneAnchor(anchor: ConnectorAnchor): ConnectorAnchor {
-  return {
-    x: anchor.x,
-    y: anchor.y,
-    ...(anchor.normal
-      ? { normal: { x: anchor.normal.x, y: anchor.normal.y } }
-      : {}),
-  };
-}
-
 function asEventPosition(position: ConnectorPoint): eventPosition {
   const value = position as Partial<eventPosition>;
   return {
diff --git a/assets/snapline/core/src/graph-mirror.ts b/assets/snapline/core/src/graph-mirror.ts
index 9055558..88f3079 100644
--- a/assets/snapline/core/src/graph-mirror.ts
+++ b/assets/snapline/core/src/graph-mirror.ts
@@ -16,14 +16,7 @@ export type LineId = string;
  * represent. Derived state: entries drop out when their cause resolves.
  */
 export interface ReconciliationError {
-  code:
-    | "duplicate-id"
-    | "missing-node"
-    | "missing-connector"
-    | "capacity-exceeded"
-    | "connection-rejected"
-    | "identity-changed"
-    | "unrepresentable-line";
+  code: "duplicate-id" | "capacity-exceeded" | "connection-rejected";
   lineId?: LineId;
   nodeId?: NodeId;
   connectorId?: ConnectorId;
@@ -84,11 +77,6 @@ export class GraphMirror {
   // reach it through this slot.
   reconciler: GraphReconcilerLike | null = null;
 
-  /** @internal True while a reconciler pass mutates topology on the
-   * canonical document's behalf — those mutations bypass the authority gate
-   * on imperative commands. */
-  reconcilerActive = false;
-
   /** @internal One in-flight gesture request per engine (gestures are
    * serial); cleared by the next reconciliation pass. */
   pendingGestureRequest = false;
diff --git a/assets/snapline/core/src/group.ts b/assets/snapline/core/src/group.ts
index 728cdb0..df44c92 100644
--- a/assets/snapline/core/src/group.ts
+++ b/assets/snapline/core/src/group.ts
@@ -288,10 +288,6 @@ class GroupNodeMirror extends NodeMirror {
     this.#members = members;
   }
 
-  writeTransformAndLines(): void {
-    super.writeTransformAndLines();
-  }
-
   allowsMembership(node: NodeMirror): boolean {
     const box = this.hitBox.getWorldBoundsSnapshot();
     const nodeBounds = node.hitBox.getWorldBoundsSnapshot();
diff --git a/assets/snapline/core/src/index.ts b/assets/snapline/core/src/index.ts
index 7c985b0..4689649 100644
--- a/assets/snapline/core/src/index.ts
+++ b/assets/snapline/core/src/index.ts
@@ -78,13 +78,7 @@ export type {
   SelectRect,
   SelectStartEvent,
 } from "./select";
-export {
-  getConnectors,
-  getGroupNodes,
-  getNodes,
-  getSelectedNodes,
-  query,
-} from "./query";
+export { query } from "./query";
 export type { GraphQuery } from "./query";
 export { PlacementController } from "./placement";
 export type {
diff --git a/assets/snapline/core/src/line-reconciler.ts b/assets/snapline/core/src/line-reconciler.ts
index a50f0c6..d87a9f6 100644
--- a/assets/snapline/core/src/line-reconciler.ts
+++ b/assets/snapline/core/src/line-reconciler.ts
@@ -40,7 +40,6 @@ export interface LineChangeRequest {
   add: readonly ProposedLine[];
   remove: readonly LineId[];
   update: readonly LineEndpointUpdate[];
-  originalEvent?: PointerEvent;
 }
 
 export interface ControlledGraphCallbacks {
@@ -96,7 +95,6 @@ export class LineReconciler {
     if (this.#reconciling || this.#disposed) return;
     this.#reconciling = true;
     const mirror = this.#mirror;
-    mirror.reconcilerActive = true;
     const errors: ReconciliationError[] = [];
     try {
       // Canonical records by id — duplicates never silently collapse.
@@ -204,7 +202,6 @@ export class LineReconciler {
       }
     } finally {
       this.#reconciling = false;
-      mirror.reconcilerActive = false;
       mirror.pendingGestureRequest = false;
     }
 
diff --git a/assets/snapline/core/src/line.ts b/assets/snapline/core/src/line.ts
index 5e409b4..9ee1a57 100644
--- a/assets/snapline/core/src/line.ts
+++ b/assets/snapline/core/src/line.ts
@@ -87,14 +87,6 @@ class LineMirror extends ElementObject {
     return this.#endAnchor;
   }
 
-  get endWorldX(): number {
-    return this.#endAnchor.x;
-  }
-
-  get endWorldY(): number {
-    return this.#endAnchor.y;
-  }
-
   get phase(): LineMirrorPhase {
     return this.#phase;
   }
@@ -246,46 +238,6 @@ class LineMirror extends ElementObject {
     if (changed) this.#emitStateChange();
   }
 
-  setLineStartAtConnector(): void {
-    const peer = this.target ?? this.candidate?.connector ?? null;
-    const peerGeometry = peer?.geometry ?? null;
-    const position =
-      peerGeometry?.center ?? this.#previewPosition ?? this.endAnchor;
-    const anchor = this.start.resolveAnchor({
-      line: this,
-      role: "source",
-      phase: this.phase,
-      peer,
-      position,
-      hit: this.#sourceHit,
-      strategy: this.#sourceStrategy,
-    });
-    this.setLineStartAnchor(anchor);
-  }
-
-  setLineEndAtConnector(): void {
-    const target = this.target ?? this.candidate?.connector ?? null;
-    if (!target) return;
-    const anchor = target.resolveAnchor({
-      line: this,
-      role: "target",
-      phase: this.phase,
-      peer: this.start,
-      position: this.start.geometry.center,
-      hit: this.#targetHit,
-      strategy: this.#targetStrategy,
-    });
-    this.setLineEndAnchor(anchor);
-  }
-
-  setLineStart(startPositionX: number, startPositionY: number): void {
-    this.setLineStartAnchor({ x: startPositionX, y: startPositionY });
-  }
-
-  setLineEnd(endWorldX: number, endWorldY: number): void {
-    this.setLineEndAnchor({ x: endWorldX, y: endWorldY });
-  }
-
   setLineStartAnchor(anchor: ConnectorAnchor): void {
     this.#startAnchor = cloneAnchor(anchor);
     this.worldTransform = { x: anchor.x, y: anchor.y };
@@ -295,16 +247,6 @@ class LineMirror extends ElementObject {
     this.#endAnchor = cloneAnchor(anchor);
   }
 
-  setLinePosition(
-    startWorldX: number,
-    startWorldY: number,
-    endWorldX: number,
-    endWorldY: number,
-  ): void {
-    this.setLineStart(startWorldX, startWorldY);
-    this.setLineEnd(endWorldX, endWorldY);
-  }
-
   updateAnchors(): void {
     const target = this.target ?? this.candidate?.connector ?? null;
     if (!target) {
@@ -347,16 +289,12 @@ class LineMirror extends ElementObject {
     this.setLineEndAnchor(targetAnchor);
   }
 
-  moveLineToConnectorTransform(): void {
-    this.updateAnchors();
-  }
-
   writeTransform(): void {
     this.#geometryWriter?.(this.geometrySnapshot());
   }
 }
 
-function cloneAnchor(anchor: ConnectorAnchor): ConnectorAnchor {
+export function cloneAnchor(anchor: ConnectorAnchor): ConnectorAnchor {
   return {
     x: anchor.x,
     y: anchor.y,
diff --git a/assets/snapline/core/src/node.ts b/assets/snapline/core/src/node.ts
index 7bd7a70..ce116d5 100644
--- a/assets/snapline/core/src/node.ts
+++ b/assets/snapline/core/src/node.ts
@@ -466,10 +466,6 @@ class NodeMirror extends ElementObject {
     return this.#callbacks;
   }
 
-  set callbacks(callbacks: NodeCallbacks) {
-    this.#callbacks = callbacks;
-  }
-
   get metadata(): SnapLineMetadata {
     return this.#config.metadata;
   }
@@ -537,7 +533,7 @@ class NodeMirror extends ElementObject {
       ...this.getAllIncomingLines(),
     ]);
     for (const line of lines) {
-      line.moveLineToConnectorTransform();
+      line.updateAnchors();
       line.writeTransform();
     }
   }
@@ -735,14 +731,6 @@ class NodeMirror extends ElementObject {
     this.writeLinesNow();
   }
 
-  // Called when a parent (e.g. a group) cascades a transform write down the
-  // transform graph: paint this node + recurse to its transform-children, then
-  // re-glue this node's own lines (the pure-transform cascade can't, since a
-  // line's two ends live on two different nodes).
-  writeTransformRecursive(): void {
-    super.writeTransformRecursive();
-  }
-
   // Transform-only (re)parenting used by group carry: the public/DOM graph is
   // left alone, so members stay flat siblings in the adapter's node list.
   attachTransformToGroup(group: NodeMirror): void {
@@ -1054,18 +1042,6 @@ class NodeMirror extends ElementObject {
       : [...getGraphMirror(this.engine).selection];
   }
 
-  setUpPosition(prop: dragEndProp) {
-    const [dx, dy] = [
-      prop.end.x - this.#mouseDownX,
-      prop.end.y - this.#mouseDownY,
-    ];
-    this.worldTransform = {
-      x: this.#dragStartX + dx,
-      y: this.#dragStartY + dy,
-    };
-    this.scheduleTransformAndLines();
-  }
-
   onUp(prop: pointerUpProp) {
     if (this.#dragPointerId !== prop.event.pointerId) return;
 
diff --git a/assets/snapline/core/src/query.ts b/assets/snapline/core/src/query.ts
index 6c15f49..450502d 100644
--- a/assets/snapline/core/src/query.ts
+++ b/assets/snapline/core/src/query.ts
@@ -29,6 +29,8 @@ export interface GraphQuery {
   groups(): readonly GroupNodeMirror[];
   /** Settled lines; gesture previews are not part of the settled graph. */
   lines(): readonly LineMirror[];
+  /** The settled selection, in selection order. */
+  selection(): readonly NodeMirror[];
   node(id: NodeId): NodeMirror | null;
   connector(id: ConnectorId): ConnectorMirror | null;
   line(id: LineId): LineMirror | null;
@@ -43,35 +45,10 @@ export function query(engine: EngineLike): GraphQuery {
     connectors: () => mirror.connectors,
     groups: () => [...mirror.groups],
     lines: () => mirror.lines,
+    selection: () => [...mirror.selection],
     node: (id) => mirror.node(id),
     connector: (id) => mirror.connector(id),
     line: (id) => mirror.line(id),
     diagnostics: () => mirror.diagnostics(),
   };
 }
-
-// Enumeration delegates to the per-engine GraphMirror registry (components
-// register in their constructors), replacing the old engine-object-table
-// scans. Public signatures unchanged.
-
-export function getNodes(engine: EngineLike): readonly NodeMirror[] {
-  return getGraphMirror(engine).nodes;
-}
-
-export function getConnectors(
-  engine: EngineLike,
-): readonly ConnectorMirror[] {
-  return getGraphMirror(engine).connectors;
-}
-
-export function getGroupNodes(
-  engine: EngineLike,
-): readonly GroupNodeMirror[] {
-  return [...getGraphMirror(engine).groups];
-}
-
-export function getSelectedNodes(
-  engine: EngineLike,
-): readonly NodeMirror[] {
-  return [...getGraphMirror(engine).selection];
-}
diff --git a/assets/snapline/core/src/select.ts b/assets/snapline/core/src/select.ts
index d8e303c..a561b83 100644
--- a/assets/snapline/core/src/select.ts
+++ b/assets/snapline/core/src/select.ts
@@ -80,7 +80,6 @@ class RectSelectController extends ElementObject {
 
     this.#selectHitBox = new RectCollider(engine, this, 0, 0, 0, 0);
     this.#selectHitBox.localTransform = { x: 0, y: 0 };
-    this.#selectHitBox.event.collider.onCollide = this.onCollideNode;
 
     this.addCollider(this.#selectHitBox);
 
@@ -217,7 +216,6 @@ class RectSelectController extends ElementObject {
     if (wasDragging) this.#fireRect(0, 0, false);
   }
 
-  onCollideNode(_hitBox: Collider, _node: Collider): void {}
 }
 
 export { RectSelectController };
diff --git a/assets/snapline/react/src/Group.tsx b/assets/snapline/react/src/Group.tsx
index 0ab0e68..20266ce 100644
--- a/assets/snapline/react/src/Group.tsx
+++ b/assets/snapline/react/src/Group.tsx
@@ -14,7 +14,6 @@ import {
   type GroupMembershipEvent,
   type NodeCallbacks,
   type GeometryChangeEvent,
-  type NodeResizeEvent,
   type ResizeHandle,
   type SnapLineMetadata,
 } from "@snap-engine/snapline";
diff --git a/docs/snapline/design/current-architecture.md b/docs/snapline/design/current-architecture.md
index 9e5b195..7839c25 100644
--- a/docs/snapline/design/current-architecture.md
+++ b/docs/snapline/design/current-architecture.md
@@ -320,9 +320,10 @@ there is one enumeration mechanism.
 `nodes() / connectors() / groups() / lines()` snapshots, `node(id) /
 connector(id) / line(id)` domain-id lookups, and `diagnostics()`. It returns
 live mirrors (whose own mutation surface is constrained separately) and never
-exposes registry sets, topology arrays, or mutation methods. The standalone
-`getNodes` / `getConnectors` / `getGroupNodes` / `getSelectedNodes` helpers
-delegate to the same registry.
+exposes registry sets, topology arrays, or mutation methods. It is the only
+enumeration surface — the standalone `getNodes` / `getConnectors` /
+`getGroupNodes` / `getSelectedNodes` helpers were one-line duplicates of the
+same registry reads and were removed.
 
 ### What stays on global.data, and why
 
@@ -355,9 +356,9 @@ microtask.
 
 Diagnostics are **derived, non-throwing state**: entries drop out when their
 cause resolves. `ReconciliationError` carries a code (`"duplicate-id"`,
-`"missing-node"`, `"missing-connector"`, `"capacity-exceeded"`,
-`"connection-rejected"`, `"identity-changed"`, `"unrepresentable-line"`),
-the offending domain ids, and a message. Sources:
+`"capacity-exceeded"`, `"connection-rejected"`), the offending domain ids, and
+a message. The union lists exactly the codes that are emitted; four further
+codes that were declared but never produced have been removed. Sources:
 
 - registry duplicate-id conflicts (nodes, connectors, settled lines);
 - per-pass reconciliation errors: duplicate record ids in a snapshot, and
@@ -380,15 +381,15 @@ The packages export raw TypeScript source and are pre-1.0.
 | Controllers | `RectSelectController`, `PlacementController` |
 | Controlled graph | `attachControlledGraph`; types `LineRecord`, `CanonicalGraphSnapshot`, `LineChangeRequest`, `ProposedLine`, `LineEndpointUpdate`, `ControlledGraphCallbacks`, `ControlledGraphHandle` |
 | Identity/diagnostics | types `NodeId`, `ConnectorId`, `LineId`, `ReconciliationError`, `GraphBatch` |
-| Queries | `query` (+ `GraphQuery`), `getNodes`, `getConnectors`, `getGroupNodes`, `getSelectedNodes`, `getParentGroup`, `setGroupMembershipResolver`, `resolveConnectorSourceAtPoint` |
+| Queries | `query` (+ `GraphQuery`), `getParentGroup`, `setGroupMembershipResolver`, `resolveConnectorSourceAtPoint` |
 | Config/callback types | `NodeConfig`/`NodeCallbacks` (incl. `GeometryChangeEvent`), `ConnectorConfig`/`ConnectorRules`/`ConnectorCallbacks`/`ConnectionProposal`, line/group/select/placement types |
 
-Package subpaths: `./node`, `./connector`, `./line`, `./select`, `./group`,
-`./placement`, `./query`, `./graph-mirror`, `./line-reconciler`,
-`./geometry`.
+The package has a single entry point (`.`). The per-module subpath exports were
+removed: they gave every symbol a second import path with no consumers, which
+the "only one way to do something" rule forbids.
 
 There is **no imperative public topology API**: `deleteLine()`,
-`deleteAllLines()`, `disconnectFromConnector()`, `createLine()`, and the
+`deleteAllLines()`, `createLine()`, and the
 record-driven settle/retarget/discard methods are `@internal`
 (reconciler/teardown-only), and connecting two connectors imperatively is
 not possible — applications create and remove lines by changing their
diff --git a/docs/snapline/design/migration-notes.md b/docs/snapline/design/migration-notes.md
index f9d1392..ca58aed 100644
--- a/docs/snapline/design/migration-notes.md
+++ b/docs/snapline/design/migration-notes.md
@@ -79,8 +79,9 @@ endpoint-pair edge matching are replaced by the controlled-graph protocol:
 
 ## Imperative topology API removal
 
-`connectToConnector()`, `deleteLine()`, `disconnectFromConnector()`,
-`deleteAllLines()`, and `createLine()` are no longer public. Create and
+`connectToConnector()`, `deleteLine()`, `deleteAllLines()`, and `createLine()`
+are no longer public (`disconnectFromConnector()` has been removed
+outright). Create and
 remove lines by changing your records; `canConnect(target, line?)` remains
 as a read-only admission query. A gesture on an engine with no attached
 graph owner warns and discards the preview.
diff --git a/docs/snapline/guides/02_selection_resize.mdx b/docs/snapline/guides/02_selection_resize.mdx
index ba0cf52..57f7e4f 100644
--- a/docs/snapline/guides/02_selection_resize.mdx
+++ b/docs/snapline/guides/02_selection_resize.mdx
@@ -13,7 +13,7 @@ sectionOrder: 2
 <SnapLineDemo mode="selection" />
 
 `Select` starts a rubber-band gesture on unclaimed background space. Selection
-is reflected in `getSelectedNodes(engine)` and on each node through
+is reflected in `query(engine).selection()` and on each node through
 `data-selected`.
 
 SnapLine does not assign meanings to Shift, Control, or any other key. Use
diff --git a/docs/snapline/reference/react/connector.mdx b/docs/snapline/reference/react/connector.mdx
index dbdc52d..30c64ff 100644
--- a/docs/snapline/reference/react/connector.mdx
+++ b/docs/snapline/reference/react/connector.mdx
@@ -46,5 +46,5 @@ single-incoming connector that rejects extra incoming lines.
 
 > [!WARNING]
 > Topology methods on `ConnectorMirror` such as `createLine`, `deleteLine`,
-> `deleteAllLines`, and `disconnectFromConnector` are `@internal`. Change
+> and `deleteAllLines` are `@internal`. Change
 > topology by updating your canonical `LineRecord`s through `ControlledGraph`.
diff --git a/docs/snapline/reference/react/controlled-graph.mdx b/docs/snapline/reference/react/controlled-graph.mdx
index 0a46d54..741fc78 100644
--- a/docs/snapline/reference/react/controlled-graph.mdx
+++ b/docs/snapline/reference/react/controlled-graph.mdx
@@ -20,7 +20,7 @@ topology. It renders nothing.
 A `LineChangeRequest` carries an `intent`
 (`"connect" | "disconnect" | "replace" | "reconnect"`) plus `add`
 (`ProposedLine[]` with SnapLine-minted ids), `remove` (`LineId[]`), `update`
-(endpoint retargets), and the `originalEvent`. Accept a proposal by applying
+(endpoint retargets). Accept a proposal by applying
 it to your records in the handler's state update — adopting a proposed id
 settles the staged line in place. Reject it by leaving state unchanged; the
 staged line is then removed. The component pushes your updated `lines` prop
diff --git a/docs/snapline/reference/react/select.mdx b/docs/snapline/reference/react/select.mdx
index e79de30..6499f54 100644
--- a/docs/snapline/reference/react/select.mdx
+++ b/docs/snapline/reference/react/select.mdx
@@ -20,7 +20,7 @@ frameworkKey: select
 The marquee element carries `data-snapline-type="selection"`; its geometry is
 written imperatively by the controller, so style it with CSS rather than
 React state. Read the current selection at any time with
-`getSelectedNodes(engine)`.
+`query(engine).selection()`.
 
 Per-node selection behavior (for example toggle-on-shift) is decided by the
 node's `resolveSelectionMode` callback, not by `Select`.
diff --git a/docs/snapline/reference/svelte/connector.mdx b/docs/snapline/reference/svelte/connector.mdx
index 8656ee7..4a80675 100644
--- a/docs/snapline/reference/svelte/connector.mdx
+++ b/docs/snapline/reference/svelte/connector.mdx
@@ -45,5 +45,5 @@ single-incoming connector that rejects extra incoming lines.
 
 > [!WARNING]
 > Topology methods on `ConnectorMirror` such as `createLine`, `deleteLine`,
-> `deleteAllLines`, and `disconnectFromConnector` are `@internal`. Change
+> and `deleteAllLines` are `@internal`. Change
 > topology by updating your canonical `LineRecord`s through `ControlledGraph`.
diff --git a/docs/snapline/reference/svelte/controlled-graph.mdx b/docs/snapline/reference/svelte/controlled-graph.mdx
index f71017b..58f6f8d 100644
--- a/docs/snapline/reference/svelte/controlled-graph.mdx
+++ b/docs/snapline/reference/svelte/controlled-graph.mdx
@@ -20,7 +20,7 @@ topology. It renders nothing.
 A `LineChangeRequest` carries an `intent`
 (`"connect" | "disconnect" | "replace" | "reconnect"`) plus `add`
 (`ProposedLine[]` with SnapLine-minted ids), `remove` (`LineId[]`), `update`
-(endpoint retargets), and the `originalEvent`. Accept a proposal by applying
+(endpoint retargets). Accept a proposal by applying
 it to your records — adopting a proposed id settles the staged line in place.
 Reject it by leaving your records unchanged; the staged line is then removed.
 The component pushes your updated `lines` prop back to the reconciler
diff --git a/docs/snapline/reference/svelte/select.mdx b/docs/snapline/reference/svelte/select.mdx
index 87a9820..58b207c 100644
--- a/docs/snapline/reference/svelte/select.mdx
+++ b/docs/snapline/reference/svelte/select.mdx
@@ -21,7 +21,7 @@ frameworkKey: select
 The marquee element carries `data-snapline-type="selection"`; its geometry is
 written imperatively by the controller, so style it with CSS rather than
 Svelte state. Read the current selection at any time with
-`getSelectedNodes(engine)`.
+`query(engine).selection()`.
 
 Per-node selection behavior (for example toggle-on-shift) is decided by the
 node's `resolveSelectionMode` callback, not by `Select`.
diff --git a/docs/snapline/reference/vanilla/connector.mdx b/docs/snapline/reference/vanilla/connector.mdx
index 20c3b59..5f8c1a3 100644
--- a/docs/snapline/reference/vanilla/connector.mdx
+++ b/docs/snapline/reference/vanilla/connector.mdx
@@ -40,11 +40,10 @@ lines.
 `ConnectorSurfaceStrategy` supplies `sourceHitTest`, `targetHitTest`, and
 `resolveAnchor` for custom shapes. `resolveConnectorSourceAtPoint(engine,
 point)` resolves which connector a pointer position would start a line from.
-Enumerate connectors with `getConnectors(engine)` or
-`query(engine).connectors()`.
+Enumerate connectors with `query(engine).connectors()`.
 
 > [!WARNING]
 > Topology methods on `ConnectorMirror` such as `createLine`, `deleteLine`,
-> `deleteAllLines`, and `disconnectFromConnector` are `@internal` even though
+> and `deleteAllLines` are `@internal` even though
 > they appear in editor autocomplete. Change topology by updating canonical
 > `LineRecord`s through the controlled-graph handle.
diff --git a/docs/snapline/reference/vanilla/controlled-graph.mdx b/docs/snapline/reference/vanilla/controlled-graph.mdx
index 4547233..263ad55 100644
--- a/docs/snapline/reference/vanilla/controlled-graph.mdx
+++ b/docs/snapline/reference/vanilla/controlled-graph.mdx
@@ -28,7 +28,7 @@ framework-mount-led; the snapshot carries only line records.
 `LineChangeRequest` per gesture: an `intent`
 (`"connect" | "disconnect" | "replace" | "reconnect"`) plus `add`
 (`ProposedLine[]` with SnapLine-minted ids), `remove` (`LineId[]`), `update`
-(`LineEndpointUpdate[]`), and the `originalEvent`. Apply the proposal to your
+(`LineEndpointUpdate[]`). Apply the proposal to your
 records and push them back through `setCanonicalGraph` — adopting a proposed
 id settles the staged line in place; pushing unchanged records rejects it.
 
diff --git a/docs/snapline/reference/vanilla/index.mdx b/docs/snapline/reference/vanilla/index.mdx
index 48b2991..73465ea 100644
--- a/docs/snapline/reference/vanilla/index.mdx
+++ b/docs/snapline/reference/vanilla/index.mdx
@@ -28,10 +28,10 @@ atomic proposal to your records.
 
 ## Query helpers
 
-`getNodes`, `getConnectors`, `getGroupNodes`, and `getSelectedNodes` return
-engine-scoped snapshots; `query(engine)` exposes the read-only `GraphQuery`
+`query(engine)` is the single enumeration surface: a read-only `GraphQuery`
 facade with collection snapshots (`nodes()` / `connectors()` / `groups()` /
-`lines()` — settled lines only, and the only public way to enumerate them),
+`selection()` / `lines()` — settled lines only, and the only public way to
+enumerate them),
 identity lookups (`node(id)` / `connector(id)` / `line(id)`), and
 `diagnostics()`. `getParentGroup` returns settled ownership.
 
diff --git a/docs/snapline/reference/vanilla/node.mdx b/docs/snapline/reference/vanilla/node.mdx
index 42e8a6e..003ac09 100644
--- a/docs/snapline/reference/vanilla/node.mdx
+++ b/docs/snapline/reference/vanilla/node.mdx
@@ -37,5 +37,5 @@ Selection state is written to the element as `data-selected="true" | "false"`
 and `data-snapline-state="focus" | "idle"` — style either without extra
 callbacks. Adapters additionally stamp `data-snapline-type="node"`.
 
-Enumerate nodes with `getNodes(engine)` or `query(engine).nodes()`; look one
+Enumerate nodes with `query(engine).nodes()`; look one
 up by domain id with `query(engine).node(id)`.
diff --git a/docs/snapline/reference/vanilla/select.mdx b/docs/snapline/reference/vanilla/select.mdx
index 1d09c6d..681de8a 100644
--- a/docs/snapline/reference/vanilla/select.mdx
+++ b/docs/snapline/reference/vanilla/select.mdx
@@ -19,6 +19,6 @@ receives a `SelectRect` (`x`, `y`, `width`, `height`, `visible`) and writes
 element geometry directly, returning a cleanup function. Destroy the
 controller with `destroy(false)` when tearing down.
 
-Read the settled selection with `getSelectedNodes(engine)`. Per-node
+Read the settled selection with `query(engine).selection()`. Per-node
 selection behavior (replace, toggle, append) is decided by each node's
 `resolveSelectionMode` callback.
diff --git a/tests/ut/snapline-connector-config.spec.ts b/tests/ut/snapline-connector-config.spec.ts
index 7a4b99b..1ccd4c3 100644
--- a/tests/ut/snapline-connector-config.spec.ts
+++ b/tests/ut/snapline-connector-config.spec.ts
@@ -40,7 +40,8 @@ test("line geometry writers are imperative, replaceable, and separate from state
 
   // A stale framework cleanup must not detach the newer renderer.
   unbindFirst();
-  line.setLinePosition(10, 20, 35, 45);
+  line.setLineStartAnchor({ x: 10, y: 20 });
+  line.setLineEndAnchor({ x: 35, y: 45 });
   expect(firstWrites).toEqual([0]);
   expect(secondWrites).toEqual([0]);
   expect(states).toEqual(["source-start"]);

From c89d785d0a5cf71b9a36b3ccf95cd887005da2bc Mon Sep 17 00:00:00 2001
From: tfukaza <tfukaza@git.com>
Date: Mon, 27 Jul 2026 21:13:30 -0700
Subject: [PATCH 02/10] =?UTF-8?q?snapline:=20Phase=201b=20=E2=80=94=20reor?=
 =?UTF-8?q?ganize=20core/src=20around=20the=20public/internal=20seam?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Domain entities and the public contract stay directly under src/; the
registry, reconciler, and global.data machinery move to src/internal/.

Three modules mixed public API with internals, so a straight directory move
would have pushed public API into internal/. They are split on that seam
first:

  types.ts            NEW — pure types, zero imports: NodeId/ConnectorId/
                      LineId, ReconciliationError, GraphBatch, GeometryWriter
                      (absorbing the 2-line geometry.ts), and the whole
                      controlled-graph contract (LineRecord, LineChangeRequest,
                      ProposedLine, LineEndpointUpdate, CanonicalGraphSnapshot,
                      ControlledGraphCallbacks/Handle).
  controlled-graph.ts NEW — attachControlledGraph, the package's headline
                      entry point, previously declared next to an internal
                      global.data accessor bag.
  internal/graph-registry.ts   the registry class + mintDomainId +
                               GraphReconcilerLike (was graph-mirror.ts)
  internal/line-reconciler.ts  the LineReconciler algorithm only
  internal/shared-data.ts      SnapLineSharedData, SourceSurfaceOwner,
                               snapData, getResizeHandles, getSourceSurfaces,
                               getGraphRegistry (was snapline-globals.ts)

Renames that ride along, both fixing names that described the wrong thing:
GraphMirror -> GraphRegistry (it is a registry *of* mirrors, and the suffix
collided with the NodeMirror/ConnectorMirror/LineMirror entity convention —
AGENTS.md already called it "the per-engine registry"), and its accessor
getGraphMirror -> getGraphRegistry. snapline-globals.ts was the only file
named after a storage location rather than a concept.

getGraphRegistry is now exported from index.ts. Four unit specs previously
deep-imported it by relative path while AGENTS.md advertised it as a package
export; they now import from the package root, so the move is invisible to
them.

Also updates the two engine-core comments in src/input.ts that tell
contributors to keep the resizeHandles/sourceSurfaces structural types in
sync with a file that no longer exists under that name.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 assets/snapline/AGENTS.md                     | 38 ++++----
 assets/snapline/core/README.md                | 18 ++--
 assets/snapline/core/src/connector.ts         | 16 ++--
 assets/snapline/core/src/controlled-graph.ts  | 27 ++++++
 assets/snapline/core/src/geometry.ts          |  2 -
 assets/snapline/core/src/group.ts             | 57 ++++++------
 assets/snapline/core/src/index.ts             | 19 ++--
 .../graph-registry.ts}                        | 61 +++++--------
 .../src/{ => internal}/line-reconciler.ts     | 64 ++-----------
 .../shared-data.ts}                           | 61 ++++---------
 assets/snapline/core/src/line.ts              | 18 ++--
 assets/snapline/core/src/node.ts              | 36 ++++----
 assets/snapline/core/src/placement.ts         |  6 +-
 assets/snapline/core/src/query.ts             | 11 +--
 assets/snapline/core/src/select.ts            | 28 +++---
 assets/snapline/core/src/types.ts             | 89 +++++++++++++++++++
 docs/snapline/design/current-architecture.md  | 26 +++---
 .../design/ownership-specification.md         |  8 +-
 .../snapline/design/planned-rearchitecture.md |  2 +-
 docs/snapline/reference/index.mdx             |  4 +-
 src/input.ts                                  |  4 +-
 tests/ut/snapline-connector-config.spec.ts    |  4 +-
 tests/ut/snapline-graph-mirror.spec.ts        | 30 +++----
 tests/ut/snapline-line-reconciler.spec.ts     | 26 +++---
 tests/ut/snapline-perf.spec.ts                |  4 +-
 25 files changed, 334 insertions(+), 325 deletions(-)
 create mode 100644 assets/snapline/core/src/controlled-graph.ts
 delete mode 100644 assets/snapline/core/src/geometry.ts
 rename assets/snapline/core/src/{graph-mirror.ts => internal/graph-registry.ts} (87%)
 rename assets/snapline/core/src/{ => internal}/line-reconciler.ts (79%)
 rename assets/snapline/core/src/{snapline-globals.ts => internal/shared-data.ts} (64%)
 create mode 100644 assets/snapline/core/src/types.ts

diff --git a/assets/snapline/AGENTS.md b/assets/snapline/AGENTS.md
index f1beb97..29349c8 100644
--- a/assets/snapline/AGENTS.md
+++ b/assets/snapline/AGENTS.md
@@ -23,8 +23,13 @@ APIs directly rather than adding compatibility shims.
 - `RectSelectController` - Rectangle selection tool
 - `PlacementController` - Headless pointer-follow placement state machine
 - `attachControlledGraph` - Installs the controlled-graph bridge (LineReconciler)
-- `query` - Read-only `GraphQuery` facade over one engine's graph
-- `snapline-globals` - Typed accessors for the shared `global.data` registries
+- `query` - Read-only `GraphQuery` facade over one engine's graph (the only
+  enumeration surface: `nodes` / `connectors` / `groups` / `selection` / `lines`)
+- `getGraphRegistry` - The per-engine `GraphRegistry`, lazy-created on first use
+
+Everything is reached through the package root (`@snap-engine/snapline`); the
+package declares a single `.` export and no per-module subpaths. Modules under
+`core/src/internal/` are implementation detail — do not deep-import them.
 
 ### @snap-engine/snapline-svelte
 **Location:** `svelte/src/`
@@ -64,11 +69,14 @@ snapline/
 │       ├── group.ts             # GroupNodeMirror
 │       ├── select.ts            # RectSelectController
 │       ├── placement.ts         # PlacementController
-│       ├── graph-mirror.ts      # GraphMirror (per-engine registry + scheduler)
-│       ├── line-reconciler.ts   # LineReconciler + LineRecord/LineChangeRequest
 │       ├── query.ts             # query() GraphQuery facade
-│       ├── geometry.ts          # GeometryWriter type
-│       └── snapline-globals.ts  # global.data accessors + attachControlledGraph
+│       ├── types.ts             # pure public types (identity, diagnostics,
+│       │                        #   GeometryWriter, controlled-graph contract)
+│       ├── controlled-graph.ts  # attachControlledGraph
+│       └── internal/            # not part of the public surface
+│           ├── graph-registry.ts   # GraphRegistry (per-engine registry + scheduler)
+│           ├── line-reconciler.ts  # LineReconciler
+│           └── shared-data.ts      # global.data accessors + getGraphRegistry
 ├── svelte/
 │   ├── package.json
 │   ├── tsconfig.json
@@ -249,10 +257,10 @@ metadata and predicates such as `isValidConnection`, `canContain`, and
 rendering and creation to framework adapters and consumer callbacks.
 Raw input/DOM plumbing stays on the `event.*` slots.
 
-### GraphMirror (engine-scoped registry)
+### GraphRegistry (engine-scoped registry)
 
-`core/src/graph-mirror.ts` is the per-engine registry of every live SnapLine
-mirror, lazy-created by `getGraphMirror(engine)` the first time any mirror
+`core/src/internal/graph-registry.ts` is the per-engine registry of every live SnapLine
+mirror, lazy-created by `getGraphRegistry(engine)` the first time any mirror
 registers (constructors register, `destroy()` unregisters — no adapter
 wiring). It holds the node/connector sets, the settled-line and preview-line
 sets, and the domain-id indexes (`nodesById`/`connectorsById`/`linesById`,
@@ -262,7 +270,7 @@ engine-scoped interaction state (`selection`, `groups`, `resizingNode`,
 the coalescing batch-aware reconciliation scheduler
 (`scheduleReconciliation`/`flush`/`beginBatch`/`runBatch`). GlobalManager is
 application-wide, so the registries live in the
-`SnapLineSharedData.graphMirrors` WeakMap keyed by engine. `query(engine)`
+`SnapLineSharedData.graphRegistries` WeakMap keyed by engine. `query(engine)`
 is the public read-only facade over it: snapshot lists, `node(id)` /
 `connector(id)` / `line(id)` lookups, and `diagnostics()` — never registry
 sets or mutation methods; `query.ts` enumeration helpers delegate to the
@@ -302,12 +310,12 @@ inconsistent one.
 ### Shared global registries
 
 Everything SnapLine stores on the engine's shared `global.data` bag is declared
-in `core/src/snapline-globals.ts` (`SnapLineSharedData`) and accessed through
+in `core/src/internal/shared-data.ts` (`SnapLineSharedData`) and accessed through
 its typed helpers. It now holds only `resizeHandles` and `sourceSurfaces`
 (engine core's `input.ts` reads both duck-typed — it cannot import snapline —
-so keep the shapes in sync) plus the `graphMirrors` WeakMap keying each
-engine to its `GraphMirror`. Selection, groups, and `resizingNode` are
-engine-scoped state on `GraphMirror`, not global arrays.
+so keep the shapes in sync) plus the `graphRegistries` WeakMap keying each
+engine to its `GraphRegistry`. Selection, groups, and `resizingNode` are
+engine-scoped state on `GraphRegistry`, not global arrays.
 
 ### Pointer claims (camera blocking)
 
@@ -342,7 +350,7 @@ boolean remains readable by the camera for third-party writers only.
 - Equal-size group candidates use stable IDs as a deterministic tie-breaker;
   membership cycles are always rejected.
 - Carried group members are moved via transform parenting only — they are never
-  added to the engine's `GraphMirror.selection`, so a group drag does not
+  added to the engine's `GraphRegistry.selection`, so a group drag does not
   alter the selection.
 - `attachTransformToGroup`/`detachTransformFromGroup` are the public
   transform-only reparent seam used by the group carry.
diff --git a/assets/snapline/core/README.md b/assets/snapline/core/README.md
index 8fbe0cb..89b3ff3 100644
--- a/assets/snapline/core/README.md
+++ b/assets/snapline/core/README.md
@@ -13,19 +13,11 @@ node types, validation, persistence, and styling.
 npm install @snap-engine/core @snap-engine/snapline
 ```
 
-## Entry points
-
-- `@snap-engine/snapline`
-- `@snap-engine/snapline/node`
-- `@snap-engine/snapline/connector`
-- `@snap-engine/snapline/line`
-- `@snap-engine/snapline/select`
-- `@snap-engine/snapline/group`
-- `@snap-engine/snapline/placement`
-- `@snap-engine/snapline/query`
-- `@snap-engine/snapline/graph-mirror`
-- `@snap-engine/snapline/line-reconciler`
-- `@snap-engine/snapline/geometry`
+## Entry point
+
+`@snap-engine/snapline` — one entry point, no per-module subpaths. Everything
+public is re-exported from the package root; `core/src/internal/` is
+implementation detail and must not be deep-imported.
 
 ```ts
 import {
diff --git a/assets/snapline/core/src/connector.ts b/assets/snapline/core/src/connector.ts
index a269254..ae7ec51 100644
--- a/assets/snapline/core/src/connector.ts
+++ b/assets/snapline/core/src/connector.ts
@@ -10,9 +10,9 @@ import type {
 import { CircleCollider } from "@snap-engine/core/collision";
 import type { NodeMirror } from "./node";
 import { LineMirror, cloneAnchor, type LineMirrorPhase } from "./line";
-import { getGraphMirror, getSourceSurfaces } from "./snapline-globals";
-import { mintDomainId } from "./graph-mirror";
-import type { LineChangeRequest } from "./line-reconciler";
+import { getGraphRegistry, getSourceSurfaces } from "./internal/shared-data";
+import { mintDomainId } from "./internal/graph-registry";
+import type { LineChangeRequest } from "./types";
 
 export type SnapLineMetadata = Record<string, unknown>;
 export type ConnectionOrigin = "gesture" | "hydration";
@@ -279,7 +279,7 @@ class ConnectorMirror extends ElementObject {
     );
     this.addCollider(this.#hitCircle);
     this.#syncSourceSurfaceRegistration();
-    getGraphMirror(this.engine).registerConnector(this);
+    getGraphRegistry(this.engine).registerConnector(this);
 
     this.event.dom.onAssignDom = () => {
       this.schedule(
@@ -753,7 +753,7 @@ class ConnectorMirror extends ElementObject {
     line.setPhase("drop");
     line.setPreviewPosition(prop.end);
 
-    const mirror = getGraphMirror(this.engine);
+    const mirror = getGraphRegistry(this.engine);
     if (typeof mirror.reconciler?.dispatchLineChangeRequest === "function") {
       this.#endControlledDrop(line, candidate, prop);
       return;
@@ -860,7 +860,7 @@ class ConnectorMirror extends ElementObject {
   }
 
   #dispatchRequest(request: LineChangeRequest): void {
-    const mirror = getGraphMirror(this.engine);
+    const mirror = getGraphRegistry(this.engine);
     if (mirror.pendingGestureRequest) {
       console.warn(
         "SnapLine: a line-change request is already in flight; gestures are serial, so this indicates a stalled adapter push.",
@@ -989,7 +989,7 @@ class ConnectorMirror extends ElementObject {
     }
     this.#resetGesture();
     this.deleteAllLines("teardown");
-    getGraphMirror(this.engine).unregisterConnector(this);
+    getGraphRegistry(this.engine).unregisterConnector(this);
     if (this.parent?._connectors[this.#name] === this) {
       delete this.parent._connectors[this.#name];
     }
@@ -1367,7 +1367,7 @@ export function resolveConnectorSourceAtPoint(
 function registeredConnectors(engine: any): ConnectorMirror[] {
   // The registry is the one connector source — no engine-object-table scan
   // (this runs per pointer move during a connection drag).
-  return getGraphMirror(engine).connectors.filter(
+  return getGraphRegistry(engine).connectors.filter(
     (connector) => !connector.isDeleteRequested,
   );
 }
diff --git a/assets/snapline/core/src/controlled-graph.ts b/assets/snapline/core/src/controlled-graph.ts
new file mode 100644
index 0000000..37f4606
--- /dev/null
+++ b/assets/snapline/core/src/controlled-graph.ts
@@ -0,0 +1,27 @@
+import { LineReconciler } from "./internal/line-reconciler";
+import { getGraphRegistry } from "./internal/shared-data";
+import type { ControlledGraphCallbacks, ControlledGraphHandle } from "./types";
+
+/**
+ * Attach the controlled-graph bridge: declares "controlled" authority,
+ * installs the line reconciler, and returns the handle the application (or
+ * adapter) pushes canonical snapshots through.
+ */
+export function attachControlledGraph(
+  engine: { global: { data: any } | null },
+  callbacks: ControlledGraphCallbacks,
+): ControlledGraphHandle {
+  const registry = getGraphRegistry(engine);
+  if (registry.reconciler) {
+    console.warn(
+      "SnapLine: replacing this engine's existing controlled-graph bridge.",
+    );
+  }
+  const reconciler = new LineReconciler(registry, callbacks);
+  registry.reconciler = reconciler;
+  return {
+    setCanonicalGraph: (snapshot) => reconciler.setCanonicalGraph(snapshot),
+    flush: () => registry.flush(),
+    dispose: () => reconciler.dispose(),
+  };
+}
diff --git a/assets/snapline/core/src/geometry.ts b/assets/snapline/core/src/geometry.ts
deleted file mode 100644
index 30e6ed7..0000000
--- a/assets/snapline/core/src/geometry.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-/** Imperative presentation sink for high-frequency geometry. */
-export type GeometryWriter<T> = (geometry: Readonly<T>) => void;
diff --git a/assets/snapline/core/src/group.ts b/assets/snapline/core/src/group.ts
index df44c92..8cf35fe 100644
--- a/assets/snapline/core/src/group.ts
+++ b/assets/snapline/core/src/group.ts
@@ -1,10 +1,6 @@
-import type {
-  BaseObject,
-  Engine,
-  eventPosition,
-} from "@snap-engine/core";
+import type { BaseObject, Engine, eventPosition } from "@snap-engine/core";
 import { NodeMirror, mergeConfig, type NodeConfig } from "./node";
-import { getGraphMirror } from "./snapline-globals";
+import { getGraphRegistry } from "./internal/shared-data";
 
 export interface GroupConfig extends NodeConfig {
   width?: number;
@@ -51,13 +47,13 @@ const DEFAULT_GROUP_CONFIG = {
   minHeight: 120,
 } satisfies GroupConfig;
 
-type Bounds = ReturnType<
-  NodeMirror["hitBox"]["getWorldBoundsSnapshot"]
->;
+type Bounds = ReturnType<NodeMirror["hitBox"]["getWorldBoundsSnapshot"]>;
 
 function boundsArea(bounds: Bounds): number {
-  return Math.max(0, bounds.right - bounds.left) *
-    Math.max(0, bounds.bottom - bounds.top);
+  return (
+    Math.max(0, bounds.right - bounds.left) *
+    Math.max(0, bounds.bottom - bounds.top)
+  );
 }
 
 function containsBounds(container: Bounds, child: Bounds): boolean {
@@ -80,11 +76,11 @@ function stableGroupOrder(
 }
 
 function groupsForEngine(group: GroupNodeMirror): GroupNodeMirror[] {
-  return [...getGraphMirror(group.engine).groups];
+  return [...getGraphRegistry(group.engine).groups];
 }
 
 function nodesForEngine(group: GroupNodeMirror): NodeMirror[] {
-  return [...getGraphMirror(group.engine).nodes];
+  return [...getGraphRegistry(group.engine).nodes];
 }
 
 function resolveParent(
@@ -125,16 +121,15 @@ function reconcileMembership(
   source: GroupNodeMirror,
   fireDelta: boolean,
 ): void {
-  const mirror = getGraphMirror(source.engine);
+  const mirror = getGraphRegistry(source.engine);
   if (mirror.reconcilingMembership) return;
   mirror.reconcilingMembership = true;
 
   try {
     const groups = groupsForEngine(source);
-    const nextMembers = new Map<
-      GroupNodeMirror,
-      Set<NodeMirror>
-    >(groups.map((group) => [group, new Set()]));
+    const nextMembers = new Map<GroupNodeMirror, Set<NodeMirror>>(
+      groups.map((group) => [group, new Set()]),
+    );
     const nextParents = new Map<NodeMirror, GroupNodeMirror>();
 
     const nodes = nodesForEngine(source);
@@ -162,9 +157,7 @@ function reconcileMembership(
     // Ordinary nodes cannot form membership cycles. They choose the innermost
     // eligible group after the group hierarchy is settled.
     for (const node of ordinaryNodes) {
-      const candidates = groups.filter((group) =>
-        group.allowsMembership(node)
-      );
+      const candidates = groups.filter((group) => group.allowsMembership(node));
       const parent = resolveParent(node, candidates, mirror.membershipResolver);
       if (!parent) continue;
       nextMembers.get(parent)?.add(node);
@@ -206,10 +199,8 @@ function reconcileMembership(
 }
 
 /** Return the node's settled, exclusive direct parent group. */
-export function getParentGroup(
-  node: NodeMirror,
-): GroupNodeMirror | null {
-  return getGraphMirror(node.engine).parentGroups.get(node) ?? null;
+export function getParentGroup(node: NodeMirror): GroupNodeMirror | null {
+  return getGraphRegistry(node.engine).parentGroups.get(node) ?? null;
 }
 
 /**
@@ -220,7 +211,7 @@ export function setGroupMembershipResolver(
   engine: Engine,
   resolver: GroupMembershipResolver,
 ): () => void {
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
   mirror.membershipResolver = resolver;
   const refresh = () => {
     // Any live group re-derives the whole engine's membership forest.
@@ -245,7 +236,11 @@ class GroupNodeMirror extends NodeMirror {
   #groupCallbacks: GroupCallbacks;
   #groupConfig: GroupConfig;
 
-  constructor(engine: any, parent: BaseObject | null, config: GroupConfig = {}) {
+  constructor(
+    engine: any,
+    parent: BaseObject | null,
+    config: GroupConfig = {},
+  ) {
     const merged = mergeConfig<GroupConfig>(
       { ...DEFAULT_GROUP_CONFIG },
       config,
@@ -253,7 +248,7 @@ class GroupNodeMirror extends NodeMirror {
     super(engine, parent, { ...merged, resizable: true });
     this.#groupConfig = merged;
     this.#groupCallbacks = merged.groupCallbacks ?? {};
-    getGraphMirror(this.engine).groups.push(this);
+    getGraphRegistry(this.engine).groups.push(this);
   }
 
   get groupCallbacks(): GroupCallbacks {
@@ -300,9 +295,7 @@ class GroupNodeMirror extends NodeMirror {
 
     // Ordinary nodes use center containment. A nested group must fit completely
     // so partially overlapping peers cannot become a parent/child pair.
-    if (
-      node instanceof GroupNodeMirror ? !boundsContained : !centerContained
-    ) {
+    if (node instanceof GroupNodeMirror ? !boundsContained : !centerContained) {
       return false;
     }
 
@@ -369,7 +362,7 @@ class GroupNodeMirror extends NodeMirror {
   }
 
   destroy(removeElement: boolean = true): void {
-    const mirror = getGraphMirror(this.engine);
+    const mirror = getGraphRegistry(this.engine);
     const index = mirror.groups.indexOf(this);
     if (index >= 0) mirror.groups.splice(index, 1);
     for (const member of this.#carry) member.detachTransformFromGroup();
diff --git a/assets/snapline/core/src/index.ts b/assets/snapline/core/src/index.ts
index 4689649..bd682ea 100644
--- a/assets/snapline/core/src/index.ts
+++ b/assets/snapline/core/src/index.ts
@@ -56,7 +56,6 @@ export type {
   LineMirrorPhase,
   LineStateSnapshot,
 } from "./line";
-export type { GeometryWriter } from "./geometry";
 export {
   GroupNodeMirror,
   getParentGroup,
@@ -92,20 +91,20 @@ export type {
   PlacementSize,
   PlacementSnapshot,
 } from "./placement";
-export type {
-  NodeId,
-  ConnectorId,
-  LineId,
-  ReconciliationError,
-  GraphBatch,
-} from "./graph-mirror";
-export { attachControlledGraph } from "./snapline-globals";
+export { attachControlledGraph } from "./controlled-graph";
+export { getGraphRegistry } from "./internal/shared-data";
 export type {
   CanonicalGraphSnapshot,
+  ConnectorId,
   ControlledGraphCallbacks,
   ControlledGraphHandle,
+  GeometryWriter,
+  GraphBatch,
   LineChangeRequest,
   LineEndpointUpdate,
+  LineId,
   LineRecord,
+  NodeId,
   ProposedLine,
-} from "./line-reconciler";
+  ReconciliationError,
+} from "./types";
diff --git a/assets/snapline/core/src/graph-mirror.ts b/assets/snapline/core/src/internal/graph-registry.ts
similarity index 87%
rename from assets/snapline/core/src/graph-mirror.ts
rename to assets/snapline/core/src/internal/graph-registry.ts
index 88f3079..f392fe5 100644
--- a/assets/snapline/core/src/graph-mirror.ts
+++ b/assets/snapline/core/src/internal/graph-registry.ts
@@ -1,46 +1,28 @@
-import type { ConnectorMirror } from "./connector";
-import type { NodeMirror } from "./node";
-import type { LineMirror } from "./line";
-import type { GroupNodeMirror, GroupMembershipResolver } from "./group";
-import type { LineChangeRequest } from "./line-reconciler";
-
-/** Stable application-facing identity of a canonical node. */
-export type NodeId = string;
-/** Stable application-facing identity of a canonical connector (graph-global). */
-export type ConnectorId = string;
-/** Stable application-facing identity of a canonical line. */
-export type LineId = string;
-
-/**
- * Structured, non-throwing report of a graph state the mirror cannot
- * represent. Derived state: entries drop out when their cause resolves.
- */
-export interface ReconciliationError {
-  code: "duplicate-id" | "capacity-exceeded" | "connection-rejected";
-  lineId?: LineId;
-  nodeId?: NodeId;
-  connectorId?: ConnectorId;
-  message: string;
-  cause?: unknown;
-}
+import type { ConnectorMirror } from "../connector";
+import type { NodeMirror } from "../node";
+import type { LineMirror } from "../line";
+import type { GroupNodeMirror, GroupMembershipResolver } from "../group";
+import type {
+  ConnectorId,
+  GraphBatch,
+  LineChangeRequest,
+  LineId,
+  NodeId,
+  ReconciliationError,
+} from "../types";
 
 // Structural reconciler contract so the registry (and the connector emit
 // sites that reach it) never value-import the reconciler module — it imports
 // the registry accessor, not the reverse.
 export interface GraphReconcilerLike {
   /** Run one reconciliation pass against the latest canonical state. Invoked
-   * by the mirror's coalescing, batch-aware scheduler. */
+   * by the registry's coalescing, batch-aware scheduler. */
   reconcile?(): void;
   /** Forward a gesture's atomic proposal to the application. Present only on
    * the controlled bridge; its presence routes gesture drops. */
   dispatchLineChangeRequest?(request: LineChangeRequest): void;
 }
 
-/** A batch token from `beginBatch()`; `end()` is idempotent. */
-export interface GraphBatch {
-  end(): void;
-}
-
 /** Mint a domain ID for a mirror created without an application-supplied id. */
 export function mintDomainId(
   kind: "node" | "connector" | "line",
@@ -49,10 +31,10 @@ export function mintDomainId(
   return `${kind}-${global.createId()}`;
 }
 
-// Engine-scoped registry of every live SnapLine runtime mirror — the mirror
-// of the whole graph (nodes, connectors, settled lines, previews).
+// Engine-scoped registry of every live SnapLine runtime mirror: nodes,
+// connectors, settled lines, and previews.
 //
-// Created lazily by `getGraphMirror(engine)` the first time any SnapLine
+// Created lazily by `getGraphRegistry(engine)` the first time any SnapLine
 // mirror registers, so it exists exactly when SnapLine is in use — no adapter
 // wiring required, vanilla consumers included. Mirrors register in their
 // constructors and unregister in `destroy()`.
@@ -61,7 +43,7 @@ export function mintDomainId(
 // duplicate ID is never silently allowed to steal the index entry; it stays
 // unindexed and is reported through `diagnostics()` until the conflict
 // resolves (either mirror unregisters).
-export class GraphMirror {
+export class GraphRegistry {
   readonly engine: unknown;
   #nodes = new Set<NodeMirror>();
   #connectors = new Set<ConnectorMirror>();
@@ -170,7 +152,13 @@ export class GraphMirror {
 
   unregisterNode(node: NodeMirror): void {
     this.#nodes.delete(node);
-    this.#unindex(this.#nodesById, node.nodeId, node, this.#nodes, (n) => n.nodeId);
+    this.#unindex(
+      this.#nodesById,
+      node.nodeId,
+      node,
+      this.#nodes,
+      (n) => n.nodeId,
+    );
   }
 
   registerConnector(connector: ConnectorMirror): void {
@@ -318,5 +306,4 @@ export class GraphMirror {
       }
     }
   }
-
 }
diff --git a/assets/snapline/core/src/line-reconciler.ts b/assets/snapline/core/src/internal/line-reconciler.ts
similarity index 79%
rename from assets/snapline/core/src/line-reconciler.ts
rename to assets/snapline/core/src/internal/line-reconciler.ts
index d87a9f6..6a2b20e 100644
--- a/assets/snapline/core/src/line-reconciler.ts
+++ b/assets/snapline/core/src/internal/line-reconciler.ts
@@ -1,59 +1,13 @@
-import type { LineMirror } from "./line";
+import type { LineMirror } from "../line";
 import type {
-  ConnectorId,
-  GraphMirror,
+  CanonicalGraphSnapshot,
+  ControlledGraphCallbacks,
+  LineChangeRequest,
   LineId,
+  LineRecord,
   ReconciliationError,
-} from "./graph-mirror";
-
-/** Canonical committed relationship, owned by the application. */
-export interface LineRecord {
-  id: LineId;
-  fromConnectorId: ConnectorId;
-  toConnectorId: ConnectorId;
-  payload?: unknown;
-}
-
-/** The application-pushed canonical document. Node and connector existence
- * stays framework-mount-led; the snapshot carries the line records. */
-export interface CanonicalGraphSnapshot {
-  lines: readonly LineRecord[];
-}
-
-/** A gesture-created line proposed to the canonical owner. The `id` is
- * minted by SnapLine; adopting it settles the staged mirror in place. */
-export interface ProposedLine {
-  id: LineId;
-  fromConnectorId: ConnectorId;
-  toConnectorId: ConnectorId;
-  payload?: unknown;
-}
-
-export interface LineEndpointUpdate {
-  id: LineId;
-  toConnectorId: ConnectorId;
-}
-
-/** One atomic proposal for the application to change canonical records. */
-export interface LineChangeRequest {
-  intent: "connect" | "disconnect" | "replace" | "reconnect";
-  add: readonly ProposedLine[];
-  remove: readonly LineId[];
-  update: readonly LineEndpointUpdate[];
-}
-
-export interface ControlledGraphCallbacks {
-  onLineChangeRequest(request: LineChangeRequest): void;
-  onDiagnosticsChanged?(diagnostics: readonly ReconciliationError[]): void;
-}
-
-/** What `attachControlledGraph()` hands the adapter. */
-export interface ControlledGraphHandle {
-  setCanonicalGraph(snapshot: CanonicalGraphSnapshot): void;
-  /** Run any pending reconciliation synchronously (vanilla/tests). */
-  flush(): void;
-  dispose(): void;
-}
+} from "../types";
+import type { GraphRegistry } from "./graph-registry";
 
 // Converges the engine's line mirrors onto the cached canonical snapshot.
 // Read-only with respect to canonical state: reconciliation never emits a
@@ -62,13 +16,13 @@ export interface ControlledGraphHandle {
 // endpoints not mounted; silent) or errored (rules violation; structured
 // diagnostic), and is retried when relevant state changes.
 export class LineReconciler {
-  #mirror: GraphMirror;
+  #mirror: GraphRegistry;
   #callbacks: ControlledGraphCallbacks;
   #snapshot: CanonicalGraphSnapshot = { lines: [] };
   #reconciling = false;
   #disposed = false;
 
-  constructor(mirror: GraphMirror, callbacks: ControlledGraphCallbacks) {
+  constructor(mirror: GraphRegistry, callbacks: ControlledGraphCallbacks) {
     this.#mirror = mirror;
     this.#callbacks = callbacks;
   }
diff --git a/assets/snapline/core/src/snapline-globals.ts b/assets/snapline/core/src/internal/shared-data.ts
similarity index 64%
rename from assets/snapline/core/src/snapline-globals.ts
rename to assets/snapline/core/src/internal/shared-data.ts
index c58b0e2..fc5d5b7 100644
--- a/assets/snapline/core/src/snapline-globals.ts
+++ b/assets/snapline/core/src/internal/shared-data.ts
@@ -1,11 +1,6 @@
 import type { RectCollider } from "@snap-engine/core/collision";
 import type { eventPosition } from "@snap-engine/core";
-import { GraphMirror } from "./graph-mirror";
-import {
-  LineReconciler,
-  type ControlledGraphCallbacks,
-  type ControlledGraphHandle,
-} from "./line-reconciler";
+import { GraphRegistry } from "./graph-registry";
 
 /**
  * Structural source-surface contract shared with engine input. Keeping this
@@ -52,12 +47,12 @@ export interface SnapLineSharedData {
   allowCameraControl?: boolean;
   /**
    * Per-engine SnapLine registries. GlobalManager is application-wide, so the
-   * map is keyed by engine; `getGraphMirror` lazy-creates entries the first
+   * map is keyed by engine; `getGraphRegistry` lazy-creates entries the first
    * time a SnapLine mirror registers on that engine. WeakMap so a destroyed
    * engine releases its registry (and every mirror it indexes) — nothing ever
    * enumerates this map.
    */
-  graphMirrors?: WeakMap<object, GraphMirror>;
+  graphRegistries?: WeakMap<object, GraphRegistry>;
 }
 
 /** Typed view over the untyped global data bag (cast at the boundary). */
@@ -71,52 +66,28 @@ export function getResizeHandles(global: { data: any }): RectCollider[] {
   return data.resizeHandles;
 }
 
-export function getSourceSurfaces(global: {
-  data: any;
-}): SourceSurfaceOwner[] {
+export function getSourceSurfaces(global: { data: any }): SourceSurfaceOwner[] {
   const data = snapData(global);
   if (!data.sourceSurfaces) data.sourceSurfaces = [];
   return data.sourceSurfaces;
 }
 
-
-export function getGraphMirror(engine: {
+/** The per-engine registry, lazy-created on first access. */
+export function getGraphRegistry(engine: {
   global: { data: any } | null;
-}): GraphMirror {
+}): GraphRegistry {
   if (!engine.global) {
-    throw new Error("SnapLine: getGraphMirror requires an initialized engine.");
+    throw new Error(
+      "SnapLine: getGraphRegistry requires an initialized engine.",
+    );
   }
   const data = snapData(engine.global);
-  if (!data.graphMirrors) data.graphMirrors = new WeakMap();
+  if (!data.graphRegistries) data.graphRegistries = new WeakMap();
   const key = engine as unknown as object;
-  let mirror = data.graphMirrors.get(key);
-  if (!mirror) {
-    mirror = new GraphMirror(engine);
-    data.graphMirrors.set(key, mirror);
-  }
-  return mirror;
-}
-
-/**
- * Attach the controlled-graph bridge: declares "controlled" authority,
- * installs the line reconciler, and returns the handle the application (or
- * adapter) pushes canonical snapshots through.
- */
-export function attachControlledGraph(
-  engine: { global: { data: any } | null },
-  callbacks: ControlledGraphCallbacks,
-): ControlledGraphHandle {
-  const mirror = getGraphMirror(engine);
-  if (mirror.reconciler) {
-    console.warn(
-      "SnapLine: replacing this engine's existing controlled-graph bridge.",
-    );
+  let registry = data.graphRegistries.get(key);
+  if (!registry) {
+    registry = new GraphRegistry(engine);
+    data.graphRegistries.set(key, registry);
   }
-  const reconciler = new LineReconciler(mirror, callbacks);
-  mirror.reconciler = reconciler;
-  return {
-    setCanonicalGraph: (snapshot) => reconciler.setCanonicalGraph(snapshot),
-    flush: () => mirror.flush(),
-    dispose: () => reconciler.dispose(),
-  };
+  return registry;
 }
diff --git a/assets/snapline/core/src/line.ts b/assets/snapline/core/src/line.ts
index 9ee1a57..dfee90f 100644
--- a/assets/snapline/core/src/line.ts
+++ b/assets/snapline/core/src/line.ts
@@ -7,9 +7,9 @@ import type {
   ConnectorPoint,
   ConnectorSurfaceStrategy,
 } from "./connector";
-import type { GeometryWriter } from "./geometry";
-import { getGraphMirror } from "./snapline-globals";
-import { mintDomainId } from "./graph-mirror";
+import type { GeometryWriter } from "./types";
+import { getGraphRegistry } from "./internal/shared-data";
+import { mintDomainId } from "./internal/graph-registry";
 
 /**
  * Explicit line lifetime. "staged" is a gesture that completed locally and
@@ -63,7 +63,7 @@ class LineMirror extends ElementObject {
     this.#start = parent as unknown as ConnectorMirror;
     this.transformMode = "direct";
     this.lineId = config.id ?? mintDomainId("line", this.global);
-    getGraphMirror(this.engine).registerLine(this);
+    getGraphRegistry(this.engine).registerLine(this);
   }
 
   // Read-only outside the mirror's own lifecycle operations.
@@ -127,13 +127,11 @@ class LineMirror extends ElementObject {
   }
 
   override destroy(removeElement: boolean = true): void {
-    getGraphMirror(this.engine).unregisterLine(this);
+    getGraphRegistry(this.engine).unregisterLine(this);
     super.destroy(removeElement);
   }
 
-  bindGeometryWriter(
-    writer: GeometryWriter<LineGeometrySnapshot>,
-  ): () => void {
+  bindGeometryWriter(writer: GeometryWriter<LineGeometrySnapshot>): () => void {
     this.#geometryWriter = writer;
     writer(this.geometrySnapshot());
     return () => {
@@ -219,7 +217,7 @@ class LineMirror extends ElementObject {
     this.#targetHit = candidate?.hit ?? this.#targetHit;
     this.#candidate = null;
     this.#phase = "connected";
-    getGraphMirror(this.engine).settleLine(this);
+    getGraphRegistry(this.engine).settleLine(this);
     this.updateAnchors();
     this.#emitStateChange();
   }
@@ -234,7 +232,7 @@ class LineMirror extends ElementObject {
     this.#targetStrategy = null;
     this.#targetHit = null;
     this.#phase = "preview-free";
-    getGraphMirror(this.engine).unsettleLine(this);
+    getGraphRegistry(this.engine).unsettleLine(this);
     if (changed) this.#emitStateChange();
   }
 
diff --git a/assets/snapline/core/src/node.ts b/assets/snapline/core/src/node.ts
index ce116d5..2faa439 100644
--- a/assets/snapline/core/src/node.ts
+++ b/assets/snapline/core/src/node.ts
@@ -11,8 +11,12 @@ import type {
   pointerMoveProp,
 } from "@snap-engine/core";
 import { RectCollider } from "@snap-engine/core/collision";
-import { getGraphMirror, getResizeHandles, snapData } from "./snapline-globals";
-import { mintDomainId } from "./graph-mirror";
+import {
+  getGraphRegistry,
+  getResizeHandles,
+  snapData,
+} from "./internal/shared-data";
+import { mintDomainId } from "./internal/graph-registry";
 import type { SnapLineMetadata } from "./connector";
 
 export type ResizeHandle = "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
@@ -400,7 +404,7 @@ class NodeMirror extends ElementObject {
     this.#config = mergeConfig(DEFAULT_NODE_CONFIG, config);
     this.#callbacks = this.#config.callbacks;
     this.nodeId = config.id ?? mintDomainId("node", this.global);
-    getGraphMirror(this.engine).registerNode(this);
+    getGraphRegistry(this.engine).registerNode(this);
     const resizeEnabled =
       config.resizable === true || config.resizeHandles !== undefined;
     this.#resizeHandles = !resizeEnabled
@@ -499,7 +503,7 @@ class NodeMirror extends ElementObject {
       selected: String(selected),
       "snapline-state": selected ? "focus" : "idle",
     };
-    const selectList = getGraphMirror(this.engine).selection;
+    const selectList = getGraphRegistry(this.engine).selection;
     if (selected) {
       if (!selectList.includes(this)) {
         selectList.push(this);
@@ -515,7 +519,7 @@ class NodeMirror extends ElementObject {
     this.#callbacks.onSelectionChange?.({
       node: this,
       selected,
-      selection: [...getGraphMirror(this.engine).selection],
+      selection: [...getGraphRegistry(this.engine).selection],
     });
   }
 
@@ -799,7 +803,7 @@ class NodeMirror extends ElementObject {
     this.engine.input.claimPointer(e.event.pointerId);
 
     this._hasMoved = false;
-    const selection = [...getGraphMirror(this.engine).selection];
+    const selection = [...getGraphRegistry(this.engine).selection];
     this.#selectedAtPointerDown = selection.includes(this);
     this.#pointerSelectionMode =
       this.#callbacks.resolveSelectionMode?.({
@@ -813,7 +817,7 @@ class NodeMirror extends ElementObject {
       this.#pointerSelectionMode === "replace" &&
       !this.#selectedAtPointerDown
     ) {
-      for (const node of [...getGraphMirror(this.engine).selection]) {
+      for (const node of [...getGraphRegistry(this.engine).selection]) {
         node.setSelected(false);
       }
       this.setSelected(true);
@@ -838,7 +842,7 @@ class NodeMirror extends ElementObject {
       this.#mouseDownY = prop.start.y;
       this._hasMoved = true;
       // Guard so releasing a resize over another node doesn't click-select it.
-      getGraphMirror(this.engine).resizingNode = this;
+      getGraphRegistry(this.engine).resizingNode = this;
       return;
     }
     if (!this.#config.lockPosition && this.#config.edgePan) {
@@ -849,7 +853,7 @@ class NodeMirror extends ElementObject {
         (position) => this.#moveSelectionToPointer(position),
       );
     }
-    const selected = [...getGraphMirror(this.engine).selection];
+    const selected = [...getGraphRegistry(this.engine).selection];
     this.#dragRoots = selected.filter(
       (node) =>
         !selected.some(
@@ -976,7 +980,7 @@ class NodeMirror extends ElementObject {
         this.#resizing = false;
         this.#resizeArmed = false;
         this.#activeResizeHandle = null;
-        getGraphMirror(this.engine).resizingNode = null;
+        getGraphRegistry(this.engine).resizingNode = null;
         this.#dragPointerId = null;
         // No target element: dragEndProp carries no originating event. activate()
         // still writes the node and container cursors, and the next pointermove
@@ -989,7 +993,7 @@ class NodeMirror extends ElementObject {
       // this an authored size the stylesheet refused would stick.
       this.remeasureDomGeometry();
       // A resized node's center may have moved into/out of a group.
-      for (const group of getGraphMirror(this.engine).groups) {
+      for (const group of getGraphRegistry(this.engine).groups) {
         if ((group as unknown) !== this) group.refreshMembership(true);
       }
       return;
@@ -1010,7 +1014,7 @@ class NodeMirror extends ElementObject {
     // membership on settle (never at group-drag-start), so the maintained set is
     // current before the next group drag. The graph mirror's type-only group
     // reference keeps node.ts free of any group value import.
-    for (const group of getGraphMirror(this.engine).groups) {
+    for (const group of getGraphRegistry(this.engine).groups) {
       group.refreshMembership(true);
     }
     this.emitGeometryChange();
@@ -1039,7 +1043,7 @@ class NodeMirror extends ElementObject {
   protected getDragCommitNodes(): NodeMirror[] {
     return this.#dragCommitNodes.length
       ? [...this.#dragCommitNodes]
-      : [...getGraphMirror(this.engine).selection];
+      : [...getGraphRegistry(this.engine).selection];
   }
 
   onUp(prop: pointerUpProp) {
@@ -1048,7 +1052,7 @@ class NodeMirror extends ElementObject {
     // pointerUp is dispatched to whatever is under the release point, which for a
     // resize may be a DIFFERENT node than the one being resized. Skip click-select
     // while any resize is settling so releasing a resize doesn't select this node.
-    if (getGraphMirror(this.engine).resizingNode) return;
+    if (getGraphRegistry(this.engine).resizingNode) return;
     if (this.#resizeArmed) {
       this.#resizeArmed = false;
       this.#activeResizeHandle = null;
@@ -1058,7 +1062,7 @@ class NodeMirror extends ElementObject {
 
     if (this._hasMoved == false) {
       if (this.#pointerSelectionMode === "replace") {
-        for (const node of [...getGraphMirror(this.engine).selection]) {
+        for (const node of [...getGraphRegistry(this.engine).selection]) {
           if (node !== this) node.setSelected(false);
         }
         this.setSelected(true);
@@ -1115,7 +1119,7 @@ class NodeMirror extends ElementObject {
       // disconnect — keep the reason contract honest for intent consumers.
       connector.deleteAllLines("teardown");
     }
-    getGraphMirror(this.engine).unregisterNode(this);
+    getGraphRegistry(this.engine).unregisterNode(this);
     this.setSelected(false);
     if (this.#resizeHitBoxes.size > 0) {
       const ownedHandles = new Set(this.#resizeHitBoxes.values());
diff --git a/assets/snapline/core/src/placement.ts b/assets/snapline/core/src/placement.ts
index cbda0d7..a6f6abf 100644
--- a/assets/snapline/core/src/placement.ts
+++ b/assets/snapline/core/src/placement.ts
@@ -1,4 +1,4 @@
-import type { GeometryWriter } from "./geometry";
+import type { GeometryWriter } from "./types";
 
 export interface PlacementPoint {
   x: number;
@@ -76,9 +76,7 @@ export class PlacementController<T> {
   #callbacks: PlacementCallbacks<T>;
   #snapshot: PlacementSnapshot<T>;
   #geometryWriter: GeometryWriter<PlacementGeometrySnapshot> | null = null;
-  #stateCallbacks = new Set<
-    (snapshot: PlacementSnapshot<T>) => void
-  >();
+  #stateCallbacks = new Set<(snapshot: PlacementSnapshot<T>) => void>();
 
   constructor(config: PlacementConfig<T>) {
     this.#config = config;
diff --git a/assets/snapline/core/src/query.ts b/assets/snapline/core/src/query.ts
index 450502d..173bbbf 100644
--- a/assets/snapline/core/src/query.ts
+++ b/assets/snapline/core/src/query.ts
@@ -2,13 +2,8 @@ import type { ConnectorMirror } from "./connector";
 import type { GroupNodeMirror } from "./group";
 import type { LineMirror } from "./line";
 import type { NodeMirror } from "./node";
-import type {
-  ConnectorId,
-  LineId,
-  NodeId,
-  ReconciliationError,
-} from "./graph-mirror";
-import { getGraphMirror } from "./snapline-globals";
+import type { ConnectorId, LineId, NodeId, ReconciliationError } from "./types";
+import { getGraphRegistry } from "./internal/shared-data";
 
 type EngineLike = {
   global: {
@@ -39,7 +34,7 @@ export interface GraphQuery {
 
 /** The read-only query facade for one engine's graph. */
 export function query(engine: EngineLike): GraphQuery {
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
   return {
     nodes: () => mirror.nodes,
     connectors: () => mirror.connectors,
diff --git a/assets/snapline/core/src/select.ts b/assets/snapline/core/src/select.ts
index a561b83..a6cd4d4 100644
--- a/assets/snapline/core/src/select.ts
+++ b/assets/snapline/core/src/select.ts
@@ -6,8 +6,8 @@ import type {
 } from "@snap-engine/core";
 import { RectCollider, Collider } from "@snap-engine/core/collision";
 import { NodeMirror, type SelectionMode } from "./node";
-import { getGraphMirror } from "./snapline-globals";
-import type { GeometryWriter } from "./geometry";
+import { getGraphRegistry } from "./internal/shared-data";
+import type { GeometryWriter } from "./types";
 
 /** World-space rectangle delivered to the registered geometry writer. */
 export interface SelectRect {
@@ -84,7 +84,7 @@ class RectSelectController extends ElementObject {
     this.addCollider(this.#selectHitBox);
 
     // A fresh selection controller starts its engine from an empty selection.
-    getGraphMirror(this.engine).selection.length = 0;
+    getGraphRegistry(this.engine).selection.length = 0;
 
     this.#callbacks = config.callbacks ?? {};
   }
@@ -114,13 +114,10 @@ class RectSelectController extends ElementObject {
       visible,
     };
     this.#callbacks.onRectChange?.({ ...this.#rect });
-    this.schedule(
-      () => this.#geometryWriter?.({ ...this.#rect }),
-      {
-        stage: "WRITE_2",
-        queueId: `${this.id}-geometry`,
-      },
-    );
+    this.schedule(() => this.#geometryWriter?.({ ...this.#rect }), {
+      stage: "WRITE_2",
+      queueId: `${this.id}-geometry`,
+    });
   }
 
   onGlobalCursorDown(prop: pointerDownProp): void {
@@ -135,10 +132,10 @@ class RectSelectController extends ElementObject {
     if (this.#callbacks.canStart?.(startEvent) === false) return;
     this.#selectionMode =
       this.#callbacks.resolveSelectionMode?.(startEvent) ?? "replace";
-    this.#baselineSelection = new Set(getGraphMirror(this.engine).selection);
+    this.#baselineSelection = new Set(getGraphRegistry(this.engine).selection);
     if (this.#selectionMode === "replace") {
       // setSelected(false) removes each node from the engine's selection.
-      for (let node of [...getGraphMirror(this.engine).selection]) {
+      for (let node of [...getGraphRegistry(this.engine).selection]) {
         node.setSelected(false);
       }
     }
@@ -154,7 +151,7 @@ class RectSelectController extends ElementObject {
     this.#fireRect(0, 0, true);
     this.#callbacks.onSelectionChange?.({
       select: this,
-      selection: [...getGraphMirror(this.engine).selection],
+      selection: [...getGraphRegistry(this.engine).selection],
     });
 
     this.#selectHitBox.event.collider.onBeginContact = (
@@ -170,7 +167,7 @@ class RectSelectController extends ElementObject {
         );
         this.#callbacks.onSelectionChange?.({
           select: this,
-          selection: [...getGraphMirror(this.engine).selection],
+          selection: [...getGraphRegistry(this.engine).selection],
         });
       }
     };
@@ -183,7 +180,7 @@ class RectSelectController extends ElementObject {
         node.setSelected(this.#baselineSelection.has(node));
         this.#callbacks.onSelectionChange?.({
           select: this,
-          selection: [...getGraphMirror(this.engine).selection],
+          selection: [...getGraphRegistry(this.engine).selection],
         });
       }
     };
@@ -215,7 +212,6 @@ class RectSelectController extends ElementObject {
     this.#selectHitBox.event.collider.onEndContact = null;
     if (wasDragging) this.#fireRect(0, 0, false);
   }
-
 }
 
 export { RectSelectController };
diff --git a/assets/snapline/core/src/types.ts b/assets/snapline/core/src/types.ts
new file mode 100644
index 0000000..7bea0ef
--- /dev/null
+++ b/assets/snapline/core/src/types.ts
@@ -0,0 +1,89 @@
+/**
+ * Pure type declarations shared across SnapLine — identity, diagnostics, the
+ * geometry-writer signature, and the controlled-graph contract the application
+ * negotiates through.
+ *
+ * This module deliberately imports nothing. Everything here is part of the
+ * public surface, so it stays at the top level while the machinery that
+ * consumes it lives under `internal/`.
+ */
+
+/** Stable application-facing identity of a canonical node. */
+export type NodeId = string;
+/** Stable application-facing identity of a canonical connector (graph-global). */
+export type ConnectorId = string;
+/** Stable application-facing identity of a canonical line. */
+export type LineId = string;
+
+/**
+ * Sink for high-frequency geometry: core hands over numbers, the consumer owns
+ * the element. Used by lines, selection, and placement.
+ */
+export type GeometryWriter<T> = (geometry: Readonly<T>) => void;
+
+/**
+ * Structured, non-throwing report of a graph state the registry cannot
+ * represent. Derived state: entries drop out when their cause resolves.
+ */
+export interface ReconciliationError {
+  code: "duplicate-id" | "capacity-exceeded" | "connection-rejected";
+  lineId?: LineId;
+  nodeId?: NodeId;
+  connectorId?: ConnectorId;
+  message: string;
+  cause?: unknown;
+}
+
+/** A batch token from `beginBatch()`; `end()` is idempotent. */
+export interface GraphBatch {
+  end(): void;
+}
+
+/** Canonical committed relationship, owned by the application. */
+export interface LineRecord {
+  id: LineId;
+  fromConnectorId: ConnectorId;
+  toConnectorId: ConnectorId;
+  payload?: unknown;
+}
+
+/** The application-pushed canonical document. Node and connector existence
+ * stays framework-mount-led; the snapshot carries the line records. */
+export interface CanonicalGraphSnapshot {
+  lines: readonly LineRecord[];
+}
+
+/** A gesture-created line proposed to the canonical owner. The `id` is
+ * minted by SnapLine; adopting it settles the staged mirror in place. */
+export interface ProposedLine {
+  id: LineId;
+  fromConnectorId: ConnectorId;
+  toConnectorId: ConnectorId;
+  payload?: unknown;
+}
+
+export interface LineEndpointUpdate {
+  id: LineId;
+  toConnectorId: ConnectorId;
+}
+
+/** One atomic proposal for the application to change canonical records. */
+export interface LineChangeRequest {
+  intent: "connect" | "disconnect" | "replace" | "reconnect";
+  add: readonly ProposedLine[];
+  remove: readonly LineId[];
+  update: readonly LineEndpointUpdate[];
+}
+
+export interface ControlledGraphCallbacks {
+  onLineChangeRequest(request: LineChangeRequest): void;
+  onDiagnosticsChanged?(diagnostics: readonly ReconciliationError[]): void;
+}
+
+/** What `attachControlledGraph()` hands the adapter. */
+export interface ControlledGraphHandle {
+  setCanonicalGraph(snapshot: CanonicalGraphSnapshot): void;
+  /** Run any pending reconciliation synchronously (vanilla/tests). */
+  flush(): void;
+  dispose(): void;
+}
diff --git a/docs/snapline/design/current-architecture.md b/docs/snapline/design/current-architecture.md
index 7839c25..d23bbf3 100644
--- a/docs/snapline/design/current-architecture.md
+++ b/docs/snapline/design/current-architecture.md
@@ -56,7 +56,7 @@ flowchart TB
   ADAPTER["React / Svelte adapters<br/><b>mount lifecycle + ControlledGraph bridge</b>"]
   RECON["LineReconciler<br/><b>converges line mirrors onto the snapshot</b>"]
   MIRRORS["Runtime mirrors<br/><b>NodeMirror, ConnectorMirror, LineMirror, GroupNodeMirror</b>"]
-  REGISTRY["GraphMirror (per engine)<br/><b>registries, ids, selection, groups, scheduler</b>"]
+  REGISTRY["GraphRegistry (per engine)<br/><b>registries, ids, selection, groups, scheduler</b>"]
   ENGINE["SnapEngine mechanics<br/><b>input, collision, transforms, scheduling</b>"]
   DOM["Framework-owned DOM"]
 
@@ -82,7 +82,7 @@ application's records and mounted components.
 
 1. The adapter renders a `Node`/`Connector` from application state and
    constructs the mirror; the constructor registers it with the engine's
-   `GraphMirror` under its domain id (`config.id` or minted).
+   `GraphRegistry` under its domain id (`config.id` or minted).
 2. The adapter assigns the committed DOM element and calls
    `remeasureDomGeometry()` (nodes) / relies on the connector's scheduled
    local-center measurement. A connector may stay headless (virtual) and use
@@ -170,7 +170,7 @@ Key properties:
   rejection-by-inaction all resolve from the next snapshot — rejection needs
   no code path.
 - **Gestures are serial.** One in-flight request per engine
-  (`GraphMirror.pendingGestureRequest`); a second dispatch before the pass
+  (`GraphRegistry.pendingGestureRequest`); a second dispatch before the pass
   warns about a stalled adapter push.
 - **No graph owner, no gesture.** A drop on an engine without an attached
   reconciler warns and discards the preview — there is no document to
@@ -278,7 +278,7 @@ never round-trip the framework:
 
 Selection is logically SnapLine-owned — core behaviors such as multi-node
 dragging need the selected set synchronously — and **engine-scoped** on
-`GraphMirror.selection`. `setSelected()` maintains the list, writes
+`GraphRegistry.selection`. `setSelected()` maintains the list, writes
 `data-selected`/`data-snapline-state`, and emits `onSelectionChange`. The
 framework is the visual owner; the consumer supplies pointer policy through
 `resolveSelectionMode` (SnapLine owns no modifier keys). `RectSelectController`
@@ -294,9 +294,9 @@ resize settles.
 
 ## Registries
 
-### GraphMirror (per engine)
+### GraphRegistry (per engine)
 
-`getGraphMirror(engine)` lazy-creates the engine-scoped registry the first
+`getGraphRegistry(engine)` lazy-creates the engine-scoped registry the first
 time any mirror registers (constructors register, `destroy()` unregisters —
 no adapter wiring). It holds:
 
@@ -327,13 +327,13 @@ same registry reads and were removed.
 
 ### What stays on global.data, and why
 
-`SnapLineSharedData` (typed by `snapline-globals.ts`) now holds only:
+`SnapLineSharedData` (typed by `internal/shared-data.ts`) now holds only:
 
 - `resizeHandles` and `sourceSurfaces` — engine core's `input.ts` duck-reads
   these to route pointerdowns to resize hitboxes and headless source
   surfaces (engine core cannot import snapline, so the contract is
   structural and lives on the shared bag);
-- the `graphMirrors` WeakMap keying each engine to its `GraphMirror`
+- the `graphRegistries` WeakMap keying each engine to its `GraphRegistry`
   (GlobalManager is application-wide; the WeakMap lets a destroyed engine
   release its registry);
 - the deprecated `allowCameraControl` boolean for third-party camera
@@ -342,7 +342,7 @@ same registry reads and were removed.
 ## Scheduler and batching
 
 All reconciliation triggers funnel through
-`GraphMirror.scheduleReconciliation()`: one microtask pass per burst, so a
+`GraphRegistry.scheduleReconciliation()`: one microtask pass per burst, so a
 bulk mount of 100 nodes runs one pass, not one per connector.
 `beginBatch()` opens a nestable bulk boundary — no partial pass runs until
 the outermost idempotent `end()`, which schedules one final pass if anything
@@ -393,7 +393,7 @@ There is **no imperative public topology API**: `deleteLine()`,
 record-driven settle/retarget/discard methods are `@internal`
 (reconciler/teardown-only), and connecting two connectors imperatively is
 not possible — applications create and remove lines by changing their
-records. `GraphMirror` and `LineReconciler` are internal classes reached
+records. `GraphRegistry` and `LineReconciler` are internal classes reached
 only through `attachControlledGraph` and `query`. `LineMirror` state is
 getter-backed: `start`, `target`, `payload`, `phase`, `candidate`, and
 anchors are read-only publicly, and `LineMirrorPhase` is
@@ -421,7 +421,7 @@ types). Adapter contracts:
 | ----------------------------- | ------------------------------ | ---------------------------------------------------------------------- |
 | Domain node/connector records | Application/framework          | Expressed by mounting components with stable `id` props                |
 | Canonical line records        | Application                    | `LineRecord[]` pushed via `setCanonicalGraph`; SnapLine never edits it  |
-| Mounted mirrors               | Framework lifecycle            | Constructors register with `GraphMirror`; `destroy()` unregisters       |
+| Mounted mirrors               | Framework lifecycle            | Constructors register with `GraphRegistry`; `destroy()` unregisters       |
 | Settled line mirrors          | LineReconciler                 | Derived from records; preserved by stable `lineId`                      |
 | Preview/staged lines          | SnapLine gesture               | Ephemeral; staged outcome awaits the canonical decision                 |
 | Gesture outcome               | Application                    | One atomic `LineChangeRequest`; adopt the proposed id to settle in place |
@@ -437,7 +437,7 @@ types). Adapter contracts:
 | Concern                                  | Primary implementation                          |
 | ---------------------------------------- | ----------------------------------------------- |
 | Public exports                           | `assets/snapline/core/src/index.ts`             |
-| Engine-scoped registry, ids, scheduler   | `assets/snapline/core/src/graph-mirror.ts`      |
+| Engine-scoped registry, ids, scheduler   | `assets/snapline/core/src/internal/graph-registry.ts`      |
 | Controlled line reconciliation, records  | `assets/snapline/core/src/line-reconciler.ts`   |
 | Connector rules, gestures, admission     | `assets/snapline/core/src/connector.ts`         |
 | Node lifecycle, drag/resize, geometry    | `assets/snapline/core/src/node.ts`              |
@@ -446,7 +446,7 @@ types). Adapter contracts:
 | Rectangle selection                      | `assets/snapline/core/src/select.ts`            |
 | Placement state machine                  | `assets/snapline/core/src/placement.ts`         |
 | Read-only query facade                   | `assets/snapline/core/src/query.ts`             |
-| Shared global.data + attachControlledGraph | `assets/snapline/core/src/snapline-globals.ts` |
+| Shared global.data + attachControlledGraph | `assets/snapline/core/src/internal/shared-data.ts` |
 | Geometry writer type                     | `assets/snapline/core/src/geometry.ts`          |
 | Svelte adapters (incl. ControlledGraph)  | `assets/snapline/svelte/src/*.svelte`           |
 | React adapters (incl. ControlledGraph)   | `assets/snapline/react/src/*.tsx`               |
diff --git a/docs/snapline/design/ownership-specification.md b/docs/snapline/design/ownership-specification.md
index 3ac6e29..ed5b140 100644
--- a/docs/snapline/design/ownership-specification.md
+++ b/docs/snapline/design/ownership-specification.md
@@ -703,7 +703,7 @@ document, structured diagnostics, and engine scoping are all shipped:
 | Hydration/policy separation         | Conforms       | Strict record admission never evicts; refusals become structured diagnostics      |
 | Atomic replacement request          | Conforms       | One `LineChangeRequest`; evictions ride the `"replace"` intent                    |
 | Read-only topology views            | Conforms       | Snapshot getters; getter-backed `LineMirror`; topology mutators are `@internal`   |
-| Unified mirror registry             | Conforms       | `GraphMirror` indexes nodes, connectors, and settled lines; one enumeration path  |
+| Unified mirror registry             | Conforms       | `GraphRegistry` indexes nodes, connectors, and settled lines; one enumeration path  |
 | Engine isolation                    | Conforms       | Selection, groups, `resizingNode`, and the reconciler are engine-scoped           |
 | Diagnostics                         | Conforms       | Derived `ReconciliationError`s via `onDiagnosticsChanged` / `query().diagnostics()` |
 | Geometry authority                  | Decided        | SnapLine-owned visual cue; one batched `onGeometryChanged` observation, no controlled-geometry mode |
@@ -720,10 +720,10 @@ is implemented:
    supported when both endpoints set `allowParallel`.
 3. Connector identity? Typed `id` props/config (graph-global `connectorId`);
    the `identity(connector)` callback is gone.
-4. `NodeManager`? Became the internal `GraphMirror` registry with the public
+4. `NodeManager`? Became the internal `GraphRegistry` registry with the public
    read-only `GraphQuery` facade (`query(engine)`).
 5. Central line registry? Yes — settled lines index by `lineId` in
-   `GraphMirror`; `query(engine).line(id)` looks them up.
+   `GraphRegistry`; `query(engine).line(id)` looks them up.
 6. Hydration policy? Strict admission that never evicts, with structured
    `ReconciliationError` diagnostics; canonical records are never rewritten.
 7. Atomic replace/reconnect? Yes — one `LineChangeRequest` per gesture with
@@ -734,7 +734,7 @@ is implemented:
 9. Geometry props? Neither controlled nor negotiated — geometry is
    SnapLine-owned and observed through one batched `onGeometryChanged`.
 10. Selection and groups? They remain SnapLine-owned derived state,
-    engine-scoped on `GraphMirror` (framework owns the visuals).
+    engine-scoped on `GraphRegistry` (framework owns the visuals).
 11. Mixed controlled/unmanaged engines? Moot — the unmanaged mode was
     eliminated; vanilla consumers drive the same controlled contract from a
     plain graph-owner module.
diff --git a/docs/snapline/design/planned-rearchitecture.md b/docs/snapline/design/planned-rearchitecture.md
index bc59132..c24e7fe 100644
--- a/docs/snapline/design/planned-rearchitecture.md
+++ b/docs/snapline/design/planned-rearchitecture.md
@@ -15,7 +15,7 @@ Related:
 
 This document is a delta from the current implementation and contains only
 work that has not landed. Everything previously specified here — the
-vocabulary and `*Mirror` renames, stable domain identity, the `GraphMirror`
+vocabulary and `*Mirror` renames, stable domain identity, the `GraphRegistry`
 registry, engine scoping, `ConnectorRules`, the controlled line protocol
 (`attachControlledGraph` / `setCanonicalGraph` / `onLineChangeRequest`),
 batching, diagnostics, the `ControlledGraph` adapters, property-propagation
diff --git a/docs/snapline/reference/index.mdx b/docs/snapline/reference/index.mdx
index b007299..b4814c7 100644
--- a/docs/snapline/reference/index.mdx
+++ b/docs/snapline/reference/index.mdx
@@ -16,5 +16,5 @@ React pages.
 | `@snap-engine/snapline-svelte` | `Node`, `Connector`, `Line`, `Select`, `Group`, `Placement`, `ControlledGraph` |
 | `@snap-engine/snapline-react` | `Engine`, `Node`, `Connector`, `Line`, `Select`, `Group`, `Placement`, `ControlledGraph` |
 
-Supported core subpaths are `node`, `connector`, `line`, `select`, `group`,
-`placement`, `query`, `graph-mirror`, `line-reconciler`, and `geometry`.
+The core package has a single entry point and no subpaths — import everything
+from `@snap-engine/snapline`.
diff --git a/src/input.ts b/src/input.ts
index dd135a4..ed2c2d5 100644
--- a/src/input.ts
+++ b/src/input.ts
@@ -1015,7 +1015,7 @@ class InputControl {
   // hitbox's object (collider.parent), so the whole gesture flows to it through
   // the normal owner dispatch. Synchronous point test — independent of the
   // frame-delayed collision sweep. The registry shape is declared in
-  // snapline's snapline-globals.ts (engine core cannot import snapline, hence
+  // snapline's internal/shared-data.ts (engine core cannot import snapline, hence
   // the structural type here) — keep the two in sync.
   #resolveResizeOwner(position: eventPosition): ElementObject | null {
     const handles = this.global?.data?.resizeHandles as
@@ -1038,7 +1038,7 @@ class InputControl {
   // Headless connector surfaces can extend beyond their parent node's DOM box.
   // SnapLine registers them in global.data so pointerdown ownership can be
   // resolved geometrically before composedPath routing. The registry shape is
-  // declared in snapline-globals.ts (engine core cannot import SnapLine).
+  // declared in internal/shared-data.ts (engine core cannot import SnapLine).
   #resolveSourceSurfaceOwner(position: eventPosition): ElementObject | null {
     const surfaces = this.global?.data?.sourceSurfaces as
       | Array<{
diff --git a/tests/ut/snapline-connector-config.spec.ts b/tests/ut/snapline-connector-config.spec.ts
index 1ccd4c3..9729a46 100644
--- a/tests/ut/snapline-connector-config.spec.ts
+++ b/tests/ut/snapline-connector-config.spec.ts
@@ -7,7 +7,7 @@ import {
   PlacementController,
   type ConnectorSurfaceStrategy,
 } from "../../assets/snapline/core/src";
-import { getGraphMirror } from "../../assets/snapline/core/src/snapline-globals";
+import { getGraphRegistry } from "../../assets/snapline/core/src";
 
 import {
   createControlledHarness,
@@ -157,7 +157,7 @@ test("connector config updates stay live without replacing topology", () => {
     ],
   });
   handle.flush();
-  const existingLine = getGraphMirror(engine).line("cfg-line")!;
+  const existingLine = getGraphRegistry(engine).line("cfg-line")!;
   expect(source.outgoingLines).toEqual([existingLine]);
 
   const strategy: ConnectorSurfaceStrategy = {
diff --git a/tests/ut/snapline-graph-mirror.spec.ts b/tests/ut/snapline-graph-mirror.spec.ts
index 08820ff..01a9f46 100644
--- a/tests/ut/snapline-graph-mirror.spec.ts
+++ b/tests/ut/snapline-graph-mirror.spec.ts
@@ -4,7 +4,7 @@ import {
   GroupNodeMirror,
   NodeMirror,
 } from "../../assets/snapline/core/src";
-import { getGraphMirror } from "../../assets/snapline/core/src/snapline-globals";
+import { getGraphRegistry } from "../../assets/snapline/core/src";
 import {
   armGesture,
   createControlledHarness,
@@ -36,7 +36,7 @@ test("mirrors mint domain ids when none is supplied and honor supplied ids", ()
 
 test("the graph mirror indexes registrations and drops them on destroy", () => {
   const { engine } = createEngineHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
   const node = new NodeMirror(engine, null, { id: "n1" });
   const connector = new ConnectorMirror(engine, node, {
     id: "c1",
@@ -58,7 +58,7 @@ test("the graph mirror indexes registrations and drops them on destroy", () => {
 
 test("duplicate ids never steal the index: first wins, diagnostic until resolved", () => {
   const { engine } = createEngineHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
   const first = new NodeMirror(engine, null, { id: "dup" });
   const second = new NodeMirror(engine, null, { id: "dup" });
 
@@ -82,7 +82,7 @@ test("lines move preview -> settled -> preview and unregister on destroy", () =>
   const restore = installObserverStubs();
   try {
     const { engine, handle } = createControlledHarness();
-    const mirror = getGraphMirror(engine);
+    const mirror = getGraphRegistry(engine);
     const { source } = mountConnectedPair(engine);
 
     // A freshly minted line is a preview, not part of the settled graph.
@@ -121,8 +121,8 @@ test("each engine on a shared GlobalManager gets its own isolated registry", ()
   const nodeA = new NodeMirror(engine, null, { id: "shared-id" });
   const nodeB = new NodeMirror(sibling, null, { id: "shared-id" });
 
-  const mirrorA = getGraphMirror(engine);
-  const mirrorB = getGraphMirror(sibling);
+  const mirrorA = getGraphRegistry(engine);
+  const mirrorB = getGraphRegistry(sibling);
   expect(mirrorA).not.toBe(mirrorB);
   // Same domain id on different engines is not a conflict.
   expect(mirrorA.node("shared-id")).toBe(nodeA);
@@ -141,14 +141,14 @@ test("selection is engine-scoped and removal is identity-based", () => {
 
   nodeA.setSelected(true);
   nodeB.setSelected(true);
-  expect(getGraphMirror(engine).selection).toEqual([nodeA]);
-  expect(getGraphMirror(sibling).selection).toEqual([nodeB]);
+  expect(getGraphRegistry(engine).selection).toEqual([nodeA]);
+  expect(getGraphRegistry(sibling).selection).toEqual([nodeB]);
 
   // Identity-based removal: deselecting A must not evict the same-id node on
   // the sibling engine (the old shared list filtered by id).
   nodeA.setSelected(false);
-  expect(getGraphMirror(engine).selection).toEqual([]);
-  expect(getGraphMirror(sibling).selection).toEqual([nodeB]);
+  expect(getGraphRegistry(engine).selection).toEqual([]);
+  expect(getGraphRegistry(sibling).selection).toEqual([nodeB]);
 });
 
 test("group registries are engine-scoped", () => {
@@ -159,12 +159,12 @@ test("group registries are engine-scoped", () => {
     const groupA = new GroupNodeMirror(engine, null);
     const groupB = new GroupNodeMirror(sibling, null);
 
-    expect(getGraphMirror(engine).groups).toEqual([groupA]);
-    expect(getGraphMirror(sibling).groups).toEqual([groupB]);
+    expect(getGraphRegistry(engine).groups).toEqual([groupA]);
+    expect(getGraphRegistry(sibling).groups).toEqual([groupB]);
 
     groupA.destroy(false);
-    expect(getGraphMirror(engine).groups).toEqual([]);
-    expect(getGraphMirror(sibling).groups).toEqual([groupB]);
+    expect(getGraphRegistry(engine).groups).toEqual([]);
+    expect(getGraphRegistry(sibling).groups).toEqual([groupB]);
     groupB.destroy(false);
   } finally {
     restore();
@@ -196,7 +196,7 @@ test("a gesture without a graph owner warns and discards the preview", () => {
 
 test("the scheduler coalesces bursts and defers passes to the outermost batch end", async () => {
   const { engine } = createEngineHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
   let passes = 0;
   mirror.reconciler = {
     reconcile: () => {
diff --git a/tests/ut/snapline-line-reconciler.spec.ts b/tests/ut/snapline-line-reconciler.spec.ts
index 6a350c0..4507213 100644
--- a/tests/ut/snapline-line-reconciler.spec.ts
+++ b/tests/ut/snapline-line-reconciler.spec.ts
@@ -3,7 +3,7 @@ import {
   ConnectorMirror,
   NodeMirror,
 } from "../../assets/snapline/core/src";
-import { getGraphMirror } from "../../assets/snapline/core/src/snapline-globals";
+import { getGraphRegistry } from "../../assets/snapline/core/src";
 import { attachControlledGraph, type LineChangeRequest } from "../../assets/snapline/core/src";
 import {
   armGesture,
@@ -33,7 +33,7 @@ function mountPair(engine: any) {
 
 test("canonical records hydrate settled lines, stay latent until endpoints mount, and prune on removal", () => {
   const { engine, handle, requests } = controlledHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
 
   handle.setCanonicalGraph({
     lines: [
@@ -71,7 +71,7 @@ test("canonical records hydrate settled lines, stay latent until endpoints mount
 
 test("a settled line is preserved by stable id across endpoint retargets", () => {
   const { engine, handle } = controlledHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
   const { source, targetNode } = mountPair(engine);
   const secondTarget = new ConnectorMirror(engine, targetNode, {
     id: "in-2",
@@ -112,7 +112,7 @@ test("a settled line is preserved by stable id across endpoint retargets", () =>
 
 test("rules violations leave records latent with structured diagnostics that clear on resolution", () => {
   const { engine, handle, diagnosticsLog } = controlledHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
   const { target } = mountPair(engine);
   // A second source so two records target the same maxIncoming: 1 connector.
   new ConnectorMirror(engine, new NodeMirror(engine, null), {
@@ -150,7 +150,7 @@ test("rules violations leave records latent with structured diagnostics that cle
 
 test("duplicate canonical ids and predicate vetoes surface as diagnostics", () => {
   const { engine, handle } = controlledHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
   const { source, target } = mountPair(engine);
 
   handle.setCanonicalGraph({
@@ -228,7 +228,7 @@ function driveDrop(owner: ConnectorMirror, dropX: number, pointerId = 7) {
 
 test("a controlled connect stages, proposes one atomic request, and settles in place on adoption", () => {
   const { engine, handle, requests, source, target } = gestureHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
 
   dragFrom(source, 100);
   driveDrop(source, 100);
@@ -267,7 +267,7 @@ test("a controlled connect stages, proposes one atomic request, and settles in p
 
 test("rejection-by-inaction discards the staged line on the decisive pass", () => {
   const { engine, handle, requests, source } = gestureHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
 
   dragFrom(source, 100);
   driveDrop(source, 100);
@@ -284,7 +284,7 @@ test("rejection-by-inaction discards the staged line on the decisive pass", () =
 
 test("a full replace-oldest target yields one atomic replace request with no local eviction", () => {
   const { engine, handle, requests, source, target } = gestureHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
   target.updateConfig({
     rules: { maxOutgoing: 0, maxIncoming: 1, onFull: "replace-oldest" },
     surfaceStrategies: [nearStrategy],
@@ -331,7 +331,7 @@ test("a full replace-oldest target yields one atomic replace request with no loc
 
 test("a gesture disconnect proposes removal; rejection re-glues, acceptance discards", () => {
   const { engine, handle, requests, source, target } = gestureHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
 
   handle.setCanonicalGraph({
     lines: [{ id: "line-a", fromConnectorId: "out-1", toConnectorId: "in-1" }],
@@ -389,8 +389,8 @@ test("controlled graphs on sibling engines are fully isolated, gestures included
   });
   handle.flush();
   siblingHandle.flush();
-  expect(getGraphMirror(engine).line("iso")).not.toBeNull();
-  expect(getGraphMirror(sibling).line("iso")).toBeNull();
+  expect(getGraphRegistry(engine).line("iso")).not.toBeNull();
+  expect(getGraphRegistry(sibling).line("iso")).toBeNull();
 
   // A gesture on the sibling engine cannot discover engine A's targets:
   // A's target accepts drops near x=100, the sibling's own target does not
@@ -406,7 +406,7 @@ test("controlled graphs on sibling engines are fully isolated, gestures included
 
 test("a gesture reconnect preserves the line's stable id and mirror", () => {
   const { engine, handle, requests } = controlledHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
   const { source, targetNode, target } = mountConnectedPair(engine);
   // Second input on the same node, hit-testable only left of x=500 too but
   // distinguished by position: in-2 accepts drops at x >= 200.
@@ -466,7 +466,7 @@ test("a gesture reconnect preserves the line's stable id and mirror", () => {
 
 test("a bulk load reconciles exactly once at the outermost batch end", async () => {
   const { engine, handle } = controlledHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
   const reconciler = mirror.reconciler!;
   const originalReconcile = reconciler.reconcile!.bind(reconciler);
   let passes = 0;
diff --git a/tests/ut/snapline-perf.spec.ts b/tests/ut/snapline-perf.spec.ts
index 239a926..07395f6 100644
--- a/tests/ut/snapline-perf.spec.ts
+++ b/tests/ut/snapline-perf.spec.ts
@@ -4,7 +4,7 @@ import {
   NodeMirror,
   type LineRecord,
 } from "../../assets/snapline/core/src";
-import { getGraphMirror } from "../../assets/snapline/core/src/snapline-globals";
+import { getGraphRegistry } from "../../assets/snapline/core/src";
 import {
   createControlledHarness,
   nearTargetStrategy,
@@ -15,7 +15,7 @@ import {
 // visible in test output before it reaches an application.
 test("perf: reconcile, candidate discovery, and bulk load on a 200-node graph", () => {
   const { engine, handle } = createControlledHarness();
-  const mirror = getGraphMirror(engine);
+  const mirror = getGraphRegistry(engine);
 
   const NODES = 200;
   const LINES = 150;

From 293e5221724f303d203f479d8e69c05945f2f232 Mon Sep 17 00:00:00 2001
From: tfukaza <tfukaza@git.com>
Date: Mon, 27 Jul 2026 21:18:18 -0700
Subject: [PATCH 03/10] =?UTF-8?q?snapline:=20Phase=202=20=E2=80=94=20geome?=
 =?UTF-8?q?try=20invalidation=20observers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a multicast observation channel so a library outside SnapLine can keep
something (a text overlay, a badge) glued to a line or node while it moves.
This was previously impossible: LineMirror.#geometryWriter is a single field
already owned by <Line>, so a consumer calling bindGeometryWriter would not
add a watcher but silently replace the renderer; NodeMirror had no
subscription channel at all, only a single-slot #callbacks object the
adapters take over wholesale on mount.

LineMirror.onGeometryInvalidated / NodeMirror.onGeometryInvalidated are
Set-backed registrars returning an unsubscribe, matching the existing
onStateChange shape.

The signal is an INVALIDATION, not a paint hook. It fires synchronously
during input dispatch, before any frame task is queued, and carries no
geometry. Invoking it from inside writeTransform() would have silently
decided the subscriber's write phase for them — WRITE_2, with no way to opt
into a read stage or a later write stage, and nothing in the signature
saying so. Instead the subscriber schedules its own task with the existing
schedule(cb, { stage, queueId }) primitive and reads geometrySnapshot()
there. Per SNAPZEN: expose the primitives, no magic abstraction.

Consequences the docs have to state, and the unit spec pins: a line paints
at WRITE_2 with updateAnchors() inside that same task, so an overlay wanting
this frame's position schedules at WRITE_3. There is no priming call —
nothing is invalidated at subscribe time, so read geometrySnapshot()
directly for the initial position. Observer throws are isolated per
subscriber so third-party code cannot blank the graph.

Fire sites are consolidated rather than sprinkled. Line writes now funnel
through LineMirror.invalidateGeometry() (deferred) and
invalidateGeometryNow() (synchronous), each notifying before it queues;
connector/node schedulers became loops over those. On the node side the two
scheduling entry points cover it, and because scheduleTransformAndLines
already walks #transformNodeTree(), multi-select peers and group-carried
members each get their own signal — three cases NodeCallbacks.onDrag misses,
along with camera edge-pan.

Adds NodeMirror.geometrySnapshot() sourced from #authoredWidth/#authoredHeight
rather than leaving consumers to reach for the public hitBox, which is DOM
truth a ResizeObserver-scheduled READ_1 overwrites with the previously
rendered box — reading it mid-gesture pairs last frame's height with this
frame's y.

Renames NodeCallbacks.onGeometryChanged -> onGeometryCommit. It is
gesture-end only, and sitting beside a per-frame onGeometryInvalidated the
old name was a trap; the pair now reads unambiguously.

Adds tests/ut/snapline-observers.spec.ts and a test:snapline-ut script (the
SnapLine unit specs previously had no npm entry point).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 assets/snapline/AGENTS.md                     |   2 +-
 assets/snapline/core/src/connector.ts         |  11 +-
 assets/snapline/core/src/index.ts             |   1 +
 assets/snapline/core/src/line.ts              |  76 +++++++-
 assets/snapline/core/src/node.ts              |  72 +++++++-
 assets/snapline/core/src/types.ts             |  11 ++
 assets/snapline/react/src/Group.tsx           |  18 +-
 assets/snapline/react/src/Node.tsx            |  18 +-
 assets/snapline/svelte/src/Group.svelte       |  10 +-
 assets/snapline/svelte/src/Node.svelte        |  10 +-
 docs/snapline/design/current-architecture.md  |   6 +-
 docs/snapline/design/migration-notes.md       |   4 +-
 .../design/ownership-specification.md         |   4 +-
 .../snapline/design/planned-rearchitecture.md |   2 +-
 docs/snapline/guides/02_selection_resize.mdx  |   6 +-
 docs/snapline/reference/react/index.mdx       |   2 +-
 docs/snapline/reference/react/node.mdx        |   4 +-
 docs/snapline/reference/svelte/group.mdx      |   2 +-
 docs/snapline/reference/svelte/index.mdx      |   4 +-
 docs/snapline/reference/svelte/node.mdx       |   4 +-
 docs/snapline/reference/vanilla/node.mdx      |   2 +-
 package.json                                  |   1 +
 tests/ut/snapline-observers.spec.ts           | 171 ++++++++++++++++++
 23 files changed, 374 insertions(+), 67 deletions(-)
 create mode 100644 tests/ut/snapline-observers.spec.ts

diff --git a/assets/snapline/AGENTS.md b/assets/snapline/AGENTS.md
index 29349c8..0b9ffde 100644
--- a/assets/snapline/AGENTS.md
+++ b/assets/snapline/AGENTS.md
@@ -209,7 +209,7 @@ Concretely:
 - **Node/group transforms and live width/height** are core-written during a
   gesture. Resize uses `WRITE_1 → READ_2 → WRITE_2`: paint the box, remeasure
   connectors, then re-glue lines. `onSizeChange` is the live observation and
-  the batched `onGeometryChanged({ nodes })` reports settled geometry the
+  the batched `onGeometryCommit({ nodes })` reports settled geometry the
   framework may persist (geometry is SnapLine-owned; ignoring the event
   never reverts the mirror).
 - **Position and size are one commit.** `#writeSizeGeometry` paints
diff --git a/assets/snapline/core/src/connector.ts b/assets/snapline/core/src/connector.ts
index ae7ec51..0f4a852 100644
--- a/assets/snapline/core/src/connector.ts
+++ b/assets/snapline/core/src/connector.ts
@@ -579,16 +579,7 @@ class ConnectorMirror extends ElementObject {
 
   scheduleAllLineWrites(): void {
     for (const line of [...this.#outgoingLines, ...this.#incomingLines]) {
-      line.schedule(
-        () => {
-          line.updateAnchors();
-          line.writeTransform();
-        },
-        {
-          stage: "WRITE_2",
-          queueId: `${line.id}-transform`,
-        },
-      );
+      line.invalidateGeometry();
     }
   }
 
diff --git a/assets/snapline/core/src/index.ts b/assets/snapline/core/src/index.ts
index bd682ea..0099a7a 100644
--- a/assets/snapline/core/src/index.ts
+++ b/assets/snapline/core/src/index.ts
@@ -98,6 +98,7 @@ export type {
   ConnectorId,
   ControlledGraphCallbacks,
   ControlledGraphHandle,
+  GeometryInvalidationObserver,
   GeometryWriter,
   GraphBatch,
   LineChangeRequest,
diff --git a/assets/snapline/core/src/line.ts b/assets/snapline/core/src/line.ts
index dfee90f..6f9bbd4 100644
--- a/assets/snapline/core/src/line.ts
+++ b/assets/snapline/core/src/line.ts
@@ -7,7 +7,7 @@ import type {
   ConnectorPoint,
   ConnectorSurfaceStrategy,
 } from "./connector";
-import type { GeometryWriter } from "./types";
+import type { GeometryInvalidationObserver, GeometryWriter } from "./types";
 import { getGraphRegistry } from "./internal/shared-data";
 import { mintDomainId } from "./internal/graph-registry";
 
@@ -51,6 +51,7 @@ class LineMirror extends ElementObject {
   #phase: LineMirrorPhase = "source-start";
   #candidate: ConnectorCandidate | null = null;
   #geometryWriter: GeometryWriter<LineGeometrySnapshot> | null = null;
+  #geometryObservers = new Set<GeometryInvalidationObserver<LineMirror>>();
   #stateCallbacks = new Set<(state: LineStateSnapshot) => void>();
   #sourceStrategy: ConnectorSurfaceStrategy | null = null;
   #sourceHit: ConnectorHit | null = null;
@@ -139,6 +140,39 @@ class LineMirror extends ElementObject {
     };
   }
 
+  /**
+   * Subscribe to "this line's geometry is about to change".
+   *
+   * Fires **synchronously, during input dispatch, before any frame task is
+   * queued** — not at paint time. It deliberately hands over no geometry:
+   * schedule your own task at whatever stage suits you and read
+   * `geometrySnapshot()` there.
+   *
+   * ```ts
+   * const stop = line.onGeometryInvalidated(() =>
+   *   line.schedule(place, { stage: "WRITE_3", queueId: "label" }),
+   * );
+   * ```
+   *
+   * The line itself paints at `WRITE_2` (and resolves its anchors inside that
+   * same task), so `WRITE_3` sees this frame's position while `WRITE_1` and
+   * `READ_2` still see the previous frame's. Choosing that is the caller's
+   * job, which is why no stage is implied here.
+   *
+   * Unlike {@link bindGeometryWriter} — the single owner that paints the line —
+   * any number of observers may subscribe. There is no priming call: nothing
+   * has been invalidated at subscribe time, so read `geometrySnapshot()`
+   * directly for the initial position.
+   *
+   * @returns an unsubscribe function.
+   */
+  onGeometryInvalidated(
+    observer: GeometryInvalidationObserver<LineMirror>,
+  ): () => void {
+    this.#geometryObservers.add(observer);
+    return () => this.#geometryObservers.delete(observer);
+  }
+
   onStateChange(callback: (state: LineStateSnapshot) => void): () => void {
     this.#stateCallbacks.add(callback);
     callback(this.stateSnapshot());
@@ -245,6 +279,46 @@ class LineMirror extends ElementObject {
     this.#endAnchor = cloneAnchor(anchor);
   }
 
+  /**
+   * The deferred re-glue: notify observers now, paint next WRITE_2.
+   *
+   * Coalesces on `(objectId, queueId)`, so many invalidations in one frame
+   * collapse to a single write task.
+   */
+  invalidateGeometry(): void {
+    this.#notifyGeometryInvalidated();
+    this.schedule(
+      () => {
+        this.updateAnchors();
+        this.writeTransform();
+      },
+      { stage: "WRITE_2", queueId: `${this.id}-transform` },
+    );
+  }
+
+  /**
+   * The synchronous re-glue, for callers already inside a WRITE stage
+   * (settle, prop-driven node moves). Observers still fire first, so a
+   * subscriber's own scheduled task is queued before the paint happens.
+   */
+  invalidateGeometryNow(): void {
+    this.#notifyGeometryInvalidated();
+    this.updateAnchors();
+    this.writeTransform();
+  }
+
+  #notifyGeometryInvalidated(): void {
+    for (const observer of this.#geometryObservers) {
+      // A third-party observer must never be able to stop the line painting
+      // or starve its peers.
+      try {
+        observer(this);
+      } catch (error) {
+        console.error("SnapLine: a line geometry observer threw.", error);
+      }
+    }
+  }
+
   updateAnchors(): void {
     const target = this.target ?? this.candidate?.connector ?? null;
     if (!target) {
diff --git a/assets/snapline/core/src/node.ts b/assets/snapline/core/src/node.ts
index 2faa439..114612c 100644
--- a/assets/snapline/core/src/node.ts
+++ b/assets/snapline/core/src/node.ts
@@ -18,6 +18,7 @@ import {
 } from "./internal/shared-data";
 import { mintDomainId } from "./internal/graph-registry";
 import type { SnapLineMetadata } from "./connector";
+import type { GeometryInvalidationObserver } from "./types";
 
 export type ResizeHandle = "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
 
@@ -188,7 +189,7 @@ export interface NodeCallbacks {
   /** Settled geometry after a drag or resize — SnapLine owns live and
    * settled position/size; the consumer may persist this observation, and
    * ignoring it does not revert the mirror. */
-  onGeometryChanged?: (event: GeometryChangeEvent) => void;
+  onGeometryCommit?: (event: GeometryChangeEvent) => void;
   onSelectionChange?: (event: NodeSelectionEvent) => void;
   /** Observes live size updates; core writes the retained element geometry. */
   onSizeChange?: (event: NodeResizeEvent) => void;
@@ -381,6 +382,7 @@ class NodeMirror extends ElementObject {
   // The size last authored through setSizeState, kept apart from #hitBox (which
   // tracks what the browser actually rendered) so a write always paints the
   // value its own tick authored.
+  #geometryObservers = new Set<GeometryInvalidationObserver<NodeMirror>>();
   #authoredWidth = 0;
   #authoredHeight = 0;
   #hasAuthoredSize = false;
@@ -537,8 +539,7 @@ class NodeMirror extends ElementObject {
       ...this.getAllIncomingLines(),
     ]);
     for (const line of lines) {
-      line.updateAnchors();
-      line.writeTransform();
+      line.invalidateGeometryNow();
     }
   }
 
@@ -559,7 +560,12 @@ class NodeMirror extends ElementObject {
       stage: "WRITE_2",
       queueId: `${this.id}-transform`,
     });
-    for (const node of this.#transformNodeTree()) node.scheduleLineWrites();
+    // Every node in the transform tree moves, not just this one — multi-select
+    // peers and group-carried members included — so each gets its own signal.
+    for (const node of this.#transformNodeTree()) {
+      node.notifyGeometryInvalidated();
+      node.scheduleLineWrites();
+    }
   }
 
   // Re-measure the node box + each connector's local center (READ_1) and re-glue
@@ -604,6 +610,57 @@ class NodeMirror extends ElementObject {
     }
   }
 
+  /**
+   * Subscribe to "this node's geometry is about to change".
+   *
+   * Fires **synchronously, during input dispatch, before any frame task is
+   * queued** — for drags (including camera edge-pan, multi-select peers, and
+   * group-carried members, none of which `onDrag` reports) and for resizes.
+   * It hands over no geometry: schedule your own task at the stage you want
+   * and read {@link geometrySnapshot} there.
+   *
+   * Distinct from `onGeometryCommit`, which fires once per gesture with the
+   * settled result. This one fires every frame, before the paint.
+   *
+   * @returns an unsubscribe function.
+   */
+  onGeometryInvalidated(
+    observer: GeometryInvalidationObserver<NodeMirror>,
+  ): () => void {
+    this.#geometryObservers.add(observer);
+    return () => this.#geometryObservers.delete(observer);
+  }
+
+  /** @internal Fired by the scheduling entry points, before they queue. */
+  notifyGeometryInvalidated(): void {
+    for (const observer of this.#geometryObservers) {
+      // A third-party observer must never be able to stop the node painting
+      // or starve its peers.
+      try {
+        observer(this);
+      } catch (error) {
+        console.error("SnapLine: a node geometry observer threw.", error);
+      }
+    }
+  }
+
+  /**
+   * This node's position and **authored** size.
+   *
+   * Deliberately not sourced from `hitBox`: that is DOM truth, which a
+   * ResizeObserver-scheduled READ_1 overwrites with the *previously rendered*
+   * box. Reading it mid-gesture pairs last frame's height with this frame's
+   * `y`. Position and size here always come from the same authoring tick.
+   */
+  geometrySnapshot(): { x: number; y: number; width: number; height: number } {
+    return {
+      x: this.worldTransform.x,
+      y: this.worldTransform.y,
+      width: this.#authoredWidth,
+      height: this.#authoredHeight,
+    };
+  }
+
   // State-only half of a size change: clamps to min and synchronously updates
   // the collision footprint + resize hitbox so hit testing and group
   // containment stay correct mid-drag. `setSize` adds the scheduled DOM write;
@@ -654,6 +711,7 @@ class NodeMirror extends ElementObject {
   }
 
   #scheduleSizeGeometryWrite(): void {
+    this.notifyGeometryInvalidated();
     this.schedule(() => this.#writeSizeGeometry(), {
       stage: "WRITE_1",
       queueId: `${this.id}-size`,
@@ -960,7 +1018,7 @@ class NodeMirror extends ElementObject {
     }
     if (this.#resizing) {
       // The teardown runs in `finally` because everything above it calls out:
-      // #writeSizeGeometry touches the DOM and onGeometryChanged is consumer
+      // #writeSizeGeometry touches the DOM and onGeometryCommit is consumer
       // code. A throw that skipped these resets would strand `resizingNode`,
       // which permanently disables click-selection (see onUp), and would leave
       // the resize cursor pinned with no path back to a hover recompute.
@@ -973,7 +1031,7 @@ class NodeMirror extends ElementObject {
         // query the committed handle/box. Keep the coalesced frame write for the
         // hot path, but make the final retained geometry observable now.
         this.#writeSizeGeometry();
-        this.#callbacks.onGeometryChanged?.({
+        this.#callbacks.onGeometryCommit?.({
           nodes: [this.#geometryOf(this)],
         });
       } finally {
@@ -1025,7 +1083,7 @@ class NodeMirror extends ElementObject {
   }
 
   protected emitGeometryChange(): void {
-    this.#callbacks.onGeometryChanged?.({
+    this.#callbacks.onGeometryCommit?.({
       nodes: this.getDragCommitNodes().map((node) => this.#geometryOf(node)),
     });
   }
diff --git a/assets/snapline/core/src/types.ts b/assets/snapline/core/src/types.ts
index 7bea0ef..4883529 100644
--- a/assets/snapline/core/src/types.ts
+++ b/assets/snapline/core/src/types.ts
@@ -21,6 +21,17 @@ export type LineId = string;
  */
 export type GeometryWriter<T> = (geometry: Readonly<T>) => void;
 
+/**
+ * Notified the moment core determines an object's geometry will change this
+ * frame — synchronously during input dispatch, before anything is queued.
+ *
+ * It carries no geometry on purpose. The subscriber schedules its own task at
+ * the stage it wants (`schedule(cb, { stage, queueId })`) and reads the
+ * object's `geometrySnapshot()` there, rather than having core pick a write
+ * phase on its behalf.
+ */
+export type GeometryInvalidationObserver<T> = (source: T) => void;
+
 /**
  * Structured, non-throwing report of a graph state the registry cannot
  * represent. Derived state: entries drop out when their cause resolves.
diff --git a/assets/snapline/react/src/Group.tsx b/assets/snapline/react/src/Group.tsx
index 20266ce..a644ac6 100644
--- a/assets/snapline/react/src/Group.tsx
+++ b/assets/snapline/react/src/Group.tsx
@@ -44,7 +44,7 @@ export interface GroupProps {
   canContain?: (event: GroupContainEvent) => boolean;
   edgePan?: boolean;
   onMembershipChange?: (event: GroupMembershipEvent) => void;
-  onGeometryChanged?: (event: GeometryChangeEvent) => void;
+  onGeometryCommit?: (event: GeometryChangeEvent) => void;
 }
 
 export const Group = forwardRef<GroupNodeMirror, GroupProps>(function Group(
@@ -71,7 +71,7 @@ export const Group = forwardRef<GroupNodeMirror, GroupProps>(function Group(
     canContain,
     edgePan = true,
     onMembershipChange,
-    onGeometryChanged,
+    onGeometryCommit,
   },
   ref,
 ) {
@@ -107,13 +107,13 @@ export const Group = forwardRef<GroupNodeMirror, GroupProps>(function Group(
     callbacks,
     groupCallbacks,
     onMembershipChange,
-    onGeometryChanged,
+    onGeometryCommit,
   });
   latestRef.current = {
     callbacks,
     groupCallbacks,
     onMembershipChange,
-    onGeometryChanged,
+    onGeometryCommit,
   };
 
   useImperativeHandle(ref, () => group, [group]);
@@ -184,12 +184,12 @@ export const Group = forwardRef<GroupNodeMirror, GroupProps>(function Group(
         latestRef.current.groupCallbacks.onMembershipChange,
         latestRef.current.onMembershipChange,
       );
-    group.callbacks.onGeometryChanged = (event) =>
+    group.callbacks.onGeometryCommit = (event) =>
       invoke(
         event,
-        originalCallbacks.onGeometryChanged,
-        latestRef.current.callbacks.onGeometryChanged,
-        latestRef.current.onGeometryChanged,
+        originalCallbacks.onGeometryCommit,
+        latestRef.current.callbacks.onGeometryCommit,
+        latestRef.current.onGeometryCommit,
       );
     group.callbacks.onSizeChange = (event) => {
       invoke(
@@ -217,7 +217,7 @@ export const Group = forwardRef<GroupNodeMirror, GroupProps>(function Group(
         originalCallbacks.resolveSelectionMode;
       group.callbacks.onDragStart = originalCallbacks.onDragStart;
       group.callbacks.onDrag = originalCallbacks.onDrag;
-      group.callbacks.onGeometryChanged = originalCallbacks.onGeometryChanged;
+      group.callbacks.onGeometryCommit = originalCallbacks.onGeometryCommit;
       group.callbacks.onSelectionChange = originalCallbacks.onSelectionChange;
       group.callbacks.onResizeHandleChange =
         originalCallbacks.onResizeHandleChange;
diff --git a/assets/snapline/react/src/Node.tsx b/assets/snapline/react/src/Node.tsx
index 7e09312..fa09b75 100644
--- a/assets/snapline/react/src/Node.tsx
+++ b/assets/snapline/react/src/Node.tsx
@@ -48,7 +48,7 @@ export interface NodeProps {
   metadata?: SnapLineMetadata;
   callbacks?: NodeCallbacks;
   edgePan?: boolean;
-  onGeometryChanged?: (event: GeometryChangeEvent) => void;
+  onGeometryCommit?: (event: GeometryChangeEvent) => void;
   onSizeChange?: (event: NodeResizeEvent) => void;
   /** Framework-native attributes and events for the outer node element. */
   elementProps?: HTMLAttributes<HTMLDivElement>;
@@ -75,7 +75,7 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
     metadata = {},
     callbacks = {},
     edgePan = true,
-    onGeometryChanged,
+    onGeometryCommit,
     onSizeChange,
     elementProps,
   },
@@ -105,12 +105,12 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
   );
   const latestRef = useRef({
     callbacks,
-    onGeometryChanged,
+    onGeometryCommit,
     onSizeChange,
   });
   latestRef.current = {
     callbacks,
-    onGeometryChanged,
+    onGeometryCommit,
     onSizeChange,
   };
 
@@ -190,12 +190,12 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
         latestRef.current.onSizeChange,
       );
     };
-    node.callbacks.onGeometryChanged = (event) =>
+    node.callbacks.onGeometryCommit = (event) =>
       invoke(
         event,
-        original.onGeometryChanged,
-        latestRef.current.callbacks.onGeometryChanged,
-        latestRef.current.onGeometryChanged,
+        original.onGeometryCommit,
+        latestRef.current.callbacks.onGeometryCommit,
+        latestRef.current.onGeometryCommit,
       );
     setLineList([...node.getAllOutgoingLines()]);
     const boundElement = nodeDomRef.current;
@@ -206,7 +206,7 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
       node.callbacks.resolveSelectionMode = original.resolveSelectionMode;
       node.callbacks.onDragStart = original.onDragStart;
       node.callbacks.onDrag = original.onDrag;
-      node.callbacks.onGeometryChanged = original.onGeometryChanged;
+      node.callbacks.onGeometryCommit = original.onGeometryCommit;
       node.callbacks.onSelectionChange = original.onSelectionChange;
       node.callbacks.onResizeHandleChange = original.onResizeHandleChange;
       node.callbacks.onLinesChanged = original.onLinesChanged;
diff --git a/assets/snapline/svelte/src/Group.svelte b/assets/snapline/svelte/src/Group.svelte
index 884c1b2..e453f42 100644
--- a/assets/snapline/svelte/src/Group.svelte
+++ b/assets/snapline/svelte/src/Group.svelte
@@ -25,7 +25,7 @@
         canContain = undefined,
         edgePan = true,
         onMembershipChange = undefined,
-        onGeometryChanged = undefined,
+        onGeometryCommit = undefined,
         children = undefined,
     }: {
         /** Stable domain identity; minted when omitted (supply for persistence). */
@@ -50,7 +50,7 @@
         canContain?: (event: GroupContainEvent) => boolean;
         edgePan?: boolean;
         onMembershipChange?: (event: GroupMembershipEvent) => void;
-        onGeometryChanged?: (event: GeometryChangeEvent) => void;
+        onGeometryCommit?: (event: GeometryChangeEvent) => void;
         children?: any;
     } = $props();
 
@@ -121,8 +121,8 @@
         groupObject!.callbacks.onSizeChange = (event) => {
             invoke(event, originalCallbacks.onSizeChange, callbacks.onSizeChange);
         };
-        groupObject!.callbacks.onGeometryChanged = (event) =>
-            invoke(event, originalCallbacks.onGeometryChanged, callbacks.onGeometryChanged, onGeometryChanged);
+        groupObject!.callbacks.onGeometryCommit = (event) =>
+            invoke(event, originalCallbacks.onGeometryCommit, callbacks.onGeometryCommit, onGeometryCommit);
         // Header is the only move surface; wait a tick so the alias wins over the
         // element registration. The geometry effect seeds the collision footprint
         // and schedules the first paint once `mounted` flips.
@@ -146,7 +146,7 @@
         groupObject!.callbacks.resolveSelectionMode = originalCallbacks.resolveSelectionMode;
         groupObject!.callbacks.onDragStart = originalCallbacks.onDragStart;
         groupObject!.callbacks.onDrag = originalCallbacks.onDrag;
-        groupObject!.callbacks.onGeometryChanged = originalCallbacks.onGeometryChanged;
+        groupObject!.callbacks.onGeometryCommit = originalCallbacks.onGeometryCommit;
         groupObject!.callbacks.onSelectionChange = originalCallbacks.onSelectionChange;
         groupObject!.callbacks.onResizeHandleChange = originalCallbacks.onResizeHandleChange;
         groupObject!.callbacks.onSizeChange = originalCallbacks.onSizeChange;
diff --git a/assets/snapline/svelte/src/Node.svelte b/assets/snapline/svelte/src/Node.svelte
index 3671d1e..70f23a4 100644
--- a/assets/snapline/svelte/src/Node.svelte
+++ b/assets/snapline/svelte/src/Node.svelte
@@ -24,7 +24,7 @@
         metadata = {},
         callbacks = {},
         edgePan = true,
-        onGeometryChanged = undefined,
+        onGeometryCommit = undefined,
         onSizeChange = undefined,
         elementProps = {},
         children,
@@ -47,7 +47,7 @@
         metadata?: SnapLineMetadata;
         callbacks?: NodeCallbacks;
         edgePan?: boolean;
-        onGeometryChanged?: (event: GeometryChangeEvent) => void;
+        onGeometryCommit?: (event: GeometryChangeEvent) => void;
         onSizeChange?: (event: NodeResizeEvent) => void;
         /** Framework-native attributes and events for the outer node element. */
         elementProps?: HTMLAttributes<HTMLDivElement>;
@@ -110,8 +110,8 @@
             invoke(event, originalCallbacks.onSelectionChange, callbacks.onSelectionChange);
         nodeObject.callbacks.onResizeHandleChange = (event) =>
             invoke(event, originalCallbacks.onResizeHandleChange, callbacks.onResizeHandleChange);
-        nodeObject.callbacks.onGeometryChanged = (event) =>
-            invoke(event, originalCallbacks.onGeometryChanged, callbacks.onGeometryChanged, onGeometryChanged);
+        nodeObject.callbacks.onGeometryCommit = (event) =>
+            invoke(event, originalCallbacks.onGeometryCommit, callbacks.onGeometryCommit, onGeometryCommit);
         nodeObject.callbacks.onSizeChange = (event) => {
             invoke(event, originalCallbacks.onSizeChange, callbacks.onSizeChange, onSizeChange);
         };
@@ -132,7 +132,7 @@
         nodeObject.callbacks.resolveSelectionMode = originalCallbacks.resolveSelectionMode;
         nodeObject.callbacks.onDragStart = originalCallbacks.onDragStart;
         nodeObject.callbacks.onDrag = originalCallbacks.onDrag;
-        nodeObject.callbacks.onGeometryChanged = originalCallbacks.onGeometryChanged;
+        nodeObject.callbacks.onGeometryCommit = originalCallbacks.onGeometryCommit;
         nodeObject.callbacks.onSelectionChange = originalCallbacks.onSelectionChange;
         nodeObject.callbacks.onResizeHandleChange = originalCallbacks.onResizeHandleChange;
         nodeObject.callbacks.onLinesChanged = originalCallbacks.onLinesChanged;
diff --git a/docs/snapline/design/current-architecture.md b/docs/snapline/design/current-architecture.md
index d23bbf3..d99ba73 100644
--- a/docs/snapline/design/current-architecture.md
+++ b/docs/snapline/design/current-architecture.md
@@ -31,7 +31,7 @@ gestures never mutate settled topology locally; each gesture proposes one
 atomic `LineChangeRequest` that the application accepts, normalizes, or
 rejects by updating its records. Position and size stay SnapLine-owned —
 geometry is a visual cue, observed (not negotiated) through one batched
-`onGeometryChanged` callback.
+`onGeometryCommit` callback.
 
 | Layer                       | Responsibility                                                                                                 |
 | --------------------------- | -------------------------------------------------------------------------------------------------------------- |
@@ -266,7 +266,7 @@ never round-trip the framework:
 - During a resize, core clamps, updates collision state, writes
   width/height, remeasures connector centers, and re-glues lines
   (`WRITE_1 → READ_2 → WRITE_2`). `onSizeChange` is the live observation.
-- One batched **`onGeometryChanged({ nodes: [{ node, x, y, width, height }] })`**
+- One batched **`onGeometryCommit({ nodes: [{ node, x, y, width, height }] })`**
   fires per settled gesture: a group or multi-select drag reports every
   moved node in one event; a resize reports a single entry. The application
   may persist the observation; ignoring it never reverts the mirror.
@@ -426,7 +426,7 @@ types). Adapter contracts:
 | Preview/staged lines          | SnapLine gesture               | Ephemeral; staged outcome awaits the canonical decision                 |
 | Gesture outcome               | Application                    | One atomic `LineChangeRequest`; adopt the proposed id to settle in place |
 | Node/connector/line DOM       | React/Svelte adapter           | Core writes transforms/`data-*` on existing elements only               |
-| Live + settled geometry       | SnapLine                       | Observed via batched `onGeometryChanged`; never round-trips             |
+| Live + settled geometry       | SnapLine                       | Observed via batched `onGeometryCommit`; never round-trips             |
 | Connector policy              | Application config             | `ConnectorRules` + surface strategies, copied into the mirror           |
 | Selection                     | SnapLine, engine-scoped        | Framework owns visuals and pointer policy                               |
 | Group membership              | SnapLine derived state         | Computed from measured geometry; resolver overridable                   |
diff --git a/docs/snapline/design/migration-notes.md b/docs/snapline/design/migration-notes.md
index ca58aed..833ab7c 100644
--- a/docs/snapline/design/migration-notes.md
+++ b/docs/snapline/design/migration-notes.md
@@ -26,7 +26,7 @@ Position and size stay SnapLine-owned — geometry is a visual cue, observed
 | `ConnectorLinePhase` | `LineMirrorPhase` (adds `"staged"`) |
 | `syncDomGeometry()` | `remeasureDomGeometry()` |
 | `onLinesChanged` | unchanged name; payload is `LineMirror`s |
-| `onDragCommit` + `onResizeCommit` | one batched `onGeometryChanged({ nodes })` |
+| `onDragCommit` + `onResizeCommit` | one batched `onGeometryCommit({ nodes })` |
 | `NodePosition` / `NodeDragCommitEvent` | `NodeGeometry` / `GeometryChangeEvent` |
 | `EdgeId` / `EdgeRecord` / `EdgeLike` / `EdgeEndpoint` | `LineId` / `LineRecord` (stable-id, no endpoint-pair keying) |
 
@@ -130,7 +130,7 @@ values from your own document (the same records that drive
 
 ## Geometry
 
-`onGeometryChanged({ nodes: [{ node, x, y, width, height }] })` fires once
+`onGeometryCommit({ nodes: [{ node, x, y, width, height }] })` fires once
 per settled drag (every moved node of a group/multi-select drag in one
 event) or resize (single entry). SnapLine owns live and settled geometry;
 persist the observation if you want it back after a reload — ignoring it
diff --git a/docs/snapline/design/ownership-specification.md b/docs/snapline/design/ownership-specification.md
index ed5b140..09df9af 100644
--- a/docs/snapline/design/ownership-specification.md
+++ b/docs/snapline/design/ownership-specification.md
@@ -706,7 +706,7 @@ document, structured diagnostics, and engine scoping are all shipped:
 | Unified mirror registry             | Conforms       | `GraphRegistry` indexes nodes, connectors, and settled lines; one enumeration path  |
 | Engine isolation                    | Conforms       | Selection, groups, `resizingNode`, and the reconciler are engine-scoped           |
 | Diagnostics                         | Conforms       | Derived `ReconciliationError`s via `onDiagnosticsChanged` / `query().diagnostics()` |
-| Geometry authority                  | Decided        | SnapLine-owned visual cue; one batched `onGeometryChanged` observation, no controlled-geometry mode |
+| Geometry authority                  | Decided        | SnapLine-owned visual cue; one batched `onGeometryCommit` observation, no controlled-geometry mode |
 | Explicit authority model            | Conforms       | Exactly one model: always controlled; no imperative public topology surface       |
 
 ## Open decisions — all decided and shipped
@@ -732,7 +732,7 @@ is implemented:
    payload to canonical `LineRecord.payload`, mutation to the request
    protocol.
 9. Geometry props? Neither controlled nor negotiated — geometry is
-   SnapLine-owned and observed through one batched `onGeometryChanged`.
+   SnapLine-owned and observed through one batched `onGeometryCommit`.
 10. Selection and groups? They remain SnapLine-owned derived state,
     engine-scoped on `GraphRegistry` (framework owns the visuals).
 11. Mixed controlled/unmanaged engines? Moot — the unmanaged mode was
diff --git a/docs/snapline/design/planned-rearchitecture.md b/docs/snapline/design/planned-rearchitecture.md
index c24e7fe..9b39083 100644
--- a/docs/snapline/design/planned-rearchitecture.md
+++ b/docs/snapline/design/planned-rearchitecture.md
@@ -38,7 +38,7 @@ Two decisions were amended from the original plan (both user-directed):
 2. **Geometry authority modes were dropped.** Position and size are visual
    cues owned by SnapLine; there is no controlled-geometry variant and no
    `onGeometryChangeRequest`. D8 reduced to the consolidation: one batched
-   `onGeometryChanged` observation replaces `onDragCommit` +
+   `onGeometryCommit` observation replaces `onDragCommit` +
    `onResizeCommit`.
 
 ## Status: complete
diff --git a/docs/snapline/guides/02_selection_resize.mdx b/docs/snapline/guides/02_selection_resize.mdx
index 57f7e4f..7c864b1 100644
--- a/docs/snapline/guides/02_selection_resize.mdx
+++ b/docs/snapline/guides/02_selection_resize.mdx
@@ -40,7 +40,7 @@ Set `resizable` to enable all eight handles, or pass an exact list:
   width={node.width}
   height={node.height}
   resizeHandles={["e", "se", "s"]}
-  onGeometryChanged={(event) => saveGeometry(event)}
+  onGeometryCommit={(event) => saveGeometry(event)}
 />
 ```
 
@@ -51,14 +51,14 @@ Set `resizable` to enable all eight handles, or pass an exact list:
   width={node.width}
   height={node.height}
   resizeHandles={["e", "se", "s"]}
-  onGeometryChanged={saveGeometry}
+  onGeometryCommit={saveGeometry}
 />
 ```
 
 SnapLine owns live and settled geometry — position and size are visual cues
 that never wait for an application render; changed props still resynchronize
 the object deliberately. Persist final values from the batched
-`onGeometryChanged` event: a group or multi-select drag reports every moved
+`onGeometryCommit` event: a group or multi-select drag reports every moved
 node in one event (`{ nodes: [{ node, x, y, width, height }] }`), a resize
 reports a single entry.
 
diff --git a/docs/snapline/reference/react/index.mdx b/docs/snapline/reference/react/index.mdx
index 8546b61..b61c742 100644
--- a/docs/snapline/reference/react/index.mdx
+++ b/docs/snapline/reference/react/index.mdx
@@ -12,7 +12,7 @@ frameworkKey: overview
 
 | Component   | Important props                                                                                         |
 | ----------- | ------------------------------------------------------------------------------------------------------- |
-| [`Node`](/docs/snapline/reference/react/node)      | `id`, `nodeObject`, geometry, resize configuration, callbacks, `onGeometryChanged`, `lineComponent`, `elementProps` |
+| [`Node`](/docs/snapline/reference/react/node)      | `id`, `nodeObject`, geometry, resize configuration, callbacks, `onGeometryCommit`, `lineComponent`, `elementProps` |
 | [`Connector`](/docs/snapline/reference/react/connector) | `id`, `name` (required), `connectorObject`, `rules`, `virtual`, `surfaceStrategies`, metadata, callbacks |
 | [`Line`](/docs/snapline/reference/react/line)      | `line`, SVG presentation                                                                                |
 | [`Select`](/docs/snapline/reference/react/select)    | callbacks and presentation                                                                              |
diff --git a/docs/snapline/reference/react/node.mdx b/docs/snapline/reference/react/node.mdx
index c5d1728..351c3d4 100644
--- a/docs/snapline/reference/react/node.mdx
+++ b/docs/snapline/reference/react/node.mdx
@@ -23,7 +23,7 @@ frameworkKey: node
 | `resizeCursors` | Per-handle cursor overrides |
 | `metadata` | `SnapLineMetadata` attached to the node |
 | `callbacks` | `NodeCallbacks` object (drag, selection, resize, lines) |
-| `onGeometryChanged` | Convenience callback; batched final geometry for persistence |
+| `onGeometryCommit` | Convenience callback; batched final geometry for persistence |
 | `onSizeChange` | Convenience callback for resize events |
 | `edgePan` | Pan the camera when dragging near the viewport edge (default `true`) |
 | `lineComponent` | Custom line renderer for this node's outgoing lines (defaults to `Line`) |
@@ -37,7 +37,7 @@ dedicated drag surface.
 
 Callback props stay current across renders and compose with callbacks already
 present on a supplied core object. During a live pointer gesture, core writes
-retained element geometry directly; the batched `onGeometryChanged` reports
+retained element geometry directly; the batched `onGeometryCommit` reports
 final values for application persistence.
 
 The rendered element carries `data-snapline-type="node"` and
diff --git a/docs/snapline/reference/svelte/group.mdx b/docs/snapline/reference/svelte/group.mdx
index 775b942..6083065 100644
--- a/docs/snapline/reference/svelte/group.mdx
+++ b/docs/snapline/reference/svelte/group.mdx
@@ -16,6 +16,6 @@ Use `title` for a text header or `headerContent` for a custom snippet. The
 header is the move surface; the group body remains pointer-transparent so
 member nodes receive input.
 
-`onMembershipChange` and `onGeometryChanged` are convenience
+`onMembershipChange` and `onGeometryCommit` are convenience
 callbacks composed with their callback-object equivalents. `getNodeObject()`
 returns the core group.
diff --git a/docs/snapline/reference/svelte/index.mdx b/docs/snapline/reference/svelte/index.mdx
index d7fc6f1..a82f109 100644
--- a/docs/snapline/reference/svelte/index.mdx
+++ b/docs/snapline/reference/svelte/index.mdx
@@ -12,7 +12,7 @@ Wrap components in `Engine` from `@snap-engine/asset-base-svelte`.
 
 | Component   | Important props                                                                                        |
 | ----------- | ------------------------------------------------------------------------------------------------------ |
-| [`Node`](/docs/snapline/reference/svelte/node)      | `id`, `nodeObject`, `x`, `y`, `width`, `height`, resize configuration, callbacks, `onGeometryChanged`, `onSizeChange`, `edgePan`, `metadata`, `LineSvelteComponent`, `className`, `elementProps` |
+| [`Node`](/docs/snapline/reference/svelte/node)      | `id`, `nodeObject`, `x`, `y`, `width`, `height`, resize configuration, callbacks, `onGeometryCommit`, `onSizeChange`, `edgePan`, `metadata`, `LineSvelteComponent`, `className`, `elementProps` |
 | [`Connector`](/docs/snapline/reference/svelte/connector) | `id`, `name`, `rules`, `virtual`, `surfaceStrategies`, `colliderRadius`, metadata, callbacks |
 | [`Line`](/docs/snapline/reference/svelte/line)      | `line`, SVG presentation                                                                               |
 | [`Select`](/docs/snapline/reference/svelte/select)    | `callbacks`, `className`                                                                               |
@@ -39,4 +39,4 @@ without replacing the logical connector or its lines. `name` and
 
 Changed geometry props resynchronize the object deliberately. During a live
 pointer gesture core writes retained element geometry directly; the batched
-`onGeometryChanged` reports final values for application persistence.
+`onGeometryCommit` reports final values for application persistence.
diff --git a/docs/snapline/reference/svelte/node.mdx b/docs/snapline/reference/svelte/node.mdx
index af8fe4f..9b10fb6 100644
--- a/docs/snapline/reference/svelte/node.mdx
+++ b/docs/snapline/reference/svelte/node.mdx
@@ -23,7 +23,7 @@ frameworkKey: node
 | `resizeCursors` | Per-handle cursor overrides |
 | `metadata` | `SnapLineMetadata` attached to the node |
 | `callbacks` | `NodeCallbacks` object (drag, selection, resize, lines) |
-| `onGeometryChanged` | Convenience callback; batched final geometry for persistence |
+| `onGeometryCommit` | Convenience callback; batched final geometry for persistence |
 | `onSizeChange` | Convenience callback for resize events |
 | `edgePan` | Pan the camera when dragging near the viewport edge (default `true`) |
 | `LineSvelteComponent` | Custom line renderer used for this node's outgoing lines (defaults to `Line`) |
@@ -36,7 +36,7 @@ is not destroyed on unmount.
 
 Convenience callbacks compose with their `callbacks`-object equivalents rather
 than replacing them. During a live pointer gesture, core writes retained
-element geometry directly; the batched `onGeometryChanged` reports final
+element geometry directly; the batched `onGeometryCommit` reports final
 values for application persistence.
 
 The rendered element carries `data-snapline-type="node"` and
diff --git a/docs/snapline/reference/vanilla/node.mdx b/docs/snapline/reference/vanilla/node.mdx
index 003ac09..ba49fc4 100644
--- a/docs/snapline/reference/vanilla/node.mdx
+++ b/docs/snapline/reference/vanilla/node.mdx
@@ -20,7 +20,7 @@ supply it for persistence), `resizable`, `minWidth`, `minHeight`,
 `NodeCallbacks` covers drag (`canStartDrag`, `resolveDragPosition`,
 `onDragStart`, `onDrag`), selection (`resolveSelectionMode`,
 `onSelectionChange`), resize (`onResizeHandleChange`, `onSizeChange`), lines
-(`onLinesChanged`), and the batched `onGeometryChanged` used for
+(`onLinesChanged`), and the batched `onGeometryCommit` used for
 persistence.
 
 ## Resize constants
diff --git a/package.json b/package.json
index 176ccf5..e998dc9 100755
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "test:camera-control": "playwright test -c tests/e2e/camera-control.playwright.config.ts",
     "test:camera-control-react": "playwright test -c tests/e2e/camera-control-react.playwright.config.ts",
     "test:asset-base-react": "playwright test -c tests/e2e/asset-base-react.playwright.config.ts",
+    "test:snapline-ut": "playwright test tests/ut/snapline-*.spec.ts --project=chromium",
     "test:snapline": "playwright test -c tests/e2e/snapline.playwright.config.ts",
     "test:snapline-edges": "playwright test -c tests/e2e/snapline-edges.playwright.config.ts",
     "test:snapline-camera": "playwright test -c tests/e2e/snapline-camera.playwright.config.ts",
diff --git a/tests/ut/snapline-observers.spec.ts b/tests/ut/snapline-observers.spec.ts
new file mode 100644
index 0000000..293f407
--- /dev/null
+++ b/tests/ut/snapline-observers.spec.ts
@@ -0,0 +1,171 @@
+import { expect, test } from "@playwright/test";
+import { ConnectorMirror, NodeMirror } from "../../assets/snapline/core/src";
+
+import {
+  createEngineHarness,
+  installObserverStubs,
+} from "../helpers/snapline-harness";
+
+/** Tasks queued for one object at one stage, keyed by their queueId. */
+function queuedIds(global: any, stage: string, objectId: string): string[] {
+  const perObject = global.queue[stage].get(objectId);
+  return perObject ? [...perObject.keys()] : [];
+}
+
+function mountPair() {
+  const { engine, global } = createEngineHarness();
+  const sourceNode = new NodeMirror(engine, null);
+  const targetNode = new NodeMirror(engine, null);
+  const source = new ConnectorMirror(engine, sourceNode, {
+    id: "obs-out",
+    name: "source",
+    rules: { maxIncoming: 0 },
+  });
+  const target = new ConnectorMirror(engine, targetNode, {
+    id: "obs-in",
+    name: "target",
+    rules: { maxOutgoing: 0 },
+  });
+  sourceNode.addConnectorObject(source);
+  targetNode.addConnectorObject(target);
+  return { engine, global, sourceNode, targetNode, source, target };
+}
+
+test("line geometry observers are multicast, and unsubscribing detaches only that one", () => {
+  const { source } = mountPair();
+  const line = source.createLine();
+  const first: number[] = [];
+  const second: number[] = [];
+
+  const stopFirst = line.onGeometryInvalidated(() => first.push(1));
+  line.onGeometryInvalidated(() => second.push(1));
+
+  // No priming call: subscribing invalidates nothing.
+  expect(first).toEqual([]);
+  expect(second).toEqual([]);
+
+  line.invalidateGeometry();
+  expect(first).toEqual([1]);
+  expect(second).toEqual([1]);
+
+  stopFirst();
+  line.invalidateGeometry();
+  expect(first).toEqual([1]);
+  expect(second).toEqual([1, 1]);
+
+  line.destroy(false);
+});
+
+test("the line signal fires synchronously BEFORE the write task is queued", () => {
+  const { global, source } = mountPair();
+  const line = source.createLine();
+  let queuedAtNotifyTime: string[] | null = null;
+
+  line.onGeometryInvalidated(() => {
+    queuedAtNotifyTime = queuedIds(global, "WRITE_2", line.id);
+  });
+
+  expect(queuedIds(global, "WRITE_2", line.id)).toEqual([]);
+  line.invalidateGeometry();
+
+  // The whole point of the design: the observer runs early enough to schedule
+  // its own work into any stage, including one that runs before the line's.
+  expect(queuedAtNotifyTime).toEqual([]);
+  expect(queuedIds(global, "WRITE_2", line.id)).toEqual([
+    `${line.id}-transform`,
+  ]);
+
+  line.destroy(false);
+});
+
+test("a throwing observer stops neither its peers nor the paint", () => {
+  const { source } = mountPair();
+  const line = source.createLine();
+  const survived: number[] = [];
+  const painted: number[] = [];
+  const errors: unknown[] = [];
+  const originalError = console.error;
+  console.error = (...args: unknown[]) => errors.push(args);
+
+  try {
+    line.onGeometryInvalidated(() => {
+      throw new Error("observer blew up");
+    });
+    line.onGeometryInvalidated(() => survived.push(1));
+    line.bindGeometryWriter(() => painted.push(1));
+
+    line.invalidateGeometryNow();
+  } finally {
+    console.error = originalError;
+  }
+
+  expect(survived).toEqual([1]);
+  expect(errors).toHaveLength(1);
+  // bindGeometryWriter primes once on bind, then paints once here.
+  expect(painted).toEqual([1, 1]);
+
+  line.destroy(false);
+});
+
+test("a node drag signals every node in the transform tree, not just the dragged one", () => {
+  const restoreObservers = installObserverStubs();
+  try {
+    const { engine } = createEngineHarness();
+    const parent = new NodeMirror(engine, null);
+    const carried = new NodeMirror(engine, null);
+    // Group carry and multi-select both move peers through the transform tree,
+    // which is exactly what NodeCallbacks.onDrag fails to report.
+    carried.attachTransformToGroup(parent);
+
+    const parentHits: number[] = [];
+    const carriedHits: number[] = [];
+    parent.onGeometryInvalidated(() => parentHits.push(1));
+    carried.onGeometryInvalidated(() => carriedHits.push(1));
+
+    parent.scheduleTransformAndLines();
+
+    expect(parentHits).toEqual([1]);
+    expect(carriedHits).toEqual([1]);
+
+    carried.destroy(false);
+    parent.destroy(false);
+  } finally {
+    restoreObservers();
+  }
+});
+
+test("a resize signals the node, and its snapshot reports authored size", () => {
+  const restoreObservers = installObserverStubs();
+  try {
+    const { engine } = createEngineHarness();
+    const node = new NodeMirror(engine, null, { minWidth: 40, minHeight: 20 });
+    const seen: Array<{ width: number; height: number }> = [];
+
+    node.worldTransform = { x: 7, y: 11 };
+    node.onGeometryInvalidated((source) => {
+      const geometry = source.geometrySnapshot();
+      seen.push({ width: geometry.width, height: geometry.height });
+    });
+
+    node.setSize(120, 80);
+    node.setSize(10, 5); // below the clamp
+
+    // Authored size, read in the same tick it was authored — never the
+    // previously rendered hitBox, which a READ_1 remeasure can overwrite
+    // between authoring and paint.
+    expect(seen).toEqual([
+      { width: 120, height: 80 },
+      { width: 40, height: 20 },
+    ]);
+    expect(node.geometrySnapshot()).toEqual({
+      x: 7,
+      y: 11,
+      width: 40,
+      height: 20,
+    });
+
+    node.destroy(false);
+  } finally {
+    restoreObservers();
+  }
+});

From 83c68de662ccef17229e22dcd455268cca08f58f Mon Sep 17 00:00:00 2001
From: tfukaza <tfukaza@git.com>
Date: Mon, 27 Jul 2026 21:38:56 -0700
Subject: [PATCH 04/10] =?UTF-8?q?snapline:=20Phase=203a/3c=20=E2=80=94=20t?=
 =?UTF-8?q?he=20request=20returns=20the=20next=20document?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

onLineChangeRequest now RETURNS the line list that should be canonical, and
the bridge hands it straight to setCanonicalGraph. The `lines` prop is gone
from both adapters, along with both queueMicrotask pushes and
GraphRegistry.pendingGestureRequest.

Why the microtask existed, and why returning removes the need for it: a
dropped line is staged — visually targeted, no topology commitment — so its
only exit is the next reconcile pass, which either settles it or discards it
in the end-of-pass sweep. The reconciler has no pull channel. If the app
rejected by doing nothing, no prop changed, no effect fired, no push
happened, and the staged line hung forever; the unconditional post-request
push closed that hole. Making the handler return the list closes it
structurally instead, and takes three fragilities with it: the React
adapter's correctness rested on an inference about React internals (that the
handler's setState flushes and re-renders the props ref before microtasks
drain — true for React 18 discrete events, not a contract); an ordering
hazard where the decisive pass could be queued ahead of the adapter's push;
and pendingGestureRequest, which gated nothing and only warned about a
stalled push whose failure mode no longer exists.

Rejection is now `return lines` — strictly better than the old bare
`return`, because "I reject" and "I forgot" stop being the same code. The
return type is non-optional so the second one is a type error.

Adds applyLineChange(lines, request) to core, replacing a reducer that was
byte-identical across nine sites (three doc variants, migration notes, the
website demo, two Svelte demos, two React demos).

Both adapters gain the imperative handle the protocol always needed for
changes with no originating request — hydration/load, undo/redo,
collaboration. Svelte exports setLines/flush (it exported nothing before);
React is now forwardRef<ControlledGraphHandle> instead of a plain function
returning null, which also makes AGENTS.md's claim about forwarded refs true.

Consumers migrated. Note the React idiom the synchronous return forces: the
document lives in a ref, because a functional setState has not produced the
next list by the time the handler must return it. Svelte demos move to
$state.raw, since applyLineChange replaces rather than mutates.

The demos' addDocLine stays app code rather than becoming a core helper: its
"replace any record sharing toConnectorId" step is single-capacity policy the
application owns, not a request being applied.

Test harness now stands in for a document: it tracks the records, defaults to
rejection (return unchanged), and offers respondWith for accept/normalize.
All 33 unit and 58 e2e tests pass with no assertion changes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 assets/snapline/AGENTS.md                     |   9 +-
 assets/snapline/core/src/connector.ts         |  18 +--
 assets/snapline/core/src/controlled-graph.ts  |  48 +++++-
 assets/snapline/core/src/index.ts             |   2 +-
 .../core/src/internal/graph-registry.ts       |   4 -
 .../core/src/internal/line-reconciler.ts      |  15 +-
 assets/snapline/core/src/types.ts             |  19 ++-
 assets/snapline/react/src/ControlledGraph.tsx |  61 +++----
 assets/snapline/react/src/index.ts            |   7 +-
 .../svelte/src/ControlledGraph.svelte         |  35 ++--
 demo/react/src/App.jsx                        | 153 ++++++++++--------
 .../src/demo/node_ui_demo/DemoGraph.svelte    |  28 ++--
 .../demo/node_ui_edges/NodeUIEdgesDemo.svelte |  44 ++---
 docs/snapline/design/current-architecture.md  |  28 ++--
 docs/snapline/design/migration-notes.md       |  10 +-
 .../snapline/guides/06_surface_connectors.mdx |   6 +-
 docs/snapline/introduction/01_setup.mdx       |  75 ++++-----
 .../reference/react/controlled-graph.mdx      |  39 +++--
 docs/snapline/reference/react/index.mdx       |   2 +-
 .../reference/svelte/controlled-graph.mdx     |  42 ++++-
 docs/snapline/reference/svelte/index.mdx      |   2 +-
 .../reference/vanilla/controlled-graph.mdx    |  24 ++-
 tests/helpers/snapline-harness.ts             |  54 ++++++-
 .../lib/components/docs/SnapLineDemo.svelte   |  23 +--
 24 files changed, 457 insertions(+), 291 deletions(-)

diff --git a/assets/snapline/AGENTS.md b/assets/snapline/AGENTS.md
index 0b9ffde..85f210c 100644
--- a/assets/snapline/AGENTS.md
+++ b/assets/snapline/AGENTS.md
@@ -298,10 +298,11 @@ both endpoints' `isValidConnection` with the real `LineMirror`), stages the
 outcome on the same mirror (phase `"staged"`, no topology commitment), and
 dispatches ONE atomic `LineChangeRequest`
 (`{ intent: connect|disconnect|replace|reconnect, add, remove, update }` —
-`replace-oldest` evictions ride the request, never local deletes). Adapters
-GUARANTEE a post-request microtask push of the live records ahead of the
-decisive pass, so acceptance, normalization, rejection, and
-rejection-by-inaction all resolve from the next snapshot — adopting the
+`replace-oldest` evictions ride the request, never local deletes). `onLineChangeRequest`
+RETURNS the line list that should now be canonical, and the bridge adopts it
+synchronously — so exactly one decisive pass runs per request, acceptance and
+rejection alike, with no dependence on when a framework flushes state.
+Rejection is returning the list unchanged; adopting the
 proposed `lineId` settles the dragged line in place; rejection needs no code
 path. Consumers should write their document synchronously inside the request
 handler; deferred stores degrade to a one-frame pending state, never an
diff --git a/assets/snapline/core/src/connector.ts b/assets/snapline/core/src/connector.ts
index 0f4a852..c2401db 100644
--- a/assets/snapline/core/src/connector.ts
+++ b/assets/snapline/core/src/connector.ts
@@ -851,18 +851,12 @@ class ConnectorMirror extends ElementObject {
   }
 
   #dispatchRequest(request: LineChangeRequest): void {
-    const mirror = getGraphRegistry(this.engine);
-    if (mirror.pendingGestureRequest) {
-      console.warn(
-        "SnapLine: a line-change request is already in flight; gestures are serial, so this indicates a stalled adapter push.",
-      );
-    }
-    mirror.pendingGestureRequest = true;
-    mirror.reconciler?.dispatchLineChangeRequest?.(request);
-    // The decisive pass runs after the adapter's post-request push — the
-    // adapter queues its push inside the dispatch above, ahead of this
-    // scheduled microtask.
-    mirror.scheduleReconciliation();
+    // The dispatch itself adopts the application's returned line list, so the
+    // decisive pass this schedules always sees the app's answer — including
+    // rejection, which returns the list unchanged.
+    const registry = getGraphRegistry(this.engine);
+    registry.reconciler?.dispatchLineChangeRequest?.(request);
+    registry.scheduleReconciliation();
   }
 
   /** @internal Reconciler-only: settle a staged gesture line onto its
diff --git a/assets/snapline/core/src/controlled-graph.ts b/assets/snapline/core/src/controlled-graph.ts
index 37f4606..4072b5f 100644
--- a/assets/snapline/core/src/controlled-graph.ts
+++ b/assets/snapline/core/src/controlled-graph.ts
@@ -1,6 +1,52 @@
 import { LineReconciler } from "./internal/line-reconciler";
 import { getGraphRegistry } from "./internal/shared-data";
-import type { ControlledGraphCallbacks, ControlledGraphHandle } from "./types";
+import type {
+  ControlledGraphCallbacks,
+  ControlledGraphHandle,
+  LineChangeRequest,
+  LineRecord,
+} from "./types";
+
+/**
+ * Apply one atomic {@link LineChangeRequest} to a line list, returning a new
+ * list. This is the whole body of a typical `onLineChangeRequest`:
+ *
+ * ```ts
+ * onLineChangeRequest={(r) => (lines = applyLineChange(lines, r))}
+ * ```
+ *
+ * Removals are dropped, endpoint updates are applied, and additions are
+ * appended — in that order, as one commit. `intent` is not consulted: it
+ * describes the gesture for logging, and the three lists already say what to
+ * do.
+ *
+ * **Adopt the proposed ids.** `request.add` carries SnapLine-minted ids;
+ * keeping them settles the dragged line in place with no flicker. Substituting
+ * your own id works, but recreates the mirror.
+ *
+ * Consumer-owned fields survive an update (the record is spread), but cannot
+ * be invented for an addition — seed those at drag start with the node's
+ * `resolveNewLine`, and they ride into `request.add` for you.
+ *
+ * Replace-not-mutate by construction: every call builds a new array, which is
+ * what makes `$state.raw` safe for the list in Svelte.
+ */
+export function applyLineChange<T extends LineRecord>(
+  lines: readonly T[],
+  request: LineChangeRequest,
+): T[] {
+  const removed = new Set(request.remove);
+  const next: T[] = [];
+  for (const record of lines) {
+    if (removed.has(record.id)) continue;
+    const update = request.update.find((entry) => entry.id === record.id);
+    next.push(
+      update ? { ...record, toConnectorId: update.toConnectorId } : record,
+    );
+  }
+  for (const addition of request.add) next.push(addition as unknown as T);
+  return next;
+}
 
 /**
  * Attach the controlled-graph bridge: declares "controlled" authority,
diff --git a/assets/snapline/core/src/index.ts b/assets/snapline/core/src/index.ts
index 0099a7a..f4033b1 100644
--- a/assets/snapline/core/src/index.ts
+++ b/assets/snapline/core/src/index.ts
@@ -91,7 +91,7 @@ export type {
   PlacementSize,
   PlacementSnapshot,
 } from "./placement";
-export { attachControlledGraph } from "./controlled-graph";
+export { applyLineChange, attachControlledGraph } from "./controlled-graph";
 export { getGraphRegistry } from "./internal/shared-data";
 export type {
   CanonicalGraphSnapshot,
diff --git a/assets/snapline/core/src/internal/graph-registry.ts b/assets/snapline/core/src/internal/graph-registry.ts
index f392fe5..3dc363a 100644
--- a/assets/snapline/core/src/internal/graph-registry.ts
+++ b/assets/snapline/core/src/internal/graph-registry.ts
@@ -59,10 +59,6 @@ export class GraphRegistry {
   // reach it through this slot.
   reconciler: GraphReconcilerLike | null = null;
 
-  /** @internal One in-flight gesture request per engine (gestures are
-   * serial); cleared by the next reconciliation pass. */
-  pendingGestureRequest = false;
-
   #reconciliationQueued = false;
   #batchDepth = 0;
   #batchDirty = false;
diff --git a/assets/snapline/core/src/internal/line-reconciler.ts b/assets/snapline/core/src/internal/line-reconciler.ts
index 6a2b20e..932d67e 100644
--- a/assets/snapline/core/src/internal/line-reconciler.ts
+++ b/assets/snapline/core/src/internal/line-reconciler.ts
@@ -39,9 +39,19 @@ export class LineReconciler {
     if (this.#mirror.reconciler === this) this.#mirror.reconciler = null;
   }
 
-  /** Forward a gesture's atomic proposal to the application. */
+  /**
+   * Forward a gesture's atomic proposal to the application and adopt whatever
+   * it returns as the new canonical state.
+   *
+   * Synchronous and unconditional, which is what makes the protocol's
+   * invariants structural rather than timed: exactly one decisive pass per
+   * request (including a rejected one, since the end-of-pass sweep is
+   * snapshot-driven, not flag-driven), and no dependence on when a framework
+   * happens to flush its state.
+   */
   dispatchLineChangeRequest(request: LineChangeRequest): void {
-    this.#callbacks.onLineChangeRequest(request);
+    const lines = this.#callbacks.onLineChangeRequest(request);
+    this.setCanonicalGraph({ lines });
   }
 
   /** One pass: prune, preserve/retarget by stable id, create, report. */
@@ -156,7 +166,6 @@ export class LineReconciler {
       }
     } finally {
       this.#reconciling = false;
-      mirror.pendingGestureRequest = false;
     }
 
     if (mirror.setReconciliationErrors(errors)) {
diff --git a/assets/snapline/core/src/types.ts b/assets/snapline/core/src/types.ts
index 4883529..2f7fc9c 100644
--- a/assets/snapline/core/src/types.ts
+++ b/assets/snapline/core/src/types.ts
@@ -87,7 +87,24 @@ export interface LineChangeRequest {
 }
 
 export interface ControlledGraphCallbacks {
-  onLineChangeRequest(request: LineChangeRequest): void;
+  /**
+   * One atomic proposal per gesture. **Return the line list that should now be
+   * canonical** — the bridge hands it straight to the reconciler, so exactly
+   * one decisive pass runs per request whether you accept, normalize, or
+   * reject.
+   *
+   * ```ts
+   * onLineChangeRequest: (r) => (lines = applyLineChange(lines, r))
+   * ```
+   *
+   * To reject, return the list unchanged (`return lines`). The return type is
+   * non-optional on purpose: "I reject" and "I forgot to return anything" used
+   * to be the same code, and this makes the second one a type error.
+   *
+   * Must be synchronous — the staged preview line is resolved by the pass that
+   * follows this call.
+   */
+  onLineChangeRequest(request: LineChangeRequest): readonly LineRecord[];
   onDiagnosticsChanged?(diagnostics: readonly ReconciliationError[]): void;
 }
 
diff --git a/assets/snapline/react/src/ControlledGraph.tsx b/assets/snapline/react/src/ControlledGraph.tsx
index 2315e2c..b263f4e 100644
--- a/assets/snapline/react/src/ControlledGraph.tsx
+++ b/assets/snapline/react/src/ControlledGraph.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import {
   attachControlledGraph,
   type ControlledGraphHandle,
@@ -9,53 +9,54 @@ import {
 import { useSnapLineEngine } from "./Engine";
 
 export interface ControlledGraphProps {
-  /** The application-owned canonical line records (stable ids). */
-  lines: readonly LineRecord[];
-  /** One atomic proposal per gesture; accept/normalize/reject by updating
-   * the records — adopting a proposed id settles the line in place. */
-  onLineChangeRequest: (request: LineChangeRequest) => void;
+  /** One atomic proposal per gesture. Return the list that should now be
+   * canonical — adopting a proposed id settles the line in place; returning
+   * the list unchanged rejects. Must be synchronous. */
+  onLineChangeRequest: (request: LineChangeRequest) => readonly LineRecord[];
   onDiagnosticsChanged?: (diagnostics: readonly ReconciliationError[]) => void;
 }
 
-export function ControlledGraph({
-  lines,
-  onLineChangeRequest,
-  onDiagnosticsChanged,
-}: ControlledGraphProps) {
+/**
+ * The app↔SnapLine bridge. Renders nothing.
+ *
+ * Gesture-driven changes flow through `onLineChangeRequest`'s return value.
+ * For records no request asked for — hydration/load, undo/redo, a
+ * collaborator's edit — take a ref and call `setLines`.
+ */
+export const ControlledGraph = forwardRef<
+  ControlledGraphHandle,
+  ControlledGraphProps
+>(function ControlledGraph({ onLineChangeRequest, onDiagnosticsChanged }, ref) {
   const engine = useSnapLineEngine();
   // Written during render so the bridge's closures always read fresh props.
-  const propsRef = useRef({ lines, onLineChangeRequest, onDiagnosticsChanged });
-  propsRef.current = { lines, onLineChangeRequest, onDiagnosticsChanged };
+  const propsRef = useRef({ onLineChangeRequest, onDiagnosticsChanged });
+  propsRef.current = { onLineChangeRequest, onDiagnosticsChanged };
   const handleRef = useRef<ControlledGraphHandle | null>(null);
 
   useEffect(() => {
     const handle = attachControlledGraph(engine, {
-      onLineChangeRequest: (request) => {
-        propsRef.current.onLineChangeRequest(request);
-        // Guaranteed post-request push: React flushes the handler's state
-        // update (and re-renders propsRef) before this microtask runs, so
-        // the decisive pass sees the app's decision — including
-        // rejection-by-inaction, where the unchanged records come through.
-        queueMicrotask(() =>
-          handleRef.current?.setCanonicalGraph({
-            lines: propsRef.current.lines,
-          }),
-        );
-      },
+      onLineChangeRequest: (request) =>
+        propsRef.current.onLineChangeRequest(request),
       onDiagnosticsChanged: (diagnostics) =>
         propsRef.current.onDiagnosticsChanged?.(diagnostics),
     });
     handleRef.current = handle;
-    handle.setCanonicalGraph({ lines: propsRef.current.lines });
     return () => {
       handle.dispose();
       handleRef.current = null;
     };
   }, [engine]);
 
-  useEffect(() => {
-    handleRef.current?.setCanonicalGraph({ lines });
-  }, [lines]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      setCanonicalGraph: (snapshot) =>
+        handleRef.current?.setCanonicalGraph(snapshot),
+      flush: () => handleRef.current?.flush(),
+      dispose: () => handleRef.current?.dispose(),
+    }),
+    [],
+  );
 
   return null;
-}
+});
diff --git a/assets/snapline/react/src/index.ts b/assets/snapline/react/src/index.ts
index fb96913..e620806 100644
--- a/assets/snapline/react/src/index.ts
+++ b/assets/snapline/react/src/index.ts
@@ -1,6 +1,11 @@
 export { Connector } from "./Connector";
 export type { ConnectorProps, ConnectorRef } from "./Connector";
-export { Engine, EngineContext, SnapLineEngine, useSnapLineEngine } from "./Engine";
+export {
+  Engine,
+  EngineContext,
+  SnapLineEngine,
+  useSnapLineEngine,
+} from "./Engine";
 export type { EngineProps } from "./Engine";
 export { Group } from "./Group";
 export type { GroupProps } from "./Group";
diff --git a/assets/snapline/svelte/src/ControlledGraph.svelte b/assets/snapline/svelte/src/ControlledGraph.svelte
index 9a30fbb..4007d38 100644
--- a/assets/snapline/svelte/src/ControlledGraph.svelte
+++ b/assets/snapline/svelte/src/ControlledGraph.svelte
@@ -9,15 +9,13 @@
   import { getContext, onDestroy } from "svelte";
 
   let {
-    lines,
     onLineChangeRequest,
     onDiagnosticsChanged = undefined,
   }: {
-    /** The application-owned canonical line records (stable ids). */
-    lines: readonly LineRecord[];
-    /** One atomic proposal per gesture; accept/normalize/reject by updating
-     * the records — adopting a proposed id settles the line in place. */
-    onLineChangeRequest: (request: LineChangeRequest) => void;
+    /** One atomic proposal per gesture. Return the list that should now be
+     * canonical — adopting a proposed id settles the line in place; returning
+     * the list unchanged rejects. Must be synchronous. */
+    onLineChangeRequest: (request: LineChangeRequest) => readonly LineRecord[];
     onDiagnosticsChanged?: (
       diagnostics: readonly ReconciliationError[],
     ) => void;
@@ -25,20 +23,25 @@
 
   const engine: Engine = getContext("engine");
   const handle = attachControlledGraph(engine, {
-    onLineChangeRequest: (request) => {
-      onLineChangeRequest(request);
-      // Guaranteed post-request push: reads the live prop after the app's
-      // synchronous document update, queued ahead of the decisive
-      // reconciliation pass so acceptance and rejection both resolve
-      // without timing inference.
-      queueMicrotask(() => handle.setCanonicalGraph({ lines }));
-    },
+    onLineChangeRequest: (request) => onLineChangeRequest(request),
     onDiagnosticsChanged: (diagnostics) => onDiagnosticsChanged?.(diagnostics),
   });
 
-  $effect(() => {
+  /**
+   * Push records that no originating request asked for: hydration/load,
+   * undo/redo, or a collaborator's edit. Reach it with `bind:this`.
+   *
+   * Gesture-driven changes need none of this — returning the list from
+   * `onLineChangeRequest` already delivers them.
+   */
+  export function setLines(lines: readonly LineRecord[]): void {
     handle.setCanonicalGraph({ lines });
-  });
+  }
+
+  /** Run any pending reconciliation synchronously (tests, imperative flows). */
+  export function flush(): void {
+    handle.flush();
+  }
 
   onDestroy(() => handle.dispose());
 </script>
diff --git a/demo/react/src/App.jsx b/demo/react/src/App.jsx
index b3a9c58..77ae32e 100644
--- a/demo/react/src/App.jsx
+++ b/demo/react/src/App.jsx
@@ -5,7 +5,8 @@ import {
   Node,
   Select,
 } from "@snap-engine/snapline-react";
-import { useCallback, useState } from "react";
+import { applyLineChange } from "@snap-engine/snapline";
+import { useCallback, useRef, useState } from "react";
 import { Engine as SnapEngine } from "@snap-engine/asset-base-react";
 import {
   DropSnapNestedDemo,
@@ -20,21 +21,16 @@ import AssetBaseReactDemo from "./AssetBaseReactDemo";
 // The demo's canonical line document: topology is always controlled, so
 // even a sandbox owns its lines and accepts every atomic proposal.
 function DemoGraph() {
-  const [lines, setLines] = useState([]);
-  const applyRequest = useCallback((request) => {
-    setLines((current) => [
-      ...current
-        .filter((record) => !request.remove.includes(record.id))
-        .map((record) => {
-          const update = request.update.find((u) => u.id === record.id);
-          return update
-            ? { ...record, toConnectorId: update.toConnectorId }
-            : record;
-        }),
-      ...request.add,
-    ]);
-  }, []);
-  return <ControlledGraph lines={lines} onLineChangeRequest={applyRequest} />;
+  // The handler must return the next list synchronously, so the document lives
+  // in a ref: a functional setState would not have produced it in time. Nothing
+  // here renders the records, so no component state is needed at all.
+  const linesRef = useRef([]);
+  const applyRequest = useCallback(
+    (request) =>
+      (linesRef.current = applyLineChange(linesRef.current, request)),
+    [],
+  );
+  return <ControlledGraph onLineChangeRequest={applyRequest} />;
 }
 
 function ResizableNode({ title, id = title, x, y }) {
@@ -54,14 +50,26 @@ function ResizableNode({ title, id = title, x, y }) {
       <div className="node-body" style={{ flex: 1 }}>
         <div className="input-row">
           <div className="connector-wrapper">
-            <Connector id={`${id}:input`} name="input" rules={{ maxOutgoing: 0, maxIncoming: 1, onFull: "replace-oldest" }} />
+            <Connector
+              id={`${id}:input`}
+              name="input"
+              rules={{
+                maxOutgoing: 0,
+                maxIncoming: 1,
+                onFull: "replace-oldest",
+              }}
+            />
           </div>
           <span>Input</span>
         </div>
         <div className="output-row">
           <span>Output</span>
           <div className="connector-wrapper">
-            <Connector id={`${id}:output`} name="output" rules={{ maxIncoming: 0 }} />
+            <Connector
+              id={`${id}:output`}
+              name="output"
+              rules={{ maxIncoming: 0 }}
+            />
           </div>
         </div>
       </div>
@@ -129,14 +137,26 @@ function SimpleNode({ title, id = title, x, y }) {
       <div className="node-body">
         <div className="input-row">
           <div className="connector-wrapper">
-            <Connector id={`${id}:input`} name="input" rules={{ maxOutgoing: 0, maxIncoming: 1, onFull: "replace-oldest" }} />
+            <Connector
+              id={`${id}:input`}
+              name="input"
+              rules={{
+                maxOutgoing: 0,
+                maxIncoming: 1,
+                onFull: "replace-oldest",
+              }}
+            />
           </div>
           <span>Input</span>
         </div>
         <div className="output-row">
           <span>Output</span>
           <div className="connector-wrapper">
-            <Connector id={`${id}:output`} name="output" rules={{ maxIncoming: 0 }} />
+            <Connector
+              id={`${id}:output`}
+              name="output"
+              rules={{ maxIncoming: 0 }}
+            />
           </div>
         </div>
       </div>
@@ -152,24 +172,15 @@ export default function App() {
     return <AssetBaseReactDemo />;
   }
 
-  if (
-    path === "/snapsort-insertion" ||
-    demo === "snapsort_insertion"
-  ) {
+  if (path === "/snapsort-insertion" || demo === "snapsort_insertion") {
     return <SnapSortInsertionDemo />;
   }
 
-  if (
-    path === "/snapsort-website-core" ||
-    demo === "snapsort_website_core"
-  ) {
+  if (path === "/snapsort-website-core" || demo === "snapsort_website_core") {
     return <SnapSortWebsiteCoreDemo />;
   }
 
-  if (
-    path === "/snapsort-components" ||
-    demo === "snapsort_components"
-  ) {
+  if (path === "/snapsort-components" || demo === "snapsort_components") {
     return <SnapSortComponentsDemo />;
   }
 
@@ -215,7 +226,11 @@ function GraphNode({ nodeId, title, x, y, maxIncoming = 1 }) {
             <Connector
               id={`${nodeId}:input`}
               name="input"
-              rules={{ maxOutgoing: 0, maxIncoming: maxIncoming === -1 ? "unlimited" : maxIncoming, onFull: "replace-oldest" }}
+              rules={{
+                maxOutgoing: 0,
+                maxIncoming: maxIncoming === -1 ? "unlimited" : maxIncoming,
+                onFull: "replace-oldest",
+              }}
             />
           </div>
           <span>Input</span>
@@ -239,22 +254,34 @@ function SnapLineEdgesDemo() {
   const [lines, setLines] = useState([]);
   const [connectIntents, setConnectIntents] = useState(0);
   const [intentLog, setIntentLog] = useState([]);
+  // The document also drives rendering (edge-count), so it is mirrored into a
+  // ref the synchronous handler can read.
+  const linesRef = useRef(lines);
+  const graphRef = useRef(null);
 
-  const addDocLine = (record) =>
-    setLines((current) =>
-      current.some((existing) => existing.id === record.id)
-        ? current
-        : [
-            ...current.filter(
-              (existing) => existing.toConnectorId !== record.toConnectorId,
-            ),
-            record,
-          ],
-    );
+  const commit = useCallback((next) => {
+    linesRef.current = next;
+    setLines(next);
+    return next;
+  }, []);
+
+  // No originating request, so this one has to be pushed through the handle.
+  const addDocLine = (record) => {
+    const current = linesRef.current;
+    if (current.some((existing) => existing.id === record.id)) return;
+    const next = commit([
+      ...current.filter(
+        (existing) => existing.toConnectorId !== record.toConnectorId,
+      ),
+      record,
+    ]);
+    graphRef.current?.setCanonicalGraph({ lines: next });
+  };
 
-  const handleRequest = useCallback((request) => {
-    const nodeOf = (connectorId) => connectorId.split(":")[0];
-    setLines((current) => {
+  const handleRequest = useCallback(
+    (request) => {
+      const nodeOf = (connectorId) => connectorId.split(":")[0];
+      const current = linesRef.current;
       const byId = new Map(current.map((record) => [record.id, record]));
       const label = (record) =>
         `${nodeOf(record.fromConnectorId)}->${nodeOf(record.toConnectorId)}`;
@@ -265,7 +292,10 @@ function SnapLineEdgesDemo() {
       const updated = request.update
         .map((update) =>
           byId.has(update.id)
-            ? label({ ...byId.get(update.id), toConnectorId: update.toConnectorId })
+            ? label({
+                ...byId.get(update.id),
+                toConnectorId: update.toConnectorId,
+              })
             : update.id,
         )
         .join(",");
@@ -281,19 +311,10 @@ function SnapLineEdgesDemo() {
       if (request.add.length > 0) setConnectIntents((count) => count + 1);
       // Accept the atomic proposal — adopting the proposed ids settles the
       // staged lines in place.
-      return [
-        ...current
-          .filter((record) => !request.remove.includes(record.id))
-          .map((record) => {
-            const update = request.update.find((u) => u.id === record.id);
-            return update
-              ? { ...record, toConnectorId: update.toConnectorId }
-              : record;
-          }),
-        ...request.add,
-      ];
-    });
-  }, []);
+      return commit(applyLineChange(current, request));
+    },
+    [commit],
+  );
 
   return (
     <main className="snapline-demo">
@@ -318,9 +339,15 @@ function SnapLineEdgesDemo() {
         <div id="node-ui-demo">
           <div id="sl-background" />
           <Select />
-          <ControlledGraph lines={lines} onLineChangeRequest={handleRequest} />
+          <ControlledGraph ref={graphRef} onLineChangeRequest={handleRequest} />
           <GraphNode nodeId="a" title="Node A" x={120} y={120} />
-          <GraphNode nodeId="b" title="Node B" x={440} y={170} maxIncoming={1} />
+          <GraphNode
+            nodeId="b"
+            title="Node B"
+            x={440}
+            y={170}
+            maxIncoming={1}
+          />
           <GraphNode nodeId="c" title="Node C" x={280} y={380} />
         </div>
       </SnapEngine>
diff --git a/demo/svelte/src/demo/node_ui_demo/DemoGraph.svelte b/demo/svelte/src/demo/node_ui_demo/DemoGraph.svelte
index da78b91..eed3660 100644
--- a/demo/svelte/src/demo/node_ui_demo/DemoGraph.svelte
+++ b/demo/svelte/src/demo/node_ui_demo/DemoGraph.svelte
@@ -1,26 +1,16 @@
 <script lang="ts">
   import { ControlledGraph } from "@snap-engine/snapline-svelte";
-  import type { LineChangeRequest, LineRecord } from "@snap-engine/snapline";
+  import { applyLineChange } from "@snap-engine/snapline";
+  import type { LineRecord } from "@snap-engine/snapline";
 
   // The demo's canonical line document: topology is always controlled, so
   // even a sandbox owns its lines and accepts every atomic proposal.
-  let lines = $state<LineRecord[]>([]);
-
-  function applyRequest(request: LineChangeRequest): void {
-    lines = [
-      ...lines
-        .filter((record) => !request.remove.includes(record.id))
-        .map((record) => {
-          const update = request.update.find(
-            (entry) => entry.id === record.id,
-          );
-          return update
-            ? { ...record, toConnectorId: update.toConnectorId }
-            : record;
-        }),
-      ...request.add,
-    ];
-  }
+  // $state.raw because the update pattern is replace-not-mutate — applyLineChange
+  // always builds a new array — so deep proxies would be pure overhead, and
+  // they would otherwise leak into the reconciler's hot path.
+  let lines = $state.raw<LineRecord[]>([]);
 </script>
 
-<ControlledGraph {lines} onLineChangeRequest={applyRequest} />
+<ControlledGraph
+  onLineChangeRequest={(request) => (lines = applyLineChange(lines, request))}
+/>
diff --git a/demo/svelte/src/demo/node_ui_edges/NodeUIEdgesDemo.svelte b/demo/svelte/src/demo/node_ui_edges/NodeUIEdgesDemo.svelte
index c1ea465..833a0d2 100644
--- a/demo/svelte/src/demo/node_ui_edges/NodeUIEdgesDemo.svelte
+++ b/demo/svelte/src/demo/node_ui_edges/NodeUIEdgesDemo.svelte
@@ -1,12 +1,21 @@
 <script lang="ts">
   import { Engine } from "@snap-engine/asset-base-svelte";
   import { ControlledGraph, Select } from "@snap-engine/snapline-svelte";
+  import { applyLineChange } from "@snap-engine/snapline";
   import type { LineChangeRequest, LineRecord } from "@snap-engine/snapline";
   import EdgeNode from "./EdgeNode.svelte";
 
   // The application-owned line document: the single source of truth.
   // Connector ids are `${node}:${port}`; line ids are stable.
-  let lines = $state<LineRecord[]>([]);
+  let lines = $state.raw<LineRecord[]>([]);
+  let graph: ControlledGraph;
+
+  // Changes with no originating request (toolbar buttons, the test hook) have
+  // to be pushed; only a gesture's return value reaches SnapLine on its own.
+  function commit(next: LineRecord[]): void {
+    lines = next;
+    graph?.setLines(next);
+  }
   let connectIntents = $state(0);
   let disconnectIntents = $state(0);
   let intentLog = $state<string[]>([]);
@@ -47,37 +56,28 @@
     }
   }
 
-  function handleRequest(request: LineChangeRequest): void {
+  function handleRequest(request: LineChangeRequest): readonly LineRecord[] {
     intentLog = [...intentLog, describe(request)];
     if (request.add.length > 0) connectIntents += 1;
     if (request.intent === "disconnect") disconnectIntents += 1;
-    if (rejectConnects && request.add.length > 0) return; // reject: no doc change
+    // Rejection is returning the document unchanged — explicit, and no longer
+    // spelled the same way as forgetting to return at all.
+    if (rejectConnects && request.add.length > 0) return lines;
     // Accept the atomic proposal — adopting the proposed ids settles the
     // staged lines in place.
-    lines = [
-      ...lines
-        .filter((record) => !request.remove.includes(record.id))
-        .map((record) => {
-          const update = request.update.find(
-            (entry) => entry.id === record.id,
-          );
-          return update
-            ? { ...record, toConnectorId: update.toConnectorId }
-            : record;
-        }),
-      ...request.add,
-    ];
+    return (lines = applyLineChange(lines, request));
   }
 
   function addDocLine(record: LineRecord): void {
     if (lines.some((existing) => existing.id === record.id)) return;
-    // Single-capacity inputs replace at the document level.
-    lines = [
+    // Single-capacity inputs replace at the document level. This is the app's
+    // own policy, not a request being applied, so it goes through commit().
+    commit([
       ...lines.filter(
         (existing) => existing.toConnectorId !== record.toConnectorId,
       ),
       record,
-    ];
+    ]);
   }
 
   // Test hook: lets the e2e mutate the document mid-drag without a second
@@ -107,9 +107,9 @@
   >Add A→C</button>
   <button
     data-testid="remove-edge"
-    onclick={() => (lines = lines.slice(0, -1))}
+    onclick={() => commit(lines.slice(0, -1))}
   >Remove last</button>
-  <button data-testid="reset-doc" onclick={() => (lines = [])}>Reset</button>
+  <button data-testid="reset-doc" onclick={() => commit([])}>Reset</button>
   <button
     data-testid="reject-connects"
     aria-pressed={rejectConnects}
@@ -130,7 +130,7 @@
   <div id="node-ui-edges">
     <div id="sl-background"></div>
     <Select />
-    <ControlledGraph {lines} onLineChangeRequest={handleRequest} />
+    <ControlledGraph bind:this={graph} onLineChangeRequest={handleRequest} />
     <EdgeNode nodeId="a" title="Node A" x={120} y={120} />
     <EdgeNode nodeId="b" title="Node B" x={440} y={170} maxIncoming={1} />
     {#if showNodeC}
diff --git a/docs/snapline/design/current-architecture.md b/docs/snapline/design/current-architecture.md
index d99ba73..a6de60c 100644
--- a/docs/snapline/design/current-architecture.md
+++ b/docs/snapline/design/current-architecture.md
@@ -140,8 +140,8 @@ sequenceDiagram
   Conn->>Line: stageTarget() — phase "staged", no topology commitment
   Conn->>Rec: dispatch ONE atomic LineChangeRequest
   Rec->>Adapter: onLineChangeRequest(request)
-  Adapter->>App: application applies (or ignores) the request
-  Adapter->>Rec: post-request microtask push of live records
+  Adapter->>App: application applies (or rejects) the request
+  App-->>Rec: returns the next LineRecord[] (adopted synchronously)
   Rec->>Rec: decisive reconciliation pass
   alt id adopted in the snapshot
     Rec->>Line: settle staged mirror in place (strict recheck)
@@ -164,14 +164,12 @@ Key properties:
   in the settled index. A gesture disconnect stages the detached line and
   proposes `remove`; a rejected removal re-glues it from the unchanged
   document.
-- **Adapters guarantee a post-request push.** Both `ControlledGraph`
-  components queue `setCanonicalGraph` with the live records in a microtask
-  ahead of the decisive pass, so acceptance, normalization, rejection, and
-  rejection-by-inaction all resolve from the next snapshot — rejection needs
-  no code path.
-- **Gestures are serial.** One in-flight request per engine
-  (`GraphRegistry.pendingGestureRequest`); a second dispatch before the pass
-  warns about a stalled adapter push.
+- **The request returns the next document.** `onLineChangeRequest` returns
+  the line list that should now be canonical, and the bridge hands it
+  straight to `setCanonicalGraph`. Exactly one decisive pass runs per
+  request, acceptance and rejection alike; rejection is returning the list
+  unchanged. This replaced an adapter-guaranteed post-request microtask push
+  whose correctness rested on framework flush timing.
 - **No graph owner, no gesture.** A drop on an engine without an attached
   reconciler warns and discards the preview — there is no document to
   propose to.
@@ -348,9 +346,8 @@ bulk mount of 100 nodes runs one pass, not one per connector.
 the outermost idempotent `end()`, which schedules one final pass if anything
 went dirty; `runBatch(fn)` is the exception-safe scoped form. `flush()`
 (exposed on the `ControlledGraphHandle`) runs any pending or batch-deferred
-pass synchronously for vanilla consumers and tests. Gesture dispatch
-schedules the decisive pass behind the adapter's post-request push
-microtask.
+pass synchronously for vanilla consumers and tests. Gesture dispatch adopts
+the handler's returned list and then schedules the decisive pass.
 
 ## Diagnostics
 
@@ -410,8 +407,9 @@ types). Adapter contracts:
 - `Node`/`Group` take `id` props (stable domain identity);
 - line lists key by `lineId`; `Line` renders `data-line-id`; SVG markers use
   `arrow-${lineId}`;
-- `ControlledGraph` takes `{ lines, onLineChangeRequest,
-  onDiagnosticsChanged? }` and implements the guaranteed post-request push;
+- `ControlledGraph` takes `{ onLineChangeRequest, onDiagnosticsChanged? }`;
+  the handler returns the next line list. Non-request pushes go through the
+  component's imperative handle (`bind:this` in Svelte, a ref in React);
 - supplied core objects are not destroyed on unmount; adapter-created
   objects are.
 
diff --git a/docs/snapline/design/migration-notes.md b/docs/snapline/design/migration-notes.md
index 833ab7c..7fe7dbc 100644
--- a/docs/snapline/design/migration-notes.md
+++ b/docs/snapline/design/migration-notes.md
@@ -53,7 +53,7 @@ The `EdgeSync` component/controller, its `identity()` callback, and
 endpoint-pair edge matching are replaced by the controlled-graph protocol:
 
 ```svelte
-<ControlledGraph {lines} onLineChangeRequest={applyRequest} />
+<ControlledGraph onLineChangeRequest={(r) => (lines = applyLineChange(lines, r))} />
 ```
 
 - `lines: readonly LineRecord[]` — your document's records, each
@@ -69,9 +69,11 @@ endpoint-pair edge matching are replaced by the controlled-graph protocol:
   SnapLine-minted `LineId`; keeping it in the record you add settles the
   dragged line in place (no flicker, same mirror). Substituting your own id
   works but recreates the mirror.
-- Rejection needs no code path: apply nothing and the staged line is
-  discarded on the next pass (the adapter guarantees a post-request push of
-  your latest records).
+- **Return the next list.** `onLineChangeRequest` returns the records that
+  should now be canonical; the bridge adopts them directly, so there is no
+  push to remember. Rejection is `return lines` — the staged line is
+  discarded on the decisive pass. The return type is required, so forgetting
+  to return is a type error rather than a silent rejection.
 - Diagnostics: records the mirror cannot represent (missing endpoints stay
   silently latent; capacity/rule violations) surface through
   `onDiagnosticsChanged` / `query(engine).diagnostics()` — canonical records
diff --git a/docs/snapline/guides/06_surface_connectors.mdx b/docs/snapline/guides/06_surface_connectors.mdx
index 8293699..1778852 100644
--- a/docs/snapline/guides/06_surface_connectors.mdx
+++ b/docs/snapline/guides/06_surface_connectors.mdx
@@ -100,11 +100,13 @@ and apply each gesture's atomic proposal:
 
 ```svelte
 <ControlledGraph
-  lines={doc.lines}
-  onLineChangeRequest={(request) => applyToDocument(request)}
+  onLineChangeRequest={(request) => (doc.lines = applyLineChange(doc.lines, request))}
 />
 ```
 
+The handler returns the list that should now be canonical; the bridge adopts
+it directly.
+
 A gesture-created line carries a SnapLine-minted stable id in
 `request.add[0].id`; keeping that id in the record you store settles the
 dragged line in place — no flicker, same mirror. Records carry an optional
diff --git a/docs/snapline/introduction/01_setup.mdx b/docs/snapline/introduction/01_setup.mdx
index de8d275..443a788 100644
--- a/docs/snapline/introduction/01_setup.mdx
+++ b/docs/snapline/introduction/01_setup.mdx
@@ -31,28 +31,20 @@ npm install react react-dom @snap-engine/snapline-react
     Node,
     Select,
   } from "@snap-engine/snapline-svelte";
-  import type { LineChangeRequest, LineRecord } from "@snap-engine/snapline";
+  import { applyLineChange } from "@snap-engine/snapline";
+  import type { LineRecord } from "@snap-engine/snapline";
 
   // Your document owns the lines; each gesture proposes one atomic change.
-  let lines = $state<LineRecord[]>([]);
-  function applyRequest(request: LineChangeRequest) {
-    lines = [
-      ...lines
-        .filter((record) => !request.remove.includes(record.id))
-        .map((record) => {
-          const update = request.update.find((u) => u.id === record.id);
-          return update
-            ? { ...record, toConnectorId: update.toConnectorId }
-            : record;
-        }),
-      ...request.add,
-    ];
-  }
+  // Return the list that should now be canonical — `$state.raw` because every
+  // update replaces the array rather than mutating it.
+  let lines = $state.raw<LineRecord[]>([]);
 </script>
 
 <Engine>
   <Select />
-  <ControlledGraph {lines} onLineChangeRequest={applyRequest} />
+  <ControlledGraph
+    onLineChangeRequest={(request) => (lines = applyLineChange(lines, request))}
+  />
   <Node id="source" x={80} y={90} className="node">
     <strong>Source</strong>
     <Connector id="source:value" name="value" rules={{ maxIncoming: 0 }} />
@@ -65,7 +57,7 @@ npm install react react-dom @snap-engine/snapline-react
 ```
 
 ```tsx framework=react
-import { useCallback, useState } from "react";
+import { useCallback, useRef } from "react";
 import {
   Connector,
   ControlledGraph,
@@ -73,28 +65,24 @@ import {
   Node,
   Select,
 } from "@snap-engine/snapline-react";
+import { applyLineChange } from "@snap-engine/snapline";
 import type { LineChangeRequest, LineRecord } from "@snap-engine/snapline";
 
 export function Graph() {
   // Your document owns the lines; each gesture proposes one atomic change.
-  const [lines, setLines] = useState<LineRecord[]>([]);
-  const applyRequest = useCallback((request: LineChangeRequest) => {
-    setLines((current) => [
-      ...current
-        .filter((record) => !request.remove.includes(record.id))
-        .map((record) => {
-          const update = request.update.find((u) => u.id === record.id);
-          return update
-            ? { ...record, toConnectorId: update.toConnectorId }
-            : record;
-        }),
-      ...request.add,
-    ]);
-  }, []);
+  // The handler must return the next list synchronously, so keep the records
+  // in a ref (a functional setState would not have produced it in time) and
+  // mirror them into component state only if you render them.
+  const linesRef = useRef<LineRecord[]>([]);
+  const applyRequest = useCallback(
+    (request: LineChangeRequest) =>
+      (linesRef.current = applyLineChange(linesRef.current, request)),
+    [],
+  );
   return (
     <Engine>
       <Select />
-      <ControlledGraph lines={lines} onLineChangeRequest={applyRequest} />
+      <ControlledGraph onLineChangeRequest={applyRequest} />
       <Node id="source" x={80} y={90} className="node">
         <strong>Source</strong>
         <Connector id="source:value" name="value" rules={{ maxIncoming: 0 }} />
@@ -114,6 +102,7 @@ import { CollisionEngine } from "@snap-engine/core/collision";
 import {
   ConnectorMirror,
   NodeMirror,
+  applyLineChange,
   attachControlledGraph,
   type LineRecord,
 } from "@snap-engine/snapline";
@@ -122,25 +111,15 @@ const engine = new Engine();
 engine.setCollisionEngine(new CollisionEngine());
 engine.assignDom(document.querySelector("#graph")!);
 
-// A vanilla app owns the graph with a plain module: hold the records,
-// apply each atomic proposal, and push the latest snapshot back.
+// A vanilla app owns the graph with a plain module: hold the records and
+// return the next list from each atomic proposal.
 let lines: LineRecord[] = [];
 const handle = attachControlledGraph(engine, {
-  onLineChangeRequest(request) {
-    lines = [
-      ...lines
-        .filter((record) => !request.remove.includes(record.id))
-        .map((record) => {
-          const update = request.update.find((u) => u.id === record.id);
-          return update
-            ? { ...record, toConnectorId: update.toConnectorId }
-            : record;
-        }),
-      ...request.add,
-    ];
-    handle.setCanonicalGraph({ lines });
-  },
+  onLineChangeRequest: (request) => (lines = applyLineChange(lines, request)),
 });
+
+// Only changes with no originating request need an explicit push — loading a
+// saved graph, undo/redo, a collaborator's edit.
 handle.setCanonicalGraph({ lines });
 
 const source = new NodeMirror(engine, null, { id: "source" });
diff --git a/docs/snapline/reference/react/controlled-graph.mdx b/docs/snapline/reference/react/controlled-graph.mdx
index 741fc78..12cabc3 100644
--- a/docs/snapline/reference/react/controlled-graph.mdx
+++ b/docs/snapline/reference/react/controlled-graph.mdx
@@ -13,19 +13,40 @@ topology. It renders nothing.
 
 | Prop | Meaning |
 | --- | --- |
-| `lines` | Your canonical `LineRecord[]` — `{ id, fromConnectorId, toConnectorId, payload? }` with stable ids |
-| `onLineChangeRequest` | Receives one atomic `LineChangeRequest` per gesture |
+| `onLineChangeRequest` | Receives one atomic `LineChangeRequest` per gesture and **returns the line list that should now be canonical** |
 | `onDiagnosticsChanged` | Receives the current `ReconciliationError[]` when it changes |
 
+There is no `lines` prop — the handler's return value is the channel. It must
+return **synchronously**, which shapes the React idiom: keep the records in a
+ref, because a functional `setState` has not produced the next list by the
+time you have to return it. Mirror them into component state only if you
+render them.
+
+```tsx
+const linesRef = useRef<LineRecord[]>([]);
+const applyRequest = useCallback(
+  (request: LineChangeRequest) =>
+    (linesRef.current = applyLineChange(linesRef.current, request)),
+  [],
+);
+
+<ControlledGraph onLineChangeRequest={applyRequest} />;
+```
+
+Reject by returning the list unchanged — the staged line is then discarded.
+The return type is required, so forgetting to return is a type error rather
+than an accidental rejection.
+
 A `LineChangeRequest` carries an `intent`
 (`"connect" | "disconnect" | "replace" | "reconnect"`) plus `add`
-(`ProposedLine[]` with SnapLine-minted ids), `remove` (`LineId[]`), `update`
-(endpoint retargets). Accept a proposal by applying
-it to your records in the handler's state update — adopting a proposed id
-settles the staged line in place. Reject it by leaving state unchanged; the
-staged line is then removed. The component pushes your updated `lines` prop
-back to the reconciler automatically after each request, so
-rejection-by-inaction needs no extra call.
+(`ProposedLine[]` with SnapLine-minted ids), `remove` (`LineId[]`), and
+`update` (endpoint retargets). Adopting a proposed id settles the staged line
+in place, with no flicker and the same mirror.
+
+For changes **no request asked for** — loading a saved graph, undo/redo, a
+collaborator's edit — pass a ref and call
+`ref.current.setCanonicalGraph({ lines })`. The ref also exposes `flush()`
+and `dispose()`.
 
 `ReconciliationError.code` is one of `"duplicate-id"` (a record id appears
 twice in the snapshot), `"capacity-exceeded"` (a record violates a
diff --git a/docs/snapline/reference/react/index.mdx b/docs/snapline/reference/react/index.mdx
index b61c742..b33855f 100644
--- a/docs/snapline/reference/react/index.mdx
+++ b/docs/snapline/reference/react/index.mdx
@@ -18,7 +18,7 @@ frameworkKey: overview
 | [`Select`](/docs/snapline/reference/react/select)    | callbacks and presentation                                                                              |
 | [`Group`](/docs/snapline/reference/react/group)     | node geometry, header content, membership policy and callbacks                                          |
 | [`Placement`](/docs/snapline/reference/react/placement) | controller, cancellation behavior, render function                                                      |
-| [`ControlledGraph`](/docs/snapline/reference/react/controlled-graph) | `lines` (your `LineRecord`s), `onLineChangeRequest`, `onDiagnosticsChanged`                       |
+| [`ControlledGraph`](/docs/snapline/reference/react/controlled-graph) | `onLineChangeRequest` (returns the next `LineRecord[]`), `onDiagnosticsChanged`                   |
 
 `Node` and `Group` forward refs to their core objects. `Connector` exposes a
 `ConnectorRef`, and `useNodeHandle()` returns a callback ref for a dedicated
diff --git a/docs/snapline/reference/svelte/controlled-graph.mdx b/docs/snapline/reference/svelte/controlled-graph.mdx
index 58f6f8d..704c87f 100644
--- a/docs/snapline/reference/svelte/controlled-graph.mdx
+++ b/docs/snapline/reference/svelte/controlled-graph.mdx
@@ -13,18 +13,44 @@ topology. It renders nothing.
 
 | Prop | Meaning |
 | --- | --- |
-| `lines` | Your canonical `LineRecord[]` — `{ id, fromConnectorId, toConnectorId, payload? }` with stable ids |
-| `onLineChangeRequest` | Receives one atomic `LineChangeRequest` per gesture |
+| `onLineChangeRequest` | Receives one atomic `LineChangeRequest` per gesture and **returns the line list that should now be canonical** |
 | `onDiagnosticsChanged` | Receives the current `ReconciliationError[]` when it changes |
 
+There is no `lines` prop. The handler's return value *is* the channel, so a
+typical graph is one line:
+
+```svelte
+<script lang="ts">
+  import { applyLineChange } from "@snap-engine/snapline";
+  let lines = $state.raw<LineRecord[]>([]);
+</script>
+
+<ControlledGraph
+  onLineChangeRequest={(request) => (lines = applyLineChange(lines, request))}
+/>
+```
+
+The assignment updates your state *and* evaluates to the array the bridge
+needs. Reject by returning the list unchanged (`return lines`) — the staged
+line is then discarded. The return type is required, so forgetting to return
+is a type error rather than an accidental rejection. The handler must be
+synchronous.
+
 A `LineChangeRequest` carries an `intent`
 (`"connect" | "disconnect" | "replace" | "reconnect"`) plus `add`
-(`ProposedLine[]` with SnapLine-minted ids), `remove` (`LineId[]`), `update`
-(endpoint retargets). Accept a proposal by applying
-it to your records — adopting a proposed id settles the staged line in place.
-Reject it by leaving your records unchanged; the staged line is then removed.
-The component pushes your updated `lines` prop back to the reconciler
-automatically after each request.
+(`ProposedLine[]` with SnapLine-minted ids), `remove` (`LineId[]`), and
+`update` (endpoint retargets). Adopting a proposed id settles the staged line
+in place, with no flicker and the same mirror.
+
+For changes **no request asked for** — loading a saved graph, undo/redo, a
+collaborator's edit — take a component reference and push:
+
+```svelte
+<ControlledGraph bind:this={graph} onLineChangeRequest={...} />
+```
+
+`graph.setLines(records)` replaces the canonical document; `graph.flush()`
+runs any pending reconciliation synchronously.
 
 `ReconciliationError.code` is one of `"duplicate-id"` (a record id appears
 twice in the snapshot), `"capacity-exceeded"` (a record violates a
diff --git a/docs/snapline/reference/svelte/index.mdx b/docs/snapline/reference/svelte/index.mdx
index a82f109..51b791b 100644
--- a/docs/snapline/reference/svelte/index.mdx
+++ b/docs/snapline/reference/svelte/index.mdx
@@ -18,7 +18,7 @@ Wrap components in `Engine` from `@snap-engine/asset-base-svelte`.
 | [`Select`](/docs/snapline/reference/svelte/select)    | `callbacks`, `className`                                                                               |
 | [`Group`](/docs/snapline/reference/svelte/group)     | Node geometry plus `title`, `headerContent`, `canContain`, membership callbacks                        |
 | [`Placement`](/docs/snapline/reference/svelte/placement) | `controller`, cancellation options, `preview` snippet                                                  |
-| [`ControlledGraph`](/docs/snapline/reference/svelte/controlled-graph) | `lines` (your `LineRecord`s), `onLineChangeRequest`, `onDiagnosticsChanged`                      |
+| [`ControlledGraph`](/docs/snapline/reference/svelte/controlled-graph) | `onLineChangeRequest` (returns the next `LineRecord[]`), `onDiagnosticsChanged`                  |
 
 `getNodeObject()` exposes the underlying object from `Node` and `Group`;
 `Connector.object()` exposes its connector; `Select.getSelectObject()`
diff --git a/docs/snapline/reference/vanilla/controlled-graph.mdx b/docs/snapline/reference/vanilla/controlled-graph.mdx
index 263ad55..0a62018 100644
--- a/docs/snapline/reference/vanilla/controlled-graph.mdx
+++ b/docs/snapline/reference/vanilla/controlled-graph.mdx
@@ -14,7 +14,7 @@ canonical snapshots through:
 
 | Handle member | Meaning |
 | --- | --- |
-| `setCanonicalGraph(snapshot)` | Cache the latest `CanonicalGraphSnapshot` (`{ lines: LineRecord[] }`) and schedule one coalesced reconciliation pass — the only inbound canonical channel |
+| `setCanonicalGraph(snapshot)` | Cache the latest `CanonicalGraphSnapshot` (`{ lines: LineRecord[] }`) and schedule one coalesced pass. Needed only for changes **no request asked for** — loading a saved graph, undo/redo, a collaborator's edit |
 | `flush()` | Run any pending reconciliation synchronously (vanilla apps and tests) |
 | `dispose()` | Detach the reconciler |
 
@@ -25,12 +25,26 @@ framework-mount-led; the snapshot carries only line records.
 ## Change requests
 
 `callbacks.onLineChangeRequest(request)` receives one atomic
-`LineChangeRequest` per gesture: an `intent`
+`LineChangeRequest` per gesture — an `intent`
 (`"connect" | "disconnect" | "replace" | "reconnect"`) plus `add`
 (`ProposedLine[]` with SnapLine-minted ids), `remove` (`LineId[]`), `update`
-(`LineEndpointUpdate[]`). Apply the proposal to your
-records and push them back through `setCanonicalGraph` — adopting a proposed
-id settles the staged line in place; pushing unchanged records rejects it.
+(`LineEndpointUpdate[]`) — and **returns the line list that should now be
+canonical**. The bridge adopts it directly, so there is no push to remember:
+
+```ts
+let lines: LineRecord[] = [];
+const handle = attachControlledGraph(engine, {
+  onLineChangeRequest: (request) => (lines = applyLineChange(lines, request)),
+});
+```
+
+Adopting a proposed id settles the staged line in place. Reject by returning
+the list unchanged. The handler must be synchronous — the staged preview is
+resolved by the pass that follows the call.
+
+`applyLineChange(lines, request)` is the built-in reducer: drop `remove`,
+apply `update` endpoint changes, append `add`, as one commit returning a new
+array.
 
 ## Diagnostics
 
diff --git a/tests/helpers/snapline-harness.ts b/tests/helpers/snapline-harness.ts
index 2f77a9f..474e318 100644
--- a/tests/helpers/snapline-harness.ts
+++ b/tests/helpers/snapline-harness.ts
@@ -3,7 +3,9 @@ import {
   NodeMirror,
   attachControlledGraph,
   type ConnectorSurfaceStrategy,
+  type ControlledGraphHandle,
   type LineChangeRequest,
+  type LineRecord,
   type ReconciliationError,
 } from "../../assets/snapline/core/src";
 
@@ -114,16 +116,60 @@ export function installObserverStubs(): () => void {
   };
 }
 
-/** Engine + attached controlled-graph bridge with request/diagnostic logs. */
+/**
+ * Engine + attached controlled-graph bridge with request/diagnostic logs.
+ *
+ * Stands in for an application document: the handler must now return the next
+ * line list synchronously, so the harness tracks one. The default answer is
+ * rejection — return the document unchanged — and `respondWith` installs an
+ * accept/normalize policy. Pushes through the returned handle update the
+ * tracked document too, so a later gesture rejects against what the test
+ * actually loaded rather than against an empty list.
+ */
 export function createControlledHarness() {
   const { engine, global } = createEngineHarness();
   const requests: LineChangeRequest[] = [];
   const diagnosticsLog: (readonly ReconciliationError[])[] = [];
-  const handle = attachControlledGraph(engine, {
-    onLineChangeRequest: (request) => requests.push(request),
+  let doc: readonly LineRecord[] = [];
+  let respond:
+    | ((
+        request: LineChangeRequest,
+        current: readonly LineRecord[],
+      ) => readonly LineRecord[])
+    | null = null;
+
+  const bridge = attachControlledGraph(engine, {
+    onLineChangeRequest: (request) => {
+      requests.push(request);
+      if (respond) doc = respond(request, doc);
+      return doc;
+    },
     onDiagnosticsChanged: (diagnostics) => diagnosticsLog.push(diagnostics),
   });
-  return { engine, global, handle, requests, diagnosticsLog };
+
+  const handle: ControlledGraphHandle = {
+    ...bridge,
+    setCanonicalGraph: (snapshot) => {
+      doc = snapshot.lines;
+      bridge.setCanonicalGraph(snapshot);
+    },
+  };
+
+  return {
+    engine,
+    global,
+    handle,
+    requests,
+    diagnosticsLog,
+    respondWith: (
+      fn: (
+        request: LineChangeRequest,
+        current: readonly LineRecord[],
+      ) => readonly LineRecord[],
+    ) => {
+      respond = fn;
+    },
+  };
 }
 
 export function eventPositionAt(x: number, y: number) {
diff --git a/website/src/lib/components/docs/SnapLineDemo.svelte b/website/src/lib/components/docs/SnapLineDemo.svelte
index b11b1a9..21e50e1 100644
--- a/website/src/lib/components/docs/SnapLineDemo.svelte
+++ b/website/src/lib/components/docs/SnapLineDemo.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Engine } from "@snap-engine/asset-base-svelte";
   import type { Engine as CoreEngine } from "@snap-engine/core";
-  import { PlacementController } from "@snap-engine/snapline";
+  import { PlacementController, applyLineChange } from "@snap-engine/snapline";
   import {
     Connector,
     Group,
@@ -10,7 +10,7 @@
     Select,
   } from "@snap-engine/snapline-svelte";
   import { ControlledGraph } from "@snap-engine/snapline-svelte";
-  import type { LineChangeRequest, LineRecord } from "@snap-engine/snapline";
+  import type { LineRecord } from "@snap-engine/snapline";
   import ClientDemoFrame from "$lib/components/ClientDemoFrame.svelte";
 
   let {
@@ -23,20 +23,7 @@
   let engine = $state<CoreEngine | null>(null);
   // Topology is always controlled: the demo owns its line document and
   // accepts every atomic proposal.
-  let lines = $state<LineRecord[]>([]);
-  function applyRequest(request: LineChangeRequest): void {
-    lines = [
-      ...lines
-        .filter((record) => !request.remove.includes(record.id))
-        .map((record) => {
-          const update = request.update.find((entry) => entry.id === record.id);
-          return update
-            ? { ...record, toConnectorId: update.toConnectorId }
-            : record;
-        }),
-      ...request.add,
-    ];
-  }
+  let lines = $state.raw<LineRecord[]>([]);
   let placement = $state<PlacementController<string> | null>(null);
   let placedNodes = $state<Array<{ id: number; x: number; y: number }>>([]);
   let nextPlacedId = 1;
@@ -97,7 +84,9 @@
           {/each}
         </div>
         {#if mode === "connections"}
-          <ControlledGraph {lines} onLineChangeRequest={applyRequest} />
+          <ControlledGraph
+            onLineChangeRequest={(request) => (lines = applyLineChange(lines, request))}
+          />
           <Node className="doc-node card shallow" x={55} y={80}>
             <strong>Source</strong>
             <span>Drag the port</span>

From bdd428df33183acffaa03fa0a822b99a5eb3cb5e Mon Sep 17 00:00:00 2001
From: tfukaza <tfukaza@git.com>
Date: Mon, 27 Jul 2026 21:45:30 -0700
Subject: [PATCH 05/10] =?UTF-8?q?snapline:=20Phase=203d/3e=20=E2=80=94=20r?=
 =?UTF-8?q?esolveNewLine=20and=20per-line=20renderer=20resolution?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two hooks that together close the gap between a line's preview and its
settled form.

resolveNewLine seeds application data onto a line the moment a drag creates
it. Until now a settled line could be styled from LineRecord.payload, but a
line being *dragged* had none — setPayload only runs when the reconciler
settles or creates from a record, so the only thing a preview renderer could
reach was line.start.metadata: undocumented, undiscoverable, and
connector-level rather than per-gesture.

The seam is the else-branch of #onDragStart, which runs only for a genuinely
new line, so a seed placed there structurally cannot clobber payload the
application already owns on a reconnect — covered by a test that reconnects a
settled line and asserts the resolver did not fire again. Because the payload
already rides into request.add at drop, this one hook closes three things at
once: preview styling, complete minted records for a custom record type, and
preview→settled continuity (the app keeps what it was handed instead of
deriving something different at commit).

It lives on the node — one place for all its ports, with the connector on the
event so it can branch — and a connector may override it, matching how
adapter and consumer callbacks already compose. Named for *when* it fires:
"New" is load-bearing, since the seam never runs for a reconnect.

resolveLineComponent picks a renderer per line, so a data edge and a control
edge leaving the same node can look different — previously impossible, since
the renderer was one prop on <Node>. Two levels, not four: the per-line
resolver is the primitive and can express any coarser tier, so a
connector-level prop would be a second way to do the same thing.

Resolved at RENDER time, not at line creation. Hydration never runs the
creation callback — a reloaded graph builds its lines through the reconciler
— so resolving from the line is what makes a line you just drew and the same
line after a refresh render identically. That is also why the discriminator
must be serializable: store `kind: "data"` in the payload and map it to a
component in the resolver; a component reference in a record hydrates as an
empty object after one save/reload round-trip.

Also introduces ResolvedNodeConfig so resolveNewLine stays optional rather
than being forced into DEFAULT_NODE_CONFIG: it seeds application data, and
per SNAPZEN there is no sensible default for that — its absence is the
meaningful state.

Note check:adapters, not typecheck, is what catches type errors in
assets/snapline — the root tsconfig only includes src and demo. Core is
checked transitively through the Svelte adapter.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 assets/snapline/core/src/connector.ts         |  34 +
 assets/snapline/core/src/index.ts             |   3 +
 assets/snapline/core/src/node.ts              |  29 +-
 assets/snapline/react/src/Node.tsx            |  45 +-
 assets/snapline/svelte/src/Node.svelte        |  25 +-
 tests/e2e/asset-base-react.spec.ts            |   6 +-
 tests/e2e/camera-control.spec.ts              |  15 +-
 tests/e2e/docs-framework-code.spec.ts         |  55 +-
 tests/e2e/node-react.spec.ts                  |  64 +-
 tests/e2e/node.spec.ts                        |  50 +-
 tests/e2e/playwright-matrix.ts                |   5 +-
 tests/e2e/snapline-camera.spec.ts             |  74 +-
 tests/e2e/snapline-edges-react.spec.ts        |  12 +-
 tests/e2e/snapline-edges.spec.ts              |  54 +-
 tests/e2e/snapline-group.spec.ts              |  19 +-
 tests/e2e/snapline-react-features.spec.ts     |  36 +-
 tests/e2e/snapsort-adapter-ghosts.spec.ts     |  39 +-
 tests/e2e/snapsort-drag-snapshot.spec.ts      | 681 ++++++++++--------
 tests/e2e/snapsort-duolingo.spec.ts           |  43 +-
 tests/e2e/snapsort-gallery-features.spec.ts   | 123 +++-
 tests/e2e/snapsort-insertion-copy.spec.ts     |  59 +-
 tests/e2e/snapsort-landing-regression.spec.ts |  25 +-
 tests/e2e/snapsort_drag.spec.ts               |  38 +-
 tests/e2e/website-engine-lifecycle.spec.ts    |  81 ++-
 tests/helpers/snapline-harness.ts             |  10 +
 tests/ut/input.spec.ts                        | 380 ++++++----
 tests/ut/snapline-line-reconciler.spec.ts     |   8 +-
 tests/ut/snapline-observers.spec.ts           | 111 +++
 28 files changed, 1414 insertions(+), 710 deletions(-)

diff --git a/assets/snapline/core/src/connector.ts b/assets/snapline/core/src/connector.ts
index c2401db..b685b89 100644
--- a/assets/snapline/core/src/connector.ts
+++ b/assets/snapline/core/src/connector.ts
@@ -204,8 +204,31 @@ export interface ConnectorConfig {
   callbacks?: ConnectorCallbacks;
   /** Allows this connector gesture to use the engine's configured edge pan. */
   edgePan?: boolean;
+  /** Overrides the parent node's `resolveNewLine` for this connector only. */
+  resolveNewLine?: NewLineResolver;
 }
 
+/** Context for seeding a brand-new line at drag start. */
+export interface NewLineEvent {
+  connector: ConnectorMirror;
+  node: NodeMirror;
+}
+
+/**
+ * Seeds application data onto a line the moment a drag creates it.
+ *
+ * Runs **once per gesture, only for genuinely new lines** — never for a
+ * reconnect, whose payload the application already owns. Must be synchronous.
+ * Whatever it returns becomes `LineMirror.payload`, so a renderer can style
+ * the preview, and it rides into `request.add` at drop, so the settled record
+ * carries the same data without the reducer deriving it again.
+ *
+ * Keep the value **serializable**: it round-trips through your document.
+ * Store a discriminator like `{ kind: "data" }` and map that to a component
+ * in `resolveLineComponent`, never a component reference itself.
+ */
+export type NewLineResolver = (event: NewLineEvent) => unknown;
+
 export type ConnectorConfigUpdate = Partial<Omit<ConnectorConfig, "name">>;
 
 export interface ConnectorResolvedHit {
@@ -526,6 +549,12 @@ class ConnectorMirror extends ElementObject {
     } else {
       line = this.createLine();
       line.setSourceSurfaceContext(armed.sourceStrategy, armed.sourceHit);
+      // Seed app data onto a genuinely new line. This branch structurally
+      // cannot run for a reconnect, so it can never clobber payload the
+      // application already owns. The payload rides into request.add at drop,
+      // so preview and settled line agree without deriving it twice.
+      const seed = this.#resolveNewLine();
+      if (seed) line.setPayload(seed({ connector: this, node: this.parent }));
       this.#outgoingLines.unshift(line);
     }
 
@@ -850,6 +879,11 @@ class ConnectorMirror extends ElementObject {
     this.#resetGesture();
   }
 
+  /** Connector-level override, else the parent node's resolver. */
+  #resolveNewLine(): NewLineResolver | null {
+    return this.#config.resolveNewLine ?? this.parent?.resolveNewLine ?? null;
+  }
+
   #dispatchRequest(request: LineChangeRequest): void {
     // The dispatch itself adopts the application's returned line list, so the
     // decisive pass this schedules always sees the app's answer — including
diff --git a/assets/snapline/core/src/index.ts b/assets/snapline/core/src/index.ts
index f4033b1..647d69e 100644
--- a/assets/snapline/core/src/index.ts
+++ b/assets/snapline/core/src/index.ts
@@ -18,6 +18,7 @@ export type {
   NodeSelectionEvent,
   NodeSelectionModeEvent,
   ResizeHandle,
+  ResolvedNodeConfig,
   SelectionMode,
 } from "./node";
 export { ConnectorMirror, resolveConnectorSourceAtPoint } from "./connector";
@@ -47,6 +48,8 @@ export type {
   ConnectorSurfaceHitTestEvent,
   ConnectorSurfaceStrategy,
   DisconnectReason,
+  NewLineEvent,
+  NewLineResolver,
   ResolvedConnectorRules,
   SnapLineMetadata,
 } from "./connector";
diff --git a/assets/snapline/core/src/node.ts b/assets/snapline/core/src/node.ts
index 114612c..fa53311 100644
--- a/assets/snapline/core/src/node.ts
+++ b/assets/snapline/core/src/node.ts
@@ -17,7 +17,7 @@ import {
   snapData,
 } from "./internal/shared-data";
 import { mintDomainId } from "./internal/graph-registry";
-import type { SnapLineMetadata } from "./connector";
+import type { NewLineResolver, SnapLineMetadata } from "./connector";
 import type { GeometryInvalidationObserver } from "./types";
 
 export type ResizeHandle = "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
@@ -69,6 +69,12 @@ export interface NodeConfig {
   callbacks?: NodeCallbacks;
   /** Allows this node gesture to use the engine's configured edge pan. */
   edgePan?: boolean;
+  /**
+   * Seeds application data onto a line a drag from any of this node's
+   * connectors creates. One place for all its ports; the event carries the
+   * connector so it can branch. A connector may override it.
+   */
+  resolveNewLine?: NewLineResolver;
 }
 
 /** Shared by core hitboxes and adapter resize-handle visuals. */
@@ -76,7 +82,17 @@ export const DEFAULT_RESIZE_HANDLE_THICKNESS = 14;
 
 // `id` is identity, not configuration — read once in the constructor, never
 // defaulted or merged.
-const DEFAULT_NODE_CONFIG: Required<Omit<NodeConfig, "id">> = {
+/**
+ * Config with every defaultable field resolved. `resolveNewLine` stays
+ * optional: it seeds application data, and there is no sensible default for
+ * that — its absence is the meaningful state.
+ */
+export type ResolvedNodeConfig = Required<
+  Omit<NodeConfig, "id" | "resolveNewLine">
+> &
+  Pick<NodeConfig, "resolveNewLine">;
+
+const DEFAULT_NODE_CONFIG: ResolvedNodeConfig = {
   lockPosition: false,
   resizable: false,
   minWidth: 0,
@@ -361,7 +377,7 @@ class NodeMirror extends ElementObject {
   /** Stable domain identity — supplied via `NodeConfig.id` or minted. Never
    * the engine-internal `BaseObject.id`. */
   readonly nodeId: string;
-  #config: Required<Omit<NodeConfig, "id">>;
+  #config: ResolvedNodeConfig;
   /** @internal Name-keyed live connectors; written by ConnectorMirror's
    * assignToNode/destroy — the one deliberate cross-class field. */
   _connectors: { [key: string]: ConnectorMirror };
@@ -464,7 +480,7 @@ class NodeMirror extends ElementObject {
     // ownership note in assets/snapline/AGENTS.md).
   }
 
-  get config(): Required<Omit<NodeConfig, "id">> {
+  get config(): ResolvedNodeConfig {
     return this.#config;
   }
 
@@ -472,6 +488,11 @@ class NodeMirror extends ElementObject {
     return this.#callbacks;
   }
 
+  /** The resolver a drag from this node's connectors seeds new lines with. */
+  get resolveNewLine(): NewLineResolver | null {
+    return this.#config.resolveNewLine ?? null;
+  }
+
   get metadata(): SnapLineMetadata {
     return this.#config.metadata;
   }
diff --git a/assets/snapline/react/src/Node.tsx b/assets/snapline/react/src/Node.tsx
index fa09b75..00b0d44 100644
--- a/assets/snapline/react/src/Node.tsx
+++ b/assets/snapline/react/src/Node.tsx
@@ -17,6 +17,7 @@ import {
   LineMirror,
   NodeMirror,
   type ResizeHandle,
+  type NewLineResolver,
   type NodeCallbacks,
   type GeometryChangeEvent,
   type NodeResizeEvent,
@@ -32,7 +33,25 @@ export interface NodeProps {
   id?: string;
   children: ReactNode;
   className?: string;
+  /** One renderer for every line leaving this node. */
   lineComponent?: ComponentType<{ line: LineMirror }>;
+  /**
+   * Picks a renderer per line, so a data edge and a control edge leaving the
+   * same node can look different. Falls back to `lineComponent` when it
+   * returns nothing.
+   *
+   * Resolved at render time, not at line creation: hydration never runs the
+   * creation callback (a reloaded graph builds its lines through the
+   * reconciler), so resolving from the line is what makes a line you just drew
+   * and the same line after a refresh render identically. Branch on
+   * serializable data you put in the payload — never store a component
+   * reference in a record.
+   */
+  resolveLineComponent?: (
+    line: LineMirror,
+  ) => ComponentType<{ line: LineMirror }> | null | undefined;
+  /** Seeds application data onto a line a drag from this node creates. */
+  resolveNewLine?: NewLineResolver;
   nodeObject?: NodeMirror | null;
   style?: CSSProperties;
   x?: number;
@@ -60,6 +79,8 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
     children,
     className = "",
     lineComponent: LineRenderer = Line,
+    resolveLineComponent,
+    resolveNewLine,
     nodeObject = null,
     style,
     x = 0,
@@ -97,6 +118,7 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
       metadata,
       callbacks: {},
       edgePan,
+      resolveNewLine,
     });
   }
   const node = nodeRef.current;
@@ -239,7 +261,12 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
   return (
     <NodeMirrorContext.Provider value={node}>
       {lineList.map((line) => (
-        <LineRenderer key={line.lineId} line={line} />
+        <LineForLine
+          key={line.lineId}
+          line={line}
+          resolve={resolveLineComponent}
+          fallback={LineRenderer}
+        />
       ))}
       <div
         {...elementProps}
@@ -294,3 +321,19 @@ export function useNodeHandle(): RefCallback<HTMLElement> {
     cleanup.current = element && node ? node.registerDragHandle(element) : null;
   };
 }
+
+/** Per-line renderer resolution, evaluated at render time. */
+function LineForLine({
+  line,
+  resolve,
+  fallback: Fallback,
+}: {
+  line: LineMirror;
+  resolve?: (
+    line: LineMirror,
+  ) => ComponentType<{ line: LineMirror }> | null | undefined;
+  fallback: ComponentType<{ line: LineMirror }>;
+}) {
+  const Resolved = resolve?.(line) ?? Fallback;
+  return <Resolved line={line} />;
+}
diff --git a/assets/snapline/svelte/src/Node.svelte b/assets/snapline/svelte/src/Node.svelte
index 70f23a4..caa9de2 100644
--- a/assets/snapline/svelte/src/Node.svelte
+++ b/assets/snapline/svelte/src/Node.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { NodeMirror, LineMirror, DEFAULT_RESIZE_HANDLE_THICKNESS, type NodeCallbacks, type GeometryChangeEvent, type NodeResizeEvent, type ResizeHandle, type SnapLineMetadata } from "@snap-engine/snapline";
+    import { NodeMirror, LineMirror, DEFAULT_RESIZE_HANDLE_THICKNESS, type NodeCallbacks, type NewLineResolver, type GeometryChangeEvent, type NodeResizeEvent, type ResizeHandle, type SnapLineMetadata } from "@snap-engine/snapline";
     import type { Engine } from "@snap-engine/core";
     import Line from "./Line.svelte";
     import { onMount, setContext, getContext, onDestroy, tick, untrack } from "svelte";
@@ -10,6 +10,8 @@
         id = undefined,
         className = "",
         LineSvelteComponent = Line,
+        resolveLineComponent = undefined,
+        resolveNewLine = undefined,
         nodeObject = null,
         x = 0,
         y = 0,
@@ -32,7 +34,23 @@
         /** Stable domain identity; minted when omitted (supply for persistence). */
         id?: string;
         className?: string;
+        /** One renderer for every line leaving this node. */
         LineSvelteComponent?: typeof Line;
+        /**
+         * Picks a renderer per line, so a data edge and a control edge leaving
+         * the same node can look different. Falls back to
+         * `LineSvelteComponent` when it returns nothing.
+         *
+         * Resolved at render time, not at line creation: hydration never runs
+         * the creation callback (a reloaded graph builds its lines through the
+         * reconciler), so resolving from the line is what makes a line you just
+         * drew and the same line after a refresh render identically. Branch on
+         * serializable data you put in the payload — never store a component
+         * reference in a record.
+         */
+        resolveLineComponent?: (line: LineMirror) => typeof Line | null | undefined;
+        /** Seeds application data onto a line a drag from this node creates. */
+        resolveNewLine?: NewLineResolver;
         nodeObject?: NodeMirror | null;
         x?: number;
         y?: number;
@@ -57,7 +75,7 @@
     let engine: Engine = getContext("engine");
     const ownsNode = nodeObject == null;
     if (!nodeObject) {
-         nodeObject = new NodeMirror(engine, null, { id, resizable, minWidth, minHeight, resizeHandleThickness, resizeHandles, resizeCursors, metadata, callbacks: {}, edgePan });
+         nodeObject = new NodeMirror(engine, null, { id, resizable, minWidth, minHeight, resizeHandleThickness, resizeHandles, resizeCursors, metadata, callbacks: {}, edgePan, resolveNewLine });
     }
     let lineList: LineMirror[] = $state(nodeObject.getAllOutgoingLines());
 
@@ -180,7 +198,8 @@
 
 
 {#each lineList as line (line.lineId)}
-    <LineSvelteComponent {line} />
+    {@const LineFor = resolveLineComponent?.(line) ?? LineSvelteComponent}
+    <LineFor {line} />
 {/each}
 <div
     {...elementProps}
diff --git a/tests/e2e/asset-base-react.spec.ts b/tests/e2e/asset-base-react.spec.ts
index 59ead70..1c57954 100644
--- a/tests/e2e/asset-base-react.spec.ts
+++ b/tests/e2e/asset-base-react.spec.ts
@@ -27,9 +27,9 @@ test("shares contexts, exposes refs, and survives Strict Mode remounts", async (
   );
 
   await page.getByTestId("toggle-debug").click();
-  await expect(page.getByTestId("asset-base-engine").locator("canvas")).toHaveCount(
-    1,
-  );
+  await expect(
+    page.getByTestId("asset-base-engine").locator("canvas"),
+  ).toHaveCount(1);
 
   await page.getByTestId("toggle-engine").click();
   await expect(page.getByTestId("asset-base-engine")).toHaveCount(0);
diff --git a/tests/e2e/camera-control.spec.ts b/tests/e2e/camera-control.spec.ts
index 06687f9..b49b1e5 100644
--- a/tests/e2e/camera-control.spec.ts
+++ b/tests/e2e/camera-control.spec.ts
@@ -149,10 +149,7 @@ test("stationary second touch after a one-finger pan does not zoom the camera",
     buttons: 0,
   });
 
-  expect(scaleAfterStationaryPinch).toBeCloseTo(
-    scaleBeforeStationaryPinch,
-    3,
-  );
+  expect(scaleAfterStationaryPinch).toBeCloseTo(scaleBeforeStationaryPinch, 3);
 });
 
 test("pinch pans from the center point between two fingers", async ({
@@ -223,14 +220,8 @@ test("pinch pans from the center point between two fingers", async ({
     buttons: 0,
   });
 
-  expect(transformAfterPan.x - transformBeforePan.x).toBeCloseTo(
-    movement.x,
-    1,
-  );
-  expect(transformAfterPan.y - transformBeforePan.y).toBeCloseTo(
-    movement.y,
-    1,
-  );
+  expect(transformAfterPan.x - transformBeforePan.x).toBeCloseTo(movement.x, 1);
+  expect(transformAfterPan.y - transformBeforePan.y).toBeCloseTo(movement.y, 1);
 });
 
 test("pinch zoom keeps the original world points under both fingers", async ({
diff --git a/tests/e2e/docs-framework-code.spec.ts b/tests/e2e/docs-framework-code.spec.ts
index 06bee3c..9cead7a 100644
--- a/tests/e2e/docs-framework-code.spec.ts
+++ b/tests/e2e/docs-framework-code.spec.ts
@@ -1,32 +1,53 @@
 import { expect, test } from "@playwright/test";
 
-test("framework selector shows only its matching install code block", async ({ page }) => {
-  const response = await page.goto("/docs/snapsort/introduction/01_setup?framework=svelte");
+test("framework selector shows only its matching install code block", async ({
+  page,
+}) => {
+  const response = await page.goto(
+    "/docs/snapsort/introduction/01_setup?framework=svelte",
+  );
   expect(response?.status()).toBe(200);
   await page.waitForFunction(
     () => localStorage.getItem("preferredCodeFramework") === "svelte",
   );
 
-  const visibleInstallBlocks = page.locator(".framework-code-block:visible").filter({
-    hasText: "npm install",
-  });
+  const visibleInstallBlocks = page
+    .locator(".framework-code-block:visible")
+    .filter({
+      hasText: "npm install",
+    });
 
   await expect(visibleInstallBlocks).toHaveCount(1);
-  await expect(visibleInstallBlocks).toContainText("@snap-engine/snapsort-svelte");
-  await expect(visibleInstallBlocks).not.toContainText("@snap-engine/snapsort-react");
+  await expect(visibleInstallBlocks).toContainText(
+    "@snap-engine/snapsort-svelte",
+  );
+  await expect(visibleInstallBlocks).not.toContainText(
+    "@snap-engine/snapsort-react",
+  );
 
   await page.locator("#desktop-doc-framework").selectOption("react");
 
-  await expect(page.locator(".doc-article")).toHaveAttribute("data-framework", "react");
+  await expect(page.locator(".doc-article")).toHaveAttribute(
+    "data-framework",
+    "react",
+  );
   await expect(visibleInstallBlocks).toHaveCount(1);
-  await expect(visibleInstallBlocks).toContainText("@snap-engine/snapsort-react");
-  await expect(visibleInstallBlocks).not.toContainText("@snap-engine/snapsort-svelte");
+  await expect(visibleInstallBlocks).toContainText(
+    "@snap-engine/snapsort-react",
+  );
+  await expect(visibleInstallBlocks).not.toContainText(
+    "@snap-engine/snapsort-svelte",
+  );
 });
 
-test("coding-agent resource links bypass client-side routing", async ({ page }) => {
+test("coding-agent resource links bypass client-side routing", async ({
+  page,
+}) => {
   await page.goto("/docs/snapsort/introduction");
 
-  const markdownLink = page.getByRole("link", { name: "this page as Markdown" });
+  const markdownLink = page.getByRole("link", {
+    name: "this page as Markdown",
+  });
   await expect(markdownLink).toHaveAttribute("data-sveltekit-reload", "");
   const markdownResponsePromise = page.waitForResponse((response) =>
     response.url().endsWith("/docs/snapsort/introduction.md"),
@@ -57,7 +78,7 @@ test("raw Markdown selects one framework without damaging fenced code", async ({
 
   const svelteMarkdown = await svelteResponse.text();
   expect(svelteMarkdown).toContain("# Setup");
-  expect(svelteMarkdown).toContain("```svelte\n<script lang=\"ts\">");
+  expect(svelteMarkdown).toContain('```svelte\n<script lang="ts">');
   expect(svelteMarkdown).toContain("@snap-engine/snapsort-svelte");
   expect(svelteMarkdown).not.toContain("@snap-engine/snapsort-react");
   expect(svelteMarkdown).not.toContain("framework=Svelte");
@@ -123,7 +144,9 @@ test("raw Markdown switches paired reference pages and cleans interactive MDX",
   expect(interactiveMarkdown).not.toContain("<script>");
 });
 
-test("raw Markdown validates routes and framework values", async ({ request }) => {
+test("raw Markdown validates routes and framework values", async ({
+  request,
+}) => {
   const indexResponse = await request.get("/docs/snapsort/introduction.md");
   expect(indexResponse.status()).toBe(200);
   expect(await indexResponse.text()).toContain("# What is SnapSort?");
@@ -262,9 +285,7 @@ test("SnapLine docs expose framework switching, live demos, Markdown, and llms i
 
   await page.goto("/docs/snapline/guides/03_groups");
   await expect(page.locator(".snapline-demo")).toBeVisible();
-  await expect(
-    page.locator("[data-snapline-type='group']"),
-  ).toHaveCount(2);
+  await expect(page.locator("[data-snapline-type='group']")).toHaveCount(2);
   await expect(page.getByText("Outer group", { exact: true })).toBeVisible();
 
   const markdown = await request.get(
diff --git a/tests/e2e/node-react.spec.ts b/tests/e2e/node-react.spec.ts
index 7c74eee..bba6a8f 100644
--- a/tests/e2e/node-react.spec.ts
+++ b/tests/e2e/node-react.spec.ts
@@ -29,32 +29,34 @@ async function waitForAnimationFrame(page: Page) {
 }
 
 async function lineEndpoints(page: Page) {
-  return page.locator("[data-snapline-type='connector-line']").evaluate((svg) => {
-    const rect = svg.getBoundingClientRect();
-    const transform = new DOMMatrixReadOnly(getComputedStyle(svg).transform);
-    const path = svg.querySelector("path");
-    const numbers =
-      path
-        ?.getAttribute("d")
-        ?.match(/-?\d+(?:\.\d+)?/g)
-        ?.map(Number) ?? [];
-    const startPoint = new DOMPoint(numbers[0] ?? 0, numbers[1] ?? 0);
-    const endPoint = new DOMPoint(numbers[6] ?? 0, numbers[7] ?? 0);
-    const transformedStart = startPoint.matrixTransform(transform);
-    const transformedEnd = endPoint.matrixTransform(transform);
-    const layoutOffsetX = rect.left - transformedStart.x;
-    const layoutOffsetY = rect.top - transformedStart.y;
-    return {
-      start: {
-        x: transformedStart.x + layoutOffsetX,
-        y: transformedStart.y + layoutOffsetY,
-      },
-      end: {
-        x: transformedEnd.x + layoutOffsetX,
-        y: transformedEnd.y + layoutOffsetY,
-      },
-    };
-  });
+  return page
+    .locator("[data-snapline-type='connector-line']")
+    .evaluate((svg) => {
+      const rect = svg.getBoundingClientRect();
+      const transform = new DOMMatrixReadOnly(getComputedStyle(svg).transform);
+      const path = svg.querySelector("path");
+      const numbers =
+        path
+          ?.getAttribute("d")
+          ?.match(/-?\d+(?:\.\d+)?/g)
+          ?.map(Number) ?? [];
+      const startPoint = new DOMPoint(numbers[0] ?? 0, numbers[1] ?? 0);
+      const endPoint = new DOMPoint(numbers[6] ?? 0, numbers[7] ?? 0);
+      const transformedStart = startPoint.matrixTransform(transform);
+      const transformedEnd = endPoint.matrixTransform(transform);
+      const layoutOffsetX = rect.left - transformedStart.x;
+      const layoutOffsetY = rect.top - transformedStart.y;
+      return {
+        start: {
+          x: transformedStart.x + layoutOffsetX,
+          y: transformedStart.y + layoutOffsetY,
+        },
+        end: {
+          x: transformedEnd.x + layoutOffsetX,
+          y: transformedEnd.y + layoutOffsetY,
+        },
+      };
+    });
 }
 
 function expectPointCloseTo(
@@ -70,7 +72,9 @@ test.beforeEach(async ({ page }) => {
   await page.goto("/");
 });
 
-test("renders the React SnapLine demo nodes and connectors", async ({ page }) => {
+test("renders the React SnapLine demo nodes and connectors", async ({
+  page,
+}) => {
   await expect(page.locator("[data-snapline-type='node']")).toHaveCount(3);
   await expect(page.locator("[data-snapline-type='connector']")).toHaveCount(6);
   await expect(page.locator("[data-snapline-type='selection']")).toHaveCount(1);
@@ -88,9 +92,9 @@ test("connects two React SnapLine nodes", async ({ page }) => {
 
   await dragFromTo(page, await centerOf(output), await centerOf(input));
 
-  await expect(page.locator("[data-snapline-type='connector-line']")).toHaveCount(
-    1,
-  );
+  await expect(
+    page.locator("[data-snapline-type='connector-line']"),
+  ).toHaveCount(1);
 });
 
 test("keeps a React line endpoint aligned while the target node is moving", async ({
diff --git a/tests/e2e/node.spec.ts b/tests/e2e/node.spec.ts
index cd12816..e0311f7 100644
--- a/tests/e2e/node.spec.ts
+++ b/tests/e2e/node.spec.ts
@@ -160,9 +160,9 @@ test("clicking an output connector does not create a preview line", async ({
   const outputCenter = await centerOf(output);
   await page.mouse.click(outputCenter.x, outputCenter.y);
 
-  await expect(page.locator("[data-snapline-type='connector-line']")).toHaveCount(
-    0,
-  );
+  await expect(
+    page.locator("[data-snapline-type='connector-line']"),
+  ).toHaveCount(0);
 });
 
 test("clicking an occupied input does not disconnect its line", async ({
@@ -178,9 +178,9 @@ test("clicking an occupied input does not disconnect its line", async ({
   const input = nodeB.locator("[data-snapline-name='input']");
 
   await dragFromTo(page, await centerOf(output), await centerOf(input));
-  await expect(page.locator("[data-snapline-type='connector-line']")).toHaveCount(
-    1,
-  );
+  await expect(
+    page.locator("[data-snapline-type='connector-line']"),
+  ).toHaveCount(1);
 
   const inputCenter = await centerOf(input);
   await page.mouse.click(inputCenter.x, inputCenter.y);
@@ -231,9 +231,9 @@ test("replaces the oldest line when a finite input is full", async ({
   const outputC = nodeC.locator("[data-snapline-name='output']");
 
   await dragFromTo(page, await centerOf(outputA), await centerOf(input));
-  await expect(page.locator("[data-snapline-type='connector-line']")).toHaveCount(
-    1,
-  );
+  await expect(
+    page.locator("[data-snapline-type='connector-line']"),
+  ).toHaveCount(1);
 
   await dragFromTo(page, await centerOf(outputC), await centerOf(input));
   const lines = page.locator("[data-snapline-type='connector-line']");
@@ -273,7 +273,10 @@ test("evicts only the oldest lines needed for a larger finite capacity", async (
     endpointsOf(lines.nth(0)),
     endpointsOf(lines.nth(1)),
   ]);
-  const expectedStarts = await Promise.all([centerOf(outputB), centerOf(outputC)]);
+  const expectedStarts = await Promise.all([
+    centerOf(outputB),
+    centerOf(outputC),
+  ]);
   for (const endpoint of endpoints) {
     expectPointCloseTo(endpoint.end, await centerOf(input));
   }
@@ -356,18 +359,18 @@ test("disconnects a line by picking it up from the input connector", async ({
   const inputCenter = await centerOf(input);
 
   await dragFromTo(page, await centerOf(output), inputCenter);
-  await expect(page.locator("[data-snapline-type='connector-line']")).toHaveCount(
-    1,
-  );
+  await expect(
+    page.locator("[data-snapline-type='connector-line']"),
+  ).toHaveCount(1);
 
   await dragFromTo(page, inputCenter, {
     x: inputCenter.x + 180,
     y: inputCenter.y + 120,
   });
 
-  await expect(page.locator("[data-snapline-type='connector-line']")).toHaveCount(
-    0,
-  );
+  await expect(
+    page.locator("[data-snapline-type='connector-line']"),
+  ).toHaveCount(0);
 });
 
 test("drops an output drag without creating a line when there is no target", async ({
@@ -380,15 +383,14 @@ test("drops an output drag without creating a line when there is no target", asy
     nodeA.locator("[data-snapline-name='output']"),
   );
 
-  await dragFromTo(
-    page,
-    outputCenter,
-    { x: outputCenter.x + 160, y: outputCenter.y - 120 },
-  );
+  await dragFromTo(page, outputCenter, {
+    x: outputCenter.x + 160,
+    y: outputCenter.y - 120,
+  });
 
-  await expect(page.locator("[data-snapline-type='connector-line']")).toHaveCount(
-    0,
-  );
+  await expect(
+    page.locator("[data-snapline-type='connector-line']"),
+  ).toHaveCount(0);
 });
 
 test("selects nodes with the rectangle selector", async ({ page }) => {
diff --git a/tests/e2e/playwright-matrix.ts b/tests/e2e/playwright-matrix.ts
index 52dc0d4..c3ca580 100644
--- a/tests/e2e/playwright-matrix.ts
+++ b/tests/e2e/playwright-matrix.ts
@@ -7,7 +7,10 @@ import { devices } from "@playwright/test";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
-export const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "../..");
+export const repoRoot = resolve(
+  dirname(fileURLToPath(import.meta.url)),
+  "../..",
+);
 
 export const BROWSERS = {
   chromium: devices["Desktop Chrome"],
diff --git a/tests/e2e/snapline-camera.spec.ts b/tests/e2e/snapline-camera.spec.ts
index 5da931b..50878fa 100644
--- a/tests/e2e/snapline-camera.spec.ts
+++ b/tests/e2e/snapline-camera.spec.ts
@@ -42,7 +42,9 @@ test.beforeEach(async ({ page }) => {
 });
 
 test("background drag pans the camera", async ({ page }) => {
-  const nodeA = page.locator("[data-snapline-type='node']", { hasText: "Node A" });
+  const nodeA = page.locator("[data-snapline-type='node']", {
+    hasText: "Node A",
+  });
   const before = await nodeA.boundingBox();
   await dragFromTo(page, { x: 900, y: 620 }, { x: 700, y: 470 });
   const after = await nodeA.boundingBox();
@@ -61,7 +63,9 @@ test("ctrl+wheel zooms the camera", async ({ page }) => {
 });
 
 test("dragging a node does not pan the camera", async ({ page }) => {
-  const nodeB = page.locator("[data-snapline-type='node']", { hasText: "Node B" });
+  const nodeB = page.locator("[data-snapline-type='node']", {
+    hasText: "Node B",
+  });
   const startBox = await nodeB.boundingBox();
   const before = await cameraTransform(page);
   await dragFromTo(
@@ -75,20 +79,26 @@ test("dragging a node does not pan the camera", async ({ page }) => {
 });
 
 test("dragging a connector line does not pan the camera", async ({ page }) => {
-  const nodeA = page.locator("[data-snapline-type='node']", { hasText: "Node A" });
+  const nodeA = page.locator("[data-snapline-type='node']", {
+    hasText: "Node A",
+  });
   const output = nodeA.locator("[data-snapline-name='output']");
   const before = await cameraTransform(page);
   // Drag a line out and drop it on empty canvas: no connection, no pan.
   const start = await centerOf(output);
   await dragFromTo(page, start, { x: start.x + 180, y: start.y + 140 });
   expect(await cameraTransform(page)).toBe(before);
-  await expect(page.locator("[data-snapline-type='connector-line']")).toHaveCount(0);
+  await expect(
+    page.locator("[data-snapline-type='connector-line']"),
+  ).toHaveCount(0);
 });
 
 test("connector drag edge-pans continuously and keeps the line under the pointer", async ({
   page,
 }) => {
-  const nodeA = page.locator("[data-snapline-type='node']", { hasText: "Node A" });
+  const nodeA = page.locator("[data-snapline-type='node']", {
+    hasText: "Node A",
+  });
   const output = nodeA.locator("[data-snapline-name='output']");
   const start = await centerOf(output);
   const camera = page.locator("#node-ui-camera-canvas");
@@ -112,8 +122,14 @@ test("connector drag edge-pans continuously and keeps the line under the pointer
     const path = svg.querySelector("path")?.getAttribute("d") ?? "";
     const numbers = path.match(/-?\d+(?:\.\d+)?/g)?.map(Number) ?? [];
     const transform = new DOMMatrixReadOnly(getComputedStyle(svg).transform);
-    const startPoint = new DOMPoint(numbers[0] ?? 0, numbers[1] ?? 0).matrixTransform(transform);
-    const endPoint = new DOMPoint(numbers[6] ?? 0, numbers[7] ?? 0).matrixTransform(transform);
+    const startPoint = new DOMPoint(
+      numbers[0] ?? 0,
+      numbers[1] ?? 0,
+    ).matrixTransform(transform);
+    const endPoint = new DOMPoint(
+      numbers[6] ?? 0,
+      numbers[7] ?? 0,
+    ).matrixTransform(transform);
     const layoutOffsetX = rect.left - startPoint.x;
     const layoutOffsetY = rect.top - startPoint.y;
     return {
@@ -131,7 +147,9 @@ test("connector drag edge-pans continuously and keeps the line under the pointer
 test("node drag edge-pans while the dragged node stays under the pointer", async ({
   page,
 }) => {
-  const nodeC = page.locator("[data-snapline-type='node']", { hasText: "Node C" });
+  const nodeC = page.locator("[data-snapline-type='node']", {
+    hasText: "Node C",
+  });
   const startBox = await nodeC.boundingBox();
   const camera = page.locator("#node-ui-camera-canvas");
   const bounds = await camera.boundingBox();
@@ -156,10 +174,14 @@ test("node drag edge-pans while the dragged node stays under the pointer", async
   await page.mouse.up();
 });
 
-test("panButton='middle': middle-drag pans, left-drag does not", async ({ page }) => {
+test("panButton='middle': middle-drag pans, left-drag does not", async ({
+  page,
+}) => {
   await page.goto("/snapline-camera?panButton=middle");
   await expect(page.locator("[data-snapline-type='node']")).toHaveCount(3);
-  const nodeA = page.locator("[data-snapline-type='node']", { hasText: "Node A" });
+  const nodeA = page.locator("[data-snapline-type='node']", {
+    hasText: "Node A",
+  });
 
   // Left-drag the background: with panButton='middle' this must NOT pan.
   const beforeLeft = await cameraTransform(page);
@@ -174,10 +196,14 @@ test("panButton='middle': middle-drag pans, left-drag does not", async ({ page }
   expect(after!.y - before!.y).toBeLessThan(-100);
 });
 
-test("wheelPan: unmodified wheel pans, ctrl+wheel still zooms", async ({ page }) => {
+test("wheelPan: unmodified wheel pans, ctrl+wheel still zooms", async ({
+  page,
+}) => {
   await page.goto("/snapline-camera?wheelPan=1");
   await expect(page.locator("[data-snapline-type='node']")).toHaveCount(3);
-  const nodeA = page.locator("[data-snapline-type='node']", { hasText: "Node A" });
+  const nodeA = page.locator("[data-snapline-type='node']", {
+    hasText: "Node A",
+  });
 
   // Two-finger scroll (an unmodified wheel with deltaX/deltaY) pans the camera:
   // a downward + rightward scroll pans the view down/right, so nodes shift up/left.
@@ -199,7 +225,9 @@ test("wheelPan: unmodified wheel pans, ctrl+wheel still zooms", async ({ page })
   await expect.poll(() => cameraTransform(page)).not.toBe(beforeZoom);
 });
 
-test("ctrl+wheel direction: scroll down / pinch in zooms out, scroll up / pinch out zooms in", async ({ page }) => {
+test("ctrl+wheel direction: scroll down / pinch in zooms out, scroll up / pinch out zooms in", async ({
+  page,
+}) => {
   await page.mouse.move(640, 450);
   // Starts at max zoom (1), so first zoom out (scroll down / pinch in): scale drops.
   const base = await cameraScale(page);
@@ -216,15 +244,21 @@ test("ctrl+wheel direction: scroll down / pinch in zooms out, scroll up / pinch
   await expect.poll(() => cameraScale(page)).toBeGreaterThan(zoomedOut);
 });
 
-test("connecting after pan and zoom still lands on the target connector", async ({ page }) => {
+test("connecting after pan and zoom still lands on the target connector", async ({
+  page,
+}) => {
   await dragFromTo(page, { x: 900, y: 620 }, { x: 780, y: 540 });
   await page.mouse.move(640, 450);
   await page.keyboard.down("Control");
   await page.mouse.wheel(0, 120);
   await page.keyboard.up("Control");
 
-  const nodeA = page.locator("[data-snapline-type='node']", { hasText: "Node A" });
-  const nodeB = page.locator("[data-snapline-type='node']", { hasText: "Node B" });
+  const nodeA = page.locator("[data-snapline-type='node']", {
+    hasText: "Node A",
+  });
+  const nodeB = page.locator("[data-snapline-type='node']", {
+    hasText: "Node B",
+  });
   const output = nodeA.locator("[data-snapline-name='output']");
   const input = nodeB.locator("[data-snapline-name='input']");
   await dragFromTo(page, await centerOf(output), await centerOf(input));
@@ -234,10 +268,14 @@ test("connecting after pan and zoom still lands on the target connector", async
   await expect(line.locator("path")).toHaveAttribute("d", /C/);
 });
 
-test("wheel does not pan or zoom the camera mid node-drag (pointer claim blocks it)", async ({ page }) => {
+test("wheel does not pan or zoom the camera mid node-drag (pointer claim blocks it)", async ({
+  page,
+}) => {
   await page.goto("/snapline-camera?wheelPan=1");
   await expect(page.locator("[data-snapline-type='node']")).toHaveCount(3);
-  const nodeA = page.locator("[data-snapline-type='node']", { hasText: "Node A" });
+  const nodeA = page.locator("[data-snapline-type='node']", {
+    hasText: "Node A",
+  });
   const startBox = await nodeA.boundingBox();
 
   // Hold a node drag, then wheel: the claim must suppress the camera globally.
diff --git a/tests/e2e/snapline-edges-react.spec.ts b/tests/e2e/snapline-edges-react.spec.ts
index d31023e..4d7ace6 100644
--- a/tests/e2e/snapline-edges-react.spec.ts
+++ b/tests/e2e/snapline-edges-react.spec.ts
@@ -22,7 +22,9 @@ async function dragFromTo(
 function connectorOf(page: Page, nodeTitle: string, port: "input" | "output") {
   return page
     .locator("[data-snapline-type='node']")
-    .filter({ has: page.getByRole("heading", { name: nodeTitle, exact: true }) })
+    .filter({
+      has: page.getByRole("heading", { name: nodeTitle, exact: true }),
+    })
     .locator(`[data-snapline-name='${port}']`);
 }
 
@@ -31,7 +33,9 @@ test.beforeEach(async ({ page }) => {
   await expect(connectorOf(page, "Node A", "output")).toBeVisible();
 });
 
-test("react: gesture connect emits one intent and the line survives sync", async ({ page }) => {
+test("react: gesture connect emits one intent and the line survives sync", async ({
+  page,
+}) => {
   await dragFromTo(
     page,
     await centerOf(connectorOf(page, "Node A", "output")),
@@ -42,7 +46,9 @@ test("react: gesture connect emits one intent and the line survives sync", async
   await expect(page.locator(LINE)).toHaveCount(1);
 });
 
-test("react: programmatic edge add renders a line with zero intents", async ({ page }) => {
+test("react: programmatic edge add renders a line with zero intents", async ({
+  page,
+}) => {
   await page.getByTestId("add-edge").click();
   await expect(page.locator(LINE)).toHaveCount(1);
   await expect(page.getByTestId("connect-intents")).toHaveText("0");
diff --git a/tests/e2e/snapline-edges.spec.ts b/tests/e2e/snapline-edges.spec.ts
index 3946fdc..ea796e5 100644
--- a/tests/e2e/snapline-edges.spec.ts
+++ b/tests/e2e/snapline-edges.spec.ts
@@ -22,7 +22,9 @@ async function dragFromTo(
 function connectorOf(page: Page, nodeTitle: string, port: "input" | "output") {
   return page
     .locator("[data-snapline-type='node']")
-    .filter({ has: page.getByRole("heading", { name: nodeTitle, exact: true }) })
+    .filter({
+      has: page.getByRole("heading", { name: nodeTitle, exact: true }),
+    })
     .locator(`[data-snapline-name='${port}']`);
 }
 
@@ -42,7 +44,9 @@ test.beforeEach(async ({ page }) => {
   await expect(connectorOf(page, "Node A", "output")).toBeVisible();
 });
 
-test("gesture connect emits one intent and the accepted line survives sync", async ({ page }) => {
+test("gesture connect emits one intent and the accepted line survives sync", async ({
+  page,
+}) => {
   await dragFromTo(
     page,
     await centerOf(connectorOf(page, "Node A", "output")),
@@ -52,12 +56,17 @@ test("gesture connect emits one intent and the accepted line survives sync", asy
   await expect(page.getByTestId("edge-count")).toHaveText("1");
   await expect(page.locator(LINE)).toHaveCount(1);
   // Two frames later the reconciled line is still the doc's line.
-  await page.evaluate(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))));
+  await page.evaluate(
+    () =>
+      new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))),
+  );
   await expect(page.locator(LINE)).toHaveCount(1);
   expect((await counts(page)).disconnect).toBe(0);
 });
 
-test("gesture disconnect emits one intent and the doc drops the edge", async ({ page }) => {
+test("gesture disconnect emits one intent and the doc drops the edge", async ({
+  page,
+}) => {
   await dragFromTo(
     page,
     await centerOf(connectorOf(page, "Node A", "output")),
@@ -65,17 +74,18 @@ test("gesture disconnect emits one intent and the doc drops the edge", async ({
   );
   await expect(page.getByTestId("edge-count")).toHaveText("1");
   // Pick the line up from the occupied input and drop it on empty canvas.
-  await dragFromTo(
-    page,
-    await centerOf(connectorOf(page, "Node B", "input")),
-    { x: 900, y: 700 },
-  );
+  await dragFromTo(page, await centerOf(connectorOf(page, "Node B", "input")), {
+    x: 900,
+    y: 700,
+  });
   await expect(page.getByTestId("disconnect-intents")).toHaveText("1");
   await expect(page.getByTestId("edge-count")).toHaveText("0");
   await expect(page.locator(LINE)).toHaveCount(0);
 });
 
-test("programmatic edge add and remove sync lines with zero intents", async ({ page }) => {
+test("programmatic edge add and remove sync lines with zero intents", async ({
+  page,
+}) => {
   await page.getByTestId("add-edge").click();
   await expect(page.locator(LINE)).toHaveCount(1);
   await page.getByTestId("remove-edge").click();
@@ -85,7 +95,9 @@ test("programmatic edge add and remove sync lines with zero intents", async ({ p
   expect(result.disconnect).toBe(0);
 });
 
-test("full input replaces via ONE atomic request the document applies", async ({ page }) => {
+test("full input replaces via ONE atomic request the document applies", async ({
+  page,
+}) => {
   await dragFromTo(
     page,
     await centerOf(connectorOf(page, "Node A", "output")),
@@ -103,15 +115,21 @@ test("full input replaces via ONE atomic request the document applies", async ({
   expect(log).toBe("connect:a->b|replace:-a->b+c->b");
 });
 
-test("rejected gesture connect leaves no line after re-sync and no paint flicker on accept", async ({ page }) => {
+test("rejected gesture connect leaves no line after re-sync and no paint flicker on accept", async ({
+  page,
+}) => {
   // Arm a per-frame observer that records the line count on every rAF.
   await page.evaluate(() => {
-    const win = window as unknown as { __lineCounts?: number[]; __stop?: boolean };
+    const win = window as unknown as {
+      __lineCounts?: number[];
+      __stop?: boolean;
+    };
     win.__lineCounts = [];
     const tick = () => {
       if (win.__stop) return;
       win.__lineCounts!.push(
-        document.querySelectorAll("[data-snapline-type='connector-line']").length,
+        document.querySelectorAll("[data-snapline-type='connector-line']")
+          .length,
       );
       requestAnimationFrame(tick);
     };
@@ -146,7 +164,9 @@ test("rejected gesture connect leaves no line after re-sync and no paint flicker
   await expect(page.locator(LINE)).toHaveCount(1);
 });
 
-test("node unmount emits zero intents and clears its lines", async ({ page }) => {
+test("node unmount emits zero intents and clears its lines", async ({
+  page,
+}) => {
   await page.getByTestId("add-edge").click(); // programmatic A->C
   await expect(page.locator(LINE)).toHaveCount(1);
   await page.getByTestId("show-node-c").click();
@@ -160,7 +180,9 @@ test("node unmount emits zero intents and clears its lines", async ({ page }) =>
   await expect(page.locator(LINE)).toHaveCount(1);
 });
 
-test("doc changes mid-drag do not destroy the in-flight drag line", async ({ page }) => {
+test("doc changes mid-drag do not destroy the in-flight drag line", async ({
+  page,
+}) => {
   const from = await centerOf(connectorOf(page, "Node A", "output"));
   await page.mouse.move(from.x, from.y);
   await page.mouse.down();
diff --git a/tests/e2e/snapline-group.spec.ts b/tests/e2e/snapline-group.spec.ts
index fdfa86f..c39744e 100644
--- a/tests/e2e/snapline-group.spec.ts
+++ b/tests/e2e/snapline-group.spec.ts
@@ -43,7 +43,9 @@ test.beforeEach(async ({ page }) => {
   await expect(page.locator(MEMBER)).toHaveCount(2);
 });
 
-test("dragging the group header carries its in-box members, not outsiders", async ({ page }) => {
+test("dragging the group header carries its in-box members, not outsiders", async ({
+  page,
+}) => {
   const nodeA = nodeByTitle(page, "Node A");
   const nodeB = nodeByTitle(page, "Node B");
   const beforeA = await nodeA.boundingBox();
@@ -62,14 +64,18 @@ test("dragging the group header carries its in-box members, not outsiders", asyn
   expect(Math.abs(afterB!.y - beforeB!.y)).toBeLessThan(8);
 });
 
-test("carried members do not fire enter/leave (cue count stays stable)", async ({ page }) => {
+test("carried members do not fire enter/leave (cue count stays stable)", async ({
+  page,
+}) => {
   const header = await centerOf(page.locator(HEADER));
   await dragFromTo(page, header, { x: header.x + 60, y: header.y + 40 });
   // A and C merely moved with the group — still members, no flicker.
   await expect(page.locator(MEMBER)).toHaveCount(2);
 });
 
-test("resizing the group to cover a node adds it, shrinking removes it", async ({ page }) => {
+test("resizing the group to cover a node adds it, shrinking removes it", async ({
+  page,
+}) => {
   const nodeB = nodeByTitle(page, "Node B");
   await expect(nodeB).not.toHaveAttribute("data-member", "true");
 
@@ -86,7 +92,9 @@ test("resizing the group to cover a node adds it, shrinking removes it", async (
   await expect(page.locator(MEMBER)).toHaveCount(2);
 });
 
-test("moving the group over a node adds it, and the next drag carries it", async ({ page }) => {
+test("moving the group over a node adds it, and the next drag carries it", async ({
+  page,
+}) => {
   const nodeB = nodeByTitle(page, "Node B");
   const startB = await nodeB.boundingBox();
 
@@ -134,7 +142,8 @@ test("nested groups carry their full descendant subtree", async ({ page }) => {
   await page.mouse.down();
   await page.mouse.move(target.x, target.y, { steps: 12 });
   await page.evaluate(
-    () => new Promise<void>((resolve) => requestAnimationFrame(() => resolve())),
+    () =>
+      new Promise<void>((resolve) => requestAnimationFrame(() => resolve())),
   );
 
   const liveInner = await inner.boundingBox();
diff --git a/tests/e2e/snapline-react-features.spec.ts b/tests/e2e/snapline-react-features.spec.ts
index e4119e2..93d2faf 100644
--- a/tests/e2e/snapline-react-features.spec.ts
+++ b/tests/e2e/snapline-react-features.spec.ts
@@ -9,7 +9,11 @@ async function centerOf(locator: Locator) {
   return { x: box!.x + box!.width / 2, y: box!.y + box!.height / 2 };
 }
 
-async function dragFromTo(page: Page, from: { x: number; y: number }, to: { x: number; y: number }) {
+async function dragFromTo(
+  page: Page,
+  from: { x: number; y: number },
+  to: { x: number; y: number },
+) {
   await page.mouse.move(from.x, from.y);
   await page.mouse.down();
   await page.mouse.move(to.x, to.y, { steps: 14 });
@@ -17,12 +21,16 @@ async function dragFromTo(page: Page, from: { x: number; y: number }, to: { x: n
 }
 
 async function waitForAnimationFrame(page: Page) {
-  await page.evaluate(() => new Promise<void>((r) => requestAnimationFrame(() => r())));
+  await page.evaluate(
+    () => new Promise<void>((r) => requestAnimationFrame(() => r())),
+  );
 }
 
 const NODE = "[data-snapline-type='node']";
 
-test("react: resizing a node grows it from the BR corner and keeps lines glued", async ({ page }) => {
+test("react: resizing a node grows it from the BR corner and keeps lines glued", async ({
+  page,
+}) => {
   await page.goto("/snapline-resize");
   await expect(page.locator(NODE)).toHaveCount(2);
   const nodeA = page.locator(NODE, { hasText: "Resizable A" });
@@ -36,7 +44,10 @@ test("react: resizing a node grows it from the BR corner and keeps lines glued",
   await expect(line).toHaveCount(1);
 
   const before = await nodeA.boundingBox();
-  const corner = { x: before!.x + before!.width - 2, y: before!.y + before!.height - 2 };
+  const corner = {
+    x: before!.x + before!.width - 2,
+    y: before!.y + before!.height - 2,
+  };
   await dragFromTo(page, corner, { x: corner.x + 140, y: corner.y + 80 });
   await waitForAnimationFrame(page);
 
@@ -46,19 +57,26 @@ test("react: resizing a node grows it from the BR corner and keeps lines glued",
   await expect(line).toHaveCount(1);
 });
 
-test("react: a plain node moves (not resizes) when grabbed at its BR corner", async ({ page }) => {
+test("react: a plain node moves (not resizes) when grabbed at its BR corner", async ({
+  page,
+}) => {
   await page.goto("/snapline-resize");
   await expect(page.locator(NODE)).toHaveCount(2);
   const nodeB = page.locator(NODE, { hasText: "Fixed B" });
   const before = await nodeB.boundingBox();
-  const corner = { x: before!.x + before!.width - 3, y: before!.y + before!.height - 3 };
+  const corner = {
+    x: before!.x + before!.width - 3,
+    y: before!.y + before!.height - 3,
+  };
   await dragFromTo(page, corner, { x: corner.x + 100, y: corner.y + 60 });
   const after = await nodeB.boundingBox();
   expect(after!.x - before!.x).toBeGreaterThan(70);
   expect(Math.abs(after!.width - before!.width)).toBeLessThan(4);
 });
 
-test("react: group carries its in-box members and resize updates membership", async ({ page }) => {
+test("react: group carries its in-box members and resize updates membership", async ({
+  page,
+}) => {
   await page.goto("/snapline-group");
   await expect(page.locator(NODE)).toHaveCount(3);
   await expect(page.locator("[data-snapline-type='group']")).toHaveCount(1);
@@ -71,7 +89,9 @@ test("react: group carries its in-box members and resize updates membership", as
   const beforeB = await nodeB.boundingBox();
 
   // Move the group by its header: members ride, outsider stays.
-  const header = await centerOf(page.locator("[data-snapline-part='group-header']"));
+  const header = await centerOf(
+    page.locator("[data-snapline-part='group-header']"),
+  );
   await dragFromTo(page, header, { x: header.x + 120, y: header.y + 60 });
   const afterA = await nodeA.boundingBox();
   const afterB = await nodeB.boundingBox();
diff --git a/tests/e2e/snapsort-adapter-ghosts.spec.ts b/tests/e2e/snapsort-adapter-ghosts.spec.ts
index 1917877..3a1e08f 100644
--- a/tests/e2e/snapsort-adapter-ghosts.spec.ts
+++ b/tests/e2e/snapsort-adapter-ghosts.spec.ts
@@ -5,7 +5,10 @@ import { expect, test, type Locator, type Page } from "@playwright/test";
 // has migrated to the items+snippet API) — it has no React-adapter
 // equivalent yet, so it only runs under the svelte project.
 test.beforeEach(async ({}, testInfo) => {
-  test.skip(!testInfo.project.name.startsWith("svelte"), "Svelte-adapter-specific ghost ownership marker");
+  test.skip(
+    !testInfo.project.name.startsWith("svelte"),
+    "Svelte-adapter-specific ghost ownership marker",
+  );
 });
 
 async function rect(locator: Locator) {
@@ -19,7 +22,9 @@ function center(box: { x: number; y: number; width: number; height: number }) {
 }
 
 async function demoBoxByHeading(page: Page, heading: string): Promise<Locator> {
-  return page.locator(".demo-cell", { has: page.locator("h2", { hasText: heading }) });
+  return page.locator(".demo-cell", {
+    has: page.locator("h2", { hasText: heading }),
+  });
 }
 
 async function itemByText(container: Locator, text: string): Promise<Locator> {
@@ -66,10 +71,10 @@ test.describe("SnapSort adapter-rendered ghost entries (items mode)", () => {
     await page.mouse.up();
     await page.waitForTimeout(250);
 
-    await expect(column.locator('[data-snapsort-ghost-entry]')).toHaveCount(0);
-    const order = await column.locator(".snapsort-item").evaluateAll((els) =>
-      els.map((el) => el.textContent?.trim()),
-    );
+    await expect(column.locator("[data-snapsort-ghost-entry]")).toHaveCount(0);
+    const order = await column
+      .locator(".snapsort-item")
+      .evaluateAll((els) => els.map((el) => el.textContent?.trim()));
     expect(order).toEqual(["Item 2", "Item 3", "Item 4", "Item 1"]);
   });
 
@@ -105,13 +110,15 @@ test.describe("SnapSort adapter-rendered ghost entries (items mode)", () => {
       const ghostIndices = children
         .map((n, i) => (n.hasAttribute("data-snapsort-ghost-entry") ? i : -1))
         .filter((i) => i !== -1);
-      return ghostIndices.length === 2 && ghostIndices[1] - ghostIndices[0] === 1;
+      return (
+        ghostIndices.length === 2 && ghostIndices[1] - ghostIndices[0] === 1
+      );
     });
     expect(isContiguous).toBe(true);
 
     await page.mouse.up();
     await page.waitForTimeout(250);
-    await expect(column.locator('[data-snapsort-ghost-entry]')).toHaveCount(0);
+    await expect(column.locator("[data-snapsort-ghost-entry]")).toHaveCount(0);
   });
 
   test("cross-container drag never leaves a stale ghost entry in the departed area", async ({
@@ -146,14 +153,16 @@ test.describe("SnapSort adapter-rendered ghost entries (items mode)", () => {
     }
     await page.waitForTimeout(80);
 
-    await expect(area1.locator('[data-snapsort-ghost-entry]')).toHaveCount(0);
-    await expect(area2.locator('[data-snapsort-ghost-entry="flow"]')).toHaveCount(1);
+    await expect(area1.locator("[data-snapsort-ghost-entry]")).toHaveCount(0);
+    await expect(
+      area2.locator('[data-snapsort-ghost-entry="flow"]'),
+    ).toHaveCount(1);
 
     await page.mouse.up();
     await page.waitForTimeout(250);
 
-    await expect(area1.locator('[data-snapsort-ghost-entry]')).toHaveCount(0);
-    await expect(area2.locator('[data-snapsort-ghost-entry]')).toHaveCount(0);
+    await expect(area1.locator("[data-snapsort-ghost-entry]")).toHaveCount(0);
+    await expect(area2.locator("[data-snapsort-ghost-entry]")).toHaveCount(0);
     await expect(area1.locator(".snapsort-item")).toHaveCount(2);
     await expect(area2.locator(".snapsort-item")).toHaveCount(4);
 
@@ -175,8 +184,10 @@ test.describe("SnapSort adapter-rendered ghost entries (items mode)", () => {
     }
     await page.waitForTimeout(80);
 
-    await expect(area2.locator('[data-snapsort-ghost-entry]')).toHaveCount(0);
-    await expect(area1.locator('[data-snapsort-ghost-entry="flow"]')).toHaveCount(1);
+    await expect(area2.locator("[data-snapsort-ghost-entry]")).toHaveCount(0);
+    await expect(
+      area1.locator('[data-snapsort-ghost-entry="flow"]'),
+    ).toHaveCount(1);
 
     await page.mouse.up();
     await page.waitForTimeout(250);
diff --git a/tests/e2e/snapsort-drag-snapshot.spec.ts b/tests/e2e/snapsort-drag-snapshot.spec.ts
index 707a17a..bb62397 100644
--- a/tests/e2e/snapsort-drag-snapshot.spec.ts
+++ b/tests/e2e/snapsort-drag-snapshot.spec.ts
@@ -571,9 +571,9 @@ test("progressive placement selects the ghost slot under the dragged center", ()
   );
   dragged.worldTransform = { x: 73, y: 0, scaleX: 1, scaleY: 1 };
 
-  expect(determineProgressiveDropTarget(dragged as any, row as any)).toMatchObject(
-    { container: row, index: 1 },
-  );
+  expect(
+    determineProgressiveDropTarget(dragged as any, row as any),
+  ).toMatchObject({ container: row, index: 1 });
 });
 
 test("euclidean placement keeps parent slots reachable next to nested containers", () => {
@@ -654,10 +654,7 @@ test("insertion placement maps a downward same-container gap to the live index",
   );
   dragged.worldTransform = { x: 0, y: 120, scaleX: 1, scaleY: 1 };
 
-  const target = determineInsertionDropTarget(
-    dragged as any,
-    container as any,
-  );
+  const target = determineInsertionDropTarget(dragged as any, container as any);
 
   expect(target?.container).toBe(container);
   expect(target?.index).toBe(3);
@@ -749,10 +746,7 @@ test("insertion placement maps an upward same-container gap to the live index",
   );
   dragged.worldTransform = { x: 0, y: 32, scaleX: 1, scaleY: 1 };
 
-  const target = determineInsertionDropTarget(
-    dragged as any,
-    container as any,
-  );
+  const target = determineInsertionDropTarget(dragged as any, container as any);
 
   expect(target?.container).toBe(container);
   expect(target?.index).toBe(1);
@@ -791,10 +785,7 @@ test("insertion placement keeps the top boundary reachable when dragging the fir
   );
   dragged.worldTransform = { x: 0, y: -22, scaleX: 1, scaleY: 1 };
 
-  const target = determineInsertionDropTarget(
-    dragged as any,
-    container as any,
-  );
+  const target = determineInsertionDropTarget(dragged as any, container as any);
 
   expect(target?.container).toBe(container);
   expect(target?.index).toBe(1);
@@ -833,10 +824,7 @@ test("insertion placement keeps the bottom boundary reachable when dragging the
   );
   dragged.worldTransform = { x: 0, y: 132, scaleX: 1, scaleY: 1 };
 
-  const target = determineInsertionDropTarget(
-    dragged as any,
-    container as any,
-  );
+  const target = determineInsertionDropTarget(dragged as any, container as any);
 
   expect(target?.container).toBe(container);
   expect(target?.index).toBe(3);
@@ -886,10 +874,7 @@ test("insertion placement spans the container content box on the marker cross ax
   container.currentDomProperty = containerBox;
   dragged.worldTransform = { x: 34, y: 112, scaleX: 1, scaleY: 1 };
 
-  const target = determineInsertionDropTarget(
-    dragged as any,
-    container as any,
-  );
+  const target = determineInsertionDropTarget(dragged as any, container as any);
 
   expect(target?.container).toBe(container);
   expect(target?.ghostRect?.x).toBe(32);
@@ -930,10 +915,7 @@ test("insertion placement carries snapshot marker insets on the ghost rect", ()
   };
   dragged.worldTransform = { x: 34, y: 112, scaleX: 1, scaleY: 1 };
 
-  const target = determineInsertionDropTarget(
-    dragged as any,
-    container as any,
-  );
+  const target = determineInsertionDropTarget(dragged as any, container as any);
 
   expect(target?.ghostRect?.insetLeft).toBe(18);
   expect(target?.ghostRect?.insetRight).toBe(6);
@@ -955,10 +937,7 @@ test("insertion placement shows a centered marker for an empty row container", (
   );
   dragged.worldTransform = { x: 80, y: 44, scaleX: 1, scaleY: 1 };
 
-  const target = determineInsertionDropTarget(
-    dragged as any,
-    container as any,
-  );
+  const target = determineInsertionDropTarget(dragged as any, container as any);
 
   expect(target?.container).toBe(container);
   expect(target?.index).toBe(0);
@@ -1174,12 +1153,16 @@ test("reproduces same-container row drag where final ghost centers collapse", ()
     direction: "row",
     mainAxisAlign: "start",
     locked: false,
-    box: layoutBox({ x: 0, y: 0, width: 488, height: 128 }, {}, {
-      top: 14,
-      right: 14,
-      bottom: 14,
-      left: 14,
-    }),
+    box: layoutBox(
+      { x: 0, y: 0, width: 488, height: 128 },
+      {},
+      {
+        top: 14,
+        right: 14,
+        bottom: 14,
+        left: 14,
+      },
+    ),
     children: [
       ["彼", 53.6, 47.8, 14, 14],
       ["の", 53.6, 47.8, 71.6, 14],
@@ -1575,7 +1558,9 @@ async function collectSample(
         : -1;
       const directSiblingTexts = spacerParent
         ? [...spacerParent.children]
-            .filter((child) => child.id !== "spacer" && child !== draggedElement)
+            .filter(
+              (child) => child.id !== "spacer" && child !== draggedElement,
+            )
             .map(
               (child) => child.textContent?.trim().replace(/\s+/g, " ") ?? "",
             )
@@ -1589,34 +1574,38 @@ async function collectSample(
                 (text) => text === "" || /^Item [4-6]$/.test(text),
               )
             ? "website-nested-inner"
-            : directSiblingTexts.some((text) =>
-                  /^Item [1-3]$/.test(text),
-                ) ||
+            : directSiblingTexts.some((text) => /^Item [1-3]$/.test(text)) ||
                 directSiblingTexts.some((text) =>
                   /Item 4 Item 5 Item 6/.test(text),
                 )
               ? "website-nested-outer"
               : directSiblingTexts.every((text) => /^Sub A\d/.test(text))
-            ? "nested-inner"
-            : directSiblingTexts.some((text) =>
-                  /Item 1\.5|Item 2|Item 3/.test(text),
-                )
-              ? "nested-outer"
-              : directSiblingTexts.some((text) =>
-                    /Header|Card Grid|Footer/.test(text),
-                  )
-                ? "layers-root"
-                : directSiblingTexts.some((text) => /Hero Section/.test(text))
-                  ? "layers-hero"
-                  : directSiblingTexts.some((text) => /Loose Item/.test(text))
-                    ? "drag-root"
-                    : directSiblingTexts.some((text) => /Group 1 -/.test(text))
-                      ? "drag-group-1"
+                ? "nested-inner"
+                : directSiblingTexts.some((text) =>
+                      /Item 1\.5|Item 2|Item 3/.test(text),
+                    )
+                  ? "nested-outer"
+                  : directSiblingTexts.some((text) =>
+                        /Header|Card Grid|Footer/.test(text),
+                      )
+                    ? "layers-root"
+                    : directSiblingTexts.some((text) =>
+                          /Hero Section/.test(text),
+                        )
+                      ? "layers-hero"
                       : directSiblingTexts.some((text) =>
-                            /Group 2 -/.test(text),
+                            /Loose Item/.test(text),
                           )
-                        ? "drag-group-2"
-                        : "other";
+                        ? "drag-root"
+                        : directSiblingTexts.some((text) =>
+                              /Group 1 -/.test(text),
+                            )
+                          ? "drag-group-1"
+                          : directSiblingTexts.some((text) =>
+                                /Group 2 -/.test(text),
+                              )
+                            ? "drag-group-2"
+                            : "other";
       const draggedRect = rectOf(draggedElement);
       const dragged = draggedRect
         ? {
@@ -1633,11 +1622,12 @@ async function collectSample(
             ),
           ].map((element) => {
             const htmlElement = element as HTMLElement;
-            const role = element.id === "spacer"
-              ? "ghost"
-              : element.classList.contains("snapsort-container")
-                ? "container"
-                : "item";
+            const role =
+              element.id === "spacer"
+                ? "ghost"
+                : element.classList.contains("snapsort-container")
+                  ? "container"
+                  : "item";
             return {
               role,
               text: element.textContent?.trim().replace(/\s+/g, " ") ?? "",
@@ -1777,10 +1767,17 @@ async function dragTo(
 ): Promise<DragSample[]> {
   const sourceCenter = center(await itemRect(source));
   const targetCenter = center(await itemRect(target));
-  return dragBy(page, source, text, index, {
-    x: targetCenter.x - sourceCenter.x,
-    y: targetCenter.y - sourceCenter.y,
-  }, options);
+  return dragBy(
+    page,
+    source,
+    text,
+    index,
+    {
+      x: targetCenter.x - sourceCenter.x,
+      y: targetCenter.y - sourceCenter.y,
+    },
+    options,
+  );
 }
 
 async function dragToItemFraction(
@@ -1794,10 +1791,17 @@ async function dragToItemFraction(
 ): Promise<DragSample[]> {
   const sourceCenter = center(await itemRect(source));
   const targetRect = await itemRect(target);
-  return dragBy(page, source, text, index, {
-    x: targetRect.x + targetRect.width / 2 - sourceCenter.x,
-    y: targetRect.y + targetRect.height * yRatio - sourceCenter.y,
-  }, options);
+  return dragBy(
+    page,
+    source,
+    text,
+    index,
+    {
+      x: targetRect.x + targetRect.width / 2 - sourceCenter.x,
+      y: targetRect.y + targetRect.height * yRatio - sourceCenter.y,
+    },
+    options,
+  );
 }
 
 async function directSnapSortItemTexts(locator: Locator): Promise<string[]> {
@@ -1889,7 +1893,10 @@ async function releaseStartedDragNearOrigin(
   await page.waitForTimeout(120);
 }
 
-async function dragLockedNestedContainerBackground(page: Page, nested: Locator) {
+async function dragLockedNestedContainerBackground(
+  page: Page,
+  nested: Locator,
+) {
   const childContainer = nested.locator(".snapsort-container").nth(1);
   const rect = await itemRect(childContainer);
   const start = {
@@ -1909,68 +1916,73 @@ async function nestedContainerSelfInsertProbe(
   page: Page,
 ): Promise<SelfInsertProbeState> {
   const coreImportPath = `/@fs${process.cwd()}/src/index.ts`;
-  return page.evaluate(async ({ coreImportPath }) => {
-    const { GlobalManager } = await import(coreImportPath);
-    const containers =
-      GlobalManager.getInstance().data.dragAndDropContainers ?? [];
-    const nestedCell = [...document.querySelectorAll(".demo-cell")].find(
-      (cell) =>
-        cell.querySelector("h2")?.textContent?.trim() === "Nested Container",
-    );
-    const outerElement = nestedCell?.querySelector(".snapsort-container");
-    const childElement = nestedCell?.querySelectorAll(".snapsort-container")[1];
-    const outer = containers.find(
-      (container: any) => container.element === outerElement,
-    );
-    const child = containers.find(
-      (container: any) => container.element === childElement,
-    );
-    const normalizeText = (element: Element | null) =>
-      element?.textContent?.trim().replace(/\s+/g, " ") ?? "";
-    const itemText = (item: any) => normalizeText(item.element);
+  return page.evaluate(
+    async ({ coreImportPath }) => {
+      const { GlobalManager } = await import(coreImportPath);
+      const containers =
+        GlobalManager.getInstance().data.dragAndDropContainers ?? [];
+      const nestedCell = [...document.querySelectorAll(".demo-cell")].find(
+        (cell) =>
+          cell.querySelector("h2")?.textContent?.trim() === "Nested Container",
+      );
+      const outerElement = nestedCell?.querySelector(".snapsort-container");
+      const childElement = nestedCell?.querySelectorAll(
+        ".snapsort-container",
+      )[1];
+      const outer = containers.find(
+        (container: any) => container.element === outerElement,
+      );
+      const child = containers.find(
+        (container: any) => container.element === childElement,
+      );
+      const normalizeText = (element: Element | null) =>
+        element?.textContent?.trim().replace(/\s+/g, " ") ?? "";
+      const itemText = (item: any) => normalizeText(item.element);
 
-    if (!outer || !child) {
-      return {
-        found: false,
-        childIndex: null,
-        duplicateCount: null,
-        insertEvents: [],
-        beforeOrder: [],
-        afterOrder: [],
-        domChildren: [],
-      };
-    }
+      if (!outer || !child) {
+        return {
+          found: false,
+          childIndex: null,
+          duplicateCount: null,
+          insertEvents: [],
+          beforeOrder: [],
+          afterOrder: [],
+          domChildren: [],
+        };
+      }
 
-    const beforeOrder = outer.itemOrderedList.map(itemText);
-    const childIndex = outer.itemOrderedList.indexOf(child);
-    const insertEvents: SelfInsertProbeState["insertEvents"] = [];
-    const originalInsert = outer.callbacks.onItemInsert;
-    outer.config.callbacks.onItemInsert = (event: any) => {
-      insertEvents.push({
-        index: event.index,
-        selfBefore: event.beforeElement === event.item.element,
-        beforeText: normalizeText(event.beforeElement),
-      });
-      originalInsert(event);
-    };
+      const beforeOrder = outer.itemOrderedList.map(itemText);
+      const childIndex = outer.itemOrderedList.indexOf(child);
+      const insertEvents: SelfInsertProbeState["insertEvents"] = [];
+      const originalInsert = outer.callbacks.onItemInsert;
+      outer.config.callbacks.onItemInsert = (event: any) => {
+        insertEvents.push({
+          index: event.index,
+          selfBefore: event.beforeElement === event.item.element,
+          beforeText: normalizeText(event.beforeElement),
+        });
+        originalInsert(event);
+      };
 
-    outer.insertItemAt(outer, child, childIndex);
-    outer.config.callbacks.onItemInsert = originalInsert;
+      outer.insertItemAt(outer, child, childIndex);
+      outer.config.callbacks.onItemInsert = originalInsert;
 
-    return {
-      found: true,
-      childIndex,
-      duplicateCount: outer.itemOrderedList.filter(
-        (item: any) => item === child,
-      ).length,
-      insertEvents,
-      beforeOrder,
-      afterOrder: outer.itemOrderedList.map(itemText),
-      domChildren: [...outer.element.children].map((element) =>
-        normalizeText(element),
-      ),
-    };
-  }, { coreImportPath });
+      return {
+        found: true,
+        childIndex,
+        duplicateCount: outer.itemOrderedList.filter(
+          (item: any) => item === child,
+        ).length,
+        insertEvents,
+        beforeOrder,
+        afterOrder: outer.itemOrderedList.map(itemText),
+        domChildren: [...outer.element.children].map((element) =>
+          normalizeText(element),
+        ),
+      };
+    },
+    { coreImportPath },
+  );
 }
 
 async function directLogoSliceOrder(locator: Locator): Promise<number[]> {
@@ -1978,11 +1990,7 @@ async function directLogoSliceOrder(locator: Locator): Promise<number[]> {
     [...element.children]
       .filter((child) => child.classList.contains("snapsort-item"))
       .map((child) =>
-        Number(
-          child
-            .querySelector<HTMLElement>(".logo-slice")
-            ?.dataset.slice,
-        ),
+        Number(child.querySelector<HTMLElement>(".logo-slice")?.dataset.slice),
       ),
   );
 }
@@ -2060,10 +2068,7 @@ function expectNoParentReentry(
 ) {
   const kinds = samples
     .map((sample) => sample.spacerParentKind)
-    .filter(
-      (kind): kind is string =>
-        kind === innerKind || kind === outerKind,
-    );
+    .filter((kind): kind is string => kind === innerKind || kind === outerKind);
   const firstInner = kinds.indexOf(innerKind);
   expect(
     firstInner,
@@ -2288,13 +2293,30 @@ test.describe("Snapsort drag-start snapshot layout", () => {
     const offsets = [
       0,
       0.5,
-      0.25, 0.75,
-      0.33, 0.67, 1 / 3, 2 / 3,
-      0.1, 0.2, 0.4, 0.6, 0.8, 0.9,
-      0.125, 0.375, 0.625, 0.875,
-      0.0625, 0.03125, 0.015625, 0.0078125,
+      0.25,
+      0.75,
+      0.33,
+      0.67,
+      1 / 3,
+      2 / 3,
+      0.1,
+      0.2,
+      0.4,
+      0.6,
+      0.8,
+      0.9,
+      0.125,
+      0.375,
+      0.625,
+      0.875,
+      0.0625,
+      0.03125,
+      0.015625,
+      0.0078125,
     ];
-    const widths = bases.flatMap((base) => offsets.map((offset) => base + offset));
+    const widths = bases.flatMap((base) =>
+      offsets.map((offset) => base + offset),
+    );
 
     await page.setContent('<main id="hero-grid-fixture"></main>');
     const measuredGrids = await page.evaluate((caseWidths) => {
@@ -2561,7 +2583,12 @@ test.describe("Snapsort drag-start snapshot layout", () => {
             }
             return { spacerIndex: index, ghost, items };
           });
-          return { name: entry.name, container: containerBox, itemBoxes, truths };
+          return {
+            name: entry.name,
+            container: containerBox,
+            itemBoxes,
+            truths,
+          };
         });
       },
       {
@@ -2609,9 +2636,7 @@ test.describe("Snapsort drag-start snapshot layout", () => {
           filter: { excludeSnapshots: new Set([dragged]) },
           insertions: [insertion],
         });
-        const actualById = new Map(
-          truth.items.map((item) => [item.id, item]),
-        );
+        const actualById = new Map(truth.items.map((item) => [item.id, item]));
         for (const [snapshotItem, position] of result.itemPositions) {
           const actual = actualById.get(snapshotItem.value);
           if (!actual) continue;
@@ -2928,25 +2953,21 @@ test.describe("Snapsort drag-start snapshot layout", () => {
 
       const texts = (element: Element) =>
         element.textContent?.trim().replace(/\s+/g, " ") ?? "";
-      const prediction = await verticalColumn.evaluate(
-        (box, dragged) => {
-          const out: Record<string, { x: number; y: number }> = {};
-          for (const element of box.querySelectorAll(".snapsort-item")) {
-            const text =
-              element.textContent?.trim().replace(/\s+/g, " ") ?? "";
-            if (element.id === "spacer" || text.includes(dragged)) continue;
-            const rect = element.getBoundingClientRect();
-            out[text] = { x: rect.x, y: rect.y };
-          }
-          const spacer = box.querySelector("#spacer");
-          if (spacer) {
-            const rect = spacer.getBoundingClientRect();
-            out["__dragged__"] = { x: rect.x, y: rect.y };
-          }
-          return out;
-        },
-        sourceText,
-      );
+      const prediction = await verticalColumn.evaluate((box, dragged) => {
+        const out: Record<string, { x: number; y: number }> = {};
+        for (const element of box.querySelectorAll(".snapsort-item")) {
+          const text = element.textContent?.trim().replace(/\s+/g, " ") ?? "";
+          if (element.id === "spacer" || text.includes(dragged)) continue;
+          const rect = element.getBoundingClientRect();
+          out[text] = { x: rect.x, y: rect.y };
+        }
+        const spacer = box.querySelector("#spacer");
+        if (spacer) {
+          const rect = spacer.getBoundingClientRect();
+          out["__dragged__"] = { x: rect.x, y: rect.y };
+        }
+        return out;
+      }, sourceText);
 
       await page.mouse.up();
       await page.waitForTimeout(500);
@@ -2964,8 +2985,7 @@ test.describe("Snapsort drag-start snapshot layout", () => {
         return out;
       }, sourceText);
 
-      const drifts: Array<{ label: string; entry: string; delta: number }> =
-        [];
+      const drifts: Array<{ label: string; entry: string; delta: number }> = [];
       let compared = 0;
       for (const [entry, predicted] of Object.entries(prediction)) {
         const actual = settled[entry];
@@ -2975,7 +2995,8 @@ test.describe("Snapsort drag-start snapshot layout", () => {
           Math.abs(predicted.x - actual.x),
           Math.abs(predicted.y - actual.y),
         );
-        if (delta > TOLERANCE) drifts.push({ label, entry, delta: +delta.toFixed(2) });
+        if (delta > TOLERANCE)
+          drifts.push({ label, entry, delta: +delta.toFixed(2) });
       }
       // Guard against a vacuous pass: the oracle must have compared the
       // dragged item's landing slot plus the displaced items.
@@ -3070,7 +3091,9 @@ test.describe("Snapsort drag-start snapshot layout", () => {
     // was measured at.
     const spacerSizing = await nested.evaluate((box) => {
       const spacer = box.querySelector("#spacer") as HTMLElement | null;
-      const sublist = box.querySelector(".stretch-sublist") as HTMLElement | null;
+      const sublist = box.querySelector(
+        ".stretch-sublist",
+      ) as HTMLElement | null;
       if (!spacer || !sublist) return null;
       const spacerRect = spacer.getBoundingClientRect();
       const style = getComputedStyle(sublist);
@@ -3120,7 +3143,8 @@ test.describe("Snapsort drag-start snapshot layout", () => {
         const text = element.textContent?.trim().replace(/\s+/g, " ") ?? "";
         const rect = element.getBoundingClientRect();
         if (text === "Task 1") out["__dragged__"] = { x: rect.x, y: rect.y };
-        else if (/^Sub task \d$/.test(text)) out[text] = { x: rect.x, y: rect.y };
+        else if (/^Sub task \d$/.test(text))
+          out[text] = { x: rect.x, y: rect.y };
       }
       return out;
     });
@@ -3138,11 +3162,10 @@ test.describe("Snapsort drag-start snapshot layout", () => {
     const transitions = hosts.filter(
       (host, index) => index > 0 && host !== hosts[index - 1],
     ).length;
-    const subGroupTexts = await nested.evaluate(
-      (box) =>
-        [...box.querySelectorAll(".stretch-sublist .snapsort-item")].map(
-          (element) => element.textContent?.trim().replace(/\s+/g, " ") ?? "",
-        ),
+    const subGroupTexts = await nested.evaluate((box) =>
+      [...box.querySelectorAll(".stretch-sublist .snapsort-item")].map(
+        (element) => element.textContent?.trim().replace(/\s+/g, " ") ?? "",
+      ),
     );
 
     await writeJson(testInfo.outputPath("nested-stretch-flicker.json"), {
@@ -3151,14 +3174,18 @@ test.describe("Snapsort drag-start snapshot layout", () => {
       drifts,
       subGroupTexts,
     });
-    expect(hosts[hosts.length - 1], "spacer should end in the nested sub-list").toBe(
-      "nested",
-    );
+    expect(
+      hosts[hosts.length - 1],
+      "spacer should end in the nested sub-list",
+    ).toBe("nested");
     expect(
       transitions,
       "spacer host must not oscillate between parent and nested containers",
     ).toBeLessThanOrEqual(2);
-    expect(drifts, "nested drop should land where the preview predicted").toHaveLength(0);
+    expect(
+      drifts,
+      "nested drop should land where the preview predicted",
+    ).toHaveLength(0);
     expect(
       subGroupTexts.some((text) => text.includes("Task 1")),
       "the dragged item should commit into the nested sub-list",
@@ -3278,7 +3305,9 @@ test.describe("Snapsort drag-start snapshot layout", () => {
       insertions: [insertion],
     });
     const rect = result.virtualRects.get(insertion)!;
-    expect(Math.abs(rect.width - measured.spacer.width)).toBeLessThanOrEqual(1.25);
+    expect(Math.abs(rect.width - measured.spacer.width)).toBeLessThanOrEqual(
+      1.25,
+    );
     expect(Math.abs(rect.y - measured.spacer.y)).toBeLessThanOrEqual(1.25);
   });
 
@@ -3573,17 +3602,20 @@ test.describe("Snapsort drag-start snapshot layout", () => {
     await releaseStartedDragNearOrigin(page, nested, "Item 1.5", "Sub A1", 0.2);
     const state = await nestedSnapSortLifecycleState(page);
 
-    await writeJson(testInfo.outputPath("threshold-release-cleanup-repro.json"), {
-      state,
-      errors: [
-        ...pageErrors,
-        ...consoleMessages.filter((message) =>
-          /Missing drag snapshot|Unhandled|TypeError|ReferenceError/i.test(
-            message,
+    await writeJson(
+      testInfo.outputPath("threshold-release-cleanup-repro.json"),
+      {
+        state,
+        errors: [
+          ...pageErrors,
+          ...consoleMessages.filter((message) =>
+            /Missing drag snapshot|Unhandled|TypeError|ReferenceError/i.test(
+              message,
+            ),
           ),
-        ),
-      ],
-    });
+        ],
+      },
+    );
 
     expect(state.spacerCount, "released drag should remove its ghost").toBe(0);
     expect(
@@ -3616,21 +3648,24 @@ test.describe("Snapsort drag-start snapshot layout", () => {
     await dragLockedNestedContainerBackground(page, nested);
     const afterLockedDrag = await nestedSnapSortLifecycleState(page);
 
-    await writeJson(testInfo.outputPath("locked-container-leak-adoption-repro.json"), {
-      beforeLockedDrag,
-      afterLockedDrag,
-      adapterWarnings: consoleMessages.filter((message) =>
-        /adapter did not place/.test(message),
-      ),
-      errors: [
-        ...pageErrors,
-        ...consoleMessages.filter((message) =>
-          /Missing drag snapshot|Unhandled|TypeError|ReferenceError/i.test(
-            message,
-          ),
+    await writeJson(
+      testInfo.outputPath("locked-container-leak-adoption-repro.json"),
+      {
+        beforeLockedDrag,
+        afterLockedDrag,
+        adapterWarnings: consoleMessages.filter((message) =>
+          /adapter did not place/.test(message),
         ),
-      ],
-    });
+        errors: [
+          ...pageErrors,
+          ...consoleMessages.filter((message) =>
+            /Missing drag snapshot|Unhandled|TypeError|ReferenceError/i.test(
+              message,
+            ),
+          ),
+        ],
+      },
+    );
 
     expect(
       beforeLockedDrag.spacerCount,
@@ -3654,9 +3689,12 @@ test.describe("Snapsort drag-start snapshot layout", () => {
     });
 
     const probe = await nestedContainerSelfInsertProbe(page);
-    await writeJson(testInfo.outputPath("nested-container-self-insert-repro.json"), {
-      probe,
-    });
+    await writeJson(
+      testInfo.outputPath("nested-container-self-insert-repro.json"),
+      {
+        probe,
+      },
+    );
 
     expect(probe.found, "expected to find the nested container objects").toBe(
       true,
@@ -3943,10 +3981,17 @@ test.describe("Snapsort drag-start snapshot layout", () => {
       y: lastRect.y + lastRect.height / 2,
     };
 
-    await dragBy(page, source, "TypeScript slice 3", 0, {
-      x: target.x - sourceCenter.x,
-      y: target.y - sourceCenter.y,
-    }, { steps: 140 });
+    await dragBy(
+      page,
+      source,
+      "TypeScript slice 3",
+      0,
+      {
+        x: target.x - sourceCenter.x,
+        y: target.y - sourceCenter.y,
+      },
+      { steps: 140 },
+    );
 
     await expect
       .poll(() => directLogoSliceOrder(container))
@@ -3972,13 +4017,20 @@ test.describe("Snapsort drag-start snapshot layout", () => {
       x: targetRect.x + targetRect.width / 2,
       y: targetRect.y + targetRect.height * 1.15,
     };
-    const samples = await dragBy(page, source, "Item 1", 0, {
-      x: targetPoint.x - start.x,
-      y: targetPoint.y - start.y,
-    }, {
-      start,
-      steps: 240,
-    });
+    const samples = await dragBy(
+      page,
+      source,
+      "Item 1",
+      0,
+      {
+        x: targetPoint.x - start.x,
+        y: targetPoint.y - start.y,
+      },
+      {
+        start,
+        steps: 240,
+      },
+    );
 
     await expectStableDrag(
       page,
@@ -3998,10 +4050,13 @@ test.describe("Snapsort drag-start snapshot layout", () => {
       "website-nested-inner",
       "website-nested-outer",
     ]);
-    await writeJson(testInfo.outputPath("website-nested-bottom-slot-states.json"), {
-      states,
-      ghostTargets: ghostInsertionTargets(consoleMessages),
-    });
+    await writeJson(
+      testInfo.outputPath("website-nested-bottom-slot-states.json"),
+      {
+        states,
+        ghostTargets: ghostInsertionTargets(consoleMessages),
+      },
+    );
     expect(
       states,
       `ghost should reach the bottom slot of the website nested list; observed ${states.join(" -> ")}`,
@@ -4075,7 +4130,10 @@ test.describe("Snapsort drag-start snapshot layout", () => {
     });
 
     expect(measured.columns).toHaveLength(2);
-    expect(measured.domSameRow, "the browser DOM should keep both columns on one row").toBe(true);
+    expect(
+      measured.domSameRow,
+      "the browser DOM should keep both columns on one row",
+    ).toBe(true);
 
     const boardSnapshot = snapshotFixture<string>({
       value: "website-multi-container-board",
@@ -4100,10 +4158,13 @@ test.describe("Snapsort drag-start snapshot layout", () => {
       return { id: child.value, ...position };
     });
 
-    await writeJson(testInfo.outputPath("website-321px-multi-container-layout.json"), {
-      measured,
-      simulated,
-    });
+    await writeJson(
+      testInfo.outputPath("website-321px-multi-container-layout.json"),
+      {
+        measured,
+        simulated,
+      },
+    );
 
     expect(
       Math.abs(simulated[0].y - simulated[1].y),
@@ -4114,13 +4175,20 @@ test.describe("Snapsort drag-start snapshot layout", () => {
     const target = await itemByTextIn(card, "Ship");
     const sourceCenter = center(await itemRect(source));
     const targetRect = await itemRect(target);
-    const samples = await dragBy(page, source, "Spec", 0, {
-      x: targetRect.x + targetRect.width / 2 - sourceCenter.x,
-      y: targetRect.y + targetRect.height * 1.15 - sourceCenter.y,
-    }, {
-      captureFrameRects: true,
-      steps: 160,
-    });
+    const samples = await dragBy(
+      page,
+      source,
+      "Spec",
+      0,
+      {
+        x: targetRect.x + targetRect.width / 2 - sourceCenter.x,
+        y: targetRect.y + targetRect.height * 1.15 - sourceCenter.y,
+      },
+      {
+        captureFrameRects: true,
+        steps: 160,
+      },
+    );
     const wrappedFrames = samples.flatMap((sample) => {
       const columns =
         sample.frameRects?.filter(
@@ -4134,10 +4202,13 @@ test.describe("Snapsort drag-start snapshot layout", () => {
       return deltaY > 1 ? [{ step: sample.step, deltaY, columns }] : [];
     });
 
-    await writeJson(testInfo.outputPath("website-321px-multi-container-drag.json"), {
-      wrappedFrames,
-      samples,
-    });
+    await writeJson(
+      testInfo.outputPath("website-321px-multi-container-drag.json"),
+      {
+        wrappedFrames,
+        samples,
+      },
+    );
 
     expect(
       wrappedFrames,
@@ -4284,13 +4355,15 @@ test.describe("Snapsort drag-start snapshot layout", () => {
     await expect
       .poll(
         () =>
-          innerContainer.locator(".snapsort-item").evaluateAll((nodes) =>
-            nodes.some(
-              (node) =>
-                !node.textContent?.includes("Sub A1") &&
-                (node as HTMLElement).style.transform !== "",
+          innerContainer
+            .locator(".snapsort-item")
+            .evaluateAll((nodes) =>
+              nodes.some(
+                (node) =>
+                  !node.textContent?.includes("Sub A1") &&
+                  (node as HTMLElement).style.transform !== "",
+              ),
             ),
-          ),
         { intervals: [10, 20, 40], timeout: 300 },
       )
       .toBe(true);
@@ -4404,9 +4477,11 @@ test.describe("Snapsort drag-start snapshot layout", () => {
         () =>
           page.evaluate(
             () =>
-              (window as unknown as {
-                __dropContinuityTrace?: { done: boolean };
-              }).__dropContinuityTrace?.done ?? false,
+              (
+                window as unknown as {
+                  __dropContinuityTrace?: { done: boolean };
+                }
+              ).__dropContinuityTrace?.done ?? false,
           ),
         { timeout: 2_000 },
       )
@@ -4414,24 +4489,26 @@ test.describe("Snapsort drag-start snapshot layout", () => {
 
     const trace = await page.evaluate(
       () =>
-        (window as unknown as {
-          __dropContinuityTrace: {
-            done: boolean;
-            frames: Array<{
-              time: number;
-              rect: Rect;
-              inlineTransform: string;
-              computedTransform: string;
-              dragging: boolean;
-              displacedTransformCount: number;
-            }>;
-            styleMutations: Array<{
-              time: number;
-              oldValue: string | null;
-              currentValue: string;
-            }>;
-          };
-        }).__dropContinuityTrace,
+        (
+          window as unknown as {
+            __dropContinuityTrace: {
+              done: boolean;
+              frames: Array<{
+                time: number;
+                rect: Rect;
+                inlineTransform: string;
+                computedTransform: string;
+                dragging: boolean;
+                displacedTransformCount: number;
+              }>;
+              styleMutations: Array<{
+                time: number;
+                oldValue: string | null;
+                currentValue: string;
+              }>;
+            };
+          }
+        ).__dropContinuityTrace,
     );
     await writeJson(
       testInfo.outputPath("drop-animation-continuity-trace.json"),
@@ -4911,9 +4988,7 @@ test.describe("Snapsort drag-start snapshot layout", () => {
         await new Promise((resolve) => requestAnimationFrame(resolve));
         const animatedCard = [...document.querySelectorAll(".task-card")].find(
           (element) =>
-            /^translate3d\(-?\d/.test(
-              (element as HTMLElement).style.transform,
-            ),
+            /^translate3d\(-?\d/.test((element as HTMLElement).style.transform),
         );
         if (animatedCard) {
           return true;
@@ -4953,7 +5028,9 @@ test.describe("Snapsort drag-start snapshot layout", () => {
       );
       first.play();
       for (let frame = 0; frame < 20 && !first.requestDelete; frame++) {
-        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+        await new Promise<void>((resolve) =>
+          requestAnimationFrame(() => resolve()),
+        );
       }
 
       const propertiesAfterFinish = Array.from(target.style).filter((name) =>
@@ -5044,28 +5121,38 @@ test.describe("Snapsort drag-start snapshot layout", () => {
         }>;
       };
       win.__dropFlipSamples = [];
-      window.addEventListener("pointerup", () => {
-        let frame = 0;
-        const sample = () => {
-          const card = [...document.querySelectorAll<HTMLElement>(
-            ".task-card:not(.ghost)",
-          )].find((element) => element.textContent?.includes("Profile fields"));
-          if (card) {
-            const rect = card.getBoundingClientRect();
-            win.__dropFlipSamples?.push({
-              column:
-                card.closest(".list-panel")?.querySelector("h2")?.textContent?.trim() ??
-                "",
-              transform: card.style.transform,
-              x: rect.x,
-              y: rect.y,
-            });
-          }
-          frame++;
-          if (frame < 12) requestAnimationFrame(sample);
-        };
-        requestAnimationFrame(sample);
-      }, { capture: true, once: true });
+      window.addEventListener(
+        "pointerup",
+        () => {
+          let frame = 0;
+          const sample = () => {
+            const card = [
+              ...document.querySelectorAll<HTMLElement>(
+                ".task-card:not(.ghost)",
+              ),
+            ].find((element) =>
+              element.textContent?.includes("Profile fields"),
+            );
+            if (card) {
+              const rect = card.getBoundingClientRect();
+              win.__dropFlipSamples?.push({
+                column:
+                  card
+                    .closest(".list-panel")
+                    ?.querySelector("h2")
+                    ?.textContent?.trim() ?? "",
+                transform: card.style.transform,
+                x: rect.x,
+                y: rect.y,
+              });
+            }
+            frame++;
+            if (frame < 12) requestAnimationFrame(sample);
+          };
+          requestAnimationFrame(sample);
+        },
+        { capture: true, once: true },
+      );
     });
 
     await page.mouse.up();
@@ -5083,7 +5170,9 @@ test.describe("Snapsort drag-start snapshot layout", () => {
     });
     await page.waitForTimeout(700);
     const finalRect = await itemRect(card);
-    const activeSamples = samples.filter((sample) => sample.column === "Active");
+    const activeSamples = samples.filter(
+      (sample) => sample.column === "Active",
+    );
     expect(activeSamples.length).toBeGreaterThan(1);
     expect(activeSamples[0].transform).toMatch(/^translate3d\(/);
 
diff --git a/tests/e2e/snapsort-duolingo.spec.ts b/tests/e2e/snapsort-duolingo.spec.ts
index dbcf3a8..8402b4a 100644
--- a/tests/e2e/snapsort-duolingo.spec.ts
+++ b/tests/e2e/snapsort-duolingo.spec.ts
@@ -38,9 +38,11 @@ function tileIn(container: Locator, text: string) {
 }
 
 async function tileTexts(container: Locator) {
-  return container.locator(".tile").evaluateAll((nodes) =>
-    nodes.map((node) => node.textContent?.trim().replace(/\s+/g, " ") ?? ""),
-  );
+  return container
+    .locator(".tile")
+    .evaluateAll((nodes) =>
+      nodes.map((node) => node.textContent?.trim().replace(/\s+/g, " ") ?? ""),
+    );
 }
 
 async function rect(locator: Locator) {
@@ -228,7 +230,9 @@ test.describe("SnapSort Kiokun sentence builder demo", () => {
 
     await answer.getByRole("button", { name: "私" }).click();
     await expect(answer.locator(".tile")).toHaveText(["は"]);
-    await expect(bank.locator(".tile").filter({ hasText: "私" })).toHaveCount(1);
+    await expect(bank.locator(".tile").filter({ hasText: "私" })).toHaveCount(
+      1,
+    );
 
     await expectCleanConsole(
       consoleEntries,
@@ -333,7 +337,9 @@ test.describe("SnapSort Kiokun sentence builder demo", () => {
     });
 
     await expect(answer.locator(".tile")).toHaveText(["は"]);
-    await expect(bank.locator(".tile").filter({ hasText: "私" })).toHaveCount(1);
+    await expect(bank.locator(".tile").filter({ hasText: "私" })).toHaveCount(
+      1,
+    );
     expect(
       samples.some(
         (sample) =>
@@ -400,7 +406,12 @@ test.describe("SnapSort Kiokun sentence builder demo", () => {
     for (const text of ["私", "は", "毎朝", "水"]) {
       await bank.getByRole("button", { name: text }).click();
     }
-    await expect(answer.locator(".tile")).toHaveText(["私", "は", "毎朝", "水"]);
+    await expect(answer.locator(".tile")).toHaveText([
+      "私",
+      "は",
+      "毎朝",
+      "水",
+    ]);
 
     const source = tileIn(answer, "は");
     const target = tileIn(answer, "水");
@@ -408,12 +419,20 @@ test.describe("SnapSort Kiokun sentence builder demo", () => {
       xOffset: -36,
     });
 
-    await writeJson(testInfo.outputPath("same-container-non-last-before-assert.json"), {
-      samples,
-      answerTexts: await tileTexts(answer),
-      bankTexts: await tileTexts(bank),
-    });
-    await expect(answer.locator(".tile")).toHaveText(["私", "毎朝", "は", "水"]);
+    await writeJson(
+      testInfo.outputPath("same-container-non-last-before-assert.json"),
+      {
+        samples,
+        answerTexts: await tileTexts(answer),
+        bankTexts: await tileTexts(bank),
+      },
+    );
+    await expect(answer.locator(".tile")).toHaveText([
+      "私",
+      "毎朝",
+      "は",
+      "水",
+    ]);
     await expectCleanConsole(
       consoleEntries,
       pageErrors,
diff --git a/tests/e2e/snapsort-gallery-features.spec.ts b/tests/e2e/snapsort-gallery-features.spec.ts
index 2b851c8..9df77ae 100644
--- a/tests/e2e/snapsort-gallery-features.spec.ts
+++ b/tests/e2e/snapsort-gallery-features.spec.ts
@@ -96,10 +96,14 @@ test.describe("SnapSort gallery — new drag primitives", () => {
 
       // The palette template is never consumed — copy leaves the source alone.
       await expect(palette.locator(".snapsort-item")).toHaveCount(4);
-      await expect(palette.locator(".snapsort-item").filter({ hasText: "Button" })).toHaveCount(1);
+      await expect(
+        palette.locator(".snapsort-item").filter({ hasText: "Button" }),
+      ).toHaveCount(1);
       // The canvas gained one cloned block.
       await expect(canvas.locator(".clone-canvas-block")).toHaveCount(1);
-      await expect(canvas.locator(".clone-canvas-block")).toContainText("Button");
+      await expect(canvas.locator(".clone-canvas-block")).toContainText(
+        "Button",
+      );
 
       // Dragging a second, different block clones onto the canvas too.
       const imageTemplate = palette
@@ -114,7 +118,9 @@ test.describe("SnapSort gallery — new drag primitives", () => {
       const canvasItems = canvas.locator(".snapsort-item");
       await dragOnto(page, canvasItems.nth(1), canvasItems.nth(0));
       await expect(canvas.locator(".clone-canvas-block")).toHaveCount(2);
-      await expect(canvas.locator(".clone-canvas-block").first()).toContainText("Image");
+      await expect(canvas.locator(".clone-canvas-block").first()).toContainText(
+        "Image",
+      );
 
       // Click-to-remove takes a cloned block back out of the canvas.
       const firstBlock = canvas.locator(".clone-canvas-block").first();
@@ -148,7 +154,10 @@ test.describe("SnapSort gallery — new drag primitives", () => {
       let maxPaletteGhosts = 0;
       for (let step = 1; step <= 16; step++) {
         const t = step / 16;
-        await page.mouse.move(start.x + (end.x - start.x) * t, start.y + (end.y - start.y) * t);
+        await page.mouse.move(
+          start.x + (end.x - start.x) * t,
+          start.y + (end.y - start.y) * t,
+        );
         await page.waitForTimeout(20);
         maxPaletteGhosts = Math.max(
           maxPaletteGhosts,
@@ -199,8 +208,12 @@ test.describe("SnapSort gallery — new drag primitives", () => {
       const trashZone = exhibit.locator(".trash-drop-target");
 
       await expect(list.locator(".trash-task")).toHaveCount(5);
-      const firstTaskText = (await list.locator(".trash-task").first().textContent())?.trim();
-      const secondTaskText = (await list.locator(".trash-task").nth(1).textContent())?.trim();
+      const firstTaskText = (
+        await list.locator(".trash-task").first().textContent()
+      )?.trim();
+      const secondTaskText = (
+        await list.locator(".trash-task").nth(1).textContent()
+      )?.trim();
 
       // Reordering within the list (default move effect) still works.
       const firstTask = list.locator(".snapsort-item").first();
@@ -211,11 +224,15 @@ test.describe("SnapSort gallery — new drag primitives", () => {
       );
 
       // Dragging a task onto the trash deletes it instead of moving it there.
-      const taskToDelete = list.locator(".snapsort-item").filter({ hasText: secondTaskText ?? "" });
+      const taskToDelete = list
+        .locator(".snapsort-item")
+        .filter({ hasText: secondTaskText ?? "" });
       await dragOnto(page, taskToDelete, trashZone);
 
       await expect(list.locator(".trash-task")).toHaveCount(4);
-      await expect(list.locator(".trash-task", { hasText: secondTaskText ?? "__never__" })).toHaveCount(0);
+      await expect(
+        list.locator(".trash-task", { hasText: secondTaskText ?? "__never__" }),
+      ).toHaveCount(0);
       // Nothing should have actually landed inside the trash container itself.
       await expect(trashZone.locator(".trash-task")).toHaveCount(0);
     });
@@ -232,10 +249,22 @@ test.describe("SnapSort gallery — new drag primitives", () => {
       const tiles = grid.locator(".snapsort-item");
       await expect(tiles).toHaveCount(9);
 
-      const beforeOrder = await grid.locator(".swap-tile").evaluateAll((nodes) =>
-        nodes.map((node) => node.textContent?.trim() ?? ""),
-      );
-      expect(beforeOrder).toEqual(["A1", "A2", "A3", "B1", "B2", "B3", "C1", "C2", "C3"]);
+      const beforeOrder = await grid
+        .locator(".swap-tile")
+        .evaluateAll((nodes) =>
+          nodes.map((node) => node.textContent?.trim() ?? ""),
+        );
+      expect(beforeOrder).toEqual([
+        "A1",
+        "A2",
+        "A3",
+        "B1",
+        "B2",
+        "B3",
+        "C1",
+        "C2",
+        "C3",
+      ]);
 
       const tileA1 = tiles.filter({ hasText: "A1" });
       const tileB2 = tiles.filter({ hasText: "B2" });
@@ -247,13 +276,13 @@ test.describe("SnapSort gallery — new drag primitives", () => {
         yOffset: -24,
         beforeDrop: async () => {
           const sourceTile = tileA1.locator(".swap-tile");
-          const pointerGhost = page.locator(
-            '[data-snapsort-ghost="pointer"]',
-          );
+          const pointerGhost = page.locator('[data-snapsort-ghost="pointer"]');
 
           await expect(pointerGhost).toBeVisible();
           await expect(pointerGhost).toContainText("A1");
-          await expect(pointerGhost.locator(".swap-tile-grip i")).toHaveCount(6);
+          await expect(pointerGhost.locator(".swap-tile-grip i")).toHaveCount(
+            6,
+          );
 
           const appearances = await Promise.all(
             [sourceTile, pointerGhost].map((locator) =>
@@ -286,12 +315,14 @@ test.describe("SnapSort gallery — new drag primitives", () => {
           await expect
             .poll(
               () =>
-                grid.locator(".snapsort-item").evaluateAll(
-                  (nodes) =>
-                    nodes.filter(
-                      (node) => getComputedStyle(node).transform !== "none",
-                    ).length,
-                ),
+                grid
+                  .locator(".snapsort-item")
+                  .evaluateAll(
+                    (nodes) =>
+                      nodes.filter(
+                        (node) => getComputedStyle(node).transform !== "none",
+                      ).length,
+                  ),
               { intervals: [10, 20, 40], timeout: 500 },
             )
             .toBeGreaterThanOrEqual(2);
@@ -343,16 +374,28 @@ test.describe("SnapSort gallery — new drag primitives", () => {
         },
       });
 
-      const afterOrder = await grid.locator(".swap-tile").evaluateAll((nodes) =>
-        nodes.map((node) => node.textContent?.trim() ?? ""),
-      );
+      const afterOrder = await grid
+        .locator(".swap-tile")
+        .evaluateAll((nodes) =>
+          nodes.map((node) => node.textContent?.trim() ?? ""),
+        );
 
       // Only the two dragged/targeted slots change; everything else stays put.
-      expect(afterOrder).toEqual(["B2", "A2", "A3", "B1", "A1", "B3", "C1", "C2", "C3"]);
+      expect(afterOrder).toEqual([
+        "B2",
+        "A2",
+        "A3",
+        "B1",
+        "A1",
+        "B3",
+        "C1",
+        "C2",
+        "C3",
+      ]);
       await expect(tiles).toHaveCount(9);
-      await expect(
-        grid.locator('[data-snapsort-dragging="true"]'),
-      ).toHaveCount(0);
+      await expect(grid.locator('[data-snapsort-dragging="true"]')).toHaveCount(
+        0,
+      );
       const tileOpacities = await grid
         .locator(".swap-tile")
         .evaluateAll((nodes) =>
@@ -397,11 +440,25 @@ test.describe("SnapSort gallery — new drag primitives", () => {
         },
       });
 
-      const order = await grid.locator(".swap-tile").evaluateAll((nodes) =>
-        nodes.map((node) => node.textContent?.trim() ?? ""),
+      const order = await grid
+        .locator(".swap-tile")
+        .evaluateAll((nodes) =>
+          nodes.map((node) => node.textContent?.trim() ?? ""),
+        );
+      expect(order).toEqual([
+        "A1",
+        "A2",
+        "A3",
+        "B1",
+        "B2",
+        "B3",
+        "C1",
+        "C2",
+        "C3",
+      ]);
+      await expect(grid.locator('[data-snapsort-dragging="true"]')).toHaveCount(
+        0,
       );
-      expect(order).toEqual(["A1", "A2", "A3", "B1", "B2", "B3", "C1", "C2", "C3"]);
-      await expect(grid.locator('[data-snapsort-dragging="true"]')).toHaveCount(0);
       await expect(tileA2).toHaveCSS("transform", "none");
       await expect(tileA2.locator(".swap-tile")).toHaveCSS("opacity", "1");
     });
diff --git a/tests/e2e/snapsort-insertion-copy.spec.ts b/tests/e2e/snapsort-insertion-copy.spec.ts
index b7a304f..0ecc65e 100644
--- a/tests/e2e/snapsort-insertion-copy.spec.ts
+++ b/tests/e2e/snapsort-insertion-copy.spec.ts
@@ -3,7 +3,10 @@ import { expect, test, type Locator, type Page } from "@playwright/test";
 // The "Duplicate on drop" toggle only exists on the Svelte insertion demo
 // (no React equivalent yet) -- svelte-only per this session's testing scope.
 test.beforeEach(async ({}, testInfo) => {
-  test.skip(!testInfo.project.name.startsWith("svelte"), "No React insertion demo with a duplicate toggle yet");
+  test.skip(
+    !testInfo.project.name.startsWith("svelte"),
+    "No React insertion demo with a duplicate toggle yet",
+  );
 });
 
 async function rect(locator: Locator) {
@@ -17,10 +20,17 @@ function center(box: { x: number; y: number; width: number; height: number }) {
 }
 
 async function listByHeading(page: Page, heading: string): Promise<Locator> {
-  return page.locator(".insertion-list", { has: page.locator("h2", { hasText: heading }) });
+  return page.locator(".insertion-list", {
+    has: page.locator("h2", { hasText: heading }),
+  });
 }
 
-async function dragOnto(page: Page, source: Locator, target: Locator, yOffset = 0) {
+async function dragOnto(
+  page: Page,
+  source: Locator,
+  target: Locator,
+  yOffset = 0,
+) {
   const start = center(await rect(source));
   const end = center(await rect(target));
   await page.mouse.move(start.x, start.y);
@@ -29,7 +39,10 @@ async function dragOnto(page: Page, source: Locator, target: Locator, yOffset =
   await page.waitForTimeout(60);
   for (let step = 1; step <= 12; step++) {
     const t = step / 12;
-    await page.mouse.move(start.x + (end.x - start.x) * t, start.y + (end.y - start.y) * t + yOffset * t);
+    await page.mouse.move(
+      start.x + (end.x - start.x) * t,
+      start.y + (end.y - start.y) * t + yOffset * t,
+    );
     await page.waitForTimeout(20);
   }
   await page.waitForTimeout(80);
@@ -56,21 +69,31 @@ test.describe("SnapSort insertion-mode copy (unified commit path)", () => {
     // (as a real user would) rather than `.check()`, which requires the
     // underlying input itself to be visible.
     await page.locator(".duplicate-toggle").click();
-    await expect(page.locator(".duplicate-toggle input[type=checkbox]")).toBeChecked();
-
-    const dragged = project.locator(".insertion-card", { hasText: "package.json" });
-    const target = source.locator(".insertion-card", { hasText: "Item.svelte" });
+    await expect(
+      page.locator(".duplicate-toggle input[type=checkbox]"),
+    ).toBeChecked();
+
+    const dragged = project.locator(".insertion-card", {
+      hasText: "package.json",
+    });
+    const target = source.locator(".insertion-card", {
+      hasText: "Item.svelte",
+    });
     await dragOnto(page, dragged, target);
 
     // Original stays exactly where it was -- insertion mode never lifts.
     await expect(project.locator(".insertion-card")).toHaveCount(4);
-    await expect(project.locator(".insertion-card", { hasText: "package.json" })).toHaveCount(1);
+    await expect(
+      project.locator(".insertion-card", { hasText: "package.json" }),
+    ).toHaveCount(1);
 
     // A duplicate landed in the source column near the marker index, with a
     // freshly minted id (not literally "package.json"'s original identity,
     // but the same title/detail content).
     await expect(source.locator(".insertion-card")).toHaveCount(4);
-    await expect(source.locator(".insertion-card", { hasText: "package.json" })).toHaveCount(1);
+    await expect(
+      source.locator(".insertion-card", { hasText: "package.json" }),
+    ).toHaveCount(1);
 
     await expect(page.locator(".demo-header p")).toHaveText(
       "8 files and folders · original row stays still until drop",
@@ -83,14 +106,22 @@ test.describe("SnapSort insertion-mode copy (unified commit path)", () => {
     const project = await listByHeading(page, "Project");
     const source = await listByHeading(page, "Source");
 
-    const dragged = project.locator(".insertion-card", { hasText: "README.md" });
-    const target = source.locator(".insertion-card", { hasText: "Handle.svelte" });
+    const dragged = project.locator(".insertion-card", {
+      hasText: "README.md",
+    });
+    const target = source.locator(".insertion-card", {
+      hasText: "Handle.svelte",
+    });
     await dragOnto(page, dragged, target);
 
     await expect(project.locator(".insertion-card")).toHaveCount(3);
-    await expect(project.locator(".insertion-card", { hasText: "README.md" })).toHaveCount(0);
+    await expect(
+      project.locator(".insertion-card", { hasText: "README.md" }),
+    ).toHaveCount(0);
     await expect(source.locator(".insertion-card")).toHaveCount(4);
-    await expect(source.locator(".insertion-card", { hasText: "README.md" })).toHaveCount(1);
+    await expect(
+      source.locator(".insertion-card", { hasText: "README.md" }),
+    ).toHaveCount(1);
 
     await expect(page.locator(".demo-header p")).toHaveText(
       "7 files and folders · original row stays still until drop",
diff --git a/tests/e2e/snapsort-landing-regression.spec.ts b/tests/e2e/snapsort-landing-regression.spec.ts
index e2fccf7..d394acd 100644
--- a/tests/e2e/snapsort-landing-regression.spec.ts
+++ b/tests/e2e/snapsort-landing-regression.spec.ts
@@ -3,12 +3,15 @@ import { expect, test, type Locator, type Page } from "@playwright/test";
 async function directItemKeys(container: Locator): Promise<string[]> {
   return container.evaluate((element) =>
     Array.from(element.children)
-      .filter((child): child is HTMLElement =>
-        child instanceof HTMLElement && child.classList.contains("snapsort-item"),
+      .filter(
+        (child): child is HTMLElement =>
+          child instanceof HTMLElement &&
+          child.classList.contains("snapsort-item"),
       )
-      .map((child) =>
-        child.dataset.snapsortItemId ??
-        child.innerText.replace(/\s+/g, " ").trim(),
+      .map(
+        (child) =>
+          child.dataset.snapsortItemId ??
+          child.innerText.replace(/\s+/g, " ").trim(),
       ),
   );
 }
@@ -63,9 +66,7 @@ async function reorderDirectItems(
   const movingDown = targetIndex > sourceIndex;
   const end = {
     x: targetBox.x + targetBox.width / 2,
-    y:
-      targetBox.y +
-      targetBox.height * (movingDown ? 0.82 : 0.18),
+    y: targetBox.y + targetBox.height * (movingDown ? 0.82 : 0.18),
   };
 
   await page.mouse.move(start.x, start.y);
@@ -107,7 +108,9 @@ async function reorderDirectItems(
   for (let index = 1; index < sampledCenters.length; index++) {
     const previous = sampledCenters[index - 1];
     const current = sampledCenters[index];
-    expect(Math.hypot(current.x - previous.x, current.y - previous.y)).toBeGreaterThan(4);
+    expect(
+      Math.hypot(current.x - previous.x, current.y - previous.y),
+    ).toBeGreaterThan(4);
   }
 
   await page.mouse.up();
@@ -168,7 +171,9 @@ test.describe("SnapSort landing repeated-drag ownership", () => {
     const customizable = page.locator(".customizable-demo");
     await customizable.scrollIntoViewIfNeeded();
     await customizable.evaluate((element) => {
-      const rail = element.querySelector<HTMLElement>(".customizable-theme-rail");
+      const rail = element.querySelector<HTMLElement>(
+        ".customizable-theme-rail",
+      );
       rail?.style.setProperty("transform", "translateX(0)", "important");
       for (const frame of element.querySelectorAll<HTMLElement>(
         ".customizable-motion-frame",
diff --git a/tests/e2e/snapsort_drag.spec.ts b/tests/e2e/snapsort_drag.spec.ts
index da7fcb6..a4f7247 100644
--- a/tests/e2e/snapsort_drag.spec.ts
+++ b/tests/e2e/snapsort_drag.spec.ts
@@ -39,7 +39,9 @@ interface Frame {
 }
 
 /** Read the live ghost spacer element's bounding rect from the page. */
-async function readGhost(page: Page): Promise<{ top: number; height: number } | null> {
+async function readGhost(
+  page: Page,
+): Promise<{ top: number; height: number } | null> {
   return page.evaluate(() => {
     const el = document.querySelector(".ghost") as HTMLElement | null;
     if (!el) return null;
@@ -59,7 +61,9 @@ test.describe("Snapsort drag ghost should track the cursor without flickering",
     const chosenLog: string[] = [];
     page.on("console", (msg) => {
       const text = msg.text();
-      const m = text.match(/✔ chosen\s+container=(\S+)\s+idx=(\d+)\s+ghost=\(([-\d]+),([-\d]+)\)/);
+      const m = text.match(
+        /✔ chosen\s+container=(\S+)\s+idx=(\d+)\s+ghost=\(([-\d]+),([-\d]+)\)/,
+      );
       if (m) {
         lastChosen = `container=${m[1]} idx=${m[2]} ghost=(${m[3]},${m[4]})`;
         chosenLog.push(lastChosen);
@@ -70,7 +74,10 @@ test.describe("Snapsort drag ghost should track the cursor without flickering",
 
     // Use the "Flat List" container: a pure column of Item A..D with no sub-containers,
     // which isolates the dragged-item-gap reflow that caused the flicker.
-    const items = page.locator(".snapsort-container").first().locator(".snapsort-item");
+    const items = page
+      .locator(".snapsort-container")
+      .first()
+      .locator(".snapsort-item");
     await expect(items.first()).toBeVisible();
     const first = items.first();
     const box = await first.boundingBox();
@@ -94,7 +101,13 @@ test.describe("Snapsort drag ghost should track the cursor without flickering",
     await page.waitForTimeout(50);
 
     const frames: Frame[] = [];
-    const shotAt = new Set([1, Math.floor(steps / 4), Math.floor(steps / 2), Math.floor((3 * steps) / 4), steps]);
+    const shotAt = new Set([
+      1,
+      Math.floor(steps / 4),
+      Math.floor(steps / 2),
+      Math.floor((3 * steps) / 4),
+      steps,
+    ]);
     for (let i = 1; i <= steps; i++) {
       const mouseY = startY + pxPerStep * i;
       // Move in a couple of sub-steps for a smooth pointer path between samples.
@@ -110,7 +123,9 @@ test.describe("Snapsort drag ghost should track the cursor without flickering",
         chosen: lastChosen,
       });
       if (shotAt.has(i)) {
-        await page.screenshot({ path: path.join(OUT_DIR, `drag-step-${i}.png`) });
+        await page.screenshot({
+          path: path.join(OUT_DIR, `drag-step-${i}.png`),
+        });
       }
     }
 
@@ -123,7 +138,9 @@ test.describe("Snapsort drag ghost should track the cursor without flickering",
     );
 
     // ---- Assertions ----
-    const valid = frames.filter((f) => f.ghostCenterY !== null) as Required<Frame>[];
+    const valid = frames.filter(
+      (f) => f.ghostCenterY !== null,
+    ) as Required<Frame>[];
     // The ghost must exist during the drag.
     expect(valid.length).toBeGreaterThan(steps * 0.7);
 
@@ -134,14 +151,19 @@ test.describe("Snapsort drag ghost should track the cursor without flickering",
       ...valid.map((f) => Math.abs((f.ghostCenterY as number) - f.mouseY)),
     );
     expect
-      .soft(maxOffset, `max |ghostCenterY - mouseY| = ${maxOffset.toFixed(1)}px`)
+      .soft(
+        maxOffset,
+        `max |ghostCenterY - mouseY| = ${maxOffset.toFixed(1)}px`,
+      )
       .toBeLessThan(itemH * 1.5);
 
     // (2) No flicker: as the cursor moves monotonically down, the ghost center should be
     // (near-)monotonic. Count meaningful downward->upward reversals (> 4px to ignore jitter).
     let reversals = 0;
     for (let i = 1; i < valid.length; i++) {
-      const dy = (valid[i].ghostCenterY as number) - (valid[i - 1].ghostCenterY as number);
+      const dy =
+        (valid[i].ghostCenterY as number) -
+        (valid[i - 1].ghostCenterY as number);
       if (dy < -4) reversals++;
     }
     expect
diff --git a/tests/e2e/website-engine-lifecycle.spec.ts b/tests/e2e/website-engine-lifecycle.spec.ts
index c91c008..1b0b3d7 100644
--- a/tests/e2e/website-engine-lifecycle.spec.ts
+++ b/tests/e2e/website-engine-lifecycle.spec.ts
@@ -50,7 +50,9 @@ test("SnapSort asset preview pans and moves items through the imperative API", a
   await page.goto("/");
 
   const card = page.locator(".drop-snap-card");
-  const preview = page.locator("#assets-snapsort-preview-engine .preview-mosaic");
+  const preview = page.locator(
+    "#assets-snapsort-preview-engine .preview-mosaic",
+  );
   const pan = card.locator(".snapsort-preview-pan");
   const scale = card.locator(".snapsort-preview-scale");
   const firstKanbanColumn = card.locator(".preview-kanban-column").first();
@@ -66,8 +68,12 @@ test("SnapSort asset preview pans and moves items through the imperative API", a
   await expect(card.getByRole("link", { name: "Learn more" })).toBeVisible();
   await expect(card.locator(".framework-list")).toHaveCount(0);
   await expect(card.locator(".slot")).toHaveCount(0);
-  await expect(firstKanbanColumn.locator(":scope > .snapsort-item")).toHaveCount(2);
-  await expect(sentenceAnswer.locator(":scope > .snapsort-item")).toHaveCount(2);
+  await expect(
+    firstKanbanColumn.locator(":scope > .snapsort-item"),
+  ).toHaveCount(2);
+  await expect(sentenceAnswer.locator(":scope > .snapsort-item")).toHaveCount(
+    2,
+  );
   await expect(firstTile).toHaveText("01");
   await expect(fileRows).toHaveCount(5);
   await expect(editorTools.locator(":scope > .snapsort-item")).toHaveCount(3);
@@ -81,9 +87,15 @@ test("SnapSort asset preview pans and moves items through the imperative API", a
   expect(nativeGridMetrics.renderedWidth).toBeLessThan(500);
 
   const exhibitRows = await card.evaluate((element) => ({
-    sentence: element.querySelector(".preview-sentence-panel")!.getBoundingClientRect().top,
-    kanban: element.querySelector(".preview-kanban-panel")!.getBoundingClientRect().top,
-    editor: element.querySelector(".preview-editor-panel")!.getBoundingClientRect().top,
+    sentence: element
+      .querySelector(".preview-sentence-panel")!
+      .getBoundingClientRect().top,
+    kanban: element
+      .querySelector(".preview-kanban-panel")!
+      .getBoundingClientRect().top,
+    editor: element
+      .querySelector(".preview-editor-panel")!
+      .getBoundingClientRect().top,
   }));
   expect(exhibitRows.kanban).toBeGreaterThan(exhibitRows.sentence);
   expect(exhibitRows.kanban).toBeLessThan(exhibitRows.editor);
@@ -104,7 +116,9 @@ test("SnapSort asset preview pans and moves items through the imperative API", a
   expect(edgeMetrics.bottom).toBeCloseTo(0, 3);
 
   const cardBefore = await card.boundingBox();
-  const panBefore = await pan.evaluate((element) => getComputedStyle(element).transform);
+  const panBefore = await pan.evaluate(
+    (element) => getComputedStyle(element).transform,
+  );
   await expect(scale).toHaveCSS("filter", /grayscale\(1\)/);
 
   await card.hover();
@@ -125,12 +139,16 @@ test("SnapSort asset preview pans and moves items through the imperative API", a
         card
           .locator('[data-preview-entry-id="preview-kanban-motion"]')
           .evaluate((element) =>
-            element.getAnimations().some((animation) => animation.playState === "running"),
+            element
+              .getAnimations()
+              .some((animation) => animation.playState === "running"),
           ),
       { timeout: 1500 },
     )
     .toBe(true);
-  await expect.poll(() => fileRows.last().textContent()).toContain("Card.svelte");
+  await expect
+    .poll(() => fileRows.last().textContent())
+    .toContain("Card.svelte");
   await expect
     .poll(() =>
       card
@@ -158,10 +176,11 @@ test("SnapSort asset preview pans and moves items through the imperative API", a
       ),
     )
     .toBe(true);
-  await expect(movedTile.locator("xpath=ancestor::*[contains(@class, 'snapsort-item')][1]")).toHaveCSS(
-    "transform",
-    "none",
-  );
+  await expect(
+    movedTile.locator(
+      "xpath=ancestor::*[contains(@class, 'snapsort-item')][1]",
+    ),
+  ).toHaveCSS("transform", "none");
   await expect
     .poll(() => editorCanvas.locator(":scope > .snapsort-item").count())
     .toBe(1);
@@ -182,23 +201,26 @@ test("SnapSort asset preview pans and moves items through the imperative API", a
   await expect(scale).toHaveCSS("filter", /grayscale\(0\)/);
 
   const pointerCardBox = await card.boundingBox();
-  if (!pointerCardBox) throw new Error("Expected the SnapSort card to have bounds.");
+  if (!pointerCardBox)
+    throw new Error("Expected the SnapSort card to have bounds.");
   await page.mouse.move(pointerCardBox.x + 20, pointerCardBox.y + 20);
   await page.waitForTimeout(220);
-  const topPan = await pan.evaluate((element) =>
-    new DOMMatrix(getComputedStyle(element).transform).m42,
+  const topPan = await pan.evaluate(
+    (element) => new DOMMatrix(getComputedStyle(element).transform).m42,
   );
   await page.mouse.move(
     pointerCardBox.x + pointerCardBox.width - 20,
     pointerCardBox.y + pointerCardBox.height - 20,
   );
   await page.waitForTimeout(220);
-  const bottomPan = await pan.evaluate((element) =>
-    new DOMMatrix(getComputedStyle(element).transform).m42,
+  const bottomPan = await pan.evaluate(
+    (element) => new DOMMatrix(getComputedStyle(element).transform).m42,
   );
   expect(bottomPan).toBeLessThan(topPan - 100);
 
-  const panAfter = await pan.evaluate((element) => getComputedStyle(element).transform);
+  const panAfter = await pan.evaluate(
+    (element) => getComputedStyle(element).transform,
+  );
   expect(panAfter).not.toBe(panBefore);
 
   const cardAfter = await card.boundingBox();
@@ -219,7 +241,9 @@ test("SnapSort asset preview honors reduced motion", async ({ page }) => {
   const card = page.locator(".drop-snap-card");
   const firstKanbanColumn = card.locator(".preview-kanban-column").first();
   await card.scrollIntoViewIfNeeded();
-  await expect(firstKanbanColumn.locator(":scope > .snapsort-item")).toHaveCount(2);
+  await expect(
+    firstKanbanColumn.locator(":scope > .snapsort-item"),
+  ).toHaveCount(2);
 
   await card.hover();
   await expect(card).toHaveAttribute("data-preview-active", "false");
@@ -229,8 +253,13 @@ test("SnapSort asset preview honors reduced motion", async ({ page }) => {
     /grayscale\(0\)/,
   );
   await page.waitForTimeout(1200);
-  await expect(firstKanbanColumn.locator(":scope > .snapsort-item")).toHaveCount(2);
-  await expect(card.locator(".snapsort-preview-pan")).toHaveCSS("animation-name", "none");
+  await expect(
+    firstKanbanColumn.locator(":scope > .snapsort-item"),
+  ).toHaveCount(2);
+  await expect(card.locator(".snapsort-preview-pan")).toHaveCSS(
+    "animation-name",
+    "none",
+  );
   const reducedPanBefore = await card
     .locator(".snapsort-preview-pan")
     .evaluate((element) => getComputedStyle(element).transform);
@@ -261,14 +290,14 @@ test("SnapSort asset preview activates and pans with scroll on touch screens", a
   await expect(card).toHaveAttribute("data-preview-active", "true");
   await expect(card).toHaveAttribute("data-preview-hovered", "true");
 
-  const panBeforeScroll = await pan.evaluate((element) =>
-    new DOMMatrix(getComputedStyle(element).transform).m42,
+  const panBeforeScroll = await pan.evaluate(
+    (element) => new DOMMatrix(getComputedStyle(element).transform).m42,
   );
   await page.evaluate(() => window.scrollBy(0, 140));
   await expect
     .poll(() =>
-      pan.evaluate((element) =>
-        new DOMMatrix(getComputedStyle(element).transform).m42,
+      pan.evaluate(
+        (element) => new DOMMatrix(getComputedStyle(element).transform).m42,
       ),
     )
     .toBeLessThan(panBeforeScroll - 15);
diff --git a/tests/helpers/snapline-harness.ts b/tests/helpers/snapline-harness.ts
index 474e318..3f491b3 100644
--- a/tests/helpers/snapline-harness.ts
+++ b/tests/helpers/snapline-harness.ts
@@ -191,6 +191,16 @@ export function armGesture(connector: ConnectorMirror, pointerId = 7): void {
 }
 
 /** Drive dragStart + dragEnd on the gesture owner, dropping at `dropX`. */
+/** Cross the drag threshold without dropping, so the preview line exists. */
+export function startGestureDrag(owner: ConnectorMirror, pointerId = 7): void {
+  const event = { button: 0, pointerId } as any;
+  (owner as any).event.input.dragStart({
+    start: eventPositionAt(0, 0),
+    pointerId,
+    event,
+  });
+}
+
 export function driveGestureDrop(
   owner: ConnectorMirror,
   dropX: number,
diff --git a/tests/ut/input.spec.ts b/tests/ut/input.spec.ts
index 5aeacc3..edfd3a9 100644
--- a/tests/ut/input.spec.ts
+++ b/tests/ut/input.spec.ts
@@ -11,137 +11,146 @@ function initInputControl() {
         <div id="target" style="width: 100px; height: 100px;"></div>
       </body>
     </html>`,
-    { 
+    {
       url: `http://localhost:${port}`,
       contentType: "text/html",
-    });
+    },
+  );
   const window = dom.window;
   const document = dom.window.document;
   const target = document.querySelector("#target");
   const inputControl = new InputControl(target, document);
-  
+
   return [inputControl, window, document, target];
 }
 
 test.describe("Test mouse input handler", () => {
-    test("Mousedown event", async ({ page }) => {
+  test("Mousedown event", async ({ page }) => {
+    const [inputControl, window, document, target] = initInputControl();
+    // Create a mock event
+    const event = new window.MouseEvent("mousedown", {
+      bubbles: true,
+      cancelable: true,
+      clientX: 100,
+      clientY: 100,
+      button: 0,
+    });
 
-      const [inputControl, window, document, target] = initInputControl();
-      // Create a mock event
-      const event = new window.MouseEvent("mousedown", {
-        bubbles: true,
-        cancelable: true,
-        clientX: 100,
-        clientY: 100,
-        button: 0,
-
-      });
- 
-      let called: boolean = false;
-      inputControl._onCursorDown = (e, callbackTarget, button, x, y) => {
-        expect(e).toBeDefined();
-        expect(callbackTarget).toBe(target);
-        expect(button).toBe(cursorState.mouseLeft);
-        expect(x).toBe(100);
-        expect(y).toBe(100);
-        called = true;
-      };
-
-      target.dispatchEvent(event);
-      expect(called).toBe(true);
+    let called: boolean = false;
+    inputControl._onCursorDown = (e, callbackTarget, button, x, y) => {
+      expect(e).toBeDefined();
+      expect(callbackTarget).toBe(target);
+      expect(button).toBe(cursorState.mouseLeft);
+      expect(x).toBe(100);
+      expect(y).toBe(100);
+      called = true;
+    };
 
-    });
+    target.dispatchEvent(event);
+    expect(called).toBe(true);
+  });
 
-    test("Mousemove event", async ({ page }) => {
-      const [inputControl, window, document, target] = initInputControl();
-      document.elementFromPoint = () => {
-        return target;
-      };
-      // Create a mock event
-      const event = new window.MouseEvent("mousemove", {
-        bubbles: true,
-        cancelable: true,
-        clientX: 100,
-        clientY: 100,
-      });
-
-      let called: boolean = false;
-      inputControl._onCursorMove = (e, callbackTarget, state, x, y) => {
-        called = true;
-        expect(e).toBeDefined();
-        expect(callbackTarget).toBe(target);
-        expect(x).toBe(100);
-        expect(y).toBe(100);
-      };
-
-      target.dispatchEvent(event);
-      expect(called).toBe(true);
+  test("Mousemove event", async ({ page }) => {
+    const [inputControl, window, document, target] = initInputControl();
+    document.elementFromPoint = () => {
+      return target;
+    };
+    // Create a mock event
+    const event = new window.MouseEvent("mousemove", {
+      bubbles: true,
+      cancelable: true,
+      clientX: 100,
+      clientY: 100,
     });
 
-    test("Mouseup event", async ({ page }) => {
-      const [inputControl, window, document, target] = initInputControl();
-      // Create a mock event
-      const event = new window.MouseEvent("mouseup", {
-        bubbles: true,
-        cancelable: true,
-        clientX: 100,
-        clientY: 100,
-        button: 0,
-      });
-
-      let called: boolean = false;
-      inputControl._onCursorUp = (e, callbackTarget, button,  x, y) => {
-        expect(e).toBeDefined();
-        expect(callbackTarget).toBe(target);
-        expect(button).toBe(cursorState.mouseLeft);
-        expect(x).toBe(100);
-        expect(y).toBe(100);
-        called = true;
-      };
-
-      target.dispatchEvent(event);
-      expect(called).toBe(true);
+    let called: boolean = false;
+    inputControl._onCursorMove = (e, callbackTarget, state, x, y) => {
+      called = true;
+      expect(e).toBeDefined();
+      expect(callbackTarget).toBe(target);
+      expect(x).toBe(100);
+      expect(y).toBe(100);
+    };
+
+    target.dispatchEvent(event);
+    expect(called).toBe(true);
+  });
+
+  test("Mouseup event", async ({ page }) => {
+    const [inputControl, window, document, target] = initInputControl();
+    // Create a mock event
+    const event = new window.MouseEvent("mouseup", {
+      bubbles: true,
+      cancelable: true,
+      clientX: 100,
+      clientY: 100,
+      button: 0,
     });
 
-    test(("Mousewheel event"), async ({ page }) => {
-      const [inputControl, window, document, target] = initInputControl();
-      // Create a mock event
-      const event = new window.WheelEvent("wheel", {
-        bubbles: true,
-        cancelable: true,
-        clientX: 100,
-        clientY: 100,
-        deltaY: 200,
-      });
-
-      let called: boolean = false;
-      inputControl._onScroll = (e, callbackTarget, state, clientX, clientY, deltaY) => {
-        called = true;
-        expect(e).toBeDefined();
-        expect(callbackTarget).toBe(target);
-        expect(clientX).toBe(100);
-        expect(clientY).toBe(100);
-        expect(deltaY).toBe(200);
-      };
-
-      target.dispatchEvent(event);
-      expect(called).toBe(true);
+    let called: boolean = false;
+    inputControl._onCursorUp = (e, callbackTarget, button, x, y) => {
+      expect(e).toBeDefined();
+      expect(callbackTarget).toBe(target);
+      expect(button).toBe(cursorState.mouseLeft);
+      expect(x).toBe(100);
+      expect(y).toBe(100);
+      called = true;
+    };
+
+    target.dispatchEvent(event);
+    expect(called).toBe(true);
+  });
+
+  test("Mousewheel event", async ({ page }) => {
+    const [inputControl, window, document, target] = initInputControl();
+    // Create a mock event
+    const event = new window.WheelEvent("wheel", {
+      bubbles: true,
+      cancelable: true,
+      clientX: 100,
+      clientY: 100,
+      deltaY: 200,
     });
+
+    let called: boolean = false;
+    inputControl._onScroll = (
+      e,
+      callbackTarget,
+      state,
+      clientX,
+      clientY,
+      deltaY,
+    ) => {
+      called = true;
+      expect(e).toBeDefined();
+      expect(callbackTarget).toBe(target);
+      expect(clientX).toBe(100);
+      expect(clientY).toBe(100);
+      expect(deltaY).toBe(200);
+    };
+
+    target.dispatchEvent(event);
+    expect(called).toBe(true);
+  });
 });
 
 type touchEntry = {
   clientX: number;
   clientY: number;
   identifier: number;
-}
-
+};
 
 class MockTouch {
   identifier: number;
   clientX: number;
   clientY: number;
   target: Element;
-  constructor(identifier: number, clientX: number, clientY: number, target: Element) {
+  constructor(
+    identifier: number,
+    clientX: number,
+    clientY: number,
+    target: Element,
+  ) {
     this.identifier = identifier;
     this.clientX = clientX;
     this.clientY = clientY;
@@ -158,14 +167,24 @@ class MockTouchList extends Array<MockTouch> {
   }
 }
 
-function initTouchEvent(window: any, eventName: string, target: Element, touches: touchEntry[], changedTouches: touchEntry[] = []) {
-  const touchList:MockTouchList = new MockTouchList();
+function initTouchEvent(
+  window: any,
+  eventName: string,
+  target: Element,
+  touches: touchEntry[],
+  changedTouches: touchEntry[] = [],
+) {
+  const touchList: MockTouchList = new MockTouchList();
   for (const touch of touches) {
-    touchList.push(new MockTouch(touch.identifier, touch.clientX, touch.clientY, target));
+    touchList.push(
+      new MockTouch(touch.identifier, touch.clientX, touch.clientY, target),
+    );
   }
-  const changedTouchList:MockTouchList = new MockTouchList();
+  const changedTouchList: MockTouchList = new MockTouchList();
   for (const touch of changedTouches) {
-    changedTouchList.push(new MockTouch(touch.identifier, touch.clientX, touch.clientY, target));
+    changedTouchList.push(
+      new MockTouch(touch.identifier, touch.clientX, touch.clientY, target),
+    );
   }
   return new window.TouchEvent(eventName, {
     bubbles: true,
@@ -178,11 +197,19 @@ function initTouchEvent(window: any, eventName: string, target: Element, touches
 test.describe("Test touch input handler", () => {
   test("Pressing a single touch point", async ({ page }) => {
     const [inputControl, window, document, target] = initInputControl();
-    const event = initTouchEvent(window, "touchstart", target, [], [{
-      clientX: 100,
-      clientY: 100,
-      identifier: 1,
-    }]);
+    const event = initTouchEvent(
+      window,
+      "touchstart",
+      target,
+      [],
+      [
+        {
+          clientX: 100,
+          clientY: 100,
+          identifier: 1,
+        },
+      ],
+    );
 
     let called: boolean = false;
     inputControl._onCursorDown = (e, callbackTarget, button, x, y) => {
@@ -197,18 +224,29 @@ test.describe("Test touch input handler", () => {
     expect(called).toBe(true);
   });
 
-  test("When two touches are started simultaneously, it should be treated as a middle mouse button click", async ({ page }) => {
-    page.on('console', msg => console.log(msg.text()));
+  test("When two touches are started simultaneously, it should be treated as a middle mouse button click", async ({
+    page,
+  }) => {
+    page.on("console", (msg) => console.log(msg.text()));
     const [inputControl, window, document, target] = initInputControl();
-    const eventStart = initTouchEvent(window, "touchstart", target, [],  [{
-      clientX: 100,
-      clientY: 100,
-      identifier: 1,
-    }, {
-      clientX: 200,
-      clientY: 200,
-      identifier: 2,
-    }]);
+    const eventStart = initTouchEvent(
+      window,
+      "touchstart",
+      target,
+      [],
+      [
+        {
+          clientX: 100,
+          clientY: 100,
+          identifier: 1,
+        },
+        {
+          clientX: 200,
+          clientY: 200,
+          identifier: 2,
+        },
+      ],
+    );
 
     let called: boolean = false;
     inputControl._onCursorDown = (e, callbackTarget, button, x, y) => {
@@ -222,7 +260,6 @@ test.describe("Test touch input handler", () => {
 
     target.dispatchEvent(eventStart);
     expect(called).toBe(true);
-
   });
 
   test("Touchmove event with a single touch", async ({ page }) => {
@@ -232,18 +269,30 @@ test.describe("Test touch input handler", () => {
         clientX: 100,
         clientY: 100,
         identifier: 1,
-      }
-    ]
+      },
+    ];
     const moveTouches = [
       {
         clientX: 101,
         clientY: 101,
         identifier: 1,
-      }
-    ]
+      },
+    ];
 
-    const touchStart = initTouchEvent(window, "touchstart", target, downTouches, downTouches);
-    const touchMove = initTouchEvent(window, "touchmove", target, moveTouches, []);
+    const touchStart = initTouchEvent(
+      window,
+      "touchstart",
+      target,
+      downTouches,
+      downTouches,
+    );
+    const touchMove = initTouchEvent(
+      window,
+      "touchmove",
+      target,
+      moveTouches,
+      [],
+    );
 
     let called: boolean = false;
     inputControl._onCursorMove = (e, callbackTarget, button, x, y) => {
@@ -261,8 +310,10 @@ test.describe("Test touch input handler", () => {
     expect(called).toBe(true);
   });
 
-  test("Touchmove event with multiple simultaneous touches", async ({ page }) => {
-    const [inputControl, window, document, target] = initInputControl();  
+  test("Touchmove event with multiple simultaneous touches", async ({
+    page,
+  }) => {
+    const [inputControl, window, document, target] = initInputControl();
     const downTouches = [
       {
         clientX: 100,
@@ -273,7 +324,7 @@ test.describe("Test touch input handler", () => {
         clientX: 200,
         clientY: 200,
         identifier: 2,
-      }
+      },
     ];
     const moveTouches = [
       {
@@ -285,10 +336,22 @@ test.describe("Test touch input handler", () => {
         clientX: 201,
         clientY: 201,
         identifier: 2,
-      }
+      },
     ];
-    const eventDown = initTouchEvent(window, "touchstart", target, downTouches, downTouches);
-    const eventMove = initTouchEvent(window, "touchmove", target, moveTouches, []);
+    const eventDown = initTouchEvent(
+      window,
+      "touchstart",
+      target,
+      downTouches,
+      downTouches,
+    );
+    const eventMove = initTouchEvent(
+      window,
+      "touchmove",
+      target,
+      moveTouches,
+      [],
+    );
 
     let called: boolean = false;
     inputControl._onCursorMove = (e, callbackTarget, button, x, y) => {
@@ -315,10 +378,10 @@ test.describe("Test touch input handler", () => {
         identifier: 1,
       },
       {
-        clientX: 0, 
+        clientX: 0,
         clientY: -100,
         identifier: 2,
-      }
+      },
     ];
     const moveTouches_0 = [
       {
@@ -330,7 +393,7 @@ test.describe("Test touch input handler", () => {
         clientX: 0,
         clientY: -100,
         identifier: 2,
-      }
+      },
     ];
     const moveTouches_1 = [
       {
@@ -342,21 +405,44 @@ test.describe("Test touch input handler", () => {
         clientX: 30,
         clientY: -50,
         identifier: 2,
-      }
+      },
     ];
-   
 
-    const touchStart = initTouchEvent(window, "touchstart", target, downTouches, downTouches);
-    const touchMove_0 = initTouchEvent(window, "touchmove", target, moveTouches_0, []);
-    const touchMove_1 = initTouchEvent(window, "touchmove", target, moveTouches_1, []);
+    const touchStart = initTouchEvent(
+      window,
+      "touchstart",
+      target,
+      downTouches,
+      downTouches,
+    );
+    const touchMove_0 = initTouchEvent(
+      window,
+      "touchmove",
+      target,
+      moveTouches_0,
+      [],
+    );
+    const touchMove_1 = initTouchEvent(
+      window,
+      "touchmove",
+      target,
+      moveTouches_1,
+      [],
+    );
 
-    
     target.dispatchEvent(touchStart);
     target.dispatchEvent(touchMove_0);
-    
+
     let scrollCalled: boolean = false;
     let moveCalled: boolean = false;
-    inputControl._onScroll = (e, callbackTarget, button, clientX, clientY, deltaY) => {
+    inputControl._onScroll = (
+      e,
+      callbackTarget,
+      button,
+      clientX,
+      clientY,
+      deltaY,
+    ) => {
       scrollCalled = true;
       expect(e).toBeDefined();
       expect(callbackTarget).toBe(target);
@@ -378,6 +464,4 @@ test.describe("Test touch input handler", () => {
     expect(scrollCalled).toBe(true);
     expect(moveCalled).toBe(true);
   });
-
-
 });
diff --git a/tests/ut/snapline-line-reconciler.spec.ts b/tests/ut/snapline-line-reconciler.spec.ts
index 4507213..d6d0512 100644
--- a/tests/ut/snapline-line-reconciler.spec.ts
+++ b/tests/ut/snapline-line-reconciler.spec.ts
@@ -1,10 +1,10 @@
 import { expect, test } from "@playwright/test";
+import { ConnectorMirror, NodeMirror } from "../../assets/snapline/core/src";
+import { getGraphRegistry } from "../../assets/snapline/core/src";
 import {
-  ConnectorMirror,
-  NodeMirror,
+  attachControlledGraph,
+  type LineChangeRequest,
 } from "../../assets/snapline/core/src";
-import { getGraphRegistry } from "../../assets/snapline/core/src";
-import { attachControlledGraph, type LineChangeRequest } from "../../assets/snapline/core/src";
 import {
   armGesture,
   createControlledHarness as controlledHarness,
diff --git a/tests/ut/snapline-observers.spec.ts b/tests/ut/snapline-observers.spec.ts
index 293f407..57cfa2d 100644
--- a/tests/ut/snapline-observers.spec.ts
+++ b/tests/ut/snapline-observers.spec.ts
@@ -2,8 +2,14 @@ import { expect, test } from "@playwright/test";
 import { ConnectorMirror, NodeMirror } from "../../assets/snapline/core/src";
 
 import {
+  armGesture,
+  createControlledHarness,
   createEngineHarness,
+  driveGestureDrop,
+  eventPositionAt,
   installObserverStubs,
+  nearTargetStrategy,
+  startGestureDrag,
 } from "../helpers/snapline-harness";
 
 /** Tasks queued for one object at one stage, keyed by their queueId. */
@@ -169,3 +175,108 @@ test("a resize signals the node, and its snapshot reports authored size", () =>
     restoreObservers();
   }
 });
+
+test("resolveNewLine seeds a genuinely new line and rides into the request", () => {
+  const { engine, handle, requests, respondWith } = createControlledHarness();
+  respondWith((request, current) => [...current, ...request.add]);
+  const sourceNode = new NodeMirror(engine, null, {
+    resolveNewLine: ({ connector }) => ({ kind: `from:${connector.name}` }),
+  });
+  const targetNode = new NodeMirror(engine, null);
+  const source = new ConnectorMirror(engine, sourceNode, {
+    id: "seed-out",
+    name: "source",
+    rules: { maxIncoming: 0 },
+    surfaceStrategies: [nearTargetStrategy],
+  });
+  const target = new ConnectorMirror(engine, targetNode, {
+    id: "seed-in",
+    name: "target",
+    rules: { maxOutgoing: 0 },
+    surfaceStrategies: [nearTargetStrategy],
+  });
+  sourceNode.addConnectorObject(source);
+  targetNode.addConnectorObject(target);
+
+  armGesture(source, 1);
+  startGestureDrag(source, 1);
+  const line = source.outgoingLines[0];
+  // Seeded before any request exists — this is the only thing a preview
+  // renderer can read mid-drag.
+  expect(line.payload).toEqual({ kind: "from:source" });
+
+  driveGestureDrop(source, 100, 1);
+  expect(requests).toHaveLength(1);
+  expect(requests[0].add[0].payload).toEqual({ kind: "from:source" });
+
+  handle.flush();
+  expect(target.incomingLines).toHaveLength(1);
+});
+
+test("a connector-level resolveNewLine overrides the node's", () => {
+  const { engine } = createEngineHarness();
+  const node = new NodeMirror(engine, null, {
+    resolveNewLine: () => "from-node",
+  });
+  const plain = new ConnectorMirror(engine, node, {
+    name: "plain",
+    rules: { maxIncoming: 0 },
+  });
+  const special = new ConnectorMirror(engine, node, {
+    name: "special",
+    rules: { maxIncoming: 0 },
+    resolveNewLine: () => "from-connector",
+  });
+  node.addConnectorObject(plain);
+  node.addConnectorObject(special);
+
+  armGesture(plain, 2);
+  startGestureDrag(plain, 2);
+  armGesture(special, 3);
+  startGestureDrag(special, 3);
+  expect(plain.outgoingLines[0].payload).toBe("from-node");
+  expect(special.outgoingLines[0].payload).toBe("from-connector");
+});
+
+test("a reconnect never re-seeds — the payload stays app-owned", () => {
+  const { engine, handle, respondWith } = createControlledHarness();
+  respondWith((request, current) => [...current, ...request.add]);
+  let seeds = 0;
+  const sourceNode = new NodeMirror(engine, null, {
+    resolveNewLine: () => `seed-${++seeds}`,
+  });
+  const targetNode = new NodeMirror(engine, null);
+  const source = new ConnectorMirror(engine, sourceNode, {
+    id: "rc-out",
+    name: "source",
+    rules: { maxIncoming: 0 },
+    surfaceStrategies: [nearTargetStrategy],
+  });
+  const target = new ConnectorMirror(engine, targetNode, {
+    id: "rc-in",
+    name: "target",
+    rules: { maxOutgoing: 0, reconnect: true },
+    surfaceStrategies: [nearTargetStrategy],
+  });
+  sourceNode.addConnectorObject(source);
+  targetNode.addConnectorObject(target);
+
+  armGesture(source, 4);
+  startGestureDrag(source, 4);
+  driveGestureDrop(source, 100, 4);
+  handle.flush();
+  const line = source.outgoingLines[0];
+  expect(line.payload).toBe("seed-1");
+
+  // Picking the settled line back up must not run the seeder again.
+  target.armSurfaceGesture(
+    {
+      position: eventPositionAt(0, 0),
+      event: { button: 0, pointerId: 5 },
+    } as any,
+    null,
+  );
+  driveGestureDrop(source, 100, 5);
+  expect(seeds).toBe(1);
+  expect(line.payload).toBe("seed-1");
+});

From fd3b7bdb4f7f9465ca66db44bb8f1f086ed21f90 Mon Sep 17 00:00:00 2001
From: tfukaza <tfukaza@git.com>
Date: Mon, 27 Jul 2026 21:49:21 -0700
Subject: [PATCH 06/10] snapline: distinguish an empty-space drop from a
 refused one
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#endControlledDrop took the same branch for "dropped where no connector was
resolved" and "dropped on a connector that declined", so both reached
consumers as a bare onDragEnd({ connected: false }). They are different
answers: only the first means the user gestured toward a node that does not
exist yet, which is the prerequisite for letting SnapLine request node
creation.

Adds DragEndOutcome ("connected" | "refused" | "empty-space" | "cancelled")
to the onDragEnd payload. This is useful on its own — a consumer can now tell
a rejected connection from a miss without re-running hit resolution — and it
is the branch a node-change channel will hang off.

Also aligns the console warning with the component name. It said "no graph
owner attached" while the thing to mount is called <ControlledGraph>, which
was the concrete naming bug behind the (now declined) rename question.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 assets/snapline/core/src/connector.ts  | 55 ++++++++++++++++++++------
 assets/snapline/core/src/index.ts      |  1 +
 tests/ut/snapline-graph-mirror.spec.ts |  6 +--
 3 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/assets/snapline/core/src/connector.ts b/assets/snapline/core/src/connector.ts
index b685b89..f94c149 100644
--- a/assets/snapline/core/src/connector.ts
+++ b/assets/snapline/core/src/connector.ts
@@ -23,6 +23,21 @@ export type DisconnectReason =
   | "teardown";
 export type ConnectorRole = "source" | "target";
 
+/**
+ * How a line drag ended. "empty-space" and "refused" were previously
+ * indistinguishable — both simply reported `connected: false` — but only the
+ * first means the user gestured toward a node that does not exist yet.
+ */
+export type DragEndOutcome =
+  /** Settled onto an admitting target. */
+  | "connected"
+  /** Dropped over a target that declined (capacity, predicate, or roles). */
+  | "refused"
+  /** Dropped where no connector was resolved at all. */
+  | "empty-space"
+  /** The gesture was cancelled (pointer cancel, teardown). */
+  | "cancelled";
+
 export interface ConnectorPoint {
   x: number;
   y: number;
@@ -180,7 +195,14 @@ export interface ConnectorCallbacks {
   onCandidateChange?: (event: ConnectorCandidateEvent) => void;
   onConnect?: (event: ConnectorConnectionEvent) => void;
   onDisconnect?: (event: ConnectorDisconnectionEvent) => void;
-  onDragEnd?: (event: ConnectorDragEvent & { connected: boolean }) => void;
+  onDragEnd?: (
+    event: ConnectorDragEvent & {
+      connected: boolean;
+      /** Why the drag ended — distinguishes an empty-space drop from a
+       * refusal, which `connected` alone cannot. */
+      outcome: DragEndOutcome;
+    },
+  ) => void;
 }
 
 enum ConnectorState {
@@ -764,7 +786,7 @@ class ConnectorMirror extends ElementObject {
     }
 
     if (this.#cancelledPointers.has(prop.pointerId)) {
-      this.#discardDraggedLine(line, prop, false);
+      this.#discardDraggedLine(line, prop, false, "cancelled");
       return;
     }
 
@@ -781,9 +803,9 @@ class ConnectorMirror extends ElementObject {
     // Topology is always controlled: without a graph owner attached there
     // is no document to propose to, so the gesture cannot produce a line.
     console.warn(
-      "SnapLine: gesture on an engine with no graph owner — mount <ControlledGraph> (or attachControlledGraph) so gestures have a document to propose to.",
+      "SnapLine: gesture on an engine with no ControlledGraph attached — mount <ControlledGraph> (or call attachControlledGraph) so gestures have a document to propose to.",
     );
-    this.#discardDraggedLine(line, prop, false);
+    this.#discardDraggedLine(line, prop, false, "cancelled");
   }
 
   /**
@@ -798,12 +820,19 @@ class ConnectorMirror extends ElementObject {
     prop: dragEndProp,
   ): void {
     const target = candidate?.candidate.connector ?? null;
-
-    if (
-      !candidate ||
-      !target ||
-      !this.#admitsConnection(target, line, "drop")
-    ) {
+    // "Nothing under the pointer" and "something under the pointer that said
+    // no" are different answers, and only the first one means the user asked
+    // for a node that does not exist yet.
+    const outcome: DragEndOutcome =
+      !candidate || !target
+        ? "empty-space"
+        : this.#admitsConnection(target, line, "drop")
+          ? "connected"
+          : "refused";
+
+    // The candidate/target checks are redundant with `outcome` but keep the
+    // non-null narrowing for everything below.
+    if (outcome !== "connected" || !candidate || !target) {
       if (this.#gestureOrigin === "reconnect") {
         // Gesture disconnect: propose the removal; the line stays visibly
         // detached until the decision. A rejected removal re-glues it from
@@ -822,11 +851,12 @@ class ConnectorMirror extends ElementObject {
           position: prop.end,
           pointerId: prop.pointerId,
           connected: false,
+          outcome,
         });
         this.#resetGesture();
         return;
       }
-      this.#discardDraggedLine(line, prop, false);
+      this.#discardDraggedLine(line, prop, false, outcome);
       return;
     }
 
@@ -875,6 +905,7 @@ class ConnectorMirror extends ElementObject {
       position: prop.end,
       pointerId: prop.pointerId,
       connected: true,
+      outcome: "connected",
     });
     this.#resetGesture();
   }
@@ -1137,6 +1168,7 @@ class ConnectorMirror extends ElementObject {
     line: LineMirror,
     prop: dragEndProp,
     connected: boolean,
+    outcome: DragEndOutcome,
   ): void {
     if (this.#outgoingLines.includes(line)) this.deleteLine(line, "gesture");
     this.#callbacks.onDragEnd?.({
@@ -1144,6 +1176,7 @@ class ConnectorMirror extends ElementObject {
       position: prop.end,
       pointerId: prop.pointerId,
       connected,
+      outcome,
     });
     this.#resetGesture();
   }
diff --git a/assets/snapline/core/src/index.ts b/assets/snapline/core/src/index.ts
index 647d69e..c8a0b7e 100644
--- a/assets/snapline/core/src/index.ts
+++ b/assets/snapline/core/src/index.ts
@@ -48,6 +48,7 @@ export type {
   ConnectorSurfaceHitTestEvent,
   ConnectorSurfaceStrategy,
   DisconnectReason,
+  DragEndOutcome,
   NewLineEvent,
   NewLineResolver,
   ResolvedConnectorRules,
diff --git a/tests/ut/snapline-graph-mirror.spec.ts b/tests/ut/snapline-graph-mirror.spec.ts
index 01a9f46..d901079 100644
--- a/tests/ut/snapline-graph-mirror.spec.ts
+++ b/tests/ut/snapline-graph-mirror.spec.ts
@@ -189,9 +189,9 @@ test("a gesture without a graph owner warns and discards the preview", () => {
   // gesture cannot produce a line.
   expect(source.outgoingLines).toEqual([]);
   expect(target.incomingLines).toEqual([]);
-  expect(warnings.some((message) => message.includes("no graph owner"))).toBe(
-    true,
-  );
+  expect(
+    warnings.some((message) => message.includes("no ControlledGraph attached")),
+  ).toBe(true);
 });
 
 test("the scheduler coalesces bursts and defers passes to the outermost batch end", async () => {

From 150c85c59d64f256e3498284e4a5a8944e994af7 Mon Sep 17 00:00:00 2001
From: tfukaza <tfukaza@git.com>
Date: Mon, 27 Jul 2026 22:02:46 -0700
Subject: [PATCH 07/10] =?UTF-8?q?snapline:=20resolve=20node=20creation=20a?=
 =?UTF-8?q?s=20notification-only=20=E2=80=94=20no=20request=20channel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes the last open item of the controlled-graph pass. There is no
onNodeChangeRequest. The application mounts the node AND pushes the line
record itself, using onDragEnd's new outcome plus the ControlledGraph handle.

The symmetric channel was appealing but could not be made honest. A node
request has to answer "which connector does the new line attach to?", and the
application cannot answer truthfully at return time: Svelte and React both
mount asynchronously, so the connector does not exist yet. Every shape that
bridged the gap either accepted a one-frame flicker (return the id, let the
record go latent, let the end-of-pass sweep discard the preview meanwhile) or
added a "pending" grace state to the reconciler with its own cancel/timeout
rule. Both invent machinery to hide the fact that the application, not
SnapLine, decides when a node exists. SNAPZEN stanza 1 settles it: expose the
primitives, let the developer combine them.

What was genuinely missing was the information, not the channel — and that
shipped in the previous commit as DragEndOutcome. The record naming an
unmounted connector stays latent and converges when registration schedules
the next pass, which is already documented reconciler behavior; no new state.

Covered by a unit test that drives the whole flow: an empty-space drop, a
refusal, then mounting the node and watching the latent record converge. That
test also pins a distinction worth knowing — a role-ineligible connector
(maxIncoming: 0) is filtered out during candidate resolution, so dropping on
one reports "empty-space", not "refused". A refusal is a connector that
resolves as a candidate and then declines at drop, which is exactly what
isValidConnection's phase parameter is for.

TODO.md records the decision and unblocks both dependent features:
spawn-on-empty-drop now needs only a demo, and node-dropped-on-line needs a
hit test rather than a request channel.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 docs/snapline/reference/react/connector.mdx   | 43 +++++++++++
 docs/snapline/reference/svelte/connector.mdx  | 43 +++++++++++
 docs/snapline/reference/vanilla/connector.mdx | 43 +++++++++++
 tests/ut/snapline-observers.spec.ts           | 74 +++++++++++++++++++
 4 files changed, 203 insertions(+)

diff --git a/docs/snapline/reference/react/connector.mdx b/docs/snapline/reference/react/connector.mdx
index 30c64ff..f65ab83 100644
--- a/docs/snapline/reference/react/connector.mdx
+++ b/docs/snapline/reference/react/connector.mdx
@@ -48,3 +48,46 @@ single-incoming connector that rejects extra incoming lines.
 > Topology methods on `ConnectorMirror` such as `createLine`, `deleteLine`,
 > and `deleteAllLines` are `@internal`. Change
 > topology by updating your canonical `LineRecord`s through `ControlledGraph`.
+
+## Spawning a node from an empty-space drop
+
+`onDragEnd` reports **why** a drag ended through `outcome`:
+
+| `outcome` | Meaning |
+| --- | --- |
+| `"connected"` | Settled onto an admitting target |
+| `"refused"` | Dropped over a target that declined (capacity, predicate, roles) |
+| `"empty-space"` | No connector was resolved under the pointer |
+| `"cancelled"` | Pointer cancel or teardown |
+
+`"empty-space"` is the hook for "drag a line out and drop it on the canvas to
+make a new node". SnapLine deliberately has no node-change request channel:
+your framework decides when a node exists, so you mount the node **and** add
+the line record yourself.
+
+```ts
+onDragEnd: ({ outcome, position, connector }) => {
+  if (outcome !== "empty-space") return;
+  const nodeId = mint();
+  nodes = [...nodes, { id: nodeId, x: position.x, y: position.y }];
+  graph.setLines([
+    ...lines,
+    {
+      id: mint(),
+      fromConnectorId: connector.connectorId,
+      toConnectorId: `${nodeId}:input`,
+    },
+  ]);
+};
+```
+
+The record names a connector that has not mounted yet. That is fine: it stays
+**latent**, and connector registration schedules the pass that converges it,
+so the line appears the moment the node does. Note the dragged preview is
+discarded at drop like any unaccepted gesture — the new line appears with the
+node rather than continuing the stroke.
+
+A role-ineligible connector (`maxIncoming: 0`) is filtered out during
+candidate resolution, so dropping on one reports `"empty-space"`, not
+`"refused"`. A refusal is a connector that resolves as a candidate and then
+declines at drop, which is what `isValidConnection`'s `phase` distinguishes.
diff --git a/docs/snapline/reference/svelte/connector.mdx b/docs/snapline/reference/svelte/connector.mdx
index 4a80675..b78e5e9 100644
--- a/docs/snapline/reference/svelte/connector.mdx
+++ b/docs/snapline/reference/svelte/connector.mdx
@@ -47,3 +47,46 @@ single-incoming connector that rejects extra incoming lines.
 > Topology methods on `ConnectorMirror` such as `createLine`, `deleteLine`,
 > and `deleteAllLines` are `@internal`. Change
 > topology by updating your canonical `LineRecord`s through `ControlledGraph`.
+
+## Spawning a node from an empty-space drop
+
+`onDragEnd` reports **why** a drag ended through `outcome`:
+
+| `outcome` | Meaning |
+| --- | --- |
+| `"connected"` | Settled onto an admitting target |
+| `"refused"` | Dropped over a target that declined (capacity, predicate, roles) |
+| `"empty-space"` | No connector was resolved under the pointer |
+| `"cancelled"` | Pointer cancel or teardown |
+
+`"empty-space"` is the hook for "drag a line out and drop it on the canvas to
+make a new node". SnapLine deliberately has no node-change request channel:
+your framework decides when a node exists, so you mount the node **and** add
+the line record yourself.
+
+```ts
+onDragEnd: ({ outcome, position, connector }) => {
+  if (outcome !== "empty-space") return;
+  const nodeId = mint();
+  nodes = [...nodes, { id: nodeId, x: position.x, y: position.y }];
+  graph.setLines([
+    ...lines,
+    {
+      id: mint(),
+      fromConnectorId: connector.connectorId,
+      toConnectorId: `${nodeId}:input`,
+    },
+  ]);
+};
+```
+
+The record names a connector that has not mounted yet. That is fine: it stays
+**latent**, and connector registration schedules the pass that converges it,
+so the line appears the moment the node does. Note the dragged preview is
+discarded at drop like any unaccepted gesture — the new line appears with the
+node rather than continuing the stroke.
+
+A role-ineligible connector (`maxIncoming: 0`) is filtered out during
+candidate resolution, so dropping on one reports `"empty-space"`, not
+`"refused"`. A refusal is a connector that resolves as a candidate and then
+declines at drop, which is what `isValidConnection`'s `phase` distinguishes.
diff --git a/docs/snapline/reference/vanilla/connector.mdx b/docs/snapline/reference/vanilla/connector.mdx
index 5f8c1a3..9dd6640 100644
--- a/docs/snapline/reference/vanilla/connector.mdx
+++ b/docs/snapline/reference/vanilla/connector.mdx
@@ -47,3 +47,46 @@ Enumerate connectors with `query(engine).connectors()`.
 > and `deleteAllLines` are `@internal` even though
 > they appear in editor autocomplete. Change topology by updating canonical
 > `LineRecord`s through the controlled-graph handle.
+
+## Spawning a node from an empty-space drop
+
+`onDragEnd` reports **why** a drag ended through `outcome`:
+
+| `outcome` | Meaning |
+| --- | --- |
+| `"connected"` | Settled onto an admitting target |
+| `"refused"` | Dropped over a target that declined (capacity, predicate, roles) |
+| `"empty-space"` | No connector was resolved under the pointer |
+| `"cancelled"` | Pointer cancel or teardown |
+
+`"empty-space"` is the hook for "drag a line out and drop it on the canvas to
+make a new node". SnapLine deliberately has no node-change request channel:
+your framework decides when a node exists, so you mount the node **and** add
+the line record yourself.
+
+```ts
+onDragEnd: ({ outcome, position, connector }) => {
+  if (outcome !== "empty-space") return;
+  const nodeId = mint();
+  nodes = [...nodes, { id: nodeId, x: position.x, y: position.y }];
+  graph.setLines([
+    ...lines,
+    {
+      id: mint(),
+      fromConnectorId: connector.connectorId,
+      toConnectorId: `${nodeId}:input`,
+    },
+  ]);
+};
+```
+
+The record names a connector that has not mounted yet. That is fine: it stays
+**latent**, and connector registration schedules the pass that converges it,
+so the line appears the moment the node does. Note the dragged preview is
+discarded at drop like any unaccepted gesture — the new line appears with the
+node rather than continuing the stroke.
+
+A role-ineligible connector (`maxIncoming: 0`) is filtered out during
+candidate resolution, so dropping on one reports `"empty-space"`, not
+`"refused"`. A refusal is a connector that resolves as a candidate and then
+declines at drop, which is what `isValidConnection`'s `phase` distinguishes.
diff --git a/tests/ut/snapline-observers.spec.ts b/tests/ut/snapline-observers.spec.ts
index 57cfa2d..1191208 100644
--- a/tests/ut/snapline-observers.spec.ts
+++ b/tests/ut/snapline-observers.spec.ts
@@ -280,3 +280,77 @@ test("a reconnect never re-seeds — the payload stays app-owned", () => {
   expect(seeds).toBe(1);
   expect(line.payload).toBe("seed-1");
 });
+
+test("empty-space vs refused drops are distinguishable, and spawn-on-drop works from app code", () => {
+  const { engine, handle, respondWith } = createControlledHarness();
+  respondWith((_request, current) => current); // reject: gestures never auto-commit
+  const sourceNode = new NodeMirror(engine, null);
+  const fullNode = new NodeMirror(engine, null);
+  const source = new ConnectorMirror(engine, sourceNode, {
+    id: "spawn-out",
+    name: "source",
+    rules: { maxIncoming: 0 },
+    surfaceStrategies: [nearTargetStrategy],
+  });
+  // A role-ineligible connector is filtered out during candidate resolution,
+  // so dropping on one is genuinely a miss. A *refusal* is a connector that
+  // resolves as a candidate and then declines at drop — which is what the
+  // predicate's two-phase contract exists for.
+  const refuser = new ConnectorMirror(engine, fullNode, {
+    id: "spawn-refuse",
+    name: "refuser",
+    rules: {
+      maxOutgoing: 0,
+      maxIncoming: 1,
+      isValidConnection: ({ phase }) => phase !== "drop",
+    },
+    surfaceStrategies: [nearTargetStrategy],
+  });
+  sourceNode.addConnectorObject(source);
+  fullNode.addConnectorObject(refuser);
+
+  const outcomes: string[] = [];
+  source.updateConfig({
+    callbacks: { onDragEnd: (event) => outcomes.push(event.outcome) },
+  });
+
+  // Drop far away — nearTargetStrategy misses beyond x=500.
+  armGesture(source, 1);
+  startGestureDrag(source, 1);
+  driveGestureDrop(source, 900, 1);
+  expect(outcomes).toEqual(["empty-space"]);
+
+  // Drop on a connector that cannot accept: a refusal, not a miss.
+  armGesture(source, 2);
+  startGestureDrag(source, 2);
+  driveGestureDrop(source, 100, 2);
+  expect(outcomes).toEqual(["empty-space", "refused"]);
+
+  // The spawn flow the "empty-space" branch enables: the app mounts the node
+  // and pushes the line itself. The record is latent until the connector
+  // registers, then converges with no extra wiring.
+  handle.setCanonicalGraph({
+    lines: [
+      {
+        id: "spawned",
+        fromConnectorId: "spawn-out",
+        toConnectorId: "spawned:input",
+      },
+    ],
+  });
+  handle.flush();
+  expect(source.outgoingLines).toEqual([]); // latent — nothing to draw yet
+
+  const spawnedNode = new NodeMirror(engine, null);
+  const spawnedIn = new ConnectorMirror(engine, spawnedNode, {
+    id: "spawned:input",
+    name: "input",
+    rules: { maxOutgoing: 0, maxIncoming: 1 },
+  });
+  spawnedNode.addConnectorObject(spawnedIn);
+  handle.flush();
+
+  expect(source.outgoingLines).toHaveLength(1);
+  expect(source.outgoingLines[0].lineId).toBe("spawned");
+  expect(spawnedIn.incomingLines).toHaveLength(1);
+});

From 2240f52d18a7eab131bebe18fe66e195bcbfdccf Mon Sep 17 00:00:00 2001
From: tfukaza <tfukaza@git.com>
Date: Mon, 27 Jul 2026 22:17:41 -0700
Subject: [PATCH 08/10] =?UTF-8?q?snapline:=20Phase=204=20=E2=80=94=20contr?=
 =?UTF-8?q?acts,=20reference=20docs,=20and=20the=20overlay=20e2e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Brings the written contracts in line with what shipped, and proves the
observation channel works in a browser rather than only in unit tests.

AGENTS.md: codifies SNAPZEN as a "Design rules" section, so a reviewer has a
written basis for rejecting a convenience API that duplicates a primitive
rather than merely debating it — with the three rules annotated by what they
have already decided in this arc. Rewrites the callback-conventions section
around the distinction that actually exists (notification vs registrar vs
value-returning policy, and why onLineChangeRequest is the one deliberate
exception). Adds the observation-vs-painting rule to the DOM ownership
contract. Replaces the Node.svelte props block, which listed 3 of ~20.

ownership-specification.md: adds A7 (a change request carries its own answer
— no dependence on framework flush timing, exactly one decisive pass per
request, synchronous handler, imperative handle for non-request pushes) and
A8 (observation is not painting — single-owner writer, multicast pre-queue
signal carrying no geometry, core picks no write phase, throws isolated, no
adapter prop). Four new conformance rows.

Reference pages: all three line.mdx now document onGeometryInvalidated with
the stage-ordering table (a line paints at WRITE_2, so an overlay wanting this
frame's position schedules WRITE_3), onStateChange, and the standing question
of where a line's DOM lives — SnapLine never holds it.

New tests/e2e/snapline-overlay.spec.ts drives a marker glued to a line's
midpoint by an overlay component that did not create the line and does not
paint it. Two findings from making it honest:

- The first version's measurement was wrong, not the feature: it compared a
  container-local midpoint against a screen-space box, giving a CONSTANT 95px
  drift across every frame of a drag — which was itself the tell that tracking
  worked. It now reads the painted path's bounding box, whose centre is
  exactly the midpoint because the default cubic is point-symmetric about it.
- The resize case originally passed with the channel removed, so it was
  proving nothing: EdgeNode was not resizable, and a bottom-right resize would
  not move a left-edge connector anyway. Node B is now resizable and the test
  grabs the TOP-LEFT handle, so the anchored edge — and the line endpoint —
  actually travels. Verified by sabotage: with the subscription removed both
  gesture tests go red, while the two mount-time tests correctly still pass.

Also extends lint from `src` to `src assets/snapline` (it had never covered
the adapters) and fixes the 7 prefer-const errors that surfaced. TODO.md
records the remaining gate gaps: tsc still excludes assets/**, asset-base has
6 lint errors blocking a repo-wide sweep, and tests/ut/input.spec.ts has been
broken on main.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 assets/snapline/AGENTS.md                     |  69 +++++++-
 assets/snapline/core/src/select.ts            |  10 +-
 .../src/demo/node_ui_edges/EdgeNode.svelte    |  12 +-
 .../src/demo/node_ui_edges/LineLabel.svelte   |  51 ++++++
 .../demo/node_ui_edges/NodeUIEdgesDemo.svelte |  36 ++++-
 .../design/ownership-specification.md         |  35 +++++
 docs/snapline/reference/react/line.mdx        |  75 +++++++++
 docs/snapline/reference/svelte/line.mdx       |  75 +++++++++
 docs/snapline/reference/vanilla/line.mdx      |  75 +++++++++
 package.json                                  |   3 +-
 .../e2e/snapline-overlay.playwright.config.ts |  28 ++++
 tests/e2e/snapline-overlay.spec.ts            | 148 ++++++++++++++++++
 12 files changed, 601 insertions(+), 16 deletions(-)
 create mode 100644 demo/svelte/src/demo/node_ui_edges/LineLabel.svelte
 create mode 100644 tests/e2e/snapline-overlay.playwright.config.ts
 create mode 100644 tests/e2e/snapline-overlay.spec.ts

diff --git a/assets/snapline/AGENTS.md b/assets/snapline/AGENTS.md
index 85f210c..d89a685 100644
--- a/assets/snapline/AGENTS.md
+++ b/assets/snapline/AGENTS.md
@@ -8,6 +8,34 @@ SnapLine is experimental and published as synchronized core, Svelte, and React
 packages. Breaking changes are allowed before 1.0 and should replace obsolete
 APIs directly rather than adding compatibility shims.
 
+## Design rules (from `SNAPZEN.md`)
+
+`SNAPZEN.md` at the repo root is the tie-breaker for every API decision here.
+The three that come up constantly, and what they have already decided:
+
+1. **Explicit verbosity over magic abstraction. Expose the primitives; let
+   developers combine them.** This is why `onGeometryInvalidated` hands over
+   no geometry and picks no write stage — a callback fired from inside
+   `writeTransform()` would silently decide the subscriber runs in WRITE_2,
+   with nothing in the signature saying so.
+2. **There should only be one way to do something.** This is why the per-line
+   renderer resolver has two levels and not four, why the package has one
+   entry point instead of eleven subpaths, why `query()` is the only
+   enumeration surface, and why there is no adapter prop wrapping
+   `onGeometryInvalidated`.
+3. **The developer owns the data; when it must change, ask permission. The
+   engine owns the representation.** This is the whole controlled-graph
+   protocol — and why there is no `onNodeChangeRequest`: the application
+   decides when a node exists, so SnapLine reports the empty-space drop and
+   the application mounts the node and adds the record.
+
+**There are no such thing as sensible defaults.** When a hook seeds
+application data, its absence is meaningful — see `ResolvedNodeConfig`, which
+keeps `resolveNewLine` optional rather than defaulting it to a no-op.
+
+A convenience API that duplicates an existing primitive should be rejected on
+these grounds, not merely debated.
+
 ## Packages
 
 ### @snap-engine/snapline
@@ -161,10 +189,21 @@ snapline/
 ### Node.svelte
 **Purpose:** Node wrapper component
 
-**Props:**
-- `className?: string` - CSS class
-- `LineSvelteComponent?: Component` - Custom line component
-- `nodeObject?: NodeMirror` (bindable) - Node instance
+**Props** (React's `Node` mirrors these; the notable naming difference is
+Svelte's `LineSvelteComponent` vs React's `lineComponent`, forced by Svelte 5
+requiring PascalCase for dynamic components):
+
+- Identity/DOM: `id`, `className`, `elementProps`, `nodeObject` (bindable)
+- Geometry: `x`, `y`, `width`, `height`
+- Resize: `resizable`, `minWidth`, `minHeight`, `resizeHandleThickness`,
+  `resizeHandles`, `resizeCursors`
+- Rendering: `LineSvelteComponent` (one renderer for all this node's lines),
+  `resolveLineComponent(line)` (per-line override, resolved at render time)
+- Data: `metadata`, `resolveNewLine` (seeds payload onto a line this node's
+  connectors create)
+- Callbacks: `callbacks` (the whole `NodeCallbacks` dictionary), plus the
+  convenience props `onGeometryCommit` and `onSizeChange`
+- `edgePan`
 
 **Slots:**
 - Default: Node content and connectors
@@ -233,6 +272,16 @@ Concretely:
   components must bind a geometry writer and clean it up on unmount.
 - **Semantic state stays separate:** line phase/payload/target changes use
   `onStateChange`; geometry never requests a framework render.
+- **Observation is separate from painting.** `bindGeometryWriter` is
+  single-owner (binding a second writer replaces the first — it is the thing
+  that draws). Anything that merely *watches* geometry uses
+  `onGeometryInvalidated` on `LineMirror`/`NodeMirror`: multicast, and it
+  fires synchronously at input dispatch **before any frame task is queued**,
+  carrying no geometry. Subscribers schedule their own task
+  (`schedule(cb, { stage, queueId })`) and read `geometrySnapshot()` there.
+  Core does not pick a write phase on a consumer's behalf — a line paints at
+  WRITE_2, so an overlay wanting this frame's position schedules WRITE_3.
+  Never add an adapter prop that wraps this; the mirror is already in hand.
 - **Adapters must render node/group elements with
   `position: absolute; transform-origin: top left`** (and ideally
   `will-change: transform`) — core no longer seeds base styles.
@@ -241,6 +290,18 @@ Concretely:
 
 ### Callback conventions
 
+Two shapes, and they are not interchangeable. **Notification** callbacks are
+`on*` and return `void`. **Registrars** are also `on*` but return an
+unsubscribe function and are backed by a `Set`, so any number of consumers may
+attach: `LineMirror.onStateChange`, `PlacementController.onStateChange`, and
+`onGeometryInvalidated` on line and node. **Value-returning policy** hooks are
+named `can*`/`resolve*`/`isValidConnection` — plus the one deliberate
+exception, `ControlledGraphCallbacks.onLineChangeRequest`, which returns the
+next canonical line list because the return value *is* the protocol.
+
+Tense matters: `onGeometryInvalidated` fires every frame before the paint;
+`onGeometryCommit` fires once, at rest, after a gesture.
+
 Domain/lifecycle callbacks live in `EventProxyFactory` dictionaries —
 Configuration owns plain callback objects. Node callbacks report drag,
 selection, resize, and line-list events; group callbacks report membership
diff --git a/assets/snapline/core/src/select.ts b/assets/snapline/core/src/select.ts
index a6cd4d4..20ec729 100644
--- a/assets/snapline/core/src/select.ts
+++ b/assets/snapline/core/src/select.ts
@@ -135,7 +135,7 @@ class RectSelectController extends ElementObject {
     this.#baselineSelection = new Set(getGraphRegistry(this.engine).selection);
     if (this.#selectionMode === "replace") {
       // setSelected(false) removes each node from the engine's selection.
-      for (let node of [...getGraphRegistry(this.engine).selection]) {
+      for (const node of [...getGraphRegistry(this.engine).selection]) {
         node.setSelected(false);
       }
     }
@@ -159,7 +159,7 @@ class RectSelectController extends ElementObject {
       otherObject: Collider,
     ) => {
       if (otherObject.parent instanceof NodeMirror) {
-        let node = otherObject.parent as NodeMirror;
+        const node = otherObject.parent as NodeMirror;
         node.setSelected(
           this.#selectionMode === "toggle"
             ? !this.#baselineSelection.has(node)
@@ -176,7 +176,7 @@ class RectSelectController extends ElementObject {
       otherObject: Collider,
     ) => {
       if (otherObject.parent instanceof NodeMirror) {
-        let node = otherObject.parent as NodeMirror;
+        const node = otherObject.parent as NodeMirror;
         node.setSelected(this.#baselineSelection.has(node));
         this.#callbacks.onSelectionChange?.({
           select: this,
@@ -188,11 +188,11 @@ class RectSelectController extends ElementObject {
 
   onGlobalCursorMove(prop: pointerMoveProp): void {
     if (this.#state === "dragging") {
-      let [boxOriginX, boxOriginY] = [
+      const [boxOriginX, boxOriginY] = [
         Math.min(this.#mouseDownX, prop.position.x),
         Math.min(this.#mouseDownY, prop.position.y),
       ];
-      let [boxWidth, boxHeight] = [
+      const [boxWidth, boxHeight] = [
         Math.abs(prop.position.x - this.#mouseDownX),
         Math.abs(prop.position.y - this.#mouseDownY),
       ];
diff --git a/demo/svelte/src/demo/node_ui_edges/EdgeNode.svelte b/demo/svelte/src/demo/node_ui_edges/EdgeNode.svelte
index 8096194..7574698 100644
--- a/demo/svelte/src/demo/node_ui_edges/EdgeNode.svelte
+++ b/demo/svelte/src/demo/node_ui_edges/EdgeNode.svelte
@@ -1,10 +1,18 @@
 <script lang="ts">
     import { Node, Connector, Line } from "@snap-engine/snapline-svelte";
 
-    let { nodeId, title, x = 0, y = 0, maxIncoming = 1 } = $props();
+    let { nodeId, title, x = 0, y = 0, maxIncoming = 1, resizable = false } = $props();
 </script>
 
-<Node className="card node" LineSvelteComponent={Line} {x} {y}>
+<Node
+    className="card node"
+    LineSvelteComponent={Line}
+    {x}
+    {y}
+    {resizable}
+    minWidth={160}
+    minHeight={110}
+>
     <div class="node-header">
         <h3>{title}</h3>
     </div>
diff --git a/demo/svelte/src/demo/node_ui_edges/LineLabel.svelte b/demo/svelte/src/demo/node_ui_edges/LineLabel.svelte
new file mode 100644
index 0000000..269eb86
--- /dev/null
+++ b/demo/svelte/src/demo/node_ui_edges/LineLabel.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { LineMirror } from "@snap-engine/snapline";
+
+  // Stands in for an external overlay library: it did not create the line and
+  // does not paint it. It only watches, which is what onGeometryInvalidated is
+  // for — bindGeometryWriter is already owned by the line's renderer.
+  let { line }: { line: LineMirror } = $props();
+
+  let el: HTMLDivElement;
+
+  function place() {
+    if (!el) return;
+    const geometry = line.geometrySnapshot();
+    el.style.transform = `translate(${geometry.start.x + geometry.delta.x / 2}px, ${
+      geometry.start.y + geometry.delta.y / 2
+    }px)`;
+  }
+
+  onMount(() => {
+    // No priming call on subscribe, so read the initial position explicitly.
+    place();
+    // WRITE_3, because the line paints (and resolves its anchors) at WRITE_2 —
+    // scheduling earlier would read last frame's geometry.
+    return line.onGeometryInvalidated(() =>
+      line.schedule(place, { stage: "WRITE_3", queueId: `${line.id}-label` }),
+    );
+  });
+</script>
+
+<div
+  bind:this={el}
+  class="line-label"
+  data-testid="line-label"
+  data-line-id={line.lineId}
+></div>
+
+<style>
+  .line-label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    margin: -5px 0 0 -5px;
+    border-radius: 50%;
+    background: #d33;
+    pointer-events: none;
+    transform-origin: top left;
+  }
+</style>
diff --git a/demo/svelte/src/demo/node_ui_edges/NodeUIEdgesDemo.svelte b/demo/svelte/src/demo/node_ui_edges/NodeUIEdgesDemo.svelte
index 833a0d2..185ca9e 100644
--- a/demo/svelte/src/demo/node_ui_edges/NodeUIEdgesDemo.svelte
+++ b/demo/svelte/src/demo/node_ui_edges/NodeUIEdgesDemo.svelte
@@ -1,14 +1,25 @@
 <script lang="ts">
   import { Engine } from "@snap-engine/asset-base-svelte";
   import { ControlledGraph, Select } from "@snap-engine/snapline-svelte";
-  import { applyLineChange } from "@snap-engine/snapline";
-  import type { LineChangeRequest, LineRecord } from "@snap-engine/snapline";
+  import { applyLineChange, query } from "@snap-engine/snapline";
+  import type {
+    LineChangeRequest,
+    LineMirror,
+    LineRecord,
+  } from "@snap-engine/snapline";
+  import type { Engine as CoreEngine } from "@snap-engine/core";
   import EdgeNode from "./EdgeNode.svelte";
+  import LineLabel from "./LineLabel.svelte";
 
   // The application-owned line document: the single source of truth.
   // Connector ids are `${node}:${port}`; line ids are stable.
   let lines = $state.raw<LineRecord[]>([]);
   let graph: ControlledGraph;
+  let engine = $state<CoreEngine | null>(null);
+  // An overlay library discovers lines through the read-only query facade
+  // rather than holding records. Settled mirrors appear one reconciliation
+  // pass after the document changes, hence the microtask.
+  let lineMirrors = $state<LineMirror[]>([]);
 
   // Changes with no originating request (toolbar buttons, the test hook) have
   // to be pushed; only a gesture's return value reaches SnapLine on its own.
@@ -80,6 +91,13 @@
     ]);
   }
 
+  $effect(() => {
+    void lines;
+    queueMicrotask(() => {
+      if (engine) lineMirrors = [...query(engine).lines()];
+    });
+  });
+
   // Test hook: lets the e2e mutate the document mid-drag without a second
   // pointer interaction breaking the gesture.
   $effect(() => {
@@ -126,13 +144,23 @@
   <span data-testid="intent-log">{intentLog.join("|")}</span>
 </div>
 
-<Engine id="node-ui-edges-canvas">
+<Engine bind:engine id="node-ui-edges-canvas">
   <div id="node-ui-edges">
     <div id="sl-background"></div>
     <Select />
+    {#each lineMirrors as mirror (mirror.lineId)}
+      <LineLabel line={mirror} />
+    {/each}
     <ControlledGraph bind:this={graph} onLineChangeRequest={handleRequest} />
     <EdgeNode nodeId="a" title="Node A" x={120} y={120} />
-    <EdgeNode nodeId="b" title="Node B" x={440} y={170} maxIncoming={1} />
+    <EdgeNode
+      nodeId="b"
+      title="Node B"
+      x={440}
+      y={170}
+      maxIncoming={1}
+      resizable
+    />
     {#if showNodeC}
       <EdgeNode nodeId="c" title="Node C" x={280} y={380} />
     {/if}
diff --git a/docs/snapline/design/ownership-specification.md b/docs/snapline/design/ownership-specification.md
index 09df9af..757927d 100644
--- a/docs/snapline/design/ownership-specification.md
+++ b/docs/snapline/design/ownership-specification.md
@@ -562,6 +562,37 @@ pairing it with a current transform moves the anchored edge.
 Adapter-required callbacks MUST compose with consumer callbacks. An adapter
 MUST NOT silently replace and hide a consumer lifecycle callback.
 
+### A7. Change requests carry their own answer
+
+The controlled bridge MUST obtain the application's decision from the return
+value of `onLineChangeRequest`, not from a subsequent push. Adapters MUST NOT
+depend on framework flush timing to deliver that decision.
+
+Exactly one decisive reconciliation pass MUST run per request, including one
+the application rejects; rejection is returning the list unchanged. The
+handler MUST be synchronous, because the staged preview is resolved by the
+pass that follows the call.
+
+Adapters MUST expose an imperative handle for canonical changes with **no**
+originating request (hydration, undo/redo, collaboration).
+
+### A8. Observation is not painting
+
+A geometry sink that *draws* (`bindGeometryWriter`) MUST remain single-owner.
+Passive observation MUST use a separate multicast channel
+(`onGeometryInvalidated`).
+
+That channel MUST fire synchronously at input dispatch, before any frame task
+is queued, and MUST NOT carry geometry — the subscriber chooses its own render
+stage and reads `geometrySnapshot()` there. Core MUST NOT select a write phase
+on the subscriber's behalf.
+
+An observer that throws MUST NOT prevent the paint or starve other observers.
+
+Adapters MUST NOT wrap this channel in a prop: the mirror is already available
+to any component that renders it, and a prop would be a second way to do the
+same thing.
+
 ### A5. Supplied objects
 
 When an adapter accepts a caller-supplied core object, the ownership and
@@ -707,6 +738,10 @@ document, structured diagnostics, and engine scoping are all shipped:
 | Engine isolation                    | Conforms       | Selection, groups, `resizingNode`, and the reconciler are engine-scoped           |
 | Diagnostics                         | Conforms       | Derived `ReconciliationError`s via `onDiagnosticsChanged` / `query().diagnostics()` |
 | Geometry authority                  | Decided        | SnapLine-owned visual cue; one batched `onGeometryCommit` observation, no controlled-geometry mode |
+| Request carries its own answer      | Conforms       | `onLineChangeRequest` returns the next `LineRecord[]`; adopted synchronously, one decisive pass per request |
+| Non-request canonical pushes        | Conforms       | Imperative handle on both adapters (`setLines` / ref) plus vanilla `setCanonicalGraph` |
+| Observation vs painting             | Conforms       | Single-owner `bindGeometryWriter`; multicast `onGeometryInvalidated` fired pre-queue, carrying no geometry |
+| Node existence                      | Conforms       | Framework-mount-led; no node-change channel — `onDragEnd`'s `outcome` reports the empty-space drop and the app mounts |
 | Explicit authority model            | Conforms       | Exactly one model: always controlled; no imperative public topology surface       |
 
 ## Open decisions — all decided and shipped
diff --git a/docs/snapline/reference/react/line.mdx b/docs/snapline/reference/react/line.mdx
index 593851c..bc2d138 100644
--- a/docs/snapline/reference/react/line.mdx
+++ b/docs/snapline/reference/react/line.mdx
@@ -34,3 +34,78 @@ locally, awaiting the canonical owner's decision), and `"connected"`.
 
 The rendered element carries `data-snapline-type="connector-line"` and
 `data-line-id` (the stable `lineId`, never the engine-internal object id).
+
+## Where a line's DOM lives
+
+**SnapLine never holds it.** A `LineRecord` is pure data, and
+`LineMirror.writeTransform()` is overridden to call the bound geometry writer
+instead of touching an element — so the framework component closes over its
+own refs and core only ever hands it numbers. A `LineMirror` extends
+`ElementObject` deliberately (it needs `transformMode`, `schedule`,
+transform-graph membership, and the polymorphic `writeTransform()` that the
+connector's line writes call) but never binds an `element`.
+
+## Watching a line move from outside
+
+`bindGeometryWriter` is **single-owner**: it is the thing that paints the
+line, and binding a second writer replaces the first. To *watch* geometry —
+say, to keep a label glued to a line — use `onGeometryInvalidated`, which is
+multicast and passive.
+
+It fires **synchronously the moment core decides the geometry will change**,
+during input dispatch, before any frame task is queued. It hands over no
+geometry on purpose: you schedule your own task at whatever stage suits you
+and read `geometrySnapshot()` there.
+
+```ts
+const stop = line.onGeometryInvalidated(() =>
+  line.schedule(place, { stage: "WRITE_3", queueId: "label" }),
+);
+
+function place() {
+  const g = line.geometrySnapshot();
+  el.style.transform =
+    `translate(${g.start.x + g.delta.x / 2}px, ${g.start.y + g.delta.y / 2}px)`;
+}
+```
+
+There is no priming call — nothing has been invalidated when you subscribe —
+so read `geometrySnapshot()` directly for the initial position. It returns an
+unsubscribe function. A throwing observer is isolated: it cannot stop the line
+painting or starve other observers.
+
+### Choosing a stage
+
+The frame runs `READ_1 → collisions → WRITE_1 → READ_2 → WRITE_2 → animations
+→ READ_3 → WRITE_3`. A line paints at **WRITE_2**, and resolves its anchors
+inside that same task.
+
+| Your stage | What `geometrySnapshot()` returns |
+| --- | --- |
+| `WRITE_1`, `READ_2` | The **previous** frame's anchors |
+| `WRITE_2` | Undefined ordering against the line's own write — avoid |
+| `READ_3`, `WRITE_3` | This frame's anchors |
+
+Because `schedule()` coalesces on `(objectId, queueId)`, reusing a stable
+`queueId` collapses many invalidations in one frame into a single task.
+
+This channel covers node drags, resizes, camera edge-pan, multi-select carry,
+and group carry, because every one of them routes through the same line-write
+scheduling. `NodeMirror` has the same `onGeometryInvalidated` if you need to
+follow a node rather than a line; read its `geometrySnapshot()` (authored
+position and size) rather than `hitBox`, which is DOM truth and can lag by a
+frame mid-gesture.
+
+**Caveat:** the snapshot is `start`, `end`, and `delta` in world space. The
+default renderer's cubic Bezier is computed in the adapter, not in core, and
+for that curve the midpoint of the chord happens to be the midpoint of the
+curve — so `start + delta / 2` is exact today. A custom renderer can change
+the path, and an observer cannot know.
+
+## Semantic state
+
+`line.onStateChange(callback)` is a separate, multicast channel carrying
+`{ phase, target, candidate, payload }`. It fires on semantic changes only —
+never on movement — so a renderer can restyle a free preview differently from
+a settled line without re-rendering every frame. It primes immediately with
+the current state and returns an unsubscribe.
diff --git a/docs/snapline/reference/svelte/line.mdx b/docs/snapline/reference/svelte/line.mdx
index 85bd7f3..9a3b573 100644
--- a/docs/snapline/reference/svelte/line.mdx
+++ b/docs/snapline/reference/svelte/line.mdx
@@ -34,3 +34,78 @@ locally, awaiting the canonical owner's decision), and `"connected"`.
 
 The rendered element carries `data-snapline-type="connector-line"` and
 `data-line-id` (the stable `lineId`, never the engine-internal object id).
+
+## Where a line's DOM lives
+
+**SnapLine never holds it.** A `LineRecord` is pure data, and
+`LineMirror.writeTransform()` is overridden to call the bound geometry writer
+instead of touching an element — so the framework component closes over its
+own refs and core only ever hands it numbers. A `LineMirror` extends
+`ElementObject` deliberately (it needs `transformMode`, `schedule`,
+transform-graph membership, and the polymorphic `writeTransform()` that the
+connector's line writes call) but never binds an `element`.
+
+## Watching a line move from outside
+
+`bindGeometryWriter` is **single-owner**: it is the thing that paints the
+line, and binding a second writer replaces the first. To *watch* geometry —
+say, to keep a label glued to a line — use `onGeometryInvalidated`, which is
+multicast and passive.
+
+It fires **synchronously the moment core decides the geometry will change**,
+during input dispatch, before any frame task is queued. It hands over no
+geometry on purpose: you schedule your own task at whatever stage suits you
+and read `geometrySnapshot()` there.
+
+```ts
+const stop = line.onGeometryInvalidated(() =>
+  line.schedule(place, { stage: "WRITE_3", queueId: "label" }),
+);
+
+function place() {
+  const g = line.geometrySnapshot();
+  el.style.transform =
+    `translate(${g.start.x + g.delta.x / 2}px, ${g.start.y + g.delta.y / 2}px)`;
+}
+```
+
+There is no priming call — nothing has been invalidated when you subscribe —
+so read `geometrySnapshot()` directly for the initial position. It returns an
+unsubscribe function. A throwing observer is isolated: it cannot stop the line
+painting or starve other observers.
+
+### Choosing a stage
+
+The frame runs `READ_1 → collisions → WRITE_1 → READ_2 → WRITE_2 → animations
+→ READ_3 → WRITE_3`. A line paints at **WRITE_2**, and resolves its anchors
+inside that same task.
+
+| Your stage | What `geometrySnapshot()` returns |
+| --- | --- |
+| `WRITE_1`, `READ_2` | The **previous** frame's anchors |
+| `WRITE_2` | Undefined ordering against the line's own write — avoid |
+| `READ_3`, `WRITE_3` | This frame's anchors |
+
+Because `schedule()` coalesces on `(objectId, queueId)`, reusing a stable
+`queueId` collapses many invalidations in one frame into a single task.
+
+This channel covers node drags, resizes, camera edge-pan, multi-select carry,
+and group carry, because every one of them routes through the same line-write
+scheduling. `NodeMirror` has the same `onGeometryInvalidated` if you need to
+follow a node rather than a line; read its `geometrySnapshot()` (authored
+position and size) rather than `hitBox`, which is DOM truth and can lag by a
+frame mid-gesture.
+
+**Caveat:** the snapshot is `start`, `end`, and `delta` in world space. The
+default renderer's cubic Bezier is computed in the adapter, not in core, and
+for that curve the midpoint of the chord happens to be the midpoint of the
+curve — so `start + delta / 2` is exact today. A custom renderer can change
+the path, and an observer cannot know.
+
+## Semantic state
+
+`line.onStateChange(callback)` is a separate, multicast channel carrying
+`{ phase, target, candidate, payload }`. It fires on semantic changes only —
+never on movement — so a renderer can restyle a free preview differently from
+a settled line without re-rendering every frame. It primes immediately with
+the current state and returns an unsubscribe.
diff --git a/docs/snapline/reference/vanilla/line.mdx b/docs/snapline/reference/vanilla/line.mdx
index c9bf902..db5d45e 100644
--- a/docs/snapline/reference/vanilla/line.mdx
+++ b/docs/snapline/reference/vanilla/line.mdx
@@ -43,3 +43,78 @@ decisions.
 
 Enumerate settled lines with `query(engine).lines()` (gesture previews are not
 part of the settled graph); look one up with `query(engine).line(id)`.
+
+## Where a line's DOM lives
+
+**SnapLine never holds it.** A `LineRecord` is pure data, and
+`LineMirror.writeTransform()` is overridden to call the bound geometry writer
+instead of touching an element — so the framework component closes over its
+own refs and core only ever hands it numbers. A `LineMirror` extends
+`ElementObject` deliberately (it needs `transformMode`, `schedule`,
+transform-graph membership, and the polymorphic `writeTransform()` that the
+connector's line writes call) but never binds an `element`.
+
+## Watching a line move from outside
+
+`bindGeometryWriter` is **single-owner**: it is the thing that paints the
+line, and binding a second writer replaces the first. To *watch* geometry —
+say, to keep a label glued to a line — use `onGeometryInvalidated`, which is
+multicast and passive.
+
+It fires **synchronously the moment core decides the geometry will change**,
+during input dispatch, before any frame task is queued. It hands over no
+geometry on purpose: you schedule your own task at whatever stage suits you
+and read `geometrySnapshot()` there.
+
+```ts
+const stop = line.onGeometryInvalidated(() =>
+  line.schedule(place, { stage: "WRITE_3", queueId: "label" }),
+);
+
+function place() {
+  const g = line.geometrySnapshot();
+  el.style.transform =
+    `translate(${g.start.x + g.delta.x / 2}px, ${g.start.y + g.delta.y / 2}px)`;
+}
+```
+
+There is no priming call — nothing has been invalidated when you subscribe —
+so read `geometrySnapshot()` directly for the initial position. It returns an
+unsubscribe function. A throwing observer is isolated: it cannot stop the line
+painting or starve other observers.
+
+### Choosing a stage
+
+The frame runs `READ_1 → collisions → WRITE_1 → READ_2 → WRITE_2 → animations
+→ READ_3 → WRITE_3`. A line paints at **WRITE_2**, and resolves its anchors
+inside that same task.
+
+| Your stage | What `geometrySnapshot()` returns |
+| --- | --- |
+| `WRITE_1`, `READ_2` | The **previous** frame's anchors |
+| `WRITE_2` | Undefined ordering against the line's own write — avoid |
+| `READ_3`, `WRITE_3` | This frame's anchors |
+
+Because `schedule()` coalesces on `(objectId, queueId)`, reusing a stable
+`queueId` collapses many invalidations in one frame into a single task.
+
+This channel covers node drags, resizes, camera edge-pan, multi-select carry,
+and group carry, because every one of them routes through the same line-write
+scheduling. `NodeMirror` has the same `onGeometryInvalidated` if you need to
+follow a node rather than a line; read its `geometrySnapshot()` (authored
+position and size) rather than `hitBox`, which is DOM truth and can lag by a
+frame mid-gesture.
+
+**Caveat:** the snapshot is `start`, `end`, and `delta` in world space. The
+default renderer's cubic Bezier is computed in the adapter, not in core, and
+for that curve the midpoint of the chord happens to be the midpoint of the
+curve — so `start + delta / 2` is exact today. A custom renderer can change
+the path, and an observer cannot know.
+
+## Semantic state
+
+`line.onStateChange(callback)` is a separate, multicast channel carrying
+`{ phase, target, candidate, payload }`. It fires on semantic changes only —
+never on movement — so a renderer can restyle a free preview differently from
+a settled line without re-rendering every frame. It primes immediately with
+the current state and returns an unsubscribe.
diff --git a/package.json b/package.json
index e998dc9..84191c0 100755
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "test:snapline-ut": "playwright test tests/ut/snapline-*.spec.ts --project=chromium",
     "test:snapline": "playwright test -c tests/e2e/snapline.playwright.config.ts",
     "test:snapline-edges": "playwright test -c tests/e2e/snapline-edges.playwright.config.ts",
+    "test:snapline-overlay": "playwright test -c tests/e2e/snapline-overlay.playwright.config.ts",
     "test:snapline-camera": "playwright test -c tests/e2e/snapline-camera.playwright.config.ts",
     "test:snapline-group": "playwright test -c tests/e2e/snapline-group.playwright.config.ts",
     "test:snapline-resize": "playwright test -c tests/e2e/snapline-resize.playwright.config.ts",
@@ -61,7 +62,7 @@
     "test:ui": "start-server-and-test server:vanilla http://localhost:3001 'playwright test --ui'",
     "render:collision-dots": "node scripts/render_collision_text_dots.mjs",
     "format": "prettier --write src",
-    "lint": "eslint src --ext .ts",
+    "lint": "eslint src assets/snapline --ext .ts",
     "build": "vite build --mode production",
     "build:dev": "FRAMEWORK=test npx vite build --mode development",
     "validate:packages": "node scripts/validate-packages.mjs",
diff --git a/tests/e2e/snapline-overlay.playwright.config.ts b/tests/e2e/snapline-overlay.playwright.config.ts
new file mode 100644
index 0000000..8afad9b
--- /dev/null
+++ b/tests/e2e/snapline-overlay.playwright.config.ts
@@ -0,0 +1,28 @@
+import { defineConfig } from "@playwright/test";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const port = Number(process.env.SNAPLINE_OVERLAY_TEST_PORT ?? 3036);
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "../..");
+
+export default defineConfig({
+  testDir: ".",
+  testMatch: "snapline-overlay.spec.ts",
+  fullyParallel: false,
+  workers: 1,
+  reporter: [["list"]],
+  use: {
+    baseURL: `http://127.0.0.1:${port}`,
+    channel: "chrome",
+    screenshot: "only-on-failure",
+    trace: "retain-on-failure",
+    viewport: { width: 1280, height: 900 },
+  },
+  webServer: {
+    cwd: repoRoot,
+    command: `npx vite serve demo/svelte --config demo/svelte/vite.config.mjs --host 127.0.0.1 --port ${port} --strictPort --force`,
+    url: `http://127.0.0.1:${port}`,
+    reuseExistingServer: false,
+    timeout: 30_000,
+  },
+});
diff --git a/tests/e2e/snapline-overlay.spec.ts b/tests/e2e/snapline-overlay.spec.ts
new file mode 100644
index 0000000..259b581
--- /dev/null
+++ b/tests/e2e/snapline-overlay.spec.ts
@@ -0,0 +1,148 @@
+import { expect, test, type Locator, type Page } from "@playwright/test";
+
+// An overlay outside SnapLine keeps a marker glued to a line's midpoint using
+// onGeometryInvalidated + its own WRITE_3 task. The point of these tests is
+// that it tracks *per frame*, not just once the gesture settles — a
+// settle-only assertion would pass even if the channel fired once at the end.
+
+const LINE = "[data-snapline-type='connector-line']";
+const LABEL = "[data-testid='line-label']";
+
+async function centerOf(locator: Locator) {
+  const box = await locator.boundingBox();
+  expect(box).not.toBeNull();
+  return { x: box!.x + box!.width / 2, y: box!.y + box!.height / 2 };
+}
+
+function connectorOf(page: Page, nodeTitle: string, port: "input" | "output") {
+  return page
+    .locator("[data-snapline-type='node']")
+    .filter({
+      has: page.getByRole("heading", { name: nodeTitle, exact: true }),
+    })
+    .locator(`[data-snapline-name='${port}']`);
+}
+
+function nodeOf(page: Page, nodeTitle: string) {
+  return page.locator("[data-snapline-type='node']").filter({
+    has: page.getByRole("heading", { name: nodeTitle, exact: true }),
+  });
+}
+
+/**
+ * The rendered line's midpoint, in screen space.
+ *
+ * The default path is `M 0,0 C x1,0 dx-x1,dy dx,dy`, which is point-symmetric
+ * about (dx/2, dy/2) — P0↔P3 and P1↔P2 reflect through it. So the painted
+ * curve's bounding box is centred exactly on the midpoint, and reading it
+ * measures what was actually rendered rather than re-deriving it from the
+ * numbers the overlay already used.
+ */
+async function lineMidpoint(page: Page) {
+  return page
+    .locator(`${LINE} path`)
+    .first()
+    .evaluate((path) => {
+      const rect = path.getBoundingClientRect();
+      return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+    });
+}
+
+async function labelCenter(page: Page) {
+  return centerOf(page.locator(LABEL).first());
+}
+
+/** Screen-space distance between the marker and where the line actually is. */
+async function drift(page: Page) {
+  const [mid, label] = await Promise.all([
+    lineMidpoint(page),
+    labelCenter(page),
+  ]);
+  return Math.hypot(mid.x - label.x, mid.y - label.y);
+}
+
+async function connectAB(page: Page) {
+  const from = await centerOf(connectorOf(page, "Node A", "output"));
+  const to = await centerOf(connectorOf(page, "Node B", "input"));
+  await page.mouse.move(from.x, from.y);
+  await page.mouse.down();
+  await page.mouse.move(to.x, to.y, { steps: 12 });
+  await page.mouse.up();
+  await expect(page.locator(LINE)).toHaveCount(1);
+  await expect(page.locator(LABEL)).toHaveCount(1);
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/snapline-edges");
+  await expect(connectorOf(page, "Node A", "output")).toBeVisible();
+});
+
+test("the overlay is glued to a settled line without any gesture", async ({
+  page,
+}) => {
+  await connectAB(page);
+  expect(await drift(page)).toBeLessThan(2);
+});
+
+test("the overlay tracks every frame of an endpoint-node drag", async ({
+  page,
+}) => {
+  await connectAB(page);
+
+  const node = nodeOf(page, "Node B");
+  const grip = await centerOf(node.getByRole("heading", { name: "Node B" }));
+  await page.mouse.move(grip.x, grip.y);
+  await page.mouse.down();
+
+  const drifts: number[] = [];
+  for (let step = 1; step <= 8; step++) {
+    // One move per animation frame: slow pacing hides per-frame races.
+    await page.mouse.move(grip.x + step * 14, grip.y + step * 9);
+    await page.evaluate(
+      () => new Promise<void>((r) => requestAnimationFrame(() => r())),
+    );
+    drifts.push(await drift(page));
+  }
+  await page.mouse.up();
+
+  // Mid-drag, not just at rest.
+  expect(Math.max(...drifts)).toBeLessThan(4);
+  expect(await drift(page)).toBeLessThan(2);
+});
+
+test("the overlay tracks a resize of an endpoint node", async ({ page }) => {
+  await connectAB(page);
+
+  const node = nodeOf(page, "Node B");
+  const box = (await node.boundingBox())!;
+  // The TOP-LEFT handle, deliberately: it moves the anchored edge, so the
+  // input connector (and therefore the line endpoint) actually travels.
+  // A bottom-right resize would leave the left edge — and this line — put,
+  // and the test would pass without the channel doing anything.
+  await page.mouse.move(box.x, box.y);
+  await page.mouse.down();
+
+  const drifts: number[] = [];
+  for (let step = 1; step <= 6; step++) {
+    await page.mouse.move(box.x - step * 6, box.y - step * 5);
+    await page.evaluate(
+      () => new Promise<void>((r) => requestAnimationFrame(() => r())),
+    );
+    drifts.push(await drift(page));
+  }
+  await page.mouse.up();
+
+  expect(Math.max(...drifts)).toBeLessThan(4);
+  expect(await drift(page)).toBeLessThan(2);
+});
+
+test("the overlay survives the line being removed and re-added", async ({
+  page,
+}) => {
+  await connectAB(page);
+  await page.getByTestId("reset-doc").click();
+  await expect(page.locator(LABEL)).toHaveCount(0);
+
+  await connectAB(page);
+  expect(await drift(page)).toBeLessThan(2);
+});

From cdbbf99771b590053ce49cb14a77c10feb73dc39 Mon Sep 17 00:00:00 2001
From: tfukaza <tfukaza@git.com>
Date: Tue, 28 Jul 2026 21:29:31 -0700
Subject: [PATCH 09/10] Update SnapLine node code

---
 assets/snapline/AGENTS.md                     |  23 +-
 assets/snapline/core/README.md                |   7 +-
 assets/snapline/core/src/group.ts             |  17 +-
 assets/snapline/core/src/index.ts             |   8 +-
 .../snapline/core/src/internal/shared-data.ts |  16 +-
 assets/snapline/core/src/node.ts              | 475 +++++-------------
 assets/snapline/react/README.md               |   9 +-
 assets/snapline/react/package.json            |   1 +
 assets/snapline/react/src/Group.tsx           |  93 +---
 assets/snapline/react/src/Node.tsx            |  50 +-
 assets/snapline/react/src/ResizeRegion.tsx    |  64 +++
 assets/snapline/react/src/index.ts            |   2 +
 assets/snapline/svelte/README.md              |  12 +-
 assets/snapline/svelte/package.json           |   1 +
 assets/snapline/svelte/src/Group.svelte       |  59 +--
 assets/snapline/svelte/src/Node.svelte        |  60 +--
 .../snapline/svelte/src/ResizeRegion.svelte   |  49 ++
 assets/snapline/svelte/src/index.ts           |   1 +
 .../svelte/src/resize-region-context.ts       |   4 +
 demo/react/src/App.jsx                        |  57 ++-
 .../src/demo/node_ui_edges/EdgeNode.svelte    |  11 +-
 .../demo/node_ui_edges/NodeUIEdgesDemo.svelte |   2 +-
 .../demo/node_ui_group/NodeUIGroupDemo.svelte |  14 +-
 .../node_ui_resize/NodeUIResizeDemo.svelte    |   7 +-
 .../demo/node_ui_resize/ResizableNode.svelte  |  52 +-
 docs/snapline/design/current-architecture.md  |   7 +-
 docs/snapline/design/migration-notes.md       |  16 +
 docs/snapline/guides/02_selection_resize.mdx  |  23 +-
 .../guides/05_state_styling_accessibility.mdx |   2 +-
 docs/snapline/reference/react/node.mdx        |  10 +-
 docs/snapline/reference/svelte/node.mdx       |  10 +-
 docs/snapline/reference/vanilla/node.mdx      |  18 +-
 src/index.ts                                  |   8 +-
 src/input.ts                                  |  44 +-
 src/util.ts                                   |  16 +
 tests/e2e/snapline-group.spec.ts              |   2 +-
 tests/e2e/snapline-resize.spec.ts             |  33 +-
 tests/ut/core-util.spec.ts                    |  31 ++
 tests/ut/snapline-graph-mirror.spec.ts        |  16 +
 .../lib/components/docs/SnapLineDemo.svelte   |  49 +-
 40 files changed, 642 insertions(+), 737 deletions(-)
 create mode 100644 assets/snapline/react/src/ResizeRegion.tsx
 create mode 100644 assets/snapline/svelte/src/ResizeRegion.svelte
 create mode 100644 assets/snapline/svelte/src/resize-region-context.ts
 create mode 100644 tests/ut/core-util.spec.ts

diff --git a/assets/snapline/AGENTS.md b/assets/snapline/AGENTS.md
index d89a685..aeb10eb 100644
--- a/assets/snapline/AGENTS.md
+++ b/assets/snapline/AGENTS.md
@@ -44,10 +44,11 @@ these grounds, not merely debated.
 **Dependencies:** `@snap-engine/core`
 
 **Exports:**
-- `NodeMirror` - Graph node with connectors (opt-in eight-direction resize)
+- `NodeMirror` - Graph node with connectors and DOM-region resizing
+- `ResizeRegionMirror` - Developer-owned DOM resize surface parented to a node
 - `ConnectorMirror` - Input/output connector
 - `LineMirror` - Visual connection line
-- `GroupNodeMirror` - Resizable box that carries the nodes inside it
+- `GroupNodeMirror` - Group box that carries the nodes inside it
 - `RectSelectController` - Rectangle selection tool
 - `PlacementController` - Headless pointer-follow placement state machine
 - `attachControlledGraph` - Installs the controlled-graph bridge (LineReconciler)
@@ -67,6 +68,7 @@ package declares a single `.` export and no per-module subpaths. Modules under
 **Exports:**
 - `Node.svelte` - Node component
 - `Group.svelte` - Exclusive nested group component
+- `ResizeRegion.svelte` - Developer-styled DOM resize surface
 - `Connector.svelte` - Connector component
 - `Line.svelte` - Connection line component
 - `Select.svelte` - Rectangle selection component
@@ -78,7 +80,7 @@ package declares a single `.` export and no per-module subpaths. Modules under
 **Language:** React/TypeScript
 **Dependencies:** `@snap-engine/snapline`, `@snap-engine/core`
 
-Exports `Engine`, `Node`, `Group`, `Connector`, `Line`, `Select`,
+Exports `Engine`, `Node`, `Group`, `ResizeRegion`, `Connector`, `Line`, `Select`,
 `Placement`, and `ControlledGraph`, with forwarded refs to core objects
 where applicable.
 
@@ -112,6 +114,7 @@ snapline/
 │       ├── index.ts
 │       ├── Node.svelte
 │       ├── Group.svelte
+│       ├── ResizeRegion.svelte
 │       ├── Connector.svelte
 │       ├── Line.svelte
 │       ├── Select.svelte
@@ -125,6 +128,7 @@ snapline/
         ├── Engine.tsx
         ├── Node.tsx
         ├── Group.tsx
+        ├── ResizeRegion.tsx
         ├── Connector.tsx
         ├── Line.tsx
         ├── Select.tsx
@@ -195,8 +199,8 @@ requiring PascalCase for dynamic components):
 
 - Identity/DOM: `id`, `className`, `elementProps`, `nodeObject` (bindable)
 - Geometry: `x`, `y`, `width`, `height`
-- Resize: `resizable`, `minWidth`, `minHeight`, `resizeHandleThickness`,
-  `resizeHandles`, `resizeCursors`
+- Resize floor: `minWidth`, `minHeight`; opt in by rendering explicit
+  `ResizeRegion` children
 - Rendering: `LineSvelteComponent` (one renderer for all this node's lines),
   `resolveLineComponent(line)` (per-line override, resolved at render time)
 - Data: `metadata`, `resolveNewLine` (seeds payload onto a line this node's
@@ -373,11 +377,10 @@ inconsistent one.
 
 Everything SnapLine stores on the engine's shared `global.data` bag is declared
 in `core/src/internal/shared-data.ts` (`SnapLineSharedData`) and accessed through
-its typed helpers. It now holds only `resizeHandles` and `sourceSurfaces`
-(engine core's `input.ts` reads both duck-typed — it cannot import snapline —
-so keep the shapes in sync) plus the `graphRegistries` WeakMap keying each
-engine to its `GraphRegistry`. Selection, groups, and `resizingNode` are
-engine-scoped state on `GraphRegistry`, not global arrays.
+its typed helpers. It holds `sourceSurfaces` (engine core's `input.ts` reads
+the shape duck-typed — it cannot import snapline) plus the `graphRegistries`
+WeakMap keying each engine to its `GraphRegistry`. Selection, groups, and
+`resizingNode` are engine-scoped state on `GraphRegistry`, not global arrays.
 
 ### Pointer claims (camera blocking)
 
diff --git a/assets/snapline/core/README.md b/assets/snapline/core/README.md
index 89b3ff3..9272be2 100644
--- a/assets/snapline/core/README.md
+++ b/assets/snapline/core/README.md
@@ -2,7 +2,7 @@
 
 Framework-neutral node graph interaction primitives for SnapEngine.
 
-SnapLine provides draggable and resizable nodes, connector policy, SVG line
+SnapLine provides draggable nodes with explicit DOM resize regions, connector policy, SVG line
 geometry, rectangle selection, exclusive nested groups, engine queries, and
 headless palette placement. Applications retain ownership of graph documents,
 node types, validation, persistence, and styling.
@@ -23,6 +23,7 @@ implementation detail and must not be deep-imported.
 import {
   GroupNodeMirror,
   NodeMirror,
+  ResizeRegionMirror,
   getParentGroup,
   setGroupMembershipResolver,
 } from "@snap-engine/snapline";
@@ -31,6 +32,10 @@ import {
 After assigning a Vanilla-rendered element, call `remeasureDomGeometry()`. Svelte
 and React adapters perform that synchronization automatically.
 
+Resizing is opt-in: create a `ResizeRegionMirror` child and assign its DOM
+element. The application owns that element's hit area, position, cursor,
+hover behavior, and visuals.
+
 Live gesture geometry stays outside framework state. Nodes and groups write
 their retained element transforms and resize dimensions directly. Line,
 selection, and placement renderers register one imperative
diff --git a/assets/snapline/core/src/group.ts b/assets/snapline/core/src/group.ts
index 8cf35fe..9e20052 100644
--- a/assets/snapline/core/src/group.ts
+++ b/assets/snapline/core/src/group.ts
@@ -1,5 +1,10 @@
-import type { BaseObject, Engine, eventPosition } from "@snap-engine/core";
-import { NodeMirror, mergeConfig, type NodeConfig } from "./node";
+import {
+  mergeDefined,
+  type BaseObject,
+  type Engine,
+  type eventPosition,
+} from "@snap-engine/core";
+import { NodeMirror, type NodeConfig } from "./node";
 import { getGraphRegistry } from "./internal/shared-data";
 
 export interface GroupConfig extends NodeConfig {
@@ -226,8 +231,8 @@ export function setGroupMembershipResolver(
   };
 }
 
-// A resizable box with settled geometric membership. Membership is exclusive:
-// each node has one direct parent, while nested groups form a recursive tree.
+// A box with settled geometric membership. Membership is exclusive: each node
+// has one direct parent, while nested groups form a recursive tree.
 class GroupNodeMirror extends NodeMirror {
   #members: Set<NodeMirror> = new Set();
   #carry: NodeMirror[] = [];
@@ -241,11 +246,11 @@ class GroupNodeMirror extends NodeMirror {
     parent: BaseObject | null,
     config: GroupConfig = {},
   ) {
-    const merged = mergeConfig<GroupConfig>(
+    const merged = mergeDefined<GroupConfig>(
       { ...DEFAULT_GROUP_CONFIG },
       config,
     );
-    super(engine, parent, { ...merged, resizable: true });
+    super(engine, parent, merged);
     this.#groupConfig = merged;
     this.#groupCallbacks = merged.groupCallbacks ?? {};
     getGraphRegistry(this.engine).groups.push(this);
diff --git a/assets/snapline/core/src/index.ts b/assets/snapline/core/src/index.ts
index c8a0b7e..9816918 100644
--- a/assets/snapline/core/src/index.ts
+++ b/assets/snapline/core/src/index.ts
@@ -1,9 +1,4 @@
-export {
-  NodeMirror,
-  DEFAULT_RESIZE_CURSORS,
-  DEFAULT_RESIZE_HANDLE_THICKNESS,
-  RESIZE_HANDLES,
-} from "./node";
+export { NodeMirror, ResizeRegionMirror, RESIZE_HANDLES } from "./node";
 export type {
   NodeConfig,
   NodeCallbacks,
@@ -14,7 +9,6 @@ export type {
   NodeGeometry,
   ResolvedNodeDragPosition,
   NodeResizeEvent,
-  NodeResizeHandleEvent,
   NodeSelectionEvent,
   NodeSelectionModeEvent,
   ResizeHandle,
diff --git a/assets/snapline/core/src/internal/shared-data.ts b/assets/snapline/core/src/internal/shared-data.ts
index fc5d5b7..2a41c32 100644
--- a/assets/snapline/core/src/internal/shared-data.ts
+++ b/assets/snapline/core/src/internal/shared-data.ts
@@ -1,4 +1,3 @@
-import type { RectCollider } from "@snap-engine/core/collision";
 import type { eventPosition } from "@snap-engine/core";
 import { GraphRegistry } from "./graph-registry";
 
@@ -28,14 +27,11 @@ export interface SourceSurfaceOwner {
  * every reader/writer goes through the typed accessors below instead of
  * re-deriving the shape inline.
  *
- * NOTE for engine core: `input.ts#resolveResizeOwner` reads `resizeHandles`
- * and `input.ts#resolveSourceSurfaceOwner` reads `sourceSurfaces` duck-typed
- * (engine core cannot import snapline); keep their structural types in sync
- * with this declaration.
+ * NOTE for engine core: `input.ts#resolveSourceSurfaceOwner` reads
+ * `sourceSurfaces` duck-typed (engine core cannot import snapline); keep its
+ * structural type in sync with this declaration.
  */
 export interface SnapLineSharedData {
-  /** Registered resize hitboxes; input.ts routes pointerdowns over them. */
-  resizeHandles?: RectCollider[];
   /** Registered headless source surfaces; input.ts routes pointerdowns to them. */
   sourceSurfaces?: SourceSurfaceOwner[];
   /**
@@ -60,12 +56,6 @@ export function snapData(global: { data: any }): SnapLineSharedData {
   return global.data as SnapLineSharedData;
 }
 
-export function getResizeHandles(global: { data: any }): RectCollider[] {
-  const data = snapData(global);
-  if (!data.resizeHandles) data.resizeHandles = [];
-  return data.resizeHandles;
-}
-
 export function getSourceSurfaces(global: { data: any }): SourceSurfaceOwner[] {
   const data = snapData(global);
   if (!data.sourceSurfaces) data.sourceSurfaces = [];
diff --git a/assets/snapline/core/src/node.ts b/assets/snapline/core/src/node.ts
index fa53311..90a2d11 100644
--- a/assets/snapline/core/src/node.ts
+++ b/assets/snapline/core/src/node.ts
@@ -1,4 +1,4 @@
-import { BaseObject, ElementObject } from "@snap-engine/core";
+import { BaseObject, ElementObject, mergeDefined } from "@snap-engine/core";
 import { ConnectorMirror, resolveConnectorSourceAtPoint } from "./connector";
 import { LineMirror } from "./line";
 import type {
@@ -8,14 +8,9 @@ import type {
   dragProp,
   dragEndProp,
   eventPosition,
-  pointerMoveProp,
 } from "@snap-engine/core";
 import { RectCollider } from "@snap-engine/core/collision";
-import {
-  getGraphRegistry,
-  getResizeHandles,
-  snapData,
-} from "./internal/shared-data";
+import { getGraphRegistry } from "./internal/shared-data";
 import { mintDomainId } from "./internal/graph-registry";
 import type { NewLineResolver, SnapLineMetadata } from "./connector";
 import type { GeometryInvalidationObserver } from "./types";
@@ -33,17 +28,6 @@ export const RESIZE_HANDLES: readonly ResizeHandle[] = [
   "nw",
 ];
 
-export const DEFAULT_RESIZE_CURSORS: Readonly<Record<ResizeHandle, string>> = {
-  n: "ns-resize",
-  ne: "nesw-resize",
-  e: "ew-resize",
-  se: "nwse-resize",
-  s: "ns-resize",
-  sw: "nesw-resize",
-  w: "ew-resize",
-  nw: "nwse-resize",
-};
-
 export interface NodeConfig {
   /**
    * Stable application-facing identity (graph-global). Minted by SnapLine
@@ -52,19 +36,8 @@ export interface NodeConfig {
    */
   id?: string;
   lockPosition?: boolean;
-  /** Enables resize handles. All four sides and corners are enabled by default. */
-  resizable?: boolean;
   minWidth?: number;
   minHeight?: number;
-  /**
-   * Total thickness of each virtual edge/corner resize hitbox. Half of the
-   * hitbox sits inside the node boundary and half outside.
-   */
-  resizeHandleThickness?: number;
-  /** Enabled handles. `true` means all eight; an array enables only those handles. */
-  resizeHandles?: true | readonly ResizeHandle[];
-  /** Per-handle CSS cursor overrides. */
-  resizeCursors?: Partial<Record<ResizeHandle, string>>;
   metadata?: SnapLineMetadata;
   callbacks?: NodeCallbacks;
   /** Allows this node gesture to use the engine's configured edge pan. */
@@ -77,11 +50,6 @@ export interface NodeConfig {
   resolveNewLine?: NewLineResolver;
 }
 
-/** Shared by core hitboxes and adapter resize-handle visuals. */
-export const DEFAULT_RESIZE_HANDLE_THICKNESS = 14;
-
-// `id` is identity, not configuration — read once in the constructor, never
-// defaulted or merged.
 /**
  * Config with every defaultable field resolved. `resolveNewLine` stays
  * optional: it seeds application data, and there is no sensible default for
@@ -94,34 +62,17 @@ export type ResolvedNodeConfig = Required<
 
 const DEFAULT_NODE_CONFIG: ResolvedNodeConfig = {
   lockPosition: false,
-  resizable: false,
   minWidth: 0,
   minHeight: 0,
-  resizeHandleThickness: DEFAULT_RESIZE_HANDLE_THICKNESS,
-  resizeHandles: true,
-  resizeCursors: {},
   metadata: {},
   callbacks: {},
   edgePan: true,
 };
 
-/** Object-spread merge that ignores undefined values (adapters forward
- * possibly-undefined props, which must not shadow the defaults). */
-export function mergeConfig<T extends object>(
-  defaults: T,
-  config: Partial<T>,
-): T {
-  const merged = { ...defaults };
-  for (const key of Object.keys(config) as (keyof T)[]) {
-    const value = config[key];
-    if (value !== undefined) merged[key] = value as T[keyof T];
-  }
-  return merged;
-}
-
-/** Consumer policy and lifecycle surfaces. Callbacks receive event objects so
- * new context can be added without growing positional signatures. */
-/** One node's settled geometry — the app persists what it wants. */
+/**
+ * Node geometry maintained by SnapLine during drag or resize.
+ * After that, this is committed to the frontend framework.
+ */
 export interface NodeGeometry {
   node: NodeMirror;
   x: number;
@@ -130,8 +81,7 @@ export interface NodeGeometry {
   height: number;
 }
 
-/** Batched geometry observation: a group/multi-select drag stays one event
- * (every moved node in `nodes`); a resize reports a single entry. */
+/** Batched geometry observation for group/multi-select drag. */
 export interface GeometryChangeEvent {
   nodes: readonly NodeGeometry[];
 }
@@ -166,12 +116,6 @@ export interface NodeResizeEvent {
   height: number;
 }
 
-export interface NodeResizeHandleEvent {
-  node: NodeMirror;
-  handle: ResizeHandle | null;
-  cursor: string | null;
-}
-
 export interface NodeSelectionEvent {
   node: NodeMirror;
   selected: boolean;
@@ -193,186 +137,34 @@ export interface NodeLinesEvent {
 }
 
 export interface NodeCallbacks {
+  /** Determines if a drag gesture should start. */
   canStartDrag?: (event: NodePointerEvent) => boolean;
-  /** Resolves a proposed live node position before its world transform changes. */
+  /** Allow node position to be overridden during drag, e.g. to implement snap-to-grid. */
   resolveDragPosition?: (
     event: NodeDragPositionEvent,
   ) => ResolvedNodeDragPosition;
-  /** Consumer-defined pointer selection policy; SnapLine owns no modifier keys. */
+  /** Override if and how nodes get selected or deselected. */
   resolveSelectionMode?: (event: NodeSelectionModeEvent) => SelectionMode;
+  /** Called when selected status of a node changes. */
+  onSelectionChange?: (event: NodeSelectionEvent) => void;
   onDragStart?: (event: NodePointerEvent) => void;
   onDrag?: (event: NodePointerEvent) => void;
-  /** Settled geometry after a drag or resize — SnapLine owns live and
-   * settled position/size; the consumer may persist this observation, and
-   * ignoring it does not revert the mirror. */
-  onGeometryCommit?: (event: GeometryChangeEvent) => void;
-  onSelectionChange?: (event: NodeSelectionEvent) => void;
   /** Observes live size updates; core writes the retained element geometry. */
   onSizeChange?: (event: NodeResizeEvent) => void;
-  /** The resize handle currently hovered, or null after leaving it. */
-  onResizeHandleChange?: (event: NodeResizeHandleEvent) => void;
-  /** The set of outgoing lines changed — the adapter re-renders its line list. */
+  /**
+   * Called when drag or resize finishes.
+   * Frontend frameworks should read the committed geometry from the event
+   * and update its state accordingly.
+   */
+  onGeometryCommit?: (event: GeometryChangeEvent) => void;
+  /**
+   * Called when a line was added, removed, or changed.
+   * This differs from handleLineChangeRequest in that it can also be called
+   * for temporary lines that are not committed to application state.
+   */
   onLinesChanged?: (event: NodeLinesEvent) => void;
 }
 
-const CORNER_HANDLES = new Set<ResizeHandle>(["ne", "se", "sw", "nw"]);
-class ResizeHandleCollider extends RectCollider {
-  readonly handle: ResizeHandle;
-  readonly cursor: string;
-
-  constructor(
-    engine: any,
-    parent: NodeMirror,
-    handle: ResizeHandle,
-    cursor: string,
-  ) {
-    super(engine, parent, 0, 0, 0, 0);
-    this.handle = handle;
-    this.cursor = cursor;
-  }
-}
-
-class ResizeHoverController extends BaseObject {
-  #count = 0;
-  #node: NodeMirror | null = null;
-  #handle: ResizeHandleCollider | null = null;
-  #target: HTMLElement | null = null;
-  #previousNodeCursor = "";
-  #previousContainerCursor = "";
-  #previousTargetCursor = "";
-  // Whether this controller currently owns the cursor it wrote. Restoration is
-  // gated on it so clear() is idempotent and never clobbers a cursor the
-  // application set on the container itself.
-  #applied = false;
-
-  constructor(engine: any) {
-    super(engine, null);
-    this.event.global.pointerMove = this.#onPointerMove;
-  }
-
-  retain(): void {
-    this.#count++;
-  }
-
-  release(node: NodeMirror): void {
-    this.#count--;
-    if (this.#node === node) this.clear();
-    if (this.#count <= 0) {
-      resizeHoverControllers.delete(this.engine);
-      // destroy() clears, so a cursor written for some other node cannot be
-      // stranded on the container when the last node releases.
-      this.destroy();
-    }
-  }
-
-  activate(handle: ResizeHandleCollider, target?: EventTarget | null): void {
-    const node = handle.parent as NodeMirror;
-    const element = target instanceof HTMLElement ? target : null;
-    if (this.#handle === handle && this.#target === element) return;
-    this.#restoreCss();
-    const nodeElement = node.element;
-    const container = this.engine.containerElement as HTMLElement | null;
-    this.#node = node;
-    this.#handle = handle;
-    this.#target = element;
-    this.#previousNodeCursor = nodeElement?.style.cursor ?? "";
-    this.#previousContainerCursor = container?.style.cursor ?? "";
-    this.#previousTargetCursor = element?.style.cursor ?? "";
-    nodeElement?.setAttribute("data-snapline-resize-handle", handle.handle);
-    if (nodeElement) nodeElement.style.cursor = handle.cursor;
-    if (container) container.style.cursor = handle.cursor;
-    if (element) element.style.cursor = handle.cursor;
-    this.#applied = true;
-    node.callbacks.onResizeHandleChange?.({
-      node,
-      handle: handle.handle,
-      cursor: handle.cursor,
-    });
-  }
-
-  clear(): void {
-    const node = this.#node;
-    // Not gated on `node`: the container cursor outlives any single node, so
-    // restoring it must not depend on one still being tracked.
-    this.#restoreCss();
-    this.#node = null;
-    this.#handle = null;
-    this.#target = null;
-    node?.callbacks.onResizeHandleChange?.({
-      node,
-      handle: null,
-      cursor: null,
-    });
-  }
-
-  #restoreCss(): void {
-    if (!this.#applied) return;
-    this.#applied = false;
-    const nodeElement = this.#node?.element;
-    const container = this.engine.containerElement as HTMLElement | null;
-    nodeElement?.removeAttribute("data-snapline-resize-handle");
-    if (nodeElement) nodeElement.style.cursor = this.#previousNodeCursor;
-    if (container) container.style.cursor = this.#previousContainerCursor;
-    if (this.#target) this.#target.style.cursor = this.#previousTargetCursor;
-  }
-
-  #onPointerMove(prop: pointerMoveProp): void {
-    const handle = findResizeHandle(this.engine, prop.position);
-    if (!handle) {
-      this.clear();
-      return;
-    }
-    this.activate(handle, prop.event?.target);
-  }
-
-  destroy(): void {
-    // BaseObject.destroy does not unsubscribe global callbacks. Left attached,
-    // a destroyed controller keeps handling pointerMove, so a remount (HMR,
-    // React StrictMode) leaves two controllers writing the cursor — and the
-    // second captures the first's write as its "previous" value, permanently
-    // poisoning restoration.
-    this.event.global.pointerMove = null;
-    this.clear();
-    super.destroy();
-  }
-}
-
-const resizeHoverControllers = new WeakMap<object, ResizeHoverController>();
-
-function hoverController(engine: any): ResizeHoverController {
-  let controller = resizeHoverControllers.get(engine);
-  if (!controller) {
-    controller = new ResizeHoverController(engine);
-    resizeHoverControllers.set(engine, controller);
-  }
-  return controller;
-}
-
-function findResizeHandle(
-  engine: any,
-  position: eventPosition,
-  node?: NodeMirror,
-): ResizeHandleCollider | null {
-  let winner: ResizeHandleCollider | null = null;
-  for (const collider of getResizeHandles(engine.global)) {
-    if (
-      !(collider instanceof ResizeHandleCollider) ||
-      collider.engine !== engine
-    )
-      continue;
-    if (node && collider.parent !== node) continue;
-    if (!collider.containsWorldPoint(position.x, position.y)) continue;
-    if (
-      !winner ||
-      CORNER_HANDLES.has(collider.handle) ||
-      !CORNER_HANDLES.has(winner.handle)
-    ) {
-      winner = collider;
-    }
-  }
-  return winner;
-}
-
 class NodeMirror extends ElementObject {
   /** Stable domain identity — supplied via `NodeConfig.id` or minted. Never
    * the engine-internal `BaseObject.id`. */
@@ -388,10 +180,7 @@ class NodeMirror extends ElementObject {
   #mouseDownX: number;
   #mouseDownY: number;
   _hasMoved: boolean;
-  #resizeHitBoxes = new Map<ResizeHandle, ResizeHandleCollider>();
-  #resizeHandles: readonly ResizeHandle[];
-  #resizeHandleThickness: number;
-  #resizeHoverController: ResizeHoverController | null = null;
+  #resizeRegions = new Set<ResizeRegionMirror>();
   #activeResizeHandle: ResizeHandle | null = null;
   /** Read by GroupNodeMirror to distinguish a resize from a move drag. */
   #resizing = false;
@@ -419,21 +208,10 @@ class NodeMirror extends ElementObject {
 
   constructor(engine: any, parent: BaseObject | null, config: NodeConfig = {}) {
     super(engine, parent);
-    this.#config = mergeConfig(DEFAULT_NODE_CONFIG, config);
+    this.#config = mergeDefined(DEFAULT_NODE_CONFIG, config);
     this.#callbacks = this.#config.callbacks;
     this.nodeId = config.id ?? mintDomainId("node", this.global);
     getGraphRegistry(this.engine).registerNode(this);
-    const resizeEnabled =
-      config.resizable === true || config.resizeHandles !== undefined;
-    this.#resizeHandles = !resizeEnabled
-      ? []
-      : config.resizeHandles !== undefined
-        ? config.resizeHandles === true
-          ? RESIZE_HANDLES
-          : [...new Set(config.resizeHandles)]
-        : RESIZE_HANDLES;
-    this.#resizeHandleThickness =
-      config.resizeHandleThickness ?? DEFAULT_RESIZE_HANDLE_THICKNESS;
 
     this._connectors = {};
     this.#dragStartX = this.worldTransform.x;
@@ -450,26 +228,6 @@ class NodeMirror extends ElementObject {
     this.#hitBox = new RectCollider(this.engine, this, 0, 0, 0, 0);
     this.addCollider(this.#hitBox);
 
-    // Resize surfaces are virtual colliders. Engine input resolves them before
-    // DOM ownership, so handles can straddle the element and work for groups
-    // whose body intentionally has pointer-events:none.
-    if (this.#resizeHandles.length > 0) {
-      this.#resizeHoverController = hoverController(this.engine);
-      this.#resizeHoverController.retain();
-      for (const handle of this.#resizeHandles) {
-        const collider = new ResizeHandleCollider(
-          this.engine,
-          this,
-          handle,
-          this.#config.resizeCursors[handle] ?? DEFAULT_RESIZE_CURSORS[handle],
-        );
-        this.#resizeHitBoxes.set(handle, collider);
-        this.addCollider(collider);
-        getResizeHandles(this.global).push(collider);
-      }
-      this.#positionResizeHitBoxes(0, 0);
-    }
-
     this._hasMoved = false;
 
     // Whenever the DOM box changes size (ResizeObserver) re-measure + re-glue.
@@ -497,17 +255,19 @@ class NodeMirror extends ElementObject {
     return this.#config.metadata;
   }
 
-  get resizeHandles(): readonly ResizeHandle[] {
-    return this.#resizeHandles;
+  registerDragHandle(element: HTMLElement): () => void {
+    this.#dragHandles.add(element);
+    return () => this.#dragHandles.delete(element);
   }
 
-  get resizeHandleThickness(): number {
-    return this.#resizeHandleThickness;
+  /** @internal Tracks resize-region children for deterministic node teardown. */
+  attachResizeRegion(region: ResizeRegionMirror): void {
+    this.#resizeRegions.add(region);
   }
 
-  registerDragHandle(element: HTMLElement): () => void {
-    this.#dragHandles.add(element);
-    return () => this.#dragHandles.delete(element);
+  /** @internal Removes a resize-region child that is being destroyed. */
+  detachResizeRegion(region: ResizeRegionMirror): void {
+    this.#resizeRegions.delete(region);
   }
 
   /** The node's collision footprint (world = worldTransform + width/height).
@@ -608,10 +368,9 @@ class NodeMirror extends ElementObject {
     this.scheduleLineWrites();
   }
 
-  // Reconciles state with what the browser actually rendered: the node box, the
-  // resize hitboxes derived from it, and each connector's local center. Shared
-  // by the ResizeObserver (READ_1) and the post-write re-measure (READ_2) so the
-  // two cannot drift apart.
+  // Reconciles state with what the browser actually rendered: the node box and
+  // each connector's local center. Shared by the ResizeObserver (READ_1) and
+  // the post-write re-measure (READ_2) so the two cannot drift apart.
   #syncMeasuredGeometry(stage: "READ_1" | "READ_2"): void {
     if (!this.element) return;
     const property = this.readDom({ unapplyTransform: false }, stage);
@@ -624,7 +383,6 @@ class NodeMirror extends ElementObject {
     if (!this.#resizing) {
       this.#hitBox.width = property.width;
       this.#hitBox.height = property.height;
-      this.#positionResizeHitBoxes(property.width, property.height);
     }
     for (const connector of Object.values(this._connectors)) {
       connector.measureLocalCenter(stage);
@@ -683,8 +441,8 @@ class NodeMirror extends ElementObject {
   }
 
   // State-only half of a size change: clamps to min and synchronously updates
-  // the collision footprint + resize hitbox so hit testing and group
-  // containment stay correct mid-drag. `setSize` adds the scheduled DOM write;
+  // the collision footprint so hit testing and group containment stay correct
+  // mid-drag. `setSize` adds the scheduled DOM write;
   // adapters can use this method alone when seeding external dimensions.
   setSizeState(width: number, height: number): void {
     const w = Math.max(this.#config.minWidth, width);
@@ -697,7 +455,6 @@ class NodeMirror extends ElementObject {
     this.#hasAuthoredSize = true;
     this.#hitBox.width = w;
     this.#hitBox.height = h;
-    this.#positionResizeHitBoxes(w, h);
   }
 
   // Drives live resize geometry directly. The framework observes and persists
@@ -756,29 +513,6 @@ class NodeMirror extends ElementObject {
     this.writeTransformRecursive();
   }
 
-  #positionResizeHitBoxes(width: number, height: number): void {
-    const t = Math.max(0, this.#resizeHandleThickness);
-    const half = t / 2;
-    const horizontalLength = Math.max(0, width - t);
-    const verticalLength = Math.max(0, height - t);
-    const geometry: Record<ResizeHandle, [number, number, number, number]> = {
-      n: [half, -half, horizontalLength, t],
-      ne: [width - half, -half, t, t],
-      e: [width - half, half, t, verticalLength],
-      se: [width - half, height - half, t, t],
-      s: [half, height - half, horizontalLength, t],
-      sw: [-half, height - half, t, t],
-      w: [-half, half, t, verticalLength],
-      nw: [-half, -half, t, t],
-    };
-    for (const [handle, collider] of this.#resizeHitBoxes) {
-      const [x, y, colliderWidth, colliderHeight] = geometry[handle];
-      collider.localTransform = { x, y };
-      collider.width = colliderWidth;
-      collider.height = colliderHeight;
-    }
-  }
-
   // Applies one side/corner resize while keeping the opposite edges fixed.
   #applyResizeDrag(dx: number, dy: number): void {
     const handle = this.#activeResizeHandle;
@@ -837,42 +571,42 @@ class NodeMirror extends ElementObject {
       return;
     }
 
-    // Resize is a separate primitive from node dragging and remains available
-    // even when the consumer registered a narrow drag handle.
-    const resizeHandle = findResizeHandle(this.engine, e.position, this);
-    this.#resizeArmed = resizeHandle != null;
-    this.#activeResizeHandle = resizeHandle?.handle ?? null;
-    if (resizeHandle) {
-      this.#resizeHoverController?.activate(resizeHandle, e.event.target);
-    } else {
-      const source = resolveConnectorSourceAtPoint(
-        this.engine,
-        e.position,
-        this,
+    const source = resolveConnectorSourceAtPoint(this.engine, e.position, this);
+    if (source) {
+      this.engine.input.setPointerDragOwner(
+        e.event.pointerId,
+        source.candidate.connector,
       );
-      if (source) {
-        this.engine.input.setPointerDragOwner(
-          e.event.pointerId,
-          source.candidate.connector,
-        );
-        source.candidate.connector.armSurfaceGesture(e, source);
-        return;
-      }
+      source.candidate.connector.armSurfaceGesture(e, source);
+      return;
     }
     const target = e.event.target as Node | null;
     const dragAllowed =
-      this.#resizeArmed ||
-      ((this.#dragHandles.size === 0 ||
+      (this.#dragHandles.size === 0 ||
         [...this.#dragHandles].some(
           (handle) => target && handle.contains(target),
         )) &&
-        this.#callbacks.canStartDrag?.({
-          node: this,
-          pointerId: e.event.pointerId,
-          position: e.position,
-          originalEvent: e.event,
-        }) !== false);
+      this.#callbacks.canStartDrag?.({
+        node: this,
+        pointerId: e.event.pointerId,
+        position: e.position,
+        originalEvent: e.event,
+      }) !== false;
     if (!dragAllowed) return;
+    this.#authorizePointer(e);
+  }
+
+  /** @internal Called by a ResizeRegionMirror on pointer down. */
+  armResize(e: pointerDownProp, handle: ResizeHandle): void {
+    this.#dragPointerId = null;
+    if (e.event.button !== 0) return;
+    this.#resizeArmed = true;
+    this.#activeResizeHandle = handle;
+    this.engine.input.setPointerDragOwner(e.event.pointerId, this);
+    this.#authorizePointer(e);
+  }
+
+  #authorizePointer(e: pointerDownProp): void {
     this.#dragPointerId = e.event.pointerId;
 
     // Claim the pointer from the very first pointer event: waiting for the
@@ -1041,8 +775,7 @@ class NodeMirror extends ElementObject {
       // The teardown runs in `finally` because everything above it calls out:
       // #writeSizeGeometry touches the DOM and onGeometryCommit is consumer
       // code. A throw that skipped these resets would strand `resizingNode`,
-      // which permanently disables click-selection (see onUp), and would leave
-      // the resize cursor pinned with no path back to a hover recompute.
+      // which permanently disables click-selection (see onUp).
       try {
         this.#applyResizeDrag(
           prop.end.x - this.#mouseDownX,
@@ -1061,10 +794,6 @@ class NodeMirror extends ElementObject {
         this.#activeResizeHandle = null;
         getGraphRegistry(this.engine).resizingNode = null;
         this.#dragPointerId = null;
-        // No target element: dragEndProp carries no originating event. activate()
-        // still writes the node and container cursors, and the next pointermove
-        // re-activates with a target because #target differs.
-        this.#refreshResizeHover(prop.end);
       }
       // Settle #hitBox against what actually rendered. The gesture suppressed
       // that reconciliation, and the release write often authors the previous
@@ -1135,7 +864,7 @@ class NodeMirror extends ElementObject {
     if (this.#resizeArmed) {
       this.#resizeArmed = false;
       this.#activeResizeHandle = null;
-      this.#refreshResizeHover(prop.position, prop.event.target);
+      this.#dragPointerId = null;
       return;
     }
 
@@ -1179,15 +908,6 @@ class NodeMirror extends ElementObject {
     );
   }
 
-  #refreshResizeHover(
-    position: eventPosition,
-    target?: EventTarget | null,
-  ): void {
-    this.#resizeHoverController?.clear();
-    const handle = findResizeHandle(this.engine, position);
-    if (handle) this.#resizeHoverController?.activate(handle, target);
-  }
-
   destroy(removeElement: boolean = true) {
     if (this.#edgePanPointerId != null) {
       this.engine.edgePanController?.stopEdgePan(this.#edgePanPointerId);
@@ -1200,18 +920,55 @@ class NodeMirror extends ElementObject {
     }
     getGraphRegistry(this.engine).unregisterNode(this);
     this.setSelected(false);
-    if (this.#resizeHitBoxes.size > 0) {
-      const ownedHandles = new Set(this.#resizeHitBoxes.values());
-      snapData(this.global).resizeHandles = getResizeHandles(
-        this.global,
-      ).filter((handle) => !ownedHandles.has(handle as ResizeHandleCollider));
-      this.#resizeHoverController?.release(this);
-      this.#resizeHoverController = null;
-      this.#resizeHitBoxes.clear();
-    }
+    for (const region of [...this.#resizeRegions]) region.destroy(false);
+    this.#resizeRegions.clear();
     this._connectors = {};
     super.destroy(removeElement);
   }
 }
 
-export { NodeMirror };
+/**
+ * A developer-owned DOM resize surface represented as a normal SnapEngine
+ * child object. Assign its `element`; CSS and native hover behavior remain
+ * entirely application-owned.
+ */
+class ResizeRegionMirror extends ElementObject {
+  readonly handle: ResizeHandle;
+  readonly node: NodeMirror;
+
+  constructor(engine: any, node: NodeMirror, handle: ResizeHandle) {
+    if (!RESIZE_HANDLES.includes(handle)) {
+      throw new Error(`Unknown resize handle: ${handle}`);
+    }
+    super(engine, node);
+    this.node = node;
+    this.handle = handle;
+    this.transformMode = "none";
+    this.event.input.pointerDown = this.#onPointerDown;
+    this.event.input.pointerUp = this.#onPointerUp;
+    node.attachResizeRegion(this);
+  }
+
+  #onPointerDown(prop: pointerDownProp): void {
+    if (prop.event.button !== 0) return;
+    this.node.armResize(prop, this.handle);
+    try {
+      this.element?.setPointerCapture(prop.event.pointerId);
+    } catch {
+      // Pointer capture may fail if application code detached the region while
+      // handling pointerdown. Engine document routing still settles the gesture.
+    }
+  }
+
+  #onPointerUp(prop: pointerUpProp): void {
+    this.node.onUp(prop);
+  }
+
+  destroy(removeElement: boolean = true): void {
+    if (this.isDeleteRequested) return;
+    this.node.detachResizeRegion(this);
+    super.destroy(removeElement);
+  }
+}
+
+export { NodeMirror, ResizeRegionMirror };
diff --git a/assets/snapline/react/README.md b/assets/snapline/react/README.md
index d5685e1..2b9c539 100644
--- a/assets/snapline/react/README.md
+++ b/assets/snapline/react/README.md
@@ -11,9 +11,9 @@ npm install react react-dom @snap-engine/core \
 
 ## Components
 
-The package exports `Engine`, `Node`, `Group`, `Connector`, `Line`, `Select`,
-`Placement`, and `ControlledGraph`. Each component is also available from a
-named subpath.
+The package exports `Engine`, `Node`, `Group`, `ResizeRegion`, `Connector`,
+`Line`, `Select`, `Placement`, and `ControlledGraph`. Each component is also
+available from a named subpath.
 
 ```tsx
 import { Engine, Group, Node, Select } from "@snap-engine/snapline-react";
@@ -36,6 +36,9 @@ resynchronize after mount, and callback props remain live across renders.
 Pass native ARIA attributes or DOM event handlers to the outer node element
 through `Node`'s `elementProps`.
 
+Render explicit `ResizeRegion` children to opt into resizing. Their CSS owns
+the hit area, position, cursor, hover behavior, and visuals.
+
 Set `virtual` on `Connector` to keep the logical endpoint without rendering a
 port. `surfaceStrategies` can then hit-test and anchor against the parent
 node's shape, while symmetric `rules` limits enable source and target
diff --git a/assets/snapline/react/package.json b/assets/snapline/react/package.json
index b92e69a..71d19e2 100644
--- a/assets/snapline/react/package.json
+++ b/assets/snapline/react/package.json
@@ -14,6 +14,7 @@
     ".": "./src/index.ts",
     "./Engine": "./src/Engine.tsx",
     "./Node": "./src/Node.tsx",
+    "./ResizeRegion": "./src/ResizeRegion.tsx",
     "./Group": "./src/Group.tsx",
     "./Connector": "./src/Connector.tsx",
     "./Line": "./src/Line.tsx",
diff --git a/assets/snapline/react/src/Group.tsx b/assets/snapline/react/src/Group.tsx
index a644ac6..4e7331a 100644
--- a/assets/snapline/react/src/Group.tsx
+++ b/assets/snapline/react/src/Group.tsx
@@ -7,17 +7,16 @@ import {
   type ReactNode,
 } from "react";
 import {
-  DEFAULT_RESIZE_HANDLE_THICKNESS,
   GroupNodeMirror,
   type GroupCallbacks,
   type GroupContainEvent,
   type GroupMembershipEvent,
   type NodeCallbacks,
   type GeometryChangeEvent,
-  type ResizeHandle,
   type SnapLineMetadata,
 } from "@snap-engine/snapline";
 import { useSnapLineEngine } from "./Engine";
+import { NodeMirrorContext } from "./Node";
 
 export interface GroupProps {
   /** Stable domain identity; minted when omitted (supply for persistence). */
@@ -35,9 +34,6 @@ export interface GroupProps {
   height?: number;
   minWidth?: number;
   minHeight?: number;
-  resizeHandleThickness?: number;
-  resizeHandles?: true | readonly ResizeHandle[];
-  resizeCursors?: Partial<Record<ResizeHandle, string>>;
   metadata?: SnapLineMetadata;
   callbacks?: NodeCallbacks;
   groupCallbacks?: GroupCallbacks;
@@ -62,9 +58,6 @@ export const Group = forwardRef<GroupNodeMirror, GroupProps>(function Group(
     height = 300,
     minWidth,
     minHeight,
-    resizeHandleThickness,
-    resizeHandles,
-    resizeCursors,
     metadata = {},
     callbacks = {},
     groupCallbacks = {},
@@ -87,9 +80,6 @@ export const Group = forwardRef<GroupNodeMirror, GroupProps>(function Group(
       height,
       minWidth,
       minHeight,
-      resizeHandleThickness,
-      resizeHandles,
-      resizeCursors,
       metadata,
       callbacks: {},
       groupCallbacks: {},
@@ -171,12 +161,6 @@ export const Group = forwardRef<GroupNodeMirror, GroupProps>(function Group(
         originalCallbacks.onSelectionChange,
         latestRef.current.callbacks.onSelectionChange,
       );
-    group.callbacks.onResizeHandleChange = (event) =>
-      invoke(
-        event,
-        originalCallbacks.onResizeHandleChange,
-        latestRef.current.callbacks.onResizeHandleChange,
-      );
     group.groupCallbacks.onMembershipChange = (event) =>
       invoke(
         event,
@@ -219,8 +203,6 @@ export const Group = forwardRef<GroupNodeMirror, GroupProps>(function Group(
       group.callbacks.onDrag = originalCallbacks.onDrag;
       group.callbacks.onGeometryCommit = originalCallbacks.onGeometryCommit;
       group.callbacks.onSelectionChange = originalCallbacks.onSelectionChange;
-      group.callbacks.onResizeHandleChange =
-        originalCallbacks.onResizeHandleChange;
       group.callbacks.onSizeChange = originalCallbacks.onSizeChange;
       group.groupCallbacks.onMembershipChange =
         originalGroupCallbacks.onMembershipChange;
@@ -242,55 +224,32 @@ export const Group = forwardRef<GroupNodeMirror, GroupProps>(function Group(
     group.scheduleGeometryWrite();
   }, [group, x, y, width, height]);
 
-  const handleSize = resizeHandleThickness ?? DEFAULT_RESIZE_HANDLE_THICKNESS;
   return (
-    <div
-      ref={boxDomRef}
-      data-snapline-type="group"
-      className={`snapline-group ${className}`}
-      style={{
-        position: "absolute",
-        transformOrigin: "top left",
-        willChange: "transform",
-        boxSizing: "border-box",
-        pointerEvents: "none",
-        width: `${initialSize.width}px`,
-        height: `${initialSize.height}px`,
-        ...style,
-      }}
-    >
-      <header
-        ref={headerRef}
-        data-snapline-part="group-header"
-        style={{ pointerEvents: "auto", cursor: "grab" }}
+    <NodeMirrorContext.Provider value={group}>
+      <div
+        ref={boxDomRef}
+        data-snapline-type="group"
+        className={`snapline-group ${className}`}
+        style={{
+          position: "absolute",
+          transformOrigin: "top left",
+          willChange: "transform",
+          boxSizing: "border-box",
+          pointerEvents: "none",
+          width: `${initialSize.width}px`,
+          height: `${initialSize.height}px`,
+          ...style,
+        }}
       >
-        {headerContent ?? <span>{title}</span>}
-      </header>
-      <div style={{ pointerEvents: "none" }}>{children}</div>
-      {group.resizeHandles.map((handle) => (
-        <div
-          key={handle}
-          data-snapline-part="group-resize"
-          data-handle={handle}
-          style={{
-            position: "absolute",
-            pointerEvents: "none",
-            ...(handle === "n" || handle === "s"
-              ? { left: handleSize, right: handleSize, height: handleSize }
-              : null),
-            ...(handle === "e" || handle === "w"
-              ? { top: handleSize, bottom: handleSize, width: handleSize }
-              : null),
-            ...(handle.length === 2
-              ? { width: handleSize, height: handleSize }
-              : null),
-            ...(handle.startsWith("n") ? { top: -handleSize / 2 } : null),
-            ...(handle.startsWith("s") ? { bottom: -handleSize / 2 } : null),
-            ...(handle.endsWith("e") ? { right: -handleSize / 2 } : null),
-            ...(handle.endsWith("w") ? { left: -handleSize / 2 } : null),
-          }}
-        />
-      ))}
-    </div>
+        <header
+          ref={headerRef}
+          data-snapline-part="group-header"
+          style={{ pointerEvents: "auto", cursor: "grab" }}
+        >
+          {headerContent ?? <span>{title}</span>}
+        </header>
+        <div style={{ pointerEvents: "none" }}>{children}</div>
+      </div>
+    </NodeMirrorContext.Provider>
   );
 });
diff --git a/assets/snapline/react/src/Node.tsx b/assets/snapline/react/src/Node.tsx
index 00b0d44..d590f5b 100644
--- a/assets/snapline/react/src/Node.tsx
+++ b/assets/snapline/react/src/Node.tsx
@@ -13,10 +13,8 @@ import {
   type ReactNode,
 } from "react";
 import {
-  DEFAULT_RESIZE_HANDLE_THICKNESS,
   LineMirror,
   NodeMirror,
-  type ResizeHandle,
   type NewLineResolver,
   type NodeCallbacks,
   type GeometryChangeEvent,
@@ -58,12 +56,8 @@ export interface NodeProps {
   y?: number;
   width?: number;
   height?: number;
-  resizable?: boolean;
   minWidth?: number;
   minHeight?: number;
-  resizeHandleThickness?: number;
-  resizeHandles?: true | readonly ResizeHandle[];
-  resizeCursors?: Partial<Record<ResizeHandle, string>>;
   metadata?: SnapLineMetadata;
   callbacks?: NodeCallbacks;
   edgePan?: boolean;
@@ -87,12 +81,8 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
     y = 0,
     width,
     height,
-    resizable = false,
     minWidth,
     minHeight,
-    resizeHandleThickness,
-    resizeHandles,
-    resizeCursors,
     metadata = {},
     callbacks = {},
     edgePan = true,
@@ -109,12 +99,8 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
   if (!nodeRef.current) {
     nodeRef.current = new NodeMirror(engine, null, {
       id,
-      resizable,
       minWidth,
       minHeight,
-      resizeHandleThickness,
-      resizeHandles,
-      resizeCursors,
       metadata,
       callbacks: {},
       edgePan,
@@ -170,8 +156,7 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
     };
     node.callbacks.resolveDragPosition = (event) =>
       latestRef.current.callbacks.resolveDragPosition?.(event) ??
-      original.resolveDragPosition?.(event) ??
-      { x: event.x, y: event.y };
+      original.resolveDragPosition?.(event) ?? { x: event.x, y: event.y };
     node.callbacks.resolveSelectionMode = (event) =>
       latestRef.current.callbacks.resolveSelectionMode?.(event) ??
       original.resolveSelectionMode?.(event) ??
@@ -190,12 +175,6 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
         original.onSelectionChange,
         latestRef.current.callbacks.onSelectionChange,
       );
-    node.callbacks.onResizeHandleChange = (event) =>
-      invoke(
-        event,
-        original.onResizeHandleChange,
-        latestRef.current.callbacks.onResizeHandleChange,
-      );
     node.callbacks.onLinesChanged = (event) => {
       invoke(
         event,
@@ -230,7 +209,6 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
       node.callbacks.onDrag = original.onDrag;
       node.callbacks.onGeometryCommit = original.onGeometryCommit;
       node.callbacks.onSelectionChange = original.onSelectionChange;
-      node.callbacks.onResizeHandleChange = original.onResizeHandleChange;
       node.callbacks.onLinesChanged = original.onLinesChanged;
       node.callbacks.onSizeChange = original.onSizeChange;
       if (ownsNodeRef.current) {
@@ -256,8 +234,6 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
     node.remeasureDomGeometry();
   }, [node, width, height]);
 
-  const handleSize =
-    resizeHandleThickness ?? DEFAULT_RESIZE_HANDLE_THICKNESS;
   return (
     <NodeMirrorContext.Provider value={node}>
       {lineList.map((line) => (
@@ -283,30 +259,6 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
         }}
       >
         {children}
-        {node.resizeHandles.map((handle) => (
-          <div
-            key={handle}
-            data-snapline-part="node-resize"
-            data-handle={handle}
-            style={{
-              position: "absolute",
-              pointerEvents: "none",
-              ...(handle === "n" || handle === "s"
-                ? { left: handleSize, right: handleSize, height: handleSize }
-                : null),
-              ...(handle === "e" || handle === "w"
-                ? { top: handleSize, bottom: handleSize, width: handleSize }
-                : null),
-              ...(handle.length === 2
-                ? { width: handleSize, height: handleSize }
-                : null),
-              ...(handle.startsWith("n") ? { top: -handleSize / 2 } : null),
-              ...(handle.startsWith("s") ? { bottom: -handleSize / 2 } : null),
-              ...(handle.endsWith("e") ? { right: -handleSize / 2 } : null),
-              ...(handle.endsWith("w") ? { left: -handleSize / 2 } : null),
-            }}
-          />
-        ))}
       </div>
     </NodeMirrorContext.Provider>
   );
diff --git a/assets/snapline/react/src/ResizeRegion.tsx b/assets/snapline/react/src/ResizeRegion.tsx
new file mode 100644
index 0000000..97918ff
--- /dev/null
+++ b/assets/snapline/react/src/ResizeRegion.tsx
@@ -0,0 +1,64 @@
+import {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { ResizeRegionMirror, type ResizeHandle } from "@snap-engine/snapline";
+import { NodeMirrorContext } from "./Node";
+
+export interface ResizeRegionProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  handle: ResizeHandle;
+  children?: ReactNode;
+}
+
+export const ResizeRegion = forwardRef<ResizeRegionMirror, ResizeRegionProps>(
+  function ResizeRegion({ handle, children, style, ...elementProps }, ref) {
+    const node = useContext(NodeMirrorContext);
+    if (!node) {
+      throw new Error("ResizeRegion must be rendered inside a Node or Group.");
+    }
+
+    const elementRef = useRef<HTMLDivElement>(null);
+    const [region] = useState(
+      () => new ResizeRegionMirror(node.engine, node, handle),
+    );
+    if (region.node !== node || region.handle !== handle) {
+      throw new Error(
+        "ResizeRegion owner and handle cannot change after mounting; remount it with a new key.",
+      );
+    }
+
+    useImperativeHandle(ref, () => region, [region]);
+
+    useLayoutEffect(() => {
+      if (elementRef.current) region.element = elementRef.current;
+      const boundElement = elementRef.current;
+      return () => {
+        if (boundElement) region.detachElement(boundElement);
+        region.destroy(false);
+      };
+    }, [region]);
+
+    return (
+      <div
+        {...elementProps}
+        ref={elementRef}
+        data-snapline-part="resize-region"
+        data-handle={handle}
+        style={{
+          ...style,
+          pointerEvents: "auto",
+          touchAction: "none",
+        }}
+      >
+        {children}
+      </div>
+    );
+  },
+);
diff --git a/assets/snapline/react/src/index.ts b/assets/snapline/react/src/index.ts
index e620806..a549f0c 100644
--- a/assets/snapline/react/src/index.ts
+++ b/assets/snapline/react/src/index.ts
@@ -13,6 +13,8 @@ export { Line } from "./Line";
 export type { LineProps } from "./Line";
 export { Node, NodeMirrorContext, useNodeHandle } from "./Node";
 export type { NodeProps } from "./Node";
+export { ResizeRegion } from "./ResizeRegion";
+export type { ResizeRegionProps } from "./ResizeRegion";
 export { Select } from "./Select";
 export type { SelectProps } from "./Select";
 export { Placement } from "./Placement";
diff --git a/assets/snapline/svelte/README.md b/assets/snapline/svelte/README.md
index d3f0074..1069887 100644
--- a/assets/snapline/svelte/README.md
+++ b/assets/snapline/svelte/README.md
@@ -11,10 +11,11 @@ npm install @snap-engine/core @snap-engine/snapline \
 
 ## Components
 
-`Node`, `Group`, `Connector`, `Line`, `Select`, `Placement`, and `ControlledGraph` are exported
-from the package root. Component subpaths are also available as
-`Node.svelte`, `Group.svelte`, `Connector.svelte`, `Line.svelte`,
-`Select.svelte`, `Placement.svelte`, and `ControlledGraph.svelte`.
+`Node`, `Group`, `ResizeRegion`, `Connector`, `Line`, `Select`, `Placement`,
+and `ControlledGraph` are exported from the package root. Component subpaths
+are also available as `Node.svelte`, `Group.svelte`, `ResizeRegion.svelte`,
+`Connector.svelte`, `Line.svelte`, `Select.svelte`, `Placement.svelte`, and
+`ControlledGraph.svelte`.
 
 ```svelte
 <script lang="ts">
@@ -34,6 +35,9 @@ Consumer callbacks compose with the adapter's rendering callbacks.
 Pass framework-native ARIA attributes or DOM event handlers to the outer node
 element through `Node`'s `elementProps`.
 
+Render explicit `ResizeRegion` children to opt into resizing. Their CSS owns
+the hit area, position, cursor, hover behavior, and visuals.
+
 `<Connector virtual>` creates a logical connector without a visible port.
 Combine it with `surfaceStrategies` and symmetric `rules` limits to make a
 node border or another application-defined shape act as the connection surface.
diff --git a/assets/snapline/svelte/package.json b/assets/snapline/svelte/package.json
index ad7f580..24546c8 100644
--- a/assets/snapline/svelte/package.json
+++ b/assets/snapline/svelte/package.json
@@ -16,6 +16,7 @@
       "svelte": "./src/index.ts"
     },
     "./Node.svelte": "./src/Node.svelte",
+    "./ResizeRegion.svelte": "./src/ResizeRegion.svelte",
     "./Group.svelte": "./src/Group.svelte",
     "./Connector.svelte": "./src/Connector.svelte",
     "./Line.svelte": "./src/Line.svelte",
diff --git a/assets/snapline/svelte/src/Group.svelte b/assets/snapline/svelte/src/Group.svelte
index e453f42..e8c6035 100644
--- a/assets/snapline/svelte/src/Group.svelte
+++ b/assets/snapline/svelte/src/Group.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { GroupNodeMirror, DEFAULT_RESIZE_HANDLE_THICKNESS, type GroupCallbacks, type GroupContainEvent, type GroupMembershipEvent, type GeometryChangeEvent, type ResizeHandle, type SnapLineMetadata } from "@snap-engine/snapline";
+    import { GroupNodeMirror, type GroupCallbacks, type GroupContainEvent, type GroupMembershipEvent, type GeometryChangeEvent, type SnapLineMetadata } from "@snap-engine/snapline";
     import type { Engine } from "@snap-engine/core";
-    import { onMount, onDestroy, getContext, tick, untrack, type Snippet } from "svelte";
+    import { onMount, onDestroy, getContext, setContext, tick, untrack, type Snippet } from "svelte";
+    import { resizeRegionOwnerContext } from "./resize-region-context";
 
     let {
         id = undefined,
@@ -16,9 +17,6 @@
         // Min sizes default in core (DEFAULT_GROUP_CONFIG); undefined passes through.
         minWidth = undefined,
         minHeight = undefined,
-        resizeHandleThickness = undefined,
-        resizeHandles = undefined,
-        resizeCursors = undefined,
         metadata = {},
         callbacks = {},
         groupCallbacks = {},
@@ -41,9 +39,6 @@
         headerContent?: Snippet;
         minWidth?: number;
         minHeight?: number;
-        resizeHandleThickness?: number;
-        resizeHandles?: true | readonly ResizeHandle[];
-        resizeCursors?: Partial<Record<ResizeHandle, string>>;
         metadata?: SnapLineMetadata;
         callbacks?: import("@snap-engine/snapline").NodeCallbacks;
         groupCallbacks?: GroupCallbacks;
@@ -59,8 +54,9 @@
     let engine: Engine = getContext("engine");
     const ownsGroup = groupObject == null;
     if (!groupObject) {
-        groupObject = new GroupNodeMirror(engine, null, { id, width, height, minWidth, minHeight, resizeHandleThickness, resizeHandles, resizeCursors, metadata, callbacks: {}, groupCallbacks: {}, canContain, edgePan });
+        groupObject = new GroupNodeMirror(engine, null, { id, width, height, minWidth, minHeight, metadata, callbacks: {}, groupCallbacks: {}, canContain, edgePan });
     }
+    setContext(resizeRegionOwnerContext, groupObject);
 
     // Snapshot, not a reactive binding: after mount the engine owns the size, and
     // a second writer on the same property is what splits it from the transform.
@@ -112,8 +108,6 @@
             invoke(event, originalCallbacks.onDrag, callbacks.onDrag);
         groupObject!.callbacks.onSelectionChange = (event) =>
             invoke(event, originalCallbacks.onSelectionChange, callbacks.onSelectionChange);
-        groupObject!.callbacks.onResizeHandleChange = (event) =>
-            invoke(event, originalCallbacks.onResizeHandleChange, callbacks.onResizeHandleChange);
         groupObject!.groupCallbacks.onMembershipChange = (event) =>
             invoke(event, originalGroupCallbacks.onMembershipChange, groupCallbacks.onMembershipChange, onMembershipChange);
         // Resize is handled by the core edge/corner hitboxes and writes live size
@@ -148,7 +142,6 @@
         groupObject!.callbacks.onDrag = originalCallbacks.onDrag;
         groupObject!.callbacks.onGeometryCommit = originalCallbacks.onGeometryCommit;
         groupObject!.callbacks.onSelectionChange = originalCallbacks.onSelectionChange;
-        groupObject!.callbacks.onResizeHandleChange = originalCallbacks.onResizeHandleChange;
         groupObject!.callbacks.onSizeChange = originalCallbacks.onSizeChange;
         groupObject!.groupCallbacks.onMembershipChange = originalGroupCallbacks.onMembershipChange;
         if (ownsGroup) groupObject!.destroy(false);
@@ -192,19 +185,10 @@
     <div class="snapline-group-body">
         {@render children?.()}
     </div>
-    {#each groupObject.resizeHandles as handle}
-    <div
-        class="snapline-group-resize"
-        data-snapline-part="group-resize"
-        data-handle={handle}
-        style:--snapline-resize-thickness={`${resizeHandleThickness ?? DEFAULT_RESIZE_HANDLE_THICKNESS}px`}
-    ></div>
-    {/each}
 </div>
 
 <style>
-    /* The box sits behind its members and must not steal their pointer events:
-       only the header (move surface) is interactive; the resize hitbox is virtual. */
+    /* The box sits behind its members and must not steal their pointer events. */
     .snapline-group {
         box-sizing: border-box;
         pointer-events: none;
@@ -216,35 +200,4 @@
     .snapline-group-body {
         pointer-events: none;
     }
-    .snapline-group-resize {
-        position: absolute;
-        pointer-events: none;
-    }
-    .snapline-group-resize[data-handle="n"],
-    .snapline-group-resize[data-handle="s"] {
-        right: var(--snapline-resize-thickness);
-        left: var(--snapline-resize-thickness);
-        height: var(--snapline-resize-thickness);
-    }
-    .snapline-group-resize[data-handle="e"],
-    .snapline-group-resize[data-handle="w"] {
-        top: var(--snapline-resize-thickness);
-        bottom: var(--snapline-resize-thickness);
-        width: var(--snapline-resize-thickness);
-    }
-    .snapline-group-resize[data-handle="n"],
-    .snapline-group-resize[data-handle^="n"] { top: calc(var(--snapline-resize-thickness) / -2); }
-    .snapline-group-resize[data-handle="s"],
-    .snapline-group-resize[data-handle^="s"] { bottom: calc(var(--snapline-resize-thickness) / -2); }
-    .snapline-group-resize[data-handle="e"],
-    .snapline-group-resize[data-handle$="e"] { right: calc(var(--snapline-resize-thickness) / -2); }
-    .snapline-group-resize[data-handle="w"],
-    .snapline-group-resize[data-handle$="w"] { left: calc(var(--snapline-resize-thickness) / -2); }
-    .snapline-group-resize[data-handle="ne"],
-    .snapline-group-resize[data-handle="se"],
-    .snapline-group-resize[data-handle="sw"],
-    .snapline-group-resize[data-handle="nw"] {
-        width: var(--snapline-resize-thickness);
-        height: var(--snapline-resize-thickness);
-    }
 </style>
diff --git a/assets/snapline/svelte/src/Node.svelte b/assets/snapline/svelte/src/Node.svelte
index caa9de2..61ef560 100644
--- a/assets/snapline/svelte/src/Node.svelte
+++ b/assets/snapline/svelte/src/Node.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-    import { NodeMirror, LineMirror, DEFAULT_RESIZE_HANDLE_THICKNESS, type NodeCallbacks, type NewLineResolver, type GeometryChangeEvent, type NodeResizeEvent, type ResizeHandle, type SnapLineMetadata } from "@snap-engine/snapline";
+    import { NodeMirror, LineMirror, type NodeCallbacks, type NewLineResolver, type GeometryChangeEvent, type NodeResizeEvent, type SnapLineMetadata } from "@snap-engine/snapline";
     import type { Engine } from "@snap-engine/core";
     import Line from "./Line.svelte";
     import { onMount, setContext, getContext, onDestroy, tick, untrack } from "svelte";
     import type { HTMLAttributes } from "svelte/elements";
     import { blur } from "svelte/transition";
+    import { resizeRegionOwnerContext } from "./resize-region-context";
 
     let {
         id = undefined,
@@ -17,12 +18,8 @@
         y = 0,
         width = undefined,
         height = undefined,
-        resizable = false,
         minWidth = undefined,
         minHeight = undefined,
-        resizeHandleThickness = undefined,
-        resizeHandles = undefined,
-        resizeCursors = undefined,
         metadata = {},
         callbacks = {},
         edgePan = true,
@@ -56,12 +53,8 @@
         y?: number;
         width?: number;
         height?: number;
-        resizable?: boolean;
         minWidth?: number;
         minHeight?: number;
-        resizeHandleThickness?: number;
-        resizeHandles?: true | readonly ResizeHandle[];
-        resizeCursors?: Partial<Record<ResizeHandle, string>>;
         metadata?: SnapLineMetadata;
         callbacks?: NodeCallbacks;
         edgePan?: boolean;
@@ -75,7 +68,7 @@
     let engine: Engine = getContext("engine");
     const ownsNode = nodeObject == null;
     if (!nodeObject) {
-         nodeObject = new NodeMirror(engine, null, { id, resizable, minWidth, minHeight, resizeHandleThickness, resizeHandles, resizeCursors, metadata, callbacks: {}, edgePan, resolveNewLine });
+         nodeObject = new NodeMirror(engine, null, { id, minWidth, minHeight, metadata, callbacks: {}, edgePan, resolveNewLine });
     }
     let lineList: LineMirror[] = $state(nodeObject.getAllOutgoingLines());
 
@@ -95,6 +88,7 @@
     }
 
     setContext("nodeObject", nodeObject);
+    setContext(resizeRegionOwnerContext, nodeObject);
 
     onMount(() => {
         mounted = true;
@@ -126,8 +120,6 @@
             invoke(event, originalCallbacks.onDrag, callbacks.onDrag);
         nodeObject.callbacks.onSelectionChange = (event) =>
             invoke(event, originalCallbacks.onSelectionChange, callbacks.onSelectionChange);
-        nodeObject.callbacks.onResizeHandleChange = (event) =>
-            invoke(event, originalCallbacks.onResizeHandleChange, callbacks.onResizeHandleChange);
         nodeObject.callbacks.onGeometryCommit = (event) =>
             invoke(event, originalCallbacks.onGeometryCommit, callbacks.onGeometryCommit, onGeometryCommit);
         nodeObject.callbacks.onSizeChange = (event) => {
@@ -152,7 +144,6 @@
         nodeObject.callbacks.onDrag = originalCallbacks.onDrag;
         nodeObject.callbacks.onGeometryCommit = originalCallbacks.onGeometryCommit;
         nodeObject.callbacks.onSelectionChange = originalCallbacks.onSelectionChange;
-        nodeObject.callbacks.onResizeHandleChange = originalCallbacks.onResizeHandleChange;
         nodeObject.callbacks.onLinesChanged = originalCallbacks.onLinesChanged;
         nodeObject.callbacks.onSizeChange = originalCallbacks.onSizeChange;
         if (ownsNode) {
@@ -212,47 +203,4 @@
     transition:blur|global={{duration: 200}}
 >
     {@render children()}
-    {#each nodeObject.resizeHandles as handle}
-        <div
-            class="snapline-node-resize"
-            data-snapline-part="node-resize"
-            data-handle={handle}
-            style:--snapline-resize-thickness={`${resizeHandleThickness ?? DEFAULT_RESIZE_HANDLE_THICKNESS}px`}
-        ></div>
-    {/each}
 </div>
-
-
-<style>
-    .snapline-node-resize {
-        position: absolute;
-        pointer-events: none;
-    }
-    .snapline-node-resize[data-handle="n"],
-    .snapline-node-resize[data-handle="s"] {
-        right: var(--snapline-resize-thickness);
-        left: var(--snapline-resize-thickness);
-        height: var(--snapline-resize-thickness);
-    }
-    .snapline-node-resize[data-handle="e"],
-    .snapline-node-resize[data-handle="w"] {
-        top: var(--snapline-resize-thickness);
-        bottom: var(--snapline-resize-thickness);
-        width: var(--snapline-resize-thickness);
-    }
-    .snapline-node-resize[data-handle="n"],
-    .snapline-node-resize[data-handle^="n"] { top: calc(var(--snapline-resize-thickness) / -2); }
-    .snapline-node-resize[data-handle="s"],
-    .snapline-node-resize[data-handle^="s"] { bottom: calc(var(--snapline-resize-thickness) / -2); }
-    .snapline-node-resize[data-handle="e"],
-    .snapline-node-resize[data-handle$="e"] { right: calc(var(--snapline-resize-thickness) / -2); }
-    .snapline-node-resize[data-handle="w"],
-    .snapline-node-resize[data-handle$="w"] { left: calc(var(--snapline-resize-thickness) / -2); }
-    .snapline-node-resize[data-handle="ne"],
-    .snapline-node-resize[data-handle="se"],
-    .snapline-node-resize[data-handle="sw"],
-    .snapline-node-resize[data-handle="nw"] {
-        width: var(--snapline-resize-thickness);
-        height: var(--snapline-resize-thickness);
-    }
-</style>
diff --git a/assets/snapline/svelte/src/ResizeRegion.svelte b/assets/snapline/svelte/src/ResizeRegion.svelte
new file mode 100644
index 0000000..7c8dcbb
--- /dev/null
+++ b/assets/snapline/svelte/src/ResizeRegion.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { ResizeRegionMirror, type ResizeHandle } from "@snap-engine/snapline";
+    import { getContext, onDestroy, onMount, type Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import { resizeRegionOwnerContext, type ResizeRegionOwner } from "./resize-region-context";
+
+    let {
+        handle,
+        children = undefined,
+        style = undefined,
+        ...elementProps
+    }: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        handle: ResizeHandle;
+        children?: Snippet;
+    } = $props();
+
+    const node = getContext<ResizeRegionOwner>(resizeRegionOwnerContext);
+    if (!node) {
+        throw new Error("ResizeRegion must be rendered inside a Node or Group.");
+    }
+
+    const region = new ResizeRegionMirror(node.engine, node, handle);
+    let element: HTMLDivElement | null = null;
+
+    onMount(() => {
+        region.element = element;
+    });
+
+    onDestroy(() => {
+        if (element) region.detachElement(element);
+        region.destroy(false);
+    });
+
+    export function getResizeRegionObject() {
+        return region;
+    }
+</script>
+
+<div
+    {...elementProps}
+    bind:this={element}
+    data-snapline-part="resize-region"
+    data-handle={handle}
+    {style}
+    style:pointer-events="auto"
+    style:touch-action="none"
+>
+    {@render children?.()}
+</div>
diff --git a/assets/snapline/svelte/src/index.ts b/assets/snapline/svelte/src/index.ts
index 7831b53..a445150 100644
--- a/assets/snapline/svelte/src/index.ts
+++ b/assets/snapline/svelte/src/index.ts
@@ -1,4 +1,5 @@
 export { default as Node } from "./Node.svelte";
+export { default as ResizeRegion } from "./ResizeRegion.svelte";
 export { default as Group } from "./Group.svelte";
 export { default as Connector } from "./Connector.svelte";
 export { default as Line } from "./Line.svelte";
diff --git a/assets/snapline/svelte/src/resize-region-context.ts b/assets/snapline/svelte/src/resize-region-context.ts
new file mode 100644
index 0000000..3739f08
--- /dev/null
+++ b/assets/snapline/svelte/src/resize-region-context.ts
@@ -0,0 +1,4 @@
+import type { NodeMirror } from "@snap-engine/snapline";
+
+export const resizeRegionOwnerContext = Symbol("snapline-resize-region-owner");
+export type ResizeRegionOwner = NodeMirror;
diff --git a/demo/react/src/App.jsx b/demo/react/src/App.jsx
index 77ae32e..008c773 100644
--- a/demo/react/src/App.jsx
+++ b/demo/react/src/App.jsx
@@ -3,9 +3,10 @@ import {
   ControlledGraph,
   Group,
   Node,
+  ResizeRegion,
   Select,
 } from "@snap-engine/snapline-react";
-import { applyLineChange } from "@snap-engine/snapline";
+import { applyLineChange, RESIZE_HANDLES } from "@snap-engine/snapline";
 import { useCallback, useRef, useState } from "react";
 import { Engine as SnapEngine } from "@snap-engine/asset-base-react";
 import {
@@ -39,7 +40,6 @@ function ResizableNode({ title, id = title, x, y }) {
       className="card node"
       x={x}
       y={y}
-      resizable
       minWidth={140}
       minHeight={90}
       style={{ display: "flex", flexDirection: "column" }}
@@ -73,10 +73,59 @@ function ResizableNode({ title, id = title, x, y }) {
           </div>
         </div>
       </div>
+      <ResizeRegions />
     </Node>
   );
 }
 
+function ResizeRegions({ handles = RESIZE_HANDLES }) {
+  const thickness = 14;
+  return handles.map((handle) => {
+    const north = handle.startsWith("n");
+    const south = handle.startsWith("s");
+    const east = handle.endsWith("e");
+    const west = handle.endsWith("w");
+    const corner = handle.length === 2;
+    return (
+      <ResizeRegion
+        key={handle}
+        handle={handle}
+        style={{
+          position: "absolute",
+          zIndex: 2,
+          ...(handle === "n" || handle === "s"
+            ? {
+                left: thickness,
+                right: thickness,
+                height: thickness,
+                cursor: "ns-resize",
+              }
+            : null),
+          ...(handle === "e" || handle === "w"
+            ? {
+                top: thickness,
+                bottom: thickness,
+                width: thickness,
+                cursor: "ew-resize",
+              }
+            : null),
+          ...(corner ? { width: thickness, height: thickness } : null),
+          ...(north ? { top: -thickness / 2 } : null),
+          ...(south ? { bottom: -thickness / 2 } : null),
+          ...(east ? { right: -thickness / 2 } : null),
+          ...(west ? { left: -thickness / 2 } : null),
+          ...(handle === "ne" || handle === "sw"
+            ? { cursor: "nesw-resize" }
+            : null),
+          ...(handle === "nw" || handle === "se"
+            ? { cursor: "nwse-resize" }
+            : null),
+        }}
+      />
+    );
+  });
+}
+
 function SnapLineResizeDemo() {
   return (
     <main className="snapline-demo">
@@ -118,7 +167,9 @@ function SnapLineGroupDemo() {
               borderRadius: "8px",
             }}
             onMembershipChange={updateMembers}
-          />
+          >
+            <ResizeRegions handles={["se"]} />
+          </Group>
           <SimpleNode title="Node A" x={100} y={110} />
           <SimpleNode title="Node C" x={100} y={300} />
           <SimpleNode title="Node B" x={640} y={120} />
diff --git a/demo/svelte/src/demo/node_ui_edges/EdgeNode.svelte b/demo/svelte/src/demo/node_ui_edges/EdgeNode.svelte
index 7574698..d8032d8 100644
--- a/demo/svelte/src/demo/node_ui_edges/EdgeNode.svelte
+++ b/demo/svelte/src/demo/node_ui_edges/EdgeNode.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { Node, Connector, Line } from "@snap-engine/snapline-svelte";
+    import { Node, Connector, Line, ResizeRegion } from "@snap-engine/snapline-svelte";
 
-    let { nodeId, title, x = 0, y = 0, maxIncoming = 1, resizable = false } = $props();
+    let { nodeId, title, x = 0, y = 0, maxIncoming = 1, canResize = false } = $props();
 </script>
 
 <Node
@@ -9,13 +9,18 @@
     LineSvelteComponent={Line}
     {x}
     {y}
-    {resizable}
     minWidth={160}
     minHeight={110}
 >
     <div class="node-header">
         <h3>{title}</h3>
     </div>
+    {#if canResize}
+        <ResizeRegion
+            handle="se"
+            style="position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;cursor:nwse-resize;"
+        />
+    {/if}
     <div class="node-body">
         <div class="input-row">
             <div class="connector-wrapper">
diff --git a/demo/svelte/src/demo/node_ui_edges/NodeUIEdgesDemo.svelte b/demo/svelte/src/demo/node_ui_edges/NodeUIEdgesDemo.svelte
index 185ca9e..44e127d 100644
--- a/demo/svelte/src/demo/node_ui_edges/NodeUIEdgesDemo.svelte
+++ b/demo/svelte/src/demo/node_ui_edges/NodeUIEdgesDemo.svelte
@@ -159,7 +159,7 @@
       x={440}
       y={170}
       maxIncoming={1}
-      resizable
+      canResize
     />
     {#if showNodeC}
       <EdgeNode nodeId="c" title="Node C" x={280} y={380} />
diff --git a/demo/svelte/src/demo/node_ui_group/NodeUIGroupDemo.svelte b/demo/svelte/src/demo/node_ui_group/NodeUIGroupDemo.svelte
index ede8dfd..30758d2 100644
--- a/demo/svelte/src/demo/node_ui_group/NodeUIGroupDemo.svelte
+++ b/demo/svelte/src/demo/node_ui_group/NodeUIGroupDemo.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Engine } from "@snap-engine/asset-base-svelte";
-  import { Group } from "@snap-engine/snapline-svelte";
+  import { Group, ResizeRegion } from "@snap-engine/snapline-svelte";
   import SimpleNode from "../node_ui_demo/SimpleNode.svelte";
 
   // The framework hands the member NodeMirror to these callbacks; a consumer
@@ -29,7 +29,9 @@
       width={520}
       height={460}
       {onMembershipChange}
-    />
+    >
+      <ResizeRegion handle="se" class="group-resize-region" />
+    </Group>
     <SimpleNode title="Node A" x={100} y={110} />
     <SimpleNode title="Node C" x={100} y={300} />
     <SimpleNode title="Node B" x={640} y={120} />
@@ -57,7 +59,13 @@
     border-radius: 8px 8px 0 0;
     font: 600 13px sans-serif;
   }
-  :global(.snapline-group-resize) {
+  :global(.group-resize-region) {
+    position: absolute;
+    right: -7px;
+    bottom: -7px;
+    width: 14px;
+    height: 14px;
+    cursor: nwse-resize;
     background: rgb(120 160 255 / 60%);
     border-radius: 0 0 8px 0;
   }
diff --git a/demo/svelte/src/demo/node_ui_resize/NodeUIResizeDemo.svelte b/demo/svelte/src/demo/node_ui_resize/NodeUIResizeDemo.svelte
index ffcb8af..5b7bb01 100644
--- a/demo/svelte/src/demo/node_ui_resize/NodeUIResizeDemo.svelte
+++ b/demo/svelte/src/demo/node_ui_resize/NodeUIResizeDemo.svelte
@@ -3,18 +3,19 @@
   import DemoGraph from "../node_ui_demo/DemoGraph.svelte";
   import ResizableNode from "./ResizableNode.svelte";
   import SimpleNode from "../node_ui_demo/SimpleNode.svelte";
+  import { RESIZE_HANDLES } from "@snap-engine/snapline";
 </script>
 
 <Engine id="node-ui-resize-canvas">
   <div id="node-ui-resize">
     <div id="sl-background"></div>
     <DemoGraph />
-    <!-- Node A is resizable (BR hitbox); Node B is a plain fixed node. Connect
+    <!-- Node A has explicit DOM resize regions; Node B is a plain fixed node. Connect
          A's output to B's input, then resize A: its output connector moves and
          the line must stay glued. -->
-    <ResizableNode title="Resizable A" x={120} y={140} resizable />
+    <ResizableNode title="Resizable A" x={120} y={140} handles={RESIZE_HANDLES} />
     <SimpleNode title="Fixed B" x={560} y={200} />
-    <ResizableNode title="TL Anchor C" x={340} y={480} resizable resizeHandles={["nw"]} />
+    <ResizableNode title="TL Anchor C" x={340} y={480} handles={["nw"]} />
   </div>
 </Engine>
 
diff --git a/demo/svelte/src/demo/node_ui_resize/ResizableNode.svelte b/demo/svelte/src/demo/node_ui_resize/ResizableNode.svelte
index 0f21c1f..77a6bf0 100644
--- a/demo/svelte/src/demo/node_ui_resize/ResizableNode.svelte
+++ b/demo/svelte/src/demo/node_ui_resize/ResizableNode.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-    import { Node, Connector, Line } from "@snap-engine/snapline-svelte";
+    import { Node, Connector, Line, ResizeRegion } from "@snap-engine/snapline-svelte";
+    import type { ResizeHandle } from "@snap-engine/snapline";
 
-    let { title = "Node", id = title, x = 0, y = 0, resizable = false, resizeHandles = undefined } = $props();
+    let { title = "Node", id = title, x = 0, y = 0, handles = [] }:
+        { title?: string; id?: string; x?: number; y?: number; handles?: readonly ResizeHandle[] } = $props();
     let nodeComponent: any = $state(null);
 </script>
 
@@ -11,8 +13,6 @@
     LineSvelteComponent={Line}
     {x}
     {y}
-    {resizable}
-    {resizeHandles}
     minWidth={140}
     minHeight={90}
 >
@@ -27,6 +27,9 @@
             <div class="cw"><Connector id={`${id}:output`} name="output" rules={{ maxIncoming: 0 }} /></div>
         </div>
     </div>
+    {#each handles as handle}
+        <ResizeRegion {handle} class="resize-region" />
+    {/each}
 </Node>
 
 <style>
@@ -39,7 +42,6 @@
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
         display: flex;
         flex-direction: column;
-        overflow: hidden;
     }
     .rnode-header {
         padding: 8px 10px;
@@ -72,8 +74,42 @@
         width: 14px;
         height: 14px;
     }
-    :global(.rnode .snapline-node-resize) {
-        background: rgb(80 130 255 / 55%);
-        border-radius: 0 0 8px 0;
+    :global(.rnode .resize-region) {
+        --thickness: 14px;
+        position: absolute;
+        z-index: 2;
+    }
+    :global(.rnode .resize-region[data-handle="n"]),
+    :global(.rnode .resize-region[data-handle="s"]) {
+        left: var(--thickness);
+        right: var(--thickness);
+        height: var(--thickness);
+        cursor: ns-resize;
+    }
+    :global(.rnode .resize-region[data-handle="e"]),
+    :global(.rnode .resize-region[data-handle="w"]) {
+        top: var(--thickness);
+        bottom: var(--thickness);
+        width: var(--thickness);
+        cursor: ew-resize;
+    }
+    :global(.rnode .resize-region[data-handle^="n"]) { top: calc(var(--thickness) / -2); }
+    :global(.rnode .resize-region[data-handle^="s"]) { bottom: calc(var(--thickness) / -2); }
+    :global(.rnode .resize-region[data-handle$="e"]) { right: calc(var(--thickness) / -2); }
+    :global(.rnode .resize-region[data-handle$="w"]) { left: calc(var(--thickness) / -2); }
+    :global(.rnode .resize-region[data-handle="ne"]),
+    :global(.rnode .resize-region[data-handle="se"]),
+    :global(.rnode .resize-region[data-handle="sw"]),
+    :global(.rnode .resize-region[data-handle="nw"]) {
+        width: var(--thickness);
+        height: var(--thickness);
+    }
+    :global(.rnode .resize-region[data-handle="ne"]),
+    :global(.rnode .resize-region[data-handle="sw"]) {
+        cursor: nesw-resize;
+    }
+    :global(.rnode .resize-region[data-handle="nw"]),
+    :global(.rnode .resize-region[data-handle="se"]) {
+        cursor: nwse-resize;
     }
 </style>
diff --git a/docs/snapline/design/current-architecture.md b/docs/snapline/design/current-architecture.md
index a6de60c..794567e 100644
--- a/docs/snapline/design/current-architecture.md
+++ b/docs/snapline/design/current-architecture.md
@@ -327,10 +327,9 @@ same registry reads and were removed.
 
 `SnapLineSharedData` (typed by `internal/shared-data.ts`) now holds only:
 
-- `resizeHandles` and `sourceSurfaces` — engine core's `input.ts` duck-reads
-  these to route pointerdowns to resize hitboxes and headless source
-  surfaces (engine core cannot import snapline, so the contract is
-  structural and lives on the shared bag);
+- `sourceSurfaces` — engine core's `input.ts` duck-reads this to route
+  pointerdowns to headless connector surfaces (engine core cannot import
+  snapline, so the contract is structural and lives on the shared bag);
 - the `graphRegistries` WeakMap keying each engine to its `GraphRegistry`
   (GlobalManager is application-wide; the WeakMap lets a destroyed engine
   release its registry);
diff --git a/docs/snapline/design/migration-notes.md b/docs/snapline/design/migration-notes.md
index 7fe7dbc..f92cc21 100644
--- a/docs/snapline/design/migration-notes.md
+++ b/docs/snapline/design/migration-notes.md
@@ -137,3 +137,19 @@ per settled drag (every moved node of a group/multi-select drag in one
 event) or resize (single entry). SnapLine owns live and settled geometry;
 persist the observation if you want it back after a reload — ignoring it
 never reverts the mirror.
+
+## Resize regions
+
+Generated virtual resize hitboxes were removed. Delete `resizable`,
+`resizeHandles`, `resizeHandleThickness`, and `resizeCursors`; also remove
+`onResizeHandleChange`, `DEFAULT_RESIZE_CURSORS`, and
+`DEFAULT_RESIZE_HANDLE_THICKNESS`.
+
+React and Svelte consumers now render one explicit `<ResizeRegion
+handle="...">` for each supported direction. Vanilla consumers create a
+`ResizeRegionMirror`, parented to their `NodeMirror`, and assign its DOM
+element. The region DOM owns its size, position, cursor, hover behavior, and
+visuals. No region means resizing is disabled.
+
+The separate `../lab` repository still contains examples using the removed
+generated-handle API and must migrate independently.
diff --git a/docs/snapline/guides/02_selection_resize.mdx b/docs/snapline/guides/02_selection_resize.mdx
index 7c864b1..ad7cf86 100644
--- a/docs/snapline/guides/02_selection_resize.mdx
+++ b/docs/snapline/guides/02_selection_resize.mdx
@@ -31,7 +31,9 @@ For a rubber band, `"add"` preserves the baseline selection while adding the
 nodes touched by the rectangle. `"toggle"` inverts touched nodes relative to
 that baseline. Membership in a group never selects a node.
 
-Set `resizable` to enable all eight handles, or pass an exact list:
+Resizing exists only where you render a DOM `ResizeRegion`. Its element is the
+actual hit area, so CSS determines its placement, thickness, cursor, and
+appearance:
 
 ```svelte framework=svelte
 <Node
@@ -39,9 +41,12 @@ Set `resizable` to enable all eight handles, or pass an exact list:
   y={node.y}
   width={node.width}
   height={node.height}
-  resizeHandles={["e", "se", "s"]}
   onGeometryCommit={(event) => saveGeometry(event)}
-/>
+>
+  <ResizeRegion handle="e" class="resize-e" />
+  <ResizeRegion handle="se" class="resize-se" />
+  <ResizeRegion handle="s" class="resize-s" />
+</Node>
 ```
 
 ```tsx framework=react
@@ -50,11 +55,19 @@ Set `resizable` to enable all eight handles, or pass an exact list:
   y={node.y}
   width={node.width}
   height={node.height}
-  resizeHandles={["e", "se", "s"]}
   onGeometryCommit={saveGeometry}
-/>
+>
+  <ResizeRegion handle="e" className="resize-e" />
+  <ResizeRegion handle="se" className="resize-se" />
+  <ResizeRegion handle="s" className="resize-s" />
+</Node>
 ```
 
+The component only enforces `pointer-events: auto` and `touch-action: none`.
+It stamps `data-snapline-part="resize-region"` and `data-handle`, but supplies
+no layout or cursor defaults. A region may contain its own visible control, and
+multiple regions may use the same handle direction.
+
 SnapLine owns live and settled geometry — position and size are visual cues
 that never wait for an application render; changed props still resynchronize
 the object deliberately. Persist final values from the batched
diff --git a/docs/snapline/guides/05_state_styling_accessibility.mdx b/docs/snapline/guides/05_state_styling_accessibility.mdx
index bd57955..e5e02b6 100644
--- a/docs/snapline/guides/05_state_styling_accessibility.mdx
+++ b/docs/snapline/guides/05_state_styling_accessibility.mdx
@@ -22,7 +22,7 @@ canonical document.
 Adapters expose stable attributes including:
 
 - `data-snapline-type="node|connector|connector-line|group|selection|placement-preview"`
-- `data-snapline-part="group-header|group-resize|node-resize"`
+- `data-snapline-part="group-header|resize-region"`
 - `data-handle="n|ne|e|se|s|sw|w|nw"`
 - `data-selected="true|false"`
 - `data-snapline-state="focus|idle"` (written alongside `data-selected`)
diff --git a/docs/snapline/reference/react/node.mdx b/docs/snapline/reference/react/node.mdx
index 351c3d4..a1ca0bf 100644
--- a/docs/snapline/reference/react/node.mdx
+++ b/docs/snapline/reference/react/node.mdx
@@ -1,6 +1,6 @@
 ---
 title: Node API
-description: React Node props, callbacks, resize configuration, ref, and hooks.
+description: React Node props, callbacks, geometry, ref, and hooks.
 order: 2
 sectionTitle: Reference
 sectionOrder: 3
@@ -16,11 +16,7 @@ frameworkKey: node
 | `id` | Stable domain identity; minted when omitted — supply it for persistence |
 | `nodeObject` | Adopt an existing `NodeMirror` instead of creating one |
 | `x`, `y`, `width`, `height` | World geometry; changed props resynchronize the object |
-| `resizable` | Enable resize handles (default `false`) |
 | `minWidth`, `minHeight` | Resize floor |
-| `resizeHandles` | `true` for all handles, or a subset of `"n" \| "ne" \| "e" \| "se" \| "s" \| "sw" \| "w" \| "nw"` |
-| `resizeHandleThickness` | Handle hit area in pixels (default 14) |
-| `resizeCursors` | Per-handle cursor overrides |
 | `metadata` | `SnapLineMetadata` attached to the node |
 | `callbacks` | `NodeCallbacks` object (drag, selection, resize, lines) |
 | `onGeometryCommit` | Convenience callback; batched final geometry for persistence |
@@ -35,6 +31,10 @@ frameworkKey: node
 `useNodeHandle()` returns a callback ref that marks an element as the node's
 dedicated drag surface.
 
+Resizing is opt-in by composition: render a `ResizeRegion` descendant for
+each direction you support. The region is the real DOM hit area; position,
+dimensions, cursor, visuals, and native hover events are application-owned.
+
 Callback props stay current across renders and compose with callbacks already
 present on a supplied core object. During a live pointer gesture, core writes
 retained element geometry directly; the batched `onGeometryCommit` reports
diff --git a/docs/snapline/reference/svelte/node.mdx b/docs/snapline/reference/svelte/node.mdx
index 9b10fb6..5710d58 100644
--- a/docs/snapline/reference/svelte/node.mdx
+++ b/docs/snapline/reference/svelte/node.mdx
@@ -1,6 +1,6 @@
 ---
 title: Node API
-description: Svelte Node props, callbacks, resize configuration, and object access.
+description: Svelte Node props, callbacks, geometry, and object access.
 order: 2
 sectionTitle: Reference
 sectionOrder: 3
@@ -16,11 +16,7 @@ frameworkKey: node
 | `id` | Stable domain identity; minted when omitted — supply it for persistence |
 | `nodeObject` | Adopt an existing `NodeMirror` instead of creating one |
 | `x`, `y`, `width`, `height` | World geometry; changed props resynchronize the object |
-| `resizable` | Enable resize handles (default `false`) |
 | `minWidth`, `minHeight` | Resize floor |
-| `resizeHandles` | `true` for all handles, or a subset of `"n" \| "ne" \| "e" \| "se" \| "s" \| "sw" \| "w" \| "nw"` |
-| `resizeHandleThickness` | Handle hit area in pixels (default 14) |
-| `resizeCursors` | Per-handle cursor overrides |
 | `metadata` | `SnapLineMetadata` attached to the node |
 | `callbacks` | `NodeCallbacks` object (drag, selection, resize, lines) |
 | `onGeometryCommit` | Convenience callback; batched final geometry for persistence |
@@ -34,6 +30,10 @@ frameworkKey: node
 `getNodeObject()` returns the underlying `NodeMirror`. A supplied `nodeObject`
 is not destroyed on unmount.
 
+Resizing is opt-in by composition: render a `ResizeRegion` descendant for
+each direction you support. The region is the real DOM hit area; position,
+dimensions, cursor, visuals, and native hover events are application-owned.
+
 Convenience callbacks compose with their `callbacks`-object equivalents rather
 than replacing them. During a live pointer gesture, core writes retained
 element geometry directly; the batched `onGeometryCommit` reports final
diff --git a/docs/snapline/reference/vanilla/node.mdx b/docs/snapline/reference/vanilla/node.mdx
index ba49fc4..f835576 100644
--- a/docs/snapline/reference/vanilla/node.mdx
+++ b/docs/snapline/reference/vanilla/node.mdx
@@ -1,6 +1,6 @@
 ---
 title: Node API
-description: Core NodeMirror configuration, callbacks, resize constants, and data attributes.
+description: Core NodeMirror configuration, callbacks, resize regions, and data attributes.
 order: 2
 sectionTitle: Reference
 sectionOrder: 3
@@ -13,23 +13,25 @@ connectors. Construct it with `new NodeMirror(engine, parent, config)`, assign
 its committed element, then call `remeasureDomGeometry()`.
 
 `NodeConfig` accepts `id` (stable domain identity — minted when omitted;
-supply it for persistence), `resizable`, `minWidth`, `minHeight`,
-`resizeHandles`, `resizeHandleThickness`, `resizeCursors`, `metadata`,
-`callbacks`, and `edgePan`.
+supply it for persistence), `minWidth`, `minHeight`, `metadata`, `callbacks`,
+and `edgePan`.
 
 `NodeCallbacks` covers drag (`canStartDrag`, `resolveDragPosition`,
 `onDragStart`, `onDrag`), selection (`resolveSelectionMode`,
-`onSelectionChange`), resize (`onResizeHandleChange`, `onSizeChange`), lines
+`onSelectionChange`), resize (`onSizeChange`), lines
 (`onLinesChanged`), and the batched `onGeometryCommit` used for
 persistence.
 
-## Resize constants
+## Resize regions
+
+Create a `ResizeRegionMirror(engine, node, handle)` for each application DOM
+region, then assign its `element`. It is a normal `ElementObject` child of the
+node. The DOM owns hover, cursor, placement, thickness, border interaction,
+and visuals; SnapLine owns only the resize gesture and geometry.
 
 | Export | Value |
 | --- | --- |
 | `RESIZE_HANDLES` | The eight handles `"n" \| "ne" \| "e" \| "se" \| "s" \| "sw" \| "w" \| "nw"` |
-| `DEFAULT_RESIZE_CURSORS` | Per-handle CSS cursor map |
-| `DEFAULT_RESIZE_HANDLE_THICKNESS` | `14` (pixels) |
 
 ## Data attributes
 
diff --git a/src/index.ts b/src/index.ts
index 03144ad..6803bf5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,7 +24,12 @@ import type {
   InputControlConfig,
   eventPosition,
 } from "./input";
-import { getDomProperty, cloneDomProperty, EventProxyFactory } from "./util";
+import {
+  getDomProperty,
+  cloneDomProperty,
+  EventProxyFactory,
+  mergeDefined,
+} from "./util";
 import { Camera } from "./camera";
 import type { CameraConfig } from "./camera";
 
@@ -40,6 +45,7 @@ export {
   getDomProperty,
   cloneDomProperty,
   EventProxyFactory,
+  mergeDefined,
   type pointerDownProp,
   type pointerMoveProp,
   type pointerUpProp,
diff --git a/src/input.ts b/src/input.ts
index ed2c2d5..b1bfe2a 100644
--- a/src/input.ts
+++ b/src/input.ts
@@ -533,9 +533,8 @@ class InputControl {
 
     const position = this.#getCoordinates(event.clientX, event.clientY);
     const domOwner = this.#getTargetOwner(event);
-    // A visible connector is an explicit hit target and takes precedence over
-    // any wider virtual surface beneath it. Other DOM owners (nodes, camera
-    // layers, backgrounds) yield to a matching headless source surface.
+    // A visible connector is an explicit hit target. Other DOM owners (nodes,
+    // camera layers, backgrounds) yield to a matching headless source surface.
     const visibleConnectorOwner =
       domOwner &&
       typeof (
@@ -545,12 +544,8 @@ class InputControl {
       ).resolveSourceHit === "function"
         ? domOwner
         : null;
-    // A resize-hitbox hit supersedes the DOM owner under it, and covers the case
-    // where the pointer is inside the (virtual) hitbox but outside the node's DOM
-    // box (so DOM routing would miss it). Explicit `object` still wins.
     const owner =
       object ??
-      this.#resolveResizeOwner(position) ??
       visibleConnectorOwner ??
       this.#resolveSourceSurfaceOwner(position) ??
       domOwner;
@@ -1010,31 +1005,6 @@ class InputControl {
     }
   }
 
-  // Colliders never appear in composedPath, so a registered resize hitbox is
-  // resolved geometrically: if the pointerdown is inside one, the owner is the
-  // hitbox's object (collider.parent), so the whole gesture flows to it through
-  // the normal owner dispatch. Synchronous point test — independent of the
-  // frame-delayed collision sweep. The registry shape is declared in
-  // snapline's internal/shared-data.ts (engine core cannot import snapline, hence
-  // the structural type here) — keep the two in sync.
-  #resolveResizeOwner(position: eventPosition): ElementObject | null {
-    const handles = this.global?.data?.resizeHandles as
-      | Array<{
-          engine: unknown;
-          parent: unknown;
-          containsWorldPoint(x: number, y: number): boolean;
-        }>
-      | undefined;
-    if (!handles) return null;
-    for (const collider of handles) {
-      if (collider.engine !== this.#engine) continue;
-      if (collider.containsWorldPoint(position.x, position.y)) {
-        return collider.parent as ElementObject;
-      }
-    }
-    return null;
-  }
-
   // Headless connector surfaces can extend beyond their parent node's DOM box.
   // SnapLine registers them in global.data so pointerdown ownership can be
   // resolved geometrically before composedPath routing. The registry shape is
@@ -1139,11 +1109,11 @@ class InputControl {
       return true;
     }
 
-    // Some interaction owners are deliberately headless. Virtual connectors,
-    // resize handles, and similar surfaces are selected geometrically by a
-    // DOM-backed parent and then explicitly assigned with
-    // setPointerDragOwner(). They still belong to the engine even though they
-    // do not have an element to discover through composedPath().
+    // Some interaction owners are deliberately headless. Virtual connectors
+    // and similar surfaces are selected geometrically by a DOM-backed parent
+    // and then explicitly assigned with setPointerDragOwner(). They still
+    // belong to the engine even though they do not have an element to discover
+    // through composedPath().
     //
     // Keep DOM hit discovery separate (#getTargetOwner still only walks the
     // element map), but allow direct dispatch to a live object registered with
diff --git a/src/util.ts b/src/util.ts
index 9f7a970..5bc6768 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,5 +1,20 @@
 import type { DomProperty, TransformProperty } from "./object";
 
+/**
+ * Merges defined override values onto a complete defaults object.
+ *
+ * Unlike object spread, an explicit `undefined` does not replace a default.
+ * Other falsy values such as `false`, `0`, `""`, and `null` are preserved.
+ */
+function mergeDefined<T extends object>(defaults: T, overrides: Partial<T>): T {
+  const merged = { ...defaults };
+  for (const key of Object.keys(overrides) as (keyof T)[]) {
+    const value = overrides[key];
+    if (value !== undefined) merged[key] = value as T[keyof T];
+  }
+  return merged;
+}
+
 /**
  * Retrieves the position and dimensions of a DOM element in multiple coordinate spaces.
  *
@@ -209,4 +224,5 @@ export {
   cloneDomProperty,
   generateTransformString,
   parseTransformString,
+  mergeDefined,
 };
diff --git a/tests/e2e/snapline-group.spec.ts b/tests/e2e/snapline-group.spec.ts
index c39744e..09baef4 100644
--- a/tests/e2e/snapline-group.spec.ts
+++ b/tests/e2e/snapline-group.spec.ts
@@ -25,7 +25,7 @@ async function dragFromTo(
 const NODE = "[data-snapline-type='node']";
 const MEMBER = "[data-member='true']";
 const HEADER = "[data-snapline-part='group-header']";
-const RESIZE = "[data-snapline-part='group-resize'][data-handle='se']";
+const RESIZE = "[data-snapline-part='resize-region'][data-handle='se']";
 
 function nodeByTitle(page: Page, title: string): Locator {
   return page.locator(NODE, { hasText: title });
diff --git a/tests/e2e/snapline-resize.spec.ts b/tests/e2e/snapline-resize.spec.ts
index 30caa17..03269a6 100644
--- a/tests/e2e/snapline-resize.spec.ts
+++ b/tests/e2e/snapline-resize.spec.ts
@@ -1,7 +1,6 @@
 import { expect, test, type Locator, type Page } from "@playwright/test";
 
-// JS-driven node resize (SnapLine core): a virtual CircleCollider hitbox at the
-// node's bottom-right corner. Pressing+dragging it resizes the node, and every
+// JS-driven node resize starts from developer-rendered DOM regions. Every
 // resize re-glues the node's connector lines (same handling as a move + a size
 // re-measure).
 
@@ -200,6 +199,9 @@ test("a north drag holds the bottom edge with one pointermove per animation fram
     const element = [
       ...document.querySelectorAll<HTMLElement>("[data-snapline-type='node']"),
     ].find((node) => node.textContent?.includes("Resizable A"))!;
+    const region = element.querySelector<HTMLElement>(
+      "[data-snapline-part='resize-region'][data-handle='n']",
+    )!;
     const rect = element.getBoundingClientRect();
     const x = Math.round(rect.left + rect.width / 2);
     const top = Math.round(rect.top + 2);
@@ -218,7 +220,7 @@ test("a north drag holds the bottom edge with one pointermove per animation fram
     });
 
     const send = (type: string, clientY: number) =>
-      element.dispatchEvent(
+      region.dispatchEvent(
         new PointerEvent(type, {
           bubbles: true,
           cancelable: true,
@@ -267,18 +269,15 @@ test("a north drag holds the bottom edge with one pointermove per animation fram
   expect(Math.max(...bottoms) - Math.min(...bottoms)).toBeLessThanOrEqual(2);
 });
 
-test("hovering virtual resize surfaces applies and restores the CSS cursor", async ({
-  page,
-}) => {
+test("resize regions own their native CSS cursor", async ({ page }) => {
   const nodeA = page.locator("[data-snapline-type='node']", {
     hasText: "Resizable A",
   });
-  const box = (await nodeA.boundingBox())!;
-  await page.mouse.move(box.x + box.width - 2, box.y + box.height / 2);
-  await expect(nodeA).toHaveAttribute("data-snapline-resize-handle", "e");
-  await expect(nodeA).toHaveCSS("cursor", "ew-resize");
-
-  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  const east = nodeA.locator(
+    "[data-snapline-part='resize-region'][data-handle='e']",
+  );
+  await east.hover();
+  await expect(east).toHaveCSS("cursor", "ew-resize");
   await expect(nodeA).not.toHaveAttribute("data-snapline-resize-handle");
 });
 
@@ -378,13 +377,13 @@ test("releasing a resize leaves cursor and selection state usable", async ({
   );
   await waitForAnimationFrame(page);
 
-  // Hover recompute still runs after release, so a DIFFERENT handle wins.
+  // Native CSS immediately reflects whichever region is hovered after release.
   const after = (await nodeA.boundingBox())!;
+  const south = nodeA.locator(
+    "[data-snapline-part='resize-region'][data-handle='s']",
+  );
   await page.mouse.move(after.x + after.width / 2, after.y + after.height - 2);
-  await expect(nodeA).toHaveAttribute("data-snapline-resize-handle", "s");
-  await expect(nodeA).toHaveCSS("cursor", "ns-resize");
-  await page.mouse.move(after.x + after.width / 2, after.y + after.height / 2);
-  await expect(nodeA).not.toHaveAttribute("data-snapline-resize-handle");
+  await expect(south).toHaveCSS("cursor", "ns-resize");
 
   // resizingNode was cleared, so onUp no longer bails out of click-selection.
   await nodeB.click();
diff --git a/tests/ut/core-util.spec.ts b/tests/ut/core-util.spec.ts
new file mode 100644
index 0000000..2518634
--- /dev/null
+++ b/tests/ut/core-util.spec.ts
@@ -0,0 +1,31 @@
+import { expect, test } from "@playwright/test";
+import { mergeDefined } from "../../src";
+
+test("mergeDefined preserves defaults for undefined overrides", () => {
+  const defaults = {
+    enabled: true,
+    count: 10,
+    label: "default",
+  };
+
+  expect(
+    mergeDefined(defaults, {
+      enabled: undefined,
+      count: 0,
+      label: "",
+    }),
+  ).toEqual({
+    enabled: true,
+    count: 0,
+    label: "",
+  });
+});
+
+test("mergeDefined does not mutate the defaults object", () => {
+  const defaults = { enabled: true };
+  const merged = mergeDefined(defaults, { enabled: false });
+
+  expect(merged).not.toBe(defaults);
+  expect(defaults).toEqual({ enabled: true });
+  expect(merged).toEqual({ enabled: false });
+});
diff --git a/tests/ut/snapline-graph-mirror.spec.ts b/tests/ut/snapline-graph-mirror.spec.ts
index d901079..7ec8335 100644
--- a/tests/ut/snapline-graph-mirror.spec.ts
+++ b/tests/ut/snapline-graph-mirror.spec.ts
@@ -3,6 +3,7 @@ import {
   ConnectorMirror,
   GroupNodeMirror,
   NodeMirror,
+  ResizeRegionMirror,
 } from "../../assets/snapline/core/src";
 import { getGraphRegistry } from "../../assets/snapline/core/src";
 import {
@@ -56,6 +57,21 @@ test("the graph mirror indexes registrations and drops them on destroy", () => {
   expect(mirror.connectors).not.toContain(connector);
 });
 
+test("resize regions are ordinary child objects with node-owned teardown", () => {
+  const { engine } = createEngineHarness();
+  const node = new NodeMirror(engine, null);
+  const east = new ResizeRegionMirror(engine, node, "e");
+  const secondEast = new ResizeRegionMirror(engine, node, "e");
+
+  expect(east.parent).toBe(node);
+  expect(node.children).toEqual(expect.arrayContaining([east, secondEast]));
+  expect(east.handle).toBe("e");
+
+  node.destroy(false);
+  expect(east.isDeleteRequested).toBe(true);
+  expect(secondEast.isDeleteRequested).toBe(true);
+});
+
 test("duplicate ids never steal the index: first wins, diagnostic until resolved", () => {
   const { engine } = createEngineHarness();
   const mirror = getGraphRegistry(engine);
diff --git a/website/src/lib/components/docs/SnapLineDemo.svelte b/website/src/lib/components/docs/SnapLineDemo.svelte
index 21e50e1..af2621c 100644
--- a/website/src/lib/components/docs/SnapLineDemo.svelte
+++ b/website/src/lib/components/docs/SnapLineDemo.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import { Engine } from "@snap-engine/asset-base-svelte";
   import type { Engine as CoreEngine } from "@snap-engine/core";
-  import { PlacementController, applyLineChange } from "@snap-engine/snapline";
+  import { PlacementController, RESIZE_HANDLES, applyLineChange } from "@snap-engine/snapline";
   import {
     Connector,
     Group,
     Node,
     Placement,
+    ResizeRegion,
     Select,
   } from "@snap-engine/snapline-svelte";
   import { ControlledGraph } from "@snap-engine/snapline-svelte";
@@ -69,6 +70,12 @@
   }
 </script>
 
+{#snippet resizeRegions()}
+  {#each RESIZE_HANDLES as handle}
+    <ResizeRegion {handle} class="doc-resize-region" />
+  {/each}
+{/snippet}
+
 <figure class="snapline-demo" aria-label={`Interactive SnapLine ${mode} example`}>
   <ClientDemoFrame className="snapline-demo-skeleton">
     <div class="demo-shell slot shallow">
@@ -105,9 +112,9 @@
                author sizes the stylesheet refuses to render, drifting the
                anchored edge on a north or west resize. -->
           <Select className="doc-selection" />
-          <Node className="doc-node compact card shallow" x={65} y={70} resizable minWidth={108} minHeight={54}><strong>One</strong></Node>
-          <Node className="doc-node compact card shallow" x={245} y={105} resizable minWidth={108} minHeight={54}><strong>Two</strong></Node>
-          <Node className="doc-node compact card shallow" x={155} y={210} resizable minWidth={108} minHeight={54}><strong>Three</strong></Node>
+          <Node className="doc-node compact card shallow" x={65} y={70} minWidth={108} minHeight={54}><strong>One</strong>{@render resizeRegions()}</Node>
+          <Node className="doc-node compact card shallow" x={245} y={105} minWidth={108} minHeight={54}><strong>Two</strong>{@render resizeRegions()}</Node>
+          <Node className="doc-node compact card shallow" x={155} y={210} minWidth={108} minHeight={54}><strong>Three</strong>{@render resizeRegions()}</Node>
         {:else if mode === "groups"}
           <Group className="doc-group outer" x={28} y={35} width={430} height={245} title="Outer group" />
           <Group className="doc-group inner" x={90} y={95} width={235} height={130} title="Nested group" />
@@ -208,6 +215,40 @@
     min-height: 54px;
   }
 
+  :global(.doc-resize-region) {
+    --resize-size: 12px;
+    position: absolute;
+  }
+  :global(.doc-resize-region[data-handle="n"]),
+  :global(.doc-resize-region[data-handle="s"]) {
+    left: var(--resize-size);
+    right: var(--resize-size);
+    height: var(--resize-size);
+    cursor: ns-resize;
+  }
+  :global(.doc-resize-region[data-handle="e"]),
+  :global(.doc-resize-region[data-handle="w"]) {
+    top: var(--resize-size);
+    bottom: var(--resize-size);
+    width: var(--resize-size);
+    cursor: ew-resize;
+  }
+  :global(.doc-resize-region[data-handle^="n"]) { top: -6px; }
+  :global(.doc-resize-region[data-handle^="s"]) { bottom: -6px; }
+  :global(.doc-resize-region[data-handle$="e"]) { right: -6px; }
+  :global(.doc-resize-region[data-handle$="w"]) { left: -6px; }
+  :global(.doc-resize-region[data-handle="ne"]),
+  :global(.doc-resize-region[data-handle="se"]),
+  :global(.doc-resize-region[data-handle="sw"]),
+  :global(.doc-resize-region[data-handle="nw"]) {
+    width: var(--resize-size);
+    height: var(--resize-size);
+  }
+  :global(.doc-resize-region[data-handle="ne"]),
+  :global(.doc-resize-region[data-handle="sw"]) { cursor: nesw-resize; }
+  :global(.doc-resize-region[data-handle="nw"]),
+  :global(.doc-resize-region[data-handle="se"]) { cursor: nwse-resize; }
+
   :global(.doc-node[data-selected="true"]) {
     outline: 3px solid color-mix(in srgb, var(--color-primary) 38%, transparent);
     outline-offset: 3px;

From d9f7e239317ac14d85b71e467dc3b3339fba25e5 Mon Sep 17 00:00:00 2001
From: tfukaza <tfukaza@git.com>
Date: Wed, 5 Aug 2026 21:01:09 -0700
Subject: [PATCH 10/10] Refine input ownership and SnapLine connectors

Add native pointer capture handoff and resilient gesture finalization, migrate SnapLine connectors to DOM-owned input with collision point queries, and update SnapSort integration, adapters, documentation, and regression coverage.
---
 assets/snapline/AGENTS.md                     |  30 +-
 assets/snapline/core/README.md                |  14 +-
 assets/snapline/core/src/connector.ts         | 191 ++--
 assets/snapline/core/src/controlled-graph.ts  |   4 +-
 assets/snapline/core/src/group.ts             | 187 ++--
 assets/snapline/core/src/index.ts             |   2 +-
 .../snapline/core/src/internal/shared-data.ts |  32 -
 assets/snapline/core/src/node.ts              | 376 +++-----
 assets/snapline/react/README.md               |  19 +-
 assets/snapline/react/src/Connector.tsx       |  18 +-
 assets/snapline/react/src/Group.tsx           |   7 +
 assets/snapline/react/src/Node.tsx            |  11 +-
 assets/snapline/svelte/README.md              |  19 +-
 assets/snapline/svelte/src/Connector.svelte   |  20 +-
 assets/snapline/svelte/src/Group.svelte       |   5 +
 assets/snapline/svelte/src/Node.svelte        |  12 +-
 assets/snapsort/core/src/drag/flow-ghost.ts   |  14 +-
 assets/snapsort/core/src/drag/session.ts      |  37 +-
 assets/snapsort/core/src/item.ts              |  10 +-
 .../introduction/04_input_system.mdx          |  22 +-
 docs/snapengine/introduction/06_collision.mdx |   5 +
 docs/snapengine/reference/collision.mdx       |   6 +
 docs/snapengine/reference/input_system.mdx    |  41 +-
 docs/snapline/design/current-architecture.md  |  12 +-
 .../snapline/design/planned-rearchitecture.md |   4 +-
 .../snapline/guides/06_surface_connectors.mdx | 117 ++-
 docs/snapline/reference/react/connector.mdx   |  35 +-
 docs/snapline/reference/react/index.mdx       |  17 +-
 docs/snapline/reference/react/node.mdx        |   2 +-
 docs/snapline/reference/svelte/connector.mdx  |  35 +-
 docs/snapline/reference/svelte/index.mdx      |  14 +-
 docs/snapline/reference/svelte/node.mdx       |   2 +-
 docs/snapline/reference/vanilla/connector.mdx |  17 +-
 docs/snapline/reference/vanilla/node.mdx      |   5 +-
 src/AGENTS.md                                 |   5 +
 src/collision.ts                              |  14 +
 src/index.ts                                  |   5 +-
 src/input.ts                                  | 858 ++++++++++-------
 src/object.ts                                 |  21 +-
 src/util.ts                                   |   9 +-
 tests/helpers/snapline-harness.ts             |  31 +-
 tests/ut/input-headless-owner.spec.ts         | 891 +++++++++++++++++-
 tests/ut/snapline-connector-config.spec.ts    | 157 ++-
 tests/ut/snapline-graph-mirror.spec.ts        |   5 +-
 tests/ut/snapline-observers.spec.ts           |  50 +-
 tests/ut/transform.spec.ts                    |  26 +
 46 files changed, 2368 insertions(+), 1046 deletions(-)

diff --git a/assets/snapline/AGENTS.md b/assets/snapline/AGENTS.md
index aeb10eb..ea34f91 100644
--- a/assets/snapline/AGENTS.md
+++ b/assets/snapline/AGENTS.md
@@ -30,8 +30,8 @@ The three that come up constantly, and what they have already decided:
    the application mounts the node and adds the record.
 
 **There are no such thing as sensible defaults.** When a hook seeds
-application data, its absence is meaningful — see `ResolvedNodeConfig`, which
-keeps `resolveNewLine` optional rather than defaulting it to a no-op.
+application data, its absence is meaningful — `NodeCallbacks.resolveNewLine`
+stays optional rather than defaulting to a no-op.
 
 A convenience API that duplicates an existing primitive should be rejected on
 these grounds, not merely debated.
@@ -166,7 +166,7 @@ snapline/
 **Features:**
 - Derived source/target roles (`isSource` = `maxOutgoing !== 0`, `isTarget` = `maxIncoming !== 0`)
 - Connection limits and admission predicates
-- Surface strategies for headless hit testing and anchors
+- Target hit-testing and anchor strategies around DOM-owned connector roots
 - Connection callbacks
 
 ### LineMirror
@@ -203,9 +203,9 @@ requiring PascalCase for dynamic components):
   `ResizeRegion` children
 - Rendering: `LineSvelteComponent` (one renderer for all this node's lines),
   `resolveLineComponent(line)` (per-line override, resolved at render time)
-- Data: `metadata`, `resolveNewLine` (seeds payload onto a line this node's
-  connectors create)
-- Callbacks: `callbacks` (the whole `NodeCallbacks` dictionary), plus the
+- Data: `metadata`
+- Callbacks: `callbacks` (the whole `NodeCallbacks` dictionary, including
+  `resolveNewLine` for seeding payload onto newly dragged lines), plus the
   convenience props `onGeometryCommit` and `onSizeChange`
 - `edgePan`
 
@@ -344,10 +344,11 @@ same registry.
 ### Controlled lines (ControlledGraph / LineReconciler)
 
 Topology is ALWAYS controlled: the CONSUMER's document is the only line
-authority, and there is no imperative public topology API (`deleteLine`,
-`createLine`, etc. are `@internal`; a gesture on an engine with no attached
-graph owner warns and discards the preview). `core/src/line-reconciler.ts`
-plus the `ControlledGraph` adapter components implement the contract:
+authority, and there is no imperative public topology API (creation and
+deletion are implementation operations; a gesture on an engine with no
+attached graph owner warns and discards the preview).
+`core/src/line-reconciler.ts` plus the `ControlledGraph` adapter components
+implement the contract:
 `attachControlledGraph(engine, { onLineChangeRequest, onDiagnosticsChanged? })`
 installs the `LineReconciler` and returns
 `{ setCanonicalGraph, flush, dispose }`. The app PUSHES its canonical
@@ -377,10 +378,11 @@ inconsistent one.
 
 Everything SnapLine stores on the engine's shared `global.data` bag is declared
 in `core/src/internal/shared-data.ts` (`SnapLineSharedData`) and accessed through
-its typed helpers. It holds `sourceSurfaces` (engine core's `input.ts` reads
-the shape duck-typed — it cannot import snapline) plus the `graphRegistries`
-WeakMap keying each engine to its `GraphRegistry`. Selection, groups, and
-`resizingNode` are engine-scoped state on `GraphRegistry`, not global arrays.
+its typed helpers. It holds the `graphRegistries` WeakMap keying each engine to
+its `GraphRegistry`, plus the deprecated third-party camera-control flag.
+Selection, groups, and `resizingNode` are engine-scoped state on
+`GraphRegistry`, not global arrays. Connector source input is ordinary DOM
+targeting; SnapLine stores no headless source registry.
 
 ### Pointer claims (camera blocking)
 
diff --git a/assets/snapline/core/README.md b/assets/snapline/core/README.md
index 9272be2..a348f0a 100644
--- a/assets/snapline/core/README.md
+++ b/assets/snapline/core/README.md
@@ -48,13 +48,13 @@ call `node.remeasureDomGeometry()`. The remeasure is coalesced into the next
 read/write cycle and re-glues every connected line without coupling SnapLine to
 the external system.
 
-Surface strategies decouple connection hit testing from visible connector
-elements. They can activate from a node border, rank shape-specific target
-hits, and resolve preview and settled anchors from cached geometry. Symmetric
-connector rules (`maxOutgoing`/`maxIncoming`, `"unlimited"` explicit) let the
-same logical surface start and accept connections. `onPointerDown` runs when a connector claims the primary pointer,
-before the drag threshold, so consumers can preserve click selection or other
-gesture-start UI for headless surfaces.
+Connector roots own gesture initiation, while target-hit and anchor strategies
+can rank shape-specific collision candidates and resolve preview and settled
+anchors from cached geometry. Symmetric connector rules
+(`maxOutgoing`/`maxIncoming`, `"unlimited"` explicit) let the same logical
+connector start and accept connections. `onPointerDown` runs when a connector
+claims the primary pointer, before the drag threshold, so consumers can
+preserve click selection or other gesture-start UI on custom HTML or SVG roots.
 
 Call `connector.updateConfig(...)` to change callbacks, metadata, policy,
 surface strategies, collider radius, or edge-pan behavior
diff --git a/assets/snapline/core/src/connector.ts b/assets/snapline/core/src/connector.ts
index f94c149..4a1f84a 100644
--- a/assets/snapline/core/src/connector.ts
+++ b/assets/snapline/core/src/connector.ts
@@ -1,4 +1,4 @@
-import { ElementObject, BaseObject } from "@snap-engine/core";
+import { ElementObject, BaseObject, type DomElement } from "@snap-engine/core";
 import type {
   dragEndProp,
   dragProp,
@@ -10,7 +10,7 @@ import type {
 import { CircleCollider } from "@snap-engine/core/collision";
 import type { NodeMirror } from "./node";
 import { LineMirror, cloneAnchor, type LineMirrorPhase } from "./line";
-import { getGraphRegistry, getSourceSurfaces } from "./internal/shared-data";
+import { getGraphRegistry } from "./internal/shared-data";
 import { mintDomainId } from "./internal/graph-registry";
 import type { LineChangeRequest } from "./types";
 
@@ -101,9 +101,6 @@ export interface ConnectorAnchorEvent {
 }
 
 export interface ConnectorSurfaceStrategy {
-  sourceHitTest?: (
-    event: ConnectorSurfaceHitTestEvent,
-  ) => ConnectorHit | null | false | void;
   targetHitTest?: (
     event: ConnectorSurfaceHitTestEvent,
   ) => ConnectorHit | null | false | void;
@@ -189,6 +186,8 @@ export interface ConnectorPointerEvent extends ConnectorDragEvent {
 }
 
 export interface ConnectorCallbacks {
+  /** Overrides the parent node's `resolveNewLine` for this connector only. */
+  resolveNewLine?: NewLineResolver;
   /** Fires when this connector claims a primary pointer, before drag threshold. */
   onPointerDown?: (event: ConnectorPointerEvent) => void;
   onDragStart?: (event: ConnectorDragEvent) => void;
@@ -226,8 +225,6 @@ export interface ConnectorConfig {
   callbacks?: ConnectorCallbacks;
   /** Allows this connector gesture to use the engine's configured edge pan. */
   edgePan?: boolean;
-  /** Overrides the parent node's `resolveNewLine` for this connector only. */
-  resolveNewLine?: NewLineResolver;
 }
 
 /** Context for seeding a brand-new line at drag start. */
@@ -266,7 +263,7 @@ interface ArmedConnection {
   reconnectLine: LineMirror | null;
 }
 
-class ConnectorMirror extends ElementObject {
+class ConnectorMirror extends ElementObject<DomElement> {
   /** Stable domain identity — supplied via `ConnectorConfig.id` or minted.
    * Never the engine-internal `BaseObject.id`. */
   readonly connectorId: string;
@@ -286,6 +283,7 @@ class ConnectorMirror extends ElementObject {
   #armed: ArmedConnection | null = null;
   #gestureOrigin: "new" | "reconnect" | null = null;
   #cancelledPointers = new Set<number>();
+  #dragDelegate: ConnectorMirror | null = null;
   #callbacks: ConnectorCallbacks;
 
   get parent(): NodeMirror {
@@ -323,7 +321,6 @@ class ConnectorMirror extends ElementObject {
       this.#config.colliderRadius ?? 30,
     );
     this.addCollider(this.#hitCircle);
-    this.#syncSourceSurfaceRegistration();
     getGraphRegistry(this.engine).registerConnector(this);
 
     this.event.dom.onAssignDom = () => {
@@ -391,15 +388,14 @@ class ConnectorMirror extends ElementObject {
     this.#callbacks = this.#config.callbacks ?? {};
     this.#rules = Object.freeze(resolveRules(this.#config));
     this.#hitCircle.radius = this.#config.colliderRadius ?? 30;
-    this.#syncSourceSurfaceRegistration();
     this.scheduleAllLineWrites();
   }
 
   /**
-   * Attaches or detaches the optional visible port without destroying the
-   * logical connector. Framework adapters use this for live `virtual` changes.
+   * Attaches or detaches the developer-rendered HTML or SVG input root without
+   * destroying the logical connector.
    */
-  bindElement(element: HTMLElement | null): void {
+  bindElement(element: DomElement | null): void {
     if (this.element === element) return;
     if (this.element) {
       this.destroyDom(false);
@@ -491,8 +487,7 @@ class ConnectorMirror extends ElementObject {
 
   onCursorDown(prop: pointerDownProp): void {
     if (prop.event.button !== 0) return;
-    const sourceHit = this.#resolveOwnSourceHit(prop.position, "source-start");
-    this.armSurfaceGesture(prop, sourceHit);
+    this.armSurfaceGesture(prop, null);
   }
 
   armSurfaceGesture(
@@ -504,7 +499,7 @@ class ConnectorMirror extends ElementObject {
     if (this.#rules.reconnect && currentIncomingLines.length > 0) {
       const line = currentIncomingLines[0];
       const source = line.start;
-      this.engine.input.setPointerDragOwner(prop.event.pointerId, source);
+      this.#dragDelegate = source;
       source.#arm(prop, {
         sourceHit: null,
         sourceStrategy: null,
@@ -545,8 +540,17 @@ class ConnectorMirror extends ElementObject {
 
   #onPointerUp(prop: pointerUpProp): void {
     const pointerId = prop.event.pointerId;
+    const delegate = this.#dragDelegate;
+    this.#dragDelegate = null;
+    if (
+      delegate &&
+      delegate.#armed?.pointerId === pointerId &&
+      delegate.#state === ConnectorState.ARMED
+    ) {
+      delegate.#resetGesture();
+    }
     if (this.#armed?.pointerId !== pointerId) return;
-    if (prop.event.type === "pointercancel") {
+    if (prop.cancelled) {
       this.#cancelledPointers.add(pointerId);
     }
     if (this.#state === ConnectorState.ARMED) {
@@ -555,6 +559,13 @@ class ConnectorMirror extends ElementObject {
   }
 
   #onDragStart(prop: dragStartProp): void {
+    const delegate = this.#dragDelegate;
+    if (delegate && delegate.#armed?.pointerId === prop.pointerId) {
+      this.#dragDelegate = null;
+      prop.handoffTo(delegate);
+      delegate.#onDragStart(prop);
+      return;
+    }
     if (
       this.#state !== ConnectorState.ARMED ||
       this.#armed?.pointerId !== prop.pointerId
@@ -569,7 +580,7 @@ class ConnectorMirror extends ElementObject {
       this.#detachLineForReconnect(line);
       line.clearTarget();
     } else {
-      line = this.createLine();
+      line = this.#createLine();
       line.setSourceSurfaceContext(armed.sourceStrategy, armed.sourceHit);
       // Seed app data onto a genuinely new line. This branch structurally
       // cannot run for a reconnect, so it can never clobber payload the
@@ -637,7 +648,7 @@ class ConnectorMirror extends ElementObject {
   assignToNode(parent: NodeMirror): void {
     this.parent = parent;
     const parentRef = this.parent;
-    parentRef._connectors[this.#name] = this;
+    parentRef.attachConnector(this);
     this.#outgoingLines = [];
     this.#incomingLines = [];
     if (parentRef.global && this.global == null) {
@@ -645,9 +656,9 @@ class ConnectorMirror extends ElementObject {
     }
   }
 
-  /** @internal Gesture/reconciler-only: lines exist because canonical
+  /** Gesture/reconciler-only: lines exist because canonical
    * records (or in-flight gestures) say so. */
-  createLine(config: { id?: string } = {}): LineMirror {
+  #createLine(config: { id?: string } = {}): LineMirror {
     const line = new LineMirror(this.engine, this, config);
     line.setSourceSurfaceContext(this.#defaultAnchorStrategy(), null);
     return line;
@@ -663,10 +674,6 @@ class ConnectorMirror extends ElementObject {
     );
   }
 
-  resolveSourceHit(position: eventPosition): ConnectorResolvedHit | null {
-    return this.#resolveOwnSourceHit(position, "source-start");
-  }
-
   /**
    * Imperative admission query. Structural rules always apply; the
    * line-aware isValidConnection predicates run only when a line is given.
@@ -785,7 +792,7 @@ class ConnectorMirror extends ElementObject {
       return;
     }
 
-    if (this.#cancelledPointers.has(prop.pointerId)) {
+    if (prop.cancelled || this.#cancelledPointers.has(prop.pointerId)) {
       this.#discardDraggedLine(line, prop, false, "cancelled");
       return;
     }
@@ -912,7 +919,11 @@ class ConnectorMirror extends ElementObject {
 
   /** Connector-level override, else the parent node's resolver. */
   #resolveNewLine(): NewLineResolver | null {
-    return this.#config.resolveNewLine ?? this.parent?.resolveNewLine ?? null;
+    return (
+      this.#callbacks.resolveNewLine ??
+      this.parent?.callbacks.resolveNewLine ??
+      null
+    );
   }
 
   #dispatchRequest(request: LineChangeRequest): void {
@@ -1040,56 +1051,33 @@ class ConnectorMirror extends ElementObject {
     this.#resetGesture();
     this.deleteAllLines("teardown");
     getGraphRegistry(this.engine).unregisterConnector(this);
-    if (this.parent?._connectors[this.#name] === this) {
-      delete this.parent._connectors[this.#name];
-    }
-    this.#removeSourceSurfaceRegistration();
+    this.parent?.detachConnector(this);
     this.globalInput.pointerUp = null;
     super.destroy(removeElement);
   }
 
-  #resolveOwnSourceHit(
-    position: eventPosition,
-    phase: LineMirrorPhase,
-  ): ConnectorResolvedHit | null {
-    const hits: ConnectorResolvedHit[] = [];
-    for (const [strategyIndex, strategy] of this.surfaceStrategies.entries()) {
-      const hit = normalizeHit(
-        strategy.sourceHitTest?.({
-          connector: this,
-          position,
-          geometry: this.geometry,
-          phase,
-        }),
-      );
-      if (hit) {
-        hits.push({
-          candidate: { connector: this, hit },
-          strategy,
-          strategyIndex,
-        });
-      }
-    }
-    return pickResolvedHit(hits);
-  }
-
   #resolveTargetAtPoint(
     position: eventPosition,
     phase: "preview-target" | "drop",
   ): ConnectorResolvedHit | null {
     const hits: ConnectorResolvedHit[] = [];
-    for (const connector of registeredConnectors(this.engine)) {
+    for (const collider of this.engine.collisionEngine?.queryPoint(position) ??
+      []) {
+      const connector = collider.parent;
       if (
+        !(connector instanceof ConnectorMirror) ||
+        collider !== connector.#hitCircle ||
         connector.engine !== this.engine ||
+        connector.isDeleteRequested ||
         !this.#admitsConnection(connector, this.#dragLine, "candidate")
       ) {
         continue;
       }
 
-      for (const [
-        strategyIndex,
-        strategy,
-      ] of connector.surfaceStrategies.entries()) {
+      const targetStrategies = connector.surfaceStrategies
+        .map((strategy, strategyIndex) => ({ strategy, strategyIndex }))
+        .filter(({ strategy }) => strategy.targetHitTest != null);
+      for (const { strategyIndex, strategy } of targetStrategies) {
         const hit = normalizeHit(
           strategy.targetHitTest?.({
             connector,
@@ -1107,22 +1095,25 @@ class ConnectorMirror extends ElementObject {
         }
       }
 
-      if (connector.#hasOrdinaryPortGeometry()) {
+      if (
+        targetStrategies.length === 0 &&
+        connector.#hasOrdinaryPortGeometry()
+      ) {
         const center = connector.center;
-        const distance = Math.hypot(
-          center.x - position.x,
-          center.y - position.y,
-        );
-        if (distance <= (connector.#config.colliderRadius ?? 30)) {
-          hits.push({
-            candidate: {
-              connector,
-              hit: { anchor: center, distance },
+        hits.push({
+          candidate: {
+            connector,
+            hit: {
+              anchor: center,
+              distance: Math.hypot(
+                center.x - position.x,
+                center.y - position.y,
+              ),
             },
-            strategy: connector.#defaultAnchorStrategy(),
-            strategyIndex: Number.MAX_SAFE_INTEGER,
-          });
-        }
+          },
+          strategy: connector.#defaultAnchorStrategy(),
+          strategyIndex: Number.MAX_SAFE_INTEGER,
+        });
       }
     }
     return pickResolvedHit(hits);
@@ -1204,25 +1195,6 @@ class ConnectorMirror extends ElementObject {
     );
   }
 
-  #syncSourceSurfaceRegistration(): void {
-    const sourceSurfaces = getSourceSurfaces(this.global);
-    const index = sourceSurfaces.indexOf(this);
-    const shouldRegister =
-      this.isSource &&
-      this.surfaceStrategies.some((strategy) => strategy.sourceHitTest);
-    if (shouldRegister && index === -1) {
-      sourceSurfaces.push(this);
-    } else if (!shouldRegister && index !== -1) {
-      sourceSurfaces.splice(index, 1);
-    }
-  }
-
-  #removeSourceSurfaceRegistration(): void {
-    const sourceSurfaces = getSourceSurfaces(this.global);
-    const index = sourceSurfaces.indexOf(this);
-    if (index !== -1) sourceSurfaces.splice(index, 1);
-  }
-
   #hasOrdinaryPortGeometry(): boolean {
     return this.element != null || this.#hasMeasuredCenter;
   }
@@ -1239,7 +1211,7 @@ class ConnectorMirror extends ElementObject {
     const structural = this.#admitsEndpoints(target, null, false);
     if (structural !== true) return structural;
 
-    const line = this.createLine({ id: record.id });
+    const line = this.#createLine({ id: record.id });
     if (!this.#predicatesAdmit(target, line, "drop")) {
       line.destroy(false);
       return "connection-rejected";
@@ -1395,33 +1367,4 @@ function pickResolvedHit(
   return hits[0] ?? null;
 }
 
-export function resolveConnectorSourceAtPoint(
-  engine: any,
-  position: eventPosition,
-  node?: NodeMirror,
-): ConnectorResolvedHit | null {
-  const hits: ConnectorResolvedHit[] = [];
-  for (const surface of getSourceSurfaces(engine.global)) {
-    const connector = surface as ConnectorMirror;
-    if (
-      connector.engine !== engine ||
-      (node && connector.parent !== node) ||
-      !connector.isSource
-    ) {
-      continue;
-    }
-    const resolved = connector.resolveSourceHit(position);
-    if (resolved) hits.push(resolved);
-  }
-  return pickResolvedHit(hits);
-}
-
-function registeredConnectors(engine: any): ConnectorMirror[] {
-  // The registry is the one connector source — no engine-object-table scan
-  // (this runs per pointer move during a connection drag).
-  return getGraphRegistry(engine).connectors.filter(
-    (connector) => !connector.isDeleteRequested,
-  );
-}
-
 export { ConnectorMirror };
diff --git a/assets/snapline/core/src/controlled-graph.ts b/assets/snapline/core/src/controlled-graph.ts
index 4072b5f..a63d87c 100644
--- a/assets/snapline/core/src/controlled-graph.ts
+++ b/assets/snapline/core/src/controlled-graph.ts
@@ -25,8 +25,8 @@ import type {
  * your own id works, but recreates the mirror.
  *
  * Consumer-owned fields survive an update (the record is spread), but cannot
- * be invented for an addition — seed those at drag start with the node's
- * `resolveNewLine`, and they ride into `request.add` for you.
+ * be invented for an addition — seed those at drag start with
+ * `node.callbacks.resolveNewLine`, and they ride into `request.add` for you.
  *
  * Replace-not-mutate by construction: every call builds a new array, which is
  * what makes `$state.raw` safe for the list in Svelte.
diff --git a/assets/snapline/core/src/group.ts b/assets/snapline/core/src/group.ts
index 9e20052..2e91e2c 100644
--- a/assets/snapline/core/src/group.ts
+++ b/assets/snapline/core/src/group.ts
@@ -122,87 +122,6 @@ function wouldCreateGroupCycle(
   return false;
 }
 
-function reconcileMembership(
-  source: GroupNodeMirror,
-  fireDelta: boolean,
-): void {
-  const mirror = getGraphRegistry(source.engine);
-  if (mirror.reconcilingMembership) return;
-  mirror.reconcilingMembership = true;
-
-  try {
-    const groups = groupsForEngine(source);
-    const nextMembers = new Map<GroupNodeMirror, Set<NodeMirror>>(
-      groups.map((group) => [group, new Set()]),
-    );
-    const nextParents = new Map<NodeMirror, GroupNodeMirror>();
-
-    const nodes = nodesForEngine(source);
-    const groupNodes = [...groups].sort(stableGroupOrder);
-    const ordinaryNodes = nodes.filter(
-      (node) => !(node instanceof GroupNodeMirror),
-    );
-
-    // Resolve the group forest first. A proposed edge can point at a group that
-    // has already chosen another parent, so walking the partial parent map is
-    // enough to reject the edge that would close any cycle.
-    for (const node of groupNodes) {
-      const candidates = groups.filter(
-        (group) =>
-          group !== node &&
-          group.allowsMembership(node) &&
-          !wouldCreateGroupCycle(node, group, nextParents),
-      );
-      const parent = resolveParent(node, candidates, mirror.membershipResolver);
-      if (!parent) continue;
-      nextMembers.get(parent)?.add(node);
-      nextParents.set(node, parent);
-    }
-
-    // Ordinary nodes cannot form membership cycles. They choose the innermost
-    // eligible group after the group hierarchy is settled.
-    for (const node of ordinaryNodes) {
-      const candidates = groups.filter((group) => group.allowsMembership(node));
-      const parent = resolveParent(node, candidates, mirror.membershipResolver);
-      if (!parent) continue;
-      nextMembers.get(parent)?.add(node);
-      nextParents.set(node, parent);
-    }
-
-    const deltas = groups.map((group) => {
-      const previous = group.members;
-      const next = nextMembers.get(group) ?? new Set<NodeMirror>();
-      return {
-        group,
-        next,
-        added: [...next].filter((node) => !previous.has(node)),
-        removed: [...previous].filter((node) => !next.has(node)),
-      };
-    });
-
-    for (const node of nodes) {
-      const parent = nextParents.get(node);
-      if (parent) mirror.parentGroups.set(node, parent);
-      else mirror.parentGroups.delete(node);
-    }
-    for (const { group, next } of deltas) group.setResolvedMembers(next);
-
-    if (fireDelta) {
-      for (const { group, next, added, removed } of deltas) {
-        if (!added.length && !removed.length) continue;
-        group.groupCallbacks.onMembershipChange?.({
-          group,
-          added,
-          removed,
-          members: [...next],
-        });
-      }
-    }
-  } finally {
-    mirror.reconcilingMembership = false;
-  }
-}
-
 /** Return the node's settled, exclusive direct parent group. */
 export function getParentGroup(node: NodeMirror): GroupNodeMirror | null {
   return getGraphRegistry(node.engine).parentGroups.get(node) ?? null;
@@ -241,6 +160,97 @@ class GroupNodeMirror extends NodeMirror {
   #groupCallbacks: GroupCallbacks;
   #groupConfig: GroupConfig;
 
+  static #reconcileMembership(
+    source: GroupNodeMirror,
+    fireDelta: boolean,
+  ): void {
+    const mirror = getGraphRegistry(source.engine);
+    if (mirror.reconcilingMembership) return;
+    mirror.reconcilingMembership = true;
+
+    try {
+      const groups = groupsForEngine(source);
+      const nextMembers = new Map<GroupNodeMirror, Set<NodeMirror>>(
+        groups.map((group) => [group, new Set()]),
+      );
+      const nextParents = new Map<NodeMirror, GroupNodeMirror>();
+
+      const nodes = nodesForEngine(source);
+      const groupNodes = [...groups].sort(stableGroupOrder);
+      const ordinaryNodes = nodes.filter(
+        (node) => !(node instanceof GroupNodeMirror),
+      );
+
+      // Resolve the group forest first. A proposed edge can point at a group
+      // that has already chosen another parent, so walking the partial parent
+      // map is enough to reject the edge that would close any cycle.
+      for (const node of groupNodes) {
+        const candidates = groups.filter(
+          (group) =>
+            group !== node &&
+            group.allowsMembership(node) &&
+            !wouldCreateGroupCycle(node, group, nextParents),
+        );
+        const parent = resolveParent(
+          node,
+          candidates,
+          mirror.membershipResolver,
+        );
+        if (!parent) continue;
+        nextMembers.get(parent)?.add(node);
+        nextParents.set(node, parent);
+      }
+
+      // Ordinary nodes cannot form membership cycles. They choose the
+      // innermost eligible group after the group hierarchy is settled.
+      for (const node of ordinaryNodes) {
+        const candidates = groups.filter((group) =>
+          group.allowsMembership(node),
+        );
+        const parent = resolveParent(
+          node,
+          candidates,
+          mirror.membershipResolver,
+        );
+        if (!parent) continue;
+        nextMembers.get(parent)?.add(node);
+        nextParents.set(node, parent);
+      }
+
+      const deltas = groups.map((group) => {
+        const previous = group.#members;
+        const next = nextMembers.get(group) ?? new Set<NodeMirror>();
+        return {
+          group,
+          next,
+          added: [...next].filter((node) => !previous.has(node)),
+          removed: [...previous].filter((node) => !next.has(node)),
+        };
+      });
+
+      for (const node of nodes) {
+        const parent = nextParents.get(node);
+        if (parent) mirror.parentGroups.set(node, parent);
+        else mirror.parentGroups.delete(node);
+      }
+      for (const { group, next } of deltas) group.#members = next;
+
+      if (fireDelta) {
+        for (const { group, next, added, removed } of deltas) {
+          if (!added.length && !removed.length) continue;
+          group.#groupCallbacks.onMembershipChange?.({
+            group,
+            added,
+            removed,
+            members: [...next],
+          });
+        }
+      }
+    } finally {
+      mirror.reconcilingMembership = false;
+    }
+  }
+
   constructor(
     engine: any,
     parent: BaseObject | null,
@@ -283,11 +293,6 @@ class GroupNodeMirror extends NodeMirror {
     return getParentGroup(this);
   }
 
-  /** @internal Used by the engine-wide exclusive-membership reconciliation. */
-  setResolvedMembers(members: Set<NodeMirror>): void {
-    this.#members = members;
-  }
-
   allowsMembership(node: NodeMirror): boolean {
     const box = this.hitBox.getWorldBoundsSnapshot();
     const nodeBounds = node.hitBox.getWorldBoundsSnapshot();
@@ -315,7 +320,7 @@ class GroupNodeMirror extends NodeMirror {
   }
 
   refreshMembership(fireDelta: boolean): void {
-    reconcileMembership(this, fireDelta);
+    GroupNodeMirror.#reconcileMembership(this, fireDelta);
   }
 
   setSizeState(width: number, height: number): void {
@@ -323,7 +328,7 @@ class GroupNodeMirror extends NodeMirror {
     this.refreshMembership(true);
   }
 
-  beginSelectionDrag(position: eventPosition): void {
+  protected override beginSelectionDrag(position: eventPosition): void {
     super.beginSelectionDrag(position);
     this.#carryGroupOrigin = {
       x: this.worldTransform.x,
@@ -340,15 +345,15 @@ class GroupNodeMirror extends NodeMirror {
     }
   }
 
-  containsSelectionDragNode(node: NodeMirror): boolean {
+  protected override containsSelectionDragNode(node: NodeMirror): boolean {
     return this.descendants.has(node);
   }
 
-  selectionDragNodes(): NodeMirror[] {
+  protected override selectionDragNodes(): NodeMirror[] {
     return [...new Set([this, ...this.#carry])];
   }
 
-  finishSelectionDrag(): void {
+  protected override finishSelectionDrag(): void {
     const dx = this.worldTransform.x - this.#carryGroupOrigin.x;
     const dy = this.worldTransform.y - this.#carryGroupOrigin.y;
     for (const member of this.#carry) {
diff --git a/assets/snapline/core/src/index.ts b/assets/snapline/core/src/index.ts
index 9816918..739875d 100644
--- a/assets/snapline/core/src/index.ts
+++ b/assets/snapline/core/src/index.ts
@@ -15,7 +15,7 @@ export type {
   ResolvedNodeConfig,
   SelectionMode,
 } from "./node";
-export { ConnectorMirror, resolveConnectorSourceAtPoint } from "./connector";
+export { ConnectorMirror } from "./connector";
 export type {
   ConnectionLimit,
   ConnectionOrigin,
diff --git a/assets/snapline/core/src/internal/shared-data.ts b/assets/snapline/core/src/internal/shared-data.ts
index 2a41c32..ee097e6 100644
--- a/assets/snapline/core/src/internal/shared-data.ts
+++ b/assets/snapline/core/src/internal/shared-data.ts
@@ -1,39 +1,13 @@
-import type { eventPosition } from "@snap-engine/core";
 import { GraphRegistry } from "./graph-registry";
 
-/**
- * Structural source-surface contract shared with engine input. Keeping this
- * shape here avoids an engine-core -> SnapLine dependency while still allowing
- * a headless connector to own pointer input outside its parent's DOM bounds.
- */
-export interface SourceSurfaceOwner {
-  id: string;
-  engine: unknown;
-  isDeleteRequested: boolean;
-  resolveSourceHit(position: eventPosition): {
-    candidate: {
-      hit: {
-        distance: number;
-        priority?: number;
-      };
-    };
-    strategyIndex: number;
-  } | null;
-}
-
 /**
  * The shape of everything SnapLine stores on the engine's shared `global.data`
  * bag. This is the single declaration site for these cross-module contracts —
  * every reader/writer goes through the typed accessors below instead of
  * re-deriving the shape inline.
  *
- * NOTE for engine core: `input.ts#resolveSourceSurfaceOwner` reads
- * `sourceSurfaces` duck-typed (engine core cannot import snapline); keep its
- * structural type in sync with this declaration.
  */
 export interface SnapLineSharedData {
-  /** Registered headless source surfaces; input.ts routes pointerdowns to them. */
-  sourceSurfaces?: SourceSurfaceOwner[];
   /**
    * @deprecated Legacy camera-control boolean (last-writer-wins), read by the
    * camera for third-party writers only. In-repo gesture owners block the
@@ -56,12 +30,6 @@ export function snapData(global: { data: any }): SnapLineSharedData {
   return global.data as SnapLineSharedData;
 }
 
-export function getSourceSurfaces(global: { data: any }): SourceSurfaceOwner[] {
-  const data = snapData(global);
-  if (!data.sourceSurfaces) data.sourceSurfaces = [];
-  return data.sourceSurfaces;
-}
-
 /** The per-engine registry, lazy-created on first access. */
 export function getGraphRegistry(engine: {
   global: { data: any } | null;
diff --git a/assets/snapline/core/src/node.ts b/assets/snapline/core/src/node.ts
index 90a2d11..da21792 100644
--- a/assets/snapline/core/src/node.ts
+++ b/assets/snapline/core/src/node.ts
@@ -1,5 +1,5 @@
 import { BaseObject, ElementObject, mergeDefined } from "@snap-engine/core";
-import { ConnectorMirror, resolveConnectorSourceAtPoint } from "./connector";
+import { ConnectorMirror } from "./connector";
 import { LineMirror } from "./line";
 import type {
   pointerUpProp,
@@ -29,36 +29,17 @@ export const RESIZE_HANDLES: readonly ResizeHandle[] = [
 ];
 
 export interface NodeConfig {
-  /**
-   * Stable application-facing identity (graph-global). Minted by SnapLine
-   * when omitted; supply one for any graph that outlives this mirror
-   * (persistence, remounts, cross-session reloads).
-   */
   id?: string;
   lockPosition?: boolean;
   minWidth?: number;
   minHeight?: number;
   metadata?: SnapLineMetadata;
   callbacks?: NodeCallbacks;
-  /** Allows this node gesture to use the engine's configured edge pan. */
   edgePan?: boolean;
-  /**
-   * Seeds application data onto a line a drag from any of this node's
-   * connectors creates. One place for all its ports; the event carries the
-   * connector so it can branch. A connector may override it.
-   */
-  resolveNewLine?: NewLineResolver;
 }
 
-/**
- * Config with every defaultable field resolved. `resolveNewLine` stays
- * optional: it seeds application data, and there is no sensible default for
- * that — its absence is the meaningful state.
- */
-export type ResolvedNodeConfig = Required<
-  Omit<NodeConfig, "id" | "resolveNewLine">
-> &
-  Pick<NodeConfig, "resolveNewLine">;
+/** Config with every defaultable field resolved. */
+export type ResolvedNodeConfig = Required<Omit<NodeConfig, "id">>;
 
 const DEFAULT_NODE_CONFIG: ResolvedNodeConfig = {
   lockPosition: false,
@@ -137,6 +118,11 @@ export interface NodeLinesEvent {
 }
 
 export interface NodeCallbacks {
+  /**
+   * Seeds application data onto a line a drag from any of this node's
+   * connectors creates. A connector-level resolver may override it.
+   */
+  resolveNewLine?: NewLineResolver;
   /** Determines if a drag gesture should start. */
   canStartDrag?: (event: NodePointerEvent) => boolean;
   /** Allow node position to be overridden during drag, e.g. to implement snap-to-grid. */
@@ -166,34 +152,26 @@ export interface NodeCallbacks {
 }
 
 class NodeMirror extends ElementObject {
-  /** Stable domain identity — supplied via `NodeConfig.id` or minted. Never
-   * the engine-internal `BaseObject.id`. */
+
   readonly nodeId: string;
   #config: ResolvedNodeConfig;
-  /** @internal Name-keyed live connectors; written by ConnectorMirror's
-   * assignToNode/destroy — the one deliberate cross-class field. */
-  _connectors: { [key: string]: ConnectorMirror };
+  #connectors: { [key: string]: ConnectorMirror };
   #dragStartX = 0;
   #dragStartY = 0;
-  _nodeStyle: any;
   #hitBox: RectCollider;
-  #mouseDownX: number;
-  #mouseDownY: number;
-  _hasMoved: boolean;
+  #pointerReferenceX: number;
+  #pointerReferenceY: number;
+  #hasMoved: boolean;
   #resizeRegions = new Set<ResizeRegionMirror>();
   #activeResizeHandle: ResizeHandle | null = null;
-  /** Read by GroupNodeMirror to distinguish a resize from a move drag. */
-  #resizing = false;
-  // The size last authored through setSizeState, kept apart from #hitBox (which
-  // tracks what the browser actually rendered) so a write always paints the
-  // value its own tick authored.
+  #isResizing = false;
   #geometryObservers = new Set<GeometryInvalidationObserver<NodeMirror>>();
   #authoredWidth = 0;
   #authoredHeight = 0;
   #hasAuthoredSize = false;
-  #resizeArmed = false;
-  #resizeStartW = 0;
-  #resizeStartH = 0;
+  #isResizeArmed = false;
+  #resizeStartWidth = 0;
+  #resizeStartHeight = 0;
   #resizeStartX = 0;
   #resizeStartY = 0;
   #callbacks: NodeCallbacks;
@@ -204,7 +182,7 @@ class NodeMirror extends ElementObject {
   #dragCommitNodes: NodeMirror[] = [];
   #lastDragPosition: eventPosition | null = null;
   #pointerSelectionMode: SelectionMode = "replace";
-  #selectedAtPointerDown = false;
+  #wasSelectedAtPointerDown = false;
 
   constructor(engine: any, parent: BaseObject | null, config: NodeConfig = {}) {
     super(engine, parent);
@@ -213,11 +191,11 @@ class NodeMirror extends ElementObject {
     this.nodeId = config.id ?? mintDomainId("node", this.global);
     getGraphRegistry(this.engine).registerNode(this);
 
-    this._connectors = {};
+    this.#connectors = {};
     this.#dragStartX = this.worldTransform.x;
     this.#dragStartY = this.worldTransform.y;
-    this.#mouseDownX = 0;
-    this.#mouseDownY = 0;
+    this.#pointerReferenceX = 0;
+    this.#pointerReferenceY = 0;
     this.transformMode = "direct";
 
     this.event.input.pointerDown = this.onCursorDown;
@@ -228,14 +206,9 @@ class NodeMirror extends ElementObject {
     this.#hitBox = new RectCollider(this.engine, this, 0, 0, 0, 0);
     this.addCollider(this.#hitBox);
 
-    this._hasMoved = false;
+    this.#hasMoved = false;
 
-    // Whenever the DOM box changes size (ResizeObserver) re-measure + re-glue.
     this.event.dom.onResize = () => this.remeasureDomGeometry();
-
-    // Base positioning styles are framework-owned: adapters must render the
-    // element with `position: absolute; transform-origin: top left` (see the
-    // ownership note in assets/snapline/AGENTS.md).
   }
 
   get config(): ResolvedNodeConfig {
@@ -246,15 +219,15 @@ class NodeMirror extends ElementObject {
     return this.#callbacks;
   }
 
-  /** The resolver a drag from this node's connectors seeds new lines with. */
-  get resolveNewLine(): NewLineResolver | null {
-    return this.#config.resolveNewLine ?? null;
-  }
-
   get metadata(): SnapLineMetadata {
     return this.#config.metadata;
   }
 
+  /** The node's collision footprint (world = worldTransform + width/height). */
+  get hitBox(): RectCollider {
+    return this.#hitBox;
+  }
+
   registerDragHandle(element: HTMLElement): () => void {
     this.#dragHandles.add(element);
     return () => this.#dragHandles.delete(element);
@@ -270,12 +243,6 @@ class NodeMirror extends ElementObject {
     this.#resizeRegions.delete(region);
   }
 
-  /** The node's collision footprint (world = worldTransform + width/height).
-   * Read by groups for geometric membership. */
-  get hitBox(): RectCollider {
-    return this.#hitBox;
-  }
-
   setStartPositions() {
     this.#dragStartX = this.worldTransform.x;
     this.#dragStartY = this.worldTransform.y;
@@ -284,7 +251,7 @@ class NodeMirror extends ElementObject {
   setSelected(selected: boolean) {
     this.dataAttribute = {
       selected: String(selected),
-      "snapline-state": selected ? "focus" : "idle",
+      "snapline-state": selected ? "focus" : "idle", // TODO: Not used?
     };
     const selectList = getGraphRegistry(this.engine).selection;
     if (selected) {
@@ -306,14 +273,16 @@ class NodeMirror extends ElementObject {
     });
   }
 
-  /** Schedules a WRITE_2 write for every line on every connector of this node. */
+  /** Schedules a WRITE_2 for every line on every connector of this node. */
   scheduleLineWrites(): void {
-    for (const connector of Object.values(this._connectors)) {
+    for (const connector of Object.values(this.#connectors)) {
       connector.scheduleAllLineWrites();
     }
   }
 
   /** Synchronously writes every line on every connector (call inside a WRITE stage). */
+  // TODO: We should have some kind of guard for these typed of functions that
+  // need to be called in specific stages.
   writeLinesNow(): void {
     const lines = new Set([
       ...this.getAllOutgoingLines(),
@@ -341,20 +310,16 @@ class NodeMirror extends ElementObject {
       stage: "WRITE_2",
       queueId: `${this.id}-transform`,
     });
-    // Every node in the transform tree moves, not just this one — multi-select
-    // peers and group-carried members included — so each gets its own signal.
     for (const node of this.#transformNodeTree()) {
-      node.notifyGeometryInvalidated();
+      node.#notifyGeometryInvalidated();
       node.scheduleLineWrites();
     }
   }
 
-  // Re-measure the node box + each connector's local center (READ_1) and re-glue
-  // every incoming/outgoing line (WRITE_2). This is the "same handling as a move
-  // plus a size re-measure": moving a node keeps connector local centers valid,
-  // but resizing invalidates them, so they must be re-read. Shared by the
-  // ResizeObserver and the JS-driven setSize; stable queueIds collapse a
-  // same-frame double-fire (idempotent when it runs twice across frames).
+  /**
+   * Re-measure the node box + each connector's local center (READ_1) and re-glue
+   * every incoming/outgoing line (WRITE_2).
+   */
   remeasureDomGeometry(): void {
     if (!this.element) {
       throw new Error(
@@ -368,41 +333,26 @@ class NodeMirror extends ElementObject {
     this.scheduleLineWrites();
   }
 
-  // Reconciles state with what the browser actually rendered: the node box and
-  // each connector's local center. Shared by the ResizeObserver (READ_1) and
-  // the post-write re-measure (READ_2) so the two cannot drift apart.
+  /* Reconciles state with what the browser actually rendered */
   #syncMeasuredGeometry(stage: "READ_1" | "READ_2"): void {
     if (!this.element) return;
     const property = this.readDom({ unapplyTransform: false }, stage);
-    // While a gesture is authoring the size, the authored box is the truth and
-    // the rendered box is one frame behind: the ResizeObserver fires for frame
-    // N's paint, so this read lands in frame N+1 AFTER that frame's pointermove
-    // already advanced both the size and worldTransform. Adopting it here would
-    // make the WRITE_1 paint a stale height beside a fresh transform — a
-    // one-frame jump of the anchored edge on every north/west drag.
-    if (!this.#resizing) {
+    // During resize, setSizeState sets the correct dimensions.
+    if (!this.#isResizing) {
       this.#hitBox.width = property.width;
       this.#hitBox.height = property.height;
     }
-    for (const connector of Object.values(this._connectors)) {
+    for (const connector of Object.values(this.#connectors)) {
       connector.measureLocalCenter(stage);
     }
   }
 
   /**
    * Subscribe to "this node's geometry is about to change".
-   *
-   * Fires **synchronously, during input dispatch, before any frame task is
-   * queued** — for drags (including camera edge-pan, multi-select peers, and
-   * group-carried members, none of which `onDrag` reports) and for resizes.
-   * It hands over no geometry: schedule your own task at the stage you want
-   * and read {@link geometrySnapshot} there.
-   *
-   * Distinct from `onGeometryCommit`, which fires once per gesture with the
-   * settled result. This one fires every frame, before the paint.
-   *
    * @returns an unsubscribe function.
    */
+  // TODO: Unify semantics of subscribe/unsubscribe functions
+  // (e.g. with global input callback)
   onGeometryInvalidated(
     observer: GeometryInvalidationObserver<NodeMirror>,
   ): () => void {
@@ -410,11 +360,9 @@ class NodeMirror extends ElementObject {
     return () => this.#geometryObservers.delete(observer);
   }
 
-  /** @internal Fired by the scheduling entry points, before they queue. */
-  notifyGeometryInvalidated(): void {
+  /** Fired by the scheduling entry points, before they queue. */
+  #notifyGeometryInvalidated(): void {
     for (const observer of this.#geometryObservers) {
-      // A third-party observer must never be able to stop the node painting
-      // or starve its peers.
       try {
         observer(this);
       } catch (error) {
@@ -423,14 +371,6 @@ class NodeMirror extends ElementObject {
     }
   }
 
-  /**
-   * This node's position and **authored** size.
-   *
-   * Deliberately not sourced from `hitBox`: that is DOM truth, which a
-   * ResizeObserver-scheduled READ_1 overwrites with the *previously rendered*
-   * box. Reading it mid-gesture pairs last frame's height with this frame's
-   * `y`. Position and size here always come from the same authoring tick.
-   */
   geometrySnapshot(): { x: number; y: number; width: number; height: number } {
     return {
       x: this.worldTransform.x,
@@ -440,16 +380,9 @@ class NodeMirror extends ElementObject {
     };
   }
 
-  // State-only half of a size change: clamps to min and synchronously updates
-  // the collision footprint so hit testing and group containment stay correct
-  // mid-drag. `setSize` adds the scheduled DOM write;
-  // adapters can use this method alone when seeding external dimensions.
   setSizeState(width: number, height: number): void {
     const w = Math.max(this.#config.minWidth, width);
     const h = Math.max(this.#config.minHeight, height);
-    // The authored size is captured here and painted verbatim, so whatever
-    // reconciles #hitBox with the DOM in between cannot desynchronize the size
-    // from the worldTransform authored in the same tick.
     this.#authoredWidth = w;
     this.#authoredHeight = h;
     this.#hasAuthoredSize = true;
@@ -457,15 +390,17 @@ class NodeMirror extends ElementObject {
     this.#hitBox.height = h;
   }
 
-  // Drives live resize geometry directly. The framework observes and persists
-  // the result, but it is not part of the pointer-move paint path.
+  /**
+   * Set the size of a node, and request DOM update to
+   * render the new size.
+   */
   setSize(
     width: number,
     height: number,
     handle: ResizeHandle | null = null,
   ): void {
     this.setSizeState(width, height);
-    this.#scheduleSizeGeometryWrite();
+    this.scheduleGeometryWrite();
     this.#callbacks.onSizeChange?.({
       node: this,
       handle,
@@ -477,19 +412,11 @@ class NodeMirror extends ElementObject {
   }
 
   /**
-   * Schedules the one task that paints size and transform together, plus the
-   * re-measure and line re-glue. Adapters mutate `worldTransform` and
-   * `setSizeState(...)` and then call this, so a prop-driven position+size
-   * change lands in one frame, in one stage-legal task. Unlike `setSize` it
-   * emits no `onSizeChange`, which would echo a controlled app's own value
-   * back at it.
+   * Schedules the task that paints size and transform together,
+   * plus the re-measure and line re-glue.
    */
   scheduleGeometryWrite(): void {
-    this.#scheduleSizeGeometryWrite();
-  }
-
-  #scheduleSizeGeometryWrite(): void {
-    this.notifyGeometryInvalidated();
+    this.#notifyGeometryInvalidated();
     this.schedule(() => this.#writeSizeGeometry(), {
       stage: "WRITE_1",
       queueId: `${this.id}-size`,
@@ -501,10 +428,6 @@ class NodeMirror extends ElementObject {
     this.scheduleLineWrites();
   }
 
-  // The single atomic geometry commit: size and transform are painted in one
-  // synchronous block, in one task, in one stage — and from values authored in
-  // the same tick, never re-read from state that a later measurement may have
-  // moved underneath them.
   #writeSizeGeometry(): void {
     if (this.element && this.#hasAuthoredSize) {
       this.element.style.width = `${this.#authoredWidth}px`;
@@ -513,7 +436,6 @@ class NodeMirror extends ElementObject {
     this.writeTransformRecursive();
   }
 
-  // Applies one side/corner resize while keeping the opposite edges fixed.
   #applyResizeDrag(dx: number, dy: number): void {
     const handle = this.#activeResizeHandle;
     if (!handle) return;
@@ -522,22 +444,22 @@ class NodeMirror extends ElementObject {
     const north = handle === "n" || handle === "ne" || handle === "nw";
     const south = handle === "s" || handle === "se" || handle === "sw";
     const proposedWidth = west
-      ? this.#resizeStartW - dx
+      ? this.#resizeStartWidth - dx
       : east
-        ? this.#resizeStartW + dx
-        : this.#resizeStartW;
+        ? this.#resizeStartWidth + dx
+        : this.#resizeStartWidth;
     const proposedHeight = north
-      ? this.#resizeStartH - dy
+      ? this.#resizeStartHeight - dy
       : south
-        ? this.#resizeStartH + dy
-        : this.#resizeStartH;
+        ? this.#resizeStartHeight + dy
+        : this.#resizeStartHeight;
     const width = Math.max(this.#config.minWidth, proposedWidth);
     const height = Math.max(this.#config.minHeight, proposedHeight);
     const x = west
-      ? this.#resizeStartX + (this.#resizeStartW - width)
+      ? this.#resizeStartX + (this.#resizeStartWidth - width)
       : this.#resizeStartX;
     const y = north
-      ? this.#resizeStartY + (this.#resizeStartH - height)
+      ? this.#resizeStartY + (this.#resizeStartHeight - height)
       : this.#resizeStartY;
     this.worldTransform = { x, y };
     this.setSize(width, height, handle);
@@ -548,8 +470,6 @@ class NodeMirror extends ElementObject {
     this.writeLinesNow();
   }
 
-  // Transform-only (re)parenting used by group carry: the public/DOM graph is
-  // left alone, so members stay flat siblings in the adapter's node list.
   attachTransformToGroup(group: NodeMirror): void {
     this.setTransformParent(group, true);
   }
@@ -564,6 +484,11 @@ class NodeMirror extends ElementObject {
   }
 
   onCursorDown(e: pointerDownProp): void {
+    // Child input bubbles. A connector or resize region owns its own
+    // pointerdown and must not reset or start a node drag.
+    // TODO: Prevent bubbling in child object
+    if (e.objectId !== this.id) return;
+
     // Authorization belongs to one pointer gesture. Clear any stale permission
     // before evaluating this pointerdown (including non-primary buttons).
     this.#dragPointerId = null;
@@ -571,15 +496,7 @@ class NodeMirror extends ElementObject {
       return;
     }
 
-    const source = resolveConnectorSourceAtPoint(this.engine, e.position, this);
-    if (source) {
-      this.engine.input.setPointerDragOwner(
-        e.event.pointerId,
-        source.candidate.connector,
-      );
-      source.candidate.connector.armSurfaceGesture(e, source);
-      return;
-    }
+    // TODO: Replace draghandle with inputAlias
     const target = e.event.target as Node | null;
     const dragAllowed =
       (this.#dragHandles.size === 0 ||
@@ -600,35 +517,32 @@ class NodeMirror extends ElementObject {
   armResize(e: pointerDownProp, handle: ResizeHandle): void {
     this.#dragPointerId = null;
     if (e.event.button !== 0) return;
-    this.#resizeArmed = true;
+    this.#isResizeArmed = true;
     this.#activeResizeHandle = handle;
-    this.engine.input.setPointerDragOwner(e.event.pointerId, this);
     this.#authorizePointer(e);
   }
 
   #authorizePointer(e: pointerDownProp): void {
     this.#dragPointerId = e.event.pointerId;
 
-    // Claim the pointer from the very first pointer event: waiting for the
-    // drag-start threshold would let the camera pan by one move event before
-    // onDragStart runs. The claim auto-releases when the gesture ends, so no
-    // paired release is needed anywhere.
+    // Claim the pointer from the very first pointer event to
+    // prevent camera pan.
     this.engine.input.claimPointer(e.event.pointerId);
 
-    this._hasMoved = false;
+    this.#hasMoved = false;
     const selection = [...getGraphRegistry(this.engine).selection];
-    this.#selectedAtPointerDown = selection.includes(this);
+    this.#wasSelectedAtPointerDown = selection.includes(this);
     this.#pointerSelectionMode =
       this.#callbacks.resolveSelectionMode?.({
         node: this,
-        selected: this.#selectedAtPointerDown,
+        selected: this.#wasSelectedAtPointerDown,
         selection,
         originalEvent: e.event,
       }) ?? "replace";
 
     if (
       this.#pointerSelectionMode === "replace" &&
-      !this.#selectedAtPointerDown
+      !this.#wasSelectedAtPointerDown
     ) {
       for (const node of [...getGraphRegistry(this.engine).selection]) {
         node.setSelected(false);
@@ -637,7 +551,7 @@ class NodeMirror extends ElementObject {
     } else if (
       (this.#pointerSelectionMode === "add" ||
         this.#pointerSelectionMode === "toggle") &&
-      !this.#selectedAtPointerDown
+      !this.#wasSelectedAtPointerDown
     ) {
       this.setSelected(true);
     }
@@ -645,21 +559,23 @@ class NodeMirror extends ElementObject {
 
   onDragStart(prop: dragStartProp): void {
     if (this.#dragPointerId !== prop.pointerId) return;
-    if (this.#resizeArmed) {
-      this.#resizing = true;
-      this.#resizeStartW = this.#hitBox.width;
-      this.#resizeStartH = this.#hitBox.height;
+    if (this.#isResizeArmed) {
+      this.#isResizing = true;
+      this.#resizeStartWidth = this.#hitBox.width;
+      this.#resizeStartHeight = this.#hitBox.height;
       this.#resizeStartX = this.worldTransform.x;
       this.#resizeStartY = this.worldTransform.y;
-      this.#mouseDownX = prop.start.x;
-      this.#mouseDownY = prop.start.y;
-      this._hasMoved = true;
+      this.#pointerReferenceX = prop.start.x;
+      this.#pointerReferenceY = prop.start.y;
+      this.#hasMoved = true;
       // Guard so releasing a resize over another node doesn't click-select it.
+      // TODO: Not needed since input now captures pointer on original DOM?
       getGraphRegistry(this.engine).resizingNode = this;
       return;
     }
     if (!this.#config.lockPosition && this.#config.edgePan) {
       this.#edgePanPointerId = prop.pointerId;
+      // TODO: edgePanController should be part of SnapZap
       this.engine.edgePanController?.startEdgePan(
         prop.pointerId,
         prop.start,
@@ -681,7 +597,7 @@ class NodeMirror extends ElementObject {
     this.#dragCommitNodes = [
       ...new Set(this.#dragRoots.flatMap((node) => node.selectionDragNodes())),
     ];
-    this._hasMoved = true;
+    this.#hasMoved = true;
     this.#callbacks.onDragStart?.({
       node: this,
       pointerId: prop.pointerId,
@@ -695,10 +611,10 @@ class NodeMirror extends ElementObject {
       console.error("Global stats is null");
       return;
     }
-    if (this.#resizing) {
+    if (this.#isResizing) {
       this.#applyResizeDrag(
-        prop.position.x - this.#mouseDownX,
-        prop.position.y - this.#mouseDownY,
+        prop.position.x - this.#pointerReferenceX,
+        prop.position.y - this.#pointerReferenceY,
       );
       return;
     }
@@ -724,29 +640,33 @@ class NodeMirror extends ElementObject {
     }
   }
 
-  /** @internal Hook used to build one deduplicated multi-selection drag session. */
-  beginSelectionDrag(position: eventPosition): void {
+  /** Hook used to build one deduplicated multi-selection drag session. */
+  protected beginSelectionDrag(position: eventPosition): void {
     this.setStartPositions();
-    this.#mouseDownX = position.x;
-    this.#mouseDownY = position.y;
+    this.#pointerReferenceX = position.x;
+    this.#pointerReferenceY = position.y;
   }
 
-  /** @internal Whether this node's drag behavior already carries `node`. */
-  containsSelectionDragNode(_node: NodeMirror): boolean {
+  /**
+   * Whether this node's drag already carries another nodeId
+   * within it. Needed when checking if a selected group also has a child
+   * node that is selected, otherwise we may apply drag twice to the child.
+  .*/
+  protected containsSelectionDragNode(_node: NodeMirror): boolean {
     return false;
   }
 
-  /** @internal Nodes whose final positions belong to this drag root's commit. */
-  selectionDragNodes(): NodeMirror[] {
+  /** Nodes whose final positions belong to this drag root's commit. */
+  protected selectionDragNodes(): NodeMirror[] {
     return [this];
   }
 
-  /** @internal Finalize any temporary carry state owned by this drag root. */
-  finishSelectionDrag(): void {}
+  /** Finalize any temporary carry state owned by this drag root. */
+  protected finishSelectionDrag(): void {}
 
   setDragPosition(prop: dragProp) {
-    const dx = prop.position.x - this.#mouseDownX;
-    const dy = prop.position.y - this.#mouseDownY;
+    const dx = prop.position.x - this.#pointerReferenceX;
+    const dy = prop.position.y - this.#pointerReferenceY;
     const x = this.#dragStartX + dx;
     const y = this.#dragStartY + dy;
     const resolved = this.#callbacks.resolveDragPosition?.({
@@ -763,42 +683,32 @@ class NodeMirror extends ElementObject {
   }
 
   onDragEnd(prop: dragEndProp) {
-    // A pointerdown rejected by a drag handle/predicate still becomes a generic
-    // input drag gesture once it crosses the engine threshold. It must not
-    // commit stale selection coordinates on release.
+    // this.#dragPointerId will be undefined if drag was canceled
+    // earlier for any reason, in which case we should not proceed.
     if (this.#dragPointerId !== prop.pointerId) return;
     if (this.#edgePanPointerId != null) {
       this.engine.edgePanController?.stopEdgePan(this.#edgePanPointerId);
       this.#edgePanPointerId = null;
     }
-    if (this.#resizing) {
-      // The teardown runs in `finally` because everything above it calls out:
-      // #writeSizeGeometry touches the DOM and onGeometryCommit is consumer
-      // code. A throw that skipped these resets would strand `resizingNode`,
-      // which permanently disables click-selection (see onUp).
+    if (this.#isResizing) {
+      // The teardown runs in `finally` because everything above it calls out.
       try {
         this.#applyResizeDrag(
-          prop.end.x - this.#mouseDownX,
-          prop.end.y - this.#mouseDownY,
+          prop.end.x - this.#pointerReferenceX,
+          prop.end.y - this.#pointerReferenceY,
         );
-        // Pointer-up is a synchronization boundary for consumers that immediately
-        // query the committed handle/box. Keep the coalesced frame write for the
-        // hot path, but make the final retained geometry observable now.
         this.#writeSizeGeometry();
         this.#callbacks.onGeometryCommit?.({
           nodes: [this.#geometryOf(this)],
         });
       } finally {
-        this.#resizing = false;
-        this.#resizeArmed = false;
+        this.#isResizing = false;
+        this.#isResizeArmed = false;
         this.#activeResizeHandle = null;
         getGraphRegistry(this.engine).resizingNode = null;
         this.#dragPointerId = null;
       }
-      // Settle #hitBox against what actually rendered. The gesture suppressed
-      // that reconciliation, and the release write often authors the previous
-      // frame's values, so no ResizeObserver would fire to trigger it — without
-      // this an authored size the stylesheet refused would stick.
+      // Settle #hitBox against what actually rendered.
       this.remeasureDomGeometry();
       // A resized node's center may have moved into/out of a group.
       for (const group of getGraphRegistry(this.engine).groups) {
@@ -807,9 +717,6 @@ class NodeMirror extends ElementObject {
       return;
     }
 
-    // The live position is authoritative. Recomputing from the raw pointer-up
-    // coordinate would discard edge-pan compensation and can make the release
-    // frame jump away from what the user was dragging.
     if (this.#lastDragPosition) {
       this.#moveSelectionToPointer(this.#lastDragPosition);
     }
@@ -818,10 +725,7 @@ class NodeMirror extends ElementObject {
       node.scheduleTransformAndLines();
     }
 
-    // A settled node may have entered or left a group; groups re-evaluate
-    // membership on settle (never at group-drag-start), so the maintained set is
-    // current before the next group drag. The graph mirror's type-only group
-    // reference keeps node.ts free of any group value import.
+    // A settled node may have entered or left a group
     for (const group of getGraphRegistry(this.engine).groups) {
       group.refreshMembership(true);
     }
@@ -857,18 +761,18 @@ class NodeMirror extends ElementObject {
   onUp(prop: pointerUpProp) {
     if (this.#dragPointerId !== prop.event.pointerId) return;
 
-    // pointerUp is dispatched to whatever is under the release point, which for a
-    // resize may be a DIFFERENT node than the one being resized. Skip click-select
-    // while any resize is settling so releasing a resize doesn't select this node.
+    // InputControl dispatches pointerUp before dragEnd. Keep active resize state
+    // intact so onDragEnd can commit the geometry and perform teardown.
+    // TODO: onUp should not fire if drag event fired?
     if (getGraphRegistry(this.engine).resizingNode) return;
-    if (this.#resizeArmed) {
-      this.#resizeArmed = false;
+    if (this.#isResizeArmed) {
+      this.#isResizeArmed = false;
       this.#activeResizeHandle = null;
       this.#dragPointerId = null;
       return;
     }
 
-    if (this._hasMoved == false) {
+    if (!this.#hasMoved) {
       if (this.#pointerSelectionMode === "replace") {
         for (const node of [...getGraphRegistry(this.engine).selection]) {
           if (node !== this) node.setSelected(false);
@@ -877,33 +781,45 @@ class NodeMirror extends ElementObject {
       } else if (this.#pointerSelectionMode === "add") {
         this.setSelected(true);
       } else {
-        this.setSelected(!this.#selectedAtPointerDown);
+        this.setSelected(!this.#wasSelectedAtPointerDown);
       }
       this.#dragPointerId = null;
     }
-    this._hasMoved = false;
+    this.#hasMoved = false;
   }
 
   getConnector(name: string): ConnectorMirror | null {
-    if (!(name in this._connectors)) {
+    if (!(name in this.#connectors)) {
       console.error(`Connector ${name} does not exist in node ${this.id}`);
       return null;
     }
-    return this._connectors[name];
+    return this.#connectors[name];
   }
 
   addConnectorObject(connector: ConnectorMirror) {
     connector.assignToNode(this);
   }
 
+  /** @internal Registers a connector assigned to this node. */
+  attachConnector(connector: ConnectorMirror): void {
+    this.#connectors[connector.name] = connector;
+  }
+
+  /** @internal Removes a connector only if it is still the registered value. */
+  detachConnector(connector: ConnectorMirror): void {
+    if (this.#connectors[connector.name] === connector) {
+      delete this.#connectors[connector.name];
+    }
+  }
+
   getAllOutgoingLines(): LineMirror[] {
-    return Object.values(this._connectors).flatMap(
+    return Object.values(this.#connectors).flatMap(
       (connector) => connector.outgoingLines,
     );
   }
 
   getAllIncomingLines(): LineMirror[] {
-    return Object.values(this._connectors).flatMap(
+    return Object.values(this.#connectors).flatMap(
       (connector) => connector.incomingLines,
     );
   }
@@ -913,7 +829,7 @@ class NodeMirror extends ElementObject {
       this.engine.edgePanController?.stopEdgePan(this.#edgePanPointerId);
       this.#edgePanPointerId = null;
     }
-    for (const connector of Object.values(this._connectors)) {
+    for (const connector of Object.values(this.#connectors)) {
       // A node unmount is a teardown, not a deliberate programmatic
       // disconnect — keep the reason contract honest for intent consumers.
       connector.deleteAllLines("teardown");
@@ -922,7 +838,7 @@ class NodeMirror extends ElementObject {
     this.setSelected(false);
     for (const region of [...this.#resizeRegions]) region.destroy(false);
     this.#resizeRegions.clear();
-    this._connectors = {};
+    this.#connectors = {};
     super.destroy(removeElement);
   }
 }
@@ -945,23 +861,17 @@ class ResizeRegionMirror extends ElementObject {
     this.handle = handle;
     this.transformMode = "none";
     this.event.input.pointerDown = this.#onPointerDown;
-    this.event.input.pointerUp = this.#onPointerUp;
+    this.event.input.dragStart = this.#onDragStart;
     node.attachResizeRegion(this);
   }
 
   #onPointerDown(prop: pointerDownProp): void {
     if (prop.event.button !== 0) return;
     this.node.armResize(prop, this.handle);
-    try {
-      this.element?.setPointerCapture(prop.event.pointerId);
-    } catch {
-      // Pointer capture may fail if application code detached the region while
-      // handling pointerdown. Engine document routing still settles the gesture.
-    }
   }
 
-  #onPointerUp(prop: pointerUpProp): void {
-    this.node.onUp(prop);
+  #onDragStart(prop: dragStartProp): void {
+    prop.handoffTo(this.node);
   }
 
   destroy(removeElement: boolean = true): void {
diff --git a/assets/snapline/react/README.md b/assets/snapline/react/README.md
index 2b9c539..46d460d 100644
--- a/assets/snapline/react/README.md
+++ b/assets/snapline/react/README.md
@@ -39,14 +39,15 @@ through `Node`'s `elementProps`.
 Render explicit `ResizeRegion` children to opt into resizing. Their CSS owns
 the hit area, position, cursor, hover behavior, and visuals.
 
-Set `virtual` on `Connector` to keep the logical endpoint without rendering a
-port. `surfaceStrategies` can then hit-test and anchor against the parent
-node's shape, while symmetric `rules` limits enable source and target
-behavior. Keep domain edges in React state and use an opaque line payload as
-the stable link from a custom renderer.
-
-Connector policy, metadata, callbacks, strategies, and `virtual` stay live
-across renders. Toggling `virtual` removes or remounts only the visible port;
-the logical connector and existing lines are preserved.
+Pass a render function to `Connector` when the input root should be custom
+HTML or SVG. Attach its callback ref to exactly one element; for an SVG path,
+use `pointerEvents="stroke"` to make the painted stroke the source hit area.
+`surfaceStrategies` customize target admission and endpoint anchors. Keep
+domain edges in React state and use an opaque line payload as the stable link
+from a custom renderer.
+
+Connector policy, metadata, callbacks, strategies, and collider radius stay
+live across renders. `name` and an adopted `connectorObject` are
+construction-time identities.
 
 Full documentation: https://snapengine.dev/docs/snapline/introduction
diff --git a/assets/snapline/react/src/Connector.tsx b/assets/snapline/react/src/Connector.tsx
index 7bd32c3..7b82285 100644
--- a/assets/snapline/react/src/Connector.tsx
+++ b/assets/snapline/react/src/Connector.tsx
@@ -6,6 +6,7 @@ import {
   useImperativeHandle,
   useRef,
   type CSSProperties,
+  type ReactNode,
 } from "react";
 import {
   ConnectorMirror,
@@ -28,8 +29,13 @@ export interface ConnectorProps {
   edgePan?: boolean;
   rules?: Partial<ConnectorRules>;
   surfaceStrategies?: readonly ConnectorSurfaceStrategy[];
-  /** Keep the logical connector without rendering a visible port element. */
-  virtual?: boolean;
+  /**
+   * Render a custom HTML or SVG connector root. Attach the supplied callback
+   * ref to the one element that should receive pointer input.
+   */
+  children?: (bind: {
+    ref: (element: HTMLElement | SVGElement | null) => void;
+  }) => ReactNode;
   colliderRadius?: number;
   connectorObject?: ConnectorMirror | null;
   data?: Record<string, string>;
@@ -51,7 +57,7 @@ export const Connector = forwardRef<ConnectorRef, ConnectorProps>(
       edgePan = true,
       rules,
       surfaceStrategies = [],
-      virtual = false,
+      children,
       colliderRadius,
       connectorObject = null,
       data = {},
@@ -105,7 +111,7 @@ export const Connector = forwardRef<ConnectorRef, ConnectorProps>(
     ]);
 
     const bindConnectorElement = useCallback(
-      (element: HTMLDivElement | null) => {
+      (element: HTMLElement | SVGElement | null) => {
         connector.bindElement(element);
       },
       [connector],
@@ -117,7 +123,9 @@ export const Connector = forwardRef<ConnectorRef, ConnectorProps>(
       };
     }, [connector]);
 
-    if (virtual) return null;
+    if (children) {
+      return children({ ref: bindConnectorElement });
+    }
 
     return (
       <div
diff --git a/assets/snapline/react/src/Group.tsx b/assets/snapline/react/src/Group.tsx
index 4e7331a..b837016 100644
--- a/assets/snapline/react/src/Group.tsx
+++ b/assets/snapline/react/src/Group.tsx
@@ -143,6 +143,12 @@ export const Group = forwardRef<GroupNodeMirror, GroupProps>(function Group(
       latestRef.current.callbacks.resolveSelectionMode?.(event) ??
       originalCallbacks.resolveSelectionMode?.(event) ??
       "replace";
+    group.callbacks.resolveNewLine = (event) => {
+      const resolver =
+        latestRef.current.callbacks.resolveNewLine ??
+        originalCallbacks.resolveNewLine;
+      return resolver?.(event);
+    };
     group.callbacks.onDragStart = (event) =>
       invoke(
         event,
@@ -199,6 +205,7 @@ export const Group = forwardRef<GroupNodeMirror, GroupProps>(function Group(
       group.callbacks.canStartDrag = originalCallbacks.canStartDrag;
       group.callbacks.resolveSelectionMode =
         originalCallbacks.resolveSelectionMode;
+      group.callbacks.resolveNewLine = originalCallbacks.resolveNewLine;
       group.callbacks.onDragStart = originalCallbacks.onDragStart;
       group.callbacks.onDrag = originalCallbacks.onDrag;
       group.callbacks.onGeometryCommit = originalCallbacks.onGeometryCommit;
diff --git a/assets/snapline/react/src/Node.tsx b/assets/snapline/react/src/Node.tsx
index d590f5b..e7516b7 100644
--- a/assets/snapline/react/src/Node.tsx
+++ b/assets/snapline/react/src/Node.tsx
@@ -15,7 +15,6 @@ import {
 import {
   LineMirror,
   NodeMirror,
-  type NewLineResolver,
   type NodeCallbacks,
   type GeometryChangeEvent,
   type NodeResizeEvent,
@@ -48,8 +47,6 @@ export interface NodeProps {
   resolveLineComponent?: (
     line: LineMirror,
   ) => ComponentType<{ line: LineMirror }> | null | undefined;
-  /** Seeds application data onto a line a drag from this node creates. */
-  resolveNewLine?: NewLineResolver;
   nodeObject?: NodeMirror | null;
   style?: CSSProperties;
   x?: number;
@@ -74,7 +71,6 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
     className = "",
     lineComponent: LineRenderer = Line,
     resolveLineComponent,
-    resolveNewLine,
     nodeObject = null,
     style,
     x = 0,
@@ -104,7 +100,6 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
       metadata,
       callbacks: {},
       edgePan,
-      resolveNewLine,
     });
   }
   const node = nodeRef.current;
@@ -161,6 +156,11 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
       latestRef.current.callbacks.resolveSelectionMode?.(event) ??
       original.resolveSelectionMode?.(event) ??
       "replace";
+    node.callbacks.resolveNewLine = (event) => {
+      const resolver =
+        latestRef.current.callbacks.resolveNewLine ?? original.resolveNewLine;
+      return resolver?.(event);
+    };
     node.callbacks.onDragStart = (event) =>
       invoke(
         event,
@@ -205,6 +205,7 @@ export const Node = forwardRef<NodeMirror, NodeProps>(function Node(
       node.callbacks.canStartDrag = original.canStartDrag;
       node.callbacks.resolveDragPosition = original.resolveDragPosition;
       node.callbacks.resolveSelectionMode = original.resolveSelectionMode;
+      node.callbacks.resolveNewLine = original.resolveNewLine;
       node.callbacks.onDragStart = original.onDragStart;
       node.callbacks.onDrag = original.onDrag;
       node.callbacks.onGeometryCommit = original.onGeometryCommit;
diff --git a/assets/snapline/svelte/README.md b/assets/snapline/svelte/README.md
index 1069887..b48f610 100644
--- a/assets/snapline/svelte/README.md
+++ b/assets/snapline/svelte/README.md
@@ -38,14 +38,15 @@ element through `Node`'s `elementProps`.
 Render explicit `ResizeRegion` children to opt into resizing. Their CSS owns
 the hit area, position, cursor, hover behavior, and visuals.
 
-`<Connector virtual>` creates a logical connector without a visible port.
-Combine it with `surfaceStrategies` and symmetric `rules` limits to make a
-node border or another application-defined shape act as the connection surface.
-Application graph state remains authoritative; an opaque line payload can link
-a custom renderer back to the corresponding domain edge.
-
-Connector policy, metadata, callbacks, strategies, and `virtual` are reactive.
-Switching `virtual` detaches or remounts only the visible port; the logical
-connector and its existing lines remain intact.
+Pass a child snippet to `Connector` when the input root should be custom HTML
+or SVG. Apply the snippet argument as a Svelte action to exactly one element;
+for an SVG path, use `pointer-events="stroke"` to make the painted stroke the
+source hit area. `surfaceStrategies` customize target admission and endpoint
+anchors. Application graph state remains authoritative; an opaque line payload
+can link a custom renderer back to the corresponding domain edge.
+
+Connector policy, metadata, callbacks, strategies, and collider radius are
+reactive. `name` and an adopted `connectorObject` are construction-time
+identities.
 
 Full documentation: https://snapengine.dev/docs/snapline/introduction
diff --git a/assets/snapline/svelte/src/Connector.svelte b/assets/snapline/svelte/src/Connector.svelte
index f3686c1..ce30572 100644
--- a/assets/snapline/svelte/src/Connector.svelte
+++ b/assets/snapline/svelte/src/Connector.svelte
@@ -8,7 +8,11 @@
     type SnapLineMetadata,
   } from "@snap-engine/snapline";
   import type { Engine } from "@snap-engine/core";
-  import { getContext, onDestroy } from "svelte";
+  import { getContext, onDestroy, type Snippet } from "svelte";
+
+  type ConnectorAction = (
+    element: HTMLElement | SVGElement,
+  ) => { destroy(): void };
 
   let {
     id = undefined,
@@ -18,7 +22,7 @@
     callbacks = {},
     edgePan = true,
     surfaceStrategies = [],
-    virtual = false,
+    children = undefined,
     colliderRadius = undefined,
     connectorObject = null,
     data = {},
@@ -31,8 +35,8 @@
     callbacks?: ConnectorCallbacks;
     edgePan?: boolean;
     surfaceStrategies?: readonly ConnectorSurfaceStrategy[];
-    /** Keep the logical connector without rendering a visible port element. */
-    virtual?: boolean;
+    /** Custom connector root. Apply the snippet argument with `use:`. */
+    children?: Snippet<[ConnectorAction]>;
     colliderRadius?: number;
     connectorObject?: ConnectorMirror | null;
     data?: Record<string, string>;
@@ -58,11 +62,11 @@
     return connector;
   }
 
-  function bindConnectorElement(element: HTMLDivElement) {
+  function bindConnectorElement(element: HTMLElement | SVGElement) {
     connector.bindElement(element);
     return {
       destroy() {
-        connector.bindElement(null);
+        if (connector.element === element) connector.bindElement(null);
       },
     };
   }
@@ -83,7 +87,9 @@
   });
 </script>
 
-{#if !virtual}
+{#if children}
+  {@render children(bindConnectorElement)}
+{:else}
   <div
     use:bindConnectorElement
     data-snapline-type="connector"
diff --git a/assets/snapline/svelte/src/Group.svelte b/assets/snapline/svelte/src/Group.svelte
index e8c6035..cdb02d1 100644
--- a/assets/snapline/svelte/src/Group.svelte
+++ b/assets/snapline/svelte/src/Group.svelte
@@ -102,6 +102,10 @@
             callbacks.resolveSelectionMode?.(event) ??
             originalCallbacks.resolveSelectionMode?.(event) ??
             "replace";
+        groupObject!.callbacks.resolveNewLine = (event) => {
+            const resolver = callbacks.resolveNewLine ?? originalCallbacks.resolveNewLine;
+            return resolver?.(event);
+        };
         groupObject!.callbacks.onDragStart = (event) =>
             invoke(event, originalCallbacks.onDragStart, callbacks.onDragStart);
         groupObject!.callbacks.onDrag = (event) =>
@@ -138,6 +142,7 @@
         unregisterHeader = null;
         groupObject!.callbacks.canStartDrag = originalCallbacks.canStartDrag;
         groupObject!.callbacks.resolveSelectionMode = originalCallbacks.resolveSelectionMode;
+        groupObject!.callbacks.resolveNewLine = originalCallbacks.resolveNewLine;
         groupObject!.callbacks.onDragStart = originalCallbacks.onDragStart;
         groupObject!.callbacks.onDrag = originalCallbacks.onDrag;
         groupObject!.callbacks.onGeometryCommit = originalCallbacks.onGeometryCommit;
diff --git a/assets/snapline/svelte/src/Node.svelte b/assets/snapline/svelte/src/Node.svelte
index 61ef560..01050f0 100644
--- a/assets/snapline/svelte/src/Node.svelte
+++ b/assets/snapline/svelte/src/Node.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { NodeMirror, LineMirror, type NodeCallbacks, type NewLineResolver, type GeometryChangeEvent, type NodeResizeEvent, type SnapLineMetadata } from "@snap-engine/snapline";
+    import { NodeMirror, LineMirror, type NodeCallbacks, type GeometryChangeEvent, type NodeResizeEvent, type SnapLineMetadata } from "@snap-engine/snapline";
     import type { Engine } from "@snap-engine/core";
     import Line from "./Line.svelte";
     import { onMount, setContext, getContext, onDestroy, tick, untrack } from "svelte";
@@ -12,7 +12,6 @@
         className = "",
         LineSvelteComponent = Line,
         resolveLineComponent = undefined,
-        resolveNewLine = undefined,
         nodeObject = null,
         x = 0,
         y = 0,
@@ -46,8 +45,6 @@
          * reference in a record.
          */
         resolveLineComponent?: (line: LineMirror) => typeof Line | null | undefined;
-        /** Seeds application data onto a line a drag from this node creates. */
-        resolveNewLine?: NewLineResolver;
         nodeObject?: NodeMirror | null;
         x?: number;
         y?: number;
@@ -68,7 +65,7 @@
     let engine: Engine = getContext("engine");
     const ownsNode = nodeObject == null;
     if (!nodeObject) {
-         nodeObject = new NodeMirror(engine, null, { id, minWidth, minHeight, metadata, callbacks: {}, edgePan, resolveNewLine });
+         nodeObject = new NodeMirror(engine, null, { id, minWidth, minHeight, metadata, callbacks: {}, edgePan });
     }
     let lineList: LineMirror[] = $state(nodeObject.getAllOutgoingLines());
 
@@ -114,6 +111,10 @@
             callbacks.resolveSelectionMode?.(event) ??
             originalCallbacks.resolveSelectionMode?.(event) ??
             "replace";
+        nodeObject.callbacks.resolveNewLine = (event) => {
+            const resolver = callbacks.resolveNewLine ?? originalCallbacks.resolveNewLine;
+            return resolver?.(event);
+        };
         nodeObject.callbacks.onDragStart = (event) =>
             invoke(event, originalCallbacks.onDragStart, callbacks.onDragStart);
         nodeObject.callbacks.onDrag = (event) =>
@@ -140,6 +141,7 @@
         nodeObject.callbacks.canStartDrag = originalCallbacks.canStartDrag;
         nodeObject.callbacks.resolveDragPosition = originalCallbacks.resolveDragPosition;
         nodeObject.callbacks.resolveSelectionMode = originalCallbacks.resolveSelectionMode;
+        nodeObject.callbacks.resolveNewLine = originalCallbacks.resolveNewLine;
         nodeObject.callbacks.onDragStart = originalCallbacks.onDragStart;
         nodeObject.callbacks.onDrag = originalCallbacks.onDrag;
         nodeObject.callbacks.onGeometryCommit = originalCallbacks.onGeometryCommit;
diff --git a/assets/snapsort/core/src/drag/flow-ghost.ts b/assets/snapsort/core/src/drag/flow-ghost.ts
index 831b36c..d513671 100644
--- a/assets/snapsort/core/src/drag/flow-ghost.ts
+++ b/assets/snapsort/core/src/drag/flow-ghost.ts
@@ -362,7 +362,19 @@ async function startCopyHandoff(session: DragSession): Promise<boolean> {
     throw error;
   }
 
-  session.handoff(cloneItems);
+  try {
+    session.handoff(cloneItems);
+  } catch (error) {
+    // Native capture can reject a destination that disappeared between the
+    // framework flush and the handoff. Retire those transient clones through
+    // framework state before propagating the input failure.
+    for (const { clone, container } of boundClones) {
+      fireItemRemove(container, [clone], session);
+    }
+    await settleMutation();
+    for (const clone of cloneItems) clone.destroy(false);
+    throw error;
+  }
   return true;
 }
 
diff --git a/assets/snapsort/core/src/drag/session.ts b/assets/snapsort/core/src/drag/session.ts
index 2e40b2a..31be4e5 100644
--- a/assets/snapsort/core/src/drag/session.ts
+++ b/assets/snapsort/core/src/drag/session.ts
@@ -1,5 +1,9 @@
 import type { AnimationObject } from "@snap-engine/core/animation";
-import type { dragStartProp, dragProp } from "@snap-engine/core";
+import type {
+  GestureHandoffControl,
+  dragStartProp,
+  dragProp,
+} from "@snap-engine/core";
 import type { Container } from "../container";
 import type { Item } from "../item";
 import {
@@ -55,8 +59,9 @@ function reportDragSessionError(error: unknown): void {
  */
 export class DragSession {
   readonly root: Container;
-  /** Pointer id driving this drag (from `dragStartProp`). Needed to transfer pointer ownership on `handoff`. */
+  /** Pointer id driving this drag (from `dragStartProp`). */
   readonly pointerId: number;
+  readonly #handoffTo: GestureHandoffControl["handoffTo"];
   /**
    * The items being dragged. Stable for the whole gesture EXCEPT across a
    * `handoff` (copy), which replaces the originals with freshly-created clone
@@ -162,6 +167,7 @@ export class DragSession {
     this.itemSet = new Set(items);
     this.strategy = strategy;
     this.pointerId = prop.pointerId;
+    this.#handoffTo = prop.handoffTo;
     this.start = { x: prop.start.x, y: prop.start.y };
     this.pointer = { x: prop.start.x, y: prop.start.y };
   }
@@ -187,6 +193,7 @@ export class DragSession {
     }
     const origins = this.items;
     const pressedIndex = origins.indexOf(this.pressedItem);
+    const nextPressedItem = clones[pressedIndex === -1 ? 0 : pressedIndex];
 
     // Each clone reuses its original's frozen drag snapshot for geometry — the
     // clone visually replaces the original at the pointer, so "as if dragging
@@ -195,16 +202,13 @@ export class DragSession {
       clone.adoptDragSnapshotFrom(origins[i]);
     });
 
+    // Transfer input first. A rejected destination leaves this session owned
+    // by the originals instead of exposing a half-switched copy lifecycle.
+    this.#handoffTo(nextPressedItem);
     this.handoffOrigins = origins;
     this.items = clones;
     this.itemSet = new Set(clones);
-    this.pressedItem = clones[pressedIndex === -1 ? 0 : pressedIndex];
-
-    // Retarget the input pointer so drag/dragEnd now dispatch to the clone.
-    this.root.engine.input.setPointerDragOwner(
-      this.pointerId,
-      this.pressedItem,
-    );
+    this.pressedItem = nextPressedItem;
   }
 
   /** The run head — lowest original index, first element of `items`. Used as the singular `item` in backwards-compatible event fields. */
@@ -254,6 +258,7 @@ export class DragSession {
 
     item.schedule(
       () => {
+        if (this.#isEnded()) return;
         this.pointer = { x: prop.start.x, y: prop.start.y };
         this.start = { x: prop.start.x, y: prop.start.y };
         this.offset = {
@@ -269,6 +274,7 @@ export class DragSession {
 
     item.schedule(
       async () => {
+        if (this.#isEnded()) return;
         const primary = this.primaryItem;
         let vetoed = false;
         try {
@@ -348,9 +354,18 @@ export class DragSession {
 
   #cancelAfterError(error: unknown): void {
     reportDragSessionError(error);
+    this.cancel();
+  }
+
+  /** @internal Unwinds an input-cancelled drag without committing a drop. */
+  cancel(): void {
     if (this.status === "dropping" || this.status === "ended") return;
 
     this.cancelled = true;
+    if (this.status === "pending") {
+      this.#clearSessionState();
+      return;
+    }
     this.status = "dropping";
     this.dragTransformSyncAnimation?.cancel();
     this.dragTransformSyncAnimation = null;
@@ -491,9 +506,7 @@ export class DragSession {
         this.dropTarget = null;
         await lifecycle.removeGhost(this, "target");
         this.#invalidateVisualGeometry(
-          previousGhostLocation
-            ? [previousGhostLocation.container]
-            : [],
+          previousGhostLocation ? [previousGhostLocation.container] : [],
           "ghost",
         );
         this.fireDropTargetChange(previousGhostLocation, null);
diff --git a/assets/snapsort/core/src/item.ts b/assets/snapsort/core/src/item.ts
index c0e3122..c3074a2 100644
--- a/assets/snapsort/core/src/item.ts
+++ b/assets/snapsort/core/src/item.ts
@@ -1690,6 +1690,7 @@ export class Item extends ElementObject {
    * @returns
    */
   dragStart(prop: dragStartProp) {
+    if (prop.objectId !== this.id) return;
     if (this.#locked) return;
 
     // Take a snapshot of the current state.
@@ -1742,20 +1743,27 @@ export class Item extends ElementObject {
    * @param prop Drag position property containing mouse coordinates.
    */
   drag(prop: dragProp) {
+    if (prop.objectId !== this.id) return;
     const session = this.rootContainer.dragSession;
     if (!session || session.status !== "active") return;
     session.pointerMove(prop);
   }
 
   dragEnd(prop: dragEndProp) {
+    if (prop.objectId !== this.id) return;
     const session = this.rootContainer.dragSession;
-    if (!session || session.status !== "active") {
+    if (!session) {
       // Defensive cleanup in case a veto or stale session left visual state
       // behind (e.g. onDragStart returned false after the dataset flag was
       // set on a previous, unrelated gesture).
       if (this.element) delete this.element.dataset.snapsortDragging;
       return;
     }
+    if (prop.cancelled || session.status === "pending") {
+      session.cancel();
+      return;
+    }
+    if (session.status !== "active") return;
     session.status = "dropping";
     session.dragTransformSyncAnimation?.cancel();
     session.dragTransformSyncAnimation = null;
diff --git a/docs/snapengine/introduction/04_input_system.mdx b/docs/snapengine/introduction/04_input_system.mdx
index 827bd26..c49fd3f 100644
--- a/docs/snapengine/introduction/04_input_system.mdx
+++ b/docs/snapengine/introduction/04_input_system.mdx
@@ -8,8 +8,11 @@ sectionTitle: Introduction
 sectionOrder: 1
 ---
 
-SnapEngine normalizes mouse, touch, wheel, drag, and pinch input into one event model. 
-It also handles common edge cases like a mouse leaving the browser while dragging.
+SnapEngine normalizes pointer, wheel, drag, and pinch input into one event
+model. DOM-backed objects use native pointer capture while SnapEngine retains
+gesture recognition, object routing, and engine-wide fan-out. Capture begins
+when a drag or pinch is recognized so pre-threshold controls retain native
+click targeting.
 
 SnapEgnine objects can all listen to three types of events: pointer event, drag event, and gesture event.
 
@@ -36,7 +39,7 @@ even when the pointer leaves the browser window or the original element.
 
 The engine defines these drag events:
 - dragStart
-- dragMove
+- drag
 - dragEnd
 
 These events provide the same world coordinate positions as pointer events 
@@ -58,9 +61,16 @@ These events provide information about multi-touch gestures like pinches.
 
 ## Global and Local Event
 
-All events listed above can either happen locally (when the pointer is within the bounds of the ElementObject) 
-or globally (triggered for every listener regardless of where the pointer is). 
-BaseObjects can only listen to global events.
+Targeted events begin at the DOM-owning `ElementObject` and bubble through its
+`BaseObject` parents, leaf to root. Engine-wide listeners run afterward.
+`claimPointer()` suppresses the global delivery for an active pointer without
+changing targeted delivery.
+
+An active `dragStart`, `drag`, `pinchStart`, or `pinch` payload exposes
+`handoffTo(objectOrId)`. Drag handoff transfers native capture and logical
+pointer ownership to a connected DOM-backed object. Pinch handoff transfers
+only pinch delivery; each finger retains the capture and pointer/drag owner
+from where it started. Pointer and terminal payloads do not expose handoff.
 
 
 For event names, payload shapes, object-level handlers, global handlers, and gesture examples, see [Input System reference](/docs/snapengine/reference/input_system).
diff --git a/docs/snapengine/introduction/06_collision.mdx b/docs/snapengine/introduction/06_collision.mdx
index 5e504cb..97d9e36 100644
--- a/docs/snapengine/introduction/06_collision.mdx
+++ b/docs/snapengine/introduction/06_collision.mdx
@@ -14,4 +14,9 @@ The collision system supports rectangular, circular, and point shapes. Each coll
 
 Collision callbacks distinguish the start of contact, continuing overlap, and the end of contact. This lets interactions respond once when contact begins, every frame while contact continues, or when two objects separate.
 
+For synchronous hit testing, `collisionEngine.queryPoint({ x, y })` returns
+every registered collider containing the world-space point. It reads current
+transforms directly and preserves collider registration order; callers apply
+their own input, label, or admission policy.
+
 For collider constructors, event callbacks, collision engine setup, and examples, see [Collision reference](/docs/snapengine/reference/collision).
diff --git a/docs/snapengine/reference/collision.mdx b/docs/snapengine/reference/collision.mdx
index ea2d1ff..d2a6896 100644
--- a/docs/snapengine/reference/collision.mdx
+++ b/docs/snapengine/reference/collision.mdx
@@ -50,6 +50,11 @@ playerCollider.event.collider.onBeginContact = (self, other) => {
 playerCollider.event.collider.onEndContact = (self, other) => {
   console.log("Collision ended", self, other);
 };
+
+const hits = engine.collisionEngine.queryPoint(pointerWorldPosition);
+for (const collider of hits) {
+  console.log("Point hit", collider.parent);
+}
 ```
 
 ## Collider Constructors
@@ -95,6 +100,7 @@ collider.event.collider.onEndContact = (self, other) => {
 | `collisionEngine.addObject(collider)` | Registers a collider. Usually called through `object.addCollider()`. |
 | `collisionEngine.removeObject(id)` | Removes a collider by symbol id. |
 | `collisionEngine.detectCollisions()` | Runs collision detection. |
+| `collisionEngine.queryPoint({ x, y })` | Synchronously returns all current point hits in collider registration order. |
 | `collisionEngine.isIntersecting(a, b)` | Checks two colliders directly. |
 | `new RectCollider(engine, parent, localX, localY, width, height)` | Creates a rectangular collider. |
 | `new CircleCollider(engine, parent, localX, localY, radius)` | Creates a circular collider. |
diff --git a/docs/snapengine/reference/input_system.mdx b/docs/snapengine/reference/input_system.mdx
index ba1ee88..c18a1aa 100644
--- a/docs/snapengine/reference/input_system.mdx
+++ b/docs/snapengine/reference/input_system.mdx
@@ -27,6 +27,7 @@ object.event.input.pointerMove = (props) => {
 
 object.event.input.pointerUp = (props) => {
   console.log(props.position.screenX, props.position.screenY);
+  console.log(props.cancelled);
 };
 
 object.event.input.mouseWheel = (props) => {
@@ -60,9 +61,36 @@ object.event.input.drag = (props) => {
 
 object.event.input.dragEnd = (props) => {
   console.log(props.end.x, props.end.y);
+  console.log(props.event.target, props.cancelled);
 };
 ```
 
+### Gesture handoff
+
+Only active derived gestures expose handoff: `dragStart`, `drag`,
+`pinchStart`, and `pinch`. The destination may be a connected
+`ElementObject` or its engine object ID.
+
+```ts
+handle.event.input.dragStart = (props) => {
+  props.handoffTo(draggable);
+};
+```
+
+Drag handoff transfers native pointer capture and changes targeted delivery
+for later drag events. It does not emit cancellation to the previous owner and
+does not turn global subscriptions into owner callbacks. Invalid, destroyed,
+cross-engine, headless, or disconnected destinations throw synchronously.
+Pinch handoff moves only `pinch`/`pinchEnd` delivery; each finger's native
+capture and pointer/drag delivery remain with its origin.
+
+Native capture begins when a drag or pinch is recognized, not on
+`pointerDown`, so nested buttons and other pre-threshold controls retain their
+normal click targeting.
+
+`handoffTo` is intentionally absent from `pointerDown`, `pointerMove`,
+`pointerUp`, `dragEnd`, and `pinchEnd`.
+
 ## Pinch Gestures
 
 ```ts
@@ -72,15 +100,26 @@ object.event.input.pinchStart = (props) => {
 };
 
 object.event.input.pinch = (props) => {
-  const scale = props.distance / props.start.distance;
+  const scale = props.current.distance / props.start.distance;
   console.log(scale);
 };
 
 object.event.input.pinchEnd = (props) => {
   console.log(props.end.pointerList);
+  console.log(props.cancelled);
 };
 ```
 
+## Targeted bubbling and global fan-out
+
+Targeted handlers run on a snapshot of the original owner-to-parent path,
+leaf first. A handler failure is isolated, so later ancestors and global
+listeners still run. There is no propagation-stop API.
+
+Global listeners run after targeted delivery. Claiming a pointer suppresses
+non-terminal global delivery for that gesture; terminal events still fan out
+so already-engaged listeners can clean up.
+
 ## Event Position
 
 | Property | Description |
diff --git a/docs/snapline/design/current-architecture.md b/docs/snapline/design/current-architecture.md
index 794567e..5277087 100644
--- a/docs/snapline/design/current-architecture.md
+++ b/docs/snapline/design/current-architecture.md
@@ -85,8 +85,8 @@ application's records and mounted components.
    `GraphRegistry` under its domain id (`config.id` or minted).
 2. The adapter assigns the committed DOM element and calls
    `remeasureDomGeometry()` (nodes) / relies on the connector's scheduled
-   local-center measurement. A connector may stay headless (virtual) and use
-   surface strategies for hit testing and anchors.
+   local-center measurement. A connector always binds an HTML or SVG input
+   root; custom SVG strokes can use native `pointer-events="stroke"`.
 3. Connector registration schedules a reconciliation pass — a newly mounted
    endpoint may make a latent canonical line representable.
 4. On unmount, `destroy()` unregisters the mirror; connector/node teardown
@@ -95,7 +95,8 @@ application's records and mounted components.
 
 Connector policy updates in place through `updateConfig()`; `name` is a
 construction-time key in the parent node's map. `bindElement()` attaches or
-detaches the optional visible port without destroying the logical connector.
+detaches the developer-rendered HTML or SVG input root without destroying the
+logical connector.
 
 ### Lines: the controlled protocol
 
@@ -327,9 +328,6 @@ same registry reads and were removed.
 
 `SnapLineSharedData` (typed by `internal/shared-data.ts`) now holds only:
 
-- `sourceSurfaces` — engine core's `input.ts` duck-reads this to route
-  pointerdowns to headless connector surfaces (engine core cannot import
-  snapline, so the contract is structural and lives on the shared bag);
 - the `graphRegistries` WeakMap keying each engine to its `GraphRegistry`
   (GlobalManager is application-wide; the WeakMap lets a destroyed engine
   release its registry);
@@ -377,7 +375,7 @@ The packages export raw TypeScript source and are pre-1.0.
 | Controllers | `RectSelectController`, `PlacementController` |
 | Controlled graph | `attachControlledGraph`; types `LineRecord`, `CanonicalGraphSnapshot`, `LineChangeRequest`, `ProposedLine`, `LineEndpointUpdate`, `ControlledGraphCallbacks`, `ControlledGraphHandle` |
 | Identity/diagnostics | types `NodeId`, `ConnectorId`, `LineId`, `ReconciliationError`, `GraphBatch` |
-| Queries | `query` (+ `GraphQuery`), `getParentGroup`, `setGroupMembershipResolver`, `resolveConnectorSourceAtPoint` |
+| Queries | `query` (+ `GraphQuery`), `getParentGroup`, `setGroupMembershipResolver` |
 | Config/callback types | `NodeConfig`/`NodeCallbacks` (incl. `GeometryChangeEvent`), `ConnectorConfig`/`ConnectorRules`/`ConnectorCallbacks`/`ConnectionProposal`, line/group/select/placement types |
 
 The package has a single entry point (`.`). The per-module subpath exports were
diff --git a/docs/snapline/design/planned-rearchitecture.md b/docs/snapline/design/planned-rearchitecture.md
index 9b39083..815977e 100644
--- a/docs/snapline/design/planned-rearchitecture.md
+++ b/docs/snapline/design/planned-rearchitecture.md
@@ -47,8 +47,8 @@ The final simplification review has landed: the gesture and record admission
 checks share one structural check plus one predicate check, the settle path's
 redundant eviction block and the reconciler's unused local-topology notify
 forwarding are gone, remaining single-class `_`-prefixed fields moved to `#`
-privates (with `_connectors` documented as the one deliberate cross-class
-field), and an informational perf benchmark
+privates, connector membership is encapsulated behind `NodeMirror`'s internal
+attachment boundary, and an informational perf benchmark
 (`tests/ut/snapline-perf.spec.ts`) guards the reconcile / candidate-discovery
 / bulk-load hot paths. The complete verification matrix — unit suites, all
 six SnapLine e2e suites, package validation, and the docs e2e — passes.
diff --git a/docs/snapline/guides/06_surface_connectors.mdx b/docs/snapline/guides/06_surface_connectors.mdx
index 1778852..7a2dc89 100644
--- a/docs/snapline/guides/06_surface_connectors.mdx
+++ b/docs/snapline/guides/06_surface_connectors.mdx
@@ -7,26 +7,39 @@ sectionOrder: 2
 ---
 
 Ordinary SnapLine connectors are visible ports with circular hit areas and
-center anchors. A surface connector keeps the same connection lifecycle while
-letting the application define where a gesture can start, where it can land,
-and where a line attaches.
+center anchors. A custom-root connector keeps the same connection lifecycle
+while letting the application render the source input shape, customize target
+admission, and decide where a line attaches.
 
-Use a surface connector for diagrams whose boxes, circles, or other shapes act
-as their own ports:
+Use an SVG path with native stroke hit testing when a box, circle, or other
+shape should act as its own port:
 
 ```svelte
-<Connector
-  id="node-1:surface"
-  name="surface"
-  virtual
-  rules={{
-    maxOutgoing: "unlimited",
-    maxIncoming: "unlimited",
-    reconnect: false,
-    allowParallel: true
-  }}
-  {surfaceStrategies}
-/>
+<svg viewBox="0 0 160 80">
+  <Connector
+    id="node-1:surface"
+    name="surface"
+    rules={{
+      maxOutgoing: "unlimited",
+      maxIncoming: "unlimited",
+      reconnect: false,
+      allowParallel: true
+    }}
+    colliderRadius={100}
+    {surfaceStrategies}
+  >
+    {#snippet children(bindConnector)}
+      <path
+        use:bindConnector
+        d={borderPath}
+        fill="none"
+        stroke="transparent"
+        stroke-width="16"
+        pointer-events="stroke"
+      />
+    {/snippet}
+  </Connector>
+</svg>
 ```
 
 The `rules` shown override defaults of `maxOutgoing: "unlimited"`,
@@ -36,19 +49,39 @@ incoming lines and parallel edges, while `onFull: "replace-oldest"` suits a
 single-input port that should adopt the newest connection instead of
 rejecting it.
 
-`virtual` omits the connector element. The logical `ConnectorMirror` still
-belongs to its node, participates in connection policy, and owns its lines.
-Source surfaces are registered with the engine's input router, so their hit
-area may extend beyond the parent node's DOM box (for example, a 16-pixel rim
-around a shape). A visible connector under the pointer still wins over a wider
-virtual surface; otherwise matching surfaces are considered before the node or
-background starts its ordinary gesture.
+The snippet action binds that path to the logical `ConnectorMirror`. SnapEngine
+then uses ordinary DOM event targeting and pointer capture for the source
+gesture; there is no separate headless input route. Make a transparent stroke
+wide enough for the desired hit area, or bind any other HTML/SVG element whose
+native pointer area matches the interaction.
+
+React's equivalent is a render function:
+
+```tsx
+<svg viewBox="0 0 160 80">
+  <Connector
+    name="surface"
+    colliderRadius={100}
+    surfaceStrategies={surfaceStrategies}
+  >
+    {({ ref }) => (
+      <path
+        ref={ref}
+        d={borderPath}
+        fill="none"
+        stroke="transparent"
+        strokeWidth={16}
+        pointerEvents="stroke"
+      />
+    )}
+  </Connector>
+</svg>
+```
 
 The Svelte and React adapters apply connector prop changes to the existing
-core object. Toggling `virtual` safely detaches or mounts the visible port
-without deleting connector topology. Vanilla integrations can update the same
-runtime options with `connector.updateConfig(...)`; `name` remains
-construction-only.
+core object. Vanilla integrations can update the same runtime options with
+`connector.updateConfig(...)` and bind an HTML or SVG root with
+`connector.bindElement(...)`; `name` remains construction-only.
 
 Use the connector's `onPointerDown` callback for selection or other UI that
 must happen as soon as the surface claims the pointer. It receives the
@@ -57,24 +90,28 @@ connector, normalized position, pointer ID, and original `PointerEvent`;
 
 ## Hit testing
 
-A `ConnectorSurfaceStrategy` may provide separate `sourceHitTest` and
-`targetHitTest` callbacks. Callbacks receive the pointer in SnapEngine world,
-camera, and screen coordinates together with a cached geometry snapshot. They
-return a projected anchor and a score:
+A `ConnectorSurfaceStrategy` may provide `targetHitTest` and `resolveAnchor`.
+Target callbacks receive the pointer in SnapEngine world, camera, and screen
+coordinates together with a cached geometry snapshot. They return a projected
+anchor and a score:
 
 ```ts
 const borderSurface: ConnectorSurfaceStrategy = {
-  sourceHitTest: ({ position, geometry }) => hitBorder(position, geometry),
   targetHitTest: ({ position, geometry }) => hitBorder(position, geometry),
   resolveAnchor: ({ geometry, peerGeometry, position }) =>
     boundaryToward(geometry, peerGeometry?.center ?? position),
 };
 ```
 
-Return `null` or `false` for a miss. When several surfaces match, SnapLine sorts
-by priority, then distance, then falls back to internal object identity order
-and strategy order for exact ties. This makes overlapping targets
-deterministic without requiring DOM z-index tricks.
+Target discovery first asks `collisionEngine.queryPoint()` for every connector
+collider under the pointer, in collider registration order. Set
+`colliderRadius` large enough to enclose a custom target shape.
+`targetHitTest` then applies the connector-specific narrow policy; when at
+least one target hit test is configured, its hits replace the default
+center candidate. Return `null` or `false` for a miss. When several targets
+match, SnapLine sorts by priority, then distance, then falls back to internal
+object identity order and strategy order for exact ties. This makes
+overlapping targets deterministic without requiring DOM z-index tricks.
 
 The geometry passed to callbacks is measured during SnapLine's read phase.
 Surface callbacks should use that snapshot instead of calling
@@ -82,9 +119,11 @@ Surface callbacks should use that snapshot instead of calling
 
 ## Preview and settled anchors
 
-Hit testing and line attachment are separate:
+Source targeting, target snapping, and line attachment are separate:
 
-- Source and target hits decide whether the pointer is on a valid surface.
+- The bound DOM root decides whether a source gesture starts.
+- The connector collider and optional target hit test decide whether a target
+  is under the pointer.
 - `resolveAnchor` projects each endpoint for free previews, target previews,
   drops, and settled connections.
 - Settled anchors are resolved again whenever either node moves or resizes.
diff --git a/docs/snapline/reference/react/connector.mdx b/docs/snapline/reference/react/connector.mdx
index f65ab83..e0f59a7 100644
--- a/docs/snapline/reference/react/connector.mdx
+++ b/docs/snapline/reference/react/connector.mdx
@@ -18,17 +18,42 @@ forwarded ref is a `ConnectorRef` whose `object()` returns the mirror.
 | `name` | **Required.** The connector's key within its parent node |
 | `rules` | `Partial<ConnectorRules>` admission rules (see below) |
 | `metadata` | `SnapLineMetadata` attached to the connector |
-| `callbacks` | `ConnectorCallbacks` (pointer, candidate, connection events) |
-| `surfaceStrategies` | Custom source/target hit-test and anchor strategies |
-| `virtual` | Keep the logical connector without rendering a port element; surfaces resolve against the parent node |
-| `colliderRadius` | Pointer pickup radius override |
+| `callbacks` | `ConnectorCallbacks` (new-line payload resolver plus pointer, candidate, and connection events) |
+| `surfaceStrategies` | Custom target hit-test and anchor strategies |
+| `children` | Render function receiving `{ ref }`; attach the callback ref to one custom HTML or SVG input root |
+| `colliderRadius` | Target snapping radius override |
 | `edgePan` | Pan the camera when dragging a line near the viewport edge (default `true`) |
 | `connectorObject` | Adopt an existing `ConnectorMirror` |
 | `className`, `style` | Presentation for the port element |
 | `data` | Extra `data-*` attributes for the port element |
 
 `name` and `connectorObject` are construction-time identities; every other
-prop updates across renders, including `virtual`.
+prop updates across renders.
+
+Without `children`, `Connector` renders its default port `div`. A custom root
+can be an SVG stroke:
+
+```tsx
+<svg viewBox="0 0 160 80">
+  <Connector name="surface">
+    {({ ref }) => (
+      <path
+        ref={ref}
+        d="M 0 0 H 160 V 80 H 0 Z"
+        fill="none"
+        stroke="transparent"
+        strokeWidth={16}
+        pointerEvents="stroke"
+      />
+    )}
+  </Connector>
+</svg>
+```
+
+The custom element is the native source hit area. SnapLine does not run a
+manual source hit test. For target snapping, set `colliderRadius` large enough
+to enclose the custom shape; any configured `targetHitTest` callbacks replace
+the default center candidate inside that broad-phase circle.
 
 ## Connection rules
 
diff --git a/docs/snapline/reference/react/index.mdx b/docs/snapline/reference/react/index.mdx
index b33855f..e61211a 100644
--- a/docs/snapline/reference/react/index.mdx
+++ b/docs/snapline/reference/react/index.mdx
@@ -13,7 +13,7 @@ frameworkKey: overview
 | Component   | Important props                                                                                         |
 | ----------- | ------------------------------------------------------------------------------------------------------- |
 | [`Node`](/docs/snapline/reference/react/node)      | `id`, `nodeObject`, geometry, resize configuration, callbacks, `onGeometryCommit`, `lineComponent`, `elementProps` |
-| [`Connector`](/docs/snapline/reference/react/connector) | `id`, `name` (required), `connectorObject`, `rules`, `virtual`, `surfaceStrategies`, metadata, callbacks |
+| [`Connector`](/docs/snapline/reference/react/connector) | `id`, `name` (required), `connectorObject`, `rules`, custom-root render function, `surfaceStrategies`, metadata, callbacks |
 | [`Line`](/docs/snapline/reference/react/line)      | `line`, SVG presentation                                                                                |
 | [`Select`](/docs/snapline/reference/react/select)    | callbacks and presentation                                                                              |
 | [`Group`](/docs/snapline/reference/react/group)     | node geometry, header content, membership policy and callbacks                                          |
@@ -24,17 +24,18 @@ frameworkKey: overview
 `ConnectorRef`, and `useNodeHandle()` returns a callback ref for a dedicated
 drag surface.
 
-Set `virtual` when a connector should use the parent node's custom shape
-surfaces without rendering a port element. Opaque connection payloads remain on
-`LineMirror`, so a custom `lineComponent` can resolve presentation from
-application-owned edge state. Custom renderers mount static structure and call
+Give `Connector` a render function to use a custom HTML or SVG input root.
+Attach the supplied callback ref to one element; an SVG path with
+`pointerEvents="stroke"` can make a whole node border draggable without a
+headless input route. Opaque connection payloads remain on `LineMirror`, so a
+custom `lineComponent` can resolve presentation from application-owned edge
+state. Custom renderers mount static structure and call
 `line.bindGeometryWriter(...)` from a layout effect to update retained SVG,
 Canvas, or graphics refs without rendering React on pointer movement.
 
 Connector callbacks, metadata, policy, surface strategies, collider radius,
-and edge-pan behavior update across renders. `virtual` can also be
-toggled without replacing the logical connector or its lines. `name` and
-`connectorObject` are construction-time identities.
+and edge-pan behavior update across renders. `name` and `connectorObject` are
+construction-time identities.
 
 Changed geometry props resynchronize the core object. Consumer callback objects
 and convenience callback props are composed, deduplicating the same function
diff --git a/docs/snapline/reference/react/node.mdx b/docs/snapline/reference/react/node.mdx
index a1ca0bf..9fa5373 100644
--- a/docs/snapline/reference/react/node.mdx
+++ b/docs/snapline/reference/react/node.mdx
@@ -18,7 +18,7 @@ frameworkKey: node
 | `x`, `y`, `width`, `height` | World geometry; changed props resynchronize the object |
 | `minWidth`, `minHeight` | Resize floor |
 | `metadata` | `SnapLineMetadata` attached to the node |
-| `callbacks` | `NodeCallbacks` object (drag, selection, resize, lines) |
+| `callbacks` | `NodeCallbacks` object (drag, selection, resize, lines, and `resolveNewLine` payload seeding) |
 | `onGeometryCommit` | Convenience callback; batched final geometry for persistence |
 | `onSizeChange` | Convenience callback for resize events |
 | `edgePan` | Pan the camera when dragging near the viewport edge (default `true`) |
diff --git a/docs/snapline/reference/svelte/connector.mdx b/docs/snapline/reference/svelte/connector.mdx
index b78e5e9..ef84e4c 100644
--- a/docs/snapline/reference/svelte/connector.mdx
+++ b/docs/snapline/reference/svelte/connector.mdx
@@ -17,17 +17,42 @@ frameworkKey: connector
 | `name` | **Required.** The connector's key within its parent node |
 | `rules` | `Partial<ConnectorRules>` admission rules (see below) |
 | `metadata` | `SnapLineMetadata` attached to the connector |
-| `callbacks` | `ConnectorCallbacks` (pointer, candidate, connection events) |
-| `surfaceStrategies` | Custom source/target hit-test and anchor strategies |
-| `virtual` | Keep the logical connector without rendering a port element; surfaces resolve against the parent node |
-| `colliderRadius` | Pointer pickup radius override |
+| `callbacks` | `ConnectorCallbacks` (new-line payload resolver plus pointer, candidate, and connection events) |
+| `surfaceStrategies` | Custom target hit-test and anchor strategies |
+| `children` | Snippet receiving an action; apply it with `use:` to one custom HTML or SVG input root |
+| `colliderRadius` | Target snapping radius override |
 | `edgePan` | Pan the camera when dragging a line near the viewport edge (default `true`) |
 | `connectorObject` | Adopt an existing `ConnectorMirror` |
 | `data` | Extra `data-*` attributes for the port element |
 
 `object()` returns the underlying `ConnectorMirror`. `name` and
 `connectorObject` are construction-time identities; every other prop is
-reactive, including `virtual`.
+reactive.
+
+Without a child snippet, `Connector` renders its default port `div`. A custom
+root can be an SVG stroke:
+
+```svelte
+<svg viewBox="0 0 160 80">
+  <Connector name="surface">
+    {#snippet children(bindConnector)}
+      <path
+        use:bindConnector
+        d="M 0 0 H 160 V 80 H 0 Z"
+        fill="none"
+        stroke="transparent"
+        stroke-width="16"
+        pointer-events="stroke"
+      />
+    {/snippet}
+  </Connector>
+</svg>
+```
+
+The custom element is the native source hit area. SnapLine does not run a
+manual source hit test. For target snapping, set `colliderRadius` large enough
+to enclose the custom shape; any configured `targetHitTest` callbacks replace
+the default center candidate inside that broad-phase circle.
 
 ## Connection rules
 
diff --git a/docs/snapline/reference/svelte/index.mdx b/docs/snapline/reference/svelte/index.mdx
index 51b791b..6448d5c 100644
--- a/docs/snapline/reference/svelte/index.mdx
+++ b/docs/snapline/reference/svelte/index.mdx
@@ -13,7 +13,7 @@ Wrap components in `Engine` from `@snap-engine/asset-base-svelte`.
 | Component   | Important props                                                                                        |
 | ----------- | ------------------------------------------------------------------------------------------------------ |
 | [`Node`](/docs/snapline/reference/svelte/node)      | `id`, `nodeObject`, `x`, `y`, `width`, `height`, resize configuration, callbacks, `onGeometryCommit`, `onSizeChange`, `edgePan`, `metadata`, `LineSvelteComponent`, `className`, `elementProps` |
-| [`Connector`](/docs/snapline/reference/svelte/connector) | `id`, `name`, `rules`, `virtual`, `surfaceStrategies`, `colliderRadius`, metadata, callbacks |
+| [`Connector`](/docs/snapline/reference/svelte/connector) | `id`, `name`, `rules`, custom-root snippet, `surfaceStrategies`, `colliderRadius`, metadata, callbacks |
 | [`Line`](/docs/snapline/reference/svelte/line)      | `line`, SVG presentation                                                                               |
 | [`Select`](/docs/snapline/reference/svelte/select)    | `callbacks`, `className`                                                                               |
 | [`Group`](/docs/snapline/reference/svelte/group)     | Node geometry plus `title`, `headerContent`, `canContain`, membership callbacks                        |
@@ -25,17 +25,17 @@ Wrap components in `Engine` from `@snap-engine/asset-base-svelte`.
 exposes its `RectSelectController`. Supplied objects are not destroyed
 when the component unmounts.
 
-A virtual connector renders no port element. Its source and target surfaces are
-resolved against the parent node, which is useful for whole-border diagram
-connections. `LineRecord.payload` stays opaque to the adapter and is
+Give `Connector` a child snippet to use a custom HTML or SVG input root. Apply
+the supplied action to one element; an SVG path with
+`pointer-events="stroke"` can make a whole node border draggable without a
+headless input route. `LineRecord.payload` stays opaque to the adapter and is
 available to custom `LineSvelteComponent` renderers through `LineMirror`.
 Custom renderers register `line.bindGeometryWriter(...)` on mount and mutate
 retained SVG, Canvas, or graphics refs directly.
 
 Connector callbacks, metadata, policy, surface strategies, collider radius,
-and edge-pan behavior are reactive. `virtual` can also be toggled
-without replacing the logical connector or its lines. `name` and
-`connectorObject` are construction-time identities.
+and edge-pan behavior are reactive. `name` and `connectorObject` are
+construction-time identities.
 
 Changed geometry props resynchronize the object deliberately. During a live
 pointer gesture core writes retained element geometry directly; the batched
diff --git a/docs/snapline/reference/svelte/node.mdx b/docs/snapline/reference/svelte/node.mdx
index 5710d58..600d012 100644
--- a/docs/snapline/reference/svelte/node.mdx
+++ b/docs/snapline/reference/svelte/node.mdx
@@ -18,7 +18,7 @@ frameworkKey: node
 | `x`, `y`, `width`, `height` | World geometry; changed props resynchronize the object |
 | `minWidth`, `minHeight` | Resize floor |
 | `metadata` | `SnapLineMetadata` attached to the node |
-| `callbacks` | `NodeCallbacks` object (drag, selection, resize, lines) |
+| `callbacks` | `NodeCallbacks` object (drag, selection, resize, lines, and `resolveNewLine` payload seeding) |
 | `onGeometryCommit` | Convenience callback; batched final geometry for persistence |
 | `onSizeChange` | Convenience callback for resize events |
 | `edgePan` | Pan the camera when dragging near the viewport edge (default `true`) |
diff --git a/docs/snapline/reference/vanilla/connector.mdx b/docs/snapline/reference/vanilla/connector.mdx
index 9dd6640..9ebd7cb 100644
--- a/docs/snapline/reference/vanilla/connector.mdx
+++ b/docs/snapline/reference/vanilla/connector.mdx
@@ -12,12 +12,15 @@ frameworkKey: connector
 gestures. Construct it with
 `new ConnectorMirror(engine, nodeMirror, config)` and register it via
 `nodeMirror.addConnectorObject(connector)`; bind a port element with
-`bindElement(element)` (or leave it virtual and rely on surface strategies).
+`bindElement(element)`. The input root may be an `HTMLElement` or
+`SVGElement`.
 
 `ConnectorConfig` accepts `id`, `name` (the connector's key within its parent
 node), `rules`, `metadata`, `callbacks`, `edgePan`, `surfaceStrategies`,
 and `colliderRadius`. `updateConfig(...)` applies everything
 except the construction-time identities `id` and `name`.
+`callbacks.resolveNewLine` overrides the parent node's resolver when this
+connector starts a genuinely new line.
 
 ## Connection rules
 
@@ -35,11 +38,15 @@ Limits are `number | "unlimited"`; `"unlimited"` normalizes to `Infinity` in
 unlimited-outgoing, single-incoming connector that rejects extra incoming
 lines.
 
-## Surfaces and lookup
+## Custom roots, targets, and anchors
 
-`ConnectorSurfaceStrategy` supplies `sourceHitTest`, `targetHitTest`, and
-`resolveAnchor` for custom shapes. `resolveConnectorSourceAtPoint(engine,
-point)` resolves which connector a pointer position would start a line from.
+The bound DOM element is the source hit area. For custom SVG geometry, bind an
+element such as a path with `pointer-events="stroke"`.
+`ConnectorSurfaceStrategy` supplies `targetHitTest` and `resolveAnchor` for
+custom target policy and endpoint projection. Target discovery begins with
+`collisionEngine.queryPoint(...)`; the connector's collider radius is the
+broad-phase snapping area and should enclose a custom target shape. Configured
+target hit tests replace the default center candidate within that area.
 Enumerate connectors with `query(engine).connectors()`.
 
 > [!WARNING]
diff --git a/docs/snapline/reference/vanilla/node.mdx b/docs/snapline/reference/vanilla/node.mdx
index f835576..35f37ad 100644
--- a/docs/snapline/reference/vanilla/node.mdx
+++ b/docs/snapline/reference/vanilla/node.mdx
@@ -19,8 +19,9 @@ and `edgePan`.
 `NodeCallbacks` covers drag (`canStartDrag`, `resolveDragPosition`,
 `onDragStart`, `onDrag`), selection (`resolveSelectionMode`,
 `onSelectionChange`), resize (`onSizeChange`), lines
-(`onLinesChanged`), and the batched `onGeometryCommit` used for
-persistence.
+(`resolveNewLine`, `onLinesChanged`), and the batched `onGeometryCommit` used
+for persistence. `resolveNewLine` seeds serializable payload onto a newly
+dragged line; a connector-level callback may override it.
 
 ## Resize regions
 
diff --git a/src/AGENTS.md b/src/AGENTS.md
index 04075b3..dbd0a2f 100644
--- a/src/AGENTS.md
+++ b/src/AGENTS.md
@@ -117,6 +117,10 @@ Unified input handling.
 - Mouse and touch normalization
 - Drag gesture detection
 - Object DOM ownership lookup
+- Native pointer capture for DOM-backed owners
+- Drag `handoffTo(...)` for capture/owner transfer and pinch `handoffTo(...)`
+  for pinch-recipient transfer while each pointer retains its origin capture
+- Targeted leaf-to-root object bubbling followed by global fan-out
 
 **Event types:**
 
@@ -134,6 +138,7 @@ Collision detection system.
 - Frame-based detection
 - State tracking
 - Collision callbacks
+- Synchronous ordered `queryPoint(...)` against current transforms
 
 **Collider shapes:**
 
diff --git a/src/collision.ts b/src/collision.ts
index 274c61e..2e12dc4 100644
--- a/src/collision.ts
+++ b/src/collision.ts
@@ -464,6 +464,20 @@ class CollisionEngine {
     }
   }
 
+  /**
+   * Returns every registered collider containing a world-space point.
+   *
+   * The query reads each collider's current transform/shape snapshot directly,
+   * so it does not depend on detectCollisions() having run this frame. Results
+   * preserve collider registration order and are intentionally unfiltered;
+   * callers own any label, admission, or input-target policy.
+   */
+  queryPoint(point: { x: number; y: number }): Collider[] {
+    return this.#objectList.filter((collider) =>
+      collider.containsWorldPoint(point.x, point.y),
+    );
+  }
+
   #updateXCoordinates() {
     for (const entry of this.#sortedXCoordinates) {
       const bounds = entry.collider.getWorldBoundsSnapshot();
diff --git a/src/index.ts b/src/index.ts
index 6803bf5..404e45f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,7 +6,7 @@ import {
   BaseObject,
   ObjectTransform,
 } from "./object";
-import type { DomProperty } from "./object";
+import type { DomElement, DomProperty } from "./object";
 import { GlobalManager } from "./global";
 import { InputControl, mouseButtonBitmap } from "./input";
 import type {
@@ -21,6 +21,7 @@ import type {
   pinchProp,
   pinchEndProp,
   PinchSnapshot,
+  GestureHandoffControl,
   InputControlConfig,
   eventPosition,
 } from "./input";
@@ -57,9 +58,11 @@ export {
   type pinchProp,
   type pinchEndProp,
   type PinchSnapshot,
+  type GestureHandoffControl,
   type InputControlConfig,
   type eventPosition,
   type EdgePanController,
+  type DomElement,
   type DomProperty,
   type CameraConfig,
   mouseButtonBitmap,
diff --git a/src/input.ts b/src/input.ts
index b1bfe2a..fe1767d 100644
--- a/src/input.ts
+++ b/src/input.ts
@@ -1,5 +1,6 @@
 import type { GlobalManager } from "./global";
-import type { ElementObject } from "./object";
+import { BaseObject, ElementObject } from "./object";
+import type { DomElement } from "./object";
 import { reportConsumerError } from "./errors";
 
 export enum mouseButton {
@@ -47,6 +48,11 @@ export interface pointerUpProp {
   objectId: string | null;
   position: eventPosition;
   button: number;
+  cancelled: boolean;
+}
+
+export interface GestureHandoffControl {
+  handoffTo(objectOrId: ElementObject<DomElement> | string): void;
 }
 
 export interface mouseWheelProp {
@@ -56,7 +62,7 @@ export interface mouseWheelProp {
   delta: number;
 }
 
-export interface dragStartProp {
+export interface dragStartProp extends GestureHandoffControl {
   objectId: string | null;
   pointerId: number;
   start: eventPosition;
@@ -64,7 +70,7 @@ export interface dragStartProp {
   isWithinEngine: boolean;
 }
 
-export interface dragProp {
+export interface dragProp extends GestureHandoffControl {
   objectId: string | null;
   pointerId: number;
   start: eventPosition;
@@ -74,11 +80,13 @@ export interface dragProp {
 }
 
 export interface dragEndProp {
+  event: PointerEvent;
   objectId: string | null;
   pointerId: number;
   start: eventPosition;
   end: eventPosition;
   button: number;
+  cancelled: boolean;
 }
 
 export interface PinchSnapshot {
@@ -86,13 +94,13 @@ export interface PinchSnapshot {
   distance: number;
 }
 
-export interface pinchStartProp {
+export interface pinchStartProp extends GestureHandoffControl {
   objectId: string | null;
   gestureID: string;
   start: PinchSnapshot;
 }
 
-export interface pinchProp {
+export interface pinchProp extends GestureHandoffControl {
   objectId: string | null;
   gestureID: string;
   start: PinchSnapshot;
@@ -105,6 +113,7 @@ export interface pinchEndProp {
   start: PinchSnapshot;
   current: PinchSnapshot;
   end: PinchSnapshot;
+  cancelled: boolean;
 }
 
 export interface InputEventCallback {
@@ -129,7 +138,7 @@ export type pointerData = {
   id: number; // pointer id
   callerObjectId: string | null; // ID of the object that triggered the pointer event
   timestamp: number; // Timestamp of the pointer event
-  x: number; // Screen-space x coordinate
+  x: number; // Screen-space coordinates
   y: number;
   startX: number;
   startY: number;
@@ -143,7 +152,7 @@ export type pointerData = {
 };
 
 const INPUT_CONTROL_EVENT_SUBSCRIPTION_ID = "__input_control_event__";
-const DRAG_START_THRESHOLD_PX = 3;
+const DRAG_START_THRESHOLD_PX = 0;
 
 type InputEventPayloadMap = {
   pointerDown: pointerDownProp;
@@ -167,36 +176,36 @@ type GlobalCallbackRegistry = Record<
 >;
 
 type TrackedPointer = pointerData & {
-  owner: ElementObject | null;
-  currentOwner: ElementObject | null;
-  /**
-   * When true, GLOBAL listeners no longer receive this pointer's events
-   * (pointerDown/Move, dragStart/drag; pinches involving it; and wheel while
-   * any claim is held) — owner dispatch is unaffected, and end events
-   * (pointerUp/dragEnd/pinchEnd) always deliver so an already-engaged global
-   * listener can terminate cleanly. The claim dies with this entry (pointer
-   * up/cancel), so it can never be stranded by a destroyed owner.
-   */
+  dragState: "pending" | "drag";
+  owner: ElementObject<DomElement> | null;
+  currentOwner: ElementObject<DomElement> | null;
+  captureElement: DomElement | null;
+  originElement: DomElement | null;
+  lastEvent: PointerEvent;
+  finalizing: boolean;
   claimed: boolean;
 };
 
-interface dragGesture {
-  type: "drag";
-  state: "pending" | "drag" | "release";
-  member: ElementObject | null;
-  pointerId: number;
-}
-
-interface pinchGesture {
-  type: "pinch";
-  state: "idle" | "pinch" | "release";
-  member: ElementObject | null;
+interface PinchGesture {
+  member: ElementObject<DomElement> | null;
+  memberElement: DomElement | null;
   pointerId0: number;
   pointerId1: number;
   start: PinchSnapshot;
   current: PinchSnapshot;
 }
 
+type HandoffDestination = {
+  object: ElementObject<DomElement>;
+  element: DomElement;
+};
+
+type FinalizePointerOptions = {
+  event: PointerEvent;
+  cancelled: boolean;
+  dispatchTerminal?: boolean;
+};
+
 /**
  * Configuration options for input handling.
  */
@@ -238,11 +247,11 @@ class InputControl {
   #containerController: AbortController | null = null;
   #document: Document;
   #documentController: AbortController | null = null;
-  #elementByObjectId: Map<string, HTMLElement>;
+  #elementByObjectId: Map<string, DomElement>;
   #engine: any;
-  #gestureDict: { [key: string]: dragGesture | pinchGesture };
-  #objectByElement: WeakMap<HTMLElement, ElementObject>;
-  #pointerDict: { [key: number]: TrackedPointer };
+  #objectByElement: WeakMap<DomElement, ElementObject<DomElement>>;
+  #pinches: Map<string, PinchGesture>;
+  #pointers: Map<number, TrackedPointer>;
   global: GlobalManager | null;
   globalCallbacks: GlobalCallbackRegistry;
   #event: InputEventCallback;
@@ -264,9 +273,9 @@ class InputControl {
     this.config = { ...DEFAULT_INPUT_CONTROL_CONFIG, ...config };
 
     this.#elementByObjectId = new Map();
-    this.#gestureDict = {};
     this.#objectByElement = new WeakMap();
-    this.#pointerDict = {};
+    this.#pinches = new Map();
+    this.#pointers = new Map();
 
     this.globalCallbacks = this.#createGlobalCallbackRegistry();
     this.#event = this.#createInputEventCallback();
@@ -296,10 +305,11 @@ class InputControl {
   }
 
   bindContainer(container: HTMLElement) {
+    this.#finalizeAllPointers(false);
     this.#destroyListeners();
     this.#container = container;
-    this.#pointerDict = {};
-    this.#gestureDict = {};
+    this.#pointers.clear();
+    this.#pinches.clear();
 
     this.#containerController = new AbortController();
     this.#documentController = new AbortController();
@@ -327,25 +337,52 @@ class InputControl {
     this.#document.addEventListener("pointercancel", this.#onPointerCancel, {
       signal: this.#documentController.signal,
     });
+    this.#document.addEventListener(
+      "lostpointercapture",
+      this.#onLostPointerCapture,
+      {
+        signal: this.#documentController.signal,
+      },
+    );
   }
 
   destroy() {
+    this.#finalizeAllPointers(false); // Cancel all ongoing gestures
     this.#destroyListeners();
     this.globalCallbacks = this.#createGlobalCallbackRegistry();
     this.#container = null;
     this.#elementByObjectId.clear();
-    this.#gestureDict = {};
     this.#objectByElement = new WeakMap();
-    this.#pointerDict = {};
+    this.#pinches.clear();
+    this.#pointers.clear();
   }
 
-  registerObjectElement(object: ElementObject, element: HTMLElement) {
+  /**
+   * Register an object so it can be tracked for input events.
+   * @param object - The ElementObject to register.
+   * @param element - The DOM element to associate with the object.
+   */
+  registerObjectElement(
+    object: ElementObject<DomElement>,
+    element: DomElement,
+  ) {
     this.unregisterObjectElement(object);
     this.#objectByElement.set(element, object);
     this.#elementByObjectId.set(object.id, element);
   }
 
-  unregisterObjectElement(object: ElementObject, element?: HTMLElement) {
+  /**
+   * Unregister an object so it no longer receives input events
+   * tracked by SnapEngine.
+   * @param object - The ElementObject to unregister.
+   * @param element - The DOM element to disassociate from the object.
+   *                  Required if the element is not the same as the one
+   *                  stored in object.element.
+   */
+  unregisterObjectElement(
+    object: ElementObject<DomElement>,
+    element?: DomElement,
+  ) {
     const registeredElement =
       element ?? this.#elementByObjectId.get(object.id) ?? null;
     if (
@@ -362,67 +399,48 @@ class InputControl {
       this.#elementByObjectId.delete(object.id);
     }
 
-    for (const pointer of Object.values(this.#pointerDict)) {
-      if (pointer.owner === object) {
-        pointer.owner = null;
-        pointer.callerObjectId = null;
-      }
-      if (pointer.currentOwner === object) {
-        pointer.currentOwner = null;
-      }
-    }
-
-    for (const gesture of Object.values(this.#gestureDict)) {
-      if (gesture.member === object) {
-        gesture.member = null;
-      }
-    }
-  }
-
-  setPointerDragOwner(pointerId: number, owner: ElementObject | null) {
-    const pointer = this.#pointerDict[pointerId];
-    if (pointer) {
-      pointer.owner = owner;
-      pointer.callerObjectId = this.#getOwnerId(owner);
+    const affectedPointers = new Set(
+      [...this.#pointers.values()].filter(
+        (pointer) =>
+          pointer.owner === object ||
+          pointer.currentOwner === object ||
+          pointer.captureElement === registeredElement,
+      ),
+    );
+    for (const gesture of this.#pinches.values()) {
+      if (gesture.member !== object) continue;
+      const pointer0 = this.#pointers.get(gesture.pointerId0);
+      const pointer1 = this.#pointers.get(gesture.pointerId1);
+      if (pointer0) affectedPointers.add(pointer0);
+      if (pointer1) affectedPointers.add(pointer1);
     }
-
-    const gesture = this.#gestureDict[pointerId];
-    if (gesture?.type === "drag") {
-      gesture.member = owner;
+    for (const pointer of affectedPointers) {
+      this.#finalizePointer(pointer, {
+        event: pointer.lastEvent,
+        cancelled: true,
+      });
     }
   }
 
-  /**
-   * Claims a pointer for its current gesture: GLOBAL listeners stop receiving
-   * that pointer's events (down/move, dragStart/drag; pinches involving it;
-   * wheel while any claim is held). Owner dispatch is unaffected, and end
-   * events (pointerUp/dragEnd/pinchEnd) still deliver so an already-engaged
-   * global listener can terminate cleanly. Call from a gesture owner's
-   * pointerDown handler (claiming at dragStart is legal but the camera may
-   * already have panned by the drag-start threshold).
-   *
-   * The claim is anchored to the input layer's pointer record and dies with it
-   * on pointer up/cancel — it auto-releases and cannot be stranded, even if
-   * the claiming object is destroyed mid-gesture.
-   */
+  /* Claims a pointer for its current gesture. */
   claimPointer(pointerId: number): void {
-    const pointer = this.#pointerDict[pointerId];
+    const pointer = this.#pointers.get(pointerId);
     if (pointer) pointer.claimed = true;
   }
 
   /** Releases a claim early (rarely needed — claims auto-release on gesture end). */
   releasePointerClaim(pointerId: number): void {
-    const pointer = this.#pointerDict[pointerId];
+    const pointer = this.#pointers.get(pointerId);
     if (pointer) pointer.claimed = false;
   }
 
   #isPointerClaimed(pointerId: number | undefined): boolean {
     if (pointerId === undefined) return false;
-    return this.#pointerDict[pointerId]?.claimed === true;
+    return this.#pointers.get(pointerId)?.claimed === true;
   }
 
   #hasClaimedPointer(): boolean {
-    for (const pointer of Object.values(this.#pointerDict)) {
+    for (const pointer of this.#pointers.values()) {
       if (pointer.claimed) return true;
     }
     return false;
@@ -455,37 +473,238 @@ class InputControl {
     this.#documentController = null;
   }
 
-  #getActiveDragCount(): number {
-    return Object.values(this.#gestureDict).filter(
-      (g) => g.type === "drag" && g.state === "drag",
-    ).length;
+  #captureOn(pointer: TrackedPointer, element: DomElement): void {
+    if (
+      pointer.captureElement === element &&
+      typeof element.hasPointerCapture === "function" &&
+      element.hasPointerCapture(pointer.id)
+    ) {
+      return;
+    }
+    element.setPointerCapture(pointer.id);
+    pointer.captureElement = element;
   }
 
-  #getActiveDragsSortedByTime(): {
-    pointerId: number;
-    gesture: dragGesture;
-    timestamp: number;
-  }[] {
-    const drags: {
-      pointerId: number;
-      gesture: dragGesture;
-      timestamp: number;
-    }[] = [];
-
-    for (const [key, gesture] of Object.entries(this.#gestureDict)) {
-      if (gesture.type !== "drag" || gesture.state !== "drag") continue;
-      const pointerId = parseInt(key, 10);
-      const pointerData = this.#pointerDict[pointerId];
-      if (pointerData) {
-        drags.push({
-          pointerId,
-          gesture,
-          timestamp: pointerData.timestamp,
-        });
+  /**
+   * Call setPointerCapture for the given element,
+   * and update the pointer's captureElement
+   */
+  #capturePointer(
+    pointer: TrackedPointer,
+    element: DomElement | null,
+  ): void {
+    if (
+      !element?.isConnected ||
+      typeof element.setPointerCapture !== "function"
+    ) {
+      return;
+    }
+    try {
+      this.#captureOn(pointer, element);
+    } catch (error) {
+      reportConsumerError(error);
+    }
+  }
+
+  /**
+   * Determine the object and the element to hand off
+   * input controls to, given the object reference or ID.
+   * @param objectOrId
+   * @returns
+   */
+  #resolveHandoffDestination(
+    objectOrId: ElementObject<DomElement> | string,
+  ): HandoffDestination {
+    const object =
+      typeof objectOrId === "string"
+        ? this.global?.getEngineObjectTable(this.#engine)?.[objectOrId]
+        : objectOrId;
+    if (!(object instanceof ElementObject)) {
+      throw new Error(
+        `InputControl.handoffTo: destination must resolve to an ElementObject in this engine.`,
+      );
+    }
+    if (object.engine !== this.#engine || object.isDeleteRequested) {
+      throw new Error(
+        `InputControl.handoffTo: destination ${object.id} is not live in this engine.`,
+      );
+    }
+    const element = this.#elementByObjectId.get(object.id) ?? null;
+    if (
+      !element ||
+      this.#objectByElement.get(element) !== object ||
+      !element.isConnected
+    ) {
+      throw new Error(
+        `InputControl.handoffTo: destination ${object.id} has no connected input element.`,
+      );
+    }
+    return { object, element };
+  }
+
+  #handoffDrag(
+    pointerId: number,
+    objectOrId: ElementObject<DomElement> | string,
+  ): void {
+    const pointer = this.#pointers.get(pointerId);
+    if (
+      !pointer ||
+      pointer.finalizing ||
+      pointer.dragState !== "drag"
+    ) {
+      throw new Error(
+        `InputControl.handoffTo: drag gesture ${pointerId} is no longer active.`,
+      );
+    }
+    const destination = this.#resolveHandoffDestination(objectOrId);
+    if (typeof destination.element.setPointerCapture !== "function") {
+      throw new Error(
+        `InputControl.handoffTo: destination ${destination.object.id} does not support pointer capture.`,
+      );
+    }
+    try {
+      this.#captureOn(pointer, destination.element);
+      pointer.owner = destination.object;
+      pointer.currentOwner = destination.object;
+      pointer.callerObjectId = destination.object.id;
+    } catch (error) {
+      this.#finalizePointer(pointer, {
+        event: pointer.lastEvent,
+        cancelled: true,
+      });
+      throw error;
+    }
+  }
+
+  #handoffPinch(
+    gestureKey: string,
+    objectOrId: ElementObject<DomElement> | string,
+  ): void {
+    const gesture = this.#pinches.get(gestureKey);
+    if (!gesture) {
+      throw new Error(
+        `InputControl.handoffTo: pinch gesture ${gestureKey} is no longer active.`,
+      );
+    }
+    const pointer0 = this.#pointers.get(gesture.pointerId0);
+    const pointer1 = this.#pointers.get(gesture.pointerId1);
+    if (
+      !pointer0 ||
+      !pointer1 ||
+      pointer0.finalizing ||
+      pointer1.finalizing
+    ) {
+      throw new Error(
+        `InputControl.handoffTo: pinch gesture ${gestureKey} is no longer active.`,
+      );
+    }
+
+    const destination = this.#resolveHandoffDestination(objectOrId);
+    gesture.member = destination.object;
+    gesture.memberElement = destination.element;
+  }
+
+  #releasePointerCapture(pointer: TrackedPointer): void {
+    const element = pointer.captureElement;
+    pointer.captureElement = null;
+    if (!element || typeof element.releasePointerCapture !== "function") {
+      return;
+    }
+    try {
+      if (
+        typeof element.hasPointerCapture !== "function" ||
+        element.hasPointerCapture(pointer.id)
+      ) {
+        element.releasePointerCapture(pointer.id);
+      }
+    } catch {
+      // Release is best-effort after DOM removal or implicit browser release.
+    }
+  }
+
+  /**
+   * Common handling for a pointer that has just finished a
+   * gesture, like recording end positions.
+   * @param pointer
+   * @param options.event - The event that triggered the finalization.
+   * @param options.cancelled - Whether the gesture was cancelled.
+   * @param options.dispatchTerminal - Whether to dispatch pointer up
+   *                                   events (default: true).
+   * @returns void
+   */
+  #finalizePointer(
+    pointer: TrackedPointer,
+    {
+      event,
+      cancelled,
+      dispatchTerminal = true,
+    }: FinalizePointerOptions,
+  ): void {
+    if (
+      pointer.finalizing ||
+      this.#pointers.get(pointer.id) !== pointer
+    ) {
+      return;
+    }
+    pointer.finalizing = true;
+    pointer.lastEvent = event;
+    pointer.endX = event.clientX;
+    pointer.endY = event.clientY;
+
+    try {
+      if (dispatchTerminal) {
+        const currentOwner =
+          pointer.captureElement != null
+            ? pointer.owner
+            : this.#getTargetOwner(event);
+        const pointerUp: pointerUpProp = {
+          event,
+          objectId: this.#getOwnerId(currentOwner),
+          position: this.#getCoordinates(event.clientX, event.clientY),
+          button: event.buttons,
+          cancelled,
+        };
+        this.#dispatchObjectEvent(currentOwner, "pointerUp", pointerUp);
+        this.#dispatchGlobalEvent("pointerUp", pointerUp);
+
+        if (
+          pointer.dragState === "drag" ||
+          this.#isPastDragStartThreshold(pointer)
+        ) {
+          this.#fireDragEnd(pointer, pointer.button, event, cancelled);
+        }
       }
+    } finally {
+      this.#endPinchGesturesForPointer(pointer.id, cancelled, dispatchTerminal);
+      this.#releasePointerCapture(pointer);
+      this.#pointers.delete(pointer.id);
     }
+  }
+
+  /**
+   * Finalize all active pointers.
+   * @param dispatchTerminal - Whether to dispatch pointer up events.
+   */
+  #finalizeAllPointers(dispatchTerminal: boolean): void {
+    for (const pointer of [...this.#pointers.values()]) {
+      this.#finalizePointer(pointer, {
+        event: pointer.lastEvent,
+        cancelled: true,
+        dispatchTerminal,
+      });
+    }
+  }
 
-    return drags.sort((a, b) => a.timestamp - b.timestamp);
+  #getActiveDragCount(): number {
+    return [...this.#pointers.values()].filter(
+      (pointer) => pointer.dragState === "drag",
+    ).length;
+  }
+
+  #getActiveDragsSortedByTime(): TrackedPointer[] {
+    return [...this.#pointers.values()]
+      .filter((pointer) => pointer.dragState === "drag")
+      .sort((a, b) => a.timestamp - b.timestamp);
   }
 
   #cancelOldestDrag(): void {
@@ -493,12 +712,10 @@ class InputControl {
     if (drags.length === 0) return;
 
     const oldest = drags[0];
-    const pointerData = this.#pointerDict[oldest.pointerId];
-    if (!pointerData) return;
-
-    this.#fireDragEnd(pointerData, 0);
-    delete this.#gestureDict[oldest.pointerId];
-    delete this.#pointerDict[oldest.pointerId];
+    this.#finalizePointer(oldest, {
+      event: oldest.lastEvent,
+      cancelled: true,
+    });
   }
 
   #enforceMaxDragLimit(): void {
@@ -510,51 +727,37 @@ class InputControl {
     }
   }
 
-  dispatchPointerDown(
-    object: ElementObject,
-    params?: { x?: number; y?: number; buttons?: number; pointerId?: number },
-  ) {
-    const event = new PointerEvent("pointerdown", {
-      clientX: params?.x ?? object.worldTransform.x,
-      clientY: params?.y ?? object.worldTransform.y,
-      buttons: params?.buttons ?? mouseButtonBitmap.LEFT,
-      pointerId: params?.pointerId,
-    });
-    this.#onPointerDown(event, object);
-  }
+  // dispatchPointerDown(
+  //   object: ElementObject<DomElement>,
+  //   params?: { x?: number; y?: number; buttons?: number; pointerId?: number },
+  // ) {
+  //   const event = new PointerEvent("pointerdown", {
+  //     clientX: params?.x ?? object.worldTransform.x,
+  //     clientY: params?.y ?? object.worldTransform.y,
+  //     buttons: params?.buttons ?? mouseButtonBitmap.LEFT,
+  //     pointerId: params?.pointerId,
+  //   });
+  //   this.#onPointerDown(event, object);
+  // }
 
   #onPointerDown = (
     event: PointerEvent,
-    object: ElementObject | null = null,
+    object: ElementObject<DomElement> | null = null,
   ) => {
+    // TODO: Remove in favor of #isCoordinateWithinEngine?
     if (!this.#isEventInsideContainer(event)) {
       return;
     }
 
     const position = this.#getCoordinates(event.clientX, event.clientY);
     const domOwner = this.#getTargetOwner(event);
-    // A visible connector is an explicit hit target. Other DOM owners (nodes,
-    // camera layers, backgrounds) yield to a matching headless source surface.
-    const visibleConnectorOwner =
-      domOwner &&
-      typeof (
-        domOwner as ElementObject & {
-          resolveSourceHit?: unknown;
-        }
-      ).resolveSourceHit === "function"
-        ? domOwner
-        : null;
-    const owner =
-      object ??
-      visibleConnectorOwner ??
-      this.#resolveSourceSurfaceOwner(position) ??
-      domOwner;
+    const owner = object ?? domOwner;
     const isWithinEngine = this.#isCoordinateWithinEngine(
       event.clientX,
       event.clientY,
     );
     // TODO: Use persistentDeviceId if available
-    this.#pointerDict[event.pointerId] = {
+    const pointer: TrackedPointer = {
       id: event.pointerId,
       callerObjectId: owner?.id ?? null,
       timestamp: event.timeStamp,
@@ -569,17 +772,18 @@ class InputControl {
       moveCount: 0,
       button: event.buttons,
       isWithinEngine,
+      dragState: "pending",
       owner,
       currentOwner: owner,
+      captureElement: null,
+      originElement: owner
+        ? (this.#elementByObjectId.get(owner.id) ?? null)
+        : null,
+      lastEvent: event,
+      finalizing: false,
       claimed: false,
     };
-
-    this.#gestureDict[event.pointerId] = {
-      type: "drag",
-      state: "pending",
-      member: owner,
-      pointerId: event.pointerId,
-    };
+    this.#pointers.set(event.pointerId, pointer);
 
     const prop: pointerDownProp = {
       event,
@@ -590,6 +794,7 @@ class InputControl {
     };
 
     this.#dispatchObjectEvent(owner, "pointerDown", prop);
+    if (this.#pointers.get(event.pointerId) !== pointer) return;
     // An owner's pointerDown handler may have claimed the pointer just above.
     if (!this.#isPointerClaimed(event.pointerId)) {
       this.#dispatchGlobalEvent("pointerDown", prop);
@@ -604,20 +809,37 @@ class InputControl {
     if (this.#isEventInsideContainer(event)) {
       return;
     }
-    if (this.#pointerDict[event.pointerId] == null) {
+    if (!this.#pointers.has(event.pointerId)) {
       return;
     }
     this.#handlePointerMove(event);
   };
 
   #handlePointerMove(event: PointerEvent) {
-    const pointer = this.#pointerDict[event.pointerId] ?? null;
+    const pointer = this.#pointers.get(event.pointerId) ?? null;
     const isInsideContainer = this.#isEventInsideContainer(event);
     if (!pointer && !isInsideContainer) {
       return;
     }
 
-    const currentOwner = isInsideContainer ? this.#getTargetOwner(event) : null;
+    const ownerElement = pointer?.owner
+      ? this.#elementByObjectId.get(pointer.owner.id)
+      : null;
+    if (
+      pointer &&
+      ((pointer.captureElement && !pointer.captureElement.isConnected) ||
+        (ownerElement && !ownerElement.isConnected))
+    ) {
+      this.#finalizePointer(pointer, { event, cancelled: true });
+      return;
+    }
+
+    const currentOwner =
+      pointer?.captureElement != null
+        ? pointer.owner
+        : isInsideContainer || pointer
+          ? this.#getTargetOwner(event)
+          : null;
     const position = this.#getCoordinates(event.clientX, event.clientY);
     const prop: pointerMoveProp = {
       event,
@@ -627,6 +849,7 @@ class InputControl {
     };
 
     this.#dispatchObjectEvent(currentOwner, "pointerMove", prop);
+    if (pointer && this.#pointers.get(event.pointerId) !== pointer) return;
     if (!this.#isPointerClaimed(event.pointerId)) {
       this.#dispatchGlobalEvent("pointerMove", prop);
     }
@@ -638,6 +861,7 @@ class InputControl {
         x: event.clientX,
         y: event.clientY,
         currentOwner,
+        lastEvent: event,
       });
       pointer.moveCount++;
       this.#handleDrag(pointer);
@@ -650,63 +874,61 @@ class InputControl {
   };
 
   #onPointerCancel = (event: PointerEvent) => {
-    this.#finishPointer(event);
+    this.#finishPointer(event, true);
   };
 
-  #finishPointer(event: PointerEvent) {
-    const pointer = this.#pointerDict[event.pointerId] ?? null;
+  #onLostPointerCapture = (event: PointerEvent) => {
+    const pointer = this.#pointers.get(event.pointerId) ?? null;
+    const captureElement = pointer?.captureElement ?? null;
+    if (
+      !pointer ||
+      pointer.finalizing ||
+      !captureElement ||
+      event.target !== captureElement
+    ) {
+      return;
+    }
+    // Framework reconciliation may move a still-connected captured subtree.
+    // Browsers can drop native capture during that DOM move even though the
+    // gesture remains valid, so reacquire it while the pointer is still down.
+    // A released pointer, disconnected element, or rejected recapture follows
+    // the normal cancelled-terminal path below.
+    if (event.buttons !== 0 && captureElement.isConnected) {
+      try {
+        this.#captureOn(pointer, captureElement);
+        return;
+      } catch (error) {
+        reportConsumerError(error);
+      }
+    }
+    this.#finalizePointer(pointer, { event, cancelled: true });
+  };
+
+  #finishPointer(event: PointerEvent, cancelled = false) {
+    const pointer = this.#pointers.get(event.pointerId) ?? null;
     const isInsideContainer = this.#isEventInsideContainer(event);
     if (!pointer && !isInsideContainer) {
       return;
     }
 
-    const currentOwner = isInsideContainer ? this.#getTargetOwner(event) : null;
-    const position = this.#getCoordinates(event.clientX, event.clientY);
-    const prop: pointerUpProp = {
-      event,
-      objectId: currentOwner?.id ?? null,
-      position,
-      button: event.buttons,
-    };
-
-    try {
+    // If pointer was lost, treat as normal pointer up
+    if (!pointer) {
+      const currentOwner = isInsideContainer
+        ? this.#getTargetOwner(event)
+        : null;
+      const prop: pointerUpProp = {
+        event,
+        objectId: currentOwner?.id ?? null,
+        position: this.#getCoordinates(event.clientX, event.clientY),
+        button: event.buttons,
+        cancelled,
+      };
       this.#dispatchObjectEvent(currentOwner, "pointerUp", prop);
       this.#dispatchGlobalEvent("pointerUp", prop);
-
-      if (!pointer) {
-        return;
-      }
-
-      pointer.endX = event.clientX;
-      pointer.endY = event.clientY;
-
-      const gesture = this.#gestureDict[event.pointerId];
-      if (gesture?.type === "drag") {
-        // Once a drag has actually started (dragStart was dispatched, so the
-        // gesture is in the "drag" state), releasing must always fire dragEnd —
-        // even if the pointer wandered back near its start point. Re-measuring
-        // the distance at release would misclassify an away-and-back gesture
-        // (e.g. dropping an item back in the same place) as a click and leave
-        // the drag session uncommitted. Only a gesture still "pending" at
-        // release (never crossed the start threshold) is a click.
-        const dragStarted = gesture.state === "drag";
-        gesture.state = "release";
-        if (dragStarted || this.#isPastDragStartThreshold(pointer)) {
-          this.#fireDragEnd(pointer, pointer.button);
-        }
-      }
-    } finally {
-      // Deleting the pointer record is what releases its claim, and a claim
-      // that outlives its gesture suppresses every later global pointerMove
-      // for that pointer id — so this cannot be skippable by anything above.
-      // Only drag gestures are keyed by a bare pointer id (pinches use a
-      // composite key), so the delete matches the old conditional exactly.
-      if (pointer) {
-        delete this.#gestureDict[event.pointerId];
-        this.#endPinchGesturesForPointer(event.pointerId);
-        delete this.#pointerDict[event.pointerId];
-      }
+      return;
     }
+
+    this.#finalizePointer(pointer, { event, cancelled });
   }
 
   #onWheel = (event: WheelEvent) => {
@@ -760,22 +982,17 @@ class InputControl {
   }
 
   #handleDrag(pointer: TrackedPointer) {
-    const gesture = this.#gestureDict[pointer.id];
-    if (!gesture || gesture.type !== "drag") {
-      return;
-    }
-
-    if (gesture.state === "pending") {
+    if (pointer.dragState === "pending") {
       if (!this.#isPastDragStartThreshold(pointer)) {
         return;
       }
-      this.#startDragGesture(pointer, gesture);
-      if (this.#gestureDict[pointer.id] !== gesture) {
+      this.#startDragGesture(pointer);
+      if (this.#pointers.get(pointer.id) !== pointer) {
         return;
       }
     }
 
-    if (gesture.state !== "drag") {
+    if (pointer.dragState !== "drag") {
       return;
     }
 
@@ -789,10 +1006,14 @@ class InputControl {
     );
   }
 
-  #startDragGesture(pointer: TrackedPointer, gesture: dragGesture) {
-    gesture.state = "drag";
+  #startDragGesture(pointer: TrackedPointer) {
+    pointer.dragState = "drag";
+    const ownerElement = pointer.owner
+      ? (this.#elementByObjectId.get(pointer.owner.id) ?? null)
+      : null;
+    this.#capturePointer(pointer, ownerElement);
     this.#enforceMaxDragLimit();
-    if (this.#gestureDict[pointer.id] !== gesture) {
+    if (this.#pointers.get(pointer.id) !== pointer) {
       return;
     }
 
@@ -802,9 +1023,11 @@ class InputControl {
       start: this.#getCoordinates(pointer.startX, pointer.startY),
       button: pointer.button,
       isWithinEngine: pointer.isWithinEngine,
+      handoffTo: (objectOrId) => this.#handoffDrag(pointer.id, objectOrId),
     };
 
     this.#dispatchObjectEvent(pointer.owner, "dragStart", prop);
+    if (this.#pointers.get(pointer.id) !== pointer) return;
     if (!pointer.claimed) {
       this.#dispatchGlobalEvent("dragStart", prop);
     }
@@ -827,16 +1050,24 @@ class InputControl {
         screenY: position.screenY - start.screenY,
       },
       button: pointer.button,
+      handoffTo: (objectOrId) => this.#handoffDrag(pointer.id, objectOrId),
     };
 
     this.#dispatchObjectEvent(pointer.owner, "drag", prop);
+    if (this.#pointers.get(pointer.id) !== pointer) return;
     if (!pointer.claimed) {
       this.#dispatchGlobalEvent("drag", prop);
     }
   }
 
-  #fireDragEnd(pointer: TrackedPointer, button: number) {
+  #fireDragEnd(
+    pointer: TrackedPointer,
+    button: number,
+    event: PointerEvent,
+    cancelled: boolean,
+  ) {
     const prop: dragEndProp = {
+      event,
       objectId: this.#getOwnerId(pointer.owner),
       pointerId: pointer.id,
       start: this.#getCoordinates(pointer.startX, pointer.startY),
@@ -845,6 +1076,7 @@ class InputControl {
         pointer.endY ?? pointer.y,
       ),
       button,
+      cancelled,
     };
 
     this.#dispatchObjectEvent(pointer.owner, "dragEnd", prop);
@@ -852,7 +1084,7 @@ class InputControl {
   }
 
   #handlePinchGestures() {
-    const pointerList = Object.values(this.#pointerDict);
+    const pointerList = [...this.#pointers.values()];
     if (pointerList.length < 2) return;
 
     pointerList.sort((a, b) => a.timestamp - b.timestamp);
@@ -869,7 +1101,10 @@ class InputControl {
         pointer0.y - pointer1.y,
       );
 
-      if (this.#gestureDict[gestureKey] == null) {
+      let gesture = this.#pinches.get(gestureKey);
+      if (!gesture) {
+        this.#capturePointer(pointer0, pointer0.originElement);
+        this.#capturePointer(pointer1, pointer1.originElement);
         const startDistance = Math.hypot(
           pointer0.startX - pointer1.startX,
           pointer0.startY - pointer1.startY,
@@ -882,10 +1117,11 @@ class InputControl {
           pointer1.startX,
           pointer1.startY,
         );
-        this.#gestureDict[gestureKey] = {
-          type: "pinch",
-          state: "pinch",
+        gesture = {
           member: pointer0.owner,
+          memberElement: pointer0.owner
+            ? (this.#elementByObjectId.get(pointer0.owner.id) ?? null)
+            : null,
           pointerId0: pointer0.id,
           pointerId1: pointer1.id,
           start: {
@@ -897,23 +1133,31 @@ class InputControl {
             distance: currentDistance,
           },
         };
+        this.#pinches.set(gestureKey, gesture);
 
-        const pinchStartGesture = this.#gestureDict[gestureKey] as pinchGesture;
         const prop: pinchStartProp = {
-          objectId: this.#getOwnerId(pinchStartGesture.member),
+          objectId: this.#getOwnerId(gesture.member),
           gestureID: gestureKey,
-          start: pinchStartGesture.start,
+          start: gesture.start,
+          handoffTo: (objectOrId) => this.#handoffPinch(gestureKey, objectOrId),
         };
-        this.#dispatchObjectEvent(pinchStartGesture.member, "pinchStart", prop);
+        this.#dispatchObjectEvent(gesture.member, "pinchStart", prop);
+        if (this.#pinches.get(gestureKey) !== gesture) {
+          continue;
+        }
         if (
-          !this.#isPointerClaimed(pinchStartGesture.pointerId0) &&
-          !this.#isPointerClaimed(pinchStartGesture.pointerId1)
+          !this.#isPointerClaimed(gesture.pointerId0) &&
+          !this.#isPointerClaimed(gesture.pointerId1)
         ) {
           this.#dispatchGlobalEvent("pinchStart", prop);
         }
       }
 
-      const gesture = this.#gestureDict[gestureKey] as pinchGesture;
+      if (gesture.memberElement && !gesture.memberElement.isConnected) {
+        this.#cancelPinchPointers(gesture);
+        continue;
+      }
+
       gesture.current = {
         pointerList: [currentPointer0, currentPointer1],
         distance: currentDistance,
@@ -924,8 +1168,12 @@ class InputControl {
         gestureID: gestureKey,
         start: gesture.start,
         current: gesture.current,
+        handoffTo: (objectOrId) => this.#handoffPinch(gestureKey, objectOrId),
       };
       this.#dispatchObjectEvent(gesture.member, "pinch", prop);
+      if (this.#pinches.get(gestureKey) !== gesture) {
+        continue;
+      }
       // A pinch involving a claimed pointer is suppressed globally; pinchEnd
       // still delivers (end events always do) so engaged listeners clean up.
       if (
@@ -937,11 +1185,23 @@ class InputControl {
     }
   }
 
-  #endPinchGesturesForPointer(pointerId: number) {
-    for (const [gestureKey, gesture] of Object.entries(this.#gestureDict)) {
-      if (gesture.type !== "pinch") {
-        continue;
-      }
+  #cancelPinchPointers(gesture: PinchGesture): void {
+    for (const pointerId of [gesture.pointerId0, gesture.pointerId1]) {
+      const pointer = this.#pointers.get(pointerId);
+      if (!pointer) continue;
+      this.#finalizePointer(pointer, {
+        event: pointer.lastEvent,
+        cancelled: true,
+      });
+    }
+  }
+
+  #endPinchGesturesForPointer(
+    pointerId: number,
+    cancelled: boolean,
+    dispatchTerminal = true,
+  ) {
+    for (const [gestureKey, gesture] of [...this.#pinches.entries()]) {
       if (
         gesture.pointerId0 !== pointerId &&
         gesture.pointerId1 !== pointerId
@@ -955,33 +1215,43 @@ class InputControl {
         start: gesture.start,
         current: gesture.current,
         end: gesture.current,
+        cancelled,
       };
       try {
-        this.#dispatchObjectEvent(gesture.member, "pinchEnd", prop);
-        this.#dispatchGlobalEvent("pinchEnd", prop);
+        if (dispatchTerminal) {
+          this.#dispatchObjectEvent(gesture.member, "pinchEnd", prop);
+          this.#dispatchGlobalEvent("pinchEnd", prop);
+        }
       } finally {
-        // Same invariant as the drag path: a gesture that survives its own end
-        // event keeps re-ending on every later release.
-        delete this.#gestureDict[gestureKey];
+        this.#pinches.delete(gestureKey);
       }
     }
   }
 
   #dispatchObjectEvent<EventName extends keyof InputEventCallback>(
-    owner: ElementObject | null,
+    owner: ElementObject<DomElement> | null,
     event: EventName,
     prop: InputEventPayloadMap[EventName],
   ) {
-    if (!owner || !this.#isOwnerRegistered(owner)) {
+    if (!owner || !this.#isObjectRegistered(owner)) {
       return;
     }
-    try {
-      owner.event.input[event]?.(prop as any);
-    } catch (error) {
-      // A consumer handler must not unwind the dispatch: the pointer-lifecycle
-      // cleanup that follows releases the pointer's claim, and skipping it
-      // suppresses every later global pointerMove for that pointer id.
-      reportConsumerError(error);
+
+    const path: BaseObject[] = [];
+    let current: BaseObject | null = owner;
+    while (current) {
+      path.push(current);
+      current = current.parent;
+    }
+    for (const target of path) {
+      if (!this.#isObjectRegistered(target)) continue;
+      try {
+        target.event.input[event]?.(prop as any);
+      } catch (error) {
+        // Errors are isolated per target so later ancestors, global listeners,
+        // and pointer-lifecycle cleanup still run.
+        reportConsumerError(error);
+      }
     }
   }
 
@@ -1005,77 +1275,16 @@ class InputControl {
     }
   }
 
-  // Headless connector surfaces can extend beyond their parent node's DOM box.
-  // SnapLine registers them in global.data so pointerdown ownership can be
-  // resolved geometrically before composedPath routing. The registry shape is
-  // declared in internal/shared-data.ts (engine core cannot import SnapLine).
-  #resolveSourceSurfaceOwner(position: eventPosition): ElementObject | null {
-    const surfaces = this.global?.data?.sourceSurfaces as
-      | Array<{
-          id: string;
-          engine: unknown;
-          isDeleteRequested: boolean;
-          resolveSourceHit(position: eventPosition): {
-            candidate: {
-              hit: {
-                distance: number;
-                priority?: number;
-              };
-            };
-            strategyIndex: number;
-          } | null;
-        }>
-      | undefined;
-    if (!surfaces) return null;
-
-    let winner: {
-      owner: ElementObject;
-      priority: number;
-      distance: number;
-      strategyIndex: number;
-    } | null = null;
-
-    for (const surface of surfaces) {
-      if (surface.engine !== this.#engine || surface.isDeleteRequested) {
-        continue;
-      }
-      const resolved = surface.resolveSourceHit(position);
-      if (!resolved || !Number.isFinite(resolved.candidate.hit.distance)) {
-        continue;
-      }
-      const candidate = {
-        owner: surface as unknown as ElementObject,
-        priority: resolved.candidate.hit.priority ?? 0,
-        distance: resolved.candidate.hit.distance,
-        strategyIndex: resolved.strategyIndex,
-      };
-      if (
-        !winner ||
-        candidate.priority > winner.priority ||
-        (candidate.priority === winner.priority &&
-          candidate.distance < winner.distance) ||
-        (candidate.priority === winner.priority &&
-          candidate.distance === winner.distance &&
-          candidate.owner.id.localeCompare(winner.owner.id) < 0) ||
-        (candidate.priority === winner.priority &&
-          candidate.distance === winner.distance &&
-          candidate.owner.id === winner.owner.id &&
-          candidate.strategyIndex < winner.strategyIndex)
-      ) {
-        winner = candidate;
-      }
-    }
-
-    return winner?.owner ?? null;
-  }
-
-  #getTargetOwner(event: Event): ElementObject | null {
+  /* Determine the object that fired the event. */
+  #getTargetOwner(event: Event): ElementObject<DomElement> | null {
+    const ElementConstructor = this.#document.defaultView?.Element;
+    if (!ElementConstructor) return null;
     for (const target of this.#getEventPath(event)) {
-      if (!(target instanceof HTMLElement)) {
+      if (!(target instanceof ElementConstructor)) {
         continue;
       }
-      const owner = this.#objectByElement.get(target);
-      if (owner && this.#isOwnerRegistered(owner)) {
+      const owner = this.#objectByElement.get(target as DomElement);
+      if (owner && this.#isObjectRegistered(owner)) {
         return owner;
       }
     }
@@ -1096,29 +1305,14 @@ class InputControl {
     return path;
   }
 
-  #getOwnerId(owner: ElementObject | null) {
-    if (!owner || !this.#isOwnerRegistered(owner)) {
+  #getOwnerId(owner: ElementObject<DomElement> | null) {
+    if (!owner || !this.#isObjectRegistered(owner)) {
       return null;
     }
     return owner.id;
   }
 
-  #isOwnerRegistered(owner: ElementObject) {
-    const element = this.#elementByObjectId.get(owner.id);
-    if (element && this.#objectByElement.get(element) === owner) {
-      return true;
-    }
-
-    // Some interaction owners are deliberately headless. Virtual connectors
-    // and similar surfaces are selected geometrically by a DOM-backed parent
-    // and then explicitly assigned with setPointerDragOwner(). They still
-    // belong to the engine even though they do not have an element to discover
-    // through composedPath().
-    //
-    // Keep DOM hit discovery separate (#getTargetOwner still only walks the
-    // element map), but allow direct dispatch to a live object registered with
-    // this engine. This also prevents a destroyed/replaced object with a reused
-    // id from continuing to receive an in-flight gesture.
+  #isObjectRegistered(owner: BaseObject) {
     if (owner.isDeleteRequested || !this.global || !this.#engine) {
       return false;
     }
diff --git a/src/object.ts b/src/object.ts
index a80b7a5..d0c7496 100755
--- a/src/object.ts
+++ b/src/object.ts
@@ -16,6 +16,7 @@ export type FrameWriteStages = "WRITE_1" | "WRITE_2" | "WRITE_3";
 export type FrameStages = FrameReadStages | FrameWriteStages;
 export type FrameTaskCallback = () => void | Promise<void>;
 export type TransformSpace = "world" | "local";
+export type DomElement = HTMLElement | SVGElement;
 
 export interface DomEvent {
   onAssignDom: null | (() => void);
@@ -952,8 +953,10 @@ function copyDomPropertyValue(target: DomProperty, source: DomProperty) {
   });
 }
 
-export class ElementObject extends BaseObject {
-  #element: HTMLElement | null = null;
+export class ElementObject<
+  ElementType extends DomElement = HTMLElement,
+> extends BaseObject {
+  #element: ElementType | null = null;
   #style: Record<string, any> = {};
   #classList: string[] = [];
   #dataAttribute: Record<string, any> = {};
@@ -968,7 +971,7 @@ export class ElementObject extends BaseObject {
   transformMode: "direct" | "relative" | "origin" | "none";
   transformOrigin: BaseObject | null;
 
-  #inputAlias: HTMLElement | null = null;
+  #inputAlias: DomElement | null = null;
 
   constructor(engine: Engine, parent: BaseObject | null = null) {
     super(engine, parent);
@@ -1015,11 +1018,11 @@ export class ElementObject extends BaseObject {
     this.#dataAttribute = Object.assign(this.#dataAttribute, dataAttribute);
   }
 
-  get element(): HTMLElement | null {
+  get element(): ElementType | null {
     return this.#element;
   }
 
-  set element(element: HTMLElement | null | undefined) {
+  set element(element: ElementType | null | undefined) {
     if (!element) {
       return;
     }
@@ -1027,7 +1030,7 @@ export class ElementObject extends BaseObject {
     this.event.dom.onAssignDom?.();
   }
 
-  addInputAlias(element: HTMLElement): void {
+  addInputAlias(element: DomElement): void {
     if (this.#inputAlias === element) {
       return;
     }
@@ -1037,7 +1040,7 @@ export class ElementObject extends BaseObject {
     this.engine.input.registerObjectElement(this, element);
   }
 
-  removeInputAlias(element: HTMLElement): void {
+  removeInputAlias(element: DomElement): void {
     if (this.#inputAlias !== element) {
       return;
     }
@@ -1340,7 +1343,7 @@ export class ElementObject extends BaseObject {
    * When `expectedElement` is supplied, a stale cleanup is ignored after a
    * newer element has already been assigned.
    */
-  detachElement(expectedElement?: HTMLElement): boolean {
+  detachElement(expectedElement?: ElementType): boolean {
     if (expectedElement && this.#element !== expectedElement) {
       return false;
     }
@@ -1359,7 +1362,7 @@ export class ElementObject extends BaseObject {
     return true;
   }
 
-  #assignElement(element: HTMLElement) {
+  #assignElement(element: ElementType) {
     if (this.#element) {
       this.detachElement();
     }
diff --git a/src/util.ts b/src/util.ts
index 5bc6768..241bdbf 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,4 +1,4 @@
-import type { DomProperty, TransformProperty } from "./object";
+import type { DomElement, DomProperty, TransformProperty } from "./object";
 
 /**
  * Merges defined override values onto a complete defaults object.
@@ -25,7 +25,7 @@ function mergeDefined<T extends object>(defaults: T, overrides: Partial<T>): T {
  * @param dom - The HTML element to measure.
  * @returns An object containing position and size in various coordinate systems.
  */
-function getDomProperty(engine: any, dom: HTMLElement) {
+function getDomProperty(engine: any, dom: DomElement) {
   const rect = dom.getBoundingClientRect();
   const css = window.getComputedStyle(dom);
   const margin_top = parseFloat(css.marginTop) || 0;
@@ -148,10 +148,7 @@ function parseTransformString(transform: string) {
  * @param dom - The HTML or SVG element to style.
  * @param style - An object containing CSS property-value pairs.
  */
-function setDomStyle(
-  dom: HTMLElement | SVGElement,
-  style: { [key: string]: string },
-) {
+function setDomStyle(dom: DomElement, style: { [key: string]: string }) {
   Object.assign(dom.style, style);
 }
 
diff --git a/tests/helpers/snapline-harness.ts b/tests/helpers/snapline-harness.ts
index 3f491b3..16fbfac 100644
--- a/tests/helpers/snapline-harness.ts
+++ b/tests/helpers/snapline-harness.ts
@@ -12,6 +12,25 @@ import {
 // Headless engine stand-in for SnapLine unit tests: a six-stage frame queue,
 // an engine-scoped object table, and the input/collision surface the mirrors
 // touch during construction. No DOM, no render loop.
+function createCollisionHarness() {
+  const colliders: any[] = [];
+  return {
+    addObject(collider: any) {
+      if (!colliders.includes(collider)) colliders.push(collider);
+    },
+    removeObject(id: symbol) {
+      const index = colliders.findIndex((collider) => collider.id === id);
+      if (index !== -1) colliders.splice(index, 1);
+    },
+    queryPoint(_position: { x: number; y: number }) {
+      // SnapLine's headless policy tests use targetHitTest as their narrow
+      // phase. The real CollisionEngine point-query behavior is covered by
+      // core collision tests.
+      return [...colliders];
+    },
+  };
+}
+
 export function createEngineHarness() {
   let nextId = 0;
   const objects: Record<string, unknown> = {};
@@ -25,16 +44,12 @@ export function createEngineHarness() {
   };
   const engine: any = {
     camera: null,
-    collisionEngine: {
-      addObject() {},
-      removeObject() {},
-    },
+    collisionEngine: createCollisionHarness(),
     edgePanController: null,
     global: null,
     input: {
       claimPointer() {},
       registerObjectElement() {},
-      setPointerDragOwner() {},
       subscribeGlobalCursorEvent() {},
       unregisterObjectElement() {},
       unsubscribeGlobalCursorEvent() {},
@@ -63,16 +78,12 @@ export function createEngineHarness() {
 export function createSiblingEngine(global: any) {
   const engine: any = {
     camera: null,
-    collisionEngine: {
-      addObject() {},
-      removeObject() {},
-    },
+    collisionEngine: createCollisionHarness(),
     edgePanController: null,
     global,
     input: {
       claimPointer() {},
       registerObjectElement() {},
-      setPointerDragOwner() {},
       subscribeGlobalCursorEvent() {},
       unregisterObjectElement() {},
       unsubscribeGlobalCursorEvent() {},
diff --git a/tests/ut/input-headless-owner.spec.ts b/tests/ut/input-headless-owner.spec.ts
index 8ac08e8..6eeb42f 100644
--- a/tests/ut/input-headless-owner.spec.ts
+++ b/tests/ut/input-headless-owner.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from "@playwright/test";
 import { JSDOM } from "jsdom";
 import { InputControl } from "../../src/input";
-import { ElementObject } from "../../src/object";
+import { BaseObject, ElementObject } from "../../src/object";
 
 type InstalledGlobal = {
   key: "window" | "document" | "HTMLElement" | "Node" | "AbortController";
@@ -51,7 +51,14 @@ function pointerEvent(
     y,
     buttons,
     pointerId,
-  }: { x: number; y: number; buttons: number; pointerId: number },
+    timestamp,
+  }: {
+    x: number;
+    y: number;
+    buttons: number;
+    pointerId: number;
+    timestamp?: number;
+  },
 ): Event {
   const event = new window.MouseEvent(type, {
     bubbles: true,
@@ -61,17 +68,129 @@ function pointerEvent(
     buttons,
   });
   Object.defineProperty(event, "pointerId", { value: pointerId });
+  if (timestamp !== undefined) {
+    Object.defineProperty(event, "timeStamp", { value: timestamp });
+  }
   return event;
 }
 
-test("an explicitly assigned headless object receives the full drag gesture", () => {
+function createInputHarness(
+  markup: string,
+  config: { maxSimultaneousDrags?: number } = {},
+) {
   const dom = new JSDOM(
-    "<!doctype html><html><body><div id='engine'></div></body></html>",
+    `<!doctype html><html><body><div id="engine">${markup}</div></body></html>`,
   );
   const restoreGlobals = installDomGlobals(dom.window);
   const container = dom.window.document.querySelector<HTMLElement>("#engine");
   if (!container) throw new Error("Missing test container");
 
+  let nextId = 0;
+  const objectTable: Record<string, BaseObject> = {};
+  const engine: any = {
+    camera: null,
+    containerBounds: null,
+    global: null,
+    input: null,
+  };
+  const global: any = {
+    currentStage: "IDLE",
+    data: {},
+    queue: {
+      READ_1: new Map(),
+      WRITE_1: new Map(),
+      READ_2: new Map(),
+      WRITE_2: new Map(),
+      READ_3: new Map(),
+      WRITE_3: new Map(),
+    },
+    createId: () => `${++nextId}`,
+    getEngineObjectTable: () => objectTable,
+    registerObject: (object: BaseObject) => {
+      objectTable[object.id] = object;
+    },
+    unregisterObject: (object: BaseObject) => {
+      delete objectTable[object.id];
+    },
+  };
+  engine.global = global;
+  const input = new InputControl(global, engine, config);
+  engine.input = input;
+  input.bindContainer(container);
+
+  return {
+    dom,
+    container,
+    engine,
+    input,
+    cleanup() {
+      input.destroy();
+      restoreGlobals();
+      dom.window.close();
+    },
+  };
+}
+
+function trackPointerCapture(
+  elements: Element[],
+  failCapture?: (element: Element, pointerId: number) => boolean,
+) {
+  const captures = new Map<number, Element>();
+  const releases: number[] = [];
+  for (const element of elements) {
+    Object.defineProperties(element, {
+      setPointerCapture: {
+        value: (pointerId: number) => {
+          if (failCapture?.(element, pointerId)) {
+            throw new Error(`capture failed for ${pointerId}`);
+          }
+          captures.set(pointerId, element);
+        },
+      },
+      hasPointerCapture: {
+        value: (pointerId: number) => captures.get(pointerId) === element,
+      },
+      releasePointerCapture: {
+        value: (pointerId: number) => {
+          releases.push(pointerId);
+          if (captures.get(pointerId) === element) captures.delete(pointerId);
+        },
+      },
+    });
+  }
+  return { captures, releases };
+}
+
+test("dragStart handoff transfers capture and later delivery to a DOM-backed object", () => {
+  const dom = new JSDOM(
+    "<!doctype html><html><body><div id='engine'><div id='source'></div><div id='destination'></div></div></body></html>",
+  );
+  const restoreGlobals = installDomGlobals(dom.window);
+  const container = dom.window.document.querySelector<HTMLElement>("#engine");
+  const sourceElement =
+    dom.window.document.querySelector<HTMLElement>("#source");
+  const destinationElement =
+    dom.window.document.querySelector<HTMLElement>("#destination");
+  if (!container || !sourceElement || !destinationElement) {
+    throw new Error("Missing test elements");
+  }
+  const captures = new Map<number, Element>();
+  for (const element of [sourceElement, destinationElement]) {
+    Object.defineProperties(element, {
+      setPointerCapture: {
+        value: (pointerId: number) => captures.set(pointerId, element),
+      },
+      hasPointerCapture: {
+        value: (pointerId: number) => captures.get(pointerId) === element,
+      },
+      releasePointerCapture: {
+        value: (pointerId: number) => {
+          if (captures.get(pointerId) === element) captures.delete(pointerId);
+        },
+      },
+    });
+  }
+
   let nextId = 0;
   const objectTable: Record<string, ElementObject> = {};
   const queue = {
@@ -111,25 +230,31 @@ test("an explicitly assigned headless object receives the full drag gesture", ()
     engine.input = input;
     input.bindContainer(container);
 
-    const domOwner = new ElementObject(engine);
-    const headlessOwner = new ElementObject(engine);
-    input.registerObjectElement(domOwner, container);
+    const source = new ElementObject(engine);
+    const destination = new ElementObject(engine);
+    input.registerObjectElement(source, sourceElement);
+    input.registerObjectElement(destination, destinationElement);
 
     const received: string[] = [];
-    domOwner.event.input.pointerDown = ({ event }) => {
-      input.setPointerDragOwner(event.pointerId, headlessOwner);
-    };
-    headlessOwner.event.input.dragStart = ({ objectId }) => {
+    source.event.input.dragStart = ({ objectId, handoffTo }) => {
       received.push(`start:${objectId}`);
+      handoffTo(destination);
     };
-    headlessOwner.event.input.drag = ({ objectId }) => {
+    destination.event.input.drag = ({ objectId }) => {
       received.push(`drag:${objectId}`);
     };
-    headlessOwner.event.input.dragEnd = ({ objectId }) => {
-      received.push(`end:${objectId}`);
+    destination.event.input.pointerUp = ({
+      objectId,
+      event,
+      cancelled,
+    }) => {
+      received.push(`up:${objectId}:${event.type}:${cancelled}`);
+    };
+    destination.event.input.dragEnd = ({ objectId, event, cancelled }) => {
+      received.push(`end:${objectId}:${event.type}:${cancelled}`);
     };
 
-    container.dispatchEvent(
+    sourceElement.dispatchEvent(
       pointerEvent(dom.window, "pointerdown", {
         x: 10,
         y: 10,
@@ -137,7 +262,7 @@ test("an explicitly assigned headless object receives the full drag gesture", ()
         pointerId: 7,
       }),
     );
-    container.dispatchEvent(
+    sourceElement.dispatchEvent(
       pointerEvent(dom.window, "pointermove", {
         x: 20,
         y: 10,
@@ -155,13 +280,741 @@ test("an explicitly assigned headless object receives the full drag gesture", ()
     );
 
     expect(received).toEqual([
-      `start:${headlessOwner.id}`,
-      `drag:${headlessOwner.id}`,
-      `end:${headlessOwner.id}`,
+      `start:${source.id}`,
+      `drag:${destination.id}`,
+      `up:${destination.id}:pointerup:false`,
+      `end:${destination.id}:pointerup:false`,
+    ]);
+    expect(captures.has(7)).toBe(false);
+
+    received.length = 0;
+    sourceElement.dispatchEvent(
+      pointerEvent(dom.window, "pointerdown", {
+        x: 10,
+        y: 10,
+        buttons: 1,
+        pointerId: 8,
+      }),
+    );
+    sourceElement.dispatchEvent(
+      pointerEvent(dom.window, "pointermove", {
+        x: 20,
+        y: 10,
+        buttons: 1,
+        pointerId: 8,
+      }),
+    );
+    captures.delete(8);
+    destinationElement.dispatchEvent(
+      pointerEvent(dom.window, "lostpointercapture", {
+        x: 20,
+        y: 10,
+        buttons: 1,
+        pointerId: 8,
+      }),
+    );
+    dom.window.document.dispatchEvent(
+      pointerEvent(dom.window, "pointerup", {
+        x: 20,
+        y: 10,
+        buttons: 0,
+        pointerId: 8,
+      }),
+    );
+    expect(received).toEqual([
+      `start:${source.id}`,
+      `drag:${destination.id}`,
+      `up:${destination.id}:pointerup:false`,
+      `end:${destination.id}:pointerup:false`,
+    ]);
+    expect(captures.has(8)).toBe(false);
+
+    received.length = 0;
+    sourceElement.dispatchEvent(
+      pointerEvent(dom.window, "pointerdown", {
+        x: 10,
+        y: 10,
+        buttons: 1,
+        pointerId: 9,
+      }),
+    );
+    sourceElement.dispatchEvent(
+      pointerEvent(dom.window, "pointermove", {
+        x: 20,
+        y: 10,
+        buttons: 1,
+        pointerId: 9,
+      }),
+    );
+    captures.delete(9);
+    destinationElement.dispatchEvent(
+      pointerEvent(dom.window, "lostpointercapture", {
+        x: 20,
+        y: 10,
+        buttons: 0,
+        pointerId: 9,
+      }),
+    );
+    expect(received).toEqual([
+      `start:${source.id}`,
+      `drag:${destination.id}`,
+      `up:${destination.id}:lostpointercapture:true`,
+      `end:${destination.id}:lostpointercapture:true`,
     ]);
+    expect(captures.has(9)).toBe(false);
     input.destroy();
   } finally {
     restoreGlobals();
     dom.window.close();
   }
 });
+
+test("handoff rejects BaseObject and headless destinations synchronously", () => {
+  const dom = new JSDOM(
+    "<!doctype html><html><body><div id='engine'><div id='source'></div></div></body></html>",
+  );
+  const restoreGlobals = installDomGlobals(dom.window);
+  const container = dom.window.document.querySelector<HTMLElement>("#engine");
+  const sourceElement =
+    dom.window.document.querySelector<HTMLElement>("#source");
+  if (!container || !sourceElement) throw new Error("Missing test elements");
+  Object.defineProperty(sourceElement, "setPointerCapture", {
+    value: () => {},
+  });
+
+  let nextId = 0;
+  const objectTable: Record<string, BaseObject> = {};
+  const engine: any = {
+    camera: null,
+    containerBounds: null,
+    global: null,
+    input: null,
+  };
+  const global: any = {
+    currentStage: "IDLE",
+    data: {},
+    queue: {
+      READ_1: new Map(),
+      WRITE_1: new Map(),
+      READ_2: new Map(),
+      WRITE_2: new Map(),
+      READ_3: new Map(),
+      WRITE_3: new Map(),
+    },
+    createId: () => `${++nextId}`,
+    getEngineObjectTable: () => objectTable,
+    registerObject: (object: BaseObject) => {
+      objectTable[object.id] = object;
+    },
+    unregisterObject: (object: BaseObject) => {
+      delete objectTable[object.id];
+    },
+  };
+
+  try {
+    engine.global = global;
+    const input = new InputControl(global, engine);
+    engine.input = input;
+    input.bindContainer(container);
+    const source = new ElementObject(engine);
+    const baseDestination = new BaseObject(engine);
+    const headlessDestination = new ElementObject(engine);
+    input.registerObjectElement(source, sourceElement);
+    const errors: string[] = [];
+    source.event.input.dragStart = ({ handoffTo }) => {
+      for (const destination of [baseDestination, headlessDestination]) {
+        try {
+          handoffTo(destination as ElementObject);
+        } catch (error) {
+          errors.push((error as Error).message);
+        }
+      }
+    };
+
+    sourceElement.dispatchEvent(
+      pointerEvent(dom.window, "pointerdown", {
+        x: 0,
+        y: 0,
+        buttons: 1,
+        pointerId: 9,
+      }),
+    );
+    sourceElement.dispatchEvent(
+      pointerEvent(dom.window, "pointermove", {
+        x: 10,
+        y: 0,
+        buttons: 1,
+        pointerId: 9,
+      }),
+    );
+
+    expect(errors[0]).toContain("must resolve to an ElementObject");
+    expect(errors[1]).toContain("has no connected input element");
+    input.destroy();
+  } finally {
+    restoreGlobals();
+    dom.window.close();
+  }
+});
+
+test("pinch handoff keeps each pointer captured and owned by its origin", () => {
+  const dom = new JSDOM(
+    "<!doctype html><html><body><div id='engine'><div id='source-0'></div><div id='source-1'></div><svg><path id='destination'></path></svg></div></body></html>",
+  );
+  const restoreGlobals = installDomGlobals(dom.window);
+  const container = dom.window.document.querySelector<HTMLElement>("#engine");
+  const sourceElement0 =
+    dom.window.document.querySelector<HTMLElement>("#source-0");
+  const sourceElement1 =
+    dom.window.document.querySelector<HTMLElement>("#source-1");
+  const destinationElement =
+    dom.window.document.querySelector<SVGPathElement>("#destination");
+  if (
+    !container ||
+    !sourceElement0 ||
+    !sourceElement1 ||
+    !destinationElement
+  ) {
+    throw new Error("Missing test elements");
+  }
+  const captures = new Map<number, Element>();
+  const captureLog: string[] = [];
+  for (const element of [
+    sourceElement0,
+    sourceElement1,
+    destinationElement,
+  ]) {
+    Object.defineProperties(element, {
+      setPointerCapture: {
+        value: (pointerId: number) => {
+          captures.set(pointerId, element);
+          captureLog.push(`${element.id}:${pointerId}`);
+        },
+      },
+      hasPointerCapture: {
+        value: (pointerId: number) => captures.get(pointerId) === element,
+      },
+      releasePointerCapture: {
+        value: (pointerId: number) => {
+          if (captures.get(pointerId) === element) captures.delete(pointerId);
+        },
+      },
+    });
+  }
+
+  let nextId = 0;
+  const objectTable: Record<
+    string,
+    ElementObject<HTMLElement | SVGElement>
+  > = {};
+  const engine: any = {
+    camera: null,
+    containerBounds: null,
+    global: null,
+    input: null,
+  };
+  const global: any = {
+    currentStage: "IDLE",
+    data: {},
+    queue: {
+      READ_1: new Map(),
+      WRITE_1: new Map(),
+      READ_2: new Map(),
+      WRITE_2: new Map(),
+      READ_3: new Map(),
+      WRITE_3: new Map(),
+    },
+    createId: () => `${++nextId}`,
+    getEngineObjectTable: () => objectTable,
+    registerObject: (object: ElementObject<HTMLElement | SVGElement>) => {
+      objectTable[object.id] = object;
+    },
+    unregisterObject: (object: ElementObject<HTMLElement | SVGElement>) => {
+      delete objectTable[object.id];
+    },
+  };
+
+  try {
+    engine.global = global;
+    const input = new InputControl(global, engine);
+    engine.input = input;
+    input.bindContainer(container);
+    const source0 = new ElementObject(engine);
+    const source1 = new ElementObject(engine);
+    const destination = new ElementObject<SVGElement>(engine);
+    input.registerObjectElement(source0, sourceElement0);
+    input.registerObjectElement(source1, sourceElement1);
+    input.registerObjectElement(destination, destinationElement);
+    const received: string[] = [];
+    source0.event.input.pinchStart = ({ objectId, handoffTo }) => {
+      received.push(`start:${objectId}`);
+      handoffTo(destination);
+    };
+    source0.event.input.pointerUp = ({ objectId }) => {
+      received.push(`up:${objectId}`);
+    };
+    source0.event.input.dragEnd = ({ objectId }) => {
+      received.push(`dragEnd:${objectId}`);
+    };
+    destination.event.input.pinch = ({ objectId }) => {
+      received.push(`pinch:${objectId}`);
+    };
+    destination.event.input.pinchEnd = ({ objectId, cancelled }) => {
+      received.push(`end:${objectId}:${cancelled}`);
+    };
+
+    sourceElement0.dispatchEvent(
+      pointerEvent(dom.window, "pointerdown", {
+        x: 0,
+        y: 0,
+        buttons: 1,
+        pointerId: 1,
+      }),
+    );
+    sourceElement1.dispatchEvent(
+      pointerEvent(dom.window, "pointerdown", {
+        x: 20,
+        y: 0,
+        buttons: 1,
+        pointerId: 2,
+      }),
+    );
+    sourceElement0.dispatchEvent(
+      pointerEvent(dom.window, "pointermove", {
+        x: 5,
+        y: 0,
+        buttons: 1,
+        pointerId: 1,
+      }),
+    );
+    dom.window.document.dispatchEvent(
+      pointerEvent(dom.window, "pointerup", {
+        x: 5,
+        y: 0,
+        buttons: 0,
+        pointerId: 1,
+      }),
+    );
+
+    expect(received).toEqual([
+      `start:${source0.id}`,
+      `pinch:${destination.id}`,
+      `up:${source0.id}`,
+      `dragEnd:${source0.id}`,
+      `end:${destination.id}:false`,
+    ]);
+    expect(captureLog).toEqual(["source-0:1", "source-1:2"]);
+    expect(captures.get(2)).toBe(sourceElement1);
+    input.destroy();
+    expect(captures.size).toBe(0);
+  } finally {
+    restoreGlobals();
+    dom.window.close();
+  }
+});
+
+test("targeted input bubbles leaf-to-root before global fan-out", () => {
+  const dom = new JSDOM(
+    "<!doctype html><html><body><div id='engine'><button id='leaf'></button></div></body></html>",
+  );
+  const restoreGlobals = installDomGlobals(dom.window);
+  const container = dom.window.document.querySelector<HTMLElement>("#engine");
+  const leafElement = dom.window.document.querySelector<HTMLElement>("#leaf");
+  if (!container || !leafElement) throw new Error("Missing test elements");
+
+  let nextId = 0;
+  const objectTable: Record<string, BaseObject> = {};
+  const engine: any = {
+    camera: null,
+    containerBounds: null,
+    global: null,
+    input: null,
+  };
+  const global: any = {
+    currentStage: "IDLE",
+    data: {},
+    queue: {
+      READ_1: new Map(),
+      WRITE_1: new Map(),
+      READ_2: new Map(),
+      WRITE_2: new Map(),
+      READ_3: new Map(),
+      WRITE_3: new Map(),
+    },
+    createId: () => `${++nextId}`,
+    getEngineObjectTable: () => objectTable,
+    registerObject: (object: BaseObject) => {
+      objectTable[object.id] = object;
+    },
+    unregisterObject: (object: BaseObject) => {
+      delete objectTable[object.id];
+    },
+  };
+
+  try {
+    engine.global = global;
+    const input = new InputControl(global, engine);
+    engine.input = input;
+    input.bindContainer(container);
+    const root = new BaseObject(engine);
+    const parent = new BaseObject(engine, root);
+    const leaf = new ElementObject(engine, parent);
+    input.registerObjectElement(leaf, leafElement);
+    const order: string[] = [];
+    leaf.event.input.pointerDown = (prop) => {
+      order.push(`leaf:${prop.objectId}`);
+    };
+    parent.event.input.pointerDown = (prop) => {
+      order.push(`parent:${prop.objectId}`);
+    };
+    root.event.input.pointerDown = (prop) => {
+      order.push(`root:${prop.objectId}`);
+    };
+    input.subscribeGlobalCursorEvent(
+      "pointerDown",
+      "global",
+      (prop) => order.push(`global:${prop.objectId}`),
+      engine,
+    );
+
+    leafElement.dispatchEvent(
+      pointerEvent(dom.window, "pointerdown", {
+        x: 0,
+        y: 0,
+        buttons: 1,
+        pointerId: 3,
+      }),
+    );
+
+    expect(order).toEqual([
+      `leaf:${leaf.id}`,
+      `parent:${leaf.id}`,
+      `root:${leaf.id}`,
+      `global:${leaf.id}`,
+    ]);
+    input.destroy();
+  } finally {
+    restoreGlobals();
+    dom.window.close();
+  }
+});
+
+test("pointercancel emits one cancelled terminal sequence", () => {
+  const harness = createInputHarness("<div id='owner'></div>");
+  const ownerElement =
+    harness.dom.window.document.querySelector<HTMLElement>("#owner");
+  if (!ownerElement) throw new Error("Missing owner element");
+  const { captures, releases } = trackPointerCapture([ownerElement]);
+
+  try {
+    const owner = new ElementObject(harness.engine);
+    harness.input.registerObjectElement(owner, ownerElement);
+    const terminal: string[] = [];
+    owner.event.input.pointerUp = ({ event, cancelled }) => {
+      terminal.push(`up:${event.type}:${cancelled}`);
+    };
+    owner.event.input.dragEnd = ({ event, cancelled }) => {
+      terminal.push(`drag:${event.type}:${cancelled}`);
+    };
+
+    ownerElement.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointerdown", {
+        x: 0,
+        y: 0,
+        buttons: 1,
+        pointerId: 1,
+      }),
+    );
+    expect(captures.size).toBe(0);
+    ownerElement.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointermove", {
+        x: 10,
+        y: 0,
+        buttons: 1,
+        pointerId: 1,
+      }),
+    );
+    expect(captures.get(1)).toBe(ownerElement);
+    harness.dom.window.document.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointercancel", {
+        x: 10,
+        y: 0,
+        buttons: 0,
+        pointerId: 1,
+      }),
+    );
+    harness.dom.window.document.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointerup", {
+        x: 10,
+        y: 0,
+        buttons: 0,
+        pointerId: 1,
+      }),
+    );
+
+    expect(terminal).toEqual([
+      "up:pointercancel:true",
+      "drag:pointercancel:true",
+    ]);
+    expect(captures.size).toBe(0);
+    expect(releases).toEqual([1]);
+  } finally {
+    harness.cleanup();
+  }
+});
+
+test("owner unregistration finalizes and releases capture once", () => {
+  const harness = createInputHarness("<div id='owner'></div>");
+  const ownerElement =
+    harness.dom.window.document.querySelector<HTMLElement>("#owner");
+  if (!ownerElement) throw new Error("Missing owner element");
+  const { captures, releases } = trackPointerCapture([ownerElement]);
+
+  try {
+    const owner = new ElementObject(harness.engine);
+    harness.input.registerObjectElement(owner, ownerElement);
+    const terminal: string[] = [];
+    owner.event.input.pointerUp = ({ event, cancelled }) => {
+      terminal.push(`up:${event.type}:${cancelled}`);
+    };
+    owner.event.input.dragEnd = ({ event, cancelled }) => {
+      terminal.push(`drag:${event.type}:${cancelled}`);
+    };
+
+    ownerElement.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointerdown", {
+        x: 0,
+        y: 0,
+        buttons: 1,
+        pointerId: 2,
+      }),
+    );
+    ownerElement.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointermove", {
+        x: 10,
+        y: 0,
+        buttons: 1,
+        pointerId: 2,
+      }),
+    );
+    harness.input.unregisterObjectElement(owner);
+    harness.input.unregisterObjectElement(owner);
+
+    expect(terminal).toEqual([
+      "up:pointermove:true",
+      "drag:pointermove:true",
+    ]);
+    expect(captures.size).toBe(0);
+    expect(releases).toEqual([2]);
+  } finally {
+    harness.cleanup();
+  }
+});
+
+test("pinch destination removal cancels both origin-captured pointers", () => {
+  const harness = createInputHarness(
+    "<div id='source-0'></div><div id='source-1'></div><div id='destination'></div>",
+  );
+  const sourceElement0 =
+    harness.dom.window.document.querySelector<HTMLElement>("#source-0");
+  const sourceElement1 =
+    harness.dom.window.document.querySelector<HTMLElement>("#source-1");
+  const destinationElement =
+    harness.dom.window.document.querySelector<HTMLElement>("#destination");
+  if (!sourceElement0 || !sourceElement1 || !destinationElement) {
+    throw new Error("Missing handoff elements");
+  }
+  let destinationCaptureAttempts = 0;
+  const { captures, releases } = trackPointerCapture(
+    [sourceElement0, sourceElement1, destinationElement],
+    (element) => {
+      if (element !== destinationElement) return false;
+      destinationCaptureAttempts++;
+      return true;
+    },
+  );
+
+  try {
+    const source0 = new ElementObject(harness.engine);
+    const source1 = new ElementObject(harness.engine);
+    const destination = new ElementObject(harness.engine);
+    harness.input.registerObjectElement(source0, sourceElement0);
+    harness.input.registerObjectElement(source1, sourceElement1);
+    harness.input.registerObjectElement(destination, destinationElement);
+    const terminal: string[] = [];
+
+    source0.event.input.pinchStart = ({ handoffTo }) => handoffTo(destination);
+    source0.event.input.pointerUp = ({ event, cancelled }) => {
+      terminal.push(`up-0:${event.pointerId}:${cancelled}`);
+    };
+    source0.event.input.dragEnd = ({ pointerId, cancelled }) => {
+      terminal.push(`drag-0:${pointerId}:${cancelled}`);
+    };
+    source1.event.input.pointerUp = ({ event, cancelled }) => {
+      terminal.push(`up-1:${event.pointerId}:${cancelled}`);
+    };
+    destination.event.input.pinchEnd = ({ cancelled }) => {
+      terminal.push(`pinch:${cancelled}`);
+    };
+
+    sourceElement0.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointerdown", {
+        x: 0,
+        y: 0,
+        buttons: 1,
+        pointerId: 1,
+      }),
+    );
+    sourceElement1.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointerdown", {
+        x: 20,
+        y: 0,
+        buttons: 1,
+        pointerId: 2,
+      }),
+    );
+    sourceElement0.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointermove", {
+        x: 5,
+        y: 0,
+        buttons: 1,
+        pointerId: 1,
+      }),
+    );
+
+    expect(captures.get(1)).toBe(sourceElement0);
+    expect(captures.get(2)).toBe(sourceElement1);
+    expect(destinationCaptureAttempts).toBe(0);
+
+    harness.input.unregisterObjectElement(destination);
+
+    expect(terminal).toEqual([
+      "up-0:1:true",
+      "drag-0:1:true",
+      "pinch:true",
+      "up-1:2:true",
+    ]);
+    expect(captures.size).toBe(0);
+    expect(releases).toEqual([1, 2]);
+  } finally {
+    harness.cleanup();
+  }
+});
+
+test("engine teardown releases capture without terminal callbacks", () => {
+  const harness = createInputHarness("<div id='owner'></div>");
+  const ownerElement =
+    harness.dom.window.document.querySelector<HTMLElement>("#owner");
+  if (!ownerElement) throw new Error("Missing owner element");
+  const { captures, releases } = trackPointerCapture([ownerElement]);
+
+  try {
+    const owner = new ElementObject(harness.engine);
+    harness.input.registerObjectElement(owner, ownerElement);
+    const terminal: string[] = [];
+    owner.event.input.pointerUp = () => terminal.push("up");
+    owner.event.input.dragEnd = () => terminal.push("drag");
+
+    ownerElement.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointerdown", {
+        x: 0,
+        y: 0,
+        buttons: 1,
+        pointerId: 3,
+      }),
+    );
+    ownerElement.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointermove", {
+        x: 10,
+        y: 0,
+        buttons: 1,
+        pointerId: 3,
+      }),
+    );
+    harness.input.destroy();
+
+    expect(terminal).toEqual([]);
+    expect(captures.size).toBe(0);
+    expect(releases).toEqual([3]);
+  } finally {
+    harness.cleanup();
+  }
+});
+
+test("drag limit cancels the oldest active pointer", () => {
+  const harness = createInputHarness(
+    "<div id='first'></div><div id='second'></div>",
+    { maxSimultaneousDrags: 1 },
+  );
+  const firstElement =
+    harness.dom.window.document.querySelector<HTMLElement>("#first");
+  const secondElement =
+    harness.dom.window.document.querySelector<HTMLElement>("#second");
+  if (!firstElement || !secondElement) {
+    throw new Error("Missing drag elements");
+  }
+  trackPointerCapture([firstElement, secondElement]);
+
+  try {
+    const first = new ElementObject(harness.engine);
+    const second = new ElementObject(harness.engine);
+    harness.input.registerObjectElement(first, firstElement);
+    harness.input.registerObjectElement(second, secondElement);
+    const ended: string[] = [];
+    first.event.input.dragEnd = ({ pointerId, cancelled }) => {
+      ended.push(`first:${pointerId}:${cancelled}`);
+    };
+    second.event.input.dragEnd = ({ pointerId, cancelled }) => {
+      ended.push(`second:${pointerId}:${cancelled}`);
+    };
+
+    firstElement.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointerdown", {
+        x: 0,
+        y: 0,
+        buttons: 1,
+        pointerId: 1,
+        timestamp: 1,
+      }),
+    );
+    firstElement.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointermove", {
+        x: 10,
+        y: 0,
+        buttons: 1,
+        pointerId: 1,
+      }),
+    );
+    secondElement.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointerdown", {
+        x: 20,
+        y: 0,
+        buttons: 1,
+        pointerId: 2,
+        timestamp: 2,
+      }),
+    );
+    secondElement.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointermove", {
+        x: 30,
+        y: 0,
+        buttons: 1,
+        pointerId: 2,
+      }),
+    );
+
+    expect(ended).toEqual(["first:1:true"]);
+
+    harness.dom.window.document.dispatchEvent(
+      pointerEvent(harness.dom.window, "pointerup", {
+        x: 30,
+        y: 0,
+        buttons: 0,
+        pointerId: 2,
+      }),
+    );
+    expect(ended).toEqual(["first:1:true", "second:2:false"]);
+  } finally {
+    harness.cleanup();
+  }
+});
diff --git a/tests/ut/snapline-connector-config.spec.ts b/tests/ut/snapline-connector-config.spec.ts
index 9729a46..8cb80a8 100644
--- a/tests/ut/snapline-connector-config.spec.ts
+++ b/tests/ut/snapline-connector-config.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test } from "@playwright/test";
-import { CircleCollider } from "../../src/collision";
+import { CircleCollider, CollisionEngine } from "../../src/collision";
 import {
   ConnectorMirror,
   LineMirror,
@@ -10,9 +10,11 @@ import {
 import { getGraphRegistry } from "../../assets/snapline/core/src";
 
 import {
+  armGesture,
   createControlledHarness,
   createEngineHarness,
   installObserverStubs,
+  startGestureDrag,
 } from "../helpers/snapline-harness";
 
 test("line geometry writers are imperative, replaceable, and separate from state", () => {
@@ -23,7 +25,7 @@ test("line geometry writers are imperative, replaceable, and separate from state
     rules: { maxIncoming: 0 },
   });
   sourceNode.addConnectorObject(source);
-  const line = source.createLine();
+  const line = new LineMirror(engine, source);
   const firstWrites: number[] = [];
   const secondWrites: number[] = [];
   const states: string[] = [];
@@ -134,8 +136,27 @@ test("framework cleanup detaches elements without removing owned DOM", () => {
   }
 });
 
+test("destroying an older same-name connector preserves its replacement", () => {
+  const { engine } = createEngineHarness();
+  const node = new NodeMirror(engine, null);
+  const first = new ConnectorMirror(engine, node, { name: "shared" });
+  const replacement = new ConnectorMirror(engine, node, { name: "shared" });
+
+  node.addConnectorObject(first);
+  expect(node.getConnector("shared")).toBe(first);
+
+  node.addConnectorObject(replacement);
+  expect(node.getConnector("shared")).toBe(replacement);
+
+  first.destroy(false);
+  expect(node.getConnector("shared")).toBe(replacement);
+
+  replacement.destroy(false);
+  node.destroy(false);
+});
+
 test("connector config updates stay live without replacing topology", () => {
-  const { engine, global, handle } = createControlledHarness();
+  const { engine, handle } = createControlledHarness();
   const sourceNode = new NodeMirror(engine, null);
   const targetNode = new NodeMirror(engine, null);
   const source = new ConnectorMirror(engine, sourceNode, {
@@ -161,7 +182,7 @@ test("connector config updates stay live without replacing topology", () => {
   expect(source.outgoingLines).toEqual([existingLine]);
 
   const strategy: ConnectorSurfaceStrategy = {
-    sourceHitTest: ({ position }) => ({
+    targetHitTest: ({ position }) => ({
       anchor: position,
       distance: 0,
     }),
@@ -205,10 +226,6 @@ test("connector config updates stay live without replacing topology", () => {
   expect(source.config.edgePan).toBe(false);
   expect(source.colliderList[0]).toBeInstanceOf(CircleCollider);
   expect((source.colliderList[0] as CircleCollider).radius).toBe(42);
-  expect(global.data.sourceSurfaces).toEqual([source]);
-  const updatedLine = source.createLine();
-  expect(updatedLine).toBeInstanceOf(LineMirror);
-  updatedLine.destroy(false);
 
   source.updateConfig({
     callbacks: undefined,
@@ -233,10 +250,6 @@ test("connector config updates stay live without replacing topology", () => {
   expect(source.isSource).toBe(false);
   expect(source.isTarget).toBe(true);
   expect((source.colliderList[0] as CircleCollider).radius).toBe(30);
-  expect(global.data.sourceSurfaces).toEqual([]);
-  const defaultLine = source.createLine();
-  expect(defaultLine).toBeInstanceOf(LineMirror);
-  defaultLine.destroy(false);
 
   source.destroy();
   target.destroy();
@@ -298,3 +311,123 @@ test("visible port binding can toggle while preserving connector lines", () => {
     restoreObservers();
   }
 });
+
+test("target discovery is narrowed by the collision point query", () => {
+  const { engine } = createEngineHarness();
+  engine.collisionEngine = new CollisionEngine();
+  const sourceNode = new NodeMirror(engine, null);
+  const targetNode = new NodeMirror(engine, null);
+  const source = new ConnectorMirror(engine, sourceNode, {
+    name: "source",
+    rules: { maxIncoming: 0 },
+  });
+  const target = new ConnectorMirror(engine, targetNode, {
+    name: "target",
+    rules: { maxOutgoing: 0 },
+    surfaceStrategies: [
+      {
+        targetHitTest: ({ position }) => ({
+          anchor: position,
+          distance: 0,
+        }),
+      },
+    ],
+  });
+  sourceNode.addConnectorObject(source);
+  targetNode.addConnectorObject(target);
+  target.localTransform = { x: 100, y: 0 };
+
+  expect(source.findCandidateAtPoint({ x: 100, y: 0 })?.connector).toBe(target);
+  expect(source.findCandidateAtPoint({ x: 200, y: 0 })).toBeNull();
+  source.destroy();
+  target.destroy();
+  sourceNode.destroy();
+  targetNode.destroy();
+});
+
+test("targetHitTest replaces the ordinary center fallback", () => {
+  const restoreObservers = installObserverStubs();
+  const { engine } = createEngineHarness();
+  const sourceNode = new NodeMirror(engine, null);
+  const targetNode = new NodeMirror(engine, null);
+  const source = new ConnectorMirror(engine, sourceNode, {
+    name: "source",
+    rules: { maxIncoming: 0 },
+  });
+  const target = new ConnectorMirror(engine, targetNode, {
+    name: "target",
+    rules: { maxOutgoing: 0 },
+    surfaceStrategies: [{ targetHitTest: () => null }],
+  });
+  sourceNode.addConnectorObject(source);
+  targetNode.addConnectorObject(target);
+
+  try {
+    target.bindElement({ remove() {} } as unknown as HTMLElement);
+    expect(source.findCandidateAtPoint({ x: 0, y: 0 })).toBeNull();
+  } finally {
+    target.bindElement(null);
+    source.destroy();
+    target.destroy();
+    sourceNode.destroy();
+    targetNode.destroy();
+    restoreObservers();
+  }
+});
+
+test("a pre-threshold reconnect release disarms the delegated source", () => {
+  const { engine, handle } = createControlledHarness();
+  const sourceNode = new NodeMirror(engine, null);
+  const targetNode = new NodeMirror(engine, null);
+  const source = new ConnectorMirror(engine, sourceNode, {
+    id: "reconnect-source",
+    name: "source",
+    rules: { maxIncoming: 0 },
+  });
+  const target = new ConnectorMirror(engine, targetNode, {
+    id: "reconnect-target",
+    name: "target",
+    rules: { maxOutgoing: 0 },
+  });
+  sourceNode.addConnectorObject(source);
+  targetNode.addConnectorObject(target);
+  handle.setCanonicalGraph({
+    lines: [
+      {
+        id: "existing",
+        fromConnectorId: source.connectorId,
+        toConnectorId: target.connectorId,
+      },
+    ],
+  });
+  handle.flush();
+
+  const clickEvent = { button: 0, buttons: 0, pointerId: 4 } as PointerEvent;
+  target.armSurfaceGesture(
+    {
+      event: clickEvent,
+      position: {
+        x: 0,
+        y: 0,
+        cameraX: 0,
+        cameraY: 0,
+        screenX: 0,
+        screenY: 0,
+      },
+    } as any,
+    null,
+  );
+  (target as any).event.input.pointerUp({
+    event: clickEvent,
+    cancelled: false,
+  });
+
+  armGesture(source, 5);
+  startGestureDrag(source, 5);
+  expect(source.outgoingLines).toHaveLength(2);
+
+  source.destroy();
+  target.destroy();
+  sourceNode.destroy();
+  targetNode.destroy();
+});
diff --git a/tests/ut/snapline-graph-mirror.spec.ts b/tests/ut/snapline-graph-mirror.spec.ts
index 7ec8335..35bd8f7 100644
--- a/tests/ut/snapline-graph-mirror.spec.ts
+++ b/tests/ut/snapline-graph-mirror.spec.ts
@@ -2,6 +2,7 @@ import { expect, test } from "@playwright/test";
 import {
   ConnectorMirror,
   GroupNodeMirror,
+  LineMirror,
   NodeMirror,
   ResizeRegionMirror,
 } from "../../assets/snapline/core/src";
@@ -31,7 +32,7 @@ test("mirrors mint domain ids when none is supplied and honor supplied ids", ()
   expect(connector.connectorId).toMatch(/^connector-\d+$/);
   expect(namedConnector.connectorId).toBe("app-port");
 
-  const line = connector.createLine();
+  const line = new LineMirror(engine, connector);
   expect(line.lineId).toMatch(/^line-\d+$/);
 });
 
@@ -102,7 +103,7 @@ test("lines move preview -> settled -> preview and unregister on destroy", () =>
     const { source } = mountConnectedPair(engine);
 
     // A freshly minted line is a preview, not part of the settled graph.
-    const preview = source.createLine();
+    const preview = new LineMirror(engine, source);
     expect(mirror.previewLines).toContain(preview);
     expect(mirror.lines).not.toContain(preview);
     expect(mirror.line(preview.lineId)).toBeNull();
diff --git a/tests/ut/snapline-observers.spec.ts b/tests/ut/snapline-observers.spec.ts
index 1191208..2587365 100644
--- a/tests/ut/snapline-observers.spec.ts
+++ b/tests/ut/snapline-observers.spec.ts
@@ -1,5 +1,9 @@
 import { expect, test } from "@playwright/test";
-import { ConnectorMirror, NodeMirror } from "../../assets/snapline/core/src";
+import {
+  ConnectorMirror,
+  LineMirror,
+  NodeMirror,
+} from "../../assets/snapline/core/src";
 
 import {
   armGesture,
@@ -39,7 +43,7 @@ function mountPair() {
 
 test("line geometry observers are multicast, and unsubscribing detaches only that one", () => {
   const { source } = mountPair();
-  const line = source.createLine();
+  const line = new LineMirror(source.engine, source);
   const first: number[] = [];
   const second: number[] = [];
 
@@ -64,7 +68,7 @@ test("line geometry observers are multicast, and unsubscribing detaches only tha
 
 test("the line signal fires synchronously BEFORE the write task is queued", () => {
   const { global, source } = mountPair();
-  const line = source.createLine();
+  const line = new LineMirror(source.engine, source);
   let queuedAtNotifyTime: string[] | null = null;
 
   line.onGeometryInvalidated(() => {
@@ -86,7 +90,7 @@ test("the line signal fires synchronously BEFORE the write task is queued", () =
 
 test("a throwing observer stops neither its peers nor the paint", () => {
   const { source } = mountPair();
-  const line = source.createLine();
+  const line = new LineMirror(source.engine, source);
   const survived: number[] = [];
   const painted: number[] = [];
   const errors: unknown[] = [];
@@ -180,7 +184,11 @@ test("resolveNewLine seeds a genuinely new line and rides into the request", ()
   const { engine, handle, requests, respondWith } = createControlledHarness();
   respondWith((request, current) => [...current, ...request.add]);
   const sourceNode = new NodeMirror(engine, null, {
-    resolveNewLine: ({ connector }) => ({ kind: `from:${connector.name}` }),
+    callbacks: {
+      resolveNewLine: ({ connector }) => ({
+        kind: `from:${connector.name}`,
+      }),
+    },
   });
   const targetNode = new NodeMirror(engine, null);
   const source = new ConnectorMirror(engine, sourceNode, {
@@ -216,7 +224,7 @@ test("resolveNewLine seeds a genuinely new line and rides into the request", ()
 test("a connector-level resolveNewLine overrides the node's", () => {
   const { engine } = createEngineHarness();
   const node = new NodeMirror(engine, null, {
-    resolveNewLine: () => "from-node",
+    callbacks: { resolveNewLine: () => "from-node" },
   });
   const plain = new ConnectorMirror(engine, node, {
     name: "plain",
@@ -225,7 +233,7 @@ test("a connector-level resolveNewLine overrides the node's", () => {
   const special = new ConnectorMirror(engine, node, {
     name: "special",
     rules: { maxIncoming: 0 },
-    resolveNewLine: () => "from-connector",
+    callbacks: { resolveNewLine: () => "from-connector" },
   });
   node.addConnectorObject(plain);
   node.addConnectorObject(special);
@@ -238,12 +246,38 @@ test("a connector-level resolveNewLine overrides the node's", () => {
   expect(special.outgoingLines[0].payload).toBe("from-connector");
 });
 
+test("resolveNewLine reads the current callback at gesture start", () => {
+  const { engine } = createEngineHarness();
+  const node = new NodeMirror(engine, null, {
+    callbacks: { resolveNewLine: () => "initial" },
+  });
+  const first = new ConnectorMirror(engine, node, {
+    name: "first",
+    rules: { maxIncoming: 0 },
+  });
+  const second = new ConnectorMirror(engine, node, {
+    name: "second",
+    rules: { maxIncoming: 0 },
+  });
+  node.addConnectorObject(first);
+  node.addConnectorObject(second);
+
+  armGesture(first, 4);
+  startGestureDrag(first, 4);
+  expect(first.outgoingLines[0].payload).toBe("initial");
+
+  node.callbacks.resolveNewLine = () => "updated";
+  armGesture(second, 5);
+  startGestureDrag(second, 5);
+  expect(second.outgoingLines[0].payload).toBe("updated");
+});
+
 test("a reconnect never re-seeds — the payload stays app-owned", () => {
   const { engine, handle, respondWith } = createControlledHarness();
   respondWith((request, current) => [...current, ...request.add]);
   let seeds = 0;
   const sourceNode = new NodeMirror(engine, null, {
-    resolveNewLine: () => `seed-${++seeds}`,
+    callbacks: { resolveNewLine: () => `seed-${++seeds}` },
   });
   const targetNode = new NodeMirror(engine, null);
   const source = new ConnectorMirror(engine, sourceNode, {
diff --git a/tests/ut/transform.spec.ts b/tests/ut/transform.spec.ts
index 56e0522..a9fb655 100644
--- a/tests/ut/transform.spec.ts
+++ b/tests/ut/transform.spec.ts
@@ -265,6 +265,32 @@ test.describe("Collider transforms", () => {
     expect(collisionEngine.isIntersecting(circle, point)).toBe(false);
   });
 
+  test("queryPoint returns every live hit in registration order", () => {
+    const engine = createEngine();
+    const collisionEngine = new CollisionEngine();
+    const rectParent = new BaseObject(engine);
+    const circleParent = new BaseObject(engine);
+    const pointParent = new BaseObject(engine);
+    const rect = new RectCollider(engine, rectParent, 0, 0, 20, 20);
+    const circle = new CircleCollider(engine, circleParent, 10, 10, 8);
+    const point = new PointCollider(engine, pointParent, 10, 10);
+
+    collisionEngine.addObject(rect);
+    collisionEngine.addObject(circle);
+    collisionEngine.addObject(point);
+    expect(collisionEngine.queryPoint({ x: 10, y: 10 })).toEqual([
+      rect,
+      circle,
+      point,
+    ]);
+
+    circleParent.worldTransform = { x: 100, y: 100 };
+    expect(collisionEngine.queryPoint({ x: 10, y: 10 })).toEqual([rect, point]);
+
+    collisionEngine.removeObject(rect.id);
+    expect(collisionEngine.queryPoint({ x: 10, y: 10 })).toEqual([point]);
+  });
+
   test("emits begin, collide, and end callbacks after transform updates", () => {
     const engine = createEngine();
     const collisionEngine = new CollisionEngine();