@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/node-graph.d.mts

@@ -0,0 +1,154 @@
+import * as React from "react";
+//#region src/node-graph.d.ts
+/**
+ * The status a node or edge carries, named for what it MEANS rather than for a colour, and mapped
+ * here onto the same tokens Badge uses — so a "failed" node and a "failed" badge are the same red.
+ */
+export type NodeGraphTone = "neutral" | "accent" | "success" | "warning" | "danger";
+/** Row height and type scale. `comfortable` (default) reads at a glance; `compact` fits more graph. */
+export type NodeGraphDensity = "comfortable" | "compact";
+/** Which sides a node's connection points sit on. Left/right suits a DAG, top/bottom a lifecycle. */
+export type NodeGraphOrientation = "horizontal" | "vertical";
+export interface NodeGraphNode<TData = unknown> {
+  id: string;
+  /** The node's name — the one line that always renders. */
+  label: string;
+  /** Secondary line under the label, e.g. a dataset path or an owner. */
+  description?: string;
+  /** What kind of thing this is — "Transform", "Object type", "Approval". Rendered as a quiet badge. */
+  kind?: string;
+  /** Runtime status — "Running", "Failed", "Published". Rendered as a badge in the node's tone. */
+  status?: string;
+  /** Semantic tone for the status badge and the node's border. Default `neutral`. */
+  tone?: NodeGraphTone;
+  /** A leading glyph, typically a lucide icon at 14px. */
+  icon?: React.ReactNode;
+  /** Canvas coordinates. The widget owns positions between renders; see `onNodeMove`. */
+  position: {
+    x: number;
+    y: number;
+  };
+  /** Overrides the graph-wide orientation for this node. */
+  orientation?: NodeGraphOrientation;
+  /** Overrides the graph-wide `selectable` for this node. */
+  selectable?: boolean;
+  /** Overrides the graph-wide `movable` for this node. */
+  draggable?: boolean;
+  /** Overrides the graph-wide `connectable` for this node. */
+  connectable?: boolean;
+  /** Rendered inside the node under the description — a metric, a progress bar, a pair of chips. */
+  footer?: React.ReactNode;
+  /** The caller's own payload, handed back untouched by every callback. */
+  data?: TData;
+}
+export interface NodeGraphEdge<TData = unknown> {
+  id: string;
+  source: string;
+  target: string;
+  /** Rendered on the edge — a branch condition, a cardinality, a transform name. */
+  label?: string;
+  /** Semantic tone for the stroke. Default `neutral`. */
+  tone?: NodeGraphTone;
+  /** Dashed stroke — the house idiom for a planned, inferred, or inactive link. */
+  dashed?: boolean;
+  /** Marching-ants animation, for a link with something flowing through it right now. */
+  animated?: boolean;
+  /** The caller's own payload, handed back untouched by every callback. */
+  data?: TData;
+}
+/** Pan and zoom, for a host that persists the framing or drives it from elsewhere. */
+export interface NodeGraphViewport {
+  x: number;
+  y: number;
+  zoom: number;
+}
+export interface NodeGraphProps<TNode = unknown, TEdge = unknown> {
+  nodes: NodeGraphNode<TNode>[];
+  edges?: NodeGraphEdge<TEdge>[];
+  /** `layered` (default) wires a DAG with orthogonal edges; `free` suits a radial or hand-placed graph. */
+  layout?: "layered" | "free";
+  /** Graph-wide connection sides. Default `horizontal`. */
+  orientation?: NodeGraphOrientation;
+  /** Row height and type scale. Default `comfortable`. */
+  density?: NodeGraphDensity;
+  /** Controlled selection. Pass `null` for "nothing selected"; omit it entirely to stay uncontrolled. */
+  selectedNodeId?: string | null;
+  /** Initial selection when uncontrolled. */
+  defaultSelectedNodeId?: string | null;
+  /** Fires on click, on keyboard Enter/Space, and with `null` when the selection is cleared. */
+  onSelectNode?: (nodeId: string | null, node?: NodeGraphNode<TNode>) => void;
+  /** Turn off node selection for the whole graph. Default true. */
+  selectable?: boolean;
+  /** Let nodes be dragged. Default true. */
+  movable?: boolean;
+  /** Fires once a drag settles, with the node's new canvas position — persist it and pass it back. */
+  onNodeMove?: (nodeId: string, position: {
+    x: number;
+    y: number;
+  }, node: NodeGraphNode<TNode>) => void;
+  /** Let the user draw new edges from a node's handles. Default false. */
+  connectable?: boolean;
+  /** Fires when the user completes a connection. The caller owns the edge list, so add it there. */
+  onConnectNodes?: (connection: {
+    source: string;
+    target: string;
+  }) => void;
+  /** Controlled viewport. With it, the canvas stops framing itself and the host owns pan/zoom. */
+  viewport?: NodeGraphViewport;
+  /** Initial viewport when uncontrolled. Omit it and the graph frames itself on mount. */
+  defaultViewport?: NodeGraphViewport;
+  onViewportChange?: (viewport: NodeGraphViewport) => void;
+  /** The fetch is in flight — the graph shows its loading treatment instead of an empty canvas. */
+  loading?: boolean;
+  /** The fetch failed. `true` uses the default wording; a string states the host's own message. */
+  error?: boolean | string;
+  /** Renders a Retry action on the error state. */
+  onRetry?: () => void;
+  /** Title on the empty state, when there are no nodes. */
+  emptyTitle?: string;
+  /** Description on the empty state. */
+  emptyDescription?: string;
+  /** An action on the empty state, e.g. "Add a step". */
+  emptyAction?: React.ReactNode;
+  /**
+   * The inspector / evidence handoff: whatever the host renders for the current selection. Sits in a
+   * right rail on desktop and stacks under the canvas at narrow widths.
+   */
+  inspector?: React.ReactNode;
+  /** Width of the inspector rail on desktop. Default 320. */
+  inspectorWidth?: number;
+  /** Chrome on the left of the zoom row — a ContextToolbar, a filter, a legend. */
+  toolbar?: React.ReactNode;
+  /** Hide the zoom row entirely, for a host that owns its own canvas chrome. */
+  showZoomTools?: boolean;
+  /** Show the pannable minimap. Off by default; earns its place on a graph you navigate. */
+  showMiniMap?: boolean;
+  /** Names the canvas for assistive technology. Default "Node graph". */
+  "aria-label"?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+/**
+ * A functional node graph — pipeline wiring, a process lifecycle, an analysis readiness map, a
+ * lineage DAG — described as typed nodes and edges rather than drawn.
+ *
+ * The widget owns the interaction contract: pan, pointer-centred zoom with the ZoomTools row (zoom
+ * in/out, an editable percentage, fit and reset), selection by click or keyboard, node movement,
+ * optional edge creation, the empty/loading/error states, and the inspector handoff for whatever the
+ * host shows about the current selection.
+ *
+ * It needs a container with a resolved height; in one with none it collapses to a 0px strip.
+ *
+ * ```tsx
+ * <NodeGraph
+ *   nodes={[{id: "src", label: "Site telemetry", kind: "Datasource", position: {x: 0, y: 0}}]}
+ *   edges={[{id: "e1", source: "src", target: "clean"}]}
+ *   selectedNodeId={selected}
+ *   onSelectNode={setSelected}
+ *   inspector={selected ? <Evidence id={selected} /> : null}
+ * />
+ * ```
+ */
+export declare function NodeGraph<TNode = unknown, TEdge = unknown>(props: NodeGraphProps<TNode, TEdge>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=node-graph.d.mts.map

package/dist/node-graph.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-graph.d.mts","names":[],"sources":["../src/node-graph.tsx"],"mappings":";;;;;;YA4BY;;YAGA;;YAGA;iBAEK,cAAc;EAC9B;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,OAAO;;EAEP,OAAO,MAAM;;EAEb;IAAW;IAAW;;;EAEtB,cAAc;;EAEd;;EAEA;;EAEA;;EAEA,SAAS,MAAM;;EAEf,OAAO;;iBAGS,cAAc;EAC9B;EACA;EACA;;EAEA;;EAEA,OAAO;;EAEP;;EAEA;;EAEA,OAAO;;;iBAIS;EAChB;EACA;EACA;;iBAGgB,eAAe,iBAAiB;EAChD,OAAO,cAAc;EACrB,QAAQ,cAAc;;EAGtB;;EAEA,cAAc;;EAEd,UAAU;;EAGV;;EAEA;;EAEA,gBAAgB,uBAAuB,OAAO,cAAc;;EAE5D;;EAGA;;EAEA,cAAc,gBAAgB;IAAW;IAAW;KAAY,MAAM,cAAc;;EAGpF;;EAEA,kBAAkB;IAAa;IAAgB;;;EAG/C,WAAW;;EAEX,kBAAkB;EAClB,oBAAoB,UAAU;;EAG9B;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,cAAc,MAAM;;;;;EAMpB,YAAY,MAAM;;EAElB;;EAEA,UAAU,MAAM;;EAEhB;;EAEA;;EAGA;EACA;EACA,QAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;wBA6YC,UAAU,iBAAiB,iBAAiB,OAAO,eAAe,OAAO,qCAAM,IAAA"}

package/dist/node-graph.mjs

@@ -0,0 +1,349 @@
+import { Badge } from "./badge.mjs";
+import { Button } from "./button.mjs";
+import { Empty } from "./empty.mjs";
+import { ZoomTools } from "./zoom-tools.mjs";
+import { Skeleton } from "./skeleton.mjs";
+import { GraphCanvas, Handle, Position, ReactFlowProvider, useReactFlow, useViewport } from "./graph-canvas.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { Network, RotateCcw, TriangleAlert } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/node-graph.tsx
+const TONE_BORDER = {
+	neutral: "wwc:border-border",
+	accent: "wwc:border-primary/50",
+	success: "wwc:border-green-600/40",
+	warning: "wwc:border-amber-600/40",
+	danger: "wwc:border-red-600/40"
+};
+const TONE_BADGE = {
+	neutral: "neutralSoft",
+	accent: "default",
+	success: "successSoft",
+	warning: "warningSoft",
+	danger: "dangerSoft"
+};
+/**
+* Edge strokes, as the tokens themselves rather than as classes: React Flow paints the path with
+* `--xy-edge-stroke`, so a `stroke-*` utility on the edge group never reaches it. `style.stroke` does.
+*/
+const TONE_STROKE = {
+	neutral: "var(--wwc-color-muted-foreground)",
+	accent: "var(--wwc-color-primary)",
+	success: "var(--wwc-color-success)",
+	warning: "var(--wwc-color-warning)",
+	danger: "var(--wwc-color-destructive)"
+};
+/**
+* The zoom bounds, given to the canvas AND to the readout above it. They have to be the same numbers:
+* React Flow's own default ceiling is 2, so a readout that believed in 4 would keep "zoom in" live and
+* accept a typed 400% that the canvas then silently clamped.
+*/
+const MIN_ZOOM = .2;
+const MAX_ZOOM = 2;
+/**
+* Classes for React Flow's own node wrapper — the element it makes focusable. The focus ring has to
+* live here, not on the card inside, because the card is not the element the browser focuses.
+*/
+const NODE_WRAPPER_CLASS = "wwc:rounded-lg wwc:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring wwc:focus-visible:ring-offset-2 wwc:focus-visible:ring-offset-background";
+const HANDLE_CLASS = "wwc:!h-2 wwc:!w-2 wwc:!border-0 wwc:!bg-muted-foreground";
+/** The house node: kind + status over a label, a description, and the caller's footer. */
+function NodeGraphNodeCard({ data, selected, isConnectable }) {
+	const { node, density, orientation } = data;
+	const tone = node.tone ?? "neutral";
+	const compact = density === "compact";
+	const sides = (node.orientation ?? orientation) === "vertical" ? {
+		target: Position.Top,
+		source: Position.Bottom
+	} : {
+		target: Position.Left,
+		source: Position.Right
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:w-[190px] wwc:flex-col wwc:rounded-lg wwc:border wwc:bg-card wwc:text-card-foreground wwc:shadow-sm", compact ? "wwc:gap-1 wwc:px-2.5 wwc:py-1.5" : "wwc:gap-1.5 wwc:px-3 wwc:py-2.5", TONE_BORDER[tone], selected && "wwc:ring-2 wwc:ring-primary wwc:ring-offset-1 wwc:ring-offset-background"),
+		children: [
+			/* @__PURE__ */ jsx(Handle, {
+				type: "target",
+				position: sides.target,
+				isConnectable,
+				className: HANDLE_CLASS
+			}),
+			node.kind || node.status ? /* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-center wwc:justify-between wwc:gap-1.5",
+				children: [node.kind ? /* @__PURE__ */ jsx("span", {
+					className: "wwc:truncate wwc:text-[10px] wwc:font-medium wwc:tracking-wide wwc:text-muted-foreground wwc:uppercase",
+					children: node.kind
+				}) : /* @__PURE__ */ jsx("span", {}), node.status ? /* @__PURE__ */ jsx(Badge, {
+					variant: TONE_BADGE[tone],
+					className: "wwc:h-4 wwc:shrink-0 wwc:px-1.5 wwc:text-[10px]",
+					children: node.status
+				}) : null]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-start wwc:gap-1.5",
+				children: [node.icon ? /* @__PURE__ */ jsx("span", {
+					className: "wwc:mt-0.5 wwc:shrink-0 wwc:text-muted-foreground wwc:[&_svg]:size-3.5",
+					children: node.icon
+				}) : null, /* @__PURE__ */ jsxs("div", {
+					className: "wwc:min-w-0 wwc:flex-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: cn("wwc:truncate wwc:font-medium", compact ? "wwc:text-[11px]" : "wwc:text-xs"),
+						children: node.label
+					}), node.description ? /* @__PURE__ */ jsx("p", {
+						className: "wwc:truncate wwc:text-[10px] wwc:text-muted-foreground",
+						children: node.description
+					}) : null]
+				})]
+			}),
+			node.footer ? /* @__PURE__ */ jsx("div", {
+				className: "wwc:text-[10px] wwc:text-muted-foreground",
+				children: node.footer
+			}) : null,
+			/* @__PURE__ */ jsx(Handle, {
+				type: "source",
+				position: sides.source,
+				isConnectable,
+				className: HANDLE_CLASS
+			})
+		]
+	});
+}
+const NODE_TYPES = { core: NodeGraphNodeCard };
+/** Loading: node-shaped skeletons, so the canvas does not resize as the real graph arrives. */
+function GraphSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:flex wwc:h-full wwc:w-full wwc:items-center wwc:justify-center wwc:gap-8 wwc:p-8",
+		"data-testid": "node-graph-loading",
+		children: [[
+			0,
+			1,
+			2
+		].map((column) => /* @__PURE__ */ jsx("div", {
+			className: "wwc:flex wwc:flex-col wwc:gap-4",
+			children: [0, 1].map((row) => /* @__PURE__ */ jsx(Skeleton, { className: "wwc:h-16 wwc:w-[190px] wwc:rounded-lg" }, row))
+		}, column)), /* @__PURE__ */ jsx("span", {
+			className: "wwc:sr-only",
+			children: "Loading the graph…"
+		})]
+	});
+}
+function NodeGraphInner({ nodes, edges = [], layout = "layered", orientation = "horizontal", density = "comfortable", selectedNodeId, defaultSelectedNodeId = null, onSelectNode, selectable = true, movable = true, onNodeMove, connectable = false, onConnectNodes, viewport, defaultViewport, onViewportChange, loading = false, error = false, onRetry, emptyTitle = "Nothing to graph yet", emptyDescription, emptyAction, inspector, inspectorWidth = 320, toolbar, showZoomTools = true, showMiniMap = false, "aria-label": ariaLabel = "Node graph", className, style }) {
+	const flow = useReactFlow();
+	const { zoom } = useViewport();
+	const [internalSelected, setInternalSelected] = React.useState(defaultSelectedNodeId);
+	const activeId = selectedNodeId === void 0 ? internalSelected : selectedNodeId;
+	const [dragged, setDragged] = React.useState({});
+	const positionsKey = nodes.map((node) => `${node.id}:${node.position.x},${node.position.y}`).join("|");
+	React.useEffect(() => {
+		setDragged((current) => Object.keys(current).length === 0 ? current : {});
+	}, [positionsKey]);
+	const nodeById = React.useMemo(() => new Map(nodes.map((node) => [node.id, node])), [nodes]);
+	const flowNodes = React.useMemo(() => nodes.map((node) => ({
+		id: node.id,
+		type: "core",
+		position: dragged[node.id] ?? node.position,
+		selected: node.id === activeId,
+		selectable: node.selectable ?? selectable,
+		draggable: node.draggable ?? movable,
+		connectable: node.connectable ?? connectable,
+		className: NODE_WRAPPER_CLASS,
+		ariaLabel: [
+			node.kind,
+			node.label,
+			node.status
+		].filter(Boolean).join(", "),
+		data: {
+			node,
+			density,
+			orientation
+		}
+	})), [
+		nodes,
+		dragged,
+		activeId,
+		selectable,
+		movable,
+		connectable,
+		density,
+		orientation
+	]);
+	const flowEdges = React.useMemo(() => edges.map((edge) => ({
+		id: edge.id,
+		source: edge.source,
+		target: edge.target,
+		label: edge.label,
+		animated: edge.animated,
+		style: {
+			stroke: TONE_STROKE[edge.tone ?? "neutral"],
+			strokeWidth: 1.5,
+			strokeDasharray: edge.dashed ? "6 4" : void 0
+		}
+	})), [edges]);
+	const handleNodesChange = React.useCallback((changes) => {
+		for (const change of changes) if (change.type === "position" && change.position) {
+			const { id, position } = change;
+			setDragged((current) => ({
+				...current,
+				[id]: position
+			}));
+		} else if (change.type === "select") {
+			const next = change.selected ? change.id : null;
+			if (!change.selected && activeId !== change.id) continue;
+			if (next === activeId) continue;
+			if (selectedNodeId === void 0) setInternalSelected(next);
+			onSelectNode?.(next, next ? nodeById.get(next) : void 0);
+		}
+	}, [
+		activeId,
+		selectedNodeId,
+		onSelectNode,
+		nodeById
+	]);
+	const zoomIn = React.useCallback(() => flow.zoomIn({ duration: 150 }), [flow]);
+	const zoomOut = React.useCallback(() => flow.zoomOut({ duration: 150 }), [flow]);
+	const fit = React.useCallback(() => flow.fitView({
+		padding: .12,
+		duration: 200
+	}), [flow]);
+	const zoomTo = React.useCallback((level) => flow.zoomTo(level, { duration: 150 }), [flow]);
+	/** Reset is not Fit: it returns the graph to 100%, centred — the scale the nodes were drawn for. */
+	const reset = React.useCallback(() => {
+		if (defaultViewport) {
+			flow.setViewport(defaultViewport, { duration: 200 });
+			return;
+		}
+		const bounds = flow.getNodesBounds(flow.getNodes());
+		flow.setCenter(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2, {
+			zoom: 1,
+			duration: 200
+		});
+	}, [flow, defaultViewport]);
+	const state = loading ? "loading" : error ? "error" : nodes.length === 0 ? "empty" : "ready";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:h-full wwc:min-h-0 wwc:w-full wwc:flex-col wwc:overflow-hidden", className),
+		style,
+		children: [showZoomTools || toolbar ? /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:justify-between wwc:gap-2 wwc:border-b wwc:px-2 wwc:py-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-1.5",
+				children: toolbar
+			}), showZoomTools ? /* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:shrink-0 wwc:items-center",
+				children: [/* @__PURE__ */ jsx(ZoomTools, {
+					variant: "bare",
+					zoomLevel: zoom,
+					minZoom: MIN_ZOOM,
+					maxZoom: MAX_ZOOM,
+					onZoomIn: zoomIn,
+					onZoomOut: zoomOut,
+					onFit: fit,
+					onZoomChange: zoomTo,
+					...state === "ready" ? {} : {
+						canZoomIn: false,
+						canZoomOut: false
+					}
+				}), /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					className: "wwc:h-9 wwc:gap-1.5 wwc:px-2 wwc:text-muted-foreground wwc:hover:text-foreground",
+					onClick: reset,
+					disabled: state !== "ready",
+					children: [/* @__PURE__ */ jsx(RotateCcw, {}), "Reset"]
+				})]
+			}) : null]
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:min-h-0 wwc:flex-1 wwc:flex-col wwc:lg:flex-row",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "wwc:relative wwc:min-h-0 wwc:min-w-0 wwc:flex-1",
+				children: state === "ready" ? /* @__PURE__ */ jsx(GraphCanvas, {
+					withProvider: false,
+					showControls: false,
+					showMiniMap,
+					layout,
+					nodes: flowNodes,
+					edges: flowEdges,
+					minZoom: MIN_ZOOM,
+					maxZoom: MAX_ZOOM,
+					nodeTypes: NODE_TYPES,
+					onNodesChange: handleNodesChange,
+					onNodeDragStop: (_event, node) => {
+						const source = nodeById.get(node.id);
+						if (source) onNodeMove?.(node.id, node.position, source);
+					},
+					nodesConnectable: connectable,
+					onConnect: (connection) => {
+						if (connection.source && connection.target) onConnectNodes?.({
+							source: connection.source,
+							target: connection.target
+						});
+					},
+					onPaneClick: () => {
+						if (activeId === null) return;
+						if (selectedNodeId === void 0) setInternalSelected(null);
+						onSelectNode?.(null, void 0);
+					},
+					...viewport ? {
+						viewport,
+						fitView: false
+					} : defaultViewport ? {
+						defaultViewport,
+						fitView: false
+					} : {},
+					onViewportChange,
+					"aria-label": ariaLabel
+				}) : state === "loading" ? /* @__PURE__ */ jsx(GraphSkeleton, {}) : state === "error" ? /* @__PURE__ */ jsx(Empty, {
+					icon: /* @__PURE__ */ jsx(TriangleAlert, { className: "wwc:h-8 wwc:w-8" }),
+					title: "Couldn't load the graph",
+					description: typeof error === "string" ? error : "The graph could not be loaded.",
+					action: onRetry ? /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: onRetry,
+						children: "Retry"
+					}) : void 0
+				}) : /* @__PURE__ */ jsx(Empty, {
+					icon: /* @__PURE__ */ jsx(Network, { className: "wwc:h-8 wwc:w-8" }),
+					title: emptyTitle,
+					description: emptyDescription,
+					action: emptyAction
+				})
+			}), inspector ? /* @__PURE__ */ jsx("aside", {
+				className: "wwc:min-h-0 wwc:shrink-0 wwc:overflow-auto wwc:border-t wwc:lg:border-t-0 wwc:lg:border-l",
+				style: {
+					width: "100%",
+					maxWidth: "100%",
+					flexBasis: inspectorWidth
+				},
+				children: inspector
+			}) : null]
+		})]
+	});
+}
+/**
+* A functional node graph — pipeline wiring, a process lifecycle, an analysis readiness map, a
+* lineage DAG — described as typed nodes and edges rather than drawn.
+*
+* The widget owns the interaction contract: pan, pointer-centred zoom with the ZoomTools row (zoom
+* in/out, an editable percentage, fit and reset), selection by click or keyboard, node movement,
+* optional edge creation, the empty/loading/error states, and the inspector handoff for whatever the
+* host shows about the current selection.
+*
+* It needs a container with a resolved height; in one with none it collapses to a 0px strip.
+*
+* ```tsx
+* <NodeGraph
+*   nodes={[{id: "src", label: "Site telemetry", kind: "Datasource", position: {x: 0, y: 0}}]}
+*   edges={[{id: "e1", source: "src", target: "clean"}]}
+*   selectedNodeId={selected}
+*   onSelectNode={setSelected}
+*   inspector={selected ? <Evidence id={selected} /> : null}
+* />
+* ```
+*/
+function NodeGraph(props) {
+	return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(NodeGraphInner, { ...props }) });
+}
+//#endregion
+export { NodeGraph };
+
+//# sourceMappingURL=node-graph.mjs.map

