@grafloria/element 0.3.18 → 0.3.19

package/src/libs/renderer/src/instance/dom-event-binder.js

@@ -0,0 +1,2104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DomEventBinder = void 0;
+const tslib_1 = require("tslib");
+// wave12/connect-ergonomics (gap 1): the ONE undoable step a subflow drag commits.
+const engine_1 = require("@grafloria/engine");
+const platform_1 = require("../platform");
+// Wave 6 — Card 5: the pluggable tool registry. The binder CONSUMES it; a
+// registered tool gets first refusal on every gesture (see onMouseDown).
+const tools_1 = require("../ext/tools");
+// Wave 9 — Card 2: the touch/mobile gesture set (pan, pinch, tap, long-press,
+// drag-to-connect). Nothing in the framework-free renderer handled touch before.
+const touch_gestures_1 = require("../interaction/touch-gestures");
+// wave12/node-resize: the floating tool layer (8 resize handles + the clamp math).
+// It answers "what tools exist and what does grabbing one DO"; the binder is the
+// piece that was missing — the thing that actually GRABS one from a DOM pointer.
+const selection_tools_1 = require("../interaction/selection-tools");
+// wave12/connect-ergonomics (gap 2): the shipped proximity-connect engine, now
+// driven from the LIVE node drag instead of host glue.
+const port_positioning_1 = require("../svg/port-positioning");
+const wheel_scroll_yield_1 = require("./wheel-scroll-yield");
+const snapping_1 = require("../interaction/snapping");
+const in_place_editor_1 = require("../interaction/in-place-editor");
+// visio-depth: the shipped nudge math (KeyboardNavigationController.nudgeCommand)
+// was auto-wired only in the Angular wrapper; `enableKeyboardNudge` drives it here.
+const keyboard_navigation_1 = require("../interaction/keyboard-navigation");
+class DomEventBinder {
+    /**
+     * Wave 6 — Card 3. The nodes currently being DRAGGED (past the movement
+     * threshold — an armed-but-uncommitted press is a click, not a drag).
+     *
+     * Node-drag state lives here, not on the InteractionController, so a custom
+     * node component had no way to know it was being dragged — and `dragging` is
+     * one of the props the component contract promises. This is the read-only
+     * window onto it.
+     */
+    getDraggingNodeIds() {
+        var _a;
+        return ((_a = this.nodeDrag) === null || _a === void 0 ? void 0 : _a.committed) ? [...this.nodeDrag.nodeIds] : [];
+    }
+    /**
+     * True while a resize / rotate / vertex gesture owns the pointer.
+     *
+     * The companion to {@link getDraggingNodeIds} for the gestures that are NOT node drags.
+     * Custom-node culling needs it: unmounting a host element mid-resize would take the
+     * pointer capture and the handles with it, and `SelectionToolsController` keeps the
+     * gesture's own node private, so "is a gesture live" plus the current selection is the
+     * answer available from out here.
+     */
+    hasActiveGesture() {
+        return this.selectionTools.isActive();
+    }
+    constructor(container, host, options = {}) {
+        var _a, _b, _c, _d, _e;
+        this.container = container;
+        this.host = host;
+        this.attached = false;
+        this.spaceKeyPressed = false;
+        this.isPanning = false;
+        /** Armed by an empty-canvas left press; becomes a real pan past the drag threshold. */
+        this.pendingEmptyPan = null;
+        /**
+         * The screen point where a PORT press started a connection. A press on a
+         * port claims the gesture immediately — but a press that never travels past
+         * the drag threshold is a CLICK, and a click on a shape must select it.
+         * Without this, the port hit zones (top-centre, side-mid — a card's whole
+         * header band) were dead for selection: connect swallowed the press,
+         * completion at the same spot failed validation, and the release fell out
+         * as a silent no-op. Found by live audit, on every node type.
+         */
+        this.pendingPortClick = null;
+        /**
+         * Same click-vs-gesture layering for POSITIONED EDGE LABELS: a press on a
+         * label arms a label DRAG, so a motionless press-release ended as a silent
+         * no-op and the label was a selection dead zone — a query-builder join pill
+         * you could not click (live audit finding, the port dead-band's twin).
+         */
+        this.pendingLabelClick = null;
+        this.lastPanX = 0;
+        this.lastPanY = 0;
+        this.nodeDrag = null;
+        this.groupDrag = null;
+        /** The proximity candidate currently highlighted mid-drag (for commit on drop). */
+        this.proximityCandidate = null;
+        // Bound once so removeEventListener gets the SAME function object it added —
+        // `removeEventListener(this.onX.bind(this))` allocates a new function and
+        // silently removes nothing (the classic listener leak).
+        this.boundWheel = (e) => this.onWheel(e);
+        /**
+         * Have we ever seen a real PointerEvent?
+         *
+         * The mouse listeners are kept as a LEGACY FALLBACK and auto-disable the instant
+         * a pointer event arrives. Why: every real browser fires `pointerdown` before the
+         * compatibility `mousedown`, so in a browser the pointer path wins and the mouse
+         * path goes dead — no double-handling. But jsdom implements NO PointerEvent at
+         * all, and this renderer's unit suites drive the binder by dispatching real
+         * `MouseEvent`s at the container. Feature-detecting instead of hard-switching
+         * keeps those suites (and any host that synthesizes mouse events) working exactly
+         * as before, while real hardware gets the pointer pipeline.
+         */
+        this.sawPointerEvent = false;
+        /** The container's own touch-action, restored on detach. */
+        this.previousTouchAction = null;
+        this.boundPointerDown = (e) => this.onPointerDown(e);
+        this.boundPointerMove = (e) => this.onPointerMove(e);
+        this.boundPointerUp = (e) => this.onPointerUp(e);
+        this.boundPointerCancel = (e) => this.onPointerCancel(e);
+        this.boundContextMenu = (e) => this.onContextMenu(e);
+        // The legacy mouse listeners are GATED on `sawPointerEvent`: once the environment
+        // has proved it delivers PointerEvents, the pointer pipeline owns everything and
+        // these must go silent, or every mouse gesture would be handled twice (once as
+        // pointerdown, once as the compatibility mousedown that follows it).
+        //
+        // Gated on the LISTENER, not on onMouseDown() itself — the pointer fork calls
+        // onMouseDown() directly for mouse/pen, so gating the method would deafen the
+        // very path that replaces these.
+        this.boundMouseDown = (e) => {
+            if (this.sawPointerEvent)
+                return;
+            this.onMouseDown(e);
+        };
+        this.boundMouseMove = (e) => {
+            if (this.sawPointerEvent)
+                return;
+            this.onMouseMove(e);
+        };
+        this.boundMouseUp = (e) => {
+            if (this.sawPointerEvent)
+                return;
+            this.onMouseUp(e);
+        };
+        this.boundMouseLeave = () => this.onMouseLeave();
+        this.boundDblClick = (e) => this.onDoubleClick(e);
+        this.boundKeyDown = (e) => this.onKeyDown(e);
+        this.boundKeyUp = (e) => this.onKeyUp(e);
+        /** Did the press that resolveNode just handled land ON a drag handle? */
+        this.pressViaDragHandle = false;
+        this.options = {
+            enablePan: (_a = options.enablePan) !== null && _a !== void 0 ? _a : true,
+            enableZoom: (_b = options.enableZoom) !== null && _b !== void 0 ? _b : true,
+            zoomSensitivity: (_c = options.zoomSensitivity) !== null && _c !== void 0 ? _c : 0.1,
+            dragThreshold: (_d = options.dragThreshold) !== null && _d !== void 0 ? _d : 4,
+            readonly: (_e = options.readonly) !== null && _e !== void 0 ? _e : false,
+        };
+        this.selectionTools = new selection_tools_1.SelectionToolsController({
+            showHalo: false,
+            showRotateHandle: false,
+            showRemoveButton: false,
+            showLinkTools: false,
+        });
+        this.touch = new touch_gestures_1.TouchGestureController({
+            getEngine: () => this.host.getEngine(),
+            viewport: this.host.viewport,
+            interaction: this.host.interaction,
+            getRect: () => this.host.getRect(),
+            requestRender: () => this.host.requestRender(),
+            emit: (event, payload) => this.host.emit(event, payload),
+            isReadonly: () => this.isReadonly(),
+        }, {
+            enablePan: this.options.enablePan,
+            enableZoom: this.options.enableZoom,
+        }, this.selectionTools);
+    }
+    /**
+     * Wave 9 — Card 7. Is editing forbidden RIGHT NOW?
+     *
+     * Was: `this.options.readonly` — a static constructor flag. Which meant
+     * `engine.setMode(PRESENTATION)` — the engine's own read-only mode — did not
+     * reach the event binder AT ALL. You could put the engine in presentation mode
+     * and still drag nodes with the mouse.
+     *
+     * Now the binder asks the DOCUMENT, every time, so the mode is live: flip the
+     * engine to VIEW/PRESENTATION on a mounted canvas and the very next gesture is
+     * refused. The constructor option still forces read-only for a host that has no
+     * mode concept.
+     */
+    isReadonly() {
+        var _a, _b;
+        return this.options.readonly || ((_b = (_a = this.host.getEngine()) === null || _a === void 0 ? void 0 : _a.getDiagram()) === null || _b === void 0 ? void 0 : _b.isReadonly()) === true;
+    }
+    /** Bind DOM listeners. No-op on the server and no-op if already attached. */
+    attach() {
+        var _a;
+        if (this.attached || !(0, platform_1.isBrowser)())
+            return;
+        this.attached = true;
+        // ------------------------------------------------------------------------
+        // Wave 9 — Card 2. `touch-action: none`.
+        //
+        // THE line that makes touch work, and it did not exist anywhere in this
+        // repository. Without it the browser owns the gesture: it decides a one-finger
+        // drag is a page scroll and a two-finger spread is a page zoom, and it STOPS
+        // DELIVERING pointermove to us mid-gesture. Every handler below can be
+        // perfectly correct and the canvas still will not pan — the events never
+        // arrive. This is the difference between "touch code exists" and "touch works".
+        //
+        // Set imperatively rather than in a stylesheet because the renderer is
+        // framework-free and ships no CSS; the container belongs to the host.
+        // ------------------------------------------------------------------------
+        this.previousTouchAction = (_a = this.container.style.touchAction) !== null && _a !== void 0 ? _a : '';
+        this.container.style.touchAction = 'none';
+        this.container.addEventListener('wheel', this.boundWheel, { passive: false });
+        // Pointer events: the primary pipeline (mouse, pen AND touch).
+        this.container.addEventListener('pointerdown', this.boundPointerDown);
+        this.container.addEventListener('pointermove', this.boundPointerMove);
+        this.container.addEventListener('pointerup', this.boundPointerUp);
+        this.container.addEventListener('pointercancel', this.boundPointerCancel);
+        // Suppress the OS long-press menu on touch; we emit our own `contextmenu`
+        // payload from the gesture controller (with the node/edge under the finger).
+        this.container.addEventListener('contextmenu', this.boundContextMenu);
+        // Legacy mouse listeners. Auto-disabled the moment a real PointerEvent shows
+        // up (see `sawPointerEvent`), so in a browser these are dead and there is no
+        // double-handling — but jsdom has no PointerEvent, and the unit suites drive
+        // this binder with dispatched MouseEvents.
+        this.container.addEventListener('mousedown', this.boundMouseDown);
+        this.container.addEventListener('mousemove', this.boundMouseMove);
+        this.container.addEventListener('mouseup', this.boundMouseUp);
+        this.container.addEventListener('mouseleave', this.boundMouseLeave);
+        this.container.addEventListener('dblclick', this.boundDblClick);
+        window.addEventListener('keydown', this.boundKeyDown);
+        window.addEventListener('keyup', this.boundKeyUp);
+    }
+    /** Remove EXACTLY the listeners we added, and drop all gesture state. */
+    detach() {
+        var _a;
+        if (!this.attached)
+            return;
+        this.attached = false;
+        this.container.removeEventListener('wheel', this.boundWheel);
+        this.container.removeEventListener('pointerdown', this.boundPointerDown);
+        this.container.removeEventListener('pointermove', this.boundPointerMove);
+        this.container.removeEventListener('pointerup', this.boundPointerUp);
+        this.container.removeEventListener('pointercancel', this.boundPointerCancel);
+        this.container.removeEventListener('contextmenu', this.boundContextMenu);
+        this.container.removeEventListener('mousedown', this.boundMouseDown);
+        this.container.removeEventListener('mousemove', this.boundMouseMove);
+        this.container.removeEventListener('mouseup', this.boundMouseUp);
+        this.container.removeEventListener('mouseleave', this.boundMouseLeave);
+        this.container.removeEventListener('dblclick', this.boundDblClick);
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('keydown', this.boundKeyDown);
+            window.removeEventListener('keyup', this.boundKeyUp);
+        }
+        // Give the container its touch-action back — the binder must leave no trace.
+        if (this.previousTouchAction !== null) {
+            this.container.style.touchAction = this.previousTouchAction;
+            this.previousTouchAction = null;
+        }
+        this.touch.reset();
+        this.isPanning = false;
+        this.pendingEmptyPan = null;
+        this.nodeDrag = null;
+        this.groupDrag = null;
+        this.spaceKeyPressed = false;
+        (_a = this.engine()) === null || _a === void 0 ? void 0 : _a.setSnapGuides(null);
+        this.closeTextEditor(); // T10: never leave a caret floating over a dead canvas
+    }
+    // ==========================================================================
+    // Pointer events — the fork. Touch goes to the gesture controller; mouse and
+    // pen fall through to the ladder below (a PointerEvent IS a MouseEvent).
+    // ==========================================================================
+    onPointerDown(event) {
+        var _a, _b;
+        this.sawPointerEvent = true;
+        if (event.pointerType === 'touch') {
+            // Claim the gesture: suppresses the synthesized compatibility mouse events
+            // (which would otherwise run the whole mouse ladder a second time for every
+            // tap) and the OS text-selection/callout.
+            event.preventDefault();
+            // Capture, so a finger that slides off the canvas keeps delivering move/up.
+            // Without it a drag that leaves the element silently stops mid-gesture.
+            //
+            // wave11/gallery BUG FIX — this can THROW. setPointerCapture raises
+            // NotFoundError ("no active pointer with the given id") when the pointer is not
+            // an active one — which happens for a synthetic PointerEvent (a test, an a11y
+            // tool, a programmatic gesture) and, in the wild, when the pointer has already
+            // been released by the time the handler runs. Optional chaining does not catch a
+            // throw, so an unguarded call turned a lost race into an uncaught error that
+            // aborted the whole gesture. Capture is an optimisation, not a precondition;
+            // failing to get it must not take the gesture down with it.
+            try {
+                (_b = (_a = this.container).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, event.pointerId);
+            }
+            catch (_c) {
+                /* capture is best-effort; the gesture still works without it */
+            }
+            this.touch.onPointerDown(event);
+            return;
+        }
+        this.onMouseDown(event);
+    }
+    onPointerMove(event) {
+        this.sawPointerEvent = true;
+        if (event.pointerType === 'touch') {
+            this.touch.onPointerMove(event);
+            return;
+        }
+        this.onMouseMove(event);
+    }
+    onPointerUp(event) {
+        var _a, _b;
+        this.sawPointerEvent = true;
+        if (event.pointerType === 'touch') {
+            // Mirror of onPointerDown's guard — releasing a capture we never held (or that
+            // the browser already dropped) throws NotFoundError, which must not abort the
+            // gesture's own bookkeeping below.
+            try {
+                (_b = (_a = this.container).releasePointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, event.pointerId);
+            }
+            catch (_c) {
+                /* nothing to release; carry on */
+            }
+            this.touch.onPointerUp(event);
+            return;
+        }
+        this.onMouseUp(event);
+    }
+    onPointerCancel(event) {
+        var _a, _b;
+        if (event.pointerType === 'touch') {
+            try {
+                (_b = (_a = this.container).releasePointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, event.pointerId);
+            }
+            catch (_c) {
+                /* nothing to release */
+            }
+            this.touch.onPointerCancel(event);
+            return;
+        }
+        this.onMouseLeave();
+    }
+    /**
+     * The native context menu. On touch the long-press already emitted our own
+     * `contextmenu` payload, so the OS menu here would be a duplicate on top of it.
+     */
+    onContextMenu(event) {
+        const pointerType = event.pointerType;
+        if (pointerType === 'touch' || this.touch.activePointerCount > 0) {
+            event.preventDefault();
+        }
+    }
+    get isAttached() {
+        return this.attached;
+    }
+    // ==========================================================================
+    // Wheel — ctrl/⌘ (and trackpad pinch) zooms at the cursor; a plain wheel pans.
+    // The Figma/Miro/VS Code convention.
+    // ==========================================================================
+    onWheel(event) {
+        const engine = this.engine();
+        if (!engine)
+            return;
+        if (event.ctrlKey || event.metaKey) {
+            if (!this.options.enableZoom)
+                return;
+            event.preventDefault();
+            // Multiplicative: a notch is a constant RELATIVE change, so it feels the
+            // same at 0.2× and at 3× (an additive ±sensitivity does not).
+            const factor = 1 + this.options.zoomSensitivity;
+            const zoom = this.host.viewport.getZoom();
+            const target = event.deltaY > 0 ? zoom / factor : zoom * factor;
+            this.host.viewport.zoomAtPoint(target, event.clientX, event.clientY, this.host.getRect());
+            this.host.requestRender();
+            return;
+        }
+        if (!this.options.enablePan)
+            return;
+        // A wheel over scrollable HTML content inside a node (an ER table's rows,
+        // a class card's members) belongs to THAT card. Card content is
+        // pointer-events:none (drag-through), so native scroll can never reach it —
+        // the delegate scrolls it programmatically. CONTAINMENT: while the cursor is
+        // over the card the wheel is absorbed even at the end of its range, so the
+        // canvas never pans out from under it (move off the card to pan).
+        if ((0, wheel_scroll_yield_1.delegateWheelToScrollable)(event)) {
+            event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        const [dxPx, dyPx] = event.shiftKey
+            ? [event.deltaY || event.deltaX, 0] // shift → horizontal scroll
+            : [event.deltaX, event.deltaY];
+        if (!dxPx && !dyPx)
+            return;
+        this.host.viewport.panByScreenDelta(dxPx, dyPx);
+        this.host.requestRender();
+    }
+    // ==========================================================================
+    // Mouse down — the priority ladder.
+    // ==========================================================================
+    /** Wave 6 — Card 5: adapt a DOM event to the framework-free tool contract. */
+    toToolEvent(type, event, worldX, worldY) {
+        const rect = this.host.getRect();
+        return {
+            type,
+            world: { x: worldX, y: worldY },
+            screen: { x: event.clientX - rect.left, y: event.clientY - rect.top },
+            modifiers: {
+                shift: event.shiftKey,
+                ctrl: event.ctrlKey,
+                alt: event.altKey,
+                meta: event.metaKey,
+            },
+            source: event,
+        };
+    }
+    /** What the gesture landed on. Resolved ONCE, on pointerdown. */
+    toToolHit(worldX, worldY) {
+        var _a, _b, _c, _d, _e;
+        const diagram = (_a = this.engine()) === null || _a === void 0 ? void 0 : _a.getDiagram();
+        const state = this.host.interaction.getState();
+        const node = (_b = diagram === null || diagram === void 0 ? void 0 : diagram.getNodeAtPosition(worldX, worldY)) !== null && _b !== void 0 ? _b : undefined;
+        return {
+            node: node !== null && node !== void 0 ? node : undefined,
+            link: (_c = state.hoveredLink) !== null && _c !== void 0 ? _c : undefined,
+            port: (_d = state.hoveredPort) !== null && _d !== void 0 ? _d : undefined,
+            empty: !node && !state.hoveredLink && !state.hoveredPort,
+            // DELIBERATE mode's rule: a node only becomes draggable if it was ALREADY
+            // selected before this gesture. Captured here, before selection changes.
+            nodeWasSelected: node ? ((_e = node.state) === null || _e === void 0 ? void 0 : _e.selected) === true : false,
+        };
+    }
+    /**
+     * wave12/node-resize: the resize handle (if any) under a world point.
+     *
+     * Recomputes the tool layer at the CURRENT zoom on every press — the handles are
+     * a constant screen size, so their world footprint changes with the camera, and a
+     * stale layer would hit-test against last frame's zoom. Only `kind: 'resize'`
+     * handles are returned; the controller is configured to emit no others.
+     */
+    resizeHandleAt(worldX, worldY) {
+        const engine = this.engine();
+        if (!engine)
+            return null;
+        const layer = this.selectionTools.computeLayer(engine, this.host.viewport.getZoom());
+        const hit = this.selectionTools.hitTest(layer, worldX, worldY);
+        return hit && hit.kind === 'resize' ? hit : null;
+    }
+    /**
+     * wave14/interaction (defect 1): the reconnectable link ENDPOINT HANDLE under a
+     * world point, or null.
+     *
+     * Non-null only when the part-aware edge hit resolves to a source/target
+     * endpoint (8px grab radius) of a SELECTED link with reconnection enabled —
+     * i.e. exactly when the renderer draws a handle there. The mousedown ladder
+     * consults this INSIDE the hovered-port rung, because the handle is drawn on
+     * top of the port and a press inside its radius means the handle, not the port.
+     * Same gate as the rung-5/6 reconnect branch, so hover-then-press and
+     * press-without-hover start the identical gesture.
+     */
+    reconnectableEndpointAt(worldX, worldY, engine, config) {
+        if (!config.enableLinkReconnection)
+            return null;
+        const hit = this.host.interaction.getLinkHitAtPosition(worldX, worldY, engine);
+        if (!hit || hit.link.state !== 'selected')
+            return null;
+        if (hit.part === 'source-endpoint')
+            return { link: hit.link, endpoint: 'source' };
+        if (hit.part === 'target-endpoint')
+            return { link: hit.link, endpoint: 'target' };
+        return null;
+    }
+    onMouseDown(event) {
+        var _a, _b, _c, _d, _e;
+        const engine = this.engine();
+        const diagram = engine === null || engine === void 0 ? void 0 : engine.getDiagram();
+        if (!engine || !diagram)
+            return;
+        // A new press invalidates any recorded port/label press — only their
+        // branches below re-arm them. Stale ones would mis-read a later release.
+        this.pendingPortClick = null;
+        this.pendingLabelClick = null;
+        // 1. Pan: middle button, or left button while Space is held.
+        if (event.button === 1 || (event.button === 0 && this.spaceKeyPressed)) {
+            if (!this.options.enablePan)
+                return;
+            event.preventDefault();
+            this.isPanning = true;
+            this.lastPanX = event.clientX;
+            this.lastPanY = event.clientY;
+            this.setCursor('grabbing');
+            return;
+        }
+        if (event.button !== 0)
+            return;
+        const { x: worldX, y: worldY } = this.toWorld(event);
+        const config = engine.getInteractionConfig();
+        const state = this.host.interaction.getState();
+        // ------------------------------------------------------------------
+        // Wave 6 — Card 5: REGISTERED TOOLS get first refusal on the gesture.
+        //
+        // The five built-in behaviours below are a hardcoded priority ladder. A host
+        // that wanted to replace one — a custom lasso, a different node-drag — had
+        // no seam to do it through. Now a registered tool may CLAIM the gesture on
+        // pointerdown, and if it does it owns the whole thing (move/up/cancel) and
+        // none of the ladder runs.
+        //
+        // With NO tools registered `resolveTool` returns undefined and everything
+        // below is byte-identical to before — which is why this is additive.
+        // ------------------------------------------------------------------
+        if (!this.isReadonly()) {
+            const toolEvent = this.toToolEvent('down', event, worldX, worldY);
+            const toolHit = this.toToolHit(worldX, worldY);
+            const tool = (0, tools_1.resolveTool)(toolEvent, toolHit);
+            if (tool) {
+                event.preventDefault();
+                this.activeTool = tool;
+                this.activeToolHit = toolHit;
+                (_a = tool.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(tool, toolEvent, toolHit);
+                this.host.requestRender();
+                return;
+            }
+        }
+        // ------------------------------------------------------------------
+        // wave12/node-resize: a RESIZE HANDLE on the selected node.
+        //
+        // Checked BEFORE ports and before node selection/drag: a corner handle sits
+        // exactly on the node's corner, so if the node hit-test won here every attempt
+        // to resize would drag the node instead. Handles only exist for a single
+        // selected, resizable node (see SelectionToolsController.computeLayer), so this
+        // is inert until the user has selected something — the first click selects, the
+        // handle appears, the second grabs it.
+        //
+        // resize-ux: the four SIDE handles are BANDS along the whole edge now (see
+        // ToolHandle.segment) — RF's line affordance — so side resize is reachable
+        // anywhere along the border. The port keeps its own core: when the pointer
+        // is on a hovered port OF THE SAME NODE (the port's grab radius), the PORT
+        // wins and the press falls through to the connection rung below — a user
+        // aiming at the glyph they can see draws a wire, never grows the node. One
+        // shared predicate (`sideHandleYieldsToPort`) makes the mouse ladder, the
+        // touch ladder and the hover cursor agree on that boundary. Corners never
+        // coincide with ports and always resize.
+        // ------------------------------------------------------------------
+        if (!this.isReadonly()) {
+            const handle = this.resizeHandleAt(worldX, worldY);
+            if (handle && !(0, selection_tools_1.sideHandleYieldsToPort)(handle, state.hoveredPort)) {
+                event.preventDefault();
+                this.selectionTools.beginResize(handle, engine, worldX, worldY);
+                // resize-ux: the in-flight-move branch returns before the cursor ladder,
+                // so the cursor set here is the one the WHOLE drag shows. Without it the
+                // drag kept whatever the last hover said ('pointer', over the node).
+                this.setCursor(handle.cursor);
+                this.host.requestRender();
+                return;
+            }
+        }
+        if (!this.isReadonly()) {
+            // 2. Port → start a connection drag… UNLESS the press is on a link
+            // endpoint handle drawn ON that port.
+            //
+            // wave14/interaction DEFECT-1 FIX. A selected link's endpoint handle is
+            // rendered AT the port it connects to (the routed polyline ends on the
+            // port), and the pointermove that carries the mouse onto the handle sets
+            // `hoveredPort` (≈11px hit radius: portDefaultRadius 6 × hoverScale 1.5
+            // + 2px) — so this rung used to swallow the press and the natural
+            // reconnect gesture ALWAYS started a new connection instead. When the
+            // press point is inside the endpoint's own 8px grab radius
+            // (DEFAULT_ENDPOINT_RADIUS) on a selected, reconnectable link, the user
+            // is visibly touching the handle drawn on top: the ENDPOINT wins.
+            //
+            // Starting a fresh connection from that port stays possible: the annulus
+            // 8 < d ≤ 11 around the handle still belongs to the port (3px of ring for
+            // a mouse — thin but real, and it widens by `hitSlop` on touch), every
+            // OTHER port of the node is untouched, and an endpoint drag dropped on an
+            // invalid target reverts, so the worst mis-grab costs one Escape.
+            if (state.hoveredPort) {
+                // Mode B of the link-selectability audit: the port's HOVER hit radius
+                // (~11: 6 × 1.5 + 2) is wider than its visible glyph, and this rung
+                // swallowed every press in that halo — including clicks squarely on a
+                // link's ARROWHEAD or stroke near its endpoint, which then dead-ended
+                // as an aborted wire-draw instead of selecting the edge. In the OUTER
+                // ring (beyond the port's base grab radius) a press that lands on link
+                // INK belongs to the link: fall through to the link rungs. Presses in
+                // the core (≤ base radius + 2) keep starting connections, so the
+                // PORT-WIRE gesture is untouched.
+                const hoverNode = diagram.getNode(state.hoveredPort.nodeId);
+                if (hoverNode) {
+                    const anchor = (0, port_positioning_1.portWorldPosition)(state.hoveredPort, hoverNode);
+                    const basePortRadius = (_c = (_b = state.hoveredPort.style) === null || _b === void 0 ? void 0 : _b['radius']) !== null && _c !== void 0 ? _c : 6;
+                    const inOuterRing = Math.hypot(worldX - anchor.x, worldY - anchor.y) > basePortRadius + 2;
+                    if (inOuterRing) {
+                        const inkHit = this.host.interaction.getLinkHitAtPosition(worldX, worldY, engine);
+                        // ANY link part claims the press, not just 'body' — near a path
+                        // end the nearest part IS the endpoint handle (its anchor sits on
+                        // the path), and those presses are exactly the ones the port was
+                        // stealing (unselected links were unclickable within ~11px of
+                        // their ends).
+                        if (inkHit) {
+                            // Not this rung's press — the link-body rung below selects it.
+                            state.hoveredPort = null;
+                        }
+                    }
+                }
+            }
+            if (state.hoveredPort) {
+                event.preventDefault();
+                const endpointHit = this.reconnectableEndpointAt(worldX, worldY, engine, config);
+                if (endpointHit) {
+                    this.host.interaction.startLinkReconnection(endpointHit.link, endpointHit.endpoint, worldX, worldY, engine);
+                    this.host.requestRender();
+                    return;
+                }
+                // Remember where this press landed: if it releases inside the drag
+                // threshold it was a click on the shape, not a connection attempt.
+                this.pendingPortClick = {
+                    startX: event.clientX,
+                    startY: event.clientY,
+                    nodeId: state.hoveredPort.nodeId,
+                };
+                this.host.interaction.startConnection(state.hoveredPort, worldX, worldY, engine);
+                this.host.requestRender();
+                return;
+            }
+            // 3/4. Control-point and waypoint handles. These are separate SVG circles,
+            // so clicking one does NOT register as hovering the link path — which is
+            // why both are hit-tested against every SELECTED link rather than the
+            // hovered one.
+            const selectedLinks = diagram
+                .getLinks()
+                .filter((link) => link.state === 'selected');
+            if (config.enableControlPointEditing) {
+                for (const link of selectedLinks) {
+                    const hit = this.host.interaction.hitTestControlPoint(worldX, worldY, link);
+                    if (hit) {
+                        event.preventDefault();
+                        this.host.interaction.startControlPointDrag(hit.segmentIndex, hit.controlType, link);
+                        this.host.requestRender();
+                        return;
+                    }
+                }
+            }
+            if (config.enableWaypointEditing) {
+                for (const link of selectedLinks) {
+                    const waypointIndex = this.host.interaction.hitTestWaypoint(worldX, worldY, link);
+                    if (waypointIndex !== null) {
+                        event.preventDefault();
+                        this.host.interaction.startWaypointDrag(waypointIndex, link);
+                        this.host.requestRender();
+                        return;
+                    }
+                    if (this.host.interaction.hitTestPath(worldX, worldY, link)) {
+                        event.preventDefault();
+                        if (this.host.interaction.addWaypoint(worldX, worldY, link)) {
+                            this.host.requestRender();
+                        }
+                        return;
+                    }
+                }
+            }
+            // 5/6. Part-aware edge hit: endpoint handle → reconnect, label → drag.
+            // A body hit deliberately falls through to link selection below.
+            const edgeHit = this.host.interaction.getLinkHitAtPosition(worldX, worldY, engine);
+            if (edgeHit) {
+                if ((edgeHit.part === 'source-endpoint' || edgeHit.part === 'target-endpoint') &&
+                    config.enableLinkReconnection &&
+                    edgeHit.link.state === 'selected') {
+                    event.preventDefault();
+                    const endpoint = edgeHit.part === 'source-endpoint' ? 'source' : 'target';
+                    this.host.interaction.startLinkReconnection(edgeHit.link, endpoint, worldX, worldY, engine);
+                    this.host.requestRender();
+                    return;
+                }
+                if (edgeHit.part === 'label' &&
+                    edgeHit.labelIndex !== undefined &&
+                    (
+                    // Only POSITIONED labels drag (they own position/offset). A display-
+                    // label hit (synthesized box over `metadata.label`, no labels[]
+                    // entry) falls through to link selection instead.
+                    (_d = edgeHit.link.labels) === null || _d === void 0 ? void 0 : _d[edgeHit.labelIndex])) {
+                    event.preventDefault();
+                    this.pendingLabelClick = {
+                        startX: event.clientX,
+                        startY: event.clientY,
+                        linkId: edgeHit.link.id,
+                    };
+                    this.host.interaction.startLabelDrag(edgeHit.link, edgeHit.labelIndex);
+                    this.host.requestRender();
+                    return;
+                }
+            }
+        }
+        // 7. Link body → select. Hover state is the fast path; fall back to a direct
+        // hit-test because on first load no mousemove has run yet.
+        //
+        // BUT a node body covers link ink: nodes paint in `nodes-layer`, ABOVE
+        // `links-layer`, so at a point where both coincide the user is touching the
+        // NODE — the ink is invisible under it. This rung used to win anyway, so a
+        // node dropped onto a link's path became undraggable at exactly the spot
+        // the user grabbed it (visio gate: recv adopted between pick and ship sits
+        // on the pick→ship path; the drag-out press selected that link instead and
+        // the node never moved).
+        const link = diagram.getNodeAtPosition(worldX, worldY)
+            ? null
+            : ((_e = state.hoveredLink) !== null && _e !== void 0 ? _e : this.host.interaction.getLinkAtPosition(worldX, worldY, engine));
+        if (link) {
+            event.preventDefault();
+            this.host.interaction.selectLink(link, engine, event.ctrlKey || event.metaKey);
+            this.host.requestRender();
+            this.emitSelectionChange();
+            this.host.emit('edge:click', { edge: link, world: { x: worldX, y: worldY } });
+            return;
+        }
+        // 8. Node → select (+ arm a drag).
+        const node = this.resolveNode(diagram, worldX, worldY, event);
+        if (node) {
+            event.preventDefault();
+            // 8a. wave12 (gap 3) — Easy Connect: the whole node BODY is a handle. When
+            // on (and the configured modifier, if any, is held), a body press starts a
+            // CONNECTION from the node's nearest port instead of a move. A press ON a
+            // port already started a connection at step 2, so this only fires on the
+            // body. Off by default, so normal body-drag-to-move is untouched; a host
+            // that keeps move gates connect behind `easyConnectModifier` (e.g. shift).
+            if (!this.isReadonly() && config.enableEasyConnect && this.easyConnectModifierHeld(event, config)) {
+                // Select the node first (so a plain click still selects), THEN connect.
+                this.host.interaction.startNodeBodyConnection(node, worldX, worldY, engine);
+                this.host.requestRender();
+                this.host.emit('node:click', { node, world: { x: worldX, y: worldY } });
+                return;
+            }
+            this.pressNode(node, diagram, event, worldX, worldY);
+            this.host.emit('node:click', { node, world: { x: worldX, y: worldY } });
+            return;
+        }
+        // 8b. wave12 (gap 1) — Group frame → drag the whole subflow. Only reached
+        // when NO node/link/port was under the cursor (a member node wins the ladder
+        // above), so this is a press on the container's empty area / header. Opt-in
+        // via `enableGroupDrag`; off, this falls straight through to the clear below,
+        // byte-identical to the historic behaviour.
+        if (!this.isReadonly() &&
+            config.enableGroupDrag &&
+            !(event.shiftKey || event.ctrlKey || event.metaKey || event.altKey)) {
+            const group = this.findGroupAtPoint(diagram, worldX, worldY);
+            if (group) {
+                event.preventDefault();
+                this.pressGroup(group, diagram, event, worldX, worldY);
+                return;
+            }
+        }
+        // 9. Empty canvas → clear the selection (unless a modifier is extending it),
+        //    and ARM a pan: dragging empty canvas is the industry-default pan
+        //    gesture (React Flow, Figma, tldraw), and six demo pages documented it
+        //    while the binder only panned on middle-button/Space (live audit: the
+        //    printed step was a silent no-op). A plain CLICK still only deselects —
+        //    the pan engages past the drag threshold in onMouseMove.
+        const hasModifier = event.shiftKey || event.ctrlKey || event.metaKey || event.altKey;
+        if (!hasModifier) {
+            diagram.clearSelection();
+            diagram.getLinks().forEach((l) => {
+                if (l.state === 'selected')
+                    l.setState('default');
+            });
+            this.host.requestRender();
+            this.emitSelectionChange();
+            if (this.options.enablePan) {
+                this.pendingEmptyPan = { startX: event.clientX, startY: event.clientY };
+            }
+        }
+    }
+    // ==========================================================================
+    // Mouse move
+    // ==========================================================================
+    onMouseMove(event) {
+        var _a, _b, _c;
+        const engine = this.engine();
+        if (!engine || !engine.getDiagram())
+            return;
+        // Wave 6 — Card 5: a tool that CLAIMED this gesture owns every subsequent
+        // move until pointerup. Checked before panning so a tool can pan itself.
+        if (this.activeTool) {
+            const { x, y } = this.toWorld(event);
+            (_b = (_a = this.activeTool).onPointerMove) === null || _b === void 0 ? void 0 : _b.call(_a, this.toToolEvent('move', event, x, y), (_c = this.activeToolHit) !== null && _c !== void 0 ? _c : { empty: true });
+            this.host.requestRender();
+            return;
+        }
+        // wave12/node-resize: an in-flight resize owns the pointer. The clamp
+        // (min/max/aspect) is applied INSIDE updateResize, every move — you cannot drag
+        // the box past its limits, it is not fixed up at the end.
+        if (this.selectionTools.activeGesture() === 'resize') {
+            const { x, y } = this.toWorld(event);
+            if (this.selectionTools.updateResize(engine, x, y, {
+                shift: event.shiftKey,
+                alt: event.altKey,
+                ctrl: event.ctrlKey,
+                meta: event.metaKey,
+            }, 
+            // T2/visio — snap the RESIZED box to sibling edges/centres. `updateResize`
+            // always accepted this hook and the binder never passed one, so a resize
+            // was the one gesture with no alignment help. Shares `enableHelperLines`
+            // with the drag: a host that asked for snap guides means both.
+            this.resizeSnapHook(engine))) {
+                this.host.interaction.invalidatePortHitCache();
+                this.host.requestRender();
+            }
+            return;
+        }
+        if (this.pendingEmptyPan && !this.isPanning) {
+            // Only while the PRIMARY button is genuinely down: the armed state is
+            // also cleared on pointerup, but a hover move must never engage a pan.
+            if ((event.buttons & 1) === 0) {
+                this.pendingEmptyPan = null;
+            }
+            else {
+                const dx = event.clientX - this.pendingEmptyPan.startX;
+                const dy = event.clientY - this.pendingEmptyPan.startY;
+                if (Math.hypot(dx, dy) >= this.options.dragThreshold) {
+                    this.isPanning = true;
+                    this.lastPanX = event.clientX;
+                    this.lastPanY = event.clientY;
+                    this.setCursor('grabbing');
+                }
+            }
+        }
+        if (this.isPanning) {
+            // Drag RIGHT ⇒ camera LEFT, so the content follows the cursor.
+            this.host.viewport.panByScreenDelta(this.lastPanX - event.clientX, this.lastPanY - event.clientY);
+            this.lastPanX = event.clientX;
+            this.lastPanY = event.clientY;
+            this.host.requestRender();
+            return;
+        }
+        if (this.groupDrag) {
+            this.moveGroupDrag(event);
+            return;
+        }
+        if (this.nodeDrag) {
+            this.moveNodeDrag(event);
+            return;
+        }
+        const state = this.host.interaction.getState();
+        const { x: worldX, y: worldY } = this.toWorld(event);
+        if (state.isDraggingControlPoint) {
+            if (this.host.interaction.moveControlPoint(worldX, worldY, engine)) {
+                this.host.requestRender();
+            }
+            return;
+        }
+        if (state.isDraggingWaypoint) {
+            if (this.host.interaction.moveWaypoint(worldX, worldY, engine)) {
+                this.host.requestRender();
+            }
+            return;
+        }
+        if (state.isDraggingLabel) {
+            if (this.host.interaction.moveLabelDrag(worldX, worldY)) {
+                this.host.requestRender();
+            }
+            return;
+        }
+        if (state.isReconnectingLink) {
+            // Refresh hover first so reconnection validity sees the port under the cursor.
+            this.host.interaction.handleMouseMove(worldX, worldY, engine);
+            this.host.interaction.updateLinkReconnection(worldX, worldY, engine);
+            this.host.requestRender();
+            return;
+        }
+        if (this.spaceKeyPressed)
+            return;
+        let needsRender = this.host.interaction.handleMouseMove(worldX, worldY, engine);
+        if (this.host.interaction.getState().isConnecting) {
+            needsRender =
+                this.host.interaction.handleConnectionDrag(worldX, worldY, engine) || needsRender;
+        }
+        // Keep the Delete-key targets (hovered waypoint / control point) current.
+        const config = engine.getInteractionConfig();
+        if (config.enableWaypointEditing || config.enableControlPointEditing) {
+            const hovered = this.host.interaction.getState().hoveredLink;
+            const selectedLink = hovered && hovered.state === 'selected' ? hovered : null;
+            if (config.enableWaypointEditing) {
+                this.host.interaction.updateHoveredWaypoint(worldX, worldY, selectedLink);
+            }
+            if (config.enableControlPointEditing) {
+                this.host.interaction.updateHoveredControlPoint(worldX, worldY, selectedLink);
+            }
+        }
+        // resize-ux (live audit): the cursor ladder knew port/link/node but not the
+        // resize handles, so hovering a handle showed 'pointer' and nothing ever
+        // advertised resizability — RF shows nwse/nesw/ns/ew-resize per handle. The
+        // override mirrors the PRESS ladder exactly (same hit, same port-yield
+        // predicate): wherever the press would resize, the cursor says resize;
+        // wherever the port would claim the press, the crosshair stands.
+        let toolCursor = null;
+        if (!this.isReadonly()) {
+            const handle = this.resizeHandleAt(worldX, worldY);
+            if (handle && !(0, selection_tools_1.sideHandleYieldsToPort)(handle, this.host.interaction.getState().hoveredPort)) {
+                toolCursor = handle.cursor;
+            }
+        }
+        this.setCursor(toolCursor !== null && toolCursor !== void 0 ? toolCursor : this.host.interaction.getCursor(engine));
+        if (needsRender)
+            this.host.requestRender();
+    }
+    // ==========================================================================
+    // Mouse up
+    // ==========================================================================
+    onMouseUp(event) {
+        var _a, _b, _c;
+        const engine = this.engine();
+        if (!engine)
+            return;
+        if (event.button !== 0 && event.button !== 1)
+            return;
+        // Wave 6 — Card 5: hand the gesture's end to the tool that claimed it, then
+        // release it. Released in a `finally` so a throwing tool cannot wedge the
+        // canvas into a state where every future gesture is swallowed.
+        if (this.activeTool) {
+            const tool = this.activeTool;
+            const hit = (_a = this.activeToolHit) !== null && _a !== void 0 ? _a : { empty: true };
+            const { x, y } = this.toWorld(event);
+            try {
+                (_b = tool.onPointerUp) === null || _b === void 0 ? void 0 : _b.call(tool, this.toToolEvent('up', event, x, y), hit);
+            }
+            finally {
+                this.activeTool = undefined;
+                this.activeToolHit = undefined;
+                this.host.requestRender();
+            }
+            return;
+        }
+        // wave12/node-resize: commit the resize as ONE undoable command. The model
+        // already sits at its final size (updateResize mutated it live); the command
+        // re-applies that (a no-op) and records the inverse — the wave-3 gesture-commit
+        // pattern. `void`: the manager's execute() is async, but the visible state is
+        // already correct, so we don't block the pointerup on it.
+        if (this.selectionTools.activeGesture() === 'resize') {
+            event.preventDefault();
+            const command = this.selectionTools.endGesture(engine);
+            if (command) {
+                void engine.commandManager.execute(command);
+                this.emitNodesChange();
+            }
+            this.host.requestRender();
+            return;
+        }
+        const state = this.host.interaction.getState();
+        if (state.isDraggingControlPoint) {
+            event.preventDefault();
+            this.host.interaction.endControlPointDrag();
+            this.host.requestRender();
+            return;
+        }
+        if (state.isDraggingWaypoint) {
+            event.preventDefault();
+            this.host.interaction.endWaypointDrag(engine);
+            this.host.requestRender();
+            return;
+        }
+        if (state.isDraggingLabel) {
+            event.preventDefault();
+            const press = this.pendingLabelClick;
+            this.pendingLabelClick = null;
+            this.host.interaction.endLabelDrag();
+            // CLICK, not drag: select the label's link with the same semantics a
+            // press on the link body has, so a pill click drives selection:change
+            // and every inspector listening to it.
+            if (press &&
+                Math.hypot(event.clientX - press.startX, event.clientY - press.startY) <
+                    this.options.dragThreshold) {
+                const diagram = engine === null || engine === void 0 ? void 0 : engine.getDiagram();
+                const link = (_c = diagram === null || diagram === void 0 ? void 0 : diagram.getLink) === null || _c === void 0 ? void 0 : _c.call(diagram, press.linkId);
+                if (engine && link) {
+                    this.host.interaction.selectLink(link, engine, event.ctrlKey || event.metaKey);
+                    this.emitSelectionChange();
+                    this.host.emit('edge:click', { edge: link, world: this.toWorld(event) });
+                }
+            }
+            this.host.requestRender();
+            return;
+        }
+        if (state.isConnecting) {
+            event.preventDefault();
+            // CLICK, not drag: the press never left the threshold, so the user was
+            // clicking the shape — cancel the aborted connection and select the
+            // port's node with the same semantics a body click has (plain replaces,
+            // shift extends). Without this the port zones are selection dead bands.
+            const press = this.pendingPortClick;
+            this.pendingPortClick = null;
+            if (press &&
+                Math.hypot(event.clientX - press.startX, event.clientY - press.startY) <
+                    this.options.dragThreshold) {
+                this.host.interaction.cancelConnection(engine);
+                const diagram = engine.getDiagram();
+                const node = diagram === null || diagram === void 0 ? void 0 : diagram.getNode(press.nodeId);
+                if (diagram && node) {
+                    if (event.shiftKey)
+                        diagram.addToSelection(node);
+                    else
+                        diagram.selectNode(node);
+                    this.emitSelectionChange();
+                }
+                this.host.requestRender();
+                return;
+            }
+            // The link itself is created asynchronously by the engine's
+            // `connection:complete` handler, so `connect` is emitted from the
+            // instance's `link:added` subscription — not from here.
+            this.host.interaction.completeConnection(engine);
+            this.host.requestRender();
+            return;
+        }
+        if (state.isReconnectingLink) {
+            event.preventDefault();
+            // Capture BEFORE completing: completion clears the reconnection state.
+            const link = state.reconnectingLink;
+            const endpoint = state.reconnectingEndpoint;
+            if (this.host.interaction.completeLinkReconnection(engine) && link && endpoint) {
+                this.host.emit('reconnect', { link, endpoint });
+                this.emitEdgesChange();
+            }
+            this.host.requestRender();
+            return;
+        }
+        if (this.groupDrag) {
+            event.preventDefault();
+            this.endGroupDrag(engine);
+            this.setCursor('default');
+            return;
+        }
+        if (this.nodeDrag) {
+            const drag = this.nodeDrag;
+            const moved = drag.committed;
+            this.nodeDrag = null;
+            // wave12: record the completed drag as one undoable step BEFORE anything else.
+            if (moved && engine)
+                this.commitNodeMove(engine, drag);
+            // T8/visio: the drop may also change WHAT CONTAINS the node.
+            if (moved && engine)
+                this.applyMembershipOnDrop(engine, drag);
+            // wave12 (gap 2): a drag that ended near a compatible port auto-links on drop.
+            const connected = moved ? this.commitProximityConnection() : false;
+            if (moved)
+                this.emitNodesChange();
+            if (connected)
+                this.emitEdgesChange();
+        }
+        this.isPanning = false;
+        this.pendingEmptyPan = null;
+        this.setCursor(this.spaceKeyPressed ? 'grab' : 'default');
+    }
+    /** Pointer left the canvas — abort every in-flight gesture so nothing sticks. */
+    onMouseLeave() {
+        const engine = this.engine();
+        this.isPanning = false;
+        // wave12/node-resize: the pointer left mid-resize → commit what we have (the
+        // node already looks right; abandoning would snap it back under the user).
+        if (engine && this.selectionTools.activeGesture() === 'resize') {
+            const command = this.selectionTools.endGesture(engine);
+            if (command) {
+                void engine.commandManager.execute(command);
+                this.emitNodesChange();
+            }
+            this.host.requestRender();
+        }
+        // wave12/connect-ergonomics (gap 1): the pointer left mid-group-drag → commit it.
+        if (this.groupDrag) {
+            if (engine)
+                this.endGroupDrag(engine);
+            else
+                this.groupDrag = null;
+        }
+        if (this.nodeDrag) {
+            const drag = this.nodeDrag;
+            const moved = drag.committed;
+            this.nodeDrag = null;
+            // Pointer left mid-drag: keep the move (the node already looks moved; snapping it
+            // back would be worse) and STILL record it as one undoable step. Do not auto-connect.
+            if (moved && engine)
+                this.commitNodeMove(engine, drag);
+            this.clearProximityPreview();
+            if (moved)
+                this.emitNodesChange();
+        }
+        if (engine && this.host.interaction.getState().isConnecting) {
+            this.pendingPortClick = null;
+            this.host.interaction.cancelConnection(engine);
+            this.host.requestRender();
+        }
+        this.setCursor('default');
+    }
+    /** Double-click: node → in-place rename; link label → rename; link body → waypoint. */
+    onDoubleClick(event) {
+        var _a, _b;
+        const engine = this.engine();
+        if (!engine || this.isReadonly())
+            return;
+        const { x: worldX, y: worldY } = this.toWorld(event);
+        // Node bodies cover link ink (nodes-layer paints above links-layer), so a
+        // node under the point owns the double-click — same covered-ink rule as the
+        // mousedown ladder's link rung.
+        const nodeUnder = (_a = engine.getDiagram()) === null || _a === void 0 ? void 0 : _a.getNodeAtPosition(worldX, worldY);
+        const hit = nodeUnder
+            ? null
+            : this.host.interaction.getLinkHitAtPosition(worldX, worldY, engine);
+        if (!hit) {
+            const node = nodeUnder;
+            if (node) {
+                this.host.emit('node:doubleclick', { node, world: { x: worldX, y: worldY } });
+                // T10/visio — double-click EDITS the label. InPlaceTextEditor (session +
+                // undoable commit) was real but auto-wired only in the Angular wrapper,
+                // so a vanilla/React/Vue embed got an event and no editor. Opt-in via
+                // `enableInPlaceTextEdit`; the host can still prefer its own editor by
+                // leaving it off and handling `node:doubleclick`.
+                if (engine.getInteractionConfig().enableInPlaceTextEdit === true) {
+                    this.openTextEditor(engine, { type: 'node', nodeId: node.id });
+                }
+            }
+            return;
+        }
+        // visio-depth — double-click an edge LABEL edits it in place, exactly like
+        // a node label (same editor, same undoable commit; the display-label
+        // dialect is resolved inside InPlaceTextEditor.begin). Same opt-in flag.
+        if (hit.part === 'label' &&
+            engine.getInteractionConfig().enableInPlaceTextEdit === true) {
+            event.preventDefault();
+            this.openTextEditor(engine, {
+                type: 'link-label',
+                linkId: hit.link.id,
+                labelIndex: (_b = hit.labelIndex) !== null && _b !== void 0 ? _b : 0,
+            });
+            return;
+        }
+        if (hit.part === 'body' && engine.getInteractionConfig().enableWaypointEditing) {
+            event.preventDefault();
+            if (this.host.interaction.addWaypoint(worldX, worldY, hit.link)) {
+                this.host.requestRender();
+                this.emitEdgesChange();
+            }
+        }
+    }
+    // ==========================================================================
+    // Keyboard
+    // ==========================================================================
+    onKeyDown(event) {
+        var _a, _b;
+        const engine = this.engine();
+        const diagram = engine === null || engine === void 0 ? void 0 : engine.getDiagram();
+        if (!engine || !diagram)
+            return;
+        // Never steal keys from a focused text field / contenteditable.
+        if (isTextEntryTarget(event.target))
+            return;
+        if (event.code === 'Space' && !this.spaceKeyPressed) {
+            this.spaceKeyPressed = true;
+            this.setCursor('grab');
+            return;
+        }
+        if (event.key === 'Escape') {
+            // wave13/stroke-edit: a REGISTERED TOOL that claimed the current gesture gets
+            // cancelled too. Every whiteboard tool implements onCancel() (clear the overlay,
+            // drop the in-flight state), but until now only pointercancel ever reached it —
+            // Escape mid-drag left the tool live and still eating pointermoves. Released in
+            // a `finally` for the same reason onMouseUp does: a throwing tool must not wedge
+            // the canvas into a state where every future gesture is swallowed.
+            if (this.activeTool) {
+                try {
+                    (_b = (_a = this.activeTool).onCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
+                }
+                finally {
+                    this.activeTool = undefined;
+                    this.activeToolHit = undefined;
+                }
+                // Escape LAYERS: the first press cancels the in-flight gesture and is
+                // CONSUMED — falling through here let the clear-selection branch below
+                // wipe the very selection the tool's onCancel just rolled back, so a
+                // cancelled marquee ended empty instead of restored (live audit
+                // finding). A second Escape, with no gesture active, deselects.
+                this.host.requestRender();
+                return;
+            }
+            const state = this.host.interaction.getState();
+            if (state.isConnecting) {
+                this.pendingPortClick = null;
+                this.host.interaction.cancelConnection(engine);
+            }
+            if (state.isReconnectingLink)
+                this.host.interaction.cancelLinkReconnection(engine);
+            // wave12/node-resize: Escape abandons an in-flight resize, restoring the
+            // node's pre-gesture size/position (SelectionToolsController.cancelGesture).
+            if (this.selectionTools.activeGesture() === 'resize') {
+                this.selectionTools.cancelGesture(engine);
+            }
+            // wave12 (gap 1): abandon an in-flight group drag WITHOUT restoring — matches
+            // node-drag Escape (which also leaves the node where the drag left it).
+            this.nodeDrag = null;
+            this.groupDrag = null;
+            this.clearProximityPreview(); // (gap 2) Escape never auto-connects
+            diagram.clearSelection();
+            this.host.requestRender();
+            this.emitSelectionChange();
+            return;
+        }
+        if ((event.key === 'Delete' || event.key === 'Backspace') && !this.isReadonly()) {
+            const removedWaypoint = this.host.interaction.deleteHoveredWaypoint();
+            const selectedLink = diagram
+                .getLinks()
+                .find((l) => l.state === 'selected');
+            const selectedNodes = diagram.getSelectedNodes();
+            if (removedWaypoint || selectedLink || selectedNodes.length > 0) {
+                event.preventDefault();
+                // THROUGH THE COMMAND STACK, as ONE undoable step. The old handler
+                // mutated the model directly (diagram.deleteSelected / removeLink), so
+                // keyboard Delete could not be undone — and worse, the NEXT undo
+                // replayed whatever stale command sat on top of the stack, aimed at an
+                // entity that no longer existed (the sweep caught MoveNodeCommand.undo
+                // throwing exactly that way).
+                const nodeIds = selectedNodes.map((n) => n.id);
+                const linkId = selectedLink === null || selectedLink === void 0 ? void 0 : selectedLink.id;
+                void (() => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                    const cm = engine.commandManager;
+                    const many = nodeIds.length + (linkId ? 1 : 0) > 1;
+                    if (many)
+                        cm.beginBatch();
+                    try {
+                        if (linkId)
+                            yield engine.removeLink(linkId);
+                        for (const id of nodeIds)
+                            yield engine.removeNode(id);
+                    }
+                    finally {
+                        if (many)
+                            yield cm.endBatch('Delete Selection');
+                    }
+                    this.host.requestRender();
+                    if (nodeIds.length > 0)
+                        this.emitNodesChange();
+                    if (linkId)
+                        this.emitEdgesChange();
+                    this.emitSelectionChange();
+                }))();
+            }
+            return;
+        }
+        // visio-depth — arrow-key NUDGE (opt-in via `enableKeyboardNudge`): the
+        // selection moves 1 world unit per press, ×10 with Shift, each press one
+        // undoable command — and MERGEABLE, so a held key's auto-repeat collapses
+        // into a single undo entry inside the CommandManager's merge window. The
+        // math is the shipped KeyboardNavigationController's; the focused-input
+        // guard at the top of this handler keeps arrows out of a live text editor.
+        if (!this.isReadonly() &&
+            event.key.startsWith('Arrow') &&
+            engine.getInteractionConfig().enableKeyboardNudge &&
+            !(event.ctrlKey || event.metaKey || event.altKey)) {
+            if (!this.keyboardNav)
+                this.keyboardNav = new keyboard_navigation_1.KeyboardNavigationController();
+            const delta = this.keyboardNav.nudgeDelta(event.key, event.shiftKey);
+            if (delta && diagram.getSelectedNodes().length > 0) {
+                event.preventDefault();
+                const command = this.keyboardNav.nudgeCommand(engine, delta.x, delta.y, {
+                    mergeable: true,
+                });
+                if (command) {
+                    void engine.commandManager.execute(command);
+                    this.host.requestRender();
+                    this.emitNodesChange();
+                }
+                return;
+            }
+        }
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+            event.preventDefault();
+            diagram.selectAll();
+            this.host.requestRender();
+            this.emitSelectionChange();
+            return;
+        }
+        // Standard editor keys. The engine has ALWAYS had the command stack and the
+        // clipboard — but no default binding reached them, so on a live page ⌘Z /
+        // Ctrl+Z did nothing (live report: "undo isn't working", "copy paste not
+        // working" — the demos proved the APIs while no keyboard path existed).
+        // ctrlKey OR metaKey throughout: a Ctrl-only chord is dead on every Mac.
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') {
+            event.preventDefault();
+            if (this.isReadonly())
+                return;
+            void (event.shiftKey ? engine.redo() : engine.undo()).then(() => {
+                this.host.requestRender();
+                this.emitNodesChange();
+                this.emitEdgesChange();
+                this.emitSelectionChange();
+            });
+            return;
+        }
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'y') {
+            event.preventDefault();
+            if (this.isReadonly())
+                return;
+            void engine.redo().then(() => {
+                this.host.requestRender();
+                this.emitNodesChange();
+                this.emitEdgesChange();
+                this.emitSelectionChange();
+            });
+            return;
+        }
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
+            // Copying mutates nothing — allowed even in readonly.
+            void engine.copy();
+            return;
+        }
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v') {
+            if (this.isReadonly() || !engine.hasClipboardData())
+                return;
+            event.preventDefault();
+            void engine.paste().then(() => {
+                this.host.requestRender();
+                this.emitNodesChange();
+                this.emitEdgesChange();
+                this.emitSelectionChange();
+            });
+            return;
+        }
+        // visio-depth — ⌘D / Ctrl+D duplicates the selection: copy + paste-with-
+        // offset as ONE command (DuplicateCommand shipped in Phase 1.8 with no
+        // keyboard reaching it). preventDefault matters here: the browser's default
+        // for this chord is bookmark-the-page.
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'd') {
+            if (this.isReadonly() || diagram.getSelectedNodes().length === 0)
+                return;
+            event.preventDefault();
+            void engine.duplicate().then(() => {
+                this.host.requestRender();
+                this.emitNodesChange();
+                this.emitEdgesChange();
+                this.emitSelectionChange();
+            });
+            return;
+        }
+        // visio-depth — F2 and TYPE-TO-REPLACE, both riding the same in-place
+        // editor double-click opens (gated on the same `enableInPlaceTextEdit`
+        // opt-in, and the focused-input guard at the top keeps both out of a live
+        // editor). F2 opens with the current label selected; a PRINTABLE key with
+        // exactly one node selected opens the editor seeded with that character,
+        // replacing the label on commit — Visio's signature affordance. Modifier
+        // chords never trigger it: every Ctrl/Cmd chord returned above, and
+        // Alt-composed characters are explicitly excluded here.
+        if (!this.isReadonly() &&
+            engine.getInteractionConfig().enableInPlaceTextEdit === true) {
+            const selected = diagram.getSelectedNodes();
+            if (selected.length === 1) {
+                if (event.key === 'F2') {
+                    event.preventDefault();
+                    this.openTextEditor(engine, { type: 'node', nodeId: selected[0].id });
+                    return;
+                }
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                    event.preventDefault();
+                    this.openTextEditor(engine, { type: 'node', nodeId: selected[0].id }, { seed: event.key });
+                    return;
+                }
+            }
+        }
+    }
+    onKeyUp(event) {
+        if (event.code === 'Space') {
+            this.spaceKeyPressed = false;
+            this.isPanning = false;
+            this.setCursor('default');
+        }
+    }
+    // ==========================================================================
+    // Node press / drag (threshold-gated)
+    // ==========================================================================
+    pressNode(node, diagram, event, worldX, worldY) {
+        var _a;
+        // MUST be read before we mutate the selection — it is the sole input to
+        // DELIBERATE-mode drag gating (select first, drag second).
+        const wasSelected = node.isSelected();
+        if (event.ctrlKey || event.metaKey) {
+            diagram.toggleNodeSelection(node);
+        }
+        else if (!wasSelected) {
+            diagram.selectNode(node);
+            // A plain node click REPLACES the selection, and links are part of it.
+            // Leaving a link in state 'selected' here made the properties panel read
+            // "2 shapes" after edge-click → node-click (live audit finding): node
+            // and link selection are one selection to the user, so clearing one
+            // side must clear the other — exactly what the empty-canvas click does.
+            diagram.getLinks().forEach((l) => {
+                if (l.state === 'selected')
+                    l.setState('default');
+            });
+        }
+        // Clicking an already-selected node without a modifier keeps the whole
+        // selection, so a multi-node drag works.
+        this.host.requestRender();
+        this.emitSelectionChange();
+        if (this.isReadonly() || !node.isDraggable() || !node.isSelected())
+            return;
+        // Declaring a drag handle MEANS "drag me by the handle": once a node has
+        // one, its body press selects but no longer arms a drag — otherwise the
+        // handle is decoration (React Flow's dragHandle has the same semantics).
+        // A press that arrived here REDIRECTED FROM the handle still drags.
+        if (!this.pressViaDragHandle && this.hasDragHandlerChild(node, diagram))
+            return;
+        const mode = (_a = this.engine()) === null || _a === void 0 ? void 0 : _a.getInteractionConfig().mode;
+        if (mode === 'deliberate' && !wasSelected)
+            return; // first click only selects
+        const selected = diagram.getSelectedNodes().filter((n) => n.isDraggable());
+        const nodeIds = selected.some((n) => n.id === node.id)
+            ? selected.map((n) => n.id)
+            : [node.id];
+        this.nodeDrag = {
+            nodeIds,
+            startClientX: event.clientX,
+            startClientY: event.clientY,
+            lastWorldX: worldX,
+            lastWorldY: worldY,
+            committed: false,
+            snapAnchor: { x: worldX, y: worldY },
+        };
+    }
+    moveNodeDrag(event) {
+        var _a;
+        const drag = this.nodeDrag;
+        const diagram = (_a = this.engine()) === null || _a === void 0 ? void 0 : _a.getDiagram();
+        if (!drag || !diagram)
+            return;
+        if (!drag.committed) {
+            const dx = event.clientX - drag.startClientX;
+            const dy = event.clientY - drag.startClientY;
+            if (Math.hypot(dx, dy) < this.options.dragThreshold) {
+                return; // still a click, not a drag — do NOT touch any position
+            }
+            drag.committed = true;
+            // wave12: snapshot each node's pre-drag position, NOW — before the first
+            // setPosition below — so drag-end can commit an undoable FROM→TO move. Nothing
+            // has moved yet on this frame (the delta is applied after this block), so these
+            // are the true start positions.
+            drag.startPositions = new Map();
+            for (const id of drag.nodeIds) {
+                const n = diagram.getNode(id);
+                if (n)
+                    drag.startPositions.set(id, { x: n.position.x, y: n.position.y, z: n.position.z });
+            }
+        }
+        const { x: worldX, y: worldY } = this.toWorld(event);
+        const dx = worldX - drag.lastWorldX;
+        const dy = worldY - drag.lastWorldY;
+        drag.lastWorldX = worldX;
+        drag.lastWorldY = worldY;
+        if (!dx && !dy)
+            return;
+        // wave15/helper-lines: opt-in live snaplines. `computeSnap` existed as a
+        // pure engine while NOTHING called it from a real drag (live report: "no
+        // matter what i try doesn't look like something is happening"). Single
+        // top-level node drags snap against sibling boxes and publish the guides
+        // the renderer draws; everything else keeps the raw delta path.
+        const snapped = this.applyHelperLineSnap(drag, diagram, worldX, worldY);
+        if (!snapped) {
+            for (const id of drag.nodeIds) {
+                const node = diagram.getNode(id);
+                if (!node || node.state.locked)
+                    continue;
+                node.setPosition(node.position.x + dx, node.position.y + dy);
+            }
+        }
+        // Node geometry moved ⇒ the port hit cache is stale.
+        this.host.interaction.invalidatePortHitCache();
+        // wave12 (gap 2): live proximity-connect preview — light up the port pair a
+        // drop would auto-link, and remember it for commit on mouseup.
+        this.updateProximityPreview(drag.nodeIds);
+        this.host.requestRender();
+    }
+    // ==========================================================================
+    // wave12/connect-ergonomics (gap 2) — Proximity connect on the live node drag.
+    // ==========================================================================
+    /** The lazily-built proximity-connect engine (only when the feature is on). */
+    snapController() {
+        if (!this.snap)
+            this.snap = new snapping_1.SnapController();
+        return this.snap;
+    }
+    /**
+     * While dragging, find the best proximity candidate for any dragged node and
+     * highlight its port pair (the SAME flags a connection drag paints). Stores it
+     * so {@link commitProximityConnection} can create the link on drop. No-op —
+     * and clears any prior highlight — when the feature is off or nothing is near.
+     */
+    updateProximityPreview(draggedIds) {
+        const engine = this.engine();
+        if (!engine)
+            return;
+        if (!engine.getInteractionConfig().enableProximityConnect)
+            return;
+        this.proximityCandidate = this.bestProximityCandidate(draggedIds);
+        this.snapController().highlightProximityTarget(engine, this.proximityCandidate);
+        // The renderer draws the proposal as a live dashed wire — port glyphs alone
+        // read as "nothing is happening" (live report: "the wire isn't showing").
+        engine.setProximityPreview(this.proximityCandidate
+            ? {
+                sourceNodeId: this.proximityCandidate.sourceNodeId,
+                sourcePortId: this.proximityCandidate.sourcePort.id,
+                targetNodeId: this.proximityCandidate.targetNodeId,
+                targetPortId: this.proximityCandidate.targetPort.id,
+            }
+            : null);
+    }
+    /**
+     * wave15/helper-lines: snap a SINGLE top-level dragged node to sibling
+     * alignments/equal-spacing and publish the guide segments for the renderer.
+     * Returns true when it owned the position write (the caller then skips the
+     * raw delta loop). Tracks the VIRTUAL position from {@link NodeDragState.snapAnchor}
+     * so corrections never accumulate into pointer drift.
+     */
+    applyHelperLineSnap(drag, diagram, worldX, worldY) {
+        const engine = this.engine();
+        if (!engine || engine.getInteractionConfig().enableHelperLines !== true)
+            return false;
+        if (drag.nodeIds.length !== 1 || !drag.snapAnchor || !drag.startPositions)
+            return false;
+        const id = drag.nodeIds[0];
+        const node = diagram.getNode(id);
+        const start = drag.startPositions.get(id);
+        if (!node || !start || node.state.locked || node.parentId)
+            return false;
+        const virtualX = start.x + (worldX - drag.snapAnchor.x);
+        const virtualY = start.y + (worldY - drag.snapAnchor.y);
+        const snap = this.snapController();
+        snap.syncWithEngineConfig(engine);
+        const result = snap.computeSnap({ x: virtualX, y: virtualY, width: node.size.width, height: node.size.height }, snap.siblingBoxes(engine, [id]));
+        node.setPosition(result.box.x, result.box.y);
+        const segments = [
+            ...result.guides.map((g) => g.orientation === 'vertical'
+                ? { x1: g.position, y1: g.from, x2: g.position, y2: g.to, kind: 'alignment' }
+                : { x1: g.from, y1: g.position, x2: g.to, y2: g.position, kind: 'alignment' }),
+            ...result.spacing.flatMap((s) => s.segments.map((seg) => (Object.assign(Object.assign({}, seg), { kind: 'spacing', label: s.label })))),
+        ];
+        engine.setSnapGuides(segments.length > 0 ? segments : null);
+        return true;
+    }
+    /** The closest proximity candidate across all dragged nodes (or null). */
+    bestProximityCandidate(draggedIds) {
+        const engine = this.engine();
+        if (!engine)
+            return null;
+        const config = engine.getInteractionConfig();
+        const radius = config.proximityConnectRadius > 0 ? config.proximityConnectRadius : undefined;
+        let best = null;
+        for (const id of draggedIds) {
+            const candidate = this.snapController().findProximityConnection(engine, id, radius);
+            if (candidate && (!best || candidate.distance < best.distance))
+                best = candidate;
+        }
+        return best;
+    }
+    /**
+     * Commit the highlighted proximity candidate as ONE undoable AddLinkCommand,
+     * then clear the highlight. Called on the node-drag mouseup. Returns true when
+     * a link was actually created.
+     */
+    commitProximityConnection() {
+        const engine = this.engine();
+        if (!engine)
+            return false;
+        const candidate = this.proximityCandidate;
+        this.proximityCandidate = null;
+        this.snapController().highlightProximityTarget(engine, null);
+        engine.setProximityPreview(null);
+        engine.setSnapGuides(null); // helper lines end with the drag
+        if (!candidate || engine.getInteractionConfig().enableProximityConnect !== true)
+            return false;
+        if (this.isReadonly())
+            return false;
+        const command = this.snapController().buildProximityLinkCommand(candidate);
+        void engine.commandManager.execute(command);
+        return true;
+    }
+    /** Drop any live proximity highlight/candidate without committing. */
+    clearProximityPreview() {
+        const engine = this.engine();
+        if (this.proximityCandidate && engine) {
+            this.snapController().highlightProximityTarget(engine, null);
+            engine.setProximityPreview(null);
+        }
+        engine === null || engine === void 0 ? void 0 : engine.setSnapGuides(null); // helper lines end with the drag
+        this.proximityCandidate = null;
+    }
+    // ==========================================================================
+    // wave12/connect-ergonomics (gap 1) — Group drag: move a subflow container and
+    // ALL its contents by the same delta, as ONE undoable step.
+    // ==========================================================================
+    /**
+     * The innermost group whose outer frame contains the world point. "Innermost"
+     * (deepest nesting, then smallest area) so grabbing a nested sub-flow drags the
+     * sub-flow, not the pipeline around it. Skips groups with no drawable frame.
+     */
+    findGroupAtPoint(diagram, worldX, worldY) {
+        let best;
+        let bestDepth = -Infinity;
+        let bestArea = Infinity;
+        for (const group of diagram.getGroups()) {
+            if (group.isCollapsed)
+                continue;
+            const r = group.getOuterBounds();
+            if (r.width <= 0 || r.height <= 0)
+                continue;
+            if (worldX < r.x || worldX > r.x + r.width || worldY < r.y || worldY > r.y + r.height) {
+                continue;
+            }
+            const depth = diagram.getDepth(group.id);
+            const area = r.width * r.height;
+            if (depth > bestDepth || (depth === bestDepth && area < bestArea)) {
+                best = group;
+                bestDepth = depth;
+                bestArea = area;
+            }
+        }
+        return best;
+    }
+    /**
+     * Every member NODE (recursively through nested groups) and every group FRAME
+     * (this group + its descendant groups) that a drag of `group` must carry.
+     * Cycle-guarded so a corrupt membership loop can never spin.
+     */
+    collectGroupContents(diagram, group) {
+        const nodeIds = new Set();
+        const groupIds = new Set();
+        const stack = [group];
+        while (stack.length) {
+            const g = stack.pop();
+            if (groupIds.has(g.id))
+                continue;
+            groupIds.add(g.id);
+            for (const memberId of g.members) {
+                const node = diagram.getNode(memberId);
+                if (node) {
+                    nodeIds.add(memberId);
+                    continue;
+                }
+                const child = diagram.getGroup(memberId);
+                if (child && !groupIds.has(child.id))
+                    stack.push(child);
+            }
+        }
+        return { nodeIds: [...nodeIds], groupIds: [...groupIds] };
+    }
+    /** Snapshot a group frame's restorable geometry (for undo). */
+    snapshotFrame(group) {
+        return {
+            position: { x: group.position.x, y: group.position.y },
+            size: group.size ? Object.assign({}, group.size) : undefined,
+            bounds: group.bounds ? Object.assign({}, group.bounds) : undefined,
+        };
+    }
+    /** Arm a group drag (threshold-gated, mirroring the node-drag arming). */
+    pressGroup(group, diagram, event, worldX, worldY) {
+        const { nodeIds, groupIds } = this.collectGroupContents(diagram, group);
+        const nodeFrom = new Map();
+        for (const id of nodeIds) {
+            const node = diagram.getNode(id);
+            if (node && !node.state.locked)
+                nodeFrom.set(id, Object.assign({}, node.position));
+        }
+        const frameFrom = new Map();
+        for (const id of groupIds) {
+            const g = diagram.getGroup(id);
+            if (g)
+                frameFrom.set(id, this.snapshotFrame(g));
+        }
+        this.groupDrag = {
+            groupId: group.id,
+            nodeIds: [...nodeFrom.keys()],
+            groupIds: [...frameFrom.keys()],
+            startClientX: event.clientX,
+            startClientY: event.clientY,
+            lastWorldX: worldX,
+            lastWorldY: worldY,
+            committed: false,
+            nodeFrom,
+            frameFrom,
+        };
+        this.setCursor('move');
+    }
+    /** Translate the whole subflow live during a group drag (past the threshold). */
+    moveGroupDrag(event) {
+        var _a;
+        const drag = this.groupDrag;
+        const diagram = (_a = this.engine()) === null || _a === void 0 ? void 0 : _a.getDiagram();
+        if (!drag || !diagram)
+            return;
+        if (!drag.committed) {
+            const dx = event.clientX - drag.startClientX;
+            const dy = event.clientY - drag.startClientY;
+            if (Math.hypot(dx, dy) < this.options.dragThreshold)
+                return;
+            drag.committed = true;
+        }
+        const { x: worldX, y: worldY } = this.toWorld(event);
+        const dx = worldX - drag.lastWorldX;
+        const dy = worldY - drag.lastWorldY;
+        drag.lastWorldX = worldX;
+        drag.lastWorldY = worldY;
+        if (!dx && !dy)
+            return;
+        // Members: N absolute position sets (per-property LWW converges under collab).
+        for (const id of drag.nodeIds) {
+            const node = diagram.getNode(id);
+            if (!node || node.state.locked)
+                continue;
+            node.setPosition(node.position.x + dx, node.position.y + dy);
+        }
+        // Frames: translate this group + nested group frames alongside their contents.
+        for (const id of drag.groupIds) {
+            const g = diagram.getGroup(id);
+            if (!g)
+                continue;
+            const r = g.getOuterBounds();
+            g.setFrame({ x: r.x + dx, y: r.y + dy, width: r.width, height: r.height });
+        }
+        this.host.interaction.invalidatePortHitCache();
+        this.host.requestRender();
+    }
+    /**
+     * wave12: commit a finished node drag as ONE undoable step.
+     *
+     * The live drag mutated node positions directly for feedback and recorded NOTHING on
+     * the command history — so Ctrl+Z could not undo a drag (keyboard-nudge and resize both
+     * commit MoveNodeCommand; only the pointer drag skipped it). This is the same FROM→TO
+     * snapshot endGroupDrag uses: the state is already at `to`, so each MoveNodeCommand's
+     * execute() is a visual no-op that records one history entry, and undo restores `from`.
+     * A multi-node drag collapses into one MacroCommand — one gesture, one undo step.
+     */
+    /**
+     * T8/visio — after a node drag COMMITS its move, reparent it into whatever
+     * container it was dropped in (or unembed it when dropped outside every one).
+     *
+     * The whole drop policy already lived in `GroupMembershipService`: innermost
+     * hit-test, per-group `canAddMember` veto, coordinate translation, and
+     * undoable Add/RemoveFromGroupCommand on the shared stack. It was simply
+     * never constructed outside its own specs, so a drag into a container moved
+     * the node's x/y and nothing else. This is the missing call.
+     *
+     * Runs only for a single-node drag: a multi-select drop into a container is a
+     * separate policy question (which member wins the hit-test?), and guessing it
+     * silently is worse than leaving it to a host.
+     */
+    /**
+     * T2/visio — the snap hook handed to `updateResize`, or undefined when helper
+     * lines are off. Snaps the resized box against every OTHER node's box and
+     * publishes the same guides the drag path draws, so a resize aligns to its
+     * neighbours instead of landing a pixel out.
+     */
+    resizeSnapHook(engine) {
+        if (engine.getInteractionConfig().enableHelperLines !== true)
+            return undefined;
+        const id = this.selectionTools.activeGestureNodeId();
+        const snap = this.snapController();
+        snap.syncWithEngineConfig(engine);
+        const others = snap.siblingBoxes(engine, id ? [id] : []);
+        return (box) => {
+            const result = snap.computeSnap(box, others);
+            engine.setSnapGuides(result.guides.length > 0
+                ? result.guides.map((g) => g.orientation === 'vertical'
+                    ? { x1: g.position, y1: g.from, x2: g.position, y2: g.to, kind: 'alignment' }
+                    : { x1: g.from, y1: g.position, x2: g.to, y2: g.position, kind: 'alignment' })
+                : null);
+            return result.box;
+        };
+    }
+    applyMembershipOnDrop(engine, drag) {
+        if (engine.getInteractionConfig().enableGroupMembershipOnDrop !== true)
+            return;
+        if (drag.nodeIds.length !== 1 || this.isReadonly())
+            return;
+        const diagram = engine.getDiagram();
+        if (!diagram)
+            return;
+        const node = diagram.getNode(drag.nodeIds[0]);
+        if (!node || node.state.locked)
+            return;
+        if (!this.membership || this.membership.diagram !== diagram) {
+            this.membership = {
+                diagram,
+                service: new engine_1.GroupMembershipService({ diagram, dispatcher: engine.commandManager }),
+            };
+        }
+        const service = this.membership.service;
+        service.refresh(); // groups may have moved during the drag
+        // Hit-test the node's CENTRE, not the pointer: the cursor can sit outside a
+        // small node's body, and it is the shape's position that decides where it
+        // landed.
+        const point = {
+            x: node.position.x + node.size.width / 2,
+            y: node.position.y + node.size.height / 2,
+        };
+        void Promise.resolve(service.handleNodeDragEnd(node.id, point)).then((result) => {
+            if (result === null || result === void 0 ? void 0 : result.changed) {
+                this.emitNodesChange();
+                this.host.requestRender();
+            }
+        });
+    }
+    commitNodeMove(engine, drag) {
+        if (!drag.committed || !drag.startPositions)
+            return;
+        const diagram = engine.getDiagram();
+        if (!diagram)
+            return;
+        const steps = [];
+        for (const id of drag.nodeIds) {
+            const node = diagram.getNode(id);
+            const from = drag.startPositions.get(id);
+            if (!node || !from)
+                continue;
+            if (node.position.x === from.x && node.position.y === from.y)
+                continue; // never moved
+            steps.push(new engine_1.MoveNodeCommand(id, { x: node.position.x, y: node.position.y, z: node.position.z }, { x: from.x, y: from.y, z: from.z }, { mergeable: false } // a completed gesture is its own step; do not merge into it
+            ));
+        }
+        if (steps.length === 0)
+            return;
+        let command;
+        if (steps.length === 1) {
+            command = steps[0];
+        }
+        else {
+            const macro = new engine_1.MacroCommand('Move nodes');
+            for (const s of steps)
+                macro.addStep(s);
+            command = macro;
+        }
+        void engine.commandManager.execute(command);
+    }
+    /**
+     * End a group drag: commit the whole gesture as ONE undoable MoveGroupCommand
+     * (drag-start snapshot → current), then emit change events. The live drag has
+     * already applied the final positions, so the command's execute() is a visual
+     * no-op that merely records the single history entry; undo restores the start.
+     */
+    endGroupDrag(engine) {
+        const drag = this.groupDrag;
+        this.groupDrag = null;
+        if (!drag)
+            return;
+        if (!drag.committed)
+            return; // a press with no drag — nothing moved
+        const diagram = engine.getDiagram();
+        if (!diagram)
+            return;
+        const nodeMoves = [];
+        for (const [id, from] of drag.nodeFrom) {
+            const node = diagram.getNode(id);
+            if (!node)
+                continue;
+            nodeMoves.push({ nodeId: id, from, to: Object.assign({}, node.position) });
+        }
+        const frameMoves = [];
+        for (const [id, from] of drag.frameFrom) {
+            const g = diagram.getGroup(id);
+            if (!g)
+                continue;
+            frameMoves.push({ groupId: id, from, to: this.snapshotFrame(g) });
+        }
+        const command = new engine_1.MoveGroupCommand(nodeMoves, frameMoves);
+        if (!command.isNoop()) {
+            // Record on the undo stack. State is already at `to`, so this is idempotent.
+            void engine.commandManager.execute(command);
+            this.emitNodesChange();
+        }
+        this.host.requestRender();
+    }
+    // ==========================================================================
+    // helpers
+    // ==========================================================================
+    engine() {
+        return this.host.getEngine();
+    }
+    /**
+     * wave12 (gap 3): is the easy-connect gate satisfied for this press? With
+     * `easyConnectModifier: 'none'` (the default when the feature is on) any plain
+     * body press connects — the whole node is a handle and move is done via a drag
+     * handle / selection. A specific modifier lets a host KEEP body-drag-to-move
+     * and reserve connect for, say, a shift-drag.
+     */
+    easyConnectModifierHeld(event, config) {
+        switch (config.easyConnectModifier) {
+            case 'shift': return event.shiftKey;
+            case 'alt': return event.altKey;
+            case 'ctrl': return event.ctrlKey;
+            case 'meta': return event.metaKey;
+            case 'none':
+            default: return true;
+        }
+    }
+    /**
+     * T10/visio — open the transient text widget over a node's label.
+     *
+     * The SESSION (what text, where, single- or multi-line) and the COMMIT (an
+     * undoable command) both come from `InPlaceTextEditor`; the only thing this
+     * adds is the DOM input and where to put it — mapped through the live
+     * world→client transform so it lands on the label at any zoom or pan.
+     */
+    openTextEditor(engine, target, options) {
+        var _a;
+        if (!this.textEditor)
+            this.textEditor = new in_place_editor_1.InPlaceTextEditor();
+        const editor = this.textEditor;
+        this.closeTextEditor();
+        const session = editor.begin(engine, target);
+        if (!session)
+            return;
+        const rect = this.host.getRect();
+        const at = this.host.viewport.worldToClient(session.center.x, session.center.y, rect);
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.value = session.value;
+        input.className = 'grafloria-text-editor';
+        input.setAttribute('aria-label', 'Edit label');
+        // Fixed positioning keys off the same client coords worldToClient reports,
+        // so the widget needs no assumptions about the container's offset parent.
+        Object.assign(input.style, {
+            position: 'fixed',
+            left: `${at.x}px`,
+            top: `${at.y}px`,
+            transform: 'translate(-50%, -50%)',
+            zIndex: '1000',
+            font: '12px sans-serif',
+            textAlign: 'center',
+            minWidth: '40px',
+            padding: '1px 4px',
+        });
+        let settled = false;
+        const cleanup = () => {
+            input.removeEventListener('keydown', onKeyDown);
+            input.removeEventListener('blur', commit);
+            input.remove();
+            if (this.activeTextInput === input)
+                this.activeTextInput = undefined;
+        };
+        const commit = () => {
+            if (settled)
+                return;
+            settled = true;
+            const command = editor.commit(engine, input.value);
+            cleanup();
+            if (command)
+                void engine.commandManager.execute(command);
+            this.host.requestRender();
+            // Tell the host WHAT changed: a link-label commit is an edges change —
+            // it used to report nodes:change, so an edge-labels listener never heard.
+            if (target.type === 'link-label')
+                this.emitEdgesChange();
+            else
+                this.emitNodesChange();
+        };
+        const cancel = () => {
+            if (settled)
+                return;
+            settled = true;
+            editor.cancel();
+            cleanup();
+            this.host.requestRender();
+        };
+        const onKeyDown = (e) => {
+            // The canvas' own key handling (Delete, Escape, arrows) must not fire
+            // while a caret is live in this input.
+            e.stopPropagation();
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                commit();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                cancel();
+            }
+        };
+        input.addEventListener('keydown', onKeyDown);
+        input.addEventListener('blur', commit);
+        ((_a = this.container.ownerDocument) !== null && _a !== void 0 ? _a : document).body.appendChild(input);
+        this.activeTextInput = input;
+        input.focus();
+        if ((options === null || options === void 0 ? void 0 : options.seed) !== undefined) {
+            // Type-to-replace (Visio's signature affordance): the editor opens
+            // holding ONLY the typed character — committing replaces the label,
+            // Escape restores the original untouched (the session keeps it).
+            input.value = options.seed;
+            input.setSelectionRange(input.value.length, input.value.length);
+        }
+        else {
+            input.select();
+        }
+    }
+    /**
+     * Open the in-place label editor programmatically — the seam behind F2 and a
+     * host's context-menu Rename. Unlike the double-click path this is NOT gated
+     * on `enableInPlaceTextEdit`: an explicit call IS the host's opt-in.
+     * Returns false when the target does not exist / is not editable / readonly.
+     */
+    beginLabelEdit(target, options) {
+        const engine = this.engine();
+        if (!engine || this.isReadonly())
+            return false;
+        this.openTextEditor(engine, target, options);
+        return this.activeTextInput !== undefined;
+    }
+    /** Drop any live text widget without committing (a new edit, or teardown). */
+    closeTextEditor() {
+        var _a;
+        if (!this.activeTextInput)
+            return;
+        const input = this.activeTextInput;
+        this.activeTextInput = undefined;
+        (_a = this.textEditor) === null || _a === void 0 ? void 0 : _a.cancel();
+        input.remove();
+    }
+    toWorld(event) {
+        return this.host.viewport.clientToWorld(event.clientX, event.clientY, this.host.getRect());
+    }
+    /**
+     * The node under the pointer. SVG hit-testing first; then walk up from
+     * `event.target` looking for a `data-node-id`, which is how nodes rendered
+     * into the HTML layer (foreignObject / custom components) are found — they are
+     * absolutely positioned DOM, invisible to the geometric hit-test.
+     */
+    resolveNode(diagram, worldX, worldY, event) {
+        var _a, _b, _c, _d, _e;
+        this.pressViaDragHandle = false;
+        const hit = diagram.getNodeAtPosition(worldX, worldY);
+        if (hit) {
+            this.pressViaDragHandle = ((_b = (_a = hit.behavior) === null || _a === void 0 ? void 0 : _a.dragHandler) === null || _b === void 0 ? void 0 : _b.isDragHandler) === true;
+            return this.dragTargetFor(hit, diagram);
+        }
+        let element = event.target;
+        while (element && element !== this.container) {
+            const nodeId = (_c = element.getAttribute) === null || _c === void 0 ? void 0 : _c.call(element, 'data-node-id');
+            if (nodeId) {
+                const node = diagram.getNode(nodeId);
+                this.pressViaDragHandle = ((_e = (_d = node === null || node === void 0 ? void 0 : node.behavior) === null || _d === void 0 ? void 0 : _d.dragHandler) === null || _e === void 0 ? void 0 : _e.isDragHandler) === true;
+                return node ? this.dragTargetFor(node, diagram) : undefined;
+            }
+            element = element.parentElement;
+        }
+        return undefined;
+    }
+    /** Does this node delegate its dragging to a designated handle child? */
+    hasDragHandlerChild(node, diagram) {
+        var _a, _b, _c, _d;
+        for (const childId of (_a = node.children) !== null && _a !== void 0 ? _a : []) {
+            if (((_d = (_c = (_b = diagram.getNode(childId)) === null || _b === void 0 ? void 0 : _b.behavior) === null || _c === void 0 ? void 0 : _c.dragHandler) === null || _d === void 0 ? void 0 : _d.isDragHandler) === true)
+                return true;
+        }
+        return false;
+    }
+    /**
+     * Redirect the press to the node that should actually MOVE: an explicit drag
+     * handle drags its parent, and a child that is neither draggable nor
+     * selectable (e.g. a table row inside a node) drags its nearest draggable
+     * ancestor.
+     */
+    dragTargetFor(node, diagram) {
+        var _a, _b, _c, _d;
+        if (((_b = (_a = node.behavior) === null || _a === void 0 ? void 0 : _a.dragHandler) === null || _b === void 0 ? void 0 : _b.isDragHandler) === true && node.parentId) {
+            return (_c = diagram.getNode(node.parentId)) !== null && _c !== void 0 ? _c : node;
+        }
+        const selectable = ((_d = node.behavior) === null || _d === void 0 ? void 0 : _d.selectable) !== false;
+        if (node.isDraggable() || selectable)
+            return node;
+        let current = node;
+        while (current === null || current === void 0 ? void 0 : current.parentId) {
+            const parent = diagram.getNode(current.parentId);
+            if (!parent)
+                break;
+            if (parent.isDraggable())
+                return parent;
+            current = parent;
+        }
+        return node;
+    }
+    setCursor(cursor) {
+        var _a;
+        if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.style)
+            this.container.style.cursor = cursor;
+    }
+    emitSelectionChange() {
+        var _a;
+        const diagram = (_a = this.engine()) === null || _a === void 0 ? void 0 : _a.getDiagram();
+        if (!diagram)
+            return;
+        this.host.emit('selection:change', {
+            nodes: diagram.getSelectedNodes(),
+            edges: diagram.getLinks().filter((l) => l.state === 'selected'),
+        });
+    }
+    emitNodesChange() {
+        var _a;
+        const diagram = (_a = this.engine()) === null || _a === void 0 ? void 0 : _a.getDiagram();
+        if (diagram)
+            this.host.emit('nodes:change', { nodes: diagram.getNodes() });
+    }
+    emitEdgesChange() {
+        var _a;
+        const diagram = (_a = this.engine()) === null || _a === void 0 ? void 0 : _a.getDiagram();
+        if (diagram)
+            this.host.emit('edges:change', { edges: diagram.getLinks() });
+    }
+}
+exports.DomEventBinder = DomEventBinder;
+/** Is the event target a place where the user is typing? */
+function isTextEntryTarget(target) {
+    const el = target;
+    if (!el || typeof el.tagName !== 'string')
+        return false;
+    const tag = el.tagName.toUpperCase();
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable === true;
+}
+//# sourceMappingURL=dom-event-binder.js.map