@stealthscale/component-graphs 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1175 @@
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { ButtonProps } from "@stealthscale/component-actions";
+import "@stealthscale/hooks";
+import { Edge, EdgeProps, EdgeTypes, MiniMapProps, Node, NodeProps, NodeTypes, ReactFlowProps, XYPosition } from "@xyflow/react";
+import { Palette } from "@stealthscale/theme/authoring";
+import { RovingFocus } from "@stealthscale/component-a11y";
+//#region src/graph/diffed.d.ts
+/**
+ * Describes the words of the changes a canvas marks, each with an English default.
+ */
+interface ChangeWords {
+  /**
+   * Word of an added node or edge. `Added` unless stated.
+   */
+  readonly addedLabel?: string | undefined;
+  /**
+   * Word of a changed node. `Changed` unless stated.
+   */
+  readonly changedLabel?: string | undefined;
+  /**
+   * Word of a removed node or edge. `Removed` unless stated.
+   */
+  readonly removedLabel?: string | undefined;
+}
+/**
+ * Describes the props a canvas marks changes by: a comparison and the words of its changes.
+ */
+interface CanvasChanges extends ChangeWords {
+  /**
+   * Comparison whose changes the canvas marks, such as `diffGraphs(before, after)`.
+   */
+  readonly changes?: GraphDiff | undefined;
+}
+//#endregion
+//#region src/graph/names.d.ts
+/**
+ * Describes the ends of an edge by their names, which the canvas's words turn into the edge's name.
+ */
+interface EdgeEnds {
+  /**
+   * Name of the node the edge leaves.
+   */
+  readonly source: string;
+  /**
+   * Name of the node the edge enters.
+   */
+  readonly target: string;
+}
+//#endregion
+//#region src/diff/diff.d.ts
+/**
+ * Describes what happened to a node or an edge between two versions.
+ */
+type GraphChangeType = "added" | "changed" | "removed" | "unchanged";
+/**
+ * Describes one node or edge of a comparison: what happened to it, and what it is called.
+ */
+interface GraphChange {
+  /**
+   * Kind of change the node or the edge went through.
+   */
+  readonly change: GraphChangeType;
+  /**
+   * Fields of a changed node's data that differ, sorted. Empty for anything else.
+   */
+  readonly fields: readonly string[];
+  /**
+   * Id of the node or the edge in the version it is in, the later one where it is in both.
+   */
+  readonly id: string;
+  /**
+   * Name of the node, or the edge's name from the names of its ends.
+   */
+  readonly label: string;
+}
+/**
+ * Describes a comparison of two versions of a graph, node by node and edge by edge.
+ */
+interface GraphDiff {
+  /**
+   * Every edge of either version.
+   */
+  readonly edges: readonly GraphChange[];
+  /**
+   * Every node of either version.
+   */
+  readonly nodes: readonly GraphChange[];
+}
+/**
+ * Describes one version of a graph: its nodes and its edges.
+ */
+interface GraphVersion {
+  /**
+   * Edges of the version.
+   */
+  readonly edges: readonly Edge[];
+  /**
+   * Nodes of the version.
+   */
+  readonly nodes: readonly Node[];
+}
+/**
+ * Returns what the later version of a graph adds, changes and removes, node by node and edge by
+ * edge.
+ *
+ * @param before - The earlier version.
+ * @param after - The later version.
+ * @param edgeName - Writes an edge's name from the names of its ends. `Orders to Revenue` unless
+ *   stated.
+ */
+export declare function diffGraphs(before: GraphVersion, after: GraphVersion, edgeName?: (ends: EdgeEnds) => string): GraphDiff;
+//#endregion
+//#region src/graph/walk.d.ts
+/**
+ * Walks a graph's links from one node, forward or backward, within a number of hops.
+ *
+ * @remarks
+ *   The walk stops at a node it visited before, so a cycle never hangs it. It never counts the node
+ *   it starts from, so a cycle that leads back to the start does not make the start its own
+ *   neighbour.
+ */
+/**
+ * Describes a link between two nodes by their ids.
+ */
+interface Link {
+  /**
+   * Id of the node the link leaves.
+   */
+  readonly source: string;
+  /**
+   * Id of the node the link enters.
+   */
+  readonly target: string;
+}
+//#endregion
+//#region src/directed-graph/branches.d.ts
+/**
+ * Returns the ids of every node a node leads to, not counting the node itself.
+ */
+export declare function descendantsOf(links: readonly Link[], id: string): ReadonlySet<string>;
+/**
+ * Returns the ids of the nodes the collapsed nodes hide.
+ *
+ * @param ids - Every node of the graph.
+ * @param links - The graph's links.
+ * @param collapsed - The nodes whose branches are closed.
+ */
+export declare function hiddenBy(ids: readonly string[], links: readonly Link[], collapsed: ReadonlySet<string>): ReadonlySet<string>;
+//#endregion
+//#region src/graph/editing.d.ts
+/**
+ * Describes the kind of edit a step records.
+ */
+type GraphStepType = "connect" | "move" | "remove";
+/**
+ * Describes one edit to a graph: its kind and the nodes and edges it touched.
+ */
+interface GraphStep {
+  /**
+   * Ids of the edges the edit connected or removed.
+   */
+  readonly edges: readonly string[];
+  /**
+   * Ids of the nodes the edit moved or removed.
+   */
+  readonly nodes: readonly string[];
+  /**
+   * Kind of the edit.
+   */
+  readonly type: GraphStepType;
+}
+/**
+ * Describes a graph after an edit.
+ *
+ * @typeParam N - One node of the graph.
+ * @typeParam E - One edge of the graph.
+ */
+interface GraphEdit<N extends Node, E extends Edge> {
+  /**
+   * Edges of the graph after the edit.
+   */
+  readonly edges: E[];
+  /**
+   * Nodes of the graph after the edit.
+   */
+  readonly nodes: N[];
+}
+/**
+ * Describes the props a canvas reports edits and drops through.
+ *
+ * @typeParam N - One node of the graph.
+ * @typeParam E - One edge of the graph.
+ */
+interface CanvasEdits<N extends Node, E extends Edge> {
+  /**
+   * Called with a palette item's id and the point in the graph a person dropped it at.
+   */
+  readonly onDropItem?: ((item: string, position: XYPosition) => void) | undefined;
+  /**
+   * Channel every edit on the canvas arrives through, as the graph after it and a step, while the
+   * canvas's `nodes` and `edges` are the caller's.
+   */
+  readonly onGraphChange?: ((graph: GraphEdit<N, E>, step: GraphStep) => void) | undefined;
+}
+//#endregion
+//#region src/graph/words.d.ts
+/**
+ * Describes the move React Flow announces after an arrow key moves the selected nodes.
+ */
+interface Move {
+  /**
+   * Way the nodes moved: `up`, `down`, `left` or `right`.
+   */
+  readonly direction: string;
+  /**
+   * Position across the canvas the node was at before the move.
+   */
+  readonly x: number;
+  /**
+   * Position down the canvas the node was at before the move.
+   */
+  readonly y: number;
+}
+/**
+ * Describes the words a canvas gives a screen reader, each with an English default.
+ */
+interface CanvasWords {
+  /**
+   * Instruction every edge of an editable canvas is described by.
+   */
+  readonly edgeDescription?: string | undefined;
+  /**
+   * Writes the name of an edge without a name of its own from the names of its ends.
+   * `Orders to Clean orders` unless stated.
+   */
+  readonly edgeName?: ((ends: EdgeEnds) => string) | undefined;
+  /**
+   * Writes the announcement of a move the arrow keys make.
+   */
+  readonly moveAnnouncement?: ((move: Move) => string) | undefined;
+  /**
+   * Instruction every node of an editable canvas is described by.
+   */
+  readonly nodeDescription?: string | undefined;
+  /**
+   * Writes the name of an edge's remove control from the names of its ends, for an edge whose data
+   * states no `removeLabel`. `Remove the connection from Orders to Clean orders` unless stated.
+   */
+  readonly removeName?: ((ends: EdgeEnds) => string) | undefined;
+}
+//#endregion
+//#region src/graph/canvas.d.ts
+/**
+ * Describes the props of the canvas: the graph, its name, its mode, its words, its edits, and
+ * React Flow's props.
+ *
+ * @typeParam N - One node of the graph.
+ * @typeParam E - One edge of the graph.
+ */
+interface CanvasProps<N extends Node = Node, E extends Edge = Edge> extends CanvasChanges, CanvasEdits<N, E>, CanvasWords, Omit<ReactFlowProps<N, E>, "aria-label" | "ariaLabelConfig" | "children" | "className" | "colorMode" | "style"> {
+  /**
+   * Whether the canvas renders its dotted background. On unless stated.
+   */
+  readonly background?: boolean | undefined;
+  /**
+   * Elements React Flow renders over the canvas, such as a panel of the caller's. The kit's
+   * controls and overview map go beside the canvas, in `Graph.Root`.
+   */
+  readonly children?: ReactNode | undefined;
+  /**
+   * Accessible name of the canvas.
+   */
+  readonly label: string;
+  /**
+   * Whether the canvas is read and not edited.
+   */
+  readonly readOnly?: boolean | undefined;
+  /**
+   * Glyph of every edge's remove control, from the caller. No remove control renders without one.
+   */
+  readonly removeGlyph?: ReactNode | undefined;
+}
+/**
+ * Renders React Flow in the canvas's box with the kit's types, words, names, switches and edits.
+ *
+ * @typeParam N - One node of the graph.
+ * @typeParam E - One edge of the graph.
+ * @param props - The graph, its name, its mode, its words, its edits, and React Flow's props.
+ */
+declare function Canvas<N extends Node = Node, E extends Edge = Edge>(props: CanvasProps<N, E>): ReactElement;
+//#endregion
+//#region src/graph/caption.d.ts
+/**
+ * Renders the `figcaption` with the recipe's caption class.
+ */
+declare const Shown$1: import("@stealthscale/theme").StyledComponent<"figcaption", {}>;
+/**
+ * Describes the props of the caption: the props of a `figcaption`.
+ */
+type CaptionProps = ComponentProps<typeof Shown$1>;
+/**
+ * Renders the caption with the ID the root names the figure by.
+ *
+ * @param props - The props of the `figcaption`.
+ */
+declare function Caption(props: CaptionProps): ReactElement;
+//#endregion
+//#region src/graph/control.d.ts
+/**
+ * Describes what a control does to the view.
+ */
+type ControlAction = "fit" | "zoomIn" | "zoomOut";
+/**
+ * Describes the props of a control: what it does, its name, and a roving item's props.
+ */
+interface ControlProps extends Omit<RovingFocus.ItemProps, "aria-label" | "as" | "onClick"> {
+  /**
+   * Action the control takes on the view: zoom in, zoom out, or fit the graph in view.
+   */
+  readonly action: ControlAction;
+  /**
+   * Accessible name of the control, such as `Zoom in`.
+   */
+  readonly label: string;
+}
+/**
+ * Renders the control as a toolbar item that zooms or fits the view when pressed.
+ *
+ * @param props - The action, the name and the item's props.
+ */
+declare function Control({ action, label, ...props }: ControlProps): ReactElement;
+//#endregion
+//#region src/graph/controls.d.ts
+/**
+ * Describes the props of the controls: their name and the roving focus group's props.
+ */
+interface ControlsProps extends Omit<RovingFocus.RootProps, "aria-label" | "role"> {
+  /**
+   * Accessible name of the toolbar. `Canvas` unless stated.
+   */
+  readonly label?: string | undefined;
+}
+/**
+ * Renders the toolbar with small ghost buttons.
+ *
+ * @param props - The name and the group's props.
+ */
+declare function Controls({ label, ...props }: ControlsProps): ReactElement;
+//#endregion
+//#region src/graph/edge.d.ts
+/**
+ * Describes the data of the kit's edge.
+ */
+interface GraphEdgeData extends Record<string, unknown> {
+  /**
+   * Name of the edge's remove control, such as `Remove Draft to Judge`, over the name the canvas's
+   * `removeName` writes.
+   */
+  readonly removeLabel?: string | undefined;
+}
+/**
+ * Describes an edge the kit renders.
+ */
+type GraphEdgeType = Edge<GraphEdgeData>;
+/**
+ * Renders the edge's path, and its remove control while the canvas takes edits.
+ *
+ * @param props - React Flow's edge props: its ends, its sides and its data among them.
+ */
+declare function Edge$1(props: EdgeProps<GraphEdgeType>): ReactElement;
+//#endregion
+//#region src/graph/empty.d.ts
+/**
+ * Renders the `div` with the recipe's empty class.
+ */
+declare const Empty: import("@stealthscale/theme").StyledComponent<"div", {}>;
+/**
+ * Describes the props of the empty state: the props of a `div`.
+ */
+type EmptyProps = ComponentProps<typeof Empty>;
+//#endregion
+//#region src/layout/rank.d.ts
+/**
+ * Describes the way a graph's edges run: down the canvas, or across it to the right.
+ */
+type GraphDirection = "down" | "right";
+/**
+ * Describes how `layoutGraph` places the ranks.
+ */
+interface RankOptions {
+  /**
+   * Way the edges run. Down unless stated.
+   */
+  readonly direction?: GraphDirection | undefined;
+  /**
+   * Space between two nodes of one rank, in pixels. 48 unless stated.
+   */
+  readonly nodesep?: number | undefined;
+  /**
+   * Space between two ranks, in pixels. 128 unless stated.
+   */
+  readonly ranksep?: number | undefined;
+}
+/**
+ * Returns the nodes placed in ranks, each with the size it was placed by as its initial size and
+ * the sides its edges leave and enter.
+ *
+ * @typeParam N - One node of the graph.
+ * @param nodes - The graph's nodes, in any order.
+ * @param edges - The links between the nodes, of which one to a node outside `nodes` takes no part.
+ * @param options - The direction and the spacing.
+ */
+export declare function layoutGraph<N extends Node>(nodes: readonly N[], edges: readonly Edge[], options?: RankOptions): N[];
+//#endregion
+//#region src/graph/ports.d.ts
+/**
+ * Describes one port of a node: its identity, its name, and whether it takes new connections.
+ */
+interface GraphPort {
+  /**
+   * Whether the port refuses new connections. It still renders.
+   */
+  readonly disabled?: boolean | undefined;
+  /**
+   * Identity an edge's `sourceHandle` or `targetHandle` names the port by.
+   */
+  readonly id: string;
+  /**
+   * Name of the port, such as `Pass` beside `Fail`.
+   */
+  readonly label: string;
+  /**
+   * Whether no edge meets the port. An unused port is still rendered and measured, and is
+   * invisible, so an edge that meets it later finds it.
+   */
+  readonly unused?: boolean | undefined;
+}
+//#endregion
+//#region src/graph/node.d.ts
+/**
+ * Describes a node's status: the palette of its dot and its word.
+ */
+interface GraphStatus {
+  /**
+   * Word of the status, such as `Running`.
+   */
+  readonly label: string;
+  /**
+   * Palette of the status's dot.
+   */
+  readonly palette: Palette;
+}
+/**
+ * Describes the props of a node's card.
+ */
+interface NodeProps$1 {
+  /**
+   * Controls in the header, such as a menu, outside the drag surface.
+   */
+  readonly actions?: ReactNode | undefined;
+  /**
+   * Control on the middle of the card's bottom edge, such as one that opens and closes the node's
+   * branch.
+   */
+  readonly branch?: ReactNode | undefined;
+  /**
+   * Body of the card, such as a configuration's summary.
+   */
+  readonly children?: ReactNode | undefined;
+  /**
+   * Whether the card recedes, as a node outside a traced path does.
+   */
+  readonly dimmed?: boolean | undefined;
+  /**
+   * Way this node's edges run, where it differs from the graph's.
+   */
+  readonly direction?: GraphDirection | undefined;
+  /**
+   * Glyph before the title, from the caller. Hidden from assistive technology.
+   */
+  readonly icon?: ReactNode | undefined;
+  /**
+   * Ports edges enter, in order along their side.
+   */
+  readonly inputs?: readonly GraphPort[] | undefined;
+  /**
+   * Whether the node is misconfigured, which edges the card in the error ink.
+   */
+  readonly invalid?: boolean | undefined;
+  /**
+   * Ports edges leave, in order along their side.
+   */
+  readonly outputs?: readonly GraphPort[] | undefined;
+  /**
+   * Fault of an invalid node in one line, shown under the body.
+   */
+  readonly problem?: ReactNode | undefined;
+  /**
+   * Status of the node, a dot in a palette beside a word.
+   */
+  readonly status?: GraphStatus | undefined;
+  /**
+   * Line under the title, such as the model or the condition.
+   */
+  readonly subtitle?: ReactNode | undefined;
+  /**
+   * Word above the card's top edge at its end, such as the node's relation to a traced node.
+   */
+  readonly tag?: ReactNode | undefined;
+  /**
+   * Title of the node.
+   */
+  readonly title: ReactNode;
+}
+/**
+ * Renders the card with its ports, header, body, problem line, tag and branch control.
+ *
+ * @remarks
+ *   The branch control renders after the ports, so it covers the handle of the side it is on.
+ * @param props - The title, the details, the ports and the states.
+ */
+declare function Node$1(props: NodeProps$1): ReactElement;
+//#endregion
+//#region src/graph/label-node.d.ts
+/**
+ * Describes the data of a node of a built-in type: its words, its ports and its states.
+ */
+interface LabelNodeData extends Record<string, unknown> {
+  /**
+   * Line in the card's body.
+   */
+  readonly detail?: string | undefined;
+  /**
+   * Glyph before the title, from the caller.
+   */
+  readonly icon?: ReactNode | undefined;
+  /**
+   * Ports edges enter. `In` unless stated, and none on an `input` node.
+   */
+  readonly inputs?: readonly GraphPort[] | undefined;
+  /**
+   * Whether the node is misconfigured.
+   */
+  readonly invalid?: boolean | undefined;
+  /**
+   * Title of the node.
+   */
+  readonly label: string;
+  /**
+   * Ports edges leave. `Out` unless stated, and none on an `output` node.
+   */
+  readonly outputs?: readonly GraphPort[] | undefined;
+  /**
+   * Fault of an invalid node in one line.
+   */
+  readonly problem?: string | undefined;
+  /**
+   * Status of the node.
+   */
+  readonly status?: GraphStatus | undefined;
+  /**
+   * Line under the title.
+   */
+  readonly subtitle?: string | undefined;
+}
+/**
+ * Describes a node of a built-in type.
+ */
+type LabelNodeType = Node<LabelNodeData, "default" | "input" | "output">;
+/**
+ * Renders the card of a built-in node from its data, with the ports its type has.
+ *
+ * @param props - React Flow's node props: its data and its type among them.
+ */
+declare function LabelNode({ data, type }: NodeProps<LabelNodeType>): ReactElement;
+//#endregion
+//#region src/graph/minimap.d.ts
+/**
+ * Describes the props of the overview map: its name and the props of React Flow's minimap.
+ */
+interface MiniMapProps$1 extends Omit<MiniMapProps, "ariaLabel"> {
+  /**
+   * Accessible name of the map. `Overview` unless stated.
+   */
+  readonly label?: string | undefined;
+}
+/**
+ * Renders React Flow's minimap in the overview box, named, pannable and zoomable.
+ *
+ * @param props - The name and the props of React Flow's minimap.
+ */
+declare function MiniMap$1({ label, ...props }: MiniMapProps$1): ReactElement;
+//#endregion
+//#region src/graph/palette-item.d.ts
+/**
+ * Describes the props of a palette item: the kind of node it adds, what a press does, and the
+ * button's props.
+ */
+interface PaletteItemProps extends Omit<ButtonProps, "draggable" | "onClick" | "onDragStart"> {
+  /**
+   * Id of the kind of node the item adds, which a drop and a press report.
+   */
+  readonly item: string;
+  /**
+   * Called with the item's id and the middle of the view when a person presses the item.
+   */
+  readonly onAdd: (item: string, position: XYPosition) => void;
+}
+/**
+ * Renders the item as a button a person drags onto the canvas or presses.
+ *
+ * @param props - The kind of node, what a press does, and the button's props.
+ */
+declare function PaletteItem({ item, onAdd, ...props }: PaletteItemProps): ReactElement;
+//#endregion
+//#region src/graph/root.d.ts
+/**
+ * Renders the `figure` that provides the recipe's variants.
+ */
+declare const Figure: import("@stealthscale/theme").StyledComponent<"figure", {
+  readonly ratio?: import("@stealthscale/theme/authoring").Ratio;
+}>;
+/**
+ * Describes the props of the root: the graph's direction, the recipe's variants and the props of a
+ * `figure`.
+ *
+ * @remarks
+ *   The figure's props leave out `direction`, the style prop, because the root takes `direction` as
+ *   the way the graph's edges run.
+ */
+interface RootProps extends Omit<ComponentProps<typeof Figure>, "direction"> {
+  /**
+   * Way the graph's edges run, which puts each node's inputs and outputs on the matching sides.
+   * Down unless stated.
+   */
+  readonly direction?: GraphDirection | undefined;
+}
+/**
+ * Renders the figure inside React Flow's provider, named by its caption while one renders.
+ *
+ * @param props - The direction, the recipe's variants and the props of a `figure`.
+ * @returns The `figure` element inside the providers.
+ */
+declare function Root({ direction, ...props }: RootProps): ReactElement;
+//#endregion
+//#region src/graph/state.d.ts
+/**
+ * Returns the way the graph's edges run.
+ */
+declare function useGraphDirection(): GraphDirection;
+//#endregion
+//#region src/graph/summary.d.ts
+/**
+ * Renders the `div` with the recipe's summary class.
+ */
+declare const Summary: import("@stealthscale/theme").StyledComponent<"div", {}>;
+/**
+ * Describes the props of the summary: the props of a `div`.
+ */
+type SummaryProps = ComponentProps<typeof Summary>;
+//#endregion
+//#region src/graph/types.d.ts
+/**
+ * Maps React Flow's `default`, `input` and `output` node types to the kit's node.
+ */
+declare const NODE_TYPES: NodeTypes;
+/**
+ * Maps React Flow's `default` edge type to the kit's edge.
+ */
+declare const EDGE_TYPES: EdgeTypes;
+//#endregion
+//#region src/graph/zoom-level.d.ts
+/**
+ * Renders the `output` with the recipe's level class.
+ */
+declare const Shown: import("@stealthscale/theme").StyledComponent<"output", {}>;
+/**
+ * Describes the props of the zoom level: its locale and the props of an `output`.
+ */
+interface ZoomLevelProps extends Omit<ComponentProps<typeof Shown>, "children"> {
+  /**
+   * Locale the percentage is written in.
+   */
+  readonly locale?: string | undefined;
+}
+/**
+ * Renders the canvas's zoom as a percentage.
+ *
+ * @param props - The locale and the props of the `output`.
+ */
+declare function ZoomLevel({ locale, ...props }: ZoomLevelProps): ReactElement;
+declare namespace index_d_exports {
+  export { Canvas, CanvasChanges, CanvasEdits, CanvasProps, CanvasWords, Caption, CaptionProps, ChangeWords, Control, ControlAction, ControlProps, Controls, ControlsProps, Edge$1 as Edge, EdgeEnds, Empty, EmptyProps, GraphEdgeData, GraphEdgeType, GraphEdit, GraphPort, GraphStatus, GraphStep, GraphStepType, LabelNode, LabelNodeData, LabelNodeType, MiniMap$1 as MiniMap, MiniMapProps$1 as MiniMapProps, Move, Node$1 as Node, NodeProps$1 as NodeProps, PaletteItem, PaletteItemProps, Root, RootProps, Summary, SummaryProps, ZoomLevel, ZoomLevelProps, EDGE_TYPES as edgeTypes, NODE_TYPES as nodeTypes, useGraphDirection };
+}
+//#endregion
+//#region src/directed-graph/types.d.ts
+/**
+ * Describes one node of a directed graph: a table, a model, a person.
+ */
+interface DirectedNode {
+  /**
+   * Line in the card's body.
+   */
+  readonly detail?: ReactNode | undefined;
+  /**
+   * Glyph before the name, from the caller. Hidden from assistive technology.
+   */
+  readonly icon?: ReactNode | undefined;
+  /**
+   * Identity the edges name the node by.
+   */
+  readonly id: string;
+  /**
+   * Kind of the node, such as `Table` or `Dashboard`, written under the name.
+   */
+  readonly kind?: string | undefined;
+  /**
+   * Name of the node, which is also its accessible name.
+   */
+  readonly label: string;
+  /**
+   * Freshness or health of the node, a dot in a palette beside a word.
+   */
+  readonly status?: GraphStatus | undefined;
+}
+/**
+ * Describes one edge of a directed graph: the node it leaves and the node it enters.
+ */
+interface DirectedEdge {
+  /**
+   * Identity of the edge. The ids of its ends, joined by a hyphen, unless stated.
+   */
+  readonly id?: string | undefined;
+  /**
+   * Id of the node the edge leaves, such as the table a model reads.
+   */
+  readonly source: string;
+  /**
+   * Id of the node the edge enters, such as the model that reads the table.
+   */
+  readonly target: string;
+}
+/**
+ * Describes what a focus does to the other nodes: dims the nodes its trace leaves out, renders only
+ * the nodes its trace finds, or only selects.
+ */
+type TraceMode = "highlight" | "isolate" | "off";
+/**
+ * Describes a trace for the summary's words: the focused node's name and the number of nodes each
+ * way.
+ */
+interface Counts {
+  /**
+   * Number of nodes the focused node feeds.
+   */
+  readonly downstream: number;
+  /**
+   * Name of the focused node.
+   */
+  readonly name: string;
+  /**
+   * Number of nodes that feed the focused node.
+   */
+  readonly upstream: number;
+}
+/**
+ * Describes the words a directed graph writes, each with an English default.
+ */
+interface DirectedWords {
+  /**
+   * Words of the control that drops the focus. `Clear focus` unless stated.
+   */
+  readonly clearLabel?: string | undefined;
+  /**
+   * Writes the words of the control that closes a branch from the number of nodes it hides.
+   * `Hide 5` unless stated.
+   */
+  readonly collapseLabel?: ((count: number) => string) | undefined;
+  /**
+   * Word for a node the focused node feeds, which also names every port edges leave.
+   * `Downstream` unless stated.
+   */
+  readonly downstreamLabel?: string | undefined;
+  /**
+   * Writes the name of an edge from the names of its ends. `Orders to Revenue` unless stated.
+   */
+  readonly edgeName?: ((ends: EdgeEnds) => string) | undefined;
+  /**
+   * Message in the canvas's place while the graph has no node. `No nodes to show.` unless stated.
+   */
+  readonly emptyLabel?: ReactNode | undefined;
+  /**
+   * Writes the words of the control that opens a branch from the number of nodes it shows.
+   * `Show 5` unless stated.
+   */
+  readonly expandLabel?: ((count: number) => string) | undefined;
+  /**
+   * Word for the focused node. `Focus` unless stated.
+   */
+  readonly focusLabel?: string | undefined;
+  /**
+   * Instruction every node is described by for a screen reader, which offers Enter, Space and
+   * Escape unless stated.
+   */
+  readonly nodeDescription?: string | undefined;
+  /**
+   * Words of the summary while nothing is focused.
+   */
+  readonly promptLabel?: ReactNode | undefined;
+  /**
+   * Writes the summary of a trace. `Revenue: 3 upstream, 2 downstream` unless stated.
+   */
+  readonly summary?: ((counts: Counts) => ReactNode) | undefined;
+  /**
+   * Word for a node that feeds the focused node, which also names every port edges enter.
+   * `Upstream` unless stated.
+   */
+  readonly upstreamLabel?: string | undefined;
+}
+/**
+ * Describes the props of a directed graph: the graph, its focus and branches, its parts beside the
+ * canvas, its words, and the props of `Graph.Root`.
+ */
+interface DirectedGraphProps extends DirectedWords, Omit<RootProps, "children"> {
+  /**
+   * The finding in words, which names the figure.
+   */
+  readonly caption?: ReactNode | undefined;
+  /**
+   * Ids of the nodes whose branches are closed, controlled.
+   */
+  readonly collapsed?: readonly string[] | undefined;
+  /**
+   * Whether a node that leads to other nodes renders a control that closes its branch.
+   */
+  readonly collapsible?: boolean | undefined;
+  /**
+   * Toolbar above the canvas, such as `Graph.Controls` with the caller's glyphs.
+   */
+  readonly controls?: ReactNode | undefined;
+  /**
+   * Ids of the nodes whose branches are closed on the first render.
+   */
+  readonly defaultCollapsed?: readonly string[] | undefined;
+  /**
+   * Node focused on the first render, or `null` for none.
+   */
+  readonly defaultFocus?: null | string | undefined;
+  /**
+   * Number of hops each way a trace follows. Every hop unless stated.
+   */
+  readonly depth?: number | undefined;
+  /**
+   * Edges of the graph.
+   */
+  readonly edges: readonly DirectedEdge[];
+  /**
+   * Focused node, controlled, or `null` for none.
+   */
+  readonly focus?: null | string | undefined;
+  /**
+   * Accessible name of the canvas.
+   */
+  readonly label: string;
+  /**
+   * Nodes of the graph, in any order.
+   */
+  readonly nodes: readonly DirectedNode[];
+  /**
+   * Called with the ids of the closed branches whenever a branch opens or closes.
+   */
+  readonly onCollapsedChange?: ((ids: string[]) => void) | undefined;
+  /**
+   * Called with the focused node's id, or `null` when the focus is dropped.
+   */
+  readonly onFocusChange?: ((id: null | string) => void) | undefined;
+  /**
+   * Overview map below the canvas, such as `Graph.MiniMap`.
+   */
+  readonly overview?: ReactNode | undefined;
+  /**
+   * Effect of a focus on the other nodes. `highlight` unless stated.
+   */
+  readonly trace?: TraceMode | undefined;
+}
+//#endregion
+//#region src/directed-graph/directed-graph.d.ts
+/**
+ * Renders the figure: the controls, the canvas, its readout with the overview, and the caption,
+ * or the empty state while the graph has no node.
+ *
+ * @param props - The graph, its focus and branches, its parts, its words and the figure's props.
+ */
+export declare function DirectedGraph(props: DirectedGraphProps): ReactElement;
+//#endregion
+//#region src/directed-graph/trace.d.ts
+/**
+ * Describes the nodes a trace found in each direction.
+ */
+interface Trace {
+  /**
+   * Ids of the nodes the focused node feeds.
+   */
+  readonly downstream: ReadonlySet<string>;
+  /**
+   * Ids of the nodes that feed the focused node.
+   */
+  readonly upstream: ReadonlySet<string>;
+}
+/**
+ * Describes where a node is against the focused node.
+ */
+type Relation = "downstream" | "focus" | "unrelated" | "upstream";
+/**
+ * Returns the nodes that feed a node and the nodes it feeds, within `depth` hops.
+ *
+ * @param links - Every edge of the graph, by the ids of its ends.
+ * @param id - The node the trace starts from, which is in neither set.
+ * @param depth - How many hops each way count. Every hop unless stated.
+ */
+export declare function traceGraph(links: readonly Link[], id: string, depth?: number): Trace;
+/**
+ * Returns where a node is against the focused node of a trace.
+ */
+export declare function relationOf(id: string, focus: string, trace: Trace): Relation;
+//#endregion
+//#region src/directed-graph/tree.d.ts
+/**
+ * Turns a flat list whose items name their parent into the edges of a tree.
+ *
+ * @remarks
+ *   An HR system, a file index or a category table stores a hierarchy as a parent field on each
+ *   item, so a caller does not rebuild it into nested children. An item whose parent is not in the
+ *   list becomes a root, so a list filtered to one department still renders. Each edge's id is the
+ *   parent's id and the child's id, joined by a hyphen.
+ */
+/**
+ * Describes an edge of a tree: its id and the ids of its parent and its child.
+ */
+interface TreeEdge {
+  /**
+   * The parent's id and the child's id, joined by a hyphen.
+   */
+  readonly id: string;
+  /**
+   * Id of the parent.
+   */
+  readonly source: string;
+  /**
+   * Id of the child.
+   */
+  readonly target: string;
+}
+/**
+ * Describes an item of a flat list by its identity, which its children name as their parent.
+ */
+interface TreeItem {
+  /**
+   * Identity of the item.
+   */
+  readonly id: string;
+}
+/**
+ * Returns an edge from each item's parent to the item, for every item whose parent is in the list.
+ *
+ * @typeParam T - One item of the list.
+ * @param items - The items, in any order.
+ * @param parentOf - Returns an item's parent's id, or undefined for an item without one.
+ */
+export declare function treeEdges<T extends TreeItem>(items: readonly T[], parentOf: (item: T) => string | undefined): TreeEdge[];
+//#endregion
+//#region src/layout/force.d.ts
+/**
+ * Describes a link a force layout pulls its ends together along.
+ */
+interface ForceLink extends Link {
+  /**
+   * How strongly the link ties its ends, 1 unless stated. A tie of 2 or more pulls the ends twice
+   * as close as a tie of 1.
+   */
+  readonly strength?: number | undefined;
+}
+/**
+ * Describes how `layoutForce` runs its simulation.
+ */
+interface ForceOptions {
+  /**
+   * Number of the simulation's steps. 300 unless stated.
+   */
+  readonly iterations?: number | undefined;
+  /**
+   * Number the start's order of neighbours comes from. The same seed and graph give the same
+   * positions. 1 unless stated.
+   */
+  readonly seed?: number | undefined;
+}
+/**
+ * Returns the nodes placed by the force simulation, each with the size it was placed by as its
+ * initial size.
+ *
+ * @typeParam N - One node of the graph.
+ * @param nodes - The graph's nodes, in any order.
+ * @param links - The links between the nodes, read as undirected.
+ * @param options - The number of steps and the seed.
+ */
+export declare function layoutForce<N extends Node>(nodes: readonly N[], links: readonly ForceLink[], options?: ForceOptions): N[];
+//#endregion
+//#region src/network-graph/types.d.ts
+/**
+ * Describes one node of a network: a service, a bank, a person.
+ */
+interface NetworkNode {
+  /**
+   * Glyph in the disc, from the caller. Hidden from assistive technology.
+   */
+  readonly icon?: ReactNode | undefined;
+  /**
+   * Identity the links name the node by.
+   */
+  readonly id: string;
+  /**
+   * Name under the disc, which is also the node's accessible name.
+   */
+  readonly label: string;
+  /**
+   * Importance of the node, which sizes its disc against the heaviest node's. The number of its
+   * links unless stated.
+   */
+  readonly weight?: number | undefined;
+}
+/**
+ * Describes one link of a network: two nodes it ties, read the same either way round.
+ */
+interface NetworkLink extends ForceLink {
+  /**
+   * Identity of the link. The ids of its ends, joined by a hyphen, unless stated.
+   */
+  readonly id?: string | undefined;
+}
+/**
+ * Describes a focused node for the summary's words: its name and the number of nodes it connects
+ * to.
+ */
+interface Connections {
+  /**
+   * Number of nodes within `depth` hops of the focused node.
+   */
+  readonly count: number;
+  /**
+   * Name of the focused node.
+   */
+  readonly name: string;
+}
+/**
+ * Describes the words a network graph writes, each with an English default.
+ */
+interface NetworkWords {
+  /**
+   * Words of the control that drops the focus. `Clear focus` unless stated.
+   */
+  readonly clearLabel?: string | undefined;
+  /**
+   * Writes the name of a link from the names of its ends. `Orders and Billing` unless stated.
+   */
+  readonly edgeName?: ((ends: EdgeEnds) => string) | undefined;
+  /**
+   * Message in the canvas's place while the graph has no node. `No nodes to show.` unless stated.
+   */
+  readonly emptyLabel?: ReactNode | undefined;
+  /**
+   * Word the focused node's accessible name ends with. `Focus` unless stated.
+   */
+  readonly focusLabel?: string | undefined;
+  /**
+   * Writes the announcement of a move the arrow keys make.
+   */
+  readonly moveAnnouncement?: ((move: Move) => string) | undefined;
+  /**
+   * Word the accessible name of a node the focused node connects to ends with. `Connected` unless
+   * stated.
+   */
+  readonly neighborLabel?: string | undefined;
+  /**
+   * Instruction every node is described by for a screen reader, which offers Enter, Space, Escape
+   * and, while nodes can be dragged, the arrow keys unless stated.
+   */
+  readonly nodeDescription?: string | undefined;
+  /**
+   * Words of the summary while nothing is focused.
+   */
+  readonly promptLabel?: ReactNode | undefined;
+  /**
+   * Writes the summary of a focus. `Orders: 3 connections` unless stated.
+   */
+  readonly summary?: ((connections: Connections) => ReactNode) | undefined;
+}
+/**
+ * Describes the props of a network graph: the graph, its focus, its layout, its parts beside the
+ * canvas, its words, and the props of `Graph.Root`.
+ */
+interface NetworkGraphProps extends NetworkWords, Omit<RootProps, "children" | "direction"> {
+  /**
+   * The finding in words, which names the figure.
+   */
+  readonly caption?: ReactNode | undefined;
+  /**
+   * Toolbar above the canvas, such as `Graph.Controls` with the caller's glyphs.
+   */
+  readonly controls?: ReactNode | undefined;
+  /**
+   * Node focused on the first render, or `null` for none.
+   */
+  readonly defaultFocus?: null | string | undefined;
+  /**
+   * Number of hops from the focused node within which a node is lit. 1 unless stated.
+   */
+  readonly depth?: number | undefined;
+  /**
+   * Whether a person can move a node by dragging it or by the arrow keys. On unless stated.
+   */
+  readonly draggable?: boolean | undefined;
+  /**
+   * Focused node, controlled, or `null` for none.
+   */
+  readonly focus?: null | string | undefined;
+  /**
+   * Number of the layout's steps. 300 unless stated.
+   */
+  readonly iterations?: number | undefined;
+  /**
+   * Accessible name of the canvas.
+   */
+  readonly label: string;
+  /**
+   * Links of the graph, read the same either way round.
+   */
+  readonly links: readonly NetworkLink[];
+  /**
+   * Nodes of the graph, in any order.
+   */
+  readonly nodes: readonly NetworkNode[];
+  /**
+   * Called with the focused node's id, or `null` when the focus is dropped.
+   */
+  readonly onFocusChange?: ((id: null | string) => void) | undefined;
+  /**
+   * Overview map below the canvas, such as `Graph.MiniMap`.
+   */
+  readonly overview?: ReactNode | undefined;
+  /**
+   * Number the layout starts from. The same seed and graph give the same picture. 1 unless stated.
+   */
+  readonly seed?: number | undefined;
+}
+//#endregion
+//#region src/network-graph/network-graph.d.ts
+/**
+ * Renders the figure: the controls, the canvas, its readout with the overview, and the caption,
+ * or the empty state while the graph has no node.
+ *
+ * @param props - The graph, its focus, its layout, its parts, its words and the figure's props.
+ */
+export declare function NetworkGraph(props: NetworkGraphProps): ReactElement;
+//#endregion
+//#region src/network-graph/network.d.ts
+/**
+ * Returns the nodes within `depth` hops of a node, following each link either way round.
+ *
+ * @param links - The graph's links.
+ * @param id - The node the walk starts from, which is never among the nodes it returns.
+ * @param depth - How many hops count. 1 unless stated.
+ */
+export declare function neighborsOf(links: readonly NetworkLink[], id: string, depth?: number): Set<string>;
+//#endregion
+export { type Connections, type Counts, type DirectedEdge, type DirectedGraphProps, type DirectedNode, type DirectedWords, type ForceLink, type ForceOptions, index_d_exports as Graph, type GraphChange, type GraphChangeType, type GraphDiff, type GraphDirection, type GraphVersion, type Link, type NetworkGraphProps, type NetworkLink, type NetworkNode, type NetworkWords, type RankOptions, type Relation, type Trace, type TraceMode, type TreeEdge };