package/dist/node-graph.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-graph.mjs","names":[],"sources":["../src/node-graph.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {Network, RotateCcw, TriangleAlert} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Badge} from \"./badge\";\nimport {Button} from \"./button\";\nimport {Empty} from \"./empty\";\nimport type {Connection, Edge, Node, NodeChange, NodeProps} from \"./graph-canvas\";\nimport {GraphCanvas, Handle, Position, ReactFlowProvider, useReactFlow, useViewport} from \"./graph-canvas\";\nimport {Skeleton} from \"./skeleton\";\nimport {ZoomTools} from \"./zoom-tools\";\n\n// NodeGraph — the functional node/edge surface four Connect journeys had each rebuilt on a raw graph\n// engine: the pipeline builder, the process lifecycle, the analysis readiness graph and product\n// lineage. GraphCanvas below it owns the React Flow chrome; this owns the CONTRACT — typed nodes and\n// edges, the zoom controls, selection, movement, the empty/loading/error states and the inspector\n// handoff — so a consumer never types an engine's props and never imports the engine.\n//\n// The engine is an implementation detail on purpose. Nodes are described, not rendered: a caller\n// passes label/kind/status/tone and the widget draws the box, which is what keeps four graphs in one\n// visual language instead of four.\n\n// ─── Vocabulary ──────────────────────────────────────────────────────────────\n\n/**\n * The status a node or edge carries, named for what it MEANS rather than for a colour, and mapped\n * here onto the same tokens Badge uses — so a \"failed\" node and a \"failed\" badge are the same red.\n */\nexport type NodeGraphTone = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\n\n/** Row height and type scale. `comfortable` (default) reads at a glance; `compact` fits more graph. */\nexport type NodeGraphDensity = \"comfortable\" | \"compact\";\n\n/** Which sides a node's connection points sit on. Left/right suits a DAG, top/bottom a lifecycle. */\nexport type NodeGraphOrientation = \"horizontal\" | \"vertical\";\n\nexport interface NodeGraphNode<TData = unknown> {\n\tid: string;\n\t/** The node's name — the one line that always renders. */\n\tlabel: string;\n\t/** Secondary line under the label, e.g. a dataset path or an owner. */\n\tdescription?: string;\n\t/** What kind of thing this is — \"Transform\", \"Object type\", \"Approval\". Rendered as a quiet badge. */\n\tkind?: string;\n\t/** Runtime status — \"Running\", \"Failed\", \"Published\". Rendered as a badge in the node's tone. */\n\tstatus?: string;\n\t/** Semantic tone for the status badge and the node's border. Default `neutral`. */\n\ttone?: NodeGraphTone;\n\t/** A leading glyph, typically a lucide icon at 14px. */\n\ticon?: React.ReactNode;\n\t/** Canvas coordinates. The widget owns positions between renders; see `onNodeMove`. */\n\tposition: {x: number; y: number};\n\t/** Overrides the graph-wide orientation for this node. */\n\torientation?: NodeGraphOrientation;\n\t/** Overrides the graph-wide `selectable` for this node. */\n\tselectable?: boolean;\n\t/** Overrides the graph-wide `movable` for this node. */\n\tdraggable?: boolean;\n\t/** Overrides the graph-wide `connectable` for this node. */\n\tconnectable?: boolean;\n\t/** Rendered inside the node under the description — a metric, a progress bar, a pair of chips. */\n\tfooter?: React.ReactNode;\n\t/** The caller's own payload, handed back untouched by every callback. */\n\tdata?: TData;\n}\n\nexport interface NodeGraphEdge<TData = unknown> {\n\tid: string;\n\tsource: string;\n\ttarget: string;\n\t/** Rendered on the edge — a branch condition, a cardinality, a transform name. */\n\tlabel?: string;\n\t/** Semantic tone for the stroke. Default `neutral`. */\n\ttone?: NodeGraphTone;\n\t/** Dashed stroke — the house idiom for a planned, inferred, or inactive link. */\n\tdashed?: boolean;\n\t/** Marching-ants animation, for a link with something flowing through it right now. */\n\tanimated?: boolean;\n\t/** The caller's own payload, handed back untouched by every callback. */\n\tdata?: TData;\n}\n\n/** Pan and zoom, for a host that persists the framing or drives it from elsewhere. */\nexport interface NodeGraphViewport {\n\tx: number;\n\ty: number;\n\tzoom: number;\n}\n\nexport interface NodeGraphProps<TNode = unknown, TEdge = unknown> {\n\tnodes: NodeGraphNode<TNode>[];\n\tedges?: NodeGraphEdge<TEdge>[];\n\n\t/** `layered` (default) wires a DAG with orthogonal edges; `free` suits a radial or hand-placed graph. */\n\tlayout?: \"layered\" | \"free\";\n\t/** Graph-wide connection sides. Default `horizontal`. */\n\torientation?: NodeGraphOrientation;\n\t/** Row height and type scale. Default `comfortable`. */\n\tdensity?: NodeGraphDensity;\n\n\t/** Controlled selection. Pass `null` for \"nothing selected\"; omit it entirely to stay uncontrolled. */\n\tselectedNodeId?: string | null;\n\t/** Initial selection when uncontrolled. */\n\tdefaultSelectedNodeId?: string | null;\n\t/** Fires on click, on keyboard Enter/Space, and with `null` when the selection is cleared. */\n\tonSelectNode?: (nodeId: string | null, node?: NodeGraphNode<TNode>) => void;\n\t/** Turn off node selection for the whole graph. Default true. */\n\tselectable?: boolean;\n\n\t/** Let nodes be dragged. Default true. */\n\tmovable?: boolean;\n\t/** Fires once a drag settles, with the node's new canvas position — persist it and pass it back. */\n\tonNodeMove?: (nodeId: string, position: {x: number; y: number}, node: NodeGraphNode<TNode>) => void;\n\n\t/** Let the user draw new edges from a node's handles. Default false. */\n\tconnectable?: boolean;\n\t/** Fires when the user completes a connection. The caller owns the edge list, so add it there. */\n\tonConnectNodes?: (connection: {source: string; target: string}) => void;\n\n\t/** Controlled viewport. With it, the canvas stops framing itself and the host owns pan/zoom. */\n\tviewport?: NodeGraphViewport;\n\t/** Initial viewport when uncontrolled. Omit it and the graph frames itself on mount. */\n\tdefaultViewport?: NodeGraphViewport;\n\tonViewportChange?: (viewport: NodeGraphViewport) => void;\n\n\t/** The fetch is in flight — the graph shows its loading treatment instead of an empty canvas. */\n\tloading?: boolean;\n\t/** The fetch failed. `true` uses the default wording; a string states the host's own message. */\n\terror?: boolean | string;\n\t/** Renders a Retry action on the error state. */\n\tonRetry?: () => void;\n\t/** Title on the empty state, when there are no nodes. */\n\temptyTitle?: string;\n\t/** Description on the empty state. */\n\temptyDescription?: string;\n\t/** An action on the empty state, e.g. \"Add a step\". */\n\temptyAction?: React.ReactNode;\n\n\t/**\n\t * The inspector / evidence handoff: whatever the host renders for the current selection. Sits in a\n\t * right rail on desktop and stacks under the canvas at narrow widths.\n\t */\n\tinspector?: React.ReactNode;\n\t/** Width of the inspector rail on desktop. Default 320. */\n\tinspectorWidth?: number;\n\t/** Chrome on the left of the zoom row — a ContextToolbar, a filter, a legend. */\n\ttoolbar?: React.ReactNode;\n\t/** Hide the zoom row entirely, for a host that owns its own canvas chrome. */\n\tshowZoomTools?: boolean;\n\t/** Show the pannable minimap. Off by default; earns its place on a graph you navigate. */\n\tshowMiniMap?: boolean;\n\n\t/** Names the canvas for assistive technology. Default \"Node graph\". */\n\t\"aria-label\"?: string;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n}\n\n// ─── Tone mapping ────────────────────────────────────────────────────────────\n\nconst TONE_BORDER: Record<NodeGraphTone, string> = {\n\tneutral: \"wwc:border-border\",\n\taccent: \"wwc:border-primary/50\",\n\tsuccess: \"wwc:border-green-600/40\",\n\twarning: \"wwc:border-amber-600/40\",\n\tdanger: \"wwc:border-red-600/40\",\n};\n\nconst TONE_BADGE = {\n\tneutral: \"neutralSoft\",\n\taccent: \"default\",\n\tsuccess: \"successSoft\",\n\twarning: \"warningSoft\",\n\tdanger: \"dangerSoft\",\n} as const;\n\n/**\n * Edge strokes, as the tokens themselves rather than as classes: React Flow paints the path with\n * `--xy-edge-stroke`, so a `stroke-*` utility on the edge group never reaches it. `style.stroke` does.\n */\nconst TONE_STROKE: Record<NodeGraphTone, string> = {\n\tneutral: \"var(--wwc-color-muted-foreground)\",\n\taccent: \"var(--wwc-color-primary)\",\n\tsuccess: \"var(--wwc-color-success)\",\n\twarning: \"var(--wwc-color-warning)\",\n\tdanger: \"var(--wwc-color-destructive)\",\n};\n\n/**\n * The zoom bounds, given to the canvas AND to the readout above it. They have to be the same numbers:\n * React Flow's own default ceiling is 2, so a readout that believed in 4 would keep \"zoom in\" live and\n * accept a typed 400% that the canvas then silently clamped.\n */\nconst MIN_ZOOM = 0.2;\nconst MAX_ZOOM = 2;\n\n/**\n * Classes for React Flow's own node wrapper — the element it makes focusable. The focus ring has to\n * live here, not on the card inside, because the card is not the element the browser focuses.\n */\nconst NODE_WRAPPER_CLASS =\n\t\"wwc:rounded-lg wwc:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring wwc:focus-visible:ring-offset-2 wwc:focus-visible:ring-offset-background\";\n\n// ─── The node ────────────────────────────────────────────────────────────────\n\n/** What the widget hands its own node renderer. Not part of the public API. */\ninterface NodeCardData extends Record<string, unknown> {\n\tnode: NodeGraphNode;\n\tdensity: NodeGraphDensity;\n\torientation: NodeGraphOrientation;\n}\n\nconst HANDLE_CLASS = \"wwc:!h-2 wwc:!w-2 wwc:!border-0 wwc:!bg-muted-foreground\";\n\n/** The house node: kind + status over a label, a description, and the caller's footer. */\nfunction NodeGraphNodeCard({data, selected, isConnectable}: NodeProps) {\n\tconst {node, density, orientation} = data as unknown as NodeCardData;\n\tconst tone = node.tone ?? \"neutral\";\n\tconst compact = density === \"compact\";\n\tconst sides =\n\t\t(node.orientation ?? orientation) === \"vertical\"\n\t\t\t? {target: Position.Top, source: Position.Bottom}\n\t\t\t: {target: Position.Left, source: Position.Right};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:flex wwc:w-[190px] wwc:flex-col wwc:rounded-lg wwc:border wwc:bg-card wwc:text-card-foreground wwc:shadow-sm\",\n\t\t\t\tcompact ? \"wwc:gap-1 wwc:px-2.5 wwc:py-1.5\" : \"wwc:gap-1.5 wwc:px-3 wwc:py-2.5\",\n\t\t\t\tTONE_BORDER[tone],\n\t\t\t\t// Selection has to be visible on a tinted node as well as a plain one, so it is a ring\n\t\t\t\t// rather than a border swap.\n\t\t\t\tselected && \"wwc:ring-2 wwc:ring-primary wwc:ring-offset-1 wwc:ring-offset-background\",\n\t\t\t)}\n\t\t>\n\t\t\t<Handle type=\"target\" position={sides.target} isConnectable={isConnectable} className={HANDLE_CLASS} />\n\n\t\t\t{node.kind || node.status ? (\n\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:justify-between wwc:gap-1.5\">\n\t\t\t\t\t{node.kind ? (\n\t\t\t\t\t\t<span className=\"wwc:truncate wwc:text-[10px] wwc:font-medium wwc:tracking-wide wwc:text-muted-foreground wwc:uppercase\">\n\t\t\t\t\t\t\t{node.kind}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span />\n\t\t\t\t\t)}\n\t\t\t\t\t{node.status ? (\n\t\t\t\t\t\t<Badge variant={TONE_BADGE[tone]} className=\"wwc:h-4 wwc:shrink-0 wwc:px-1.5 wwc:text-[10px]\">\n\t\t\t\t\t\t\t{node.status}\n\t\t\t\t\t\t</Badge>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t) : null}\n\n\t\t\t<div className=\"wwc:flex wwc:items-start wwc:gap-1.5\">\n\t\t\t\t{node.icon ? (\n\t\t\t\t\t<span className=\"wwc:mt-0.5 wwc:shrink-0 wwc:text-muted-foreground wwc:[&_svg]:size-3.5\">{node.icon}</span>\n\t\t\t\t) : null}\n\t\t\t\t<div className=\"wwc:min-w-0 wwc:flex-1\">\n\t\t\t\t\t<p className={cn(\"wwc:truncate wwc:font-medium\", compact ? \"wwc:text-[11px]\" : \"wwc:text-xs\")}>\n\t\t\t\t\t\t{node.label}\n\t\t\t\t\t</p>\n\t\t\t\t\t{node.description ? (\n\t\t\t\t\t\t<p className=\"wwc:truncate wwc:text-[10px] wwc:text-muted-foreground\">{node.description}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{node.footer ? <div className=\"wwc:text-[10px] wwc:text-muted-foreground\">{node.footer}</div> : null}\n\n\t\t\t<Handle type=\"source\" position={sides.source} isConnectable={isConnectable} className={HANDLE_CLASS} />\n\t\t</div>\n\t);\n}\n\nconst NODE_TYPES = {core: NodeGraphNodeCard};\n\n// ─── States ──────────────────────────────────────────────────────────────────\n\n/** Loading: node-shaped skeletons, so the canvas does not resize as the real graph arrives. */\nfunction GraphSkeleton() {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"wwc:flex wwc:h-full wwc:w-full wwc:items-center wwc:justify-center wwc:gap-8 wwc:p-8\"\n\t\t\tdata-testid=\"node-graph-loading\"\n\t\t>\n\t\t\t{[0, 1, 2].map((column) => (\n\t\t\t\t<div key={column} className=\"wwc:flex wwc:flex-col wwc:gap-4\">\n\t\t\t\t\t{[0, 1].map((row) => (\n\t\t\t\t\t\t<Skeleton key={row} className=\"wwc:h-16 wwc:w-[190px] wwc:rounded-lg\" />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t))}\n\t\t\t<span className=\"wwc:sr-only\">Loading the graph…</span>\n\t\t</div>\n\t);\n}\n\n// ─── The widget ──────────────────────────────────────────────────────────────\n\nfunction NodeGraphInner<TNode, TEdge>({\n\tnodes,\n\tedges = [],\n\tlayout = \"layered\",\n\torientation = \"horizontal\",\n\tdensity = \"comfortable\",\n\tselectedNodeId,\n\tdefaultSelectedNodeId = null,\n\tonSelectNode,\n\tselectable = true,\n\tmovable = true,\n\tonNodeMove,\n\tconnectable = false,\n\tonConnectNodes,\n\tviewport,\n\tdefaultViewport,\n\tonViewportChange,\n\tloading = false,\n\terror = false,\n\tonRetry,\n\temptyTitle = \"Nothing to graph yet\",\n\temptyDescription,\n\temptyAction,\n\tinspector,\n\tinspectorWidth = 320,\n\ttoolbar,\n\tshowZoomTools = true,\n\tshowMiniMap = false,\n\t\"aria-label\": ariaLabel = \"Node graph\",\n\tclassName,\n\tstyle,\n}: NodeGraphProps<TNode, TEdge>) {\n\tconst flow = useReactFlow();\n\tconst {zoom} = useViewport();\n\n\tconst [internalSelected, setInternalSelected] = React.useState<string | null>(defaultSelectedNodeId);\n\tconst activeId = selectedNodeId === undefined ? internalSelected : selectedNodeId;\n\n\t// Positions the user has dragged but the host has not yet persisted. Cleared the moment the\n\t// incoming positions change, so a re-layout from the host always wins over a stale drag.\n\tconst [dragged, setDragged] = React.useState<Record<string, {x: number; y: number}>>({});\n\tconst positionsKey = nodes.map((node) => `${node.id}:${node.position.x},${node.position.y}`).join(\"|\");\n\tReact.useEffect(() => {\n\t\tsetDragged((current) => (Object.keys(current).length === 0 ? current : {}));\n\t}, [positionsKey]);\n\n\tconst nodeById = React.useMemo(() => new Map(nodes.map((node) => [node.id, node])), [nodes]);\n\n\tconst flowNodes = React.useMemo<Node[]>(\n\t\t() =>\n\t\t\tnodes.map((node) => ({\n\t\t\t\tid: node.id,\n\t\t\t\ttype: \"core\",\n\t\t\t\tposition: dragged[node.id] ?? node.position,\n\t\t\t\tselected: node.id === activeId,\n\t\t\t\tselectable: node.selectable ?? selectable,\n\t\t\t\tdraggable: node.draggable ?? movable,\n\t\t\t\tconnectable: node.connectable ?? connectable,\n\t\t\t\tclassName: NODE_WRAPPER_CLASS,\n\t\t\t\tariaLabel: [node.kind, node.label, node.status].filter(Boolean).join(\", \"),\n\t\t\t\tdata: {node, density, orientation} satisfies NodeCardData,\n\t\t\t})),\n\t\t[nodes, dragged, activeId, selectable, movable, connectable, density, orientation],\n\t);\n\n\tconst flowEdges = React.useMemo<Edge[]>(\n\t\t() =>\n\t\t\tedges.map((edge) => ({\n\t\t\t\tid: edge.id,\n\t\t\t\tsource: edge.source,\n\t\t\t\ttarget: edge.target,\n\t\t\t\tlabel: edge.label,\n\t\t\t\tanimated: edge.animated,\n\t\t\t\tstyle: {\n\t\t\t\t\tstroke: TONE_STROKE[edge.tone ?? \"neutral\"],\n\t\t\t\t\tstrokeWidth: 1.5,\n\t\t\t\t\tstrokeDasharray: edge.dashed ? \"6 4\" : undefined,\n\t\t\t\t},\n\t\t\t})),\n\t\t[edges],\n\t);\n\n\t// One handler for both interactions the engine reports back: a drag in progress, and a selection\n\t// made by click or by keyboard. Everything else about the node list stays derived from props.\n\tconst handleNodesChange = React.useCallback(\n\t\t(changes: NodeChange[]) => {\n\t\t\tfor (const change of changes) {\n\t\t\t\tif (change.type === \"position\" && change.position) {\n\t\t\t\t\tconst {id, position} = change;\n\t\t\t\t\tsetDragged((current) => ({...current, [id]: position}));\n\t\t\t\t} else if (change.type === \"select\") {\n\t\t\t\t\tconst next = change.selected ? change.id : null;\n\t\t\t\t\t// A deselect for a node that is no longer the selected one is the engine tidying up\n\t\t\t\t\t// after a swap; it must not clear the selection that replaced it.\n\t\t\t\t\tif (!change.selected && activeId !== change.id) continue;\n\t\t\t\t\tif (next === activeId) continue;\n\t\t\t\t\tif (selectedNodeId === undefined) setInternalSelected(next);\n\t\t\t\t\tonSelectNode?.(next, next ? nodeById.get(next) : undefined);\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[activeId, selectedNodeId, onSelectNode, nodeById],\n\t);\n\n\tconst zoomIn = React.useCallback(() => flow.zoomIn({duration: 150}), [flow]);\n\tconst zoomOut = React.useCallback(() => flow.zoomOut({duration: 150}), [flow]);\n\tconst fit = React.useCallback(() => flow.fitView({padding: 0.12, duration: 200}), [flow]);\n\tconst zoomTo = React.useCallback((level: number) => flow.zoomTo(level, {duration: 150}), [flow]);\n\t/** Reset is not Fit: it returns the graph to 100%, centred — the scale the nodes were drawn for. */\n\tconst reset = React.useCallback(() => {\n\t\tif (defaultViewport) {\n\t\t\tflow.setViewport(defaultViewport, {duration: 200});\n\t\t\treturn;\n\t\t}\n\t\tconst bounds = flow.getNodesBounds(flow.getNodes());\n\t\tflow.setCenter(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2, {zoom: 1, duration: 200});\n\t}, [flow, defaultViewport]);\n\n\tconst state = loading ? \"loading\" : error ? \"error\" : nodes.length === 0 ? \"empty\" : \"ready\";\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"wwc:flex wwc:h-full wwc:min-h-0 wwc:w-full wwc:flex-col wwc:overflow-hidden\", className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{showZoomTools || toolbar ? (\n\t\t\t\t<div className=\"wwc:flex wwc:shrink-0 wwc:items-center wwc:justify-between wwc:gap-2 wwc:border-b wwc:px-2 wwc:py-1\">\n\t\t\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-1.5\">{toolbar}</div>\n\t\t\t\t\t{showZoomTools ? (\n\t\t\t\t\t\t<div className=\"wwc:flex wwc:shrink-0 wwc:items-center\">\n\t\t\t\t\t\t\t<ZoomTools\n\t\t\t\t\t\t\t\tvariant=\"bare\"\n\t\t\t\t\t\t\t\tzoomLevel={zoom}\n\t\t\t\t\t\t\t\tminZoom={MIN_ZOOM}\n\t\t\t\t\t\t\t\tmaxZoom={MAX_ZOOM}\n\t\t\t\t\t\t\t\tonZoomIn={zoomIn}\n\t\t\t\t\t\t\t\tonZoomOut={zoomOut}\n\t\t\t\t\t\t\t\tonFit={fit}\n\t\t\t\t\t\t\t\tonZoomChange={zoomTo}\n\t\t\t\t\t\t\t\t// Every action needs the canvas to have something to act on.\n\t\t\t\t\t\t\t\t{...(state === \"ready\" ? {} : {canZoomIn: false, canZoomOut: false})}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\tclassName=\"wwc:h-9 wwc:gap-1.5 wwc:px-2 wwc:text-muted-foreground wwc:hover:text-foreground\"\n\t\t\t\t\t\t\t\tonClick={reset}\n\t\t\t\t\t\t\t\tdisabled={state !== \"ready\"}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<RotateCcw />\n\t\t\t\t\t\t\t\tReset\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t) : null}\n\n\t\t\t{/* Rail on desktop, stacked block below 1024px — at 820px a 320px rail would leave the graph\n\t\t\t    too little room, and the inspector is content, not a sidebar. */}\n\t\t\t<div className=\"wwc:flex wwc:min-h-0 wwc:flex-1 wwc:flex-col wwc:lg:flex-row\">\n\t\t\t\t<div className=\"wwc:relative wwc:min-h-0 wwc:min-w-0 wwc:flex-1\">\n\t\t\t\t\t{state === \"ready\" ? (\n\t\t\t\t\t\t<GraphCanvas\n\t\t\t\t\t\t\twithProvider={false}\n\t\t\t\t\t\t\tshowControls={false}\n\t\t\t\t\t\t\tshowMiniMap={showMiniMap}\n\t\t\t\t\t\t\tlayout={layout}\n\t\t\t\t\t\t\tnodes={flowNodes}\n\t\t\t\t\t\t\tedges={flowEdges}\n\t\t\t\t\t\t\tminZoom={MIN_ZOOM}\n\t\t\t\t\t\t\tmaxZoom={MAX_ZOOM}\n\t\t\t\t\t\t\tnodeTypes={NODE_TYPES}\n\t\t\t\t\t\t\tonNodesChange={handleNodesChange}\n\t\t\t\t\t\t\tonNodeDragStop={(_event, node) => {\n\t\t\t\t\t\t\t\tconst source = nodeById.get(node.id);\n\t\t\t\t\t\t\t\tif (source) onNodeMove?.(node.id, node.position, source);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tnodesConnectable={connectable}\n\t\t\t\t\t\t\tonConnect={(connection: Connection) => {\n\t\t\t\t\t\t\t\tif (connection.source && connection.target) {\n\t\t\t\t\t\t\t\t\tonConnectNodes?.({source: connection.source, target: connection.target});\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonPaneClick={() => {\n\t\t\t\t\t\t\t\tif (activeId === null) return;\n\t\t\t\t\t\t\t\tif (selectedNodeId === undefined) setInternalSelected(null);\n\t\t\t\t\t\t\t\tonSelectNode?.(null, undefined);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t// A controlled viewport takes the framing away from the canvas entirely.\n\t\t\t\t\t\t\t{...(viewport ? {viewport, fitView: false} : defaultViewport ? {defaultViewport, fitView: false} : {})}\n\t\t\t\t\t\t\tonViewportChange={onViewportChange}\n\t\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : state === \"loading\" ? (\n\t\t\t\t\t\t<GraphSkeleton />\n\t\t\t\t\t) : state === \"error\" ? (\n\t\t\t\t\t\t<Empty\n\t\t\t\t\t\t\ticon={<TriangleAlert className=\"wwc:h-8 wwc:w-8\" />}\n\t\t\t\t\t\t\ttitle=\"Couldn't load the graph\"\n\t\t\t\t\t\t\tdescription={typeof error === \"string\" ? error : \"The graph could not be loaded.\"}\n\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\tonRetry ? (\n\t\t\t\t\t\t\t\t\t<Button variant=\"outline\" size=\"sm\" onClick={onRetry}>\n\t\t\t\t\t\t\t\t\t\tRetry\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Empty\n\t\t\t\t\t\t\ticon={<Network className=\"wwc:h-8 wwc:w-8\" />}\n\t\t\t\t\t\t\ttitle={emptyTitle}\n\t\t\t\t\t\t\tdescription={emptyDescription}\n\t\t\t\t\t\t\taction={emptyAction}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{inspector ? (\n\t\t\t\t\t<aside\n\t\t\t\t\t\tclassName=\"wwc:min-h-0 wwc:shrink-0 wwc:overflow-auto wwc:border-t wwc:lg:border-t-0 wwc:lg:border-l\"\n\t\t\t\t\t\tstyle={{width: \"100%\", maxWidth: \"100%\", flexBasis: inspectorWidth}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inspector}\n\t\t\t\t\t</aside>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n/**\n * A functional node graph — pipeline wiring, a process lifecycle, an analysis readiness map, a\n * lineage DAG — described as typed nodes and edges rather than drawn.\n *\n * The widget owns the interaction contract: pan, pointer-centred zoom with the ZoomTools row (zoom\n * in/out, an editable percentage, fit and reset), selection by click or keyboard, node movement,\n * optional edge creation, the empty/loading/error states, and the inspector handoff for whatever the\n * host shows about the current selection.\n *\n * It needs a container with a resolved height; in one with none it collapses to a 0px strip.\n *\n * ```tsx\n * <NodeGraph\n *   nodes={[{id: \"src\", label: \"Site telemetry\", kind: \"Datasource\", position: {x: 0, y: 0}}]}\n *   edges={[{id: \"e1\", source: \"src\", target: \"clean\"}]}\n *   selectedNodeId={selected}\n *   onSelectNode={setSelected}\n *   inspector={selected ? <Evidence id={selected} /> : null}\n * />\n * ```\n */\nexport function NodeGraph<TNode = unknown, TEdge = unknown>(props: NodeGraphProps<TNode, TEdge>) {\n\t// The zoom row and the inspector live outside the canvas element but inside its context, so the\n\t// provider is mounted here and the canvas is told not to mount a second one.\n\treturn (\n\t\t<ReactFlowProvider>\n\t\t\t<NodeGraphInner {...props} />\n\t\t</ReactFlowProvider>\n\t);\n}\n"],"mappings":"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"}

