@xui/node-graph 2.0.0-alpha.11

package/fesm2022/xui-node-graph.mjs

@@ -0,0 +1,2975 @@
+import * as i0 from '@angular/core';
+import { signal, computed, untracked, Injectable, inject, InjectionToken, input, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, numberAttribute, DestroyRef, viewChild, afterRenderEffect, model, output, contentChildren, Directive } from '@angular/core';
+import { xui } from '@xui/core';
+import { cva } from 'class-variance-authority';
+
+/**
+ * Composite key for the port registry. A port id is only unique within its node.
+ *
+ * Length-prefixed so the pair can never be ambiguous: a node called `a` with a
+ * port called `b:c` and a node called `a:b` with a port called `c` must not
+ * collide, which any plain separator would allow.
+ */
+function xuiGraphPortKey(nodeId, portId) {
+    return `${nodeId.length}:${nodeId}:${portId}`;
+}
+
+/**
+ * Reactive state shared by a graph and everything inside it.
+ *
+ * Provided by {@link XuiNodeGraph}, so every node, port and edge in one canvas
+ * sees the same instance and two graphs on a page never interfere.
+ */
+class XuiNodeGraphStore {
+    settingsSource = null;
+    listeners = null;
+    surface = null;
+    /** Node top-left positions captured at the start of a drag, keyed by node id. */
+    dragOrigins = new Map();
+    dragMoved = false;
+    /**
+     * The drag in flight, including every group frame as it stood when the drag
+     * began. Reactive, because those frozen frames are what the groups *render*
+     * while a node is being dragged, not merely what the drop is judged against.
+     *
+     * Both uses come from the same problem: a frame is sized from its members, so
+     * a live frame stretches to follow the very node being dragged out of it and
+     * then snaps back on release. Pinning the frame for the duration makes the
+     * node visibly leave a box that stays put — and makes the box you can see the
+     * box that decides where the node lands.
+     */
+    drag = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drag" }] : /* istanbul ignore next */ []));
+    /**
+     * The graph binds its own `viewport` model and `edges` input here, so those
+     * stay the single source of truth and the store never has to mirror them
+     * through an effect that could fight the host for ownership.
+     */
+    viewportSource = null;
+    edgesSource = null;
+    ownViewport = signal({ x: 0, y: 0, zoom: 1 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownViewport" }] : /* istanbul ignore next */ []));
+    viewport = computed(() => (this.viewportSource ?? this.ownViewport)(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+    edges = computed(() => this.edgesSource?.() ?? EMPTY_EDGES, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "edges" }] : /* istanbul ignore next */ []));
+    selectedNodes = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedNodes" }] : /* istanbul ignore next */ []));
+    selectedEdges = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedEdges" }] : /* istanbul ignore next */ []));
+    linking = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linking" }] : /* istanbul ignore next */ []));
+    /** Size of the visible canvas in screen pixels; kept current by a ResizeObserver. */
+    surfaceSize = signal({ width: 0, height: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surfaceSize" }] : /* istanbul ignore next */ []));
+    nodeMap = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodeMap" }] : /* istanbul ignore next */ []));
+    portMap = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "portMap" }] : /* istanbul ignore next */ []));
+    groupMap = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupMap" }] : /* istanbul ignore next */ []));
+    nodes = computed(() => [...this.nodeMap().values()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    ports = computed(() => [...this.portMap().values()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ports" }] : /* istanbul ignore next */ []));
+    groups = computed(() => [...this.groupMap().values()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    settings = computed(() => this.settingsSource?.() ?? FALLBACK_SETTINGS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    /** How many edges terminate at each port, keyed the same way as the registry. */
+    connectionCounts = computed(() => {
+        const counts = new Map();
+        for (const edge of this.edges()) {
+            for (const ref of [edge.source, edge.target]) {
+                const key = xuiGraphPortKey(ref.nodeId, ref.portId);
+                counts.set(key, (counts.get(key) ?? 0) + 1);
+            }
+        }
+        return counts;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectionCounts" }] : /* istanbul ignore next */ []));
+    /**
+     * Wire the store to the graph that provides it. Called from the graph's
+     * constructor, before anything can read the bound signals.
+     *
+     * @internal
+     */
+    configure(bindings) {
+        this.settingsSource = bindings.settings;
+        this.viewportSource = bindings.viewport;
+        this.edgesSource = bindings.edges;
+        this.listeners = bindings.listeners;
+    }
+    /** Writes through to whichever signal is bound as the viewport. */
+    updateViewport(next) {
+        const target = this.viewportSource ?? this.ownViewport;
+        target.set(next(untracked(target)));
+    }
+    /** @internal */
+    setSurface(element) {
+        this.surface = element;
+    }
+    // ------------------------------------------------------------------ registry
+    /** @internal */
+    registerNode(node) {
+        this.nodeMap.update(map => new Map(map).set(node.nodeId(), node));
+    }
+    /** @internal */
+    unregisterNode(node) {
+        this.nodeMap.update(map => {
+            const next = new Map(map);
+            // Guard against a re-registered id: a node that has already been replaced
+            // by another instance must not be deleted by its predecessor's teardown.
+            if (next.get(node.nodeId()) === node) {
+                next.delete(node.nodeId());
+            }
+            return next;
+        });
+    }
+    /** @internal */
+    registerPort(port) {
+        this.portMap.update(map => new Map(map).set(port.key, port));
+    }
+    /** @internal */
+    unregisterPort(port) {
+        this.portMap.update(map => {
+            const next = new Map(map);
+            if (next.get(port.key) === port) {
+                next.delete(port.key);
+            }
+            return next;
+        });
+    }
+    /** @internal */
+    registerGroup(group) {
+        this.groupMap.update(map => new Map(map).set(group.groupId(), group));
+    }
+    /** @internal */
+    unregisterGroup(group) {
+        this.groupMap.update(map => {
+            const next = new Map(map);
+            if (next.get(group.groupId()) === group) {
+                next.delete(group.groupId());
+            }
+            return next;
+        });
+    }
+    node(nodeId) {
+        return this.nodeMap().get(nodeId);
+    }
+    port(key) {
+        return this.portMap().get(key);
+    }
+    /**
+     * Absolute position of a connector in graph space.
+     *
+     * Composed from the node's position and the port's node-relative offset rather
+     * than measured directly, so dragging a node re-routes its wires from a single
+     * signal write with no DOM reads.
+     */
+    portPoint(key) {
+        const port = this.portMap().get(key);
+        const node = port && this.nodeMap().get(port.nodeId());
+        if (!port || !node) {
+            return null;
+        }
+        const position = node.position();
+        const offset = port.offset();
+        return { x: position.x + offset.x, y: position.y + offset.y };
+    }
+    descriptor(key) {
+        const port = this.portMap().get(key);
+        if (!port) {
+            return null;
+        }
+        return {
+            nodeId: port.nodeId(),
+            portId: port.portId(),
+            direction: port.direction(),
+            side: port.resolvedSide(),
+            dataType: port.dataType(),
+            maxConnections: port.resolvedMaxConnections(),
+            disabled: port.disabled(),
+            connections: this.connectionCounts().get(key) ?? 0
+        };
+    }
+    connectionCount(key) {
+        return this.connectionCounts().get(key) ?? 0;
+    }
+    // --------------------------------------------------------------- coordinates
+    /** Client (viewport) coordinates to graph space. */
+    toGraphPoint(clientX, clientY) {
+        const rect = this.surface?.getBoundingClientRect();
+        const { x, y, zoom } = this.viewport();
+        return {
+            x: (clientX - (rect?.left ?? 0) - x) / zoom,
+            y: (clientY - (rect?.top ?? 0) - y) / zoom
+        };
+    }
+    /** Graph space to coordinates relative to the canvas element's top-left corner. */
+    toSurfacePoint(point) {
+        const { x, y, zoom } = this.viewport();
+        return { x: point.x * zoom + x, y: point.y * zoom + y };
+    }
+    /** Rounds to the nearest grid intersection when snapping is on. */
+    snap(point) {
+        const { snapToGrid, gridSize } = this.settings();
+        if (!snapToGrid || gridSize <= 0) {
+            return point;
+        }
+        return { x: Math.round(point.x / gridSize) * gridSize, y: Math.round(point.y / gridSize) * gridSize };
+    }
+    // ------------------------------------------------------------------ viewport
+    panBy(dx, dy) {
+        this.updateViewport(v => ({ ...v, x: v.x + dx, y: v.y + dy }));
+    }
+    /**
+     * Scale about a fixed point, given in surface coordinates.
+     *
+     * Holding that point still is what makes wheel-zoom feel anchored to the
+     * cursor instead of to the centre of the canvas.
+     */
+    zoomTo(zoom, anchor) {
+        const { minZoom, maxZoom } = this.settings();
+        this.updateViewport(v => {
+            const next = Math.min(maxZoom, Math.max(minZoom, zoom));
+            const size = this.surfaceSize();
+            const point = anchor ?? { x: size.width / 2, y: size.height / 2 };
+            const ratio = next / v.zoom;
+            return { zoom: next, x: point.x - (point.x - v.x) * ratio, y: point.y - (point.y - v.y) * ratio };
+        });
+    }
+    zoomBy(factor, anchor) {
+        this.zoomTo(this.viewport().zoom * factor, anchor);
+    }
+    /** Bounding box of every node, or `null` while the graph is empty. */
+    contentBounds() {
+        const nodes = this.nodes();
+        if (nodes.length === 0) {
+            return null;
+        }
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (const node of nodes) {
+            const { x, y } = node.position();
+            const { width, height } = node.size();
+            minX = Math.min(minX, x);
+            minY = Math.min(minY, y);
+            maxX = Math.max(maxX, x + width);
+            maxY = Math.max(maxY, y + height);
+        }
+        return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+    }
+    /** Frame every node, leaving `padding` screen pixels of margin. */
+    fitView(padding = 40) {
+        const bounds = this.contentBounds();
+        const { width, height } = this.surfaceSize();
+        if (!bounds || width === 0 || height === 0) {
+            return;
+        }
+        const { minZoom, maxZoom } = this.settings();
+        const scale = Math.min((width - padding * 2) / Math.max(bounds.width, 1), (height - padding * 2) / Math.max(bounds.height, 1));
+        const zoom = Math.min(maxZoom, Math.max(minZoom, scale));
+        this.updateViewport(() => ({
+            zoom,
+            x: width / 2 - (bounds.x + bounds.width / 2) * zoom,
+            y: height / 2 - (bounds.y + bounds.height / 2) * zoom
+        }));
+    }
+    /** Centre the viewport on a node without changing the zoom. */
+    centerOn(nodeId) {
+        const node = this.nodeMap().get(nodeId);
+        const { width, height } = this.surfaceSize();
+        if (!node) {
+            return;
+        }
+        const position = node.position();
+        const size = node.size();
+        this.updateViewport(v => ({
+            ...v,
+            x: width / 2 - (position.x + size.width / 2) * v.zoom,
+            y: height / 2 - (position.y + size.height / 2) * v.zoom
+        }));
+    }
+    // ----------------------------------------------------------------- selection
+    isNodeSelected(nodeId) {
+        return this.selectedNodes().has(nodeId);
+    }
+    isEdgeSelected(edgeId) {
+        return this.selectedEdges().has(edgeId);
+    }
+    selectNode(nodeId, additive = false) {
+        this.selectedNodes.update(current => {
+            if (!additive) {
+                return current.size === 1 && current.has(nodeId) ? current : new Set([nodeId]);
+            }
+            const next = new Set(current);
+            next.has(nodeId) ? next.delete(nodeId) : next.add(nodeId);
+            return next;
+        });
+        if (!additive) {
+            this.selectedEdges.set(new Set());
+        }
+        this.listeners?.selectionChange();
+    }
+    selectEdge(edgeId, additive = false) {
+        this.selectedEdges.update(current => {
+            if (!additive) {
+                return current.size === 1 && current.has(edgeId) ? current : new Set([edgeId]);
+            }
+            const next = new Set(current);
+            next.has(edgeId) ? next.delete(edgeId) : next.add(edgeId);
+            return next;
+        });
+        if (!additive) {
+            this.selectedNodes.set(new Set());
+        }
+        this.listeners?.selectionChange();
+    }
+    setSelection(nodeIds, edgeIds = []) {
+        this.selectedNodes.set(new Set(nodeIds));
+        this.selectedEdges.set(new Set(edgeIds));
+        this.listeners?.selectionChange();
+    }
+    clearSelection() {
+        if (this.selectedNodes().size === 0 && this.selectedEdges().size === 0) {
+            return;
+        }
+        this.selectedNodes.set(new Set());
+        this.selectedEdges.set(new Set());
+        this.listeners?.selectionChange();
+    }
+    selectAll() {
+        this.setSelection(this.nodes().map(node => node.nodeId()), this.edges().map(edge => edge.id));
+    }
+    /** Select every node whose box intersects `rect`, in graph space. */
+    selectInRect(rect, additive = false) {
+        const hits = this.nodes()
+            .filter(node => {
+            const position = node.position();
+            const size = node.size();
+            return (position.x < rect.x + rect.width &&
+                position.x + size.width > rect.x &&
+                position.y < rect.y + rect.height &&
+                position.y + size.height > rect.y);
+        })
+            .map(node => node.nodeId());
+        this.setSelection(additive ? [...this.selectedNodes(), ...hits] : hits, additive ? this.selectedEdges() : []);
+    }
+    // -------------------------------------------------------------------- groups
+    /** The nodes that declare themselves members of a group, in registration order. */
+    nodesInGroup(groupId) {
+        return this.nodes().filter(node => node.group() === groupId);
+    }
+    /**
+     * The frame a group draws: its members' bounding box, grown by the group's own
+     * padding and title bar. A group owns no geometry, so an empty one has no box
+     * at all and renders nothing.
+     *
+     */
+    groupBounds(groupId) {
+        const group = this.groupMap().get(groupId);
+        const members = this.nodesInGroup(groupId);
+        if (!group || members.length === 0) {
+            return null;
+        }
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (const node of members) {
+            const { x, y } = node.position();
+            const { width, height } = node.size();
+            minX = Math.min(minX, x);
+            minY = Math.min(minY, y);
+            maxX = Math.max(maxX, x + width);
+            maxY = Math.max(maxY, y + height);
+        }
+        const padding = group.padding();
+        const header = group.headerHeight();
+        return {
+            x: minX - padding,
+            y: minY - padding - header,
+            width: maxX - minX + padding * 2,
+            height: maxY - minY + padding * 2 + header
+        };
+    }
+    /**
+     * The box a frame should be drawn at right now: its live bounds, except while a
+     * node drag is in flight, when it is pinned to where it stood as that drag
+     * began. A group being dragged is never pinned — it has to travel with the
+     * members it is carrying.
+     */
+    groupFrame(groupId) {
+        const drag = this.drag();
+        if (drag?.source === 'node') {
+            return drag.frames.get(groupId) ?? this.groupBounds(groupId);
+        }
+        return this.groupBounds(groupId);
+    }
+    /**
+     * Frames that would take one of the nodes being dragged if it were released
+     * now. Groups render this as a highlight, so which frame is about to claim the
+     * node is visible before the button comes up rather than after.
+     */
+    dropTargetGroups = computed(() => {
+        const drag = this.drag();
+        if (!drag || drag.source === 'group') {
+            return EMPTY_IDS;
+        }
+        const frames = [...drag.frames];
+        const targets = new Set();
+        for (const id of drag.ids) {
+            const node = this.nodeMap().get(id);
+            if (!node) {
+                continue;
+            }
+            const position = node.position();
+            const size = node.size();
+            const hit = smallestContaining({ x: position.x + size.width / 2, y: position.y + size.height / 2 }, frames);
+            if (hit) {
+                targets.add(hit);
+            }
+        }
+        return targets;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropTargetGroups" }] : /* istanbul ignore next */ []));
+    /**
+     * Innermost group frame containing a point. Smallest-first, so a frame nested
+     * inside another wins the node that lands in the overlap.
+     */
+    groupAt(point) {
+        const frames = this.groups()
+            .map(group => [group.groupId(), this.groupBounds(group.groupId())])
+            .filter((entry) => !!entry[1]);
+        return smallestContaining(point, frames);
+    }
+    // ------------------------------------------------------------------ dragging
+    /**
+     * Capture the starting position of everything a drag will move.
+     *
+     * Deltas are applied to these captured origins rather than accumulated onto
+     * live positions, so snapping cannot compound rounding error over a long drag.
+     */
+    beginNodeDrag(nodeId) {
+        const selected = this.selectedNodes();
+        this.captureDrag(selected.has(nodeId) ? selected : [nodeId], 'node');
+    }
+    /**
+     * Drag a whole group: every member moves together, and the frame follows them
+     * because it is sized from where they are.
+     *
+     * @internal
+     */
+    beginGroupDrag(groupId) {
+        this.captureDrag(this.nodesInGroup(groupId).map(node => node.nodeId()), 'group');
+    }
+    captureDrag(ids, source) {
+        const frames = new Map();
+        this.dragOrigins = new Map();
+        this.dragMoved = false;
+        for (const group of this.groups()) {
+            const bounds = this.groupBounds(group.groupId());
+            if (bounds) {
+                frames.set(group.groupId(), bounds);
+            }
+        }
+        for (const id of ids) {
+            const node = this.nodeMap().get(id);
+            if (node && !node.locked()) {
+                this.dragOrigins.set(id, node.position());
+            }
+        }
+        this.drag.set({ source, ids: new Set(this.dragOrigins.keys()), frames });
+    }
+    /** Offset every dragged node from its captured origin, in graph units. */
+    dragNodesBy(delta) {
+        if (delta.x !== 0 || delta.y !== 0) {
+            this.dragMoved = true;
+        }
+        for (const [id, origin] of this.dragOrigins) {
+            this.nodeMap()
+                .get(id)
+                ?.moveTo(this.snap({ x: origin.x + delta.x, y: origin.y + delta.y }));
+        }
+    }
+    /** Ends the drag and raises `nodeMove`. Returns whether anything actually moved. */
+    endNodeDrag() {
+        const moved = this.dragMoved;
+        const drag = this.drag();
+        const source = drag?.source ?? 'node';
+        if (moved) {
+            const nodes = [...this.dragOrigins.keys()]
+                .map(id => this.nodeMap().get(id))
+                .filter((node) => !!node)
+                .map(node => {
+                const position = node.position();
+                const size = node.size();
+                // The centre, not the corner: a node half over a frame's edge reads as
+                // being wherever the bulk of it sits.
+                const centre = { x: position.x + size.width / 2, y: position.y + size.height / 2 };
+                return {
+                    nodeId: node.nodeId(),
+                    position,
+                    // A group drag carries its own members around; none of them can have
+                    // changed hands, so there is nothing to report.
+                    group: source === 'group' || !drag ? undefined : smallestContaining(centre, drag.frames)
+                };
+            });
+            this.listeners?.nodeMove({ source, nodes });
+        }
+        this.dragOrigins = new Map();
+        this.dragMoved = false;
+        this.drag.set(null);
+        return moved;
+    }
+    // ------------------------------------------------------------------- linking
+    /** @internal */
+    beginLink(port, pointer) {
+        this.linking.set({
+            from: { nodeId: port.nodeId(), portId: port.portId() },
+            fromKey: port.key,
+            reversed: port.direction() === 'input',
+            pointer,
+            hoverKey: null
+        });
+    }
+    /** @internal */
+    moveLink(pointer) {
+        this.linking.update(state => (state ? { ...state, pointer } : null));
+    }
+    /** @internal */
+    setLinkHover(key) {
+        this.linking.update(state => (state ? { ...state, hoverKey: key } : null));
+    }
+    /**
+     * Finish a link. Dropping on a legal port raises `connect`; dropping anywhere
+     * else raises `connectionDrop` so the host can offer to create a node there.
+     *
+     * @internal
+     */
+    endLink(dropKey) {
+        const state = this.linking();
+        this.linking.set(null);
+        if (!state) {
+            return;
+        }
+        const connection = dropKey && this.orient(state, dropKey);
+        if (connection && this.canConnect(connection)) {
+            this.listeners?.connect(connection);
+            return;
+        }
+        if (!dropKey) {
+            const port = this.descriptor(state.fromKey);
+            if (port) {
+                this.listeners?.connectionDrop({
+                    source: state.from,
+                    port,
+                    position: state.pointer,
+                    surfacePosition: this.toSurfacePoint(state.pointer)
+                });
+            }
+        }
+    }
+    /** Resolve which end of a dragged wire is the source. */
+    orient(state, dropKey) {
+        const dropped = this.portMap().get(dropKey);
+        if (!dropped) {
+            return null;
+        }
+        const droppedRef = { nodeId: dropped.nodeId(), portId: dropped.portId() };
+        return state.reversed ? { source: droppedRef, target: state.from } : { source: state.from, target: droppedRef };
+    }
+    /**
+     * How a port should render while a wire is in flight — the affordance that
+     * tells you where a wire may land before you release it.
+     */
+    linkState(key) {
+        const state = this.linking();
+        if (!state) {
+            return 'idle';
+        }
+        if (state.fromKey === key) {
+            return 'source';
+        }
+        const connection = this.orient(state, key);
+        return connection && this.canConnect(connection) ? 'valid' : 'invalid';
+    }
+    /**
+     * The full connection rule set: existence, arity, direction, duplicates and
+     * data type, then the host's own validator, which can only narrow the result.
+     */
+    canConnect(connection) {
+        const settings = this.settings();
+        if (settings.locked) {
+            return false;
+        }
+        const sourceKey = xuiGraphPortKey(connection.source.nodeId, connection.source.portId);
+        const targetKey = xuiGraphPortKey(connection.target.nodeId, connection.target.portId);
+        if (sourceKey === targetKey) {
+            return false;
+        }
+        const source = this.descriptor(sourceKey);
+        const target = this.descriptor(targetKey);
+        if (!source || !target || source.disabled || target.disabled) {
+            return false;
+        }
+        if (!settings.allowSelfConnection && source.nodeId === target.nodeId) {
+            return false;
+        }
+        // An `inout` port plays either role; a plain input can never be a source.
+        if (source.direction === 'input' || target.direction === 'output') {
+            return false;
+        }
+        if (source.connections >= source.maxConnections || target.connections >= target.maxConnections) {
+            return false;
+        }
+        const edges = this.edges();
+        const duplicate = edges.some(edge => samePort(edge.source, connection.source) && samePort(edge.target, connection.target));
+        if (duplicate) {
+            return false;
+        }
+        // An undeclared type is a wildcard, so untyped graphs need no configuration.
+        if (settings.enforcePortTypes && source.dataType && target.dataType && source.dataType !== target.dataType) {
+            return false;
+        }
+        return settings.isValidConnection?.(connection, { source, target, edges }) ?? true;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiNodeGraphStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiNodeGraphStore });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiNodeGraphStore, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * The smallest of the frames containing a point, so a frame nested inside
+ * another wins the node that lands in the overlap.
+ */
+function smallestContaining(point, frames) {
+    let best;
+    let bestArea = Infinity;
+    for (const [id, bounds] of frames) {
+        const inside = point.x >= bounds.x &&
+            point.x <= bounds.x + bounds.width &&
+            point.y >= bounds.y &&
+            point.y <= bounds.y + bounds.height;
+        const area = bounds.width * bounds.height;
+        if (inside && area < bestArea) {
+            bestArea = area;
+            best = id;
+        }
+    }
+    return best;
+}
+/** Shared so the `edges` computed keeps a stable identity while unbound. */
+const EMPTY_EDGES = [];
+const EMPTY_IDS = new Set();
+function samePort(a, b) {
+    return a.nodeId === b.nodeId && a.portId === b.portId;
+}
+/** Used only if a node or port is somehow instantiated outside a graph. @internal */
+const FALLBACK_SETTINGS = {
+    routing: 'bezier',
+    gridSize: 16,
+    snapToGrid: false,
+    minZoom: 0.15,
+    maxZoom: 4,
+    stubLength: 18,
+    cornerRadius: 8,
+    curvature: 0.5,
+    edgeWidth: 2,
+    portSize: 11,
+    portShape: 'circle',
+    portColor: 'var(--color-foreground-subtle)',
+    portTypes: {},
+    allowSelfConnection: false,
+    enforcePortTypes: true,
+    isValidConnection: undefined,
+    locked: false
+};
+/**
+ * The store for the enclosing `<xui-node-graph>`.
+ *
+ * Use it to drive the canvas from outside — `fitView()`, `zoomBy()`,
+ * `setSelection()` — from a toolbar or a host component.
+ */
+function injectXuiNodeGraphStore() {
+    return inject(XuiNodeGraphStore);
+}
+
+const defaultConfig = {
+    routing: 'bezier',
+    background: 'dots',
+    marker: 'none',
+    gridSize: 16,
+    gridMajorEvery: 5,
+    snapToGrid: false,
+    minZoom: 0.15,
+    maxZoom: 4,
+    zoomStep: 1.15,
+    stubLength: 18,
+    cornerRadius: 8,
+    curvature: 0.5,
+    edgeWidth: 2,
+    portSize: 11,
+    portShape: 'circle',
+    portColor: 'var(--color-foreground-subtle)',
+    portTypes: {},
+    allowSelfConnection: false,
+    enforcePortTypes: true
+};
+const XuiNodeGraphConfigToken = new InjectionToken('XuiNodeGraphConfig');
+function provideXuiNodeGraphConfig(config) {
+    return { provide: XuiNodeGraphConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+function injectXuiNodeGraphConfig() {
+    return inject(XuiNodeGraphConfigToken, { optional: true }) ?? defaultConfig;
+}
+/**
+ * A ready-made data-type palette drawn from the categorical chart ramp, for
+ * graphs that need distinguishable typed ports without designing a palette.
+ *
+ * ```ts
+ * provideXuiNodeGraphConfig({ portTypes: { ...xuiGraphChartPortTypes(['float', 'vector', 'color']) } })
+ * ```
+ */
+function xuiGraphChartPortTypes(types) {
+    return Object.fromEntries(types.map((type, index) => [type, { color: `var(--color-chart-${(index % 8) + 1})`, label: type }]));
+}
+
+/**
+ * Zoom and framing buttons for the enclosing canvas.
+ *
+ * ```html
+ * <xui-node-graph>
+ *   …
+ *   <xui-graph-controls class="bottom-4 left-4" />
+ * </xui-node-graph>
+ * ```
+ *
+ * Placed anywhere inside `<xui-node-graph>`; it is projected into the overlay
+ * layer, above the canvas and outside its transform, so it neither pans nor
+ * scales with the content.
+ */
+class XuiGraphControls {
+    config = injectXuiNodeGraphConfig();
+    store = inject(XuiNodeGraphStore);
+    step = this.config.zoomStep;
+    buttonClass = 'text-foreground-muted hover:bg-hover-overlay hover:text-foreground focus-visible:ring-focus flex h-7 w-7 ' +
+        'cursor-pointer items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none';
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    showFit = input(true, { ...(ngDevMode ? { debugName: "showFit" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showZoomLevel = input(true, { ...(ngDevMode ? { debugName: "showZoomLevel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Lay the buttons out in a row rather than a column. */
+    horizontal = input(false, { ...(ngDevMode ? { debugName: "horizontal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    zoomPercent = computed(() => Math.round(this.store.viewport().zoom * 100), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomPercent" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui('bg-surface-overlay border-border shadow-elevation-2 pointer-events-auto absolute z-10 flex gap-0.5 rounded-md border p-1 select-none', this.horizontal() ? 'flex-row items-center' : 'flex-col', 
+    // A sensible default corner; override with `class` to move it.
+    'bottom-4 left-4', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiGraphControls, isStandalone: true, selector: "xui-graph-controls", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, showFit: { classPropertyName: "showFit", publicName: "showFit", isSignal: true, isRequired: false, transformFunction: null }, showZoomLevel: { classPropertyName: "showZoomLevel", publicName: "showZoomLevel", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-xui-graph-overlay": "" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    <button type="button" [class]="buttonClass" aria-label="Zoom in" (click)="store.zoomBy(step)">
+      <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+        <path d="M7 2 V12 M2 7 H12" [attr.stroke]="'currentColor'" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+    </button>
+
+    <button type="button" [class]="buttonClass" aria-label="Zoom out" (click)="store.zoomBy(1 / step)">
+      <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+        <path d="M2 7 H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+    </button>
+
+    @if (showFit()) {
+      <button type="button" [class]="buttonClass" aria-label="Fit view" (click)="store.fitView()">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+          <path
+            d="M2 5 V2 H5 M9 2 H12 V5 M12 9 V12 H9 M5 12 H2 V9"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    }
+
+    @if (showZoomLevel()) {
+      <span class="text-foreground-subtle px-1 text-center text-[10px] tabular-nums">{{ zoomPercent() }}%</span>
+    }
+
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphControls, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'xui-graph-controls',
+                    template: `
+    <button type="button" [class]="buttonClass" aria-label="Zoom in" (click)="store.zoomBy(step)">
+      <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+        <path d="M7 2 V12 M2 7 H12" [attr.stroke]="'currentColor'" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+    </button>
+
+    <button type="button" [class]="buttonClass" aria-label="Zoom out" (click)="store.zoomBy(1 / step)">
+      <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+        <path d="M2 7 H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+    </button>
+
+    @if (showFit()) {
+      <button type="button" [class]="buttonClass" aria-label="Fit view" (click)="store.fitView()">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+          <path
+            d="M2 5 V2 H5 M9 2 H12 V5 M12 9 V12 H9 M5 12 H2 V9"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    }
+
+    @if (showZoomLevel()) {
+      <span class="text-foreground-subtle px-1 text-center text-[10px] tabular-nums">{{ zoomPercent() }}%</span>
+    }
+
+    <ng-content />
+  `,
+                    host: { '[class]': 'computedClass()', 'data-xui-graph-overlay': '' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], showFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFit", required: false }] }], showZoomLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZoomLevel", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }] } });
+
+/** Room reserved above the members for the title bar, in graph units. */
+const HEADER_HEIGHT = 26;
+/**
+ * A frame around a set of nodes that moves them all together.
+ *
+ * ```html
+ * <xui-node-graph>
+ *   <xui-graph-group groupId="filter" label="Filter stage" color="var(--color-chart-1)" />
+ *
+ *   <xui-graph-node nodeId="lp" group="filter" [(position)]="a">…</xui-graph-node>
+ *   <xui-graph-node nodeId="hp" group="filter" [(position)]="b">…</xui-graph-node>
+ * </xui-node-graph>
+ * ```
+ *
+ * Membership is declared by the nodes, not by nesting them inside the frame:
+ * a node keeps its own place in the template and its own `[(position)]`, and the
+ * frame is derived from wherever its members happen to be. That is what lets a
+ * group be added, removed or re-membered without moving anything in the DOM, and
+ * why dragging a member out of a frame is just an ordinary node drag.
+ *
+ * A group with no members has no box, so it renders nothing.
+ *
+ * To let a node join a frame by being dropped on it, read `group` off the graph's
+ * `nodeMove` event and reassign the node's own `group` input.
+ */
+class XuiGraphGroup {
+    store = inject(XuiNodeGraphStore);
+    element = inject(ElementRef).nativeElement;
+    dragOrigin = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragOrigin" }] : /* istanbul ignore next */ []));
+    /** Matches the `group` input on the nodes that belong to this frame. */
+    groupId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupId" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Border and title colour; a tint of it fills the frame. Any CSS colour. */
+    color = input('var(--color-border-strong)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Blank margin between the members' bounding box and the frame. */
+    padding = input(24, { ...(ngDevMode ? { debugName: "padding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    selectable = input(true, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    draggable = input(true, { ...(ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Pins the frame and everything in it. */
+    locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * `group` drags from anywhere on the frame, as a node editor's frames do.
+     * `header` restricts it to the title bar, which leaves the frame's interior
+     * free for panning and marquee selection.
+     */
+    dragHandle = input('group', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragHandle" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Part of {@link XuiGraphGroupHandle}.
+     *
+     * A frame only reserves room for a title bar when it has a label — an unlabelled
+     * frame is a plain box, and projected content rides along inside the labelled one.
+     */
+    headerHeight = computed(() => (this.label() ? HEADER_HEIGHT : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * The frame, in graph space. `null` while the group has no members.
+     *
+     * Pinned to where it stood at the start of a node drag, so a member dragged out
+     * leaves a box that stays still instead of stretching it and snapping back.
+     */
+    bounds = computed(() => this.store.groupFrame(this.groupId()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []));
+    /** `true` while a dragged node hovers over this frame and would land in it. */
+    dropTarget = computed(() => this.store.dropTargetGroups().has(this.groupId()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropTarget" }] : /* istanbul ignore next */ []));
+    members = computed(() => this.store.nodesInGroup(this.groupId()).map(node => node.nodeId()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "members" }] : /* istanbul ignore next */ []));
+    /** A frame reads as selected only when its whole membership is. */
+    selected = computed(() => {
+        const members = this.members();
+        return members.length > 0 && members.every(id => this.store.isNodeSelected(id));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    immovable = computed(() => this.locked() || !this.draggable() || this.store.settings().locked, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "immovable" }] : /* istanbul ignore next */ []));
+    transform = computed(() => {
+        const bounds = this.bounds();
+        return bounds ? `translate(${bounds.x}px, ${bounds.y}px)` : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+    cursor = computed(() => (this.dragOrigin() ? 'grabbing' : this.immovable() ? null : 'grab'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cursor" }] : /* istanbul ignore next */ []));
+    // Deepen the tint when the frame is about to claim a node, so the answer to
+    // "which group is this going into?" is visible before the button comes up.
+    background = computed(() => `color-mix(in oklab, ${this.color()} ${this.dropTarget() ? 22 : 10}%, transparent)`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui(
+    // z-index 0 puts the frame under every node, so pressing a member still
+    // moves that member and only the gaps between them belong to the group.
+    'absolute top-0 left-0 z-0 flex flex-col rounded-xl border-2 border-dashed transition-colors select-none', (this.selected() || this.dropTarget()) && 'border-solid', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.store.unregisterGroup(this));
+    }
+    ngOnInit() {
+        this.store.registerGroup(this);
+    }
+    onPointerDown(event) {
+        const target = event.target;
+        if (event.button !== 0) {
+            return;
+        }
+        // When the frame only answers to its title bar, a press on its interior is
+        // left to bubble so the canvas can still pan or marquee through it.
+        if (this.dragHandle() === 'header' && !target.closest('[data-xui-graph-group-header]')) {
+            return;
+        }
+        event.stopPropagation();
+        if (this.selectable()) {
+            const additive = event.shiftKey || event.ctrlKey || event.metaKey;
+            this.store.setSelection(additive ? [...this.store.selectedNodes(), ...this.members()] : this.members());
+        }
+        if (this.immovable()) {
+            return;
+        }
+        event.preventDefault();
+        this.element.setPointerCapture(event.pointerId);
+        this.dragOrigin.set({ x: event.clientX, y: event.clientY });
+        this.store.beginGroupDrag(this.groupId());
+    }
+    onPointerMove(event) {
+        const origin = this.dragOrigin();
+        if (!origin) {
+            return;
+        }
+        const { zoom } = this.store.viewport();
+        this.store.dragNodesBy({ x: (event.clientX - origin.x) / zoom, y: (event.clientY - origin.y) / zoom });
+    }
+    onPointerUp(event) {
+        if (!this.dragOrigin()) {
+            return;
+        }
+        this.dragOrigin.set(null);
+        this.element.releasePointerCapture(event.pointerId);
+        this.store.endNodeDrag();
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiGraphGroup, isStandalone: true, selector: "xui-graph-group", inputs: { groupId: { classPropertyName: "groupId", publicName: "groupId", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)" }, properties: { "class": "computedClass()", "attr.data-xui-graph-group": "groupId()", "style.transform": "transform()", "style.width.px": "bounds()?.width", "style.height.px": "bounds()?.height", "style.display": "bounds() ? null : \"none\"", "style.border-color": "color()", "style.background": "background()", "style.cursor": "cursor()" } }, ngImport: i0, template: `
+    @if (label()) {
+      <div
+        data-xui-graph-group-header
+        class="flex items-center gap-2 truncate px-2.5 text-xs font-medium"
+        [style.height.px]="headerHeight()"
+        [style.color]="color()"
+      >
+        <span class="truncate">{{ label() }}</span>
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'xui-graph-group',
+                    template: `
+    @if (label()) {
+      <div
+        data-xui-graph-group-header
+        class="flex items-center gap-2 truncate px-2.5 text-xs font-medium"
+        [style.height.px]="headerHeight()"
+        [style.color]="color()"
+      >
+        <span class="truncate">{{ label() }}</span>
+        <ng-content />
+      </div>
+    }
+  `,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[attr.data-xui-graph-group]': 'groupId()',
+                        '[style.transform]': 'transform()',
+                        '[style.width.px]': 'bounds()?.width',
+                        '[style.height.px]': 'bounds()?.height',
+                        '[style.display]': 'bounds() ? null : "none"',
+                        '[style.border-color]': 'color()',
+                        '[style.background]': 'background()',
+                        '[style.cursor]': 'cursor()',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(pointercancel)': 'onPointerUp($event)'
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: () => [], propDecorators: { groupId: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupId", required: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }] } });
+
+/**
+ * An overview of the whole graph with the current viewport drawn on it.
+ *
+ * ```html
+ * <xui-node-graph>
+ *   …
+ *   <xui-graph-minimap class="right-4 bottom-4" />
+ * </xui-node-graph>
+ * ```
+ *
+ * Click or drag inside it to move the view. Like the controls, it is projected
+ * into the overlay layer and so stays put while the canvas pans.
+ */
+class XuiGraphMinimap {
+    store = inject(XuiNodeGraphStore);
+    element = inject(ElementRef).nativeElement;
+    dragging = false;
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Blank margin around the content, in graph units. */
+    padding = input(40, { ...(ngDevMode ? { debugName: "padding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    nodes = computed(() => this.store.nodes().map(node => {
+        const { x, y } = node.position();
+        const { width, height } = node.size();
+        return { id: node.nodeId(), x, y, width, height, selected: this.store.isNodeSelected(node.nodeId()) };
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /**
+     * The extent the minimap shows: everything drawn, unioned with wherever the
+     * viewport currently is, so panning off into empty space still tells you where
+     * you are instead of silently clamping.
+     */
+    extent = computed(() => {
+        const content = this.store.contentBounds();
+        const view = this.viewportRect();
+        const padding = this.padding();
+        if (!content && !view) {
+            return { x: 0, y: 0, width: 1, height: 1 };
+        }
+        const boxes = [content, view].filter((box) => !!box);
+        const minX = Math.min(...boxes.map(box => box.x)) - padding;
+        const minY = Math.min(...boxes.map(box => box.y)) - padding;
+        const maxX = Math.max(...boxes.map(box => box.x + box.width)) + padding;
+        const maxY = Math.max(...boxes.map(box => box.y + box.height)) + padding;
+        return { x: minX, y: minY, width: Math.max(maxX - minX, 1), height: Math.max(maxY - minY, 1) };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extent" }] : /* istanbul ignore next */ []));
+    viewportRect = computed(() => {
+        const { x, y, zoom } = this.store.viewport();
+        const { width, height } = this.store.surfaceSize();
+        if (width === 0 || height === 0) {
+            return null;
+        }
+        return { x: -x / zoom, y: -y / zoom, width: width / zoom, height: height / zoom };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportRect" }] : /* istanbul ignore next */ []));
+    viewBox = computed(() => {
+        const { x, y, width, height } = this.extent();
+        return `${x} ${y} ${width} ${height}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    /** Keep hairlines and corners visually constant however far the extent zooms out. */
+    unitScale = computed(() => this.extent().width / Math.max(this.element.clientWidth, 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unitScale" }] : /* istanbul ignore next */ []));
+    strokeWidth = computed(() => this.unitScale(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    cornerRadius = computed(() => this.unitScale() * 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui('bg-surface-overlay/90 border-border shadow-elevation-2 pointer-events-auto absolute z-10 block h-32 w-48 ' +
+        'overflow-hidden rounded-md border p-1 select-none', 'right-4 bottom-4', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    onPointerDown(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        event.stopPropagation();
+        this.dragging = true;
+        event.target.setPointerCapture(event.pointerId);
+        this.centerOnPointer(event);
+    }
+    onPointerMove(event) {
+        if (this.dragging) {
+            this.centerOnPointer(event);
+        }
+    }
+    onPointerUp(event) {
+        this.dragging = false;
+        event.target.releasePointerCapture(event.pointerId);
+    }
+    /**
+     * Map the pointer through the SVG's `preserveAspectRatio` fit and centre the
+     * canvas there. The fit letterboxes on one axis, so the scale has to be taken
+     * from the tighter of the two — using the element's own aspect ratio would put
+     * the target off by the size of the letterbox.
+     */
+    centerOnPointer(event) {
+        const rect = this.element.getBoundingClientRect();
+        const extent = this.extent();
+        if (rect.width === 0 || rect.height === 0) {
+            return;
+        }
+        const scale = Math.min(rect.width / extent.width, rect.height / extent.height);
+        const offsetX = (rect.width - extent.width * scale) / 2;
+        const offsetY = (rect.height - extent.height * scale) / 2;
+        const graphX = (event.clientX - rect.left - offsetX) / scale + extent.x;
+        const graphY = (event.clientY - rect.top - offsetY) / scale + extent.y;
+        const surface = this.store.surfaceSize();
+        const { zoom } = this.store.viewport();
+        this.store.panBy(surface.width / 2 - (graphX * zoom + this.store.viewport().x), surface.height / 2 - (graphY * zoom + this.store.viewport().y));
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphMinimap, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiGraphMinimap, isStandalone: true, selector: "xui-graph-minimap", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-xui-graph-overlay": "" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    <svg
+      class="h-full w-full cursor-pointer"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      aria-label="Graph overview"
+      (pointerdown)="onPointerDown($event)"
+      (pointermove)="onPointerMove($event)"
+      (pointerup)="onPointerUp($event)"
+    >
+      @for (node of nodes(); track node.id) {
+        <rect
+          [attr.x]="node.x"
+          [attr.y]="node.y"
+          [attr.width]="node.width"
+          [attr.height]="node.height"
+          [attr.rx]="cornerRadius()"
+          [attr.fill]="node.selected ? 'var(--color-primary)' : 'var(--color-border-strong)'"
+        />
+      }
+
+      @if (viewportRect(); as rect) {
+        <rect
+          [attr.x]="rect.x"
+          [attr.y]="rect.y"
+          [attr.width]="rect.width"
+          [attr.height]="rect.height"
+          fill="var(--color-selection)"
+          stroke="var(--color-primary)"
+          [attr.stroke-width]="strokeWidth()"
+        />
+      }
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphMinimap, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'xui-graph-minimap',
+                    template: `
+    <svg
+      class="h-full w-full cursor-pointer"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      aria-label="Graph overview"
+      (pointerdown)="onPointerDown($event)"
+      (pointermove)="onPointerMove($event)"
+      (pointerup)="onPointerUp($event)"
+    >
+      @for (node of nodes(); track node.id) {
+        <rect
+          [attr.x]="node.x"
+          [attr.y]="node.y"
+          [attr.width]="node.width"
+          [attr.height]="node.height"
+          [attr.rx]="cornerRadius()"
+          [attr.fill]="node.selected ? 'var(--color-primary)' : 'var(--color-border-strong)'"
+        />
+      }
+
+      @if (viewportRect(); as rect) {
+        <rect
+          [attr.x]="rect.x"
+          [attr.y]="rect.y"
+          [attr.width]="rect.width"
+          [attr.height]="rect.height"
+          fill="var(--color-selection)"
+          stroke="var(--color-primary)"
+          [attr.stroke-width]="strokeWidth()"
+        />
+      }
+    </svg>
+  `,
+                    host: { '[class]': 'computedClass()', 'data-xui-graph-overlay': '' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
+
+/** @internal */
+const XUI_GRAPH_NODE = new InjectionToken('XuiGraphNode');
+
+/** Side a port takes when the author states only its direction. */
+const SIDE_FOR_DIRECTION = {
+    input: 'left',
+    output: 'right',
+    inout: 'right'
+};
+/**
+ * A connector on a node, together with the row of content that belongs to it.
+ *
+ * ```html
+ * <xui-graph-node nodeId="mul" label="Multiply" [(position)]="position">
+ *   <xui-graph-port portId="a" direction="input" dataType="float" label="A" />
+ *   <xui-graph-port portId="b" direction="input" dataType="float" label="B" />
+ *   <xui-graph-port portId="out" direction="output" dataType="float" label="Result" />
+ * </xui-graph-node>
+ * ```
+ *
+ * The host element is the whole row, so anything projected into it — a numeric
+ * input, a colour swatch, a dropdown — sits inline with the connector, the way a
+ * shader or VFX editor lays out its sockets. The connector itself is pinned to
+ * the node's border, because that is what a wire attaches to.
+ *
+ * A hollow connector has nothing attached to it; a filled one is wired up.
+ */
+class XuiGraphPort {
+    store = inject(XuiNodeGraphStore);
+    node = inject(XUI_GRAPH_NODE);
+    document = inject(ElementRef).nativeElement.ownerDocument;
+    connectorRef = viewChild.required('connector', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectorRef" }] : /* istanbul ignore next */ []));
+    offsetState = signal({ x: 0, y: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offsetState" }] : /* istanbul ignore next */ []));
+    /**
+     * Registry identity. Empty until `ngOnInit`, because a required input is not
+     * readable during construction.
+     */
+    key = '';
+    /** Unique within the owning node — the node id supplies the rest of the identity. */
+    portId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "portId" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /**
+     * Which way data flows. `inout` covers terminals that are neither source nor
+     * sink — a component lead in a schematic, where either end of a wire may be
+     * drawn first.
+     */
+    direction = input('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * The compatibility key. Two ports may only be wired together when their data
+     * types match, and the type also picks the connector's colour — see
+     * `provideXuiNodeGraphConfig({ portTypes })`. Leaving it unset makes the port a
+     * wildcard that connects to anything.
+     */
+    dataType = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dataType" }] : /* istanbul ignore next */ []));
+    /** Overrides the colour inherited from {@link dataType}. */
+    color = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Which node edge the connector sits on. Leave unset to take it from
+     * {@link direction} — inputs on the left, outputs on the right.
+     */
+    side = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "side" }] : /* istanbul ignore next */ []));
+    shape = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "shape" }] : /* istanbul ignore next */ []));
+    /**
+     * How many wires may terminate here. Defaults to 1 for an input — the usual
+     * rule that a value has exactly one producer — and unlimited for outputs and
+     * `inout` terminals, which fan out freely.
+     */
+    maxConnections = input(NaN, { ...(ngDevMode ? { debugName: "maxConnections" } : /* istanbul ignore next */ {}), transform: value => numberAttribute(value, NaN) });
+    nodeId = this.node.nodeId;
+    resolvedSide = computed(() => this.side() ?? SIDE_FOR_DIRECTION[this.direction()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSide" }] : /* istanbul ignore next */ []));
+    resolvedMaxConnections = computed(() => {
+        const explicit = this.maxConnections();
+        return Number.isNaN(explicit) ? (this.direction() === 'input' ? 1 : Infinity) : explicit;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMaxConnections" }] : /* istanbul ignore next */ []));
+    /** Connector centre relative to the node's top-left corner, in graph units. */
+    offset = this.offsetState.asReadonly();
+    resolvedColor = computed(() => {
+        const explicit = this.color();
+        if (explicit) {
+            return explicit;
+        }
+        const settings = this.store.settings();
+        const type = this.dataType();
+        return (type ? settings.portTypes[type]?.color : undefined) ?? settings.portColor;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    resolvedShape = computed(() => {
+        const settings = this.store.settings();
+        const type = this.dataType();
+        return this.shape() ?? (type ? settings.portTypes[type]?.shape : undefined) ?? settings.portShape;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedShape" }] : /* istanbul ignore next */ []));
+    horizontal = computed(() => this.resolvedSide() === 'left' || this.resolvedSide() === 'right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "horizontal" }] : /* istanbul ignore next */ []));
+    size = computed(() => this.store.settings().portSize, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    // A pin is a lead rather than a socket: stretched along the node's normal.
+    connectorWidth = computed(() => this.resolvedShape() === 'pin' && this.horizontal() ? this.size() * 2 : this.size(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectorWidth" }] : /* istanbul ignore next */ []));
+    connectorHeight = computed(() => this.resolvedShape() === 'pin' && !this.horizontal() ? this.size() * 2 : this.size(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectorHeight" }] : /* istanbul ignore next */ []));
+    connected = computed(() => this.store.connectionCount(this.key) > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connected" }] : /* istanbul ignore next */ []));
+    linkState = computed(() => this.store.linkState(this.key), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linkState" }] : /* istanbul ignore next */ []));
+    /** Position among the ports sharing this side; drives rails and column rows. */
+    indexOnSide = computed(() => {
+        const side = this.resolvedSide();
+        const index = this.node
+            .portSlots()
+            .filter(slot => slot.resolvedSide() === side)
+            .findIndex(slot => slot.key === this.key);
+        return Math.max(index, 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indexOnSide" }] : /* istanbul ignore next */ []));
+    countOnSide = computed(() => this.node.portSlots().filter(slot => slot.resolvedSide() === this.resolvedSide()).length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countOnSide" }] : /* istanbul ignore next */ []));
+    /**
+     * Top and bottom ports spread evenly along their edge instead of stacking,
+     * because a schematic reads those terminals as a rail, not as a list.
+     */
+    railOffset = computed(() => this.horizontal() ? null : ((this.indexOnSide() + 1) / (this.countOnSide() + 1)) * 100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "railOffset" }] : /* istanbul ignore next */ []));
+    order = computed(() => this.node.portLayout() === 'stacked' && this.horizontal() ? (this.resolvedSide() === 'right' ? 0 : 1) : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "order" }] : /* istanbul ignore next */ []));
+    gridColumn = computed(() => this.node.portLayout() === 'columns' && this.horizontal() ? (this.resolvedSide() === 'left' ? 1 : 2) : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridColumn" }] : /* istanbul ignore next */ []));
+    gridRow = computed(() => this.node.portLayout() === 'columns' && this.horizontal() ? this.indexOnSide() + 1 : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridRow" }] : /* istanbul ignore next */ []));
+    tooltip = computed(() => {
+        const type = this.dataType();
+        const typeLabel = type ? (this.store.settings().portTypes[type]?.label ?? type) : '';
+        return [this.label(), typeLabel && `(${typeLabel})`].filter(Boolean).join(' ') || null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => {
+        const role = this.direction() === 'output' ? 'Output' : this.direction() === 'input' ? 'Input' : 'Terminal';
+        return `${role} ${this.label() || this.portId()}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui('relative flex min-h-7 items-center gap-2 text-xs leading-tight', this.horizontal() ? 'px-3' : 'absolute w-max -translate-x-1/2 flex-col gap-1', this.resolvedSide() === 'left' && 'justify-start text-left', this.resolvedSide() === 'right' && 'flex-row-reverse justify-start text-right', this.resolvedSide() === 'top' && 'top-0 -translate-y-full flex-col-reverse pb-1', this.resolvedSide() === 'bottom' && 'bottom-0 translate-y-full pt-1', 
+    // Collapsed: every connector converges on the node's midline and the row's
+    // own content is hidden, leaving the wiring intact but the card folded.
+    // `inset-x-0` resolves against the node, since the ports container is not
+    // itself positioned.
+    this.node.collapsed() &&
+        this.horizontal() &&
+        'absolute inset-x-0 top-1/2 min-h-0 -translate-y-1/2 px-0 [&>:not(:first-child)]:hidden', this.disabled() ? 'text-foreground-subtle' : 'text-foreground-muted', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    connectorClass = computed(() => {
+        const shape = this.resolvedShape();
+        const state = this.linkState();
+        return xui('absolute box-border border-2 transition-transform duration-100', 
+        // Pinned to the node's border box. The ports container carries no
+        // horizontal padding, so `left-0` really is the node's own edge.
+        this.resolvedSide() === 'left' && 'top-1/2 left-0 -translate-x-1/2 -translate-y-1/2', this.resolvedSide() === 'right' && 'top-1/2 right-0 translate-x-1/2 -translate-y-1/2', this.resolvedSide() === 'top' && 'bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2', this.resolvedSide() === 'bottom' && 'top-0 left-1/2 -translate-x-1/2 -translate-y-1/2', shape === 'circle' && 'rounded-full', shape === 'square' && 'rounded-xs', shape === 'diamond' && 'rounded-xs rotate-45', shape === 'triangle' && 'rounded-none border-0 [clip-path:polygon(0_0,100%_50%,0_100%)]', shape === 'pin' && 'rounded-full', this.disabled() ? 'cursor-not-allowed opacity-40' : 'cursor-crosshair hover:scale-125', state === 'valid' && 'scale-150', state === 'source' && 'ring-focus scale-125 ring-2 ring-offset-1', 'focus-visible:ring-focus focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectorClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.store.unregisterPort(this));
+        // Re-measure whenever something that could move the connector changes. The
+        // reads happen in the post-render read phase, so no layout is forced during
+        // rendering.
+        afterRenderEffect({
+            read: () => {
+                this.node.layoutEpoch();
+                this.node.collapsed();
+                this.node.portLayout();
+                this.resolvedSide();
+                this.connectorWidth();
+                this.connectorHeight();
+                this.indexOnSide();
+                this.countOnSide();
+                this.measure();
+            }
+        });
+    }
+    ngOnInit() {
+        this.key = xuiGraphPortKey(untracked(this.nodeId), untracked(this.portId));
+        this.store.registerPort(this);
+    }
+    measure() {
+        const nodeRect = this.node.element.getBoundingClientRect();
+        const rect = this.connectorRef().nativeElement.getBoundingClientRect();
+        // Rects are post-transform, so undo the canvas scale to land in graph units.
+        const zoom = untracked(this.store.viewport).zoom || 1;
+        const next = {
+            x: (rect.left + rect.width / 2 - nodeRect.left) / zoom,
+            y: (rect.top + rect.height / 2 - nodeRect.top) / zoom
+        };
+        const current = untracked(this.offsetState);
+        if (Math.abs(current.x - next.x) > 0.01 || Math.abs(current.y - next.y) > 0.01) {
+            this.offsetState.set(next);
+        }
+    }
+    onPointerDown(event) {
+        if (event.button !== 0 || this.disabled() || this.store.settings().locked) {
+            return;
+        }
+        // Keep the node from reading this as the start of a move.
+        event.stopPropagation();
+        event.preventDefault();
+        this.connectorRef().nativeElement.setPointerCapture(event.pointerId);
+        this.store.beginLink(this, this.store.toGraphPoint(event.clientX, event.clientY));
+    }
+    onPointerMove(event) {
+        const linking = this.store.linking();
+        if (!linking || linking.fromKey !== this.key) {
+            return;
+        }
+        this.store.moveLink(this.store.toGraphPoint(event.clientX, event.clientY));
+        this.store.setLinkHover(this.portKeyAt(event.clientX, event.clientY));
+    }
+    onPointerUp(event) {
+        const linking = this.store.linking();
+        if (!linking || linking.fromKey !== this.key) {
+            return;
+        }
+        this.connectorRef().nativeElement.releasePointerCapture(event.pointerId);
+        // Refresh the pointer before ending: a release with no preceding move would
+        // otherwise report a create-on-drop position one event out of date.
+        this.store.moveLink(this.store.toGraphPoint(event.clientX, event.clientY));
+        this.store.endLink(this.portKeyAt(event.clientX, event.clientY));
+    }
+    /**
+     * Keyboard equivalent of dragging a wire: commit on one port, move focus,
+     * commit on the other. Without it the graph cannot be wired without a mouse.
+     */
+    onKeydown(event) {
+        if (this.disabled() || this.store.settings().locked) {
+            return;
+        }
+        const linking = this.store.linking();
+        if (event.key === 'Escape' && linking) {
+            event.preventDefault();
+            this.store.endLink(null);
+            return;
+        }
+        if (event.key !== 'Enter' && event.key !== ' ') {
+            return;
+        }
+        event.preventDefault();
+        if (!linking) {
+            this.store.beginLink(this, this.store.portPoint(this.key) ?? { x: 0, y: 0 });
+        }
+        else {
+            this.store.endLink(linking.fromKey === this.key ? null : this.key);
+        }
+    }
+    /**
+     * Which port, if any, lies under a screen point. Used for drop targeting.
+     *
+     * The two halves of the identity are read back as separate attributes rather
+     * than as one composite key, so the registry is free to key ports however it
+     * likes without that encoding having to survive a DOM round-trip.
+     */
+    portKeyAt(clientX, clientY) {
+        const host = this.document.elementFromPoint(clientX, clientY)?.closest('[data-xui-graph-port]');
+        const portId = host?.getAttribute('data-xui-graph-port');
+        const nodeId = host?.getAttribute('data-xui-graph-port-node');
+        if (portId == null || nodeId == null) {
+            return null;
+        }
+        const key = xuiGraphPortKey(nodeId, portId);
+        return key === this.key ? null : key;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphPort, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiGraphPort, isStandalone: true, selector: "xui-graph-port", inputs: { portId: { classPropertyName: "portId", publicName: "portId", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, maxConnections: { classPropertyName: "maxConnections", publicName: "maxConnections", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()", "attr.data-xui-graph-port": "portId()", "attr.data-xui-graph-port-node": "nodeId()", "attr.data-side": "resolvedSide()", "attr.data-link-state": "linkState()", "style.order": "order()", "style.grid-column": "gridColumn()", "style.grid-row": "gridRow()", "style.left.%": "railOffset()", "style.opacity": "linkState() === 'invalid' ? 0.35 : null" } }, viewQueries: [{ propertyName: "connectorRef", first: true, predicate: ["connector"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      #connector
+      role="button"
+      [class]="connectorClass()"
+      [style.width.px]="connectorWidth()"
+      [style.height.px]="connectorHeight()"
+      [style.background]="connected() ? resolvedColor() : 'var(--color-surface)'"
+      [style.border-color]="resolvedColor()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-disabled]="disabled() || null"
+      [attr.title]="tooltip()"
+      [attr.tabindex]="disabled() ? null : 0"
+      (pointerdown)="onPointerDown($event)"
+      (pointermove)="onPointerMove($event)"
+      (pointerup)="onPointerUp($event)"
+      (pointercancel)="onPointerUp($event)"
+      (keydown)="onKeydown($event)"
+    ></div>
+
+    @if (label()) {
+      <span class="truncate">{{ label() }}</span>
+    }
+
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphPort, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'xui-graph-port',
+                    template: `
+    <div
+      #connector
+      role="button"
+      [class]="connectorClass()"
+      [style.width.px]="connectorWidth()"
+      [style.height.px]="connectorHeight()"
+      [style.background]="connected() ? resolvedColor() : 'var(--color-surface)'"
+      [style.border-color]="resolvedColor()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-disabled]="disabled() || null"
+      [attr.title]="tooltip()"
+      [attr.tabindex]="disabled() ? null : 0"
+      (pointerdown)="onPointerDown($event)"
+      (pointermove)="onPointerMove($event)"
+      (pointerup)="onPointerUp($event)"
+      (pointercancel)="onPointerUp($event)"
+      (keydown)="onKeydown($event)"
+    ></div>
+
+    @if (label()) {
+      <span class="truncate">{{ label() }}</span>
+    }
+
+    <ng-content />
+  `,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[attr.data-xui-graph-port]': 'portId()',
+                        '[attr.data-xui-graph-port-node]': 'nodeId()',
+                        '[attr.data-side]': 'resolvedSide()',
+                        '[attr.data-link-state]': 'linkState()',
+                        '[style.order]': 'order()',
+                        '[style.grid-column]': 'gridColumn()',
+                        '[style.grid-row]': 'gridRow()',
+                        '[style.left.%]': 'railOffset()',
+                        '[style.opacity]': "linkState() === 'invalid' ? 0.35 : null"
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: () => [], propDecorators: { connectorRef: [{ type: i0.ViewChild, args: ['connector', { isSignal: true }] }], portId: [{ type: i0.Input, args: [{ isSignal: true, alias: "portId", required: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], maxConnections: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxConnections", required: false }] }] } });
+
+const graphNodeVariants = cva('bg-surface-raised text-foreground absolute top-0 left-0 flex flex-col rounded-lg border select-none', {
+    variants: {
+        selected: {
+            true: 'border-primary ring-primary/60 ring-2',
+            false: 'border-border shadow-elevation-2'
+        },
+        locked: {
+            true: 'cursor-default',
+            false: ''
+        },
+        dimmed: {
+            true: 'opacity-45',
+            false: ''
+        }
+    },
+    defaultVariants: { selected: false, locked: false, dimmed: false }
+});
+/**
+ * A card on the canvas: a header, an optional body, and a set of ports.
+ *
+ * ```html
+ * <xui-graph-node nodeId="osc" label="Oscillator" [(position)]="position" accent="var(--color-chart-4)">
+ *   <xui-graph-port portId="freq" direction="input" dataType="float" label="Frequency" />
+ *   <xui-graph-port portId="out" direction="output" dataType="signal" label="Out" />
+ * </xui-graph-node>
+ * ```
+ *
+ * The node is deliberately unopinionated about its body — projected content
+ * renders below the ports, so the same component serves a shader node, a
+ * two-terminal resistor and a form-like settings card. What it does own is the
+ * geometry: its position drives every wire attached to it, and its border is
+ * where connectors sit.
+ *
+ * `position` is a model, so `[(position)]` keeps the host's own state authoritative
+ * — nothing is mutated behind the caller's back.
+ */
+class XuiGraphNode {
+    store = inject(XuiNodeGraphStore);
+    sizeState = signal({ width: 0, height: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeState" }] : /* istanbul ignore next */ []));
+    layoutEpochState = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutEpochState" }] : /* istanbul ignore next */ []));
+    dragOrigin = null;
+    /** Host element. Ports measure their connector offsets against this box. */
+    element = inject(ElementRef).nativeElement;
+    /** Identifies the node to edges and to the selection. Must be stable and unique. */
+    nodeId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodeId" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Top-left corner in graph space. Two-way bound so the host owns the value. */
+    position = model({ x: 0, y: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Fixed width in graph units. Leave unset to size to content. */
+    width = input(undefined, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: value => (value == null || value === '' ? undefined : numberAttribute(value)) });
+    /**
+     * Accent colour for the header's top rule — the usual way a node editor shows
+     * which category a node belongs to. Any CSS colour; prefer a theme token.
+     */
+    accent = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accent" }] : /* istanbul ignore next */ []));
+    /**
+     * Id of the `<xui-graph-group>` this node belongs to. Membership lives on the
+     * node rather than in the frame, so a node never has to move in the template to
+     * join or leave one.
+     */
+    group = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "group" }] : /* istanbul ignore next */ []));
+    /** Arrangement of the port rows. */
+    portLayout = input('stacked', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "portLayout" }] : /* istanbul ignore next */ []));
+    /**
+     * Hides the body and pulls every connector onto the header, so a finished
+     * subtree can be folded away without breaking its wiring.
+     */
+    collapsed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    selectable = input(true, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    draggable = input(true, { ...(ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Pins the node in place while leaving it selectable. */
+    locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Restrict dragging to the header, as a window manager does. */
+    dragHandle = input('node', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragHandle" }] : /* istanbul ignore next */ []));
+    /** Renders the node faded — for a disabled branch or a bypassed effect. */
+    dimmed = input(false, { ...(ngDevMode ? { debugName: "dimmed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Double-click on the header. The usual gesture for entering a subgraph. */
+    activated = output();
+    /** Measured border-box size in graph units, from a ResizeObserver. */
+    size = this.sizeState.asReadonly();
+    /** @internal Bumped on reflow so ports know to re-measure. */
+    layoutEpoch = this.layoutEpochState.asReadonly();
+    /** @internal Ports in DOM order, for side-relative indexing. */
+    portSlots = contentChildren(XuiGraphPort, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "portSlots" }] : /* istanbul ignore next */ []));
+    selected = computed(() => this.store.isNodeSelected(this.nodeId()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    immovable = computed(() => this.locked() || !this.draggable() || this.store.settings().locked, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "immovable" }] : /* istanbul ignore next */ []));
+    transform = computed(() => {
+        const { x, y } = this.position();
+        return `translate(${x}px, ${y}px)`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+    dragCursor = computed(() => this.immovable() ? null : this.dragHandle() === 'header' ? null : 'grab', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragCursor" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui(graphNodeVariants({ selected: this.selected(), locked: this.locked(), dimmed: this.dimmed() }), !this.width() && 'min-w-40', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    headerClass = computed(() => xui('flex items-center gap-2 rounded-t-lg px-3 py-2 text-sm font-medium', 
+    // The accent is painted as a thicker top rule, so it survives a dark theme
+    // and never fights the node's own surface colour for contrast.
+    this.accent() ? 'border-t-3' : 'border-t-3 border-t-transparent', !this.collapsed() && 'border-border-muted border-b', this.immovable() || this.dragHandle() === 'node' ? '' : 'cursor-grab'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+    portsClass = computed(() => xui(this.portLayout() === 'columns' ? 'grid grid-cols-2' : 'flex flex-col', 
+    // Collapsed ports are absolute, so the container takes no room on its own.
+    !this.collapsed() && this.portSlots().length > 0 && 'py-1.5'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "portsClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const observer = new ResizeObserver(entries => {
+            const box = entries[0]?.borderBoxSize?.[0];
+            const width = box ? box.inlineSize : this.element.offsetWidth;
+            const height = box ? box.blockSize : this.element.offsetHeight;
+            const current = untracked(this.sizeState);
+            if (Math.abs(current.width - width) > 0.5 || Math.abs(current.height - height) > 0.5) {
+                this.sizeState.set({ width, height });
+            }
+            // Bump unconditionally: a reflow that leaves the node's own box unchanged
+            // — a label swap, a row appearing and another disappearing — still moves
+            // the ports inside it.
+            this.layoutEpochState.update(epoch => epoch + 1);
+        });
+        observer.observe(this.element);
+        inject(DestroyRef).onDestroy(() => {
+            observer.disconnect();
+            this.store.unregisterNode(this);
+        });
+    }
+    ngOnInit() {
+        this.store.registerNode(this);
+    }
+    /** @internal Called by the store while dragging a selection. */
+    moveTo(point) {
+        this.position.set(point);
+    }
+    onPointerDown(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        // A press anywhere on a node belongs to the node, never to the canvas — even
+        // when it lands on a control and starts no drag at all.
+        event.stopPropagation();
+        const target = event.target;
+        if (this.selectable()) {
+            const additive = event.shiftKey || event.ctrlKey || event.metaKey;
+            if (additive || !this.store.isNodeSelected(this.nodeId())) {
+                this.store.selectNode(this.nodeId(), additive);
+            }
+        }
+        if (this.immovable() || target.closest(NON_DRAGGABLE)) {
+            return;
+        }
+        if (this.dragHandle() === 'header' && !target.closest('[data-xui-graph-node-header]')) {
+            return;
+        }
+        event.preventDefault();
+        this.element.setPointerCapture(event.pointerId);
+        this.dragOrigin = { x: event.clientX, y: event.clientY };
+        this.store.beginNodeDrag(this.nodeId());
+    }
+    onPointerMove(event) {
+        if (!this.dragOrigin) {
+            return;
+        }
+        const { zoom } = this.store.viewport();
+        this.store.dragNodesBy({
+            x: (event.clientX - this.dragOrigin.x) / zoom,
+            y: (event.clientY - this.dragOrigin.y) / zoom
+        });
+    }
+    onPointerUp(event) {
+        if (!this.dragOrigin) {
+            return;
+        }
+        this.dragOrigin = null;
+        this.element.releasePointerCapture(event.pointerId);
+        this.store.endNodeDrag();
+    }
+    onHeaderDoubleClick(event) {
+        event.stopPropagation();
+        this.activated.emit();
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphNode, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiGraphNode, isStandalone: true, selector: "xui-graph-node", inputs: { nodeId: { classPropertyName: "nodeId", publicName: "nodeId", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, portLayout: { classPropertyName: "portLayout", publicName: "portLayout", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, dimmed: { classPropertyName: "dimmed", publicName: "dimmed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { position: "positionChange", collapsed: "collapsedChange", activated: "activated" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)" }, properties: { "class": "computedClass()", "attr.data-xui-graph-node": "nodeId()", "attr.aria-selected": "selectable() ? selected() : null", "attr.role": "selectable() ? 'option' : null", "style.transform": "transform()", "style.width.px": "width()", "style.z-index": "selected() ? 2 : 1", "style.cursor": "dragCursor()" } }, providers: [{ provide: XUI_GRAPH_NODE, useExisting: XuiGraphNode }], queries: [{ propertyName: "portSlots", predicate: XuiGraphPort, isSignal: true }], ngImport: i0, template: `
+    <div
+      data-xui-graph-node-header
+      [class]="headerClass()"
+      [style.border-top-color]="accent()"
+      (dblclick)="onHeaderDoubleClick($event)"
+    >
+      @if (collapsible()) {
+        <button
+          type="button"
+          class="text-foreground-subtle hover:text-foreground -ml-1 shrink-0 cursor-pointer p-0.5 leading-none"
+          [attr.aria-label]="collapsed() ? 'Expand node' : 'Collapse node'"
+          [attr.aria-expanded]="!collapsed()"
+          (click)="collapsed.set(!collapsed())"
+        >
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            aria-hidden="true"
+            class="transition-transform duration-150"
+            [style.transform]="collapsed() ? 'rotate(-90deg)' : null"
+          >
+            <path d="M1 3 L5 7 L9 3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          </svg>
+        </button>
+      }
+
+      <ng-content select="xui-graph-node-header" />
+
+      @if (label()) {
+        <span class="min-w-0 flex-1 truncate">{{ label() }}</span>
+      }
+
+      <ng-content select="xui-graph-node-actions" />
+    </div>
+
+    @if (!collapsed()) {
+      <ng-content select="xui-graph-node-preview" />
+    }
+
+    <!--
+      Deliberately not positioned: left/right connectors resolve their inset
+      against this box (full node width, no horizontal padding), while top and
+      bottom ports are absolute and must resolve against the node itself.
+    -->
+    <div [class]="portsClass()">
+      <ng-content select="xui-graph-port" />
+    </div>
+
+    @if (!collapsed()) {
+      <ng-content />
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphNode, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'xui-graph-node',
+                    template: `
+    <div
+      data-xui-graph-node-header
+      [class]="headerClass()"
+      [style.border-top-color]="accent()"
+      (dblclick)="onHeaderDoubleClick($event)"
+    >
+      @if (collapsible()) {
+        <button
+          type="button"
+          class="text-foreground-subtle hover:text-foreground -ml-1 shrink-0 cursor-pointer p-0.5 leading-none"
+          [attr.aria-label]="collapsed() ? 'Expand node' : 'Collapse node'"
+          [attr.aria-expanded]="!collapsed()"
+          (click)="collapsed.set(!collapsed())"
+        >
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            aria-hidden="true"
+            class="transition-transform duration-150"
+            [style.transform]="collapsed() ? 'rotate(-90deg)' : null"
+          >
+            <path d="M1 3 L5 7 L9 3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          </svg>
+        </button>
+      }
+
+      <ng-content select="xui-graph-node-header" />
+
+      @if (label()) {
+        <span class="min-w-0 flex-1 truncate">{{ label() }}</span>
+      }
+
+      <ng-content select="xui-graph-node-actions" />
+    </div>
+
+    @if (!collapsed()) {
+      <ng-content select="xui-graph-node-preview" />
+    }
+
+    <!--
+      Deliberately not positioned: left/right connectors resolve their inset
+      against this box (full node width, no horizontal padding), while top and
+      bottom ports are absolute and must resolve against the node itself.
+    -->
+    <div [class]="portsClass()">
+      <ng-content select="xui-graph-port" />
+    </div>
+
+    @if (!collapsed()) {
+      <ng-content />
+    }
+  `,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[attr.data-xui-graph-node]': 'nodeId()',
+                        '[attr.aria-selected]': 'selectable() ? selected() : null',
+                        '[attr.role]': "selectable() ? 'option' : null",
+                        '[style.transform]': 'transform()',
+                        '[style.width.px]': 'width()',
+                        '[style.z-index]': 'selected() ? 2 : 1',
+                        '[style.cursor]': 'dragCursor()',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(pointercancel)': 'onPointerUp($event)'
+                    },
+                    providers: [{ provide: XUI_GRAPH_NODE, useExisting: XuiGraphNode }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: () => [], propDecorators: { nodeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeId", required: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }, { type: i0.Output, args: ["positionChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], portLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "portLayout", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }], dimmed: [{ type: i0.Input, args: [{ isSignal: true, alias: "dimmed", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }], portSlots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => XuiGraphPort), { isSignal: true }] }] } });
+/**
+ * Descendants that own their own pointer gestures. Ports link, native controls
+ * take input, and anything marked `xuiGraphNoDrag` opts out explicitly.
+ */
+const NON_DRAGGABLE = '[data-xui-graph-port], [data-xui-graph-no-drag], input, textarea, select, button, a, [contenteditable="true"]';
+
+/*
+ * The slots are elements rather than attribute directives on purpose.
+ *
+ * Content projection matches `ng-content select` against the template's own
+ * markup, and an attribute selector that fails to match raises nothing — the
+ * element quietly lands in the default slot instead. For a node header that means
+ * rendering below the ports; for an overlay it means being placed inside the
+ * canvas transform, where it pans and zooms with the content and sizes itself
+ * against a zero-height box. Element selectors match reliably, so a slot cannot
+ * end up in the wrong layer without anyone noticing.
+ */
+/**
+ * Replaces a node's default header. Use it when the title needs an icon, a
+ * badge, or anything beyond the `label` input.
+ *
+ * ```html
+ * <xui-graph-node nodeId="n1" [(position)]="position">
+ *   <xui-graph-node-header><ng-icon name="matBolt" /> Amplifier</xui-graph-node-header>
+ * </xui-graph-node>
+ * ```
+ */
+class XuiGraphNodeHeader {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui('flex min-w-0 flex-1 items-center gap-2 truncate', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphNodeHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiGraphNodeHeader, isStandalone: true, selector: "xui-graph-node-header", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphNodeHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'xui-graph-node-header',
+                    template: '<ng-content />',
+                    host: { '[class]': 'computedClass()' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/** Trailing controls in a node header — a menu button, a toggle, a status dot. */
+class XuiGraphNodeActions {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui('flex shrink-0 items-center gap-1', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphNodeActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiGraphNodeActions, isStandalone: true, selector: "xui-graph-node-actions", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphNodeActions, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'xui-graph-node-actions',
+                    template: '<ng-content />',
+                    host: { '[class]': 'computedClass()' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/**
+ * A full-bleed block between the header and the ports — a thumbnail, a preview
+ * render, a waveform. Sits above the port rows, as it does in a VFX graph.
+ */
+class XuiGraphNodePreview {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui('border-border-muted block overflow-hidden border-b', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphNodePreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiGraphNodePreview, isStandalone: true, selector: "xui-graph-node-preview", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphNodePreview, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'xui-graph-node-preview',
+                    template: '<ng-content />',
+                    host: { '[class]': 'computedClass()' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/**
+ * Furniture layered over the canvas — a legend, a toolbar, a context menu.
+ *
+ * It sits outside the canvas transform, so it neither pans nor scales with the
+ * content, and positions itself against the graph's own box:
+ *
+ * ```html
+ * <xui-node-graph>
+ *   …
+ *   <xui-graph-overlay class="top-4 right-4">Read only</xui-graph-overlay>
+ * </xui-node-graph>
+ * ```
+ *
+ * Keep the element itself outside any `@if` or `@for`, and put the condition on
+ * its contents instead. A control-flow block is projected as one embedded view,
+ * so anything wrapped in one goes to the canvas layer whatever its own selector
+ * says — an overlay put there pans and zooms away with the content:
+ *
+ * ```html
+ * <xui-graph-overlay class="inset-0" [class.pointer-events-none]="!menu()">
+ *   @if (menu(); as open) { … }
+ * </xui-graph-overlay>
+ * ```
+ */
+class XuiGraphOverlay {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui('pointer-events-auto absolute z-10 block', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiGraphOverlay, isStandalone: true, selector: "xui-graph-overlay", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-xui-graph-overlay": "" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphOverlay, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'xui-graph-overlay',
+                    template: '<ng-content />',
+                    host: {
+                        '[class]': 'computedClass()',
+                        // Tells the canvas to keep its hands off presses that land here. Without it
+                        // the canvas captures the pointer for a pan and the release never reaches
+                        // whatever was pressed, so buttons in an overlay never see a click.
+                        'data-xui-graph-overlay': ''
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/**
+ * Marks a subtree inside a node as not draggable, so pointer gestures on it
+ * belong to the control rather than moving the node.
+ *
+ * Native form controls, buttons and links are exempt already; this is for
+ * anything custom — a slider, a curve editor, a colour wheel.
+ */
+class XuiGraphNoDrag {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphNoDrag, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: XuiGraphNoDrag, isStandalone: true, selector: "[xuiGraphNoDrag]", host: { attributes: { "data-xui-graph-no-drag": "" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiGraphNoDrag, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xuiGraphNoDrag]',
+                    host: { 'data-xui-graph-no-drag': '' }
+                }]
+        }] });
+
+/** Unit vector pointing away from the node, per port side. */
+const NORMALS = {
+    left: { x: -1, y: 0 },
+    right: { x: 1, y: 0 },
+    top: { x: 0, y: -1 },
+    bottom: { x: 0, y: 1 }
+};
+function xuiGraphPortNormal(side) {
+    return NORMALS[side];
+}
+const XUI_GRAPH_DEFAULT_ROUTE_OPTIONS = {
+    stubLength: 18,
+    cornerRadius: 8,
+    curvature: 0.5
+};
+/**
+ * Build the `d` attribute for a wire between two ports.
+ *
+ * The two sides matter as much as the two points: an edge leaving a right-hand
+ * port must set off rightwards even when its target sits to the left, otherwise
+ * it appears to pass through the node it came from.
+ */
+function xuiGraphEdgePath(source, sourceSide, target, targetSide, routing, options = XUI_GRAPH_DEFAULT_ROUTE_OPTIONS) {
+    switch (routing) {
+        case 'straight':
+            return `M ${round(source.x)} ${round(source.y)} L ${round(target.x)} ${round(target.y)}`;
+        case 'orthogonal':
+            return polylinePath(orthogonalPoints(source, sourceSide, target, targetSide, options.stubLength), 0);
+        case 'smoothstep':
+            return polylinePath(orthogonalPoints(source, sourceSide, target, targetSide, options.stubLength), options.cornerRadius);
+        case 'bezier':
+        default:
+            return bezierPath(source, sourceSide, target, targetSide, options.curvature);
+    }
+}
+/**
+ * The point at the middle of a route, used to place edge labels.
+ *
+ * For a bezier this is the curve's t=0.5 point; for the orthogonal families it
+ * is the point half the total run from the source. Picking the longest segment
+ * instead would flip the label between two legs of equal length as the wire
+ * moved, and the halfway point is where a reader looks anyway.
+ */
+function xuiGraphEdgeMidpoint(source, sourceSide, target, targetSide, routing, options = XUI_GRAPH_DEFAULT_ROUTE_OPTIONS) {
+    if (routing === 'straight') {
+        return { x: (source.x + target.x) / 2, y: (source.y + target.y) / 2 };
+    }
+    if (routing === 'bezier') {
+        const [c1, c2] = bezierControlPoints(source, sourceSide, target, targetSide, options.curvature);
+        // Cubic Bezier at t = 0.5 reduces to the average of the four weights 1:3:3:1.
+        return {
+            x: (source.x + 3 * c1.x + 3 * c2.x + target.x) / 8,
+            y: (source.y + 3 * c1.y + 3 * c2.y + target.y) / 8
+        };
+    }
+    const points = orthogonalPoints(source, sourceSide, target, targetSide, options.stubLength);
+    const lengths = points.slice(1).map((point, index) => distance(points[index], point));
+    const half = lengths.reduce((sum, length) => sum + length, 0) / 2;
+    let travelled = 0;
+    for (let i = 0; i < lengths.length; i++) {
+        if (travelled + lengths[i] >= half) {
+            return lerp(points[i], points[i + 1], lengths[i] === 0 ? 0 : (half - travelled) / lengths[i]);
+        }
+        travelled += lengths[i];
+    }
+    return { x: (source.x + target.x) / 2, y: (source.y + target.y) / 2 };
+}
+function bezierControlPoints(source, sourceSide, target, targetSide, curvature) {
+    const sourceNormal = NORMALS[sourceSide];
+    const targetNormal = NORMALS[targetSide];
+    // Pull along each normal, scaled by the separation *on that normal's axis*.
+    // A floor keeps near-coincident ports from collapsing into a straight stub,
+    // which is what makes a self-connection or a tight back-link still legible.
+    const dx = Math.abs(target.x - source.x);
+    const dy = Math.abs(target.y - source.y);
+    const sourcePull = Math.max(30, (sourceNormal.x !== 0 ? dx : dy) * curvature);
+    const targetPull = Math.max(30, (targetNormal.x !== 0 ? dx : dy) * curvature);
+    return [
+        { x: source.x + sourceNormal.x * sourcePull, y: source.y + sourceNormal.y * sourcePull },
+        { x: target.x + targetNormal.x * targetPull, y: target.y + targetNormal.y * targetPull }
+    ];
+}
+function bezierPath(source, sourceSide, target, targetSide, curvature) {
+    const [c1, c2] = bezierControlPoints(source, sourceSide, target, targetSide, curvature);
+    return (`M ${round(source.x)} ${round(source.y)} ` +
+        `C ${round(c1.x)} ${round(c1.y)}, ${round(c2.x)} ${round(c2.y)}, ${round(target.x)} ${round(target.y)}`);
+}
+/**
+ * Manhattan route between two ports.
+ *
+ * Both ends first travel `stub` along their normal; the remaining gap is closed
+ * with one or two turns. Which turn pattern applies depends on whether the two
+ * normals share an axis and whether the far stub is already "ahead" of the near
+ * one — when it is not, the wire has to detour on the cross axis to get around.
+ */
+function orthogonalPoints(source, sourceSide, target, targetSide, stub) {
+    const sourceNormal = NORMALS[sourceSide];
+    const targetNormal = NORMALS[targetSide];
+    const a = { x: source.x + sourceNormal.x * stub, y: source.y + sourceNormal.y * stub };
+    const b = { x: target.x + targetNormal.x * stub, y: target.y + targetNormal.y * stub };
+    const sourceHorizontal = sourceNormal.x !== 0;
+    const targetHorizontal = targetNormal.x !== 0;
+    const middle = [];
+    if (sourceHorizontal && targetHorizontal) {
+        // Facing each other with room between them: split the gap and turn twice.
+        const facing = sourceNormal.x !== targetNormal.x;
+        const hasRoom = facing && (b.x - a.x) * sourceNormal.x > 0;
+        if (hasRoom) {
+            const midX = (a.x + b.x) / 2;
+            middle.push({ x: midX, y: a.y }, { x: midX, y: b.y });
+        }
+        else if (facing) {
+            // Facing but overlapping — go around on the cross axis.
+            const midY = (a.y + b.y) / 2;
+            middle.push({ x: a.x, y: midY }, { x: b.x, y: midY });
+        }
+        else {
+            // Same direction — run both stubs out to the furthest of the two.
+            const x = sourceNormal.x > 0 ? Math.max(a.x, b.x) : Math.min(a.x, b.x);
+            middle.push({ x, y: a.y }, { x, y: b.y });
+        }
+    }
+    else if (!sourceHorizontal && !targetHorizontal) {
+        const facing = sourceNormal.y !== targetNormal.y;
+        const hasRoom = facing && (b.y - a.y) * sourceNormal.y > 0;
+        if (hasRoom) {
+            const midY = (a.y + b.y) / 2;
+            middle.push({ x: a.x, y: midY }, { x: b.x, y: midY });
+        }
+        else if (facing) {
+            const midX = (a.x + b.x) / 2;
+            middle.push({ x: midX, y: a.y }, { x: midX, y: b.y });
+        }
+        else {
+            const y = sourceNormal.y > 0 ? Math.max(a.y, b.y) : Math.min(a.y, b.y);
+            middle.push({ x: a.x, y }, { x: b.x, y });
+        }
+    }
+    else if (sourceHorizontal) {
+        // Horizontal into vertical: a single elbow, turning under/over the target.
+        middle.push({ x: b.x, y: a.y });
+    }
+    else {
+        middle.push({ x: a.x, y: b.y });
+    }
+    return simplify([source, a, ...middle, b, target]);
+}
+/** Drop duplicate and collinear vertices so corner rounding never sees a zero-length leg. */
+function simplify(points) {
+    const result = [];
+    for (const point of points) {
+        const last = result[result.length - 1];
+        if (last && Math.abs(last.x - point.x) < 0.01 && Math.abs(last.y - point.y) < 0.01) {
+            continue;
+        }
+        const previous = result[result.length - 2];
+        if (previous && last && isCollinear(previous, last, point)) {
+            result[result.length - 1] = point;
+            continue;
+        }
+        result.push(point);
+    }
+    return result;
+}
+function isCollinear(a, b, c) {
+    return ((Math.abs(a.x - b.x) < 0.01 && Math.abs(b.x - c.x) < 0.01) ||
+        (Math.abs(a.y - b.y) < 0.01 && Math.abs(b.y - c.y) < 0.01));
+}
+/**
+ * Turn a polyline into a path, optionally rounding each interior corner.
+ *
+ * The rounding radius is clamped to half the shorter of the two legs meeting at
+ * the corner, so a tight zig-zag degrades to sharp corners instead of producing
+ * arcs that overshoot their own segments.
+ */
+function polylinePath(points, radius) {
+    if (points.length === 0) {
+        return '';
+    }
+    if (radius <= 0 || points.length < 3) {
+        return points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${round(p.x)} ${round(p.y)}`).join(' ');
+    }
+    let path = `M ${round(points[0].x)} ${round(points[0].y)}`;
+    for (let i = 1; i < points.length - 1; i++) {
+        const previous = points[i - 1];
+        const corner = points[i];
+        const next = points[i + 1];
+        const inLength = distance(previous, corner);
+        const outLength = distance(corner, next);
+        const r = Math.min(radius, inLength / 2, outLength / 2);
+        if (r < 0.5) {
+            path += ` L ${round(corner.x)} ${round(corner.y)}`;
+            continue;
+        }
+        const enter = lerp(corner, previous, r / inLength);
+        const exit = lerp(corner, next, r / outLength);
+        path += ` L ${round(enter.x)} ${round(enter.y)}`;
+        path += ` Q ${round(corner.x)} ${round(corner.y)}, ${round(exit.x)} ${round(exit.y)}`;
+    }
+    const last = points[points.length - 1];
+    return `${path} L ${round(last.x)} ${round(last.y)}`;
+}
+function distance(a, b) {
+    return Math.hypot(b.x - a.x, b.y - a.y);
+}
+function lerp(from, to, t) {
+    return { x: from.x + (to.x - from.x) * t, y: from.y + (to.y - from.y) * t };
+}
+function round(value) {
+    return Math.round(value * 100) / 100;
+}
+
+let nextGraphId = 0;
+/**
+ * A pannable, zoomable canvas for node-based editors and schematics.
+ *
+ * ```html
+ * <xui-node-graph class="h-[600px]" [edges]="edges()" routing="orthogonal" snapToGrid (connect)="add($event)">
+ *   @for (node of nodes(); track node.id) {
+ *     <xui-graph-node [nodeId]="node.id" [label]="node.label" [(position)]="node.position">
+ *       <xui-graph-port portId="in" direction="input" />
+ *       <xui-graph-port portId="out" direction="output" />
+ *     </xui-graph-node>
+ *   }
+ * </xui-node-graph>
+ * ```
+ *
+ * Nodes are ordinary projected content, so they keep Angular's template model —
+ * `@for`, `@if`, your own components — instead of being described by a
+ * configuration object. Edges are an input rather than content because a wire
+ * has no content of its own: its whole geometry is derived from the two ports it
+ * joins, which the graph already tracks.
+ *
+ * The graph never mutates `edges`. `connect` reports an approved connection and
+ * the host decides what to add, which is what keeps undo/redo and persistence in
+ * the host's hands.
+ */
+class XuiNodeGraph {
+    config = injectXuiNodeGraphConfig();
+    element = inject(ElementRef).nativeElement;
+    uid = nextGraphId++;
+    /** Pointer position where the current gesture began, in client coordinates. */
+    gestureOrigin = { x: 0, y: 0 };
+    gesture = 'none';
+    gestureMoved = false;
+    marqueeState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marqueeState" }] : /* istanbul ignore next */ []));
+    /** The store for this canvas. Use it to drive the view from a host component. */
+    store = inject(XuiNodeGraphStore);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** The wires to draw. Never mutated — see `connect`. */
+    edges = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "edges" }] : /* istanbul ignore next */ []));
+    /** Pan and zoom. Two-way bindable, so a host can save and restore the view. */
+    viewport = model({ x: 0, y: 0, zoom: 1 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+    routing = input(this.config.routing, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routing" }] : /* istanbul ignore next */ []));
+    background = input(this.config.background, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
+    marker = input(this.config.marker, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marker" }] : /* istanbul ignore next */ []));
+    gridSize = input(this.config.gridSize, { ...(ngDevMode ? { debugName: "gridSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    snapToGrid = input(this.config.snapToGrid, { ...(ngDevMode ? { debugName: "snapToGrid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    minZoom = input(this.config.minZoom, { ...(ngDevMode ? { debugName: "minZoom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    maxZoom = input(this.config.maxZoom, { ...(ngDevMode ? { debugName: "maxZoom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    edgeWidth = input(this.config.edgeWidth, { ...(ngDevMode ? { debugName: "edgeWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    portSize = input(this.config.portSize, { ...(ngDevMode ? { debugName: "portSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    portShape = input(this.config.portShape, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "portShape" }] : /* istanbul ignore next */ []));
+    portColor = input(this.config.portColor, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "portColor" }] : /* istanbul ignore next */ []));
+    /** Data-type registry: colour, glyph and label per `dataType`. */
+    portTypes = input(this.config.portTypes, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "portTypes" }] : /* istanbul ignore next */ []));
+    allowSelfConnection = input(this.config.allowSelfConnection, { ...(ngDevMode ? { debugName: "allowSelfConnection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    enforcePortTypes = input(this.config.enforcePortTypes, { ...(ngDevMode ? { debugName: "enforcePortTypes" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Last say on whether a connection may be made. Runs after the built-in rules. */
+    isValidConnection = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "isValidConnection" }] : /* istanbul ignore next */ []));
+    /** Read-only canvas: pan and zoom still work, editing does not. */
+    locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Dragging empty canvas pans. Turn it off to make dragging a marquee select instead. */
+    panOnDrag = input(true, { ...(ngDevMode ? { debugName: "panOnDrag" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * `wheel` zooms on a bare wheel, as node editors do. `ctrl-wheel` reserves the
+     * bare wheel for panning and zooms only with the modifier, as design tools do.
+     */
+    zoomActivation = input('wheel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomActivation" }] : /* istanbul ignore next */ []));
+    zoomOnScroll = input(true, { ...(ngDevMode ? { debugName: "zoomOnScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A connection that passed every rule. The host decides whether to add it. */
+    connect = output();
+    /** A wire dropped on empty canvas — the hook for "drag out to create a node". */
+    connectionDrop = output();
+    edgeClick = output();
+    /** Fired once per drag, when the pointer is released. */
+    nodeMove = output();
+    selectionChange = output();
+    /** Delete or Backspace over the canvas. The host performs the removal. */
+    deleteSelection = output();
+    canvasContextMenu = output();
+    Math = Math;
+    arrowId = `xui-graph-arrow-${this.uid}`;
+    arrowClosedId = `xui-graph-arrow-closed-${this.uid}`;
+    dotId = `xui-graph-dot-${this.uid}`;
+    marqueeRect = computed(() => {
+        const rect = this.marqueeState();
+        if (!rect) {
+            return null;
+        }
+        const origin = this.store.toSurfacePoint(rect);
+        const { zoom } = this.viewport();
+        return { x: origin.x, y: origin.y, width: rect.width * zoom, height: rect.height * zoom };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marqueeRect" }] : /* istanbul ignore next */ []));
+    settings = computed(() => ({
+        routing: this.routing(),
+        gridSize: this.gridSize(),
+        snapToGrid: this.snapToGrid(),
+        minZoom: this.minZoom(),
+        maxZoom: this.maxZoom(),
+        stubLength: this.config.stubLength,
+        cornerRadius: this.config.cornerRadius,
+        curvature: this.config.curvature,
+        edgeWidth: this.edgeWidth(),
+        portSize: this.portSize(),
+        portShape: this.portShape(),
+        portColor: this.portColor(),
+        portTypes: this.portTypes(),
+        allowSelfConnection: this.allowSelfConnection(),
+        enforcePortTypes: this.enforcePortTypes(),
+        isValidConnection: this.isValidConnection(),
+        locked: this.locked()
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    routeOptions = computed(() => ({
+        stubLength: this.config.stubLength,
+        cornerRadius: this.config.cornerRadius,
+        curvature: this.config.curvature
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routeOptions" }] : /* istanbul ignore next */ []));
+    canvasTransform = computed(() => {
+        const { x, y, zoom } = this.viewport();
+        return `translate(${x}px, ${y}px) scale(${zoom})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasTransform" }] : /* istanbul ignore next */ []));
+    renderedEdges = computed(() => {
+        const routing = this.routing();
+        const options = this.routeOptions();
+        const defaultWidth = this.edgeWidth();
+        const defaultMarker = this.marker();
+        const selected = this.store.selectedEdges();
+        const rendered = [];
+        for (const edge of this.edges()) {
+            const sourceKey = xuiGraphPortKey(edge.source.nodeId, edge.source.portId);
+            const targetKey = xuiGraphPortKey(edge.target.nodeId, edge.target.portId);
+            const sourcePort = this.store.port(sourceKey);
+            const targetPort = this.store.port(targetKey);
+            const sourcePoint = this.store.portPoint(sourceKey);
+            const targetPoint = this.store.portPoint(targetKey);
+            // An edge naming a port that has not rendered yet is skipped rather than
+            // guessed at, so a lazily-created node never draws a wire to the origin.
+            if (!sourcePort || !targetPort || !sourcePoint || !targetPoint) {
+                continue;
+            }
+            const edgeRouting = edge.routing ?? routing;
+            const sourceSide = sourcePort.resolvedSide();
+            const targetSide = targetPort.resolvedSide();
+            const markerType = edge.marker ?? defaultMarker;
+            rendered.push({
+                edge,
+                d: xuiGraphEdgePath(sourcePoint, sourceSide, targetPoint, targetSide, edgeRouting, options),
+                color: edge.color ?? sourcePort.resolvedColor(),
+                width: edge.width ?? defaultWidth,
+                selected: selected.has(edge.id),
+                dashArray: edge.dashed && !edge.animated ? '5 5' : null,
+                animated: !!edge.animated,
+                markerId: this.markerUrl(markerType),
+                label: edge.label ?? null,
+                labelPosition: xuiGraphEdgeMidpoint(sourcePoint, sourceSide, targetPoint, targetSide, edgeRouting, options)
+            });
+        }
+        return rendered;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderedEdges" }] : /* istanbul ignore next */ []));
+    /** The wire that follows the pointer while a connection is being drawn. */
+    linkPreview = computed(() => {
+        const linking = this.store.linking();
+        if (!linking) {
+            return null;
+        }
+        const port = this.store.port(linking.fromKey);
+        const from = this.store.portPoint(linking.fromKey);
+        if (!port || !from) {
+            return null;
+        }
+        // Land on whichever port is hovered, so the preview snaps before release.
+        const hoverPoint = linking.hoverKey ? this.store.portPoint(linking.hoverKey) : null;
+        const hoverSide = linking.hoverKey ? this.store.port(linking.hoverKey)?.resolvedSide() : undefined;
+        const to = hoverPoint ?? linking.pointer;
+        const toSide = hoverSide ?? OPPOSITE[port.resolvedSide()];
+        const valid = linking.hoverKey ? this.store.linkState(linking.hoverKey) === 'valid' : true;
+        return {
+            d: xuiGraphEdgePath(from, port.resolvedSide(), to, toSide, this.routing(), this.routeOptions()),
+            color: valid ? port.resolvedColor() : 'var(--color-error)'
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linkPreview" }] : /* istanbul ignore next */ []));
+    backgroundImage = computed(() => {
+        const background = this.background();
+        const step = this.gridSize() * this.viewport().zoom;
+        // Below a few pixels a rule turns into noise, so it is dropped entirely.
+        if (background === 'none' || step < 4) {
+            return null;
+        }
+        if (background === 'dots') {
+            return 'radial-gradient(circle, var(--color-border-strong) 1px, transparent 1px)';
+        }
+        return [
+            'linear-gradient(to right, var(--color-border-muted) 1px, transparent 1px)',
+            'linear-gradient(to bottom, var(--color-border-muted) 1px, transparent 1px)',
+            'linear-gradient(to right, var(--color-border) 1px, transparent 1px)',
+            'linear-gradient(to bottom, var(--color-border) 1px, transparent 1px)'
+        ].join(', ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backgroundImage" }] : /* istanbul ignore next */ []));
+    backgroundSize = computed(() => {
+        const step = this.gridSize() * this.viewport().zoom;
+        const major = step * this.config.gridMajorEvery;
+        return this.background() === 'dots'
+            ? `${step}px ${step}px`
+            : `${step}px ${step}px, ${step}px ${step}px, ${major}px ${major}px, ${major}px ${major}px`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backgroundSize" }] : /* istanbul ignore next */ []));
+    backgroundPosition = computed(() => {
+        const { x, y } = this.viewport();
+        const offset = `${x}px ${y}px`;
+        return this.background() === 'dots' ? offset : `${offset}, ${offset}, ${offset}, ${offset}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backgroundPosition" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui(
+    // The canvas is focusable so its shortcuts work, but draws no focus ring:
+    // a ring around the whole editor reads as a selection the user did not make,
+    // and every element inside it that can hold focus rings on its own.
+    'bg-background relative block touch-none overflow-hidden outline-none', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.store.configure({
+            settings: this.settings,
+            viewport: this.viewport,
+            edges: this.edges,
+            listeners: {
+                connect: connection => this.connect.emit(connection),
+                connectionDrop: drop => this.connectionDrop.emit(drop),
+                nodeMove: move => this.nodeMove.emit(move),
+                selectionChange: () => this.selectionChange.emit({
+                    nodes: [...this.store.selectedNodes()],
+                    edges: [...this.store.selectedEdges()]
+                })
+            }
+        });
+        this.store.setSurface(this.element);
+        const observer = new ResizeObserver(() => this.store.surfaceSize.set({ width: this.element.clientWidth, height: this.element.clientHeight }));
+        observer.observe(this.element);
+        inject(DestroyRef).onDestroy(() => observer.disconnect());
+    }
+    /** Frame every node, leaving `padding` screen pixels of margin. */
+    fitView(padding) {
+        this.store.fitView(padding);
+    }
+    zoomIn() {
+        this.store.zoomBy(this.config.zoomStep);
+    }
+    zoomOut() {
+        this.store.zoomBy(1 / this.config.zoomStep);
+    }
+    /** Return to 1:1 without moving the centre of the view. */
+    resetZoom() {
+        this.store.zoomTo(1);
+    }
+    markerUrl(marker) {
+        switch (marker) {
+            case 'arrow':
+                return `url(#${this.arrowId})`;
+            case 'arrow-closed':
+                return `url(#${this.arrowClosedId})`;
+            case 'dot':
+                return `url(#${this.dotId})`;
+            default:
+                return null;
+        }
+    }
+    onEdgePointerDown(edge, event) {
+        if (event.button !== 0 || this.locked()) {
+            return;
+        }
+        event.stopPropagation();
+        this.store.selectEdge(edge.id, event.shiftKey || event.ctrlKey || event.metaKey);
+        this.edgeClick.emit(edge);
+    }
+    /**
+     * Presses that reach here landed on empty canvas — nodes, ports and edges all
+     * stop propagation — so this only ever starts a pan or a marquee.
+     */
+    onPointerDown(event) {
+        const middle = event.button === 1;
+        if (event.button !== 0 && !middle) {
+            return;
+        }
+        // Overlay furniture sits above the canvas but still bubbles to it. Capturing
+        // the pointer here would retarget the release and the button would never see
+        // a click at all, so the whole overlay layer is left alone.
+        if (event.target.closest('[data-xui-graph-overlay]')) {
+            return;
+        }
+        this.element.focus({ preventScroll: true });
+        this.element.setPointerCapture(event.pointerId);
+        this.gestureOrigin = { x: event.clientX, y: event.clientY };
+        this.gestureMoved = false;
+        // Middle-drag always pans, whatever the primary gesture is bound to;
+        // shift inverts the primary gesture, which is the convention everywhere.
+        const pan = middle || this.panOnDrag() !== event.shiftKey;
+        if (pan) {
+            this.gesture = 'pan';
+            return;
+        }
+        this.gesture = 'marquee';
+        const start = this.store.toGraphPoint(event.clientX, event.clientY);
+        this.marqueeState.set({ x: start.x, y: start.y, width: 0, height: 0 });
+    }
+    onPointerMove(event) {
+        if (this.gesture === 'none') {
+            return;
+        }
+        const dx = event.clientX - this.gestureOrigin.x;
+        const dy = event.clientY - this.gestureOrigin.y;
+        if (Math.abs(dx) > 2 || Math.abs(dy) > 2) {
+            this.gestureMoved = true;
+        }
+        if (this.gesture === 'pan') {
+            this.store.panBy(dx, dy);
+            this.gestureOrigin = { x: event.clientX, y: event.clientY };
+            return;
+        }
+        const start = this.store.toGraphPoint(this.gestureOrigin.x, this.gestureOrigin.y);
+        const current = this.store.toGraphPoint(event.clientX, event.clientY);
+        this.marqueeState.set({
+            x: Math.min(start.x, current.x),
+            y: Math.min(start.y, current.y),
+            width: Math.abs(current.x - start.x),
+            height: Math.abs(current.y - start.y)
+        });
+    }
+    onPointerUp(event) {
+        if (this.gesture === 'none') {
+            return;
+        }
+        this.element.releasePointerCapture(event.pointerId);
+        const rect = untracked(this.marqueeState);
+        const gesture = this.gesture;
+        this.gesture = 'none';
+        this.marqueeState.set(null);
+        if (gesture === 'marquee' && rect && this.gestureMoved) {
+            this.store.selectInRect(rect, event.shiftKey || event.ctrlKey || event.metaKey);
+            return;
+        }
+        // A press that never moved is a click on the backdrop: deselect.
+        if (!this.gestureMoved) {
+            this.store.clearSelection();
+        }
+    }
+    onWheel(event) {
+        if (!this.zoomOnScroll()) {
+            return;
+        }
+        const rect = this.element.getBoundingClientRect();
+        const anchor = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+        if (this.zoomActivation() === 'ctrl-wheel' && !event.ctrlKey && !event.metaKey) {
+            event.preventDefault();
+            this.store.panBy(-event.deltaX, -event.deltaY);
+            return;
+        }
+        event.preventDefault();
+        // Exponential in the raw delta so a trackpad's fine-grained events and a
+        // mouse wheel's coarse notches both feel proportional.
+        this.store.zoomBy(Math.exp(-clamp(event.deltaY, -120, 120) * 0.0025), anchor);
+    }
+    onKeydown(event) {
+        const modifier = event.ctrlKey || event.metaKey;
+        if (modifier && event.key.toLowerCase() === 'a') {
+            event.preventDefault();
+            this.store.selectAll();
+            return;
+        }
+        if (event.key === 'Escape') {
+            this.store.endLink(null);
+            this.store.clearSelection();
+            return;
+        }
+        if ((event.key === 'Delete' || event.key === 'Backspace') && !this.locked()) {
+            const nodes = [...this.store.selectedNodes()];
+            const edges = [...this.store.selectedEdges()];
+            if (nodes.length || edges.length) {
+                event.preventDefault();
+                this.deleteSelection.emit({ nodes, edges });
+            }
+            return;
+        }
+        const nudge = ARROW_NUDGE[event.key];
+        if (nudge && !this.locked() && this.store.selectedNodes().size > 0) {
+            event.preventDefault();
+            // Shift steps a whole grid cell; a bare arrow moves by one unit, or by the
+            // grid when snapping is on and any smaller step would be discarded anyway.
+            const step = event.shiftKey || this.snapToGrid() ? this.gridSize() : 1;
+            const first = [...this.store.selectedNodes()][0];
+            this.store.beginNodeDrag(first);
+            this.store.dragNodesBy({ x: nudge.x * step, y: nudge.y * step });
+            this.store.endNodeDrag();
+        }
+    }
+    onContextMenu(event) {
+        this.canvasContextMenu.emit({ event, position: this.store.toGraphPoint(event.clientX, event.clientY) });
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiNodeGraph, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiNodeGraph, isStandalone: true, selector: "xui-node-graph", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null }, viewport: { classPropertyName: "viewport", publicName: "viewport", isSignal: true, isRequired: false, transformFunction: null }, routing: { classPropertyName: "routing", publicName: "routing", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, marker: { classPropertyName: "marker", publicName: "marker", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, edgeWidth: { classPropertyName: "edgeWidth", publicName: "edgeWidth", isSignal: true, isRequired: false, transformFunction: null }, portSize: { classPropertyName: "portSize", publicName: "portSize", isSignal: true, isRequired: false, transformFunction: null }, portShape: { classPropertyName: "portShape", publicName: "portShape", isSignal: true, isRequired: false, transformFunction: null }, portColor: { classPropertyName: "portColor", publicName: "portColor", isSignal: true, isRequired: false, transformFunction: null }, portTypes: { classPropertyName: "portTypes", publicName: "portTypes", isSignal: true, isRequired: false, transformFunction: null }, allowSelfConnection: { classPropertyName: "allowSelfConnection", publicName: "allowSelfConnection", isSignal: true, isRequired: false, transformFunction: null }, enforcePortTypes: { classPropertyName: "enforcePortTypes", publicName: "enforcePortTypes", isSignal: true, isRequired: false, transformFunction: null }, isValidConnection: { classPropertyName: "isValidConnection", publicName: "isValidConnection", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, panOnDrag: { classPropertyName: "panOnDrag", publicName: "panOnDrag", isSignal: true, isRequired: false, transformFunction: null }, zoomActivation: { classPropertyName: "zoomActivation", publicName: "zoomActivation", isSignal: true, isRequired: false, transformFunction: null }, zoomOnScroll: { classPropertyName: "zoomOnScroll", publicName: "zoomOnScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewport: "viewportChange", connect: "connect", connectionDrop: "connectionDrop", edgeClick: "edgeClick", nodeMove: "nodeMove", selectionChange: "selectionChange", deleteSelection: "deleteSelection", canvasContextMenu: "canvasContextMenu" }, host: { attributes: { "role": "application" }, listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)", "wheel": "onWheel($event)", "keydown": "onKeydown($event)", "contextmenu": "onContextMenu($event)" }, properties: { "class": "computedClass()", "attr.tabindex": "0" } }, providers: [XuiNodeGraphStore], ngImport: i0, template: `
+    <div
+      class="pointer-events-none absolute inset-0"
+      [style.background-image]="backgroundImage()"
+      [style.background-size]="backgroundSize()"
+      [style.background-position]="backgroundPosition()"
+    ></div>
+
+    <div class="absolute top-0 left-0 origin-top-left" [style.transform]="canvasTransform()">
+      <svg class="pointer-events-none absolute overflow-visible" width="1" height="1" aria-hidden="true">
+        <defs>
+          <marker
+            [id]="arrowId"
+            markerWidth="10"
+            markerHeight="10"
+            refX="9"
+            refY="5"
+            orient="auto-start-reverse"
+            markerUnits="userSpaceOnUse"
+          >
+            <path d="M 1 1 L 9 5 L 1 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" />
+          </marker>
+          <marker
+            [id]="arrowClosedId"
+            markerWidth="10"
+            markerHeight="10"
+            refX="9"
+            refY="5"
+            orient="auto-start-reverse"
+            markerUnits="userSpaceOnUse"
+          >
+            <path d="M 1 1 L 9 5 L 1 9 Z" fill="context-stroke" stroke="context-stroke" stroke-width="1" />
+          </marker>
+          <marker [id]="dotId" markerWidth="8" markerHeight="8" refX="4" refY="4" markerUnits="userSpaceOnUse">
+            <circle cx="4" cy="4" r="3" fill="context-stroke" />
+          </marker>
+        </defs>
+
+        @for (item of renderedEdges(); track item.edge.id) {
+          <g class="pointer-events-auto">
+            @if (item.selected) {
+              <path
+                [attr.d]="item.d"
+                fill="none"
+                stroke="var(--color-selection)"
+                [attr.stroke-width]="item.width + 8"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            }
+            <path
+              class="cursor-pointer"
+              [attr.d]="item.d"
+              fill="none"
+              stroke="transparent"
+              [attr.stroke-width]="Math.max(item.width * 4, 14)"
+              [attr.pointer-events]="locked() ? 'none' : 'stroke'"
+              (pointerdown)="onEdgePointerDown(item.edge, $event)"
+            />
+            <path
+              [class]="item.animated ? 'xui-graph-edge-flow' : null"
+              [attr.d]="item.d"
+              fill="none"
+              [attr.stroke]="item.color"
+              [attr.stroke-width]="item.width"
+              [attr.stroke-dasharray]="item.dashArray"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              [attr.marker-end]="item.markerId"
+              pointer-events="none"
+            />
+          </g>
+        }
+
+        @if (linkPreview(); as preview) {
+          <path
+            [attr.d]="preview.d"
+            fill="none"
+            [attr.stroke]="preview.color"
+            [attr.stroke-width]="edgeWidth()"
+            stroke-dasharray="6 5"
+            stroke-linecap="round"
+            pointer-events="none"
+          />
+        }
+      </svg>
+
+      <ng-content />
+
+      @for (item of renderedEdges(); track item.edge.id) {
+        @if (item.label) {
+          <div
+            class="bg-surface-overlay text-foreground-muted border-border-muted pointer-events-none absolute rounded border px-1.5 py-0.5 text-[10px] whitespace-nowrap"
+            [style.left.px]="item.labelPosition.x"
+            [style.top.px]="item.labelPosition.y"
+            style="transform: translate(-50%, -50%)"
+          >
+            {{ item.label }}
+          </div>
+        }
+      }
+    </div>
+
+    @if (marqueeRect(); as rect) {
+      <div
+        class="border-primary bg-primary/15 pointer-events-none absolute border"
+        [style.left.px]="rect.x"
+        [style.top.px]="rect.y"
+        [style.width.px]="rect.width"
+        [style.height.px]="rect.height"
+      ></div>
+    }
+
+    <ng-content select="xui-graph-overlay, xui-graph-controls, xui-graph-minimap" />
+  `, isInline: true, styles: ["@keyframes xui-graph-edge-flow{to{stroke-dashoffset:-16}}.xui-graph-edge-flow{stroke-dasharray:8 8;animation:xui-graph-edge-flow .6s linear infinite}@media(prefers-reduced-motion:reduce){.xui-graph-edge-flow{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiNodeGraph, decorators: [{
+            type: Component,
+            args: [{ selector: 'xui-node-graph', template: `
+    <div
+      class="pointer-events-none absolute inset-0"
+      [style.background-image]="backgroundImage()"
+      [style.background-size]="backgroundSize()"
+      [style.background-position]="backgroundPosition()"
+    ></div>
+
+    <div class="absolute top-0 left-0 origin-top-left" [style.transform]="canvasTransform()">
+      <svg class="pointer-events-none absolute overflow-visible" width="1" height="1" aria-hidden="true">
+        <defs>
+          <marker
+            [id]="arrowId"
+            markerWidth="10"
+            markerHeight="10"
+            refX="9"
+            refY="5"
+            orient="auto-start-reverse"
+            markerUnits="userSpaceOnUse"
+          >
+            <path d="M 1 1 L 9 5 L 1 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" />
+          </marker>
+          <marker
+            [id]="arrowClosedId"
+            markerWidth="10"
+            markerHeight="10"
+            refX="9"
+            refY="5"
+            orient="auto-start-reverse"
+            markerUnits="userSpaceOnUse"
+          >
+            <path d="M 1 1 L 9 5 L 1 9 Z" fill="context-stroke" stroke="context-stroke" stroke-width="1" />
+          </marker>
+          <marker [id]="dotId" markerWidth="8" markerHeight="8" refX="4" refY="4" markerUnits="userSpaceOnUse">
+            <circle cx="4" cy="4" r="3" fill="context-stroke" />
+          </marker>
+        </defs>
+
+        @for (item of renderedEdges(); track item.edge.id) {
+          <g class="pointer-events-auto">
+            @if (item.selected) {
+              <path
+                [attr.d]="item.d"
+                fill="none"
+                stroke="var(--color-selection)"
+                [attr.stroke-width]="item.width + 8"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            }
+            <path
+              class="cursor-pointer"
+              [attr.d]="item.d"
+              fill="none"
+              stroke="transparent"
+              [attr.stroke-width]="Math.max(item.width * 4, 14)"
+              [attr.pointer-events]="locked() ? 'none' : 'stroke'"
+              (pointerdown)="onEdgePointerDown(item.edge, $event)"
+            />
+            <path
+              [class]="item.animated ? 'xui-graph-edge-flow' : null"
+              [attr.d]="item.d"
+              fill="none"
+              [attr.stroke]="item.color"
+              [attr.stroke-width]="item.width"
+              [attr.stroke-dasharray]="item.dashArray"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              [attr.marker-end]="item.markerId"
+              pointer-events="none"
+            />
+          </g>
+        }
+
+        @if (linkPreview(); as preview) {
+          <path
+            [attr.d]="preview.d"
+            fill="none"
+            [attr.stroke]="preview.color"
+            [attr.stroke-width]="edgeWidth()"
+            stroke-dasharray="6 5"
+            stroke-linecap="round"
+            pointer-events="none"
+          />
+        }
+      </svg>
+
+      <ng-content />
+
+      @for (item of renderedEdges(); track item.edge.id) {
+        @if (item.label) {
+          <div
+            class="bg-surface-overlay text-foreground-muted border-border-muted pointer-events-none absolute rounded border px-1.5 py-0.5 text-[10px] whitespace-nowrap"
+            [style.left.px]="item.labelPosition.x"
+            [style.top.px]="item.labelPosition.y"
+            style="transform: translate(-50%, -50%)"
+          >
+            {{ item.label }}
+          </div>
+        }
+      }
+    </div>
+
+    @if (marqueeRect(); as rect) {
+      <div
+        class="border-primary bg-primary/15 pointer-events-none absolute border"
+        [style.left.px]="rect.x"
+        [style.top.px]="rect.y"
+        [style.width.px]="rect.width"
+        [style.height.px]="rect.height"
+      ></div>
+    }
+
+    <ng-content select="xui-graph-overlay, xui-graph-controls, xui-graph-minimap" />
+  `, host: {
+                        '[class]': 'computedClass()',
+                        '[attr.tabindex]': '0',
+                        role: 'application',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(pointercancel)': 'onPointerUp($event)',
+                        '(wheel)': 'onWheel($event)',
+                        '(keydown)': 'onKeydown($event)',
+                        '(contextmenu)': 'onContextMenu($event)'
+                    }, providers: [XuiNodeGraphStore], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["@keyframes xui-graph-edge-flow{to{stroke-dashoffset:-16}}.xui-graph-edge-flow{stroke-dasharray:8 8;animation:xui-graph-edge-flow .6s linear infinite}@media(prefers-reduced-motion:reduce){.xui-graph-edge-flow{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], edges: [{ type: i0.Input, args: [{ isSignal: true, alias: "edges", required: false }] }], viewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewport", required: false }] }, { type: i0.Output, args: ["viewportChange"] }], routing: [{ type: i0.Input, args: [{ isSignal: true, alias: "routing", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], marker: [{ type: i0.Input, args: [{ isSignal: true, alias: "marker", required: false }] }], gridSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridSize", required: false }] }], snapToGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToGrid", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], edgeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgeWidth", required: false }] }], portSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "portSize", required: false }] }], portShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "portShape", required: false }] }], portColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "portColor", required: false }] }], portTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "portTypes", required: false }] }], allowSelfConnection: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSelfConnection", required: false }] }], enforcePortTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "enforcePortTypes", required: false }] }], isValidConnection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValidConnection", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], panOnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "panOnDrag", required: false }] }], zoomActivation: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomActivation", required: false }] }], zoomOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOnScroll", required: false }] }], connect: [{ type: i0.Output, args: ["connect"] }], connectionDrop: [{ type: i0.Output, args: ["connectionDrop"] }], edgeClick: [{ type: i0.Output, args: ["edgeClick"] }], nodeMove: [{ type: i0.Output, args: ["nodeMove"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], deleteSelection: [{ type: i0.Output, args: ["deleteSelection"] }], canvasContextMenu: [{ type: i0.Output, args: ["canvasContextMenu"] }] } });
+const OPPOSITE = { left: 'right', right: 'left', top: 'bottom', bottom: 'top' };
+const ARROW_NUDGE = {
+    ArrowLeft: { x: -1, y: 0 },
+    ArrowRight: { x: 1, y: 0 },
+    ArrowUp: { x: 0, y: -1 },
+    ArrowDown: { x: 0, y: 1 }
+};
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+
+const XuiNodeGraphImports = [
+    XuiNodeGraph,
+    XuiGraphNode,
+    XuiGraphPort,
+    XuiGraphGroup,
+    XuiGraphControls,
+    XuiGraphMinimap,
+    XuiGraphNodeHeader,
+    XuiGraphNodeActions,
+    XuiGraphNodePreview,
+    XuiGraphNoDrag,
+    XuiGraphOverlay
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XUI_GRAPH_DEFAULT_ROUTE_OPTIONS, XuiGraphControls, XuiGraphGroup, XuiGraphMinimap, XuiGraphNoDrag, XuiGraphNode, XuiGraphNodeActions, XuiGraphNodeHeader, XuiGraphNodePreview, XuiGraphOverlay, XuiGraphPort, XuiNodeGraph, XuiNodeGraphImports, XuiNodeGraphStore, graphNodeVariants, injectXuiNodeGraphConfig, injectXuiNodeGraphStore, provideXuiNodeGraphConfig, xuiGraphChartPortTypes, xuiGraphEdgeMidpoint, xuiGraphEdgePath, xuiGraphPortKey, xuiGraphPortNormal };
+//# sourceMappingURL=xui-node-graph.mjs.map