@unpunnyfuns/conduit 0.1.0

package/LICENSE

@@ -0,0 +1,25 @@
+MIT License
+
+Copyright (c) 2026 Coldtea AI
+Copyright (c) 2026 unpunnyfuns
+
+Portions of this software are derived from pr-lens
+(https://github.com/coldteadotai/pr-lens), licensed under the MIT License.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,202 @@
+# @unpunnyfuns/conduit
+
+Lane-based architecture diagrams for React, with live content in every card.
+
+A port of [pr-lens](https://github.com/coldteadotai/pr-lens)'s layout engine
+with a React + Tailwind v4 renderer. Hand-author a document — lanes, nodes,
+edges — and get a deterministic diagram whose cards can host any React
+content, such as a chart.
+
+## Install
+
+```bash
+npm install @unpunnyfuns/conduit
+```
+
+Peers: `react ^19`, `react-dom ^19`, `tailwindcss ^4`.
+
+In your Tailwind CSS entry:
+
+```css
+@import "tailwindcss";
+@import "@unpunnyfuns/conduit/theme.css";
+@source "../node_modules/@unpunnyfuns/conduit";
+```
+
+The `@source` line is required: the components use Tailwind utilities and
+Tailwind only emits the classes it can see.
+
+## Structure
+
+| Path                             | Contents                                                                                |
+| -------------------------------- | --------------------------------------------------------------------------------------- |
+| `@unpunnyfuns/conduit`           | `Diagram`, `Card`, `LaneBand`, `EdgeLayer`, `Badge`, `KindIcon`, `parseDocument`, types |
+| `@unpunnyfuns/conduit/layout`    | `layout()` — the pure engine, no React                                                  |
+| `@unpunnyfuns/conduit/theme.css` | `--color-conduit-*` tokens with light and `.dark` values                                |
+
+## Usage
+
+```tsx
+import { Diagram, parseDocument } from "@unpunnyfuns/conduit";
+
+const doc = parseDocument({
+  version: 1,
+  title: "Data ingress",
+  lanes: [
+    { id: "sources", label: "External sources", order: 0 },
+    { id: "ingest", label: "Ingestion", order: 1 },
+  ],
+  nodes: [
+    { id: "partner-api", label: "Partner API", kind: "external", lane: "sources", row: 0 },
+    { id: "kafka", label: "Kafka ingest", kind: "queue", lane: "ingest", row: 0, size: "chart" },
+  ],
+  edges: [{ id: "api-to-kafka", from: "partner-api", to: "kafka", kind: "http", animated: true }],
+});
+
+export const Ingress = () => (
+  <Diagram doc={doc} onNodeClick={(id) => console.log(id)}>
+    {(node) => (node.size === "chart" ? <Throughput source={node.id} /> : null)}
+  </Diagram>
+);
+```
+
+### Document
+
+```ts
+type ConduitDocumentInput = {
+  version: 1;
+  title: string;
+  summary?: string;
+  direction?: "right" | "down";
+  lanes: { id; label; subtitle?; order?; status?; summary? }[];
+  nodes: {
+    id;
+    label;
+    kind: NodeKind;
+    lane;
+    row?: number;
+    size?: "compact" | "chart" | number;
+    status?: Status;
+    badges?: { label; tone? }[];
+    group?;
+    subtitle?;
+    summary?;
+  }[];
+  edges?: {
+    id;
+    from;
+    to;
+    kind: EdgeKind;
+    label?;
+    emphasis?: "normal" | "hero" | "muted";
+    animated?;
+    status?;
+    summary?;
+  }[];
+  views?: {
+    id;
+    title;
+    summary?;
+    scope?: { kind: "all" } | { kind: "selection"; lanes?; nodes?; edges? };
+    children?;
+  }[];
+};
+
+type Status = "neutral" | "positive" | "caution" | "critical";
+```
+
+Two nodes with the same `row` in one lane sit side by side; a third throws
+`ROW_OVERFULL`. Status affects colour only. Omit `row` to derive it from
+edges. `size: "chart"` reserves a body slot; a number is a height in
+pixels.
+
+`direction: "down"` draws lanes as horizontal bands with cards flowing left
+to right; `row` then means column. Default `"right"`.
+
+### `Diagram` props
+
+| Prop                         | Type                                                   | Notes                                                                             |
+| ---------------------------- | ------------------------------------------------------ | --------------------------------------------------------------------------------- |
+| `doc`                        | `ConduitDocument`                                      | from `parseDocument`                                                              |
+| `view`                       | `string`                                               | id of a view to draw                                                              |
+| `selected`                   | `string[]`                                             | ids to keep lit; everything else dims                                             |
+| `highlight`                  | `"neighbours" \| "upstream" \| "downstream" \| "both"` | what a selection lights; traced edges draw at hero weight; default `"neighbours"` |
+| `onNodeClick`, `onEdgeClick` | `(id) => void`                                         | cards become buttons when set                                                     |
+| `cardHeights`                | `{ compact?; withSubtitle?; chart? }`                  | defaults 52 / 62 / 140                                                            |
+| `className`                  | `string`                                               | applied to the scroll viewport                                                    |
+| `fit`                        | `boolean`                                              | scale the canvas down to fit; default `false`                                     |
+| `children`                   | `(node) => ReactNode`                                  | body slot of every card that has one                                              |
+| `edgeState`                  | `Record<string, EdgeState>`                            | live overlay by edge id; never relayouts                                          |
+
+The root is a scroll viewport; size it with `className`. With `fit` the
+canvas scales down to the viewport width (never up).
+
+`layout()` runs during render and throws `ConduitLayoutError`
+(`UNKNOWN_VIEW`, `ROW_OVERFULL`, `NOTHING_TO_RENDER`) for a document it
+cannot draw; wrap `Diagram` in an error boundary if documents are
+user-supplied.
+
+### Live state
+
+`edgeState` flips a hop between live, idle, done, stale and down without
+touching the document or triggering a relayout. Per edge, with
+`state = edgeState[edge.id]`:
+
+| `state.level` | pulses                                                        | tone       | stroke                           |
+| ------------- | ------------------------------------------------------------- | ---------- | -------------------------------- |
+| absent        | document `animated`                                           | document   | as today                         |
+| `live`        | pulses on; period from `rate` when given, else the edge's own | document   | as today                         |
+| `idle`        | off                                                           | document   | as today                         |
+| `done`        | off                                                           | `positive` | as today                         |
+| `stale`       | off                                                           | `caution`  | as today                         |
+| `down`        | off                                                           | `critical` | dashed (`stroke-dasharray: 5 4`) |
+
+State tone replaces the document's `status` tone while set — a `critical`
+edge marked `stale` shows caution until the state clears.
+
+```tsx
+import { Diagram, type EdgeState } from "@unpunnyfuns/conduit";
+
+const edgeState: Record<string, EdgeState> = { "kafka-to-validator": { level: "down" } };
+<Diagram doc={doc} edgeState={edgeState} />;
+```
+
+### Layout without React
+
+```ts
+import { layout } from "@unpunnyfuns/conduit/layout";
+
+const { width, height, nodes, edges, atlas } = layout(doc, { view: "storage" });
+```
+
+Same document, same geometry, every time.
+
+To trace from a selection:
+
+```ts
+import { traceFrom } from "@unpunnyfuns/conduit/layout";
+
+const traced = traceFrom(doc.edges, ["warehouse"], "upstream");
+const litNodeIds = [...traced.nodes];
+```
+
+`traceFrom` walks whatever edge list you give it — pass `doc.edges` for the whole
+document, or the `edges` from a `layout()` call to match a view's scope, which is
+what `Diagram` does.
+
+## Development
+
+```bash
+npm test
+npm run example
+npm run build
+```
+
+`npm test` runs the engine tests in Node and the component tests in
+Chromium; `npm run example` starts the Vite playground.
+
+Developing requires Node ≥ 22.12 (Vitest 5); the published package runs on Node ≥ 20.11.
+
+## License
+
+MIT. Layout engine derived from pr-lens, © Coldtea AI.

package/dist/assert.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Ends a switch over a closed set. Adding a variant then fails to compile at
+ * every consumer instead of silently falling through at runtime.
+ */
+export declare const assertNever: (value: never, message?: string) => never;
+//# sourceMappingURL=assert.d.ts.map

package/dist/assert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assert.d.ts","sourceRoot":"","sources":["../src/assert.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,UAAW,KAAK,uBAAkC,KAEzE,CAAC"}

package/dist/assert.js

@@ -0,0 +1,8 @@
+/**
+ * Ends a switch over a closed set. Adding a variant then fails to compile at
+ * every consumer instead of silently falling through at runtime.
+ */
+export const assertNever = (value, message = "Unhandled variant") => {
+    throw new Error(`${message}: ${JSON.stringify(value)}`);
+};
+//# sourceMappingURL=assert.js.map

package/dist/assert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assert.js","sourceRoot":"","sources":["../src/assert.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAY,EAAE,OAAO,GAAG,mBAAmB,EAAS,EAAE;IAChF,MAAM,IAAI,KAAK,CAAC,GAAG,OAAO,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AAC1D,CAAC,CAAC"}

package/dist/cn.d.ts

@@ -0,0 +1,3 @@
+/** Joins class names, dropping falsy parts. */
+export declare const cn: (...parts: readonly (string | false | null | undefined)[]) => string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../src/cn.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,eAAO,MAAM,EAAE,aAAc,SAAS,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,KAAG,MACiB,CAAC"}

package/dist/cn.js

@@ -0,0 +1,3 @@
+/** Joins class names, dropping falsy parts. */
+export const cn = (...parts) => parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+//# sourceMappingURL=cn.js.map

package/dist/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","sourceRoot":"","sources":["../src/cn.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAqD,EAAU,EAAE,CACrF,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAkB,EAAE,CAAC,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC"}

package/dist/components/Badge.d.ts

@@ -0,0 +1,6 @@
+import type { Status } from "../schema/primitives.js";
+export declare const Badge: ({ label, tone }: {
+    label: string;
+    tone: Status;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAWtD,eAAO,MAAM,KAAK,oBAAqB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,gCAUrE,CAAC"}

package/dist/components/Badge.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../cn.js";
+import { BADGE_HEIGHT } from "../layout/design.js";
+const TONE = {
+    neutral: "bg-conduit-chip border-conduit-card-border text-conduit-muted",
+    positive: "bg-conduit-positive-fill border-conduit-positive-border text-conduit-positive-text",
+    caution: "bg-conduit-caution-fill border-conduit-caution-border text-conduit-caution-text",
+    critical: "bg-conduit-critical-fill border-conduit-critical-border text-conduit-critical-text",
+};
+export const Badge = ({ label, tone }) => (_jsx("span", { className: cn("inline-flex items-center rounded-full border px-[9px] text-[8.5px] font-bold uppercase leading-none tracking-[0.06em] whitespace-nowrap", TONE[tone]), style: { height: BADGE_HEIGHT }, children: label }));
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,MAAM,IAAI,GAA2B;IACnC,OAAO,EAAE,+DAA+D;IACxE,QAAQ,EAAE,oFAAoF;IAC9F,OAAO,EAAE,iFAAiF;IAC1F,QAAQ,EAAE,oFAAoF;CAC/F,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAmC,EAAE,EAAE,CAAC,CACzE,eACE,SAAS,EAAE,EAAE,CACX,yIAAyI,EACzI,IAAI,CAAC,IAAI,CAAC,CACX,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,YAE9B,KAAK,GACD,CACR,CAAC"}

package/dist/components/Card.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import type { ConduitNode } from "../schema/document.js";
+import type { Box } from "../layout/geometry.js";
+export type CardProps = {
+    id?: string;
+    node: ConduitNode;
+    box: Box;
+    /** Height of the title block the layout reserved; the body slot gets the rest. */
+    headerHeight: number;
+    dimmed?: boolean;
+    selected?: boolean;
+    onClick?: () => void;
+    children?: ReactNode;
+};
+/**
+ * One card. Absolutely positioned from its layout box so that a chart
+ * mounting in the body changes nothing around it.
+ */
+export declare const Card: ({ id, node, box, headerHeight, dimmed, selected, onClick, children, }: CardProps) => import("react").JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAcjD,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,WAAW,CAAC;IAClB,GAAG,EAAE,GAAG,CAAC;IACT,kFAAkF;IAClF,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI,0EASd,SAAS,gCAuDX,CAAC"}

package/dist/components/Card.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../cn.js";
+import { Badge } from "./Badge.js";
+import { KindIcon } from "./icons.js";
+const BORDER = {
+    neutral: "border-conduit-card-border",
+    positive: "border-conduit-positive-border",
+    caution: "border-conduit-caution-border",
+    critical: "border-conduit-critical-border",
+};
+/** Below this width a card's title steps down a size, as upstream did. */
+const SMALL_TITLE_BELOW = 200;
+/**
+ * One card. Absolutely positioned from its layout box so that a chart
+ * mounting in the body changes nothing around it.
+ */
+export const Card = ({ id, node, box, headerHeight, dimmed = false, selected = false, onClick, children, }) => {
+    const hasBody = box.height > headerHeight;
+    const label = node.subtitle === undefined ? node.label : `${node.label}, ${node.subtitle}`;
+    const className = cn("absolute flex flex-col rounded-[10px] border bg-conduit-card text-left shadow-[0_1px_2px_var(--color-conduit-shadow)] transition-opacity", BORDER[node.status], dimmed && "opacity-45", selected && "ring-2 ring-conduit-fg/40");
+    const style = { left: box.x, top: box.y, width: box.width, height: box.height };
+    return (_jsxs("div", { role: "group", "aria-label": label, "data-conduit-node": id, className: className, style: style, children: [onClick !== undefined && (_jsx("button", { type: "button", "aria-label": label, onClick: onClick, className: "absolute inset-x-0 top-0 cursor-pointer rounded-[10px] bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-conduit-fg/40", style: { height: headerHeight } })), node.badges.length > 0 && (_jsx("div", { className: "absolute -top-2 right-[7px] flex gap-1.5", children: node.badges.map((badge) => (_jsx(Badge, { label: badge.label, tone: badge.tone }, badge.label))) })), _jsxs("div", { className: "flex shrink-0 items-center gap-[10px] px-[14px]", style: { height: headerHeight }, children: [_jsx("span", { className: "flex size-[26px] shrink-0 items-center justify-center rounded-[7px] bg-conduit-chip", children: _jsx(KindIcon, { kind: node.kind }) }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: cn("truncate font-semibold text-conduit-fg", box.width >= SMALL_TITLE_BELOW ? "text-[13px]" : "text-[11.5px]"), children: node.label }), node.subtitle !== undefined && (_jsx("span", { className: "truncate font-mono text-[9.5px] text-conduit-muted", children: node.subtitle }))] })] }), hasBody && _jsx("div", { className: "min-h-0 flex-1 px-[14px] pb-[12px]", children: children })] }));
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,GAA2B;IACrC,OAAO,EAAE,4BAA4B;IACrC,QAAQ,EAAE,gCAAgC;IAC1C,OAAO,EAAE,+BAA+B;IACxC,QAAQ,EAAE,gCAAgC;CAC3C,CAAC;AAEF,0EAA0E;AAC1E,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAc9B;;;GAGG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,EAAE,EACF,IAAI,EACJ,GAAG,EACH,YAAY,EACZ,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,GACE,EAAE,EAAE;IACd,MAAM,OAAO,GAAG,GAAG,CAAC,MAAM,GAAG,YAAY,CAAC;IAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC3F,MAAM,SAAS,GAAG,EAAE,CAClB,0IAA0I,EAC1I,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EACnB,MAAM,IAAI,YAAY,EACtB,QAAQ,IAAI,2BAA2B,CACxC,CAAC;IACF,MAAM,KAAK,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC;IAEhF,OAAO,CACL,eAAK,IAAI,EAAC,OAAO,gBAAa,KAAK,uBAAqB,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,aAC3F,OAAO,KAAK,SAAS,IAAI,CACxB,iBACE,IAAI,EAAC,QAAQ,gBACD,KAAK,EACjB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,wJAAwJ,EAClK,KAAK,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,GAC/B,CACH,EACA,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,cAAK,SAAS,EAAC,0CAA0C,YACtD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC1B,KAAC,KAAK,IAAmB,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAjD,KAAK,CAAC,KAAK,CAA0C,CAClE,CAAC,GACE,CACP,EACD,eACE,SAAS,EAAC,iDAAiD,EAC3D,KAAK,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,aAE/B,eAAM,SAAS,EAAC,qFAAqF,YACnG,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,GACxB,EACP,gBAAM,SAAS,EAAC,uBAAuB,aACrC,eACE,SAAS,EAAE,EAAE,CACX,wCAAwC,EACxC,GAAG,CAAC,KAAK,IAAI,iBAAiB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CACjE,YAEA,IAAI,CAAC,KAAK,GACN,EACN,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,CAC9B,eAAM,SAAS,EAAC,oDAAoD,YACjE,IAAI,CAAC,QAAQ,GACT,CACR,IACI,IACH,EACL,OAAO,IAAI,cAAK,SAAS,EAAC,oCAAoC,YAAE,QAAQ,GAAO,IAC5E,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/Diagram.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+import type { ConduitDocument, ConduitNode } from "../schema/document.js";
+import { type CardHeights } from "../layout/design.js";
+import { type Highlight } from "../layout/trace.js";
+import type { EdgeState } from "./pulse.js";
+export type DiagramProps = {
+    doc: ConduitDocument;
+    /** Id of a view to draw. Omitted draws the whole document. */
+    view?: string;
+    /** Ids of lanes, nodes or edges to keep lit; everything else dims. */
+    selected?: readonly string[];
+    /** What a selection lights: neighbours (default), everything upstream, downstream, or both. */
+    highlight?: Highlight;
+    onNodeClick?: (id: string) => void;
+    onEdgeClick?: (id: string) => void;
+    cardHeights?: Partial<CardHeights>;
+    /** Applied to the scroll viewport; size it with `h-[…]` / `max-h-[…]` etc. */
+    className?: string;
+    /** Scales the canvas down to the viewport's width. Never scales up. */
+    fit?: boolean;
+    /** Fills the body slot of every card that has one. */
+    children?: (node: ConduitNode) => ReactNode;
+    /** Live overlay by edge id; changes never relayout. */
+    edgeState?: Readonly<Record<string, EdgeState>>;
+};
+/**
+ * The diagram: lanes underneath, one svg of edges, cards on top. Layout is
+ * pure and memoised on its inputs, so a chart re-rendering inside a card
+ * never triggers a relayout.
+ *
+ * The root (`role="figure"`) is a scroll viewport; the fixed-size drawing
+ * itself is `[data-conduit-canvas]` inside it, scaled down to the viewport's
+ * width when `fit` is set. Atlas coordinates from `layout()` are relative to
+ * the canvas, not the viewport.
+ */
+export declare const Diagram: ({ doc, view, selected, highlight, onNodeClick, onEdgeClick, cardHeights, className, fit, children, edgeState, }: DiagramProps) => import("react").JSX.Element;
+//# sourceMappingURL=Diagram.d.ts.map

package/dist/components/Diagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Diagram.d.ts","sourceRoot":"","sources":["../../src/components/Diagram.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAE1E,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAE7E,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAI/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,eAAe,CAAC;IACrB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,+FAA+F;IAC/F,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACnC,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,SAAS,CAAC;IAC5C,uDAAuD;IACvD,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;CACjD,CAAC;AAKF;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,oHAYjB,YAAY,gCA0Jd,CAAC"}

package/dist/components/Diagram.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "../cn.js";
+import { DEFAULT_CARD_HEIGHTS } from "../layout/design.js";
+import { layout } from "../layout/layout.js";
+import { traceFrom } from "../layout/trace.js";
+import { Card } from "./Card.js";
+import { EdgeLayer } from "./EdgeLayer.js";
+import { LaneBand } from "./Lane.js";
+const headerHeightOf = (node, heights) => node.subtitle === undefined ? heights.compact : heights.withSubtitle;
+/**
+ * The diagram: lanes underneath, one svg of edges, cards on top. Layout is
+ * pure and memoised on its inputs, so a chart re-rendering inside a card
+ * never triggers a relayout.
+ *
+ * The root (`role="figure"`) is a scroll viewport; the fixed-size drawing
+ * itself is `[data-conduit-canvas]` inside it, scaled down to the viewport's
+ * width when `fit` is set. Atlas coordinates from `layout()` are relative to
+ * the canvas, not the viewport.
+ */
+export const Diagram = ({ doc, view, selected, highlight = "neighbours", onNodeClick, onEdgeClick, cardHeights, className, fit = false, children, edgeState, }) => {
+    // Deps are the scalars, not `cardHeights` itself: a caller passing a fresh
+    // object literal every render must not defeat the memo below it.
+    const compactHeight = cardHeights?.compact;
+    const withSubtitleHeight = cardHeights?.withSubtitle;
+    const chartHeight = cardHeights?.chart;
+    const heights = useMemo(() => ({
+        compact: compactHeight ?? DEFAULT_CARD_HEIGHTS.compact,
+        withSubtitle: withSubtitleHeight ?? DEFAULT_CARD_HEIGHTS.withSubtitle,
+        chart: chartHeight ?? DEFAULT_CARD_HEIGHTS.chart,
+    }), [compactHeight, withSubtitleHeight, chartHeight]);
+    const { laid, nodeLabel } = useMemo(() => {
+        const drawn = layout(doc, { view, cardHeights: heights });
+        const labels = new Map(drawn.nodes.map(({ node }) => [node.id, node.label]));
+        return { laid: drawn, nodeLabel: labels };
+    }, [doc, view, heights]);
+    const viewportRef = useRef(null);
+    const [viewportWidth, setViewportWidth] = useState(0);
+    useEffect(() => {
+        if (!fit)
+            return;
+        const node = viewportRef.current;
+        if (node === null || typeof ResizeObserver === "undefined")
+            return;
+        const update = () => setViewportWidth(node.clientWidth);
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [fit]);
+    const scale = fit && viewportWidth > 0 ? Math.min(1, viewportWidth / laid.width) : 1;
+    const lit = useMemo(() => {
+        if (selected === undefined || selected.length === 0)
+            return undefined;
+        const trace = traceFrom(laid.edges.map(({ edge }) => edge), selected, highlight);
+        const ids = new Set(selected);
+        const nodes = new Set(laid.nodes.filter(({ node }) => trace.nodes.has(node.id)).map(({ node }) => node.id));
+        const edges = new Set(laid.edges.filter(({ edge }) => trace.edges.has(edge.id)).map(({ edge }) => edge.id));
+        const lanesWithLitNode = new Set();
+        for (const { node } of laid.nodes)
+            if (nodes.has(node.id))
+                lanesWithLitNode.add(node.lane);
+        const lanes = new Set(laid.lanes
+            .filter(({ lane }) => ids.has(lane.id) || lanesWithLitNode.has(lane.id))
+            .map(({ lane }) => lane.id));
+        return { nodes, edges, lanes };
+    }, [selected, highlight, laid]);
+    const emphasised = lit === undefined || highlight === "neighbours" ? undefined : lit.edges;
+    const dimmedEdges = useMemo(() => new Set(lit === undefined
+        ? []
+        : laid.edges.filter(({ edge }) => !lit.edges.has(edge.id)).map(({ edge }) => edge.id)), [lit, laid]);
+    return (_jsx("div", { role: "figure", "aria-label": doc.title, ref: viewportRef, className: cn("relative max-w-full overflow-auto", className), children: _jsxs("div", { "data-conduit-canvas": true, className: "relative rounded-xl bg-conduit-bg bg-[radial-gradient(var(--color-conduit-dot)_1px,transparent_1px)] bg-[size:18px_18px] text-conduit-fg", style: {
+                width: laid.width,
+                height: laid.height,
+                ...(scale < 1
+                    ? {
+                        transform: `scale(${scale})`,
+                        transformOrigin: "top left",
+                        marginRight: -(laid.width * (1 - scale)),
+                        marginBottom: -(laid.height * (1 - scale)),
+                    }
+                    : {}),
+            }, children: [laid.lanes.map(({ lane, box }) => (_jsx(LaneBand, { id: lane.id, lane: lane, box: box, dimmed: lit !== undefined && !lit.lanes.has(lane.id) }, lane.id))), _jsx(EdgeLayer, { width: laid.width, height: laid.height, edges: laid.edges, dimmedIds: dimmedEdges, emphasisedIds: emphasised, onEdgeClick: onEdgeClick, edgeState: edgeState }), laid.nodes.map(({ node, box }) => {
+                    const headerHeight = headerHeightOf(node, heights);
+                    const hasBody = box.height > headerHeight;
+                    return (_jsx(Card, { id: node.id, node: node, box: box, headerHeight: headerHeight, dimmed: lit !== undefined && !lit.nodes.has(node.id), selected: selected?.includes(node.id) ?? false, onClick: onNodeClick === undefined ? undefined : () => onNodeClick(node.id), children: hasBody ? children?.(node) : null }, node.id));
+                }), _jsx("ul", { className: "sr-only", children: laid.edges.map(({ edge }) => {
+                        const text = `${nodeLabel.get(edge.from) ?? edge.from} → ${nodeLabel.get(edge.to) ?? edge.to}, ${edge.kind}`;
+                        return (_jsx("li", { children: onEdgeClick === undefined ? (text) : (_jsx("button", { type: "button", onClick: () => onEdgeClick(edge.id), children: text })) }, edge.id));
+                    }) })] }) }));
+};
+//# sourceMappingURL=Diagram.js.map

package/dist/components/Diagram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Diagram.js","sourceRoot":"","sources":["../../src/components/Diagram.tsx"],"names":[],"mappings":"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"}

package/dist/components/EdgeLayer.d.ts

@@ -0,0 +1,23 @@
+import type { PlacedEdge } from "../layout/layout.js";
+import { type EdgeState } from "./pulse.js";
+export type EdgeLayerProps = {
+    width: number;
+    height: number;
+    edges: readonly PlacedEdge[];
+    dimmedIds: ReadonlySet<string>;
+    /**
+     * Edges drawn at hero weight without changing their pulses, e.g. a traced path.
+     * An edge the document marks `muted` stays muted.
+     */
+    emphasisedIds?: ReadonlySet<string>;
+    onEdgeClick?: (id: string) => void;
+    /** Live overlay by edge id. Absent ids follow the document; see the mapping in the README. */
+    edgeState?: Readonly<Record<string, EdgeState>>;
+};
+/**
+ * Every edge of the diagram in one svg under the cards. Lines pass behind
+ * cards; pills are opaque so they read wherever they land, and are drawn
+ * last so they pass in front of everything in this layer.
+ */
+export declare const EdgeLayer: ({ width, height, edges, dimmedIds, emphasisedIds, onEdgeClick, edgeState, }: EdgeLayerProps) => import("react").JSX.Element;
+//# sourceMappingURL=EdgeLayer.d.ts.map

package/dist/components/EdgeLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdgeLayer.d.ts","sourceRoot":"","sources":["../../src/components/EdgeLayer.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AA+G9E,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,8FAA8F;IAC9F,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;CACjD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,gFAQnB,cAAc,gCAgGhB,CAAC"}

package/dist/components/EdgeLayer.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../cn.js";
+import { HERO_PULSE_COUNT, HERO_PULSE_DURATION, PILL_TEXT_SIZE, PULSE_DURATION, } from "../layout/design.js";
+import { coord } from "../layout/geometry.js";
+import { pulseDurationFor } from "./pulse.js";
+import { STATUSES } from "../schema/primitives.js";
+const STROKE = {
+    neutral: "stroke-conduit-edge",
+    positive: "stroke-conduit-positive",
+    caution: "stroke-conduit-caution",
+    critical: "stroke-conduit-critical",
+};
+const FILL = {
+    neutral: "fill-conduit-edge",
+    positive: "fill-conduit-positive",
+    caution: "fill-conduit-caution",
+    critical: "fill-conduit-critical",
+};
+const PILL_TEXT = {
+    neutral: "fill-conduit-muted",
+    positive: "fill-conduit-positive-text",
+    caution: "fill-conduit-caution-text",
+    critical: "fill-conduit-critical-text",
+};
+const PULSE_RADIUS = 2.6;
+const TRAIN_RADIUS = 3;
+const toneFor = (level, base) => {
+    switch (level) {
+        case "down":
+            return "critical";
+        case "stale":
+            return "caution";
+        case "done":
+            return "positive";
+        default:
+            return base;
+    }
+};
+/**
+ * The travelling pulse: the mark that says a connection carries traffic
+ * rather than merely existing. A dot running behind the drawing's clock says
+ * so with a negative `begin`, so it is never seen waiting at the origin.
+ */
+const Pulses = ({ id, path, tone, hero, duration, }) => {
+    const count = hero ? HERO_PULSE_COUNT : 1;
+    return (_jsx("g", { "data-pulse": id, className: "motion-reduce:hidden", children: Array.from({ length: count }, (_, index) => {
+            const behind = ((duration / count) * index) % duration;
+            return (_jsx("circle", { r: hero ? TRAIN_RADIUS : PULSE_RADIUS, className: FILL[tone], children: _jsx("animateMotion", { dur: `${coord(duration)}s`, begin: behind === 0 ? undefined : `${coord(behind - duration)}s`, repeatCount: "indefinite", path: path }) }, index));
+        }) }));
+};
+const Pill = ({ text, box, tone, }) => (_jsxs("g", { children: [_jsx("rect", { className: "fill-conduit-pill stroke-conduit-pill-border stroke-[1]", x: box.x, y: box.y, width: box.width, height: box.height, rx: box.height / 2 }), _jsx("text", { className: cn("font-semibold", PILL_TEXT[tone]), style: { fontSize: PILL_TEXT_SIZE }, x: box.x + box.width / 2, y: box.y + box.height / 2 + 3.5, textAnchor: "middle", children: text })] }));
+const EMPTY = new Set();
+const NO_STATE = {};
+/**
+ * Every edge of the diagram in one svg under the cards. Lines pass behind
+ * cards; pills are opaque so they read wherever they land, and are drawn
+ * last so they pass in front of everything in this layer.
+ */
+export const EdgeLayer = ({ width, height, edges, dimmedIds, emphasisedIds = EMPTY, onEdgeClick, edgeState = NO_STATE, }) => {
+    const uid = useId().replace(/:/g, "");
+    const marker = (tone) => `${uid}-mk-${tone}`;
+    return (_jsxs("svg", { className: "pointer-events-none absolute inset-0 overflow-visible", width: width, height: height, viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true", children: [_jsx("defs", { children: STATUSES.map((tone) => (_jsx("marker", { id: marker(tone), viewBox: "0 0 10 10", refX: 8, refY: 5, markerWidth: 6.5, markerHeight: 6.5, orient: "auto-start-reverse", children: _jsx("path", { d: "M0,0 L10,5 L0,10 z", className: FILL[tone] }) }, tone))) }), edges.map(({ edge, path, tone }) => {
+                const state = edgeState[edge.id];
+                const level = state?.level;
+                const liveTone = toneFor(level, tone);
+                const pulsing = level === undefined ? edge.animated : level === "live";
+                const heroPulses = edge.emphasis === "hero";
+                const duration = level === "live" && state?.rate !== undefined
+                    ? pulseDurationFor(state.rate)
+                    : heroPulses
+                        ? HERO_PULSE_DURATION
+                        : PULSE_DURATION;
+                const hero = heroPulses || (emphasisedIds.has(edge.id) && edge.emphasis !== "muted");
+                const dimmed = dimmedIds.has(edge.id) || edge.emphasis === "muted";
+                return (_jsxs("g", { "data-edge-group": edge.id, "data-edge-state": level, className: cn("transition-opacity", dimmed && "opacity-45"), children: [hero && (_jsx("path", { d: path, className: cn("fill-none stroke-[7] opacity-[0.14]", STROKE[liveTone]) })), _jsx("path", { "data-edge": edge.id, d: path, className: cn("fill-none", STROKE[liveTone], hero ? "stroke-[2.25]" : "stroke-[1.5]", level === "down" && "[stroke-dasharray:5_4]"), markerEnd: `url(#${marker(liveTone)})` }), pulsing && (_jsx(Pulses, { id: edge.id, path: path, tone: liveTone, hero: heroPulses, duration: duration })), onEdgeClick !== undefined && (_jsx("path", { "data-edge-hit": edge.id, d: path, className: "pointer-events-auto cursor-pointer fill-none stroke-transparent stroke-[12]", onClick: () => onEdgeClick(edge.id) }))] }, edge.id));
+            }), edges.map(({ edge, label, tone }) => {
+                if (label === undefined)
+                    return null;
+                const level = edgeState[edge.id]?.level;
+                const liveTone = toneFor(level, tone);
+                return _jsx(Pill, { text: label.text, box: label.box, tone: liveTone }, `${edge.id}-label`);
+            })] }));
+};
+//# sourceMappingURL=EdgeLayer.js.map