package/dist/notification-center.d.mts

@@ -0,0 +1,40 @@
+//#region src/notification-center.d.ts
+export interface NotificationItem {
+  id: string;
+  title: string;
+  body?: string;
+  /** Pre-formatted, e.g. "2m ago" — the host owns the clock. */
+  time: string;
+  unread?: boolean;
+  /** Optional grouping label rendered as a chip, e.g. "System". */
+  kind?: string;
+  tone?: "default" | "success" | "warning" | "danger";
+}
+export interface ChangeEntry {
+  id: string;
+  /** Mutation kind, e.g. "create-object-type". */
+  kind: string;
+  summary: string;
+  time: string;
+  /** Applied entries are immune to undo, matching the prototype's changeset. */
+  committed?: boolean;
+  /** False when the mutation's target no longer exists, so undo cannot be offered. */
+  undoable?: boolean;
+}
+export interface NotificationCenterProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  notifications?: NotificationItem[];
+  changes?: ChangeEntry[];
+  /** Which stream to show. The host drives this from its own top-bar buttons. */
+  view?: "notifications" | "changes";
+  onDismiss?: (id: string) => void;
+  onClearAll?: () => void;
+  onUndo?: (id: string) => void;
+  onApplyAll?: () => void;
+  onDiscardAll?: () => void;
+  className?: string;
+}
+export declare function NotificationCenter({ open, onOpenChange, notifications, changes, view, onDismiss, onClearAll, onUndo, onApplyAll, onDiscardAll, className }: NotificationCenterProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=notification-center.d.mts.map

package/dist/notification-center.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-center.d.mts","names":[],"sources":["../src/notification-center.tsx"],"mappings":";iBAeiB;EAChB;EACA;EACA;;EAEA;EACA;;EAEA;EACA;;iBAGgB;EAChB;;EAEA;EACA;EACA;;EAEA;;EAEA;;iBAGgB;EAChB;EACA,eAAe;EACf,gBAAgB;EAChB,UAAU;;EAEV;EACA,aAAa;EACb;EACA,UAAU;EACV;EACA;EACA;;wBAmDe,qBACf,MACA,cACA,eACA,SACA,MACA,WACA,YACA,QACA,YACA,cACA,aACE,sDAAuB,IAAA"}