@grafloria/element 0.3.19 → 0.3.21

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

@@ -1,2104 +0,0 @@
-"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