@ixfx/components 0.16.5 → 0.17.1

package/dist/index-Cn0qsz9a.d.ts

@@ -0,0 +1,1632 @@
+import { a as ViewStateBase, o as ViewStateChangeDetail, t as GetViewStateOptions } from "./types-16GC5k1z.js";
+import "./icon-Bhz0c6Yf.js";
+import "./menu-item-DJhaWy9z.js";
+import "./index-Cdcek1Oj.js";
+import { LitElement, PropertyValues, ReactiveController, ReactiveControllerHost } from "lit";
+import { Graphs } from "@ixfx/collections";
+/** Direction a port faces: `in` receives wires, `out` sends them. */
+type PortDir = `in` | `out`;
+/**
+ * Which way a wire leaves a port. Nested ports (not on the node rails) may
+ * override it with the `side` attribute; it defaults from {@link PortDir}.
+ */
+type PortSide = `left` | `right` | `top` | `bottom`;
+/**
+ * Identifies one end of a wire: a port `key` on the node with the given `key`.
+ * Both keys are author-chosen, so two graphs on one page never collide.
+ */
+type PortRef = {
+  readonly node: string;
+  readonly port: string;
+};
+/**
+ * A wire between two ports. `from` is always an `out` port and `to` always an
+ * `in` port (normalised — a wire dragged backwards from an `in` port commits
+ * in this orientation). The id is deterministic (see `edgeId`), so edges stay
+ * plain immutable data.
+ */
+type GraphEdge = {
+  /** `edgeId(from, to)` — e.g. `osc/out->amp/in` (with keys escaped). */
+  readonly id: string;
+  /** Source: always an `out` port. */
+  readonly from: PortRef;
+  /** Destination: always an `in` port. */
+  readonly to: PortRef;
+};
+/**
+ * Pan/zoom state. `x` / `y` are the translation applied to the viewport layer
+ * (screen px), `zoom` the scale factor.
+ */
+type Viewport = {
+  readonly x: number;
+  readonly y: number;
+  readonly zoom: number;
+};
+/** A point in some coordinate space (flow, screen, node-relative — by context). */
+type Point = {
+  readonly x: number;
+  readonly y: number;
+};
+/** Everything the connect rules need to know about a port. */
+type PortInfo = {
+  readonly ref: PortRef;
+  readonly dir: PortDir;
+  /** Compatibility tag. Empty or `*` matches anything. */
+  readonly type: string;
+  /** Maximum connections. `in` defaults to 1, `out` to unlimited. */
+  readonly max: number;
+  /** Wire tangent at this port. */
+  readonly side: PortSide;
+  /** Human-visible name (`ref.port` is the unique key). */
+  readonly label?: string;
+  /** Optional longer explanation. */
+  readonly description?: string;
+};
+/** Plain-JSON snapshot of the whole editor state. See `NodeGraphElement.getGraph()`. */
+type GraphSnapshot = {
+  readonly nodes: ReadonlyArray<{
+    readonly key: string;
+    readonly x: number;
+    readonly y: number;
+    readonly label: string;
+    readonly ports: readonly PortInfo[];
+  }>;
+  readonly edges: readonly GraphEdge[];
+};
+/** Why a connection was rejected by the built-in rules. */
+type ConnectionCheckReason = `same-dir` | `self` | `type` | `max` | `duplicate` | `cycle` | `custom`;
+/**
+ * Result of the built-in connection rules. `ok: true` may carry an edge that
+ * the new wire replaces (an `in` port at `max === 1`).
+ */
+type ConnectionCheck = {
+  readonly ok: true;
+  readonly replaces?: GraphEdge;
+} | {
+  readonly ok: false;
+  readonly reason: ConnectionCheckReason;
+};
+/**
+ * Extra veto hook, on top of the built-in rules. Return `false` to reject.
+ * `graph` is the port graph as it stands when the check runs.
+ */
+type IsValidConnection = (from: PortInfo, to: PortInfo, graph: Graphs.Directed.DirectedGraph) => boolean;
+/** A single node position change. */
+type NodeMove = {
+  readonly key: string;
+  readonly x: number;
+  readonly y: number;
+};
+type GraphConnectDetail = {
+  readonly edge: GraphEdge;
+  /** Existing wire the new one replaces (`in` port at `max === 1`). */
+  readonly replaces?: GraphEdge;
+};
+type GraphConnectEvent = CustomEvent<GraphConnectDetail>;
+type DisconnectReason = `delete` | `detach` | `replace` | `api`;
+type GraphDisconnectDetail = {
+  readonly edges: readonly GraphEdge[];
+  readonly reason: DisconnectReason;
+};
+type GraphDisconnectEvent = CustomEvent<GraphDisconnectDetail>;
+/** A wire was dropped on empty space — the consumer may open a "create node" menu. */
+type GraphConnectEndDetail = {
+  readonly from: PortRef;
+  /** Drop point in flow coordinates. */
+  readonly point: Point;
+  /** Drop point in client coordinates. */
+  readonly client: Point;
+};
+type GraphConnectEndEvent = CustomEvent<GraphConnectEndDetail>;
+type GraphDeleteDetail = {
+  /** Every node being deleted, including the children of a deleted group. */
+  readonly nodes: readonly string[];
+  readonly edges: readonly GraphEdge[];
+  /** Wires added to keep the flow connected through deleted nodes (`bridge-on-delete`). Cancel the event to veto them all. */
+  readonly bridged: readonly GraphEdge[];
+};
+type GraphDeleteEvent = CustomEvent<GraphDeleteDetail>;
+type GraphNodeMoveDetail = {
+  readonly moves: readonly NodeMove[];
+};
+type GraphNodeMoveEvent = CustomEvent<GraphNodeMoveDetail>;
+type GraphNodeMovedEvent = CustomEvent<GraphNodeMoveDetail>;
+/** A node was resized (`graph-node-resize` while dragging, `graph-node-resized` on release). `x` / `y` are relative to its parent. */
+type GraphNodeResizeDetail = {
+  readonly key: string;
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+};
+type GraphNodeResizeEvent = CustomEvent<GraphNodeResizeDetail>;
+/** A port was added (`available`) or hidden away (`potential`) by the user. */
+type GraphPortChangeDetail = {
+  readonly node: string;
+  readonly port: string;
+  readonly dir: `in` | `out`;
+  readonly availability: `available` | `potential`;
+};
+type GraphPortChangeEvent = CustomEvent<GraphPortChangeDetail>;
+/** A node was collapsed to its title bar or expanded (bubbles from the node). */
+type GraphNodeCollapseDetail = {
+  readonly key: string;
+  readonly collapsed: boolean;
+};
+type GraphNodeCollapseEvent = CustomEvent<GraphNodeCollapseDetail>;
+/**
+ * The user double-clicked a node's title bar (not one of its controls). Cancelable: with the graph's
+ * `dblclick-toggle` on, `preventDefault()` stops the node collapsing or expanding.
+ */
+type GraphNodeTitleDblclickDetail = {
+  readonly key: string;
+  /** Whether the node was collapsed when it was double-clicked. */
+  readonly collapsed: boolean;
+};
+type GraphNodeTitleDblclickEvent = CustomEvent<GraphNodeTitleDblclickDetail>;
+/** A node made by `nodeFactory` was added (`connectedTo` is the port it was wired to). */
+type GraphNodeAddedDetail = {
+  readonly key: string;
+  readonly from: PortRef;
+  readonly connectedTo?: PortRef;
+};
+type GraphNodeAddedEvent = CustomEvent<GraphNodeAddedDetail>;
+/** Right-click on a node, wire or the background. Cancel it to suppress the menu. */
+type GraphContextMenuDetail = {
+  readonly kind: `node` | `edge` | `pane` | `port`;
+  /** Node key (`kind: 'node'`), wire id (`kind: 'edge'`) or `node/port` (`kind: 'port'`). */
+  readonly id?: string;
+  readonly client: Point;
+  readonly point: Point;
+};
+type GraphContextMenuEvent = CustomEvent<GraphContextMenuDetail>;
+type GraphSelectionChangeDetail = {
+  readonly nodes: readonly string[];
+  readonly edges: readonly string[];
+};
+type GraphSelectionChangeEvent = CustomEvent<GraphSelectionChangeDetail>;
+type GraphViewportChangeEvent = CustomEvent<Viewport>;
+type GraphEdgesChangeDetail = {
+  readonly edges: readonly GraphEdge[];
+  /** The new port graph, for consumers keeping an immutable history (undo). */
+  readonly graph: Graphs.Directed.DirectedGraph;
+};
+type GraphEdgesChangeEvent = CustomEvent<GraphEdgesChangeDetail>;
+/** Internal, non-composed event `ixfx-graph-node` fires when its geometry may have changed. */
+type GraphNodeGeometryDetail = {
+  readonly key: string;
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+};
+type GraphNodeGeometryEvent = CustomEvent<GraphNodeGeometryDetail>;
+interface NodeGraphElementEventMap {
+  'graph-connect': GraphConnectEvent;
+  'graph-disconnect': GraphDisconnectEvent;
+  'graph-connect-end': GraphConnectEndEvent;
+  'graph-delete': GraphDeleteEvent;
+  'graph-node-move': GraphNodeMoveEvent;
+  'graph-node-moved': GraphNodeMovedEvent;
+  'graph-node-resize': GraphNodeResizeEvent;
+  'graph-node-resized': GraphNodeResizeEvent;
+  'graph-node-collapse': GraphNodeCollapseEvent;
+  'graph-node-title-dblclick': GraphNodeTitleDblclickEvent;
+  'graph-port-change': GraphPortChangeEvent;
+  'graph-node-added': GraphNodeAddedEvent;
+  'graph-context-menu': GraphContextMenuEvent;
+  'graph-selection-change': GraphSelectionChangeEvent;
+  'graph-viewport-change': GraphViewportChangeEvent;
+  'graph-edges-change': GraphEdgesChangeEvent;
+  'view-state-change': CustomEvent<ViewStateChangeDetail>;
+}
+/** View state for `ixfx-node-graph`: viewport transform plus selection. */
+type NodeGraphViewState = ViewStateBase & {
+  readonly viewport?: {
+    readonly x: number;
+    readonly y: number;
+    readonly zoom: number;
+  };
+  /** Selected wire ids (`GraphEdge.id`). */
+  readonly edges?: readonly string[];
+};
+/** A pointer gesture owning the current drag (pan, node drag, wire drag, marquee, resize). */
+interface PointerGesture {
+  onPointerMove: (e: PointerEvent) => void;
+  /** Returns `true` to keep the gesture alive (e.g. a multi-pointer pinch). */
+  onPointerUp: (e: PointerEvent) => boolean;
+  onPointerCancel: (e: PointerEvent) => boolean;
+  addPointer?: (e: PointerEvent) => void;
+}
+/**
+ * Vertex id of a port in the port graph: node and port joined by `/`,
+ * with `\` and `/` in the keys escaped. Use `parsePortId` to reverse it —
+ * never hand-parse ids.
+ */
+declare function portId(ref: PortRef): string;
+/** Reverse of `portId`. Returns `undefined` for ids without a separator. */
+declare function parsePortId(id: string): PortRef | undefined;
+/** Deterministic edge id: `${portId(from)}->${portId(to)}`. */
+declare function edgeId(from: PortRef, to: PortRef): string;
+/** All the port vertices that exist as ids, whether or not they have wires. */
+declare function ensurePort(g: Graphs.Directed.DirectedGraph, ref: PortRef): Graphs.Directed.DirectedGraph;
+/** Adds a wire `from → to` (out port → in port), creating port vertices as needed. */
+declare function addWire(g: Graphs.Directed.DirectedGraph, from: PortRef, to: PortRef): Graphs.Directed.DirectedGraph;
+/** Removes the wire `from → to`, if present. Exact, because vertices are ports. */
+declare function removeWire(g: Graphs.Directed.DirectedGraph, from: PortRef, to: PortRef): Graphs.Directed.DirectedGraph;
+/**
+ * Removes every port of a node (with their wires), keeping the node itself —
+ * the element may come back. `portKeys` is the set of port keys the node had.
+ */
+declare function removeNode(g: Graphs.Directed.DirectedGraph, nodeKey: string, portKeys: readonly string[]): Graphs.Directed.DirectedGraph;
+/** Builds a fresh port graph from a plain edge array, in one mutation pass. */
+declare function fromEdges(edges: readonly GraphEdge[]): Graphs.Directed.DirectedGraph;
+/**
+ * Derives the public edge view from a port graph. Every graph edge runs out →
+ * in by construction; ids are recomputed deterministically.
+ */
+declare function toEdges(g: Graphs.Directed.DirectedGraph): GraphEdge[];
+/**
+ * Collapses a port graph to node keys. Every node key that has a port in the
+ * port graph appears as a vertex, and parallel wires between the same node
+ * pair collapse to one edge.
+ *
+ * Ports only become vertices of the port graph once they are wired, so a node
+ * with no wires is invisible to `g`. Pass `nodeKeys` (every node that exists)
+ * to include those isolated nodes too.
+ */
+declare function toNodeGraph(g: Graphs.Directed.DirectedGraph, nodeKeys?: Iterable<string>): Graphs.Directed.DirectedGraph;
+/**
+ * Per-drag context for the connection rules. Computed once when a wire drag
+ * starts so each candidate port is O(1) to check.
+ */
+type ConnectContext = {
+  /**
+   * The port graph with every edge reversed: the in-degree of an `in` port is
+   * `vertex.out.length` in this graph, read in O(1).
+   */
+  readonly transposed: Graphs.Directed.DirectedGraph;
+  /**
+   * With `acyclic` set: node keys that the dragged wire may not connect into
+   * (the source node itself, plus its ancestors or descendants depending on
+   * drag direction). Only computed when `acyclic` is on; otherwise empty.
+   */
+  readonly blockedNodes: ReadonlySet<string>;
+};
+/**
+ * Context for one wire drag. `anchor` is the port the drag started from and
+ * `forward` is `true` when the anchor is an `out` port (a normal forward
+ * wire) — cycle blocking then uses the anchor's ancestors. For a wire dragged
+ * backwards from an `in` port, candidates are `out` ports, so blocking uses
+ * the anchor's descendants instead.
+ */
+declare function connectContext(portGraph: Graphs.Directed.DirectedGraph, nodeGraph: Graphs.Directed.DirectedGraph, anchor: PortRef, forward: boolean, acyclic: boolean): ConnectContext;
+/**
+ * Node keys that must not be the target of a new wire from `nodeKey`.
+ * Forward (the target reads from us): its ancestors plus itself.
+ * Backward (we read from the target): its descendants plus itself.
+ */
+declare function cycleBlockedNodes(nodeGraph: Graphs.Directed.DirectedGraph, nodeKey: string, forward: boolean): Set<string>;
+/** Number of wires arriving at an `in` port, read in O(1) from a transposed graph. */
+declare function inDegreeOf(transposed: Graphs.Directed.DirectedGraph, ref: PortRef): number;
+/** Number of wires leaving an `out` port, read in O(1). */
+declare function outDegreeOf(g: Graphs.Directed.DirectedGraph, ref: PortRef): number;
+/** True when the exact wire `from → to` already exists. */
+declare function hasWire(g: Graphs.Directed.DirectedGraph, from: PortRef, to: PortRef): boolean;
+/**
+ * The single wire currently arriving at an `in` port, if any — the edge an
+ * `in` port at `max === 1` would replace.
+ */
+declare function incomingEdge(transposed: Graphs.Directed.DirectedGraph, ref: PortRef): GraphEdge | undefined;
+/** All wires arriving at an `in` port (for `max > 1` ports). */
+declare function incomingEdges(g: Graphs.Directed.DirectedGraph, ref: PortRef): GraphEdge[];
+/**
+ * Pure connection rules for the wire drag and the `connect()` API.
+ *
+ * All checks take a {@link ConnectContext} (computed once per drag) and the
+ * working* port graph — the graph the drag commits into. During a detach
+ * the picked-up wire is removed from the working graph first, so the rules
+ * naturally ignore it.
+ */
+type ConnectionRulesOptions = {
+  /** Allow both ends on the same node. Default `false`. */
+  readonly allowSelf: boolean;
+  /** Reject connections that would create a (node-level) cycle. Default `false`. */
+  readonly acyclic: boolean;
+  /** Extra consumer veto, checked last. */
+  readonly isValidConnection?: IsValidConnection;
+};
+/** Port types are compatible when equal, or either side is empty or `*` (matches anything). */
+declare function typesCompatible(a: string, b: string): boolean;
+/**
+ * Normalises an (unordered) pair of ports to out → in. Returns `undefined`
+ * when both ports face the same direction — no wire is possible.
+ */
+declare function normaliseConnection(a: PortInfo, b: PortInfo): {
+  readonly from: PortInfo;
+  readonly to: PortInfo;
+} | undefined;
+/**
+ * Runs the built-in rules, in order, stopping at the first failure. When
+ * everything passes it returns the wire's `PortRef` pair plus an edge it
+ * would replace (an `in` port whose `max === 1` already has a wire).
+ */
+declare function canConnect(from: PortInfo, to: PortInfo, ctx: ConnectContext, graph: Graphs.Directed.DirectedGraph, options: ConnectionRulesOptions): ConnectionCheck;
+/**
+ * Convenience for the `connect()` API: validates a pair of port infos (in
+ * either order) against a context built on the fly, returning the normalised
+ * wire on success.
+ */
+declare function resolveConnection(a: PortInfo, b: PortInfo, graph: Graphs.Directed.DirectedGraph, nodeGraph: Graphs.Directed.DirectedGraph, options: ConnectionRulesOptions): {
+  readonly edge: {
+    readonly from: PortRef;
+    readonly to: PortRef;
+  };
+  readonly replaces?: GraphEdge;
+} | {
+  readonly reason: ConnectionCheckReason;
+};
+/**
+ * The first valid wire from one of `outs` to one of `ins` that adds a new
+ * wire without replacing another. Used by proximity connect.
+ */
+declare function findValidWire(outs: readonly PortInfo[], ins: readonly PortInfo[], graph: Graphs.Directed.DirectedGraph, nodeGraph: Graphs.Directed.DirectedGraph, options: ConnectionRulesOptions): {
+  readonly from: PortInfo;
+  readonly to: PortInfo;
+} | undefined;
+/**
+ * Deleting a node in the middle of a flow without breaking it: each wire that
+ * entered the node is reconnected to each wire's destination that left it.
+ *
+ * "Through" pairs are matched by port type: a wire arriving at an `in` port of
+ * type T is bridged to wires leaving an `out` port of a compatible type. Every
+ * new wire must also pass the normal connection rules (types, max, cycles,
+ * duplicates, `isValidConnection`); one that wouldn't is skipped, and a bridge
+ * never replaces an existing wire.
+ */
+type BridgeDeps = {
+  readonly portInfo: (ref: PortRef) => PortInfo | undefined;
+  /** Port keys of a node, so its vertices can be removed. */
+  readonly portKeys: (nodeKey: string) => readonly string[];
+  /** Every node key (so unwired nodes stay in the node graph used for cycle checks). */
+  readonly nodeKeys: readonly string[];
+  readonly rules: ConnectionRulesOptions;
+};
+type BridgeResult = {
+  /** The port graph with the nodes removed and the bridges added. */
+  readonly graph: Graphs.Directed.DirectedGraph;
+  /** The wires that were added to keep the flow connected. */
+  readonly bridged: readonly GraphEdge[];
+};
+/**
+ * Removes `remove` from the graph. Nodes in `bridge` (a subset, normally the
+ * ones the user chose rather than a deleted group's children) are bridged first.
+ */
+declare function removeNodes(graph: Graphs.Directed.DirectedGraph, remove: readonly string[], bridge: ReadonlySet<string>, deps: BridgeDeps): BridgeResult;
+/**
+ * Right-click targets for the graph: a node, a wire, or the background, each
+ * with its own optional `ixfx-menu-trigger` (`slot="context-menu"` on a node,
+ * `slot="edge-menu"` / `slot="pane-menu"` on the graph).
+ */
+type ContextKind = `node` | `edge` | `pane` | `port`;
+/** The slice of `ixfx-menu-trigger` used here. */
+type OpenableMenu = {
+  openAt: (clientX: number, clientY: number) => void;
+};
+type ContextTarget = {
+  readonly kind: ContextKind;
+  /** Node key or wire id. */
+  readonly id?: string;
+  /** The trigger to open, if the author provided one for this kind. */
+  readonly menu?: OpenableMenu;
+};
+/**
+ * Pure logic for the selection rectangle ("marquee"): geometry, hit-testing
+ * and the rule for which input starts one.
+ */
+type GraphRect = {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+};
+/**
+ * What an empty-space drag does for touch / pen input (which can't hold a
+ * modifier key): `pan` moves the canvas, `select` draws a selection rectangle.
+ * Mouse always pans, and draws a rectangle only while Shift is held.
+ */
+type TouchMode = `pan` | `select`;
+/** The normalised rectangle spanning two corner points (either order). */
+declare function rectFromPoints(a: Point, b: Point): GraphRect;
+/** True when the rectangles overlap (touching edges don't count). */
+declare function rectsIntersect(a: GraphRect, b: GraphRect): boolean;
+/** Keys of the nodes whose rectangle overlaps `area` at all (partial overlap selects). */
+declare function nodesInRect(area: GraphRect, nodes: ReadonlyArray<{
+  readonly key: string;
+  readonly rect: GraphRect;
+}>): string[];
+/** The selection while a marquee is live: the hits, plus the starting selection when additive. */
+declare function combineSelection(base: ReadonlySet<string>, hits: readonly string[], additive: boolean): Set<string>;
+type MarqueeStartInput = {
+  readonly pointerType: string;
+  readonly button: number;
+  readonly shiftKey: boolean;
+  /** The press landed on empty pane background (not a node, port or wire). */
+  readonly onBackground: boolean;
+  /** Space is held, which pans from anywhere and wins over selecting. */
+  readonly spacePan: boolean;
+  readonly touchMode: TouchMode;
+};
+/**
+ * Whether a pointerdown starts a selection rectangle instead of a pan.
+ * Mouse needs Shift. Touch and pen follow `touchMode`, since neither has a
+ * modifier key to hold.
+ */
+declare function wantsMarquee(input: MarqueeStartInput): boolean;
+/** Inline style placing the rectangle (client px) inside a pane whose top-left is at `origin` (client px). */
+declare function marqueeStyle(r: GraphRect, origin: Point): Record<string, string>;
+/**
+ * Easy connect: drag from anywhere inside a node (not just a port) to start a
+ * wire, and drop anywhere on another node to finish one. A margin ring around
+ * the node stays free so the node can still be grabbed and moved.
+ */
+/** Default width of the move-the-node margin, in flow px. */
+declare const EASY_CONNECT_MARGIN = 10;
+/** True when `p` is inside `rect` and at least `margin` away from every edge. */
+declare function inEasyConnectZone(p: Point, rect: GraphRect, margin: number): boolean;
+/**
+ * The port a drag from inside a node starts from: the one named `prefer`, else
+ * the first `out` port, else the first `in` port (drawn backwards).
+ */
+declare function pickStartPort(ports: readonly PortInfo[], prefer?: string): PortInfo | undefined;
+/**
+ * How wires are drawn, and how that can be steered.
+ *
+ * Per wire the path comes from, in order of priority:
+ * 1. an {@link EdgeRouter} result for that wire (e.g. an obstacle-avoiding router such as libavoid),
+ * 2. the wire's {@link EdgeHint} `waypoints`,
+ * 3. the wire's hint `style`, else the graph's `edge-style`.
+ */
+/** `bezier` (default) curves out of each port; `straight` is a line; `step` is orthogonal with rounded corners. */
+type EdgeStyle = `bezier` | `straight` | `step`;
+type EdgeHint = {
+  /** Overrides the graph's `edge-style` for this wire. */
+  readonly style?: EdgeStyle;
+  /** Points (flow coordinates) the wire is drawn through, between its two ends. */
+  readonly waypoints?: readonly Point[];
+};
+/** Wire id → hint. */
+type EdgeHintMap = Readonly<Record<string, EdgeHint>>;
+/** One end of a wire as a router sees it. */
+type RouteEnd = {
+  readonly node: string;
+  readonly port: string;
+  /** Port centre, flow coordinates. */
+  readonly pos: Point;
+  /** The direction the wire should leave the port in. */
+  readonly side: PortSide;
+};
+type EdgeRouteRequest = {
+  readonly edges: ReadonlyArray<{
+    readonly id: string;
+    readonly from: RouteEnd;
+    readonly to: RouteEnd;
+  }>;
+  /** The nodes the wires should go around (every node that is shown). */
+  readonly obstacles: ReadonlyArray<{
+    readonly key: string;
+    readonly rect: GraphRect;
+  }>;
+};
+/**
+ * Plugs in a router. Called synchronously whenever wires need redrawing (so keep it fast, or cache), it
+ * returns, for the wires it routed, the full list of points from start to end (flow coordinates). A wire it
+ * leaves out is drawn normally.
+ */
+type EdgeRouter = (request: EdgeRouteRequest) => ReadonlyMap<string, readonly Point[]> | undefined;
+/**
+ * Port states. A port is **connected** when a wire is attached. Otherwise it
+ * is **available** (visible, unconnected) or **potential** (unconnected and
+ * hidden away). `availability` is what the author or user chose for an
+ * unconnected port; the graph works out `connected` from the wires.
+ */
+type PortAvailability = `available` | `potential`;
+type PortStatus = `connected` | `available` | `potential`;
+/** Whether a node shows its available (unconnected) ports, or tucks them away until needed. */
+type AvailablePorts = `show` | `hide`;
+type PortEdge = `in` | `out`;
+/**
+ * How a node lists its ports: `rail` puts inputs on the left edge and outputs on the right, beside the content;
+ * `full` lists every input and then every output as a full-width row, each with its label and description.
+ */
+type PortListLayout = `rail` | `full`;
+/**
+ * Which edges of a node its ports sit on: `vertical` puts them on the left and right edges (inputs left, outputs
+ * right); `horizontal` puts them on the top and bottom edges (inputs top, outputs bottom). The full-width list layout
+ * needs the left/right edges, so it is ignored when `horizontal`.
+ */
+type PortLocation = `vertical` | `horizontal`;
+/** Extends `p` in the direction `side` faces. */
+declare function extendFromSide(p: {
+  readonly x: number;
+  readonly y: number;
+}, side: PortSide, reach: number): {
+  x: number;
+  y: number;
+};
+/** Default wire tangent for a port direction: `in` faces left, `out` faces right. */
+declare function defaultSide(dir: `in` | `out`, location?: PortLocation, flip?: boolean): PortSide;
+/**
+ * SVG path data for the wire. Points are in flow coordinates; the edge layer
+ * draws inside the transformed viewport layer, so no further scaling applies.
+ */
+declare function edgePath(from: {
+  readonly x: number;
+  readonly y: number;
+}, fromSide: PortSide, to: {
+  readonly x: number;
+  readonly y: number;
+}, toSide: PortSide): string;
+/**
+ * The point halfway along the wire (a cubic bezier at t = 0.5), for placing a
+ * label. Uses the same control points as {@link edgePath}.
+ */
+declare function edgeMidpoint(from: {
+  readonly x: number;
+  readonly y: number;
+}, fromSide: PortSide, to: {
+  readonly x: number;
+  readonly y: number;
+}, toSide: PortSide): {
+  x: number;
+  y: number;
+};
+/** Corner rounding (flow px) for wires drawn as polylines: `step`, waypoints and routed wires. */
+declare const EDGE_CORNER_RADIUS = 8;
+/**
+ * The corners of an orthogonal wire: out of the port along its side, across in an elbow halfway between,
+ * and into the other port along its side.
+ */
+declare function stepPoints(from: Point, fromSide: PortSide, to: Point, toSide: PortSide): Point[];
+/** SVG path through `points`, with corners rounded to at most `radius`. */
+declare function polylinePath(points: readonly Point[], radius?: number): string;
+/** The point halfway along a polyline, by length (where a label goes). */
+declare function polylineMidpoint(points: readonly Point[]): Point;
+/** Path and label position of a wire between two ports in the given style. */
+declare function edgeShape(style: EdgeStyle, from: Point, fromSide: PortSide, to: Point, toSide: PortSide): {
+  d: string;
+  mid: Point;
+};
+/** Path and label position of a wire drawn through the given points (a router result, or waypoints). */
+declare function polylineShape(points: readonly Point[]): {
+  d: string;
+  mid: Point;
+};
+/**
+ * A force-directed layout, as plain immutable steps. Nodes repel each other, links pull their two nodes to a
+ * target distance, a weak gravity keeps everything near the centre, and overlapping nodes are pushed apart.
+ * Call {@link forceStep} repeatedly (e.g. once per animation frame) and apply {@link forcePositions}.
+ *
+ * Positions are node top-left corners (as `ixfx-graph-node` `x` / `y`); the forces work on node centres.
+ */
+type ForceNode = {
+  readonly key: string;
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+  /** A pinned node doesn't move (but still pushes the others), e.g. while the user drags it. */
+  readonly pinned?: boolean;
+};
+type ForceLink = {
+  readonly source: string;
+  readonly target: string;
+};
+type ForceOptions = {
+  /** Push between every pair of nodes (strength / distance²). */
+  readonly repulsion: number;
+  /** Rest length of a link, between node centres. */
+  readonly linkDistance: number;
+  /** How hard a link pulls back to its rest length (per px of stretch). */
+  readonly linkStrength: number;
+  /** Pull of every node toward `center`. */
+  readonly gravity: number;
+  /** Fraction of velocity kept each step (0..1). Lower settles faster. */
+  readonly damping: number;
+  /** Largest movement per step, px. */
+  readonly maxSpeed: number;
+  /** Extra space kept between nodes' edges, px. */
+  readonly padding: number;
+  readonly center: Point;
+};
+declare const DEFAULT_FORCE_OPTIONS: ForceOptions;
+type Body = ForceNode & {
+  readonly vx: number;
+  readonly vy: number;
+};
+type ForceState = {
+  readonly bodies: readonly Body[];
+};
+/** A resting state (no velocity) for the given nodes. */
+declare function forceState(nodes: readonly ForceNode[]): ForceState;
+/** One simulation step. Returns a new state; the input is not changed. */
+declare function forceStep(state: ForceState, links: readonly ForceLink[], options?: Partial<ForceOptions>): ForceState;
+/** Node key → top-left position, for `setNodePositions`. */
+declare function forcePositions(state: ForceState): Record<string, Point>;
+/** Total movement this step: near zero once the layout has settled. */
+declare function forceMovement(state: ForceState): number;
+/** Returns the state with one node moved to `to` and pinned (or released with `pinned: false`), e.g. while it is dragged. */
+declare function forcePin(state: ForceState, key: string, to: Point | undefined, pinned?: boolean): ForceState;
+/**
+ * `<ixfx-graph-port>` — a connectable dot on an `ixfx-graph-node`.
+ *
+ * Author as a child of `ixfx-graph-node`:
+ *
+ * ```html
+ * <ixfx-graph-node key="osc" label="Oscillator">
+ *   <ixfx-graph-port key="out" dir="out" type="signal" label="Out"></ixfx-graph-port>
+ *   <ixfx-slider-input></ixfx-slider-input>
+ * </ixfx-graph-node>
+ * ```
+ *
+ * Ports that are *direct children* are auto-assigned to the `in` / `out`
+ * slots (the node's left/right rails) based on `dir`. Ports nested inside
+ * content stay where the author put them; wires follow their measured
+ * position, and `side` sets the wire tangent.
+ *
+ * During a wire drag the graph sets state attributes for CSS:
+ * `data-connect="valid|invalid"`, `data-magnet="active"` and the custom
+ * property `--magnet-proximity` (0..1).
+ *
+ * Per-type colours work through plain consumer CSS:
+ * `ixfx-graph-port[type=number] { --node-graph-port-color: … }`.
+ */
+declare class GraphPortElement extends LitElement {
+  #private;
+  static styles: import("lit").CSSResult;
+  /** Unique within its node. */
+  key: string;
+  dir: PortDir;
+  /** Compatibility tag. Empty or `*` matches anything. */
+  type: string;
+  /** Max connections; 0 = default (1 for `in`, unlimited for `out`). */
+  max: number;
+  /** Wire tangent; empty = from `dir` (`in` → left, `out` → right). */
+  side: string;
+  /** Human-visible name, shown next to the dot. `key` is the unique identifier. */
+  label: string;
+  /** Optional longer explanation, shown in the tooltip (the label is shown there when there is none). */
+  description: string;
+  /**
+   * What an unconnected port is: `available` (visible) or `potential` (hidden
+   * away until added with the node's + button). A wired port is always
+   * `connected`, whatever this says. The user can change it at runtime.
+   */
+  availability: PortAvailability;
+  /**
+   * Blink rate in Hz (blinks per second). `0` (default) = steady. Works on `in`
+   * and `out` ports; clamped to 10 Hz. Honours `prefers-reduced-motion`.
+   */
+  blink: number;
+  /** `connected` (a wire is attached), else `available` or `potential` from `availability`. */
+  get status(): PortStatus;
+  /** @internal */
+  setConnected(connected: boolean): void;
+  connectedCallback(): void;
+  /** Effective max connections. */
+  get portMax(): number;
+  /** Effective wire tangent. */
+  get portSide(): PortSide;
+  /** Builds the `PortInfo` the rules work with. `nodeKey` comes from the graph. */
+  portInfo(nodeKey: string): PortInfo;
+  /** @internal */
+  setDragState(state: `valid` | `invalid` | undefined): void;
+  /** @internal */
+  setMagnet(active: boolean, proximity: number): void;
+  protected render(): import("lit").TemplateResult<1>;
+  protected firstUpdated(): void;
+  protected updated(changed: Map<string, unknown>): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-graph-port': GraphPortElement;
+  }
+}
+/**
+ * `<ixfx-graph-node>` — one node on an `ixfx-graph-node-graph` canvas.
+ *
+ * Light-DOM child of the graph, slotted into its transformed viewport layer.
+ * Position (`x` / `y`, flow coordinates) is applied as a CSS transform on the
+ * host. Arbitrary content (controls, text, markup) is authored as children;
+ * consumer CSS reaches it because it stays in the document scope.
+ *
+ * ```html
+ * <ixfx-graph-node key="osc" x="40" y="60" label="Oscillator">
+ *   <ixfx-graph-port key="freq" dir="in" type="number" label="Freq"></ixfx-graph-port>
+ *   <ixfx-slider-input></ixfx-slider-input>
+ *   <ixfx-graph-port key="out" dir="out" type="signal"></ixfx-graph-port>
+ * </ixfx-graph-node>
+ * ```
+ *
+ * A `ixfx-graph-port` that is a direct child is auto-assigned to the
+ * `in` / `out` slot (left/right rail) from its `dir`, unless it already has
+ * an explicit `slot`. A port nested deeper stays in the content flow, like
+ * Svelte Flow's `<Handle>`.
+ *
+ * Optional features, all plain attributes:
+ * - `shape` (`rect` `rounded` `pill` `circle` `diamond` `hexagon`) and the
+ *   `--graph-node-border-*` / `--graph-node-radius` variables, set on the node
+ *   (one node) or on the graph (all nodes).
+ * - `drag-by="handle"`: only the grip in the title bar (or an element with
+ *   `data-drag-handle`) starts a drag, instead of the whole node.
+ * - `resizable` (+ `width` / `height` / `min-*` / `max-*`): edge and corner grips.
+ * - `group` and `parent`: a container node, and children placed inside it.
+ * - `slot="toolbar"` (e.g. an `ixfx-toolbar`) shown above the selected node.
+ * - `slot="context-menu"` (an `ixfx-menu-trigger icon-name="ellipsis"`): shown as a three-dot
+ *   button in the title bar, and also opened by right-click.
+ * - A titled node can be collapsed to just its title bar with the disclosure widget (`collapsed`).
+ *   Collapsing a group hides its children.
+ *
+ * Fires the internal, non-composed `graph-node-geometry` event whenever its
+ * position, size or ports may have changed, so the graph re-renders wires.
+ */
+declare class GraphNodeElement extends LitElement {
+  #private;
+  static styles: import("lit").CSSResult[];
+  /** Unique within its graph. */
+  key: string;
+  /** Flow-space position. */
+  x: number;
+  y: number;
+  /** Header text; omit for a headerless node. */
+  label: string;
+  /** Set by the graph, for styling. */
+  selected: boolean;
+  /**
+   * Key of a parent (group) node. `x` / `y` are then relative to that parent,
+   * which also carries this node when it moves. Ignored if it names a missing
+   * node or this node itself.
+   */
+  parent: string;
+  /** Outline: `rect` `rounded` (default) `pill` `circle` `diamond` `hexagon`. */
+  shape: string;
+  /** A container for child nodes (which name it with `parent`). */
+  group: boolean;
+  /** Keep a child within its parent's bounds while dragging (`parent`). */
+  extent: `` | `parent`;
+  /** Name of an icon from the icon registry, shown at the left of the title. */
+  icon: string;
+  /** `show` / `hide` the node's available (unconnected) ports. Empty inherits the graph's `available-ports`. */
+  availablePorts: `` | AvailablePorts;
+  /** The graph's default, set by the graph. */
+  inheritedAvailablePorts: AvailablePorts;
+  private _potential;
+  /** Wires to hidden children shown on a collapsed group's virtual in / out port. */
+  private _virtual;
+  private _menu;
+  /** Whether available ports are tucked away (own setting, else the graph's). */
+  get hidesAvailable(): boolean;
+  /** `rail` (inputs left, outputs right) or `full` (a full-width row per port). Empty inherits the graph's `port-layout`. */
+  portLayout: `` | PortListLayout;
+  /** The graph's default, set by the graph. */
+  inheritedPortLayout: PortListLayout;
+  /** `vertical` (ports on the left and right edges) or `horizontal` (top and bottom). Empty inherits the graph's `port-location`. */
+  portLocation: `` | PortLocation;
+  inheritedPortLocation: PortLocation;
+  /** Swaps the ends ports sit at (inputs right / bottom, outputs left / top). The graph's `flip-ports` also applies. */
+  flipPorts: boolean;
+  inheritedFlipPorts: boolean;
+  /** The graph's `dblclick-toggle`, set by the graph. */
+  inheritedDblclickToggle: boolean;
+  private _bodyEmpty;
+  private _filled;
+  /** Which edges the ports sit on (own setting, else the graph's). */
+  get effectivePortLocation(): PortLocation;
+  get effectiveFlipPorts(): boolean;
+  /** How this node lists its ports (own setting, else the graph's). Always `rail` when the ports are on the top and bottom edges. */
+  get effectivePortLayout(): PortListLayout;
+  /** Show only the title bar. Needs a `label`; the disclosure widget toggles it. */
+  collapsed: boolean;
+  /** Hide the disclosure widget, so the node can't be collapsed. */
+  noCollapse: boolean;
+  private _hasMenu;
+  /** Collapsed in effect: only a titled node can collapse. */
+  get isCollapsed(): boolean;
+  /** Edge and corner resize grips. */
+  resizable: boolean;
+  /** Explicit size in flow px (`0` = size to content / `--graph-node-width`). Set by resizing. */
+  width: number;
+  height: number;
+  minWidth: number;
+  minHeight: number;
+  /** `0` = unlimited. */
+  maxWidth: number;
+  maxHeight: number;
+  /** `handle`: only the title-bar grip starts a drag. Empty inherits the graph's `drag-by`. */
+  dragBy: `` | `node` | `handle`;
+  /** The graph's default, set by the graph. */
+  inheritedDragBy: `node` | `handle`;
+  /** `on` / `off` overrides the graph's `easy-connect` for this node. */
+  easyConnect: `` | `on` | `off`;
+  /** Key of the port easy-connect wires from / to (default: the first suitable port). */
+  connectPort: string;
+  /** When the `toolbar` slot shows: while `selected` (default), `always`, or on `hover`. */
+  toolbarVisible: `selected` | `always` | `hover`;
+  toolbarPosition: `top` | `bottom` | `left` | `right`;
+  /** Whether the title-bar grip is the only drag start (own setting, else the graph's). */
+  get dragsByHandle(): boolean;
+  /**
+   * True when this press may start moving the node: always for the default
+   * `node` mode, otherwise only from the grip (or any `data-drag-handle`).
+   */
+  startsDrag(e: Event): boolean;
+  /**
+   * Asks to show the tucked-away available ports on one side for `ms`
+   * (`Infinity` = until `reveal(side, 0)`); `0` withdraws the request. They are
+   * also shown whenever the node is selected. No effect when the node isn't
+   * hiding its available ports.
+   */
+  reveal(side: PortEdge, ms: number): void;
+  /** Opens the menu of potential ports on one side, at a client point. */
+  openAddMenu(side: PortEdge, x: number, y: number): Promise<void>;
+  /** Opens the menu for an available port (just "Hide port"), at a client point. */
+  openPortMenu(port: GraphPortElement, x: number, y: number): Promise<void>;
+  /**
+   * Whether a client point is over the revealed overlay of ports on one side (with a margin),
+   * so a wire being dragged along the list keeps it shown after leaving the node's edge strip.
+   */
+  overlayContains(side: PortEdge, client: {
+    x: number;
+    y: number;
+  }, margin?: number): boolean;
+  /** @internal */
+  refreshPortSlots(): void;
+  /** Collapses or expands the node (if it has a title) and tells the graph, which hides or shows a group's children. */
+  toggleCollapsed(): void;
+  /** @internal */
+  setVirtualPorts(inCount: number, outCount: number): void;
+  /** @internal */
+  setHiddenByAncestor(hidden: boolean): void;
+  /** @internal */
+  setClip(clipPath: string): void;
+  /** @internal */
+  setSize(width: number, height: number): void;
+  /** @internal */
+  setOrigin(x: number, y: number, depth: number): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected firstUpdated(): void;
+  protected willUpdate(changed: PropertyValues<this>): void;
+  protected updated(changed: PropertyValues<this>): void;
+  protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-graph-node': GraphNodeElement;
+  }
+}
+/**
+ * The "magnetic" wire drag: while a wire is being pulled, nearby compatible
+ * ports attract it. Pure maths — screen-space distances, hysteresis and the
+ * smoothing that gives the wire its pulled-in feel.
+ */
+/** A port eligible for snapping, in screen coordinates. */
+type SnapCandidate = {
+  readonly ref: PortRef;
+  readonly x: number;
+  readonly y: number;
+};
+/** The port a dragged wire is currently snapped to. */
+type SnapTarget = {
+  readonly ref: PortRef;
+  readonly x: number;
+  readonly y: number;
+  /** Screen distance from the pointer to the port centre. */
+  readonly distance: number;
+};
+/**
+ * Finds the snap target for the pointer, with hysteresis:
+ *
+ * - The nearest candidate within `snapRadius` snaps.
+ * - Once snapped, the wire stays on its target until the pointer leaves
+ *   `1.5 × snapRadius` of it *or* another candidate is ≥ 25 % closer. This
+ *   stops flicker between neighbouring ports.
+ *
+ * Returns `undefined` when nothing is snapped.
+ */
+declare function findSnapTarget(candidates: readonly SnapCandidate[], pointer: Point, snapRadius: number, current: SnapTarget | undefined): SnapTarget | undefined;
+/**
+ * Proximity glow for a candidate `distance` away, 0..1 within
+ * `2 × snapRadius` (0 at the edge of the glow zone, 1 at the port).
+ */
+declare function proximityFactor(distance: number, snapRadius: number): number;
+/**
+ * One smoothing step toward `goal`: exponential approach with time constant
+ * `tau` (ms). `tau <= 0` (e.g. `prefers-reduced-motion`) snaps immediately.
+ * `dtMs` is the elapsed time since the previous step.
+ */
+declare function smoothStep(p: Point, goal: Point, dtMs: number, tau: number): Point;
+/** True when `p` has effectively arrived at `goal` (sub-pixel). */
+declare function settled(p: Point, goal: Point): boolean;
+/**
+ * The selection-rectangle gesture. Dragging on empty space draws a rectangle
+ * and live-selects every node it overlaps; selected nodes then drag together
+ * (the node-drag controller already moves a whole selection).
+ *
+ * Which input starts it is decided by `wantsMarquee` (Shift for mouse,
+ * `touchMode` for touch/pen); this class only runs the gesture.
+ */
+/** Movement (px) before a press becomes a rectangle, so a plain click isn't one. */
+declare const MARQUEE_THRESHOLD_PX = 3;
+type Selection = {
+  readonly nodes: ReadonlySet<string>;
+  readonly edges: ReadonlySet<string>;
+};
+type MarqueeConfig = {
+  readonly getPane: () => HTMLElement | undefined;
+  /** Client → flow coordinates. */
+  readonly screenToFlow: (p: Point) => Point;
+  /** Every node's rectangle in flow coordinates. */
+  readonly getNodeRects: () => ReadonlyArray<{
+    readonly key: string;
+    readonly rect: GraphRect;
+  }>;
+  readonly getSelection: () => Selection;
+  readonly applySelection: (nodes: ReadonlySet<string>, edges: ReadonlySet<string>) => void;
+  /** Re-render (the rectangle changed). */
+  readonly invalidate: () => void;
+};
+declare class MarqueeController {
+  #private;
+  constructor(config: MarqueeConfig);
+  /** The pointer that owns the gesture, or `null` when idle. */
+  get pointerId(): number | null;
+  /** The rectangle in **client** px while it is being drawn, else `undefined`. */
+  get clientRect(): GraphRect | undefined;
+  /** `additive` keeps the existing selection and adds to it. */
+  begin(e: PointerEvent, additive: boolean): void;
+  onPointerMove(e: PointerEvent): void;
+  onPointerUp(e: PointerEvent): boolean;
+  onPointerCancel(e: PointerEvent): boolean;
+  /** Cancels the gesture and puts the selection back as it was. */
+  abort(): void;
+  /**
+   * A second finger arrived: cancel the selection and hand the first pointer
+   * over so the caller can start a pinch. `undefined` when not active.
+   */
+  cancelForPinch(): {
+    readonly pointerId: number;
+    readonly point: Point;
+  } | undefined;
+}
+/**
+ * Dragging nodes: a 3 px press threshold turns into a move of the whole
+ * selection. Node positions are applied by the host element (`applyMoves`);
+ * no layout is read during the drag — the viewport transform handles it.
+ *
+ * Pointer capture is taken on the pane only once the threshold passes, so
+ * plain clicks on node content keep working.
+ *
+ * Selection itself (click / shift-click) is the host element's job; this
+ * controller only moves.
+ */
+/** Drag activation threshold in screen px. */
+declare const DRAG_THRESHOLD_PX = 3;
+type NodeDragConfig = {
+  readonly getPane: () => HTMLElement | undefined;
+  readonly getViewport: () => Viewport;
+  /** Applies positions and re-renders wires. Returns what was actually applied (e.g. after clamping to a parent). */
+  readonly applyMoves: (moves: readonly NodeMove[]) => readonly NodeMove[];
+  /** Per-frame event while dragging. */
+  readonly emitMove: (moves: readonly NodeMove[]) => void;
+  /** Committed on release. */
+  readonly emitMoved: (moves: readonly NodeMove[]) => void;
+  readonly setGestureActive: (active: boolean) => void;
+  /** A real drag finished (`committed`) or was cancelled. Not called for a click that never became a drag. */
+  readonly onEnd?: (committed: boolean) => void;
+};
+/** A node the controller may move: its key and live flow position. */
+type DraggableNode = {
+  readonly key: string;
+  x: number;
+  y: number;
+};
+declare class NodeDragController {
+  #private;
+  constructor(config: NodeDragConfig);
+  get dragging(): boolean;
+  /**
+   * Tracks a potential drag of the given selection. The host applies
+   * selection before calling this; the whole selection moves together.
+   */
+  onPointerDown(e: PointerEvent, selection: readonly DraggableNode[]): boolean;
+  onPointerMove(e: PointerEvent): void;
+  /** @returns `true` to keep the gesture alive — always `false`. */
+  onPointerUp(e: PointerEvent): boolean;
+  onPointerCancel(e: PointerEvent): boolean;
+}
+/**
+ * DOM measuring of port positions, cached per node.
+ *
+ * A port offset is the port's centre relative to its node's top-left corner,
+ * in **flow** coordinates. Because we divide measured screen distances by the
+ * zoom level, offsets are zoom-independent — node drags and zoom changes do
+ * not invalidate them, only node resizes and port add/remove do.
+ */
+type PortOffset = {
+  /** Port key within the node. */
+  readonly key: string;
+  readonly x: number;
+  readonly y: number;
+  /** Wire tangent at this port. */
+  readonly side: PortSide;
+};
+/**
+ * Where a port sits on a collapsed node, which shows only its title bar: the
+ * middle of the edge its wire leaves from.
+ */
+declare function collapsedOffset(side: PortSide, width: number, height: number): {
+  x: number;
+  y: number;
+};
+type NodeLayout = {
+  /** Port offsets by port key. */
+  readonly offsets: ReadonlyMap<string, PortOffset>;
+  readonly width: number;
+  readonly height: number;
+};
+/**
+ * Measures one node: the flow-space offsets of every `ixfx-graph-port`
+ * descendant, plus the node's flow-space size. `zoom` is the current viewport
+ * zoom; rects are measured in screen px and divided out.
+ */
+declare function measureNode(node: HTMLElement, zoom: number): NodeLayout;
+/**
+ * Add-node-on-drop: when a wire is released on empty space, an opt-in
+ * `nodeFactory` makes a new node there, and it is wired to the dragged port.
+ */
+type NodeFactoryContext = {
+  /** The port the wire was dragged from. */
+  readonly from: PortInfo;
+  /** Drop point in flow coordinates. */
+  readonly point: Point;
+  /** Drop point in client coordinates. */
+  readonly client: Point;
+};
+/**
+ * Returns the node to add (a detached `ixfx-graph-node` with a unique `key` and
+ * its ports as children), or `null` / `undefined` to add nothing.
+ */
+type NodeFactory = (context: NodeFactoryContext) => GraphNodeElement | null | undefined;
+type AddedNode = {
+  readonly node: GraphNodeElement;
+  /** The wire made to the dragged port, if a compatible port was found. */
+  readonly connectedTo?: PortRef;
+};
+/**
+ * Styles for `ixfx-node-graph`: host, pane (dot background), transformed
+ * viewport layer and the SVG edge layer. Node chrome lives in
+ * `graph-node.ts`, port chrome in `graph-port.ts`.
+ */
+declare const nodeGraphStyles: import("lit").CSSResult;
+/**
+ * ReactiveController for pan and zoom gestures on the graph pane:
+ *
+ * - **Pan** — drag on the empty pane (primary button), the middle button
+ *   anywhere, or Space + drag. Pointer capture is on the pane.
+ * - **Zoom** — wheel (mode `zoom`), ctrl/cmd + wheel (trackpad pinch), or a
+ *   two-pointer touch pinch. In mode `pan`, the wheel pans and ctrl/pinch
+ *   zooms.
+ * - Escape hatches (as in Svelte Flow): elements with `data-nowheel` opt out
+ *   of wheel handling; native form controls and `[contenteditable]` never
+ *   have their wheel intercepted.
+ */
+type WheelMode = `zoom` | `pan`;
+type PanZoomConfig = {
+  readonly getPane: () => HTMLElement | undefined;
+  readonly getPaneRect: () => DOMRect | undefined;
+  readonly getViewport: () => Viewport;
+  /** Commit a viewport change; the element handles events and rendering. */
+  readonly setViewport: (v: Viewport) => void;
+  readonly getMinZoom: () => number;
+  readonly getMaxZoom: () => number;
+  readonly getWheelMode: () => WheelMode;
+  /** True when the wheel event started on a target that opted out (`data-nowheel`, form controls). Scans the event's `composedPath`, so light-DOM content inside nodes is seen. */
+  readonly isWheelBlockedTarget: (e: WheelEvent) => boolean;
+  /** Gestures enable `will-change: transform` on the layer. */
+  readonly setGestureActive: (active: boolean) => void;
+  /** Toggled while Space is held, for the grab cursor. */
+  readonly setSpacePan: (active: boolean) => void;
+};
+/** True when `target` is a native form control or contenteditable element. */
+declare function isEditableTarget(target: EventTarget | null | undefined): boolean;
+declare class PanZoomController implements ReactiveController {
+  #private;
+  constructor(host: ReactiveControllerHost, config: PanZoomConfig);
+  hostDisconnected(): void;
+  /** Space starts a pan-from-anywhere. Returns `true` when the key was used. */
+  onKeyDown(e: KeyboardEvent): boolean;
+  /** Releasing Space (or leaving the pane, with `key` omitted) ends it. */
+  onKeyUp(e?: KeyboardEvent): void;
+  /** True while Space is held (space + drag pans from anywhere). */
+  get spacePan(): boolean;
+  setSpacePan(active: boolean): void;
+  /**
+   * Consumes a pointerdown when it starts a pan or pinch: the pane
+   * background (primary button), the middle button anywhere, or Space + drag.
+   * Returns `false` to let node/wire controllers try first.
+   */
+  onPointerDown(e: PointerEvent): boolean;
+  /**
+   * Starts a pinch from a pointer another gesture already owned (`first`, e.g.
+   * a cancelled touch selection) plus the pointer that just arrived.
+   */
+  startPinch(first: {
+    readonly pointerId: number;
+    readonly point: Point;
+  }, second: PointerEvent): void;
+  onPointerMove(e: PointerEvent): void;
+  /** @returns `true` when the gesture should stay alive (multi-pointer pinch). */
+  onPointerUp(e: PointerEvent): boolean;
+  onPointerCancel(e: PointerEvent): boolean;
+  /** A second pointer joined the gesture → pinch. */
+  addPointer(e: PointerEvent): void;
+  onWheel(e: WheelEvent): void;
+}
+/**
+ * Edges that cross the boundary of a sub flow (a group and everything inside it).
+ */
+type SubflowEdges = {
+  /** Wires from a node outside into the sub flow. */
+  readonly incoming: readonly GraphEdge[];
+  /** Wires from the sub flow to a node outside. */
+  readonly outgoing: readonly GraphEdge[];
+  /** Wires with both ends inside. */
+  readonly internal: readonly GraphEdge[];
+};
+/**
+ * Per-wire "data is flowing" animation state.
+ *
+ * Animation is presentation, not topology, so it is not stored on the graph
+ * (the ixfx graph's edges carry no data). It is a plain `edgeId → speed` map
+ * held by the element. Edge ids are deterministic (`edgeId(from, to)`), so an
+ * entry survives a wire being removed and re-created.
+ */
+/** Wire id → flow speed in flow-space px/second. Missing, 0 or invalid = no animation. */
+type WireFlowMap = Readonly<Record<string, number>>;
+/** Upper bound, so a bad value can't produce an unreadable strobe. */
+declare const MAX_FLOW_SPEED = 2000;
+/** Returns a usable speed (`0` = off) from anything a consumer might pass. */
+declare function sanitizeFlowSpeed(value: unknown): number;
+/**
+ * Immutably sets (or, for `undefined` / `0`, clears) one wire's speed. Returns
+ * the same object when nothing changes, so identity checks stay cheap.
+ */
+declare function withWireFlow(map: WireFlowMap, id: string, speed: number | undefined): WireFlowMap;
+/**
+ * Immutably sets (or, for `undefined`, clears) one entry of a wire-keyed map: labels, hints and
+ * the like. Returns a new object.
+ */
+declare function withEntry<T>(map: Readonly<Record<string, T>>, id: string, value: T | undefined): Readonly<Record<string, T>>;
+type WirePath = {
+  readonly id: string;
+  readonly d: string;
+  readonly selected: boolean;
+  /** Halfway along the wire, where its label goes. */
+  readonly mid: {
+    readonly x: number;
+    readonly y: number;
+  };
+};
+/** Wire id → label text. Missing or empty = no label. */
+type EdgeLabelMap = Readonly<Record<string, string>>;
+/**
+ * The SVG content of the edge layer: each wire, its hit area, an optional
+ * flow overlay and label, the in-progress wire preview, and the proximity-connect preview.
+ *
+ * The flow overlay is a dashed copy of the wire whose `stroke-dashoffset` is
+ * animated by CSS (no per-frame JS). Speed is set per wire through the
+ * `--_flow-speed` custom property (flow-space px/s).
+ */
+declare function renderWires(paths: readonly WirePath[], flow: WireFlowMap, labels: EdgeLabelMap, detachedId: string | undefined, preview: string | undefined, proximity?: string | undefined): import("lit").TemplateResult<2>;
+/**
+ * How wires are drawn, per graph and per wire: flow animation, labels, style, hints and an optional router.
+ * (The base of `ixfx-node-graph`, which redraws its wires when these change.)
+ */
+declare abstract class EdgeDrawingElement extends LitElement {
+  /**
+   * Wires that show data flowing: wire id → speed in flow-space px/second
+   * (missing or 0 = static). Animated in CSS, not JS. Ids are `edgeId(from, to)`;
+   * prefer `setWireFlow()` for a single wire.
+   */
+  wireFlow: WireFlowMap;
+  /** Wire id → label text, drawn at the middle of the wire. Prefer `setEdgeLabel()` for one wire. */
+  edgeLabels: EdgeLabelMap;
+  /** How wires are drawn: `bezier` (default), `straight`, or `step` (orthogonal). A wire's own hint wins. */
+  edgeStyle: EdgeStyle;
+  /** Per-wire drawing hints (wire id → `{ style?, waypoints? }`). Prefer `setEdgeHint()` for one wire. */
+  edgeHints: EdgeHintMap;
+  /** Opt-in router (e.g. libavoid) that returns the points of each wire; it wins over hints and `edge-style`. */
+  edgeRouter: EdgeRouter | undefined;
+  /** Starts, retunes (`speed` px/s) or stops (`0` / `undefined`) one wire's flow animation. */
+  setWireFlow(id: string, speed: number | undefined): void;
+  /** Sets or clears (`''` / `undefined`) one wire's label. */
+  setEdgeLabel(id: string, text: string | undefined): void;
+  /** Sets or clears one wire's drawing hint (`style`, `waypoints`). */
+  setEdgeHint(id: string, hint: EdgeHint | undefined): void;
+}
+declare class NodeGraphElement extends EdgeDrawingElement {
+  #private;
+  static styles: import("lit").CSSResult[];
+  /**
+   * Wires. Plain immutable objects; internally backed by the port graph.
+   * Replaced immutably on every change, so identity can be compared.
+   */
+  get edges(): readonly GraphEdge[];
+  set edges(value: readonly GraphEdge[]);
+  /** Pan/zoom state of the viewport layer. */
+  viewport: Viewport;
+  minZoom: number;
+  maxZoom: number;
+  /** `zoom`: the wheel zooms (ctrl/pinch always zooms). `pan`: the wheel pans. */
+  wheel: WheelMode;
+  /** Snap radius for the magnet, in **screen** px. */
+  snapRadius: number;
+  /** Allow a node to connect to itself. */
+  allowSelf: boolean;
+  /** Reject connections that would create a cycle (node level). */
+  acyclic: boolean;
+  /**
+   * What a touch/pen drag on empty space does: `pan` (default) moves the
+   * canvas, `select` draws a selection rectangle. Mouse always pans; hold
+   * Shift to draw a rectangle instead.
+   */
+  touchMode: TouchMode;
+  /** Extra veto hook, on top of the built-in rules. */
+  isValidConnection: IsValidConnection | undefined;
+  /** What starts moving a node: `node` (anywhere on it) or `handle` (only its title-bar grip). A node's own `drag-by` wins. */
+  dragBy: `node` | `handle`;
+  /** `show` or `hide` the available (unconnected) ports of every node; a node's own `available-ports` wins. Hidden ones are revealed when a wire is dragged toward them, on tap, or on mouse hover. */
+  availablePorts: AvailablePorts;
+  /** `rail`: inputs on the left edge, outputs on the right. `full`: every input then every output as a full-width row with its label and description. A node's own `port-layout` wins. */
+  portLayout: PortListLayout;
+  /** `vertical`: ports on the left (in) and right (out) edges. `horizontal`: top (in) and bottom (out); `full` layout is then ignored. A node's own `port-location` wins. */
+  portLocation: PortLocation;
+  /** Swaps the ends ports sit at (inputs right / bottom, outputs left / top), for flows that run right-to-left or bottom-to-top. A node's `flip-ports` also turns it on. */
+  flipPorts: boolean;
+  /** Double-clicking a node's title bar collapses or expands it. Off by default; the `graph-node-title-dblclick` event fires either way, and `preventDefault()` on it stops the toggle. */
+  dblclickToggle: boolean;
+  /** Drag from anywhere inside a node (not just a port) to start a wire, and drop anywhere on a node to finish one. */
+  easyConnect: boolean;
+  /** Width (flow px) of the margin ring that still moves a node when `easy-connect` is on. */
+  easyConnectMargin: number;
+  /** While dragging a node, offer a wire to the nearest node within this many flow px (`0` = off); it is made on drop. */
+  proximityConnect: number;
+  /** Deleting a node in the middle of a flow reconnects what fed it to what it fed, where the rules allow. */
+  bridgeOnDelete: boolean;
+  /** Opt-in: called when a wire is dropped on empty space. Return a node to add there (it is wired to the dragged port). */
+  nodeFactory: NodeFactory | undefined;
+  private _gestureActive;
+  private _spacePan;
+  constructor();
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected firstUpdated(): void;
+  protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+  protected updated(changed: Map<PropertyKey, unknown>): void;
+  protected render(): import("lit").TemplateResult<1>;
+  /** Plain-JSON snapshot of nodes (from the DOM) and edges. */
+  getGraph(): {
+    nodes: {
+      key: string;
+      x: number;
+      y: number;
+      label: string;
+      ports: PortInfo[];
+    }[];
+    edges: readonly GraphEdge[];
+  };
+  /** The port graph (source of truth for wires). Vertices are ports. */
+  getPortGraph(): Graphs.Directed.DirectedGraph;
+  /**
+   * The node graph: the port graph collapsed to node keys. Directly usable
+   * as a `Graphs.Dependencies.DependencyGraph` (edges point in the direction
+   * of data flow) for topological order, cycle detection and evaluation.
+   */
+  getNodeGraph(): Graphs.Directed.DirectedGraph;
+  /**
+   * Connects two ports (either order), running the same rules and events as
+   * a wire drag. Returns `false` when rejected or cancelled.
+   */
+  connect(from: PortRef, to: PortRef): boolean;
+  /** Removes a wire by id, firing the same events as a drag. */
+  disconnect(id: string): boolean;
+  /**
+   * The wires that cross a sub flow's boundary: `incoming` from nodes outside, `outgoing` to nodes
+   * outside, and the `internal` ones. The sub flow is the group node and everything inside it.
+   */
+  getSubflowEdges(groupKey: string): SubflowEdges;
+  /** Every shown node's rectangle in flow coordinates, for layout algorithms. */
+  getNodeRects(): Array<{
+    key: string;
+    rect: GraphRect;
+  }>;
+  /** Moves nodes (`x` / `y` as set on the node: relative to its parent) in one go, e.g. from a layout. Fires no events. */
+  setNodePositions(positions: Readonly<Record<string, Point>>): void;
+  /** What the last right-click landed on (valid while its menu is open, for handling `menu-command`). */
+  get contextTarget(): GraphContextMenuDetail | undefined;
+  /** Sets the viewport (zoom is clamped) and emits `graph-viewport-change`. */
+  setViewport(v: Viewport): void;
+  /** Pans/zooms so all nodes fit, with `padding` px margin. */
+  fitView(padding?: number): void;
+  /** Client point → flow coordinates. */
+  screenToFlow(p: Point): Point;
+  /** Flow point → client coordinates. */
+  flowToScreen(p: Point): Point;
+  getViewState(options?: GetViewStateOptions<NodeGraphViewState>): NodeGraphViewState;
+  setViewState(state: NodeGraphViewState | null | undefined): void;
+  /** No pending facets: selection and viewport are always live. */
+  clearPendingViewState(): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-node-graph': NodeGraphElement;
+  }
+}
+interface NodeGraphElement {
+  addEventListener<K extends keyof NodeGraphElementEventMap>(type: K, listener: (this: NodeGraphElement, event: NodeGraphElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+}
+/** Which edge or corner of a node is being dragged. */
+type ResizeHandle = `n` | `s` | `e` | `w` | `ne` | `nw` | `se` | `sw`;
+declare const RESIZE_HANDLES: readonly ResizeHandle[];
+type SizeLimits = {
+  readonly minWidth: number;
+  readonly minHeight: number;
+  readonly maxWidth: number;
+  readonly maxHeight: number;
+};
+declare function isResizeHandle(value: unknown): value is ResizeHandle;
+/**
+ * The rectangle after dragging `handle` by (`dx`, `dy`) flow px, from the
+ * rectangle at the start of the drag. Size is clamped to `limits`; dragging a
+ * west/north edge moves the origin so the opposite edge stays put.
+ */
+declare function resizeRect(start: GraphRect, handle: ResizeHandle, dx: number, dy: number, limits: SizeLimits): GraphRect;
+/**
+ * Node outline shapes. `box` shapes are plain rounded rectangles and get a
+ * real CSS border (any `border-style`). `polygon` shapes are clipped with
+ * `clip-path`, so their border is drawn as a layered background instead
+ * (solid colour only; thickness is approximate on non-square nodes).
+ */
+type NodeShape = `rect` | `rounded` | `pill` | `circle` | `diamond` | `hexagon`;
+type ShapeSpec = {
+  readonly kind: `box`;
+  readonly radius: string;
+} | {
+  readonly kind: `polygon`;
+  readonly clip: string;
+};
+declare const NODE_SHAPES: Readonly<Record<NodeShape, ShapeSpec>>;
+declare function isNodeShape(value: unknown): value is NodeShape;
+/** The spec for a shape name; anything unknown (or empty) is `rounded`. */
+declare function shapeSpec(value: unknown): ShapeSpec;
+/** Fastest allowed blink, in Hz. Keeps a bad value from becoming a strobe. */
+declare const MAX_BLINK_HZ = 10;
+/**
+ * Blink period in seconds for a rate in Hz, or `undefined` for "don't blink"
+ * (zero, negative, non-finite or non-numeric rates). Rates above
+ * `MAX_BLINK_HZ` are clamped.
+ */
+declare function blinkPeriodSeconds(hz: unknown): number | undefined;
+/**
+ * Proximity connect: while a node is dragged, the nearest other node within
+ * `threshold` is offered as a connection, which is made on drop.
+ */
+type ProximityPair = {
+  readonly from: PortInfo;
+  readonly to: PortInfo;
+};
+/** Distance between two rectangles' edges; `0` when they touch or overlap. */
+declare function rectGap(a: GraphRect, b: GraphRect): number;
+type ProximityQuery = {
+  readonly dragged: string;
+  readonly rects: ReadonlyArray<{
+    readonly key: string;
+    readonly rect: GraphRect;
+  }>;
+  /** Maximum edge-to-edge distance, in flow px. */
+  readonly threshold: number;
+  /** Nodes that must not be offered (e.g. the rest of the dragged selection). */
+  readonly exclude?: ReadonlySet<string>;
+  /** The best valid wire from one node to another, if any. */
+  readonly tryPair: (fromNode: string, toNode: string) => ProximityPair | undefined;
+};
+/**
+ * The wire to offer. Candidates are tried nearest first. For each, the node on
+ * the left is the source (data flows left to right), then the other way round.
+ */
+declare function findProximityConnection(q: ProximityQuery): ProximityPair | undefined;
+/**
+ * Pure selection transitions for pointer presses and clicks.
+ * Each returns the next selection, or `undefined` when nothing changes.
+ */
+type SelectionState = {
+  readonly nodes: ReadonlySet<string>;
+  readonly edges: ReadonlySet<string>;
+};
+/**
+ * Pressing a node. `toggle` (Shift/Ctrl/Cmd) flips it in the selection; a
+ * plain press on an unselected node selects only it. A plain press on an
+ * already-selected node keeps the selection so the whole group can be dragged.
+ */
+declare function selectionAfterNodePress(current: SelectionState, key: string, toggle: boolean): SelectionState | undefined;
+/** Clicking a wire: `toggle` flips it; otherwise it becomes the only selection. */
+declare function selectionAfterEdgeClick(current: SelectionState, edgeId: string, toggle: boolean): SelectionState;
+/**
+ * Pure pan/zoom coordinate maths for the node graph.
+ *
+ * Flow coordinates are the stable coordinate space of the canvas: node `x`/`y`
+ * and port offsets live there. Screen coordinates are client (page) px. The
+ * mapping needs the pane's client-space origin (its top-left corner).
+ *
+ * `flow = (client − paneOrigin − viewport) / zoom`
+ */
+/** Client-space top-left corner of the pane element (`DOMRect.left/top`). */
+type PaneOrigin = Point;
+declare function clampZoom(zoom: number, minZoom: number, maxZoom: number): number;
+/** Client point → flow point. */
+declare function screenToFlow(p: Point, v: Viewport, paneOrigin: PaneOrigin): Point;
+/** Flow point → client point. */
+declare function flowToScreen(p: Point, v: Viewport, paneOrigin: PaneOrigin): Point;
+/**
+ * Zooms by `factor` keeping the flow point under `screenPoint` fixed on
+ * screen — the canvas appears to grow out of the cursor. Result is clamped
+ * to `[minZoom, maxZoom]`; when the clamp bites, the anchor point may drift
+ * slightly rather than jump.
+ */
+declare function zoomAt(v: Viewport, screenPoint: Point, paneOrigin: PaneOrigin, factor: number, minZoom: number, maxZoom: number): Viewport;
+/** Pans by a screen-space delta. */
+declare function panBy(v: Viewport, dx: number, dy: number): Viewport;
+/** Zoom clamping and margin for `fitBounds`. */
+type FitInput = {
+  readonly padding: number;
+  readonly minZoom: number;
+  readonly maxZoom: number;
+};
+/**
+ * Computes the viewport that centres `bounds` (flow-space rectangle) in a
+ * pane of the given client size, with `padding` px of margin.
+ */
+declare function fitBounds(bounds: {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}, paneWidth: number, paneHeight: number, options: FitInput): Viewport;
+/** Smallest flow-space rectangle covering all the given rects. */
+declare function boundsOf(rects: ReadonlyArray<{
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}>): {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+/** The viewport that frames all `rects` in a pane of the given size (see {@link fitBounds}). */
+declare function fitRects(rects: ReadonlyArray<{
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}>, pane: {
+  readonly width: number;
+  readonly height: number;
+}, options: FitInput): Viewport;
+/** The slice of `GraphPortElement` the controller drives (structural, for tests). */
+interface WireDragPort {
+  setDragState(state: `valid` | `invalid` | undefined): void;
+  setMagnet(active: boolean, proximity: number): void;
+}
+type WireDragMode = `new` | `new-backward` | `detach`;
+/** A port eligible for snapping, in flow coordinates. */
+type ValidCandidate = {
+  readonly info: PortInfo;
+  readonly el: WireDragPort;
+  readonly pos: Point;
+};
+type DragState = {
+  readonly mode: WireDragMode;
+  readonly pointerId: number;
+  /** The fixed end of the preview wire. */
+  readonly anchor: PortInfo;
+  /** Anchor port centre, in flow coordinates. */
+  readonly anchorFlow: Point;
+  /** The picked-up wire (detach mode only). */
+  readonly originalEdge: GraphEdge | undefined;
+  /** Port graph the drag commits into (original edge removed when detaching). */
+  readonly workingGraph: Graphs.Directed.DirectedGraph;
+  readonly context: ConnectContext;
+  /** Valid candidates that have a position, in flow coordinates. */
+  candidates: ValidCandidate[];
+  /** Every port the rules allow, positioned or not (tucked-away ports gain a position when revealed). */
+  readonly valid: ReadonlyArray<{
+    readonly info: PortInfo;
+    readonly el: WireDragPort;
+  }>;
+  /** Every port element marked at drag start, for cleanup. */
+  readonly markedPorts: readonly WireDragPort[];
+  /** Ports with a proximity glow set, cleared when they fall out of range. */
+  readonly glowing: Set<WireDragPort>;
+  pointerFlow: Point;
+  client: Point;
+  readonly startClient: Point;
+  /** True once the pointer has moved past the drag threshold. */
+  moved: boolean;
+  goal: Point;
+  rendered: Point;
+  snap: SnapTarget | undefined;
+};
+type WireDragConfig = {
+  readonly getPane: () => HTMLElement | undefined;
+  readonly getPaneRect: () => DOMRect | undefined;
+  readonly getViewport: () => Viewport;
+  readonly getSnapRadius: () => number;
+  readonly getRulesOptions: () => ConnectionRulesOptions;
+  readonly getPortGraph: () => Graphs.Directed.DirectedGraph;
+  readonly getNodeGraph: () => Graphs.Directed.DirectedGraph;
+  readonly getAcyclic: () => boolean;
+  /** Port info for a port element, resolving its node key. */
+  readonly portInfoFor: (portEl: WireDragPort & {
+    readonly key?: string;
+  }) => PortInfo | undefined;
+  /** Port info for a port ref, for edges' stored refs. */
+  readonly portInfoForSource: (ref: PortRef) => PortInfo | undefined;
+  /** Every port element in the graph. */
+  readonly allPorts: () => readonly WireDragPort[];
+  /** Cached port offset (flow, node-relative) for a node/port pair. */
+  readonly portOffset: (nodeKey: string, portKey: string) => PortOffset | undefined;
+  /** Node position (flow) of a node key. */
+  readonly nodePosition: (nodeKey: string) => Point | undefined;
+  readonly setGestureActive: (active: boolean) => void;
+  /** Commits a new port graph and fires `graph-edges-change`. */
+  readonly commitEdges: (g: Graphs.Directed.DirectedGraph) => void;
+  /** Cancelable `graph-connect`. Returns `false` when cancelled. */
+  readonly requestConnect: (edge: GraphEdge, replaces: GraphEdge | undefined) => boolean;
+  /** Cancelable `graph-disconnect`. Returns `false` when cancelled. */
+  readonly requestDisconnect: (edges: readonly GraphEdge[], reason: DisconnectReason) => boolean;
+  /** `graph-connect-end`: a wire dropped on empty space. */
+  readonly emitConnectEnd: (from: PortRef, point: Point, client: Point) => void;
+  /** Easy connect: dropping anywhere on a node snaps to its best valid port. */
+  readonly getEasyConnect?: () => boolean;
+  /** Called with the pointer (flow coordinates) on every move of a wire drag, so tucked-away ports near it can be revealed. */
+  readonly onApproach?: (p: Point, client: Point) => void;
+  /** The topmost node containing a flow-space point. */
+  readonly nodeAt?: (p: Point) => string | undefined;
+  /** Re-render (preview path / edge visibility). */
+  readonly invalidate: () => void;
+  readonly prefersReducedMotion: () => boolean;
+};
+declare class WireDragController {
+  #private;
+  constructor(config: WireDragConfig);
+  /** While a wire is being dragged: its state, else `undefined`. */
+  get state(): Readonly<DragState> | undefined;
+  /** Edge id hidden while its loose end is dragged (detach mode). */
+  get detachedEdgeId(): string | undefined;
+  /** Preview path (flow coordinates), or `undefined` when not dragging. */
+  get previewPath(): string | undefined;
+  get active(): boolean;
+  onPointerDown(e: PointerEvent, info: PortInfo): boolean;
+  /** Call after a port was revealed or moved: positions are measured again, so newly visible ports become targets. */
+  relayout(): void;
+  onPointerMove(e: PointerEvent): void;
+  onPointerUp(e: PointerEvent): boolean;
+  onPointerCancel(_e: PointerEvent): boolean;
+  /** Escape pressed mid-drag: abort, restoring a detached wire. */
+  abort(): void;
+}
+export { measureNode as $, GraphNodeMovedEvent as $n, ContextKind as $t, ResizeHandle as A, ConnectionCheckReason as An, extendFromSide as At, withEntry as B, GraphDisconnectDetail as Bn, RouteEnd as Bt, blinkPeriodSeconds as C, parsePortId as Cn, forceState as Ct, isNodeShape as D, toEdges as Dn, edgeMidpoint as Dt, ShapeSpec as E, removeWire as En, defaultSide as Et, WirePath as F, GraphConnectEvent as Fn, EdgeHint as Ft, isEditableTarget as G, GraphNodeAddedDetail as Gn, MarqueeStartInput as Gt, PanZoomConfig as H, GraphEdge as Hn, inEasyConnectZone as Ht, renderWires as I, GraphContextMenuDetail as In, EdgeHintMap as It, NodeFactory as J, GraphNodeCollapseEvent as Jn, marqueeStyle as Jt, nodeGraphStyles as K, GraphNodeAddedEvent as Kn, TouchMode as Kt, MAX_FLOW_SPEED as L, GraphContextMenuEvent as Ln, EdgeRouteRequest as Lt, isResizeHandle as M, GraphConnectDetail as Mn, polylinePath as Mt, resizeRect as N, GraphConnectEndDetail as Nn, polylineShape as Nt, shapeSpec as O, toNodeGraph as On, edgePath as Ot, NodeGraphElement as P, GraphConnectEndEvent as Pn, stepPoints as Pt, collapsedOffset as Q, GraphNodeMoveEvent as Qn, wantsMarquee as Qt, WireFlowMap as R, GraphDeleteDetail as Rn, EdgeRouter as Rt, MAX_BLINK_HZ as S, outDegreeOf as Sn, forcePositions as St, NodeShape as T, removeNode as Tn, EDGE_CORNER_RADIUS as Tt, PanZoomController as U, GraphEdgesChangeDetail as Un, pickStartPort as Ut, withWireFlow as V, GraphDisconnectEvent as Vn, EASY_CONNECT_MARGIN as Vt, WheelMode as W, GraphEdgesChangeEvent as Wn, GraphRect as Wt, NodeLayout as X, GraphNodeGeometryEvent as Xn, rectFromPoints as Xt, NodeFactoryContext as Y, GraphNodeGeometryDetail as Yn, nodesInRect as Yt, PortOffset as Z, GraphNodeMoveDetail as Zn, rectsIntersect as Zt, selectionAfterNodePress as _, fromEdges as _n, PortInfo as _r, ForceNode as _t, FitInput as a, ConnectionRulesOptions as an, GraphPortChangeEvent as ar, MarqueeConfig as at, findProximityConnection as b, incomingEdge as bn, Viewport as br, forceMovement as bt, clampZoom as c, normaliseConnection as cn, GraphSnapshot as cr, SnapTarget as ct, flowToScreen as d, ConnectContext as dn, NodeGraphElementEventMap as dr, settled as dt, ContextTarget as en, GraphNodeResizeDetail as er, DRAG_THRESHOLD_PX as et, panBy as f, addWire as fn, NodeGraphViewState as fr, smoothStep as ft, selectionAfterEdgeClick as g, ensurePort as gn, PortDir as gr, ForceLink as gt, SelectionState as h, edgeId as hn, PointerGesture as hr, DEFAULT_FORCE_OPTIONS as ht, WireDragPort as i, removeNodes as in, GraphPortChangeDetail as ir, MARQUEE_THRESHOLD_PX as it, SizeLimits as j, DisconnectReason as jn, polylineMidpoint as jt, RESIZE_HANDLES as k, ConnectionCheck as kn, edgeShape as kt, fitBounds as l, resolveConnection as ln, GraphViewportChangeEvent as lr, findSnapTarget as lt, zoomAt as m, cycleBlockedNodes as mn, Point as mr, GraphPortElement as mt, WireDragController as n, BridgeDeps as nn, GraphNodeTitleDblclickDetail as nr, NodeDragConfig as nt, PaneOrigin as o, canConnect as on, GraphSelectionChangeDetail as or, MarqueeController as ot, screenToFlow as p, connectContext as pn, NodeMove as pr, GraphNodeElement as pt, AddedNode as q, GraphNodeCollapseDetail as qn, combineSelection as qt, WireDragMode as r, BridgeResult as rn, GraphNodeTitleDblclickEvent as rr, NodeDragController as rt, boundsOf as s, findValidWire as sn, GraphSelectionChangeEvent as sr, SnapCandidate as st, WireDragConfig as t, OpenableMenu as tn, GraphNodeResizeEvent as tr, DraggableNode as tt, fitRects as u, typesCompatible as un, IsValidConnection as ur, proximityFactor as ut, ProximityPair as v, hasWire as vn, PortRef as vr, ForceOptions as vt, NODE_SHAPES as w, portId as wn, forceStep as wt, rectGap as x, incomingEdges as xn, forcePin as xt, ProximityQuery as y, inDegreeOf as yn, PortSide as yr, ForceState as yt, sanitizeFlowSpeed as z, GraphDeleteEvent as zn, EdgeStyle as zt };