@xui/node-graph 2.0.0-alpha.11

package/types/xui-node-graph.d.ts

@@ -0,0 +1,1172 @@
+import * as _angular_core from '@angular/core';
+import { Signal, ValueProvider, WritableSignal, OnInit } from '@angular/core';
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { ClassValue } from 'clsx';
+import * as _xui_node_graph from '@xui/node-graph';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/** A point in *graph space* — the untransformed coordinate system nodes live in. */
+interface XuiGraphPoint {
+    x: number;
+    y: number;
+}
+/** A size in graph space. Screen pixels only match at zoom 1. */
+interface XuiGraphSize {
+    width: number;
+    height: number;
+}
+interface XuiGraphRect extends XuiGraphPoint, XuiGraphSize {
+}
+/**
+ * The pan/zoom state of the canvas. `x`/`y` are a *screen-pixel* translation
+ * applied after scaling, so `screen = graph * zoom + pan`.
+ */
+interface XuiGraphViewport extends XuiGraphPoint {
+    zoom: number;
+}
+/**
+ * Which way data flows through a port. `inout` is the bidirectional case that
+ * electrical schematics need — a terminal is neither a source nor a sink, and a
+ * wire may be drawn from either end.
+ */
+type XuiGraphPortDirection = 'input' | 'output' | 'inout';
+/** Which edge of the node the connector sits on. Drives layout and edge routing. */
+type XuiGraphPortSide = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * The connector glyph. `circle` reads as a data socket (VFX/shader graphs),
+ * `pin` as a component lead (schematics), and the rest are available to encode a
+ * second dimension — by convention `diamond` marks an optional/nullable input.
+ */
+type XuiGraphPortShape = 'circle' | 'square' | 'diamond' | 'triangle' | 'pin';
+/** How ports are arranged inside a node's body. */
+type XuiGraphPortLayout = 'stacked' | 'columns';
+/**
+ * Edge geometry.
+ *
+ * - `bezier` — cubic curve leaving each port along its normal. The node-editor default.
+ * - `orthogonal` — axis-aligned segments with sharp corners. The schematic default.
+ * - `smoothstep` — orthogonal with rounded corners.
+ * - `straight` — a single line.
+ */
+type XuiGraphRouting = 'bezier' | 'orthogonal' | 'smoothstep' | 'straight';
+/** Decoration drawn at the target end of an edge. */
+type XuiGraphMarker = 'none' | 'arrow' | 'arrow-closed' | 'dot';
+/** The canvas backdrop. `grid` draws a minor/major rule pair, as schematic paper does. */
+type XuiGraphBackground = 'none' | 'dots' | 'grid';
+/** Addresses one connector: a port is only unique within its node. */
+interface XuiGraphPortRef {
+    nodeId: string;
+    portId: string;
+}
+/** A connection the user has drawn but that the model does not contain yet. */
+interface XuiGraphConnection {
+    source: XuiGraphPortRef;
+    target: XuiGraphPortRef;
+}
+/**
+ * A wire between two ports. Purely declarative and serialisable — geometry is
+ * derived from the live position of the two ports, never stored here.
+ */
+interface XuiGraphEdge {
+    id: string;
+    /** Where the wire starts. For `inout` ports this is simply the end drawn first. */
+    source: XuiGraphPortRef;
+    target: XuiGraphPortRef;
+    /** Overrides the routing the graph is configured with, per edge. */
+    routing?: XuiGraphRouting;
+    /** Overrides the colour inherited from the source port's data type. */
+    color?: string;
+    /** Text rendered at the midpoint of the wire. */
+    label?: string;
+    /** Marching-ants animation, for showing that data or current is flowing. */
+    animated?: boolean;
+    dashed?: boolean;
+    /** Stroke width in graph units. Defaults to the graph's `edgeWidth`. */
+    width?: number;
+    marker?: XuiGraphMarker;
+    /** Arbitrary payload carried through selection and click events. */
+    data?: unknown;
+}
+/**
+ * A flattened, framework-free view of a port, handed to
+ * {@link XuiGraphConnectionValidator} so validation logic never touches
+ * component instances.
+ */
+interface XuiGraphPortDescriptor extends XuiGraphPortRef {
+    direction: XuiGraphPortDirection;
+    side: XuiGraphPortSide;
+    dataType: string | undefined;
+    maxConnections: number;
+    disabled: boolean;
+    /** How many edges already terminate here. */
+    connections: number;
+}
+/** The two ends of a proposed connection, resolved against the live port registry. */
+interface XuiGraphConnectionContext {
+    source: XuiGraphPortDescriptor;
+    target: XuiGraphPortDescriptor;
+    edges: readonly XuiGraphEdge[];
+}
+/**
+ * Returns whether a connection may be made. Runs *after* the built-in rules
+ * (direction, arity, duplicates, data type), so it can only narrow them.
+ */
+type XuiGraphConnectionValidator = (connection: XuiGraphConnection, context: XuiGraphConnectionContext) => boolean;
+/** Emitted when a wire is dropped on empty canvas, for "drag out to create a node". */
+interface XuiGraphConnectionDrop {
+    source: XuiGraphPortRef;
+    /**
+     * The port the wire came from, described in full so a create menu can filter
+     * itself to what would actually connect without looking the port up again.
+     */
+    port: XuiGraphPortDescriptor;
+    /** Where the pointer was released, in graph space — where a new node belongs. */
+    position: XuiGraphPoint;
+    /**
+     * The same release point relative to the canvas element's top-left corner, so
+     * a popup can be placed without converting through the viewport.
+     */
+    surfacePosition: XuiGraphPoint;
+}
+/** One node's resting place after a drag. */
+interface XuiGraphNodeMoved {
+    nodeId: string;
+    position: XuiGraphPoint;
+    /**
+     * Innermost group frame the node's centre now sits inside, ignoring the nodes
+     * that moved with it — the hook for "drag a node into a frame to join it".
+     *
+     * `undefined` when it came to rest outside every frame, and always `undefined`
+     * for a group drag, where no node changed hands.
+     */
+    group: string | undefined;
+}
+/** Emitted whenever a drag settles, with the final position of every moved node. */
+interface XuiGraphNodeMove {
+    /** Whether the gesture started on a node (or node selection) or on a group frame. */
+    source: 'node' | 'group';
+    nodes: readonly XuiGraphNodeMoved[];
+}
+/**
+ * The contract {@link XuiGraphNode} fulfils for the store.
+ *
+ * Declared here rather than imported from the component so that the store, the
+ * routing helpers and the node itself do not form an import cycle.
+ *
+ * @internal
+ */
+interface XuiGraphNodeHandle {
+    readonly nodeId: Signal<string>;
+    readonly position: Signal<XuiGraphPoint>;
+    readonly size: Signal<XuiGraphSize>;
+    readonly locked: Signal<boolean>;
+    /** Id of the group frame this node belongs to, if any. */
+    readonly group: Signal<string | undefined>;
+    readonly element: HTMLElement;
+    moveTo(point: XuiGraphPoint): void;
+}
+/**
+ * The contract {@link XuiGraphGroup} fulfils for the store.
+ *
+ * A group owns no geometry of its own — it is sized from its members — so the
+ * store keeps only the knobs it needs in order to compute that box itself.
+ *
+ * @internal
+ */
+interface XuiGraphGroupHandle {
+    readonly groupId: Signal<string>;
+    /** Blank margin between the members' bounding box and the frame, in graph units. */
+    readonly padding: Signal<number>;
+    /** Extra room reserved above the members for the frame's title bar. */
+    readonly headerHeight: Signal<number>;
+    readonly locked: Signal<boolean>;
+}
+/**
+ * The contract {@link XuiGraphPort} fulfils for the store.
+ *
+ * @internal
+ */
+interface XuiGraphPortHandle {
+    readonly key: string;
+    readonly nodeId: Signal<string>;
+    readonly portId: Signal<string>;
+    readonly direction: Signal<XuiGraphPortDirection>;
+    readonly resolvedSide: Signal<XuiGraphPortSide>;
+    readonly dataType: Signal<string | undefined>;
+    readonly resolvedMaxConnections: Signal<number>;
+    readonly disabled: Signal<boolean>;
+    readonly resolvedColor: Signal<string>;
+    /** Connector centre relative to the owning node's top-left corner, in graph units. */
+    readonly offset: Signal<XuiGraphPoint>;
+}
+/**
+ * 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.
+ */
+declare function xuiGraphPortKey(nodeId: string, portId: string): string;
+
+/**
+ * Presentation attached to a port *data type* — the string that decides which
+ * ports may legally be wired together.
+ *
+ * Colouring by data type rather than by port is the whole point: in a shader or
+ * VFX graph the colour is how you read compatibility at a glance, so it must be
+ * declared once per type and not repeated at every call site.
+ */
+interface XuiGraphPortType {
+    /** Any CSS colour. Prefer a theme token so it follows light/dark. */
+    color: string;
+    /** Connector glyph for ports of this type. Falls back to the graph default. */
+    shape?: XuiGraphPortShape;
+    /** Human-readable name, used for the connector's tooltip. */
+    label?: string;
+}
+/**
+ * Application-wide defaults for the node graph.
+ *
+ * Provide it once at the app root to give every graph the same wiring style;
+ * individual inputs still override the configured value.
+ */
+interface XuiNodeGraphConfig {
+    routing: XuiGraphRouting;
+    background: XuiGraphBackground;
+    marker: XuiGraphMarker;
+    /** Spacing of the background rule and of `snapToGrid`, in graph units. */
+    gridSize: number;
+    /** How many minor cells make one emphasised major cell in the `grid` backdrop. */
+    gridMajorEvery: number;
+    snapToGrid: boolean;
+    minZoom: number;
+    maxZoom: number;
+    /** Multiplier applied per zoom step, both for the wheel and the zoom buttons. */
+    zoomStep: number;
+    /** Straight run out of a port before an orthogonal wire may turn. */
+    stubLength: number;
+    /** Corner rounding for `smoothstep` routing. */
+    cornerRadius: number;
+    /** Bezier slack, as a fraction of the port separation. */
+    curvature: number;
+    edgeWidth: number;
+    /** Connector diameter in graph units. */
+    portSize: number;
+    portShape: XuiGraphPortShape;
+    /** Colour for a port that declares no data type, and for edges leaving one. */
+    portColor: string;
+    /** Data-type registry. Keys are matched against a port's `dataType`. */
+    portTypes: Record<string, XuiGraphPortType>;
+    /** Whether a wire may start and end on the same node. */
+    allowSelfConnection: boolean;
+    /**
+     * Require both ends of a wire to declare the same `dataType`. A port with no
+     * declared type is a wildcard and always passes.
+     */
+    enforcePortTypes: boolean;
+}
+declare function provideXuiNodeGraphConfig(config: Partial<XuiNodeGraphConfig>): ValueProvider;
+declare function injectXuiNodeGraphConfig(): XuiNodeGraphConfig;
+/**
+ * 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']) } })
+ * ```
+ */
+declare function xuiGraphChartPortTypes(types: readonly string[]): Record<string, XuiGraphPortType>;
+
+/**
+ * The subset of the graph's inputs that the store, the nodes and the ports all
+ * need to see. Owned by {@link XuiNodeGraph}, which hands the store a signal of
+ * it rather than pushing values in from an effect.
+ *
+ * @internal
+ */
+interface XuiGraphSettings {
+    routing: XuiGraphRouting;
+    gridSize: number;
+    snapToGrid: boolean;
+    minZoom: number;
+    maxZoom: number;
+    stubLength: number;
+    cornerRadius: number;
+    curvature: number;
+    edgeWidth: number;
+    portSize: number;
+    portShape: XuiGraphPortShape;
+    portColor: string;
+    portTypes: Record<string, XuiGraphPortType>;
+    allowSelfConnection: boolean;
+    enforcePortTypes: boolean;
+    isValidConnection: XuiGraphConnectionValidator | undefined;
+    locked: boolean;
+}
+/** A wire being dragged out of a port. @internal */
+interface XuiGraphLinking {
+    /** The port the drag started at — not necessarily the source end. */
+    from: XuiGraphPortRef;
+    fromKey: string;
+    /**
+     * `true` when the drag began at an input, so the fixed end is the *target* of
+     * the connection that will be produced. Dragging backwards off an input is how
+     * every node editor lets you re-route an existing wire.
+     */
+    reversed: boolean;
+    /** Live pointer position in graph space. */
+    pointer: XuiGraphPoint;
+    /** Key of the port under the pointer, if it is a legal landing spot. */
+    hoverKey: string | null;
+}
+/** A drag in flight, with the group frames frozen as they stood when it began. @internal */
+interface XuiGraphDragState {
+    source: 'node' | 'group';
+    /** Ids of the nodes actually moving — locked ones are left out. */
+    ids: ReadonlySet<string>;
+    frames: ReadonlyMap<string, XuiGraphRect>;
+}
+/** How a port should render while a wire is being dragged. */
+type XuiGraphPortLinkState = 'idle' | 'source' | 'valid' | 'invalid';
+/** Callbacks {@link XuiNodeGraph} registers so the store can raise its outputs. @internal */
+interface XuiGraphStoreListeners {
+    connect(connection: XuiGraphConnection): void;
+    connectionDrop(drop: XuiGraphConnectionDrop): void;
+    nodeMove(move: XuiGraphNodeMove): void;
+    selectionChange(): void;
+}
+/**
+ * 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.
+ */
+declare class XuiNodeGraphStore {
+    private settingsSource;
+    private listeners;
+    private surface;
+    /** Node top-left positions captured at the start of a drag, keyed by node id. */
+    private dragOrigins;
+    private dragMoved;
+    /**
+     * 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.
+     */
+    private readonly drag;
+    /**
+     * 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.
+     */
+    private viewportSource;
+    private edgesSource;
+    private readonly ownViewport;
+    readonly viewport: Signal<XuiGraphViewport>;
+    readonly edges: Signal<readonly XuiGraphEdge[]>;
+    readonly selectedNodes: WritableSignal<ReadonlySet<string>>;
+    readonly selectedEdges: WritableSignal<ReadonlySet<string>>;
+    readonly linking: WritableSignal<XuiGraphLinking | null>;
+    /** Size of the visible canvas in screen pixels; kept current by a ResizeObserver. */
+    readonly surfaceSize: WritableSignal<{
+        width: number;
+        height: number;
+    }>;
+    private readonly nodeMap;
+    private readonly portMap;
+    private readonly groupMap;
+    readonly nodes: Signal<XuiGraphNodeHandle[]>;
+    readonly ports: Signal<XuiGraphPortHandle[]>;
+    readonly groups: Signal<XuiGraphGroupHandle[]>;
+    readonly settings: Signal<XuiGraphSettings>;
+    /** How many edges terminate at each port, keyed the same way as the registry. */
+    private readonly connectionCounts;
+    /**
+     * 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: {
+        settings: Signal<XuiGraphSettings>;
+        viewport: WritableSignal<XuiGraphViewport>;
+        edges: Signal<readonly XuiGraphEdge[]>;
+        listeners: XuiGraphStoreListeners;
+    }): void;
+    /** Writes through to whichever signal is bound as the viewport. */
+    private updateViewport;
+    /** @internal */
+    setSurface(element: HTMLElement): void;
+    /** @internal */
+    registerNode(node: XuiGraphNodeHandle): void;
+    /** @internal */
+    unregisterNode(node: XuiGraphNodeHandle): void;
+    /** @internal */
+    registerPort(port: XuiGraphPortHandle): void;
+    /** @internal */
+    unregisterPort(port: XuiGraphPortHandle): void;
+    /** @internal */
+    registerGroup(group: XuiGraphGroupHandle): void;
+    /** @internal */
+    unregisterGroup(group: XuiGraphGroupHandle): void;
+    node(nodeId: string): XuiGraphNodeHandle | undefined;
+    port(key: string): XuiGraphPortHandle | undefined;
+    /**
+     * 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: string): XuiGraphPoint | null;
+    descriptor(key: string): XuiGraphPortDescriptor | null;
+    connectionCount(key: string): number;
+    /** Client (viewport) coordinates to graph space. */
+    toGraphPoint(clientX: number, clientY: number): XuiGraphPoint;
+    /** Graph space to coordinates relative to the canvas element's top-left corner. */
+    toSurfacePoint(point: XuiGraphPoint): XuiGraphPoint;
+    /** Rounds to the nearest grid intersection when snapping is on. */
+    snap(point: XuiGraphPoint): XuiGraphPoint;
+    panBy(dx: number, dy: number): void;
+    /**
+     * 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: number, anchor?: XuiGraphPoint): void;
+    zoomBy(factor: number, anchor?: XuiGraphPoint): void;
+    /** Bounding box of every node, or `null` while the graph is empty. */
+    contentBounds(): XuiGraphRect | null;
+    /** Frame every node, leaving `padding` screen pixels of margin. */
+    fitView(padding?: number): void;
+    /** Centre the viewport on a node without changing the zoom. */
+    centerOn(nodeId: string): void;
+    isNodeSelected(nodeId: string): boolean;
+    isEdgeSelected(edgeId: string): boolean;
+    selectNode(nodeId: string, additive?: boolean): void;
+    selectEdge(edgeId: string, additive?: boolean): void;
+    setSelection(nodeIds: Iterable<string>, edgeIds?: Iterable<string>): void;
+    clearSelection(): void;
+    selectAll(): void;
+    /** Select every node whose box intersects `rect`, in graph space. */
+    selectInRect(rect: XuiGraphRect, additive?: boolean): void;
+    /** The nodes that declare themselves members of a group, in registration order. */
+    nodesInGroup(groupId: string): XuiGraphNodeHandle[];
+    /**
+     * 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: string): XuiGraphRect | null;
+    /**
+     * 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: string): XuiGraphRect | null;
+    /**
+     * 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.
+     */
+    readonly dropTargetGroups: Signal<ReadonlySet<string>>;
+    /**
+     * Innermost group frame containing a point. Smallest-first, so a frame nested
+     * inside another wins the node that lands in the overlap.
+     */
+    groupAt(point: XuiGraphPoint): string | undefined;
+    /**
+     * 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: string): void;
+    /**
+     * Drag a whole group: every member moves together, and the frame follows them
+     * because it is sized from where they are.
+     *
+     * @internal
+     */
+    beginGroupDrag(groupId: string): void;
+    private captureDrag;
+    /** Offset every dragged node from its captured origin, in graph units. */
+    dragNodesBy(delta: XuiGraphPoint): void;
+    /** Ends the drag and raises `nodeMove`. Returns whether anything actually moved. */
+    endNodeDrag(): boolean;
+    /** @internal */
+    beginLink(port: XuiGraphPortHandle, pointer: XuiGraphPoint): void;
+    /** @internal */
+    moveLink(pointer: XuiGraphPoint): void;
+    /** @internal */
+    setLinkHover(key: string | null): void;
+    /**
+     * 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: string | null): void;
+    /** Resolve which end of a dragged wire is the source. */
+    private orient;
+    /**
+     * 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: string): XuiGraphPortLinkState;
+    /**
+     * 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: XuiGraphConnection): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiNodeGraphStore, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<XuiNodeGraphStore>;
+}
+/**
+ * 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.
+ */
+declare function injectXuiNodeGraphStore(): XuiNodeGraphStore;
+
+/**
+ * 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.
+ */
+declare class XuiGraphControls {
+    private readonly config;
+    protected readonly store: XuiNodeGraphStore;
+    protected readonly step: number;
+    protected readonly buttonClass: string;
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    readonly showFit: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly showZoomLevel: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Lay the buttons out in a row rather than a column. */
+    readonly horizontal: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    protected readonly zoomPercent: _angular_core.Signal<number>;
+    protected readonly computedClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiGraphControls, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiGraphControls, "xui-graph-controls", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "showFit": { "alias": "showFit"; "required": false; "isSignal": true; }; "showZoomLevel": { "alias": "showZoomLevel"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class XuiGraphGroup implements XuiGraphGroupHandle, OnInit {
+    private readonly store;
+    private readonly element;
+    private readonly dragOrigin;
+    /** Matches the `group` input on the nodes that belong to this frame. */
+    readonly groupId: _angular_core.InputSignal<string>;
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    readonly label: _angular_core.InputSignal<string>;
+    /** Border and title colour; a tint of it fills the frame. Any CSS colour. */
+    readonly color: _angular_core.InputSignal<string>;
+    /** Blank margin between the members' bounding box and the frame. */
+    readonly padding: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    readonly selectable: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly draggable: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Pins the frame and everything in it. */
+    readonly locked: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * `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.
+     */
+    readonly dragHandle: _angular_core.InputSignal<"group" | "header">;
+    /**
+     * @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.
+     */
+    readonly headerHeight: _angular_core.Signal<0 | 26>;
+    /**
+     * 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.
+     */
+    readonly bounds: _angular_core.Signal<_xui_node_graph.XuiGraphRect | null>;
+    /** `true` while a dragged node hovers over this frame and would land in it. */
+    readonly dropTarget: _angular_core.Signal<boolean>;
+    readonly members: _angular_core.Signal<string[]>;
+    /** A frame reads as selected only when its whole membership is. */
+    readonly selected: _angular_core.Signal<boolean>;
+    protected readonly immovable: _angular_core.Signal<boolean>;
+    protected readonly transform: _angular_core.Signal<string | null>;
+    protected readonly cursor: _angular_core.Signal<"grabbing" | "grab" | null>;
+    protected readonly background: _angular_core.Signal<string>;
+    protected readonly computedClass: _angular_core.Signal<string>;
+    constructor();
+    ngOnInit(): void;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiGraphGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiGraphGroup, "xui-graph-group", never, { "groupId": { "alias": "groupId"; "required": true; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "locked": { "alias": "locked"; "required": false; "isSignal": true; }; "dragHandle": { "alias": "dragHandle"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class XuiGraphMinimap {
+    private readonly store;
+    private readonly element;
+    private dragging;
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    /** Blank margin around the content, in graph units. */
+    readonly padding: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    protected readonly nodes: _angular_core.Signal<{
+        id: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        selected: boolean;
+    }[]>;
+    /**
+     * 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.
+     */
+    private readonly extent;
+    protected readonly viewportRect: _angular_core.Signal<XuiGraphRect | null>;
+    protected readonly viewBox: _angular_core.Signal<string>;
+    /** Keep hairlines and corners visually constant however far the extent zooms out. */
+    private readonly unitScale;
+    protected readonly strokeWidth: _angular_core.Signal<number>;
+    protected readonly cornerRadius: _angular_core.Signal<number>;
+    protected readonly computedClass: _angular_core.Signal<string>;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    /**
+     * 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.
+     */
+    private centerOnPointer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiGraphMinimap, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiGraphMinimap, "xui-graph-minimap", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class XuiGraphPort implements XuiGraphPortHandle, OnInit {
+    private readonly store;
+    private readonly node;
+    private readonly document;
+    private readonly connectorRef;
+    private readonly offsetState;
+    /**
+     * Registry identity. Empty until `ngOnInit`, because a required input is not
+     * readable during construction.
+     */
+    key: string;
+    /** Unique within the owning node — the node id supplies the rest of the identity. */
+    readonly portId: _angular_core.InputSignal<string>;
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    /**
+     * 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.
+     */
+    readonly direction: _angular_core.InputSignal<XuiGraphPortDirection>;
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * 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.
+     */
+    readonly dataType: _angular_core.InputSignal<string | undefined>;
+    /** Overrides the colour inherited from {@link dataType}. */
+    readonly color: _angular_core.InputSignal<string | undefined>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Which node edge the connector sits on. Leave unset to take it from
+     * {@link direction} — inputs on the left, outputs on the right.
+     */
+    readonly side: _angular_core.InputSignal<XuiGraphPortSide | undefined>;
+    readonly shape: _angular_core.InputSignal<XuiGraphPortShape | undefined>;
+    /**
+     * 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.
+     */
+    readonly maxConnections: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    readonly nodeId: _angular_core.Signal<string>;
+    readonly resolvedSide: _angular_core.Signal<XuiGraphPortSide>;
+    readonly resolvedMaxConnections: _angular_core.Signal<number>;
+    /** Connector centre relative to the node's top-left corner, in graph units. */
+    readonly offset: _angular_core.Signal<XuiGraphPoint>;
+    readonly resolvedColor: _angular_core.Signal<string>;
+    protected readonly resolvedShape: _angular_core.Signal<XuiGraphPortShape>;
+    protected readonly horizontal: _angular_core.Signal<boolean>;
+    private readonly size;
+    protected readonly connectorWidth: _angular_core.Signal<number>;
+    protected readonly connectorHeight: _angular_core.Signal<number>;
+    protected readonly connected: _angular_core.Signal<boolean>;
+    protected readonly linkState: _angular_core.Signal<_xui_node_graph.XuiGraphPortLinkState>;
+    /** Position among the ports sharing this side; drives rails and column rows. */
+    private readonly indexOnSide;
+    private readonly countOnSide;
+    /**
+     * 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.
+     */
+    protected readonly railOffset: _angular_core.Signal<number | null>;
+    protected readonly order: _angular_core.Signal<1 | 0 | null>;
+    protected readonly gridColumn: _angular_core.Signal<2 | 1 | null>;
+    protected readonly gridRow: _angular_core.Signal<number | null>;
+    protected readonly tooltip: _angular_core.Signal<string | null>;
+    protected readonly ariaLabel: _angular_core.Signal<string>;
+    protected readonly computedClass: _angular_core.Signal<string>;
+    protected readonly connectorClass: _angular_core.Signal<string>;
+    constructor();
+    ngOnInit(): void;
+    private measure;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    /**
+     * 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.
+     */
+    protected onKeydown(event: KeyboardEvent): void;
+    /**
+     * 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.
+     */
+    private portKeyAt;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiGraphPort, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiGraphPort, "xui-graph-port", never, { "portId": { "alias": "portId"; "required": true; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "dataType": { "alias": "dataType"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "maxConnections": { "alias": "maxConnections"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare const graphNodeVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    locked?: boolean | null | undefined;
+    dimmed?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type XuiGraphNodeVariants = VariantProps<typeof graphNodeVariants>;
+/**
+ * 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.
+ */
+declare class XuiGraphNode implements XuiGraphNodeHandle, OnInit {
+    private readonly store;
+    private readonly sizeState;
+    private readonly layoutEpochState;
+    private dragOrigin;
+    /** Host element. Ports measure their connector offsets against this box. */
+    readonly element: HTMLElement;
+    /** Identifies the node to edges and to the selection. Must be stable and unique. */
+    readonly nodeId: _angular_core.InputSignal<string>;
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    /** Top-left corner in graph space. Two-way bound so the host owns the value. */
+    readonly position: _angular_core.ModelSignal<XuiGraphPoint>;
+    readonly label: _angular_core.InputSignal<string>;
+    /** Fixed width in graph units. Leave unset to size to content. */
+    readonly width: _angular_core.InputSignalWithTransform<number | undefined, NumberInput>;
+    /**
+     * 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.
+     */
+    readonly accent: _angular_core.InputSignal<string | undefined>;
+    /**
+     * 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.
+     */
+    readonly group: _angular_core.InputSignal<string | undefined>;
+    /** Arrangement of the port rows. */
+    readonly portLayout: _angular_core.InputSignal<XuiGraphPortLayout>;
+    /**
+     * Hides the body and pulls every connector onto the header, so a finished
+     * subtree can be folded away without breaking its wiring.
+     */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly selectable: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly draggable: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Pins the node in place while leaving it selectable. */
+    readonly locked: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Restrict dragging to the header, as a window manager does. */
+    readonly dragHandle: _angular_core.InputSignal<"node" | "header">;
+    /** Renders the node faded — for a disabled branch or a bypassed effect. */
+    readonly dimmed: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Double-click on the header. The usual gesture for entering a subgraph. */
+    readonly activated: _angular_core.OutputEmitterRef<void>;
+    /** Measured border-box size in graph units, from a ResizeObserver. */
+    readonly size: _angular_core.Signal<XuiGraphSize>;
+    /** @internal Bumped on reflow so ports know to re-measure. */
+    readonly layoutEpoch: _angular_core.Signal<number>;
+    /** @internal Ports in DOM order, for side-relative indexing. */
+    readonly portSlots: _angular_core.Signal<readonly XuiGraphPort[]>;
+    readonly selected: _angular_core.Signal<boolean>;
+    protected readonly immovable: _angular_core.Signal<boolean>;
+    protected readonly transform: _angular_core.Signal<string>;
+    protected readonly dragCursor: _angular_core.Signal<"grab" | null>;
+    protected readonly computedClass: _angular_core.Signal<string>;
+    protected readonly headerClass: _angular_core.Signal<string>;
+    protected readonly portsClass: _angular_core.Signal<string>;
+    constructor();
+    ngOnInit(): void;
+    /** @internal Called by the store while dragging a selection. */
+    moveTo(point: XuiGraphPoint): void;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    protected onHeaderDoubleClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiGraphNode, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiGraphNode, "xui-graph-node", never, { "nodeId": { "alias": "nodeId"; "required": true; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "accent": { "alias": "accent"; "required": false; "isSignal": true; }; "group": { "alias": "group"; "required": false; "isSignal": true; }; "portLayout": { "alias": "portLayout"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "locked": { "alias": "locked"; "required": false; "isSignal": true; }; "dragHandle": { "alias": "dragHandle"; "required": false; "isSignal": true; }; "dimmed": { "alias": "dimmed"; "required": false; "isSignal": true; }; }, { "position": "positionChange"; "collapsed": "collapsedChange"; "activated": "activated"; }, ["portSlots"], ["xui-graph-node-header", "xui-graph-node-actions", "xui-graph-node-preview", "xui-graph-port", "*"], true, never>;
+}
+
+/**
+ * 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>
+ * ```
+ */
+declare class XuiGraphNodeHeader {
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    protected readonly computedClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiGraphNodeHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiGraphNodeHeader, "xui-graph-node-header", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/** Trailing controls in a node header — a menu button, a toggle, a status dot. */
+declare class XuiGraphNodeActions {
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    protected readonly computedClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiGraphNodeActions, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiGraphNodeActions, "xui-graph-node-actions", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * 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.
+ */
+declare class XuiGraphNodePreview {
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    protected readonly computedClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiGraphNodePreview, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiGraphNodePreview, "xui-graph-node-preview", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * 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>
+ * ```
+ */
+declare class XuiGraphOverlay {
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    protected readonly computedClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiGraphOverlay, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiGraphOverlay, "xui-graph-overlay", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * 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.
+ */
+declare class XuiGraphNoDrag {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiGraphNoDrag, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<XuiGraphNoDrag, "[xuiGraphNoDrag]", never, {}, {}, never, never, true, never>;
+}
+
+/** Everything the template needs to draw one wire. */
+interface RenderedEdge {
+    edge: XuiGraphEdge;
+    d: string;
+    color: string;
+    width: number;
+    selected: boolean;
+    dashArray: string | null;
+    animated: boolean;
+    markerId: string | null;
+    label: string | null;
+    labelPosition: XuiGraphPoint;
+}
+/**
+ * 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.
+ */
+declare class XuiNodeGraph {
+    private readonly config;
+    private readonly element;
+    private readonly uid;
+    /** Pointer position where the current gesture began, in client coordinates. */
+    private gestureOrigin;
+    private gesture;
+    private gestureMoved;
+    private readonly marqueeState;
+    /** The store for this canvas. Use it to drive the view from a host component. */
+    readonly store: XuiNodeGraphStore;
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    /** The wires to draw. Never mutated — see `connect`. */
+    readonly edges: _angular_core.InputSignal<readonly XuiGraphEdge[]>;
+    /** Pan and zoom. Two-way bindable, so a host can save and restore the view. */
+    readonly viewport: _angular_core.ModelSignal<XuiGraphViewport>;
+    readonly routing: _angular_core.InputSignal<XuiGraphRouting>;
+    readonly background: _angular_core.InputSignal<XuiGraphBackground>;
+    readonly marker: _angular_core.InputSignal<XuiGraphMarker>;
+    readonly gridSize: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    readonly snapToGrid: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly minZoom: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    readonly maxZoom: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    readonly edgeWidth: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    readonly portSize: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    readonly portShape: _angular_core.InputSignal<XuiGraphPortShape>;
+    readonly portColor: _angular_core.InputSignal<string>;
+    /** Data-type registry: colour, glyph and label per `dataType`. */
+    readonly portTypes: _angular_core.InputSignal<Record<string, XuiGraphPortType>>;
+    readonly allowSelfConnection: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly enforcePortTypes: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Last say on whether a connection may be made. Runs after the built-in rules. */
+    readonly isValidConnection: _angular_core.InputSignal<XuiGraphConnectionValidator | undefined>;
+    /** Read-only canvas: pan and zoom still work, editing does not. */
+    readonly locked: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Dragging empty canvas pans. Turn it off to make dragging a marquee select instead. */
+    readonly panOnDrag: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * `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.
+     */
+    readonly zoomActivation: _angular_core.InputSignal<"wheel" | "ctrl-wheel">;
+    readonly zoomOnScroll: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** A connection that passed every rule. The host decides whether to add it. */
+    readonly connect: _angular_core.OutputEmitterRef<XuiGraphConnection>;
+    /** A wire dropped on empty canvas — the hook for "drag out to create a node". */
+    readonly connectionDrop: _angular_core.OutputEmitterRef<XuiGraphConnectionDrop>;
+    readonly edgeClick: _angular_core.OutputEmitterRef<XuiGraphEdge>;
+    /** Fired once per drag, when the pointer is released. */
+    readonly nodeMove: _angular_core.OutputEmitterRef<XuiGraphNodeMove>;
+    readonly selectionChange: _angular_core.OutputEmitterRef<{
+        nodes: string[];
+        edges: string[];
+    }>;
+    /** Delete or Backspace over the canvas. The host performs the removal. */
+    readonly deleteSelection: _angular_core.OutputEmitterRef<{
+        nodes: string[];
+        edges: string[];
+    }>;
+    readonly canvasContextMenu: _angular_core.OutputEmitterRef<{
+        event: MouseEvent;
+        position: XuiGraphPoint;
+    }>;
+    protected readonly Math: Math;
+    protected readonly arrowId: string;
+    protected readonly arrowClosedId: string;
+    protected readonly dotId: string;
+    protected readonly marqueeRect: _angular_core.Signal<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null>;
+    private readonly settings;
+    private readonly routeOptions;
+    protected readonly canvasTransform: _angular_core.Signal<string>;
+    protected readonly renderedEdges: _angular_core.Signal<RenderedEdge[]>;
+    /** The wire that follows the pointer while a connection is being drawn. */
+    protected readonly linkPreview: _angular_core.Signal<{
+        d: string;
+        color: string;
+    } | null>;
+    protected readonly backgroundImage: _angular_core.Signal<string | null>;
+    protected readonly backgroundSize: _angular_core.Signal<string>;
+    protected readonly backgroundPosition: _angular_core.Signal<string>;
+    protected readonly computedClass: _angular_core.Signal<string>;
+    constructor();
+    /** Frame every node, leaving `padding` screen pixels of margin. */
+    fitView(padding?: number): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    /** Return to 1:1 without moving the centre of the view. */
+    resetZoom(): void;
+    private markerUrl;
+    protected onEdgePointerDown(edge: XuiGraphEdge, event: PointerEvent): void;
+    /**
+     * 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.
+     */
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    protected onWheel(event: WheelEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onContextMenu(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiNodeGraph, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiNodeGraph, "xui-node-graph", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "edges": { "alias": "edges"; "required": false; "isSignal": true; }; "viewport": { "alias": "viewport"; "required": false; "isSignal": true; }; "routing": { "alias": "routing"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "marker": { "alias": "marker"; "required": false; "isSignal": true; }; "gridSize": { "alias": "gridSize"; "required": false; "isSignal": true; }; "snapToGrid": { "alias": "snapToGrid"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "edgeWidth": { "alias": "edgeWidth"; "required": false; "isSignal": true; }; "portSize": { "alias": "portSize"; "required": false; "isSignal": true; }; "portShape": { "alias": "portShape"; "required": false; "isSignal": true; }; "portColor": { "alias": "portColor"; "required": false; "isSignal": true; }; "portTypes": { "alias": "portTypes"; "required": false; "isSignal": true; }; "allowSelfConnection": { "alias": "allowSelfConnection"; "required": false; "isSignal": true; }; "enforcePortTypes": { "alias": "enforcePortTypes"; "required": false; "isSignal": true; }; "isValidConnection": { "alias": "isValidConnection"; "required": false; "isSignal": true; }; "locked": { "alias": "locked"; "required": false; "isSignal": true; }; "panOnDrag": { "alias": "panOnDrag"; "required": false; "isSignal": true; }; "zoomActivation": { "alias": "zoomActivation"; "required": false; "isSignal": true; }; "zoomOnScroll": { "alias": "zoomOnScroll"; "required": false; "isSignal": true; }; }, { "viewport": "viewportChange"; "connect": "connect"; "connectionDrop": "connectionDrop"; "edgeClick": "edgeClick"; "nodeMove": "nodeMove"; "selectionChange": "selectionChange"; "deleteSelection": "deleteSelection"; "canvasContextMenu": "canvasContextMenu"; }, never, ["*", "xui-graph-overlay, xui-graph-controls, xui-graph-minimap"], true, never>;
+}
+
+declare function xuiGraphPortNormal(side: XuiGraphPortSide): XuiGraphPoint;
+interface XuiGraphRouteOptions {
+    /**
+     * How far a wire runs straight out of a port before it may turn, in graph
+     * units. Keeps the first segment perpendicular to the node edge, which is what
+     * makes a schematic readable.
+     */
+    stubLength: number;
+    /** Corner rounding for `smoothstep`, in graph units. */
+    cornerRadius: number;
+    /**
+     * Bezier control-point pull as a fraction of the port-to-port distance along
+     * the port normal. `0` degenerates to a straight line; ~0.5 matches the slack
+     * of a real cable.
+     */
+    curvature: number;
+}
+declare const XUI_GRAPH_DEFAULT_ROUTE_OPTIONS: XuiGraphRouteOptions;
+/**
+ * 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.
+ */
+declare function xuiGraphEdgePath(source: XuiGraphPoint, sourceSide: XuiGraphPortSide, target: XuiGraphPoint, targetSide: XuiGraphPortSide, routing: XuiGraphRouting, options?: XuiGraphRouteOptions): string;
+/**
+ * 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.
+ */
+declare function xuiGraphEdgeMidpoint(source: XuiGraphPoint, sourceSide: XuiGraphPortSide, target: XuiGraphPoint, targetSide: XuiGraphPortSide, routing: XuiGraphRouting, options?: XuiGraphRouteOptions): XuiGraphPoint;
+
+declare const XuiNodeGraphImports: readonly [typeof XuiNodeGraph, typeof XuiGraphNode, typeof XuiGraphPort, typeof XuiGraphGroup, typeof XuiGraphControls, typeof XuiGraphMinimap, typeof XuiGraphNodeHeader, typeof XuiGraphNodeActions, typeof XuiGraphNodePreview, typeof XuiGraphNoDrag, typeof XuiGraphOverlay];
+
+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 };
+export type { XuiGraphBackground, XuiGraphConnection, XuiGraphConnectionContext, XuiGraphConnectionDrop, XuiGraphConnectionValidator, XuiGraphDragState, XuiGraphEdge, XuiGraphGroupHandle, XuiGraphLinking, XuiGraphMarker, XuiGraphNodeHandle, XuiGraphNodeMove, XuiGraphNodeMoved, XuiGraphNodeVariants, XuiGraphPoint, XuiGraphPortDescriptor, XuiGraphPortDirection, XuiGraphPortHandle, XuiGraphPortLayout, XuiGraphPortLinkState, XuiGraphPortRef, XuiGraphPortShape, XuiGraphPortSide, XuiGraphPortType, XuiGraphRect, XuiGraphRouteOptions, XuiGraphRouting, XuiGraphSettings, XuiGraphSize, XuiGraphStoreListeners, XuiGraphViewport, XuiNodeGraphConfig };