@flanksource/clicky-ui 0.3.36 → 0.3.37

package/dist/data/ExecutionTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExecutionTree.js","sources":["../../src/data/ExecutionTree.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Tree } from \"./Tree\";\n\n// ExecutionTree renders a generic, type-agnostic call/execution tree — a method\n// call tree, a span tree, an activity sequence — where each node carries a cost\n// and a status and may nest. It is the shared home for what used to be\n// per-feature call-tree renderers: any producer maps its data into\n// ExecutionNode and gets the same tree, timing, and status rendering.\n\nexport type ExecutionNode = {\n  /** Stable unique key within the tree. */\n  id: string;\n  /** Display label (method/operation/step name). */\n  label: string;\n  /** Free-form node kind hint. */\n  kind?: string;\n  /** Outcome: ok | error | warning | running | pending. */\n  status?: string;\n  /** Numeric cost in `unit`. */\n  cost?: number;\n  /** Cost unit (default \"ms\"). */\n  unit?: string;\n  /** Aggregated invocation count (renders ×N when > 1). */\n  times?: number;\n  /** Owning class / file, rendered as a muted suffix. */\n  className?: string;\n  lineNumber?: number;\n  /** Extra key/values rendered as muted chips. */\n  detail?: Record<string, string>;\n  /** Node can be expanded via loadChildren even with no inline children. */\n  expandable?: boolean;\n  children?: ExecutionNode[];\n};\n\nexport type ExecutionTreeProps<T extends ExecutionNode = ExecutionNode> = {\n  roots: T[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  /** Open nodes shallower than this depth on first render (default 1). */\n  defaultOpenDepth?: number;\n  /** Costs at or above this value render in red (slow-path highlight). */\n  costThreshold?: number;\n  /** Override the entire row rendering. */\n  renderRow?: (node: T) => ReactNode;\n  loadChildren?: (node: T) => Promise<T[]>;\n};\n\nexport function ExecutionTree<T extends ExecutionNode = ExecutionNode>({\n  roots,\n  className,\n  empty,\n  showControls,\n  defaultOpenDepth = 1,\n  costThreshold,\n  renderRow,\n  loadChildren,\n}: ExecutionTreeProps<T>) {\n  return (\n    <Tree<T>\n      roots={roots}\n      getKey={(n) => n.id}\n      getChildren={(n) => n.children as T[] | undefined}\n      defaultOpen={(_n, depth) => depth < defaultOpenDepth}\n      {...(className !== undefined ? { className } : {})}\n      {...(empty !== undefined ? { empty } : {})}\n      {...(showControls !== undefined ? { showControls } : {})}\n      {...(loadChildren ? { loadChildren, hasMoreChildren: (n: T) => n.expandable === true } : {})}\n      renderRow={({ node }) =>\n        renderRow ? renderRow(node) : <DefaultExecutionRow node={node} costThreshold={costThreshold} />\n      }\n    />\n  );\n}\n\nfunction DefaultExecutionRow({ node, costThreshold }: { node: ExecutionNode; costThreshold: number | undefined }) {\n  const slow = costThreshold != null && node.cost != null && node.cost >= costThreshold;\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs\">\n      {node.status && <StatusDot status={node.status} />}\n      <span className=\"font-semibold text-foreground\">{node.label}</span>\n      {node.cost != null && (\n        <span className={slow ? \"text-red-600\" : \"text-muted-foreground\"}>{formatCost(node)}</span>\n      )}\n      {node.times != null && node.times > 1 && (\n        <span className=\"text-muted-foreground/60\">×{node.times}</span>\n      )}\n      {node.className && (\n        <span className=\"break-all text-muted-foreground/60\">\n          {node.className}\n          {node.lineNumber != null && node.lineNumber > 0 ? `:${node.lineNumber}` : \"\"}\n        </span>\n      )}\n      {node.detail &&\n        Object.entries(node.detail).map(([k, v]) => (\n          <span key={k} className=\"text-muted-foreground/60\">\n            {k}={v}\n          </span>\n        ))}\n    </div>\n  );\n}\n\nfunction formatCost(node: ExecutionNode): string {\n  const unit = node.unit || \"ms\";\n  const value = node.cost ?? 0;\n  return unit === \"ms\" ? `${value.toFixed(3)}ms` : `${value} ${unit}`;\n}\n\nconst STATUS_COLOR: Record<string, string> = {\n  ok: \"text-green-600\",\n  success: \"text-green-600\",\n  error: \"text-red-600\",\n  warning: \"text-amber-500\",\n  running: \"text-blue-600\",\n  pending: \"text-muted-foreground\",\n};\n\nfunction StatusDot({ status }: { status: string }) {\n  return (\n    <span className={`shrink-0 ${STATUS_COLOR[status] ?? \"text-muted-foreground\"}`} title={status}>\n      ●\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAgDO,SAAS,cAAuD;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,MAAM,EAAE;AAAA,MACjB,aAAa,CAAC,MAAM,EAAE;AAAA,MACtB,aAAa,CAAC,IAAI,UAAU,QAAQ;AAAA,MACnC,GAAI,cAAc,SAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MAC9C,GAAI,UAAU,SAAY,EAAE,MAAA,IAAU,CAAA;AAAA,MACtC,GAAI,iBAAiB,SAAY,EAAE,aAAA,IAAiB,CAAA;AAAA,MACpD,GAAI,eAAe,EAAE,cAAc,iBAAiB,CAAC,MAAS,EAAE,eAAe,KAAA,IAAS,CAAA;AAAA,MACzF,WAAW,CAAC,EAAE,KAAA,MACZ,YAAY,UAAU,IAAI,IAAI,oBAAC,qBAAA,EAAoB,MAAY,cAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AAIrG;AAEA,SAAS,oBAAoB,EAAE,MAAM,iBAA6E;AAChH,QAAM,OAAO,iBAAiB,QAAQ,KAAK,QAAQ,QAAQ,KAAK,QAAQ;AACxE,SACE,qBAAC,OAAA,EAAI,WAAU,sEACZ,UAAA;AAAA,IAAA,KAAK,UAAU,oBAAC,WAAA,EAAU,QAAQ,KAAK,QAAQ;AAAA,IAChD,oBAAC,QAAA,EAAK,WAAU,iCAAiC,eAAK,OAAM;AAAA,IAC3D,KAAK,QAAQ,QACZ,oBAAC,QAAA,EAAK,WAAW,OAAO,iBAAiB,yBAA0B,UAAA,WAAW,IAAI,EAAA,CAAE;AAAA,IAErF,KAAK,SAAS,QAAQ,KAAK,QAAQ,KAClC,qBAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA;AAAA,MAAA;AAAA,MAAE,KAAK;AAAA,IAAA,GAAM;AAAA,IAEzD,KAAK,aACJ,qBAAC,QAAA,EAAK,WAAU,sCACb,UAAA;AAAA,MAAA,KAAK;AAAA,MACL,KAAK,cAAc,QAAQ,KAAK,aAAa,IAAI,IAAI,KAAK,UAAU,KAAK;AAAA,IAAA,GAC5E;AAAA,IAED,KAAK,UACJ,OAAO,QAAQ,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MACpC,qBAAC,QAAA,EAAa,WAAU,4BACrB,UAAA;AAAA,MAAA;AAAA,MAAE;AAAA,MAAE;AAAA,IAAA,EAAA,GADI,CAEX,CACD;AAAA,EAAA,GACL;AAEJ;AAEA,SAAS,WAAW,MAA6B;AAC/C,QAAM,OAAO,KAAK,QAAQ;AAC1B,QAAM,QAAQ,KAAK,QAAQ;AAC3B,SAAO,SAAS,OAAO,GAAG,MAAM,QAAQ,CAAC,CAAC,OAAO,GAAG,KAAK,IAAI,IAAI;AACnE;AAEA,MAAM,eAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,UAAU,EAAE,UAA8B;AACjD,SACE,oBAAC,QAAA,EAAK,WAAW,YAAY,aAAa,MAAM,KAAK,uBAAuB,IAAI,OAAO,QAAQ,UAAA,IAAA,CAE/F;AAEJ;"}
+{"version":3,"file":"ExecutionTree.js","sources":["../../src/data/ExecutionTree.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Tree } from \"./Tree\";\n\n// ExecutionTree renders a generic, type-agnostic call/execution tree — a method\n// call tree, a span tree, an activity sequence — where each node carries a cost\n// and a status and may nest. It is the shared home for what used to be\n// per-feature call-tree renderers: any producer maps its data into\n// ExecutionNode and gets the same tree, timing, and status rendering.\n\nexport type ExecutionNode = {\n  /** Stable unique key within the tree. */\n  id: string;\n  /** Display label (method/operation/step name). */\n  label: string;\n  /** Free-form node kind hint. */\n  kind?: string;\n  /** Outcome: ok | error | warning | running | pending. */\n  status?: string;\n  /** Numeric cost in `unit`. */\n  cost?: number;\n  /** Cost unit (default \"ms\"). */\n  unit?: string;\n  /** Aggregated invocation count (renders ×N when > 1). */\n  times?: number;\n  /** Owning class / file, rendered as a muted suffix. */\n  className?: string;\n  lineNumber?: number;\n  /** Extra key/values rendered as muted chips. */\n  detail?: Record<string, string>;\n  /** Node can be expanded via loadChildren even with no inline children. */\n  expandable?: boolean;\n  children?: ExecutionNode[];\n};\n\nexport type ExecutionTreeProps<T extends ExecutionNode = ExecutionNode> = {\n  roots: T[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  /** Open nodes shallower than this depth on first render (default 1). */\n  defaultOpenDepth?: number;\n  /** Costs at or above this value render in red (slow-path highlight). */\n  costThreshold?: number;\n  /** Override the entire row rendering. */\n  renderRow?: (node: T) => ReactNode;\n  /**\n   * Render extra content beneath a node's row and above its children (e.g. the\n   * decompiled source line a call was made from). Rendered for leaf and parent\n   * nodes alike; a click or keydown inside it never toggles the row. Returning\n   * `null`/`undefined`/`false` renders nothing.\n   */\n  renderDetail?: (node: T) => ReactNode;\n  /** Render a call's return or error after its nested calls. */\n  renderAfterChildren?: (node: T) => ReactNode;\n  loadChildren?: (node: T) => Promise<T[]>;\n};\n\nexport function ExecutionTree<T extends ExecutionNode = ExecutionNode>({\n  roots,\n  className,\n  empty,\n  showControls,\n  defaultOpenDepth = 1,\n  costThreshold,\n  renderRow,\n  renderDetail,\n  renderAfterChildren,\n  loadChildren,\n}: ExecutionTreeProps<T>) {\n  return (\n    <Tree<T>\n      roots={roots}\n      getKey={(n) => n.id}\n      getChildren={(n) => n.children as T[] | undefined}\n      defaultOpen={(_n, depth) => depth < defaultOpenDepth}\n      {...(className !== undefined ? { className } : {})}\n      {...(empty !== undefined ? { empty } : {})}\n      {...(showControls !== undefined ? { showControls } : {})}\n      {...(renderDetail ? { renderDetail } : {})}\n      {...(renderAfterChildren ? { renderAfterChildren } : {})}\n      {...(loadChildren ? { loadChildren, hasMoreChildren: (n: T) => n.expandable === true } : {})}\n      renderRow={({ node }) =>\n        renderRow ? renderRow(node) : <DefaultExecutionRow node={node} costThreshold={costThreshold} />\n      }\n    />\n  );\n}\n\nfunction DefaultExecutionRow({ node, costThreshold }: { node: ExecutionNode; costThreshold: number | undefined }) {\n  const slow = costThreshold != null && node.cost != null && node.cost >= costThreshold;\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs\">\n      {node.status && <StatusDot status={node.status} />}\n      <span className=\"font-semibold text-foreground\">{node.label}</span>\n      {node.cost != null && (\n        <span className={slow ? \"text-red-600\" : \"text-muted-foreground\"}>{formatCost(node)}</span>\n      )}\n      {node.times != null && node.times > 1 && (\n        <span className=\"text-muted-foreground/60\">×{node.times}</span>\n      )}\n      {node.className && (\n        <span className=\"break-all text-muted-foreground/60\">\n          {node.className}\n          {node.lineNumber != null && node.lineNumber > 0 ? `:${node.lineNumber}` : \"\"}\n        </span>\n      )}\n      {node.detail &&\n        Object.entries(node.detail).map(([k, v]) => (\n          <span key={k} className=\"text-muted-foreground/60\">\n            {k}={v}\n          </span>\n        ))}\n    </div>\n  );\n}\n\nfunction formatCost(node: ExecutionNode): string {\n  const unit = node.unit || \"ms\";\n  const value = node.cost ?? 0;\n  return unit === \"ms\" ? `${value.toFixed(3)}ms` : `${value} ${unit}`;\n}\n\nconst STATUS_COLOR: Record<string, string> = {\n  ok: \"text-green-600\",\n  success: \"text-green-600\",\n  error: \"text-red-600\",\n  warning: \"text-amber-500\",\n  running: \"text-blue-600\",\n  pending: \"text-muted-foreground\",\n};\n\nfunction StatusDot({ status }: { status: string }) {\n  return (\n    <span className={`shrink-0 ${STATUS_COLOR[status] ?? \"text-muted-foreground\"}`} title={status}>\n      ●\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAyDO,SAAS,cAAuD;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,MAAM,EAAE;AAAA,MACjB,aAAa,CAAC,MAAM,EAAE;AAAA,MACtB,aAAa,CAAC,IAAI,UAAU,QAAQ;AAAA,MACnC,GAAI,cAAc,SAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MAC9C,GAAI,UAAU,SAAY,EAAE,MAAA,IAAU,CAAA;AAAA,MACtC,GAAI,iBAAiB,SAAY,EAAE,aAAA,IAAiB,CAAA;AAAA,MACpD,GAAI,eAAe,EAAE,aAAA,IAAiB,CAAA;AAAA,MACtC,GAAI,sBAAsB,EAAE,oBAAA,IAAwB,CAAA;AAAA,MACpD,GAAI,eAAe,EAAE,cAAc,iBAAiB,CAAC,MAAS,EAAE,eAAe,KAAA,IAAS,CAAA;AAAA,MACzF,WAAW,CAAC,EAAE,KAAA,MACZ,YAAY,UAAU,IAAI,IAAI,oBAAC,qBAAA,EAAoB,MAAY,cAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AAIrG;AAEA,SAAS,oBAAoB,EAAE,MAAM,iBAA6E;AAChH,QAAM,OAAO,iBAAiB,QAAQ,KAAK,QAAQ,QAAQ,KAAK,QAAQ;AACxE,SACE,qBAAC,OAAA,EAAI,WAAU,sEACZ,UAAA;AAAA,IAAA,KAAK,UAAU,oBAAC,WAAA,EAAU,QAAQ,KAAK,QAAQ;AAAA,IAChD,oBAAC,QAAA,EAAK,WAAU,iCAAiC,eAAK,OAAM;AAAA,IAC3D,KAAK,QAAQ,QACZ,oBAAC,QAAA,EAAK,WAAW,OAAO,iBAAiB,yBAA0B,UAAA,WAAW,IAAI,EAAA,CAAE;AAAA,IAErF,KAAK,SAAS,QAAQ,KAAK,QAAQ,KAClC,qBAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA;AAAA,MAAA;AAAA,MAAE,KAAK;AAAA,IAAA,GAAM;AAAA,IAEzD,KAAK,aACJ,qBAAC,QAAA,EAAK,WAAU,sCACb,UAAA;AAAA,MAAA,KAAK;AAAA,MACL,KAAK,cAAc,QAAQ,KAAK,aAAa,IAAI,IAAI,KAAK,UAAU,KAAK;AAAA,IAAA,GAC5E;AAAA,IAED,KAAK,UACJ,OAAO,QAAQ,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MACpC,qBAAC,QAAA,EAAa,WAAU,4BACrB,UAAA;AAAA,MAAA;AAAA,MAAE;AAAA,MAAE;AAAA,IAAA,EAAA,GADI,CAEX,CACD;AAAA,EAAA,GACL;AAEJ;AAEA,SAAS,WAAW,MAA6B;AAC/C,QAAM,OAAO,KAAK,QAAQ;AAC1B,QAAM,QAAQ,KAAK,QAAQ;AAC3B,SAAO,SAAS,OAAO,GAAG,MAAM,QAAQ,CAAC,CAAC,OAAO,GAAG,KAAK,IAAI,IAAI;AACnE;AAEA,MAAM,eAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,UAAU,EAAE,UAA8B;AACjD,SACE,oBAAC,QAAA,EAAK,WAAW,YAAY,aAAa,MAAM,KAAK,uBAAuB,IAAI,OAAO,QAAQ,UAAA,IAAA,CAE/F;AAEJ;"}

package/dist/data/GraphDiagram.cjs

@@ -0,0 +1,201 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const graphLayout = require("./graph-layout.cjs");
+const DEFAULT_NODE_WIDTH = 168;
+const DEFAULT_NODE_HEIGHT = 60;
+const TONE_TEXT_CLASS = {
+  neutral: "text-muted-foreground",
+  success: "text-emerald-600 dark:text-emerald-400",
+  danger: "text-red-600 dark:text-red-400",
+  warning: "text-amber-600 dark:text-amber-400",
+  info: "text-sky-600 dark:text-sky-400"
+};
+const TONE_NODE_CLASS = {
+  neutral: "border-border bg-card text-foreground",
+  success: "border-emerald-500/50 bg-emerald-500/10 text-foreground",
+  danger: "border-red-500/50 bg-red-500/10 text-foreground",
+  warning: "border-amber-500/50 bg-amber-500/10 text-foreground",
+  info: "border-sky-500/50 bg-sky-500/10 text-foreground"
+};
+function assertEdgesReferenceKnownNodes(nodes, edges) {
+  const ids = new Set(nodes.map((node) => node.id));
+  for (const edge of edges) {
+    if (!ids.has(edge.from)) {
+      throw new Error(`GraphDiagram: edge "${edge.id}" references unknown node "${edge.from}"`);
+    }
+    if (!ids.has(edge.to)) {
+      throw new Error(`GraphDiagram: edge "${edge.id}" references unknown node "${edge.to}"`);
+    }
+  }
+}
+function layoutNodes(layout, nodes, nodeWidth, nodeHeight) {
+  switch (layout) {
+    case "ring":
+      return graphLayout.ringLayout(nodes, { nodeWidth, nodeHeight });
+    default:
+      throw new Error(`GraphDiagram: unknown layout "${layout}"`);
+  }
+}
+function toPercent(value, extent) {
+  return `${value / extent * 100}%`;
+}
+function requireRoute(routes, edgeId) {
+  const route = routes[edgeId];
+  if (!route) {
+    throw new Error(`GraphDiagram: no route computed for edge "${edgeId}"`);
+  }
+  return route;
+}
+function requirePosition(positions, nodeId) {
+  const position = positions[nodeId];
+  if (!position) {
+    throw new Error(`GraphDiagram: no layout position computed for node "${nodeId}"`);
+  }
+  return position;
+}
+function handleNodeKeyDown(event, select) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    select();
+  }
+}
+function GraphDiagram({
+  nodes,
+  edges,
+  layout = "ring",
+  selectedId,
+  onNodeSelect,
+  nodeWidth = DEFAULT_NODE_WIDTH,
+  nodeHeight = DEFAULT_NODE_HEIGHT,
+  maxHeight,
+  ariaLabel,
+  className
+}) {
+  assertEdgesReferenceKnownNodes(nodes, edges);
+  const { width, height, positions } = react.useMemo(
+    () => layoutNodes(layout, nodes, nodeWidth, nodeHeight),
+    [layout, nodes, nodeWidth, nodeHeight]
+  );
+  const routes = react.useMemo(
+    () => graphLayout.routeEdges(edges, positions, { nodeWidth, nodeHeight }),
+    [edges, positions, nodeWidth, nodeHeight]
+  );
+  const tones = react.useMemo(
+    () => Array.from(new Set(edges.map((edge) => edge.tone ?? "neutral"))),
+    [edges]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn("w-full overflow-auto", className),
+      style: maxHeight != null ? { maxHeight } : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", style: { aspectRatio: `${width} / ${height}` }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            viewBox: `0 0 ${width} ${height}`,
+            preserveAspectRatio: "xMidYMid meet",
+            role: "img",
+            "aria-label": ariaLabel,
+            className: "absolute inset-0 h-full w-full",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("defs", { children: tones.map((tone) => /* @__PURE__ */ jsxRuntime.jsx(
+                "marker",
+                {
+                  id: `graph-diagram-arrow-${tone}`,
+                  viewBox: "0 0 10 10",
+                  refX: 8,
+                  refY: 5,
+                  markerWidth: 7,
+                  markerHeight: 7,
+                  orient: "auto-start-reverse",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L10,5 L0,10 z", className: utils.cn(TONE_TEXT_CLASS[tone], "fill-current") })
+                },
+                tone
+              )) }),
+              edges.map((edge) => {
+                const tone = edge.tone ?? "neutral";
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: requireRoute(routes, edge.id).path,
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 1.5,
+                    strokeDasharray: edge.dashed ? "5 4" : void 0,
+                    markerEnd: `url(#graph-diagram-arrow-${tone})`,
+                    className: TONE_TEXT_CLASS[tone]
+                  },
+                  edge.id
+                );
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [
+          edges.map((edge) => {
+            if (!edge.label) return null;
+            const route = requireRoute(routes, edge.id);
+            const tone = edge.tone ?? "neutral";
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: utils.cn(
+                  "absolute -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full border border-border bg-background px-1.5 py-0.5 text-[10px] font-medium shadow-sm",
+                  TONE_TEXT_CLASS[tone]
+                ),
+                style: { left: toPercent(route.labelX, width), top: toPercent(route.labelY, height) },
+                children: edge.label
+              },
+              `label-${edge.id}`
+            );
+          }),
+          nodes.map((node) => {
+            const position = requirePosition(positions, node.id);
+            const selected = selectedId != null && node.id === selectedId;
+            const tone = node.tone ?? "neutral";
+            const shapeClass = node.shape === "pill" ? "rounded-full" : "rounded-lg";
+            const interactive = onNodeSelect != null;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: utils.cn(
+                  "absolute flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center gap-0.5 border px-3 py-1.5 text-center text-xs shadow-sm",
+                  shapeClass,
+                  TONE_NODE_CLASS[tone],
+                  selected && "ring-2 ring-primary ring-offset-2 ring-offset-background",
+                  interactive && "cursor-pointer"
+                ),
+                style: {
+                  left: toPercent(position.x, width),
+                  top: toPercent(position.y, height),
+                  width: nodeWidth,
+                  height: nodeHeight
+                },
+                ...interactive ? {
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-pressed": selected,
+                  onClick: () => onNodeSelect(node.id),
+                  onKeyDown: (event) => handleNodeKeyDown(event, () => onNodeSelect(node.id))
+                } : {},
+                "aria-label": node.ariaLabel,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-2 font-medium leading-tight", children: node.label }),
+                  node.detail != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-1 text-[10px] leading-tight text-muted-foreground", children: node.detail }),
+                  node.badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5", children: node.badge })
+                ]
+              },
+              node.id
+            );
+          })
+        ] })
+      ] })
+    }
+  );
+}
+exports.GraphDiagram = GraphDiagram;
+//# sourceMappingURL=GraphDiagram.cjs.map

package/dist/data/GraphDiagram.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphDiagram.cjs","sources":["../../src/data/GraphDiagram.tsx"],"sourcesContent":["import { useMemo, type KeyboardEvent, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { BadgeTone } from \"./Badge\";\nimport { ringLayout, routeEdges, type GraphLayoutPosition } from \"./graph-layout\";\n\n// GraphDiagram renders a generic, type-agnostic node/edge diagram — a small\n// cycle of resources and processes, a dependency graph, any relationship that\n// doesn't read well as a left-to-right column layout because it has back\n// edges or reciprocal pairs. It knows nothing about the domain: a producer\n// maps its data into GraphDiagramNode/GraphDiagramEdge and gets the same\n// ring layout, curved-edge routing, and selection behaviour.\n\nexport interface GraphDiagramNode {\n  id: string;\n  label: ReactNode;\n  detail?: ReactNode;\n  badge?: ReactNode;\n  tone?: BadgeTone;\n  shape?: \"pill\" | \"rect\";\n  /** Accessible name for the node, when `label` alone isn't enough. */\n  ariaLabel?: string;\n}\n\nexport interface GraphDiagramEdge {\n  id: string;\n  from: string;\n  to: string;\n  label?: string;\n  tone?: BadgeTone;\n  dashed?: boolean;\n}\n\nexport type GraphDiagramLayout = \"ring\";\n\nexport interface GraphDiagramProps {\n  nodes: GraphDiagramNode[];\n  edges: GraphDiagramEdge[];\n  /** Only \"ring\" today; a \"columns\" layout is planned. */\n  layout?: GraphDiagramLayout;\n  selectedId?: string;\n  onNodeSelect?: (id: string) => void;\n  nodeWidth?: number;\n  nodeHeight?: number;\n  maxHeight?: number | string;\n  ariaLabel: string;\n  className?: string;\n}\n\nconst DEFAULT_NODE_WIDTH = 168;\nconst DEFAULT_NODE_HEIGHT = 60;\n\nconst TONE_TEXT_CLASS: Record<BadgeTone, string> = {\n  neutral: \"text-muted-foreground\",\n  success: \"text-emerald-600 dark:text-emerald-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  warning: \"text-amber-600 dark:text-amber-400\",\n  info: \"text-sky-600 dark:text-sky-400\",\n};\n\nconst TONE_NODE_CLASS: Record<BadgeTone, string> = {\n  neutral: \"border-border bg-card text-foreground\",\n  success: \"border-emerald-500/50 bg-emerald-500/10 text-foreground\",\n  danger: \"border-red-500/50 bg-red-500/10 text-foreground\",\n  warning: \"border-amber-500/50 bg-amber-500/10 text-foreground\",\n  info: \"border-sky-500/50 bg-sky-500/10 text-foreground\",\n};\n\nfunction assertEdgesReferenceKnownNodes(nodes: GraphDiagramNode[], edges: GraphDiagramEdge[]): void {\n  const ids = new Set(nodes.map((node) => node.id));\n  for (const edge of edges) {\n    if (!ids.has(edge.from)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.from}\"`);\n    }\n    if (!ids.has(edge.to)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.to}\"`);\n    }\n  }\n}\n\nfunction layoutNodes(\n  layout: GraphDiagramLayout,\n  nodes: GraphDiagramNode[],\n  nodeWidth: number,\n  nodeHeight: number,\n): { width: number; height: number; positions: Record<string, GraphLayoutPosition> } {\n  switch (layout) {\n    case \"ring\":\n      return ringLayout(nodes, { nodeWidth, nodeHeight });\n    default:\n      throw new Error(`GraphDiagram: unknown layout \"${layout satisfies never}\"`);\n  }\n}\n\nfunction toPercent(value: number, extent: number): string {\n  return `${(value / extent) * 100}%`;\n}\n\nfunction requireRoute<T>(routes: Record<string, T>, edgeId: string): T {\n  const route = routes[edgeId];\n  if (!route) {\n    throw new Error(`GraphDiagram: no route computed for edge \"${edgeId}\"`);\n  }\n  return route;\n}\n\nfunction requirePosition(\n  positions: Record<string, GraphLayoutPosition>,\n  nodeId: string,\n): GraphLayoutPosition {\n  const position = positions[nodeId];\n  if (!position) {\n    throw new Error(`GraphDiagram: no layout position computed for node \"${nodeId}\"`);\n  }\n  return position;\n}\n\nfunction handleNodeKeyDown(event: KeyboardEvent<HTMLDivElement>, select: () => void): void {\n  if (event.key === \"Enter\" || event.key === \" \") {\n    event.preventDefault();\n    select();\n  }\n}\n\nexport function GraphDiagram({\n  nodes,\n  edges,\n  layout = \"ring\",\n  selectedId,\n  onNodeSelect,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodeHeight = DEFAULT_NODE_HEIGHT,\n  maxHeight,\n  ariaLabel,\n  className,\n}: GraphDiagramProps) {\n  assertEdgesReferenceKnownNodes(nodes, edges);\n\n  const { width, height, positions } = useMemo(\n    () => layoutNodes(layout, nodes, nodeWidth, nodeHeight),\n    [layout, nodes, nodeWidth, nodeHeight],\n  );\n\n  const routes = useMemo(\n    () => routeEdges(edges, positions, { nodeWidth, nodeHeight }),\n    [edges, positions, nodeWidth, nodeHeight],\n  );\n\n  const tones = useMemo(\n    () => Array.from(new Set(edges.map((edge) => edge.tone ?? \"neutral\"))),\n    [edges],\n  );\n\n  return (\n    <div\n      className={cn(\"w-full overflow-auto\", className)}\n      style={maxHeight != null ? { maxHeight } : undefined}\n    >\n      <div className=\"relative w-full\" style={{ aspectRatio: `${width} / ${height}` }}>\n        <svg\n          viewBox={`0 0 ${width} ${height}`}\n          preserveAspectRatio=\"xMidYMid meet\"\n          role=\"img\"\n          aria-label={ariaLabel}\n          className=\"absolute inset-0 h-full w-full\"\n        >\n          <defs>\n            {tones.map((tone) => (\n              <marker\n                key={tone}\n                id={`graph-diagram-arrow-${tone}`}\n                viewBox=\"0 0 10 10\"\n                refX={8}\n                refY={5}\n                markerWidth={7}\n                markerHeight={7}\n                orient=\"auto-start-reverse\"\n              >\n                <path d=\"M0,0 L10,5 L0,10 z\" className={cn(TONE_TEXT_CLASS[tone], \"fill-current\")} />\n              </marker>\n            ))}\n          </defs>\n          {edges.map((edge) => {\n            const tone = edge.tone ?? \"neutral\";\n            return (\n              <path\n                key={edge.id}\n                d={requireRoute(routes, edge.id).path}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={1.5}\n                strokeDasharray={edge.dashed ? \"5 4\" : undefined}\n                markerEnd={`url(#graph-diagram-arrow-${tone})`}\n                className={TONE_TEXT_CLASS[tone]}\n              />\n            );\n          })}\n        </svg>\n\n        <div className=\"absolute inset-0\">\n          {edges.map((edge) => {\n            if (!edge.label) return null;\n            const route = requireRoute(routes, edge.id);\n            const tone = edge.tone ?? \"neutral\";\n            return (\n              <span\n                key={`label-${edge.id}`}\n                className={cn(\n                  \"absolute -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full border border-border bg-background px-1.5 py-0.5 text-[10px] font-medium shadow-sm\",\n                  TONE_TEXT_CLASS[tone],\n                )}\n                style={{ left: toPercent(route.labelX, width), top: toPercent(route.labelY, height) }}\n              >\n                {edge.label}\n              </span>\n            );\n          })}\n\n          {nodes.map((node) => {\n            const position = requirePosition(positions, node.id);\n            const selected = selectedId != null && node.id === selectedId;\n            const tone = node.tone ?? \"neutral\";\n            const shapeClass = node.shape === \"pill\" ? \"rounded-full\" : \"rounded-lg\";\n            const interactive = onNodeSelect != null;\n\n            return (\n              <div\n                key={node.id}\n                className={cn(\n                  \"absolute flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center gap-0.5 border px-3 py-1.5 text-center text-xs shadow-sm\",\n                  shapeClass,\n                  TONE_NODE_CLASS[tone],\n                  selected && \"ring-2 ring-primary ring-offset-2 ring-offset-background\",\n                  interactive && \"cursor-pointer\",\n                )}\n                style={{\n                  left: toPercent(position.x, width),\n                  top: toPercent(position.y, height),\n                  width: nodeWidth,\n                  height: nodeHeight,\n                }}\n                {...(interactive\n                  ? {\n                      role: \"button\" as const,\n                      tabIndex: 0,\n                      \"aria-pressed\": selected,\n                      onClick: () => onNodeSelect(node.id),\n                      onKeyDown: (event: KeyboardEvent<HTMLDivElement>) =>\n                        handleNodeKeyDown(event, () => onNodeSelect(node.id)),\n                    }\n                  : {})}\n                aria-label={node.ariaLabel}\n              >\n                <span className=\"line-clamp-2 font-medium leading-tight\">{node.label}</span>\n                {node.detail != null && (\n                  <span className=\"line-clamp-1 text-[10px] leading-tight text-muted-foreground\">\n                    {node.detail}\n                  </span>\n                )}\n                {node.badge != null && <span className=\"mt-0.5\">{node.badge}</span>}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["ringLayout","useMemo","routeEdges","jsx","cn","jsxs"],"mappings":"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"}

package/dist/data/GraphDiagram.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { BadgeTone } from './Badge';
+export interface GraphDiagramNode {
+    id: string;
+    label: ReactNode;
+    detail?: ReactNode;
+    badge?: ReactNode;
+    tone?: BadgeTone;
+    shape?: "pill" | "rect";
+    /** Accessible name for the node, when `label` alone isn't enough. */
+    ariaLabel?: string;
+}
+export interface GraphDiagramEdge {
+    id: string;
+    from: string;
+    to: string;
+    label?: string;
+    tone?: BadgeTone;
+    dashed?: boolean;
+}
+export type GraphDiagramLayout = "ring";
+export interface GraphDiagramProps {
+    nodes: GraphDiagramNode[];
+    edges: GraphDiagramEdge[];
+    /** Only "ring" today; a "columns" layout is planned. */
+    layout?: GraphDiagramLayout;
+    selectedId?: string;
+    onNodeSelect?: (id: string) => void;
+    nodeWidth?: number;
+    nodeHeight?: number;
+    maxHeight?: number | string;
+    ariaLabel: string;
+    className?: string;
+}
+export declare function GraphDiagram({ nodes, edges, layout, selectedId, onNodeSelect, nodeWidth, nodeHeight, maxHeight, ariaLabel, className, }: GraphDiagramProps): import("react").JSX.Element;
+//# sourceMappingURL=GraphDiagram.d.ts.map

package/dist/data/GraphDiagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphDiagram.d.ts","sourceRoot":"","sources":["../../src/data/GraphDiagram.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAUzC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC;AAExC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,wDAAwD;IACxD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6ED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,MAAe,EACf,UAAU,EACV,YAAY,EACZ,SAA8B,EAC9B,UAAgC,EAChC,SAAS,EACT,SAAS,EACT,SAAS,GACV,EAAE,iBAAiB,+BAoInB"}

package/dist/data/GraphDiagram.js

@@ -0,0 +1,201 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cn } from "../lib/utils.js";
+import { routeEdges, ringLayout } from "./graph-layout.js";
+const DEFAULT_NODE_WIDTH = 168;
+const DEFAULT_NODE_HEIGHT = 60;
+const TONE_TEXT_CLASS = {
+  neutral: "text-muted-foreground",
+  success: "text-emerald-600 dark:text-emerald-400",
+  danger: "text-red-600 dark:text-red-400",
+  warning: "text-amber-600 dark:text-amber-400",
+  info: "text-sky-600 dark:text-sky-400"
+};
+const TONE_NODE_CLASS = {
+  neutral: "border-border bg-card text-foreground",
+  success: "border-emerald-500/50 bg-emerald-500/10 text-foreground",
+  danger: "border-red-500/50 bg-red-500/10 text-foreground",
+  warning: "border-amber-500/50 bg-amber-500/10 text-foreground",
+  info: "border-sky-500/50 bg-sky-500/10 text-foreground"
+};
+function assertEdgesReferenceKnownNodes(nodes, edges) {
+  const ids = new Set(nodes.map((node) => node.id));
+  for (const edge of edges) {
+    if (!ids.has(edge.from)) {
+      throw new Error(`GraphDiagram: edge "${edge.id}" references unknown node "${edge.from}"`);
+    }
+    if (!ids.has(edge.to)) {
+      throw new Error(`GraphDiagram: edge "${edge.id}" references unknown node "${edge.to}"`);
+    }
+  }
+}
+function layoutNodes(layout, nodes, nodeWidth, nodeHeight) {
+  switch (layout) {
+    case "ring":
+      return ringLayout(nodes, { nodeWidth, nodeHeight });
+    default:
+      throw new Error(`GraphDiagram: unknown layout "${layout}"`);
+  }
+}
+function toPercent(value, extent) {
+  return `${value / extent * 100}%`;
+}
+function requireRoute(routes, edgeId) {
+  const route = routes[edgeId];
+  if (!route) {
+    throw new Error(`GraphDiagram: no route computed for edge "${edgeId}"`);
+  }
+  return route;
+}
+function requirePosition(positions, nodeId) {
+  const position = positions[nodeId];
+  if (!position) {
+    throw new Error(`GraphDiagram: no layout position computed for node "${nodeId}"`);
+  }
+  return position;
+}
+function handleNodeKeyDown(event, select) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    select();
+  }
+}
+function GraphDiagram({
+  nodes,
+  edges,
+  layout = "ring",
+  selectedId,
+  onNodeSelect,
+  nodeWidth = DEFAULT_NODE_WIDTH,
+  nodeHeight = DEFAULT_NODE_HEIGHT,
+  maxHeight,
+  ariaLabel,
+  className
+}) {
+  assertEdgesReferenceKnownNodes(nodes, edges);
+  const { width, height, positions } = useMemo(
+    () => layoutNodes(layout, nodes, nodeWidth, nodeHeight),
+    [layout, nodes, nodeWidth, nodeHeight]
+  );
+  const routes = useMemo(
+    () => routeEdges(edges, positions, { nodeWidth, nodeHeight }),
+    [edges, positions, nodeWidth, nodeHeight]
+  );
+  const tones = useMemo(
+    () => Array.from(new Set(edges.map((edge) => edge.tone ?? "neutral"))),
+    [edges]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("w-full overflow-auto", className),
+      style: maxHeight != null ? { maxHeight } : void 0,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", style: { aspectRatio: `${width} / ${height}` }, children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: `0 0 ${width} ${height}`,
+            preserveAspectRatio: "xMidYMid meet",
+            role: "img",
+            "aria-label": ariaLabel,
+            className: "absolute inset-0 h-full w-full",
+            children: [
+              /* @__PURE__ */ jsx("defs", { children: tones.map((tone) => /* @__PURE__ */ jsx(
+                "marker",
+                {
+                  id: `graph-diagram-arrow-${tone}`,
+                  viewBox: "0 0 10 10",
+                  refX: 8,
+                  refY: 5,
+                  markerWidth: 7,
+                  markerHeight: 7,
+                  orient: "auto-start-reverse",
+                  children: /* @__PURE__ */ jsx("path", { d: "M0,0 L10,5 L0,10 z", className: cn(TONE_TEXT_CLASS[tone], "fill-current") })
+                },
+                tone
+              )) }),
+              edges.map((edge) => {
+                const tone = edge.tone ?? "neutral";
+                return /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: requireRoute(routes, edge.id).path,
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 1.5,
+                    strokeDasharray: edge.dashed ? "5 4" : void 0,
+                    markerEnd: `url(#graph-diagram-arrow-${tone})`,
+                    className: TONE_TEXT_CLASS[tone]
+                  },
+                  edge.id
+                );
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
+          edges.map((edge) => {
+            if (!edge.label) return null;
+            const route = requireRoute(routes, edge.id);
+            const tone = edge.tone ?? "neutral";
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "absolute -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full border border-border bg-background px-1.5 py-0.5 text-[10px] font-medium shadow-sm",
+                  TONE_TEXT_CLASS[tone]
+                ),
+                style: { left: toPercent(route.labelX, width), top: toPercent(route.labelY, height) },
+                children: edge.label
+              },
+              `label-${edge.id}`
+            );
+          }),
+          nodes.map((node) => {
+            const position = requirePosition(positions, node.id);
+            const selected = selectedId != null && node.id === selectedId;
+            const tone = node.tone ?? "neutral";
+            const shapeClass = node.shape === "pill" ? "rounded-full" : "rounded-lg";
+            const interactive = onNodeSelect != null;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "absolute flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center gap-0.5 border px-3 py-1.5 text-center text-xs shadow-sm",
+                  shapeClass,
+                  TONE_NODE_CLASS[tone],
+                  selected && "ring-2 ring-primary ring-offset-2 ring-offset-background",
+                  interactive && "cursor-pointer"
+                ),
+                style: {
+                  left: toPercent(position.x, width),
+                  top: toPercent(position.y, height),
+                  width: nodeWidth,
+                  height: nodeHeight
+                },
+                ...interactive ? {
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-pressed": selected,
+                  onClick: () => onNodeSelect(node.id),
+                  onKeyDown: (event) => handleNodeKeyDown(event, () => onNodeSelect(node.id))
+                } : {},
+                "aria-label": node.ariaLabel,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "line-clamp-2 font-medium leading-tight", children: node.label }),
+                  node.detail != null && /* @__PURE__ */ jsx("span", { className: "line-clamp-1 text-[10px] leading-tight text-muted-foreground", children: node.detail }),
+                  node.badge != null && /* @__PURE__ */ jsx("span", { className: "mt-0.5", children: node.badge })
+                ]
+              },
+              node.id
+            );
+          })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  GraphDiagram
+};
+//# sourceMappingURL=GraphDiagram.js.map

package/dist/data/GraphDiagram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphDiagram.js","sources":["../../src/data/GraphDiagram.tsx"],"sourcesContent":["import { useMemo, type KeyboardEvent, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { BadgeTone } from \"./Badge\";\nimport { ringLayout, routeEdges, type GraphLayoutPosition } from \"./graph-layout\";\n\n// GraphDiagram renders a generic, type-agnostic node/edge diagram — a small\n// cycle of resources and processes, a dependency graph, any relationship that\n// doesn't read well as a left-to-right column layout because it has back\n// edges or reciprocal pairs. It knows nothing about the domain: a producer\n// maps its data into GraphDiagramNode/GraphDiagramEdge and gets the same\n// ring layout, curved-edge routing, and selection behaviour.\n\nexport interface GraphDiagramNode {\n  id: string;\n  label: ReactNode;\n  detail?: ReactNode;\n  badge?: ReactNode;\n  tone?: BadgeTone;\n  shape?: \"pill\" | \"rect\";\n  /** Accessible name for the node, when `label` alone isn't enough. */\n  ariaLabel?: string;\n}\n\nexport interface GraphDiagramEdge {\n  id: string;\n  from: string;\n  to: string;\n  label?: string;\n  tone?: BadgeTone;\n  dashed?: boolean;\n}\n\nexport type GraphDiagramLayout = \"ring\";\n\nexport interface GraphDiagramProps {\n  nodes: GraphDiagramNode[];\n  edges: GraphDiagramEdge[];\n  /** Only \"ring\" today; a \"columns\" layout is planned. */\n  layout?: GraphDiagramLayout;\n  selectedId?: string;\n  onNodeSelect?: (id: string) => void;\n  nodeWidth?: number;\n  nodeHeight?: number;\n  maxHeight?: number | string;\n  ariaLabel: string;\n  className?: string;\n}\n\nconst DEFAULT_NODE_WIDTH = 168;\nconst DEFAULT_NODE_HEIGHT = 60;\n\nconst TONE_TEXT_CLASS: Record<BadgeTone, string> = {\n  neutral: \"text-muted-foreground\",\n  success: \"text-emerald-600 dark:text-emerald-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  warning: \"text-amber-600 dark:text-amber-400\",\n  info: \"text-sky-600 dark:text-sky-400\",\n};\n\nconst TONE_NODE_CLASS: Record<BadgeTone, string> = {\n  neutral: \"border-border bg-card text-foreground\",\n  success: \"border-emerald-500/50 bg-emerald-500/10 text-foreground\",\n  danger: \"border-red-500/50 bg-red-500/10 text-foreground\",\n  warning: \"border-amber-500/50 bg-amber-500/10 text-foreground\",\n  info: \"border-sky-500/50 bg-sky-500/10 text-foreground\",\n};\n\nfunction assertEdgesReferenceKnownNodes(nodes: GraphDiagramNode[], edges: GraphDiagramEdge[]): void {\n  const ids = new Set(nodes.map((node) => node.id));\n  for (const edge of edges) {\n    if (!ids.has(edge.from)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.from}\"`);\n    }\n    if (!ids.has(edge.to)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.to}\"`);\n    }\n  }\n}\n\nfunction layoutNodes(\n  layout: GraphDiagramLayout,\n  nodes: GraphDiagramNode[],\n  nodeWidth: number,\n  nodeHeight: number,\n): { width: number; height: number; positions: Record<string, GraphLayoutPosition> } {\n  switch (layout) {\n    case \"ring\":\n      return ringLayout(nodes, { nodeWidth, nodeHeight });\n    default:\n      throw new Error(`GraphDiagram: unknown layout \"${layout satisfies never}\"`);\n  }\n}\n\nfunction toPercent(value: number, extent: number): string {\n  return `${(value / extent) * 100}%`;\n}\n\nfunction requireRoute<T>(routes: Record<string, T>, edgeId: string): T {\n  const route = routes[edgeId];\n  if (!route) {\n    throw new Error(`GraphDiagram: no route computed for edge \"${edgeId}\"`);\n  }\n  return route;\n}\n\nfunction requirePosition(\n  positions: Record<string, GraphLayoutPosition>,\n  nodeId: string,\n): GraphLayoutPosition {\n  const position = positions[nodeId];\n  if (!position) {\n    throw new Error(`GraphDiagram: no layout position computed for node \"${nodeId}\"`);\n  }\n  return position;\n}\n\nfunction handleNodeKeyDown(event: KeyboardEvent<HTMLDivElement>, select: () => void): void {\n  if (event.key === \"Enter\" || event.key === \" \") {\n    event.preventDefault();\n    select();\n  }\n}\n\nexport function GraphDiagram({\n  nodes,\n  edges,\n  layout = \"ring\",\n  selectedId,\n  onNodeSelect,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodeHeight = DEFAULT_NODE_HEIGHT,\n  maxHeight,\n  ariaLabel,\n  className,\n}: GraphDiagramProps) {\n  assertEdgesReferenceKnownNodes(nodes, edges);\n\n  const { width, height, positions } = useMemo(\n    () => layoutNodes(layout, nodes, nodeWidth, nodeHeight),\n    [layout, nodes, nodeWidth, nodeHeight],\n  );\n\n  const routes = useMemo(\n    () => routeEdges(edges, positions, { nodeWidth, nodeHeight }),\n    [edges, positions, nodeWidth, nodeHeight],\n  );\n\n  const tones = useMemo(\n    () => Array.from(new Set(edges.map((edge) => edge.tone ?? \"neutral\"))),\n    [edges],\n  );\n\n  return (\n    <div\n      className={cn(\"w-full overflow-auto\", className)}\n      style={maxHeight != null ? { maxHeight } : undefined}\n    >\n      <div className=\"relative w-full\" style={{ aspectRatio: `${width} / ${height}` }}>\n        <svg\n          viewBox={`0 0 ${width} ${height}`}\n          preserveAspectRatio=\"xMidYMid meet\"\n          role=\"img\"\n          aria-label={ariaLabel}\n          className=\"absolute inset-0 h-full w-full\"\n        >\n          <defs>\n            {tones.map((tone) => (\n              <marker\n                key={tone}\n                id={`graph-diagram-arrow-${tone}`}\n                viewBox=\"0 0 10 10\"\n                refX={8}\n                refY={5}\n                markerWidth={7}\n                markerHeight={7}\n                orient=\"auto-start-reverse\"\n              >\n                <path d=\"M0,0 L10,5 L0,10 z\" className={cn(TONE_TEXT_CLASS[tone], \"fill-current\")} />\n              </marker>\n            ))}\n          </defs>\n          {edges.map((edge) => {\n            const tone = edge.tone ?? \"neutral\";\n            return (\n              <path\n                key={edge.id}\n                d={requireRoute(routes, edge.id).path}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={1.5}\n                strokeDasharray={edge.dashed ? \"5 4\" : undefined}\n                markerEnd={`url(#graph-diagram-arrow-${tone})`}\n                className={TONE_TEXT_CLASS[tone]}\n              />\n            );\n          })}\n        </svg>\n\n        <div className=\"absolute inset-0\">\n          {edges.map((edge) => {\n            if (!edge.label) return null;\n            const route = requireRoute(routes, edge.id);\n            const tone = edge.tone ?? \"neutral\";\n            return (\n              <span\n                key={`label-${edge.id}`}\n                className={cn(\n                  \"absolute -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full border border-border bg-background px-1.5 py-0.5 text-[10px] font-medium shadow-sm\",\n                  TONE_TEXT_CLASS[tone],\n                )}\n                style={{ left: toPercent(route.labelX, width), top: toPercent(route.labelY, height) }}\n              >\n                {edge.label}\n              </span>\n            );\n          })}\n\n          {nodes.map((node) => {\n            const position = requirePosition(positions, node.id);\n            const selected = selectedId != null && node.id === selectedId;\n            const tone = node.tone ?? \"neutral\";\n            const shapeClass = node.shape === \"pill\" ? \"rounded-full\" : \"rounded-lg\";\n            const interactive = onNodeSelect != null;\n\n            return (\n              <div\n                key={node.id}\n                className={cn(\n                  \"absolute flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center gap-0.5 border px-3 py-1.5 text-center text-xs shadow-sm\",\n                  shapeClass,\n                  TONE_NODE_CLASS[tone],\n                  selected && \"ring-2 ring-primary ring-offset-2 ring-offset-background\",\n                  interactive && \"cursor-pointer\",\n                )}\n                style={{\n                  left: toPercent(position.x, width),\n                  top: toPercent(position.y, height),\n                  width: nodeWidth,\n                  height: nodeHeight,\n                }}\n                {...(interactive\n                  ? {\n                      role: \"button\" as const,\n                      tabIndex: 0,\n                      \"aria-pressed\": selected,\n                      onClick: () => onNodeSelect(node.id),\n                      onKeyDown: (event: KeyboardEvent<HTMLDivElement>) =>\n                        handleNodeKeyDown(event, () => onNodeSelect(node.id)),\n                    }\n                  : {})}\n                aria-label={node.ariaLabel}\n              >\n                <span className=\"line-clamp-2 font-medium leading-tight\">{node.label}</span>\n                {node.detail != null && (\n                  <span className=\"line-clamp-1 text-[10px] leading-tight text-muted-foreground\">\n                    {node.detail}\n                  </span>\n                )}\n                {node.badge != null && <span className=\"mt-0.5\">{node.badge}</span>}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/JsonView.cjs

@@ -44,7 +44,7 @@ function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }) {
             " ",
             entries.length,
             " ",
-            isArray ? "items" : "keys",
+            isArray ? entries.length === 1 ? "item" : "items" : entries.length === 1 ? "key" : "keys",
             " ",
             closeB
           ] }),

package/dist/data/JsonView.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JsonView.cjs","sources":["../../src/data/JsonView.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nexport type JsonViewProps = {\n  /** JSON-like value to render. */\n  data: unknown;\n  /** Optional property name displayed before nested object/array values. */\n  name?: string;\n  /** Current nesting depth; callers usually leave this unset. */\n  depth?: number;\n  /** Depth that starts expanded by default. */\n  defaultOpenDepth?: number;\n};\n\nexport function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }: JsonViewProps) {\n  const [open, setOpen] = useState(depth < defaultOpenDepth);\n\n  if (data === null || data === undefined) {\n    return <span className=\"text-muted-foreground italic\">null</span>;\n  }\n\n  if (typeof data === \"string\") {\n    return <span className=\"text-green-700 dark:text-green-400\">\"{data}\"</span>;\n  }\n\n  if (typeof data === \"number\" || typeof data === \"boolean\") {\n    return <span className=\"text-blue-700 dark:text-blue-400\">{String(data)}</span>;\n  }\n\n  if (typeof data !== \"object\") {\n    return <span className=\"text-muted-foreground\">{String(data)}</span>;\n  }\n\n  const isArray = Array.isArray(data);\n  const entries: Array<[string | number, unknown]> = isArray\n    ? (data as unknown[]).map((v, i) => [i, v])\n    : Object.entries(data as Record<string, unknown>);\n  const [openB, closeB] = isArray ? [\"[\", \"]\"] : [\"{\", \"}\"];\n\n  if (entries.length === 0) {\n    return (\n      <span className=\"text-muted-foreground\">\n        {openB}\n        {closeB}\n      </span>\n    );\n  }\n\n  return (\n    <div className=\"text-sm font-mono\" style={{ paddingLeft: depth > 0 ? \"12px\" : \"0\" }}>\n      <span\n        className=\"cursor-pointer hover:bg-accent rounded px-0.5 select-none\"\n        onClick={() => setOpen(!open)}\n      >\n        <span className=\"text-muted-foreground text-xs mr-1\">{open ? \"▼\" : \"▶\"}</span>\n        {name && <span className=\"text-purple-600 dark:text-purple-400\">{name}</span>}\n        {name && <span className=\"text-muted-foreground\">: </span>}\n        {!open && (\n          <span className=\"text-muted-foreground\">\n            {openB} {entries.length} {isArray ? \"items\" : \"keys\"} {closeB}\n          </span>\n        )}\n        {open && <span className=\"text-muted-foreground\">{openB}</span>}\n      </span>\n      {open && (\n        <>\n          {entries.map(([key, val]) => (\n            <div key={key} className=\"pl-3 border-l border-border ml-1\">\n              {typeof val === \"object\" && val !== null ? (\n                <JsonView\n                  data={val}\n                  name={String(key)}\n                  depth={depth + 1}\n                  defaultOpenDepth={defaultOpenDepth}\n                />\n              ) : (\n                <div>\n                  <span className=\"text-purple-600 dark:text-purple-400\">\n                    {isArray ? \"\" : String(key)}\n                  </span>\n                  {!isArray && <span className=\"text-muted-foreground\">: </span>}\n                  <JsonView data={val} depth={depth + 1} defaultOpenDepth={defaultOpenDepth} />\n                </div>\n              )}\n            </div>\n          ))}\n          <span className=\"text-muted-foreground\">{closeB}</span>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","jsx","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"JsonView.cjs","sources":["../../src/data/JsonView.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nexport type JsonViewProps = {\n  /** JSON-like value to render. */\n  data: unknown;\n  /** Optional property name displayed before nested object/array values. */\n  name?: string;\n  /** Current nesting depth; callers usually leave this unset. */\n  depth?: number;\n  /** Depth that starts expanded by default. */\n  defaultOpenDepth?: number;\n};\n\nexport function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }: JsonViewProps) {\n  const [open, setOpen] = useState(depth < defaultOpenDepth);\n\n  if (data === null || data === undefined) {\n    return <span className=\"text-muted-foreground italic\">null</span>;\n  }\n\n  if (typeof data === \"string\") {\n    return <span className=\"text-green-700 dark:text-green-400\">\"{data}\"</span>;\n  }\n\n  if (typeof data === \"number\" || typeof data === \"boolean\") {\n    return <span className=\"text-blue-700 dark:text-blue-400\">{String(data)}</span>;\n  }\n\n  if (typeof data !== \"object\") {\n    return <span className=\"text-muted-foreground\">{String(data)}</span>;\n  }\n\n  const isArray = Array.isArray(data);\n  const entries: Array<[string | number, unknown]> = isArray\n    ? (data as unknown[]).map((v, i) => [i, v])\n    : Object.entries(data as Record<string, unknown>);\n  const [openB, closeB] = isArray ? [\"[\", \"]\"] : [\"{\", \"}\"];\n\n  if (entries.length === 0) {\n    return (\n      <span className=\"text-muted-foreground\">\n        {openB}\n        {closeB}\n      </span>\n    );\n  }\n\n  return (\n    <div className=\"text-sm font-mono\" style={{ paddingLeft: depth > 0 ? \"12px\" : \"0\" }}>\n      <span\n        className=\"cursor-pointer hover:bg-accent rounded px-0.5 select-none\"\n        onClick={() => setOpen(!open)}\n      >\n        <span className=\"text-muted-foreground text-xs mr-1\">{open ? \"▼\" : \"▶\"}</span>\n        {name && <span className=\"text-purple-600 dark:text-purple-400\">{name}</span>}\n        {name && <span className=\"text-muted-foreground\">: </span>}\n        {!open && (\n          <span className=\"text-muted-foreground\">\n            {openB} {entries.length}{\" \"}\n            {isArray\n              ? entries.length === 1\n                ? \"item\"\n                : \"items\"\n              : entries.length === 1\n                ? \"key\"\n                : \"keys\"}{\" \"}\n            {closeB}\n          </span>\n        )}\n        {open && <span className=\"text-muted-foreground\">{openB}</span>}\n      </span>\n      {open && (\n        <>\n          {entries.map(([key, val]) => (\n            <div key={key} className=\"pl-3 border-l border-border ml-1\">\n              {typeof val === \"object\" && val !== null ? (\n                <JsonView\n                  data={val}\n                  name={String(key)}\n                  depth={depth + 1}\n                  defaultOpenDepth={defaultOpenDepth}\n                />\n              ) : (\n                <div>\n                  <span className=\"text-purple-600 dark:text-purple-400\">\n                    {isArray ? \"\" : String(key)}\n                  </span>\n                  {!isArray && <span className=\"text-muted-foreground\">: </span>}\n                  <JsonView data={val} depth={depth + 1} defaultOpenDepth={defaultOpenDepth} />\n                </div>\n              )}\n            </div>\n          ))}\n          <span className=\"text-muted-foreground\">{closeB}</span>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","jsx","jsxs","Fragment"],"mappings":"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"}

package/dist/data/JsonView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JsonView.d.ts","sourceRoot":"","sources":["../../src/data/JsonView.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG;IAC1B,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAS,EAAE,gBAAoB,EAAE,EAAE,aAAa,+BA6EtF"}
+{"version":3,"file":"JsonView.d.ts","sourceRoot":"","sources":["../../src/data/JsonView.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG;IAC1B,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAS,EAAE,gBAAoB,EAAE,EAAE,aAAa,+BAqFtF"}

package/dist/data/JsonView.js

@@ -42,7 +42,7 @@ function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }) {
             " ",
             entries.length,
             " ",
-            isArray ? "items" : "keys",
+            isArray ? entries.length === 1 ? "item" : "items" : entries.length === 1 ? "key" : "keys",
             " ",
             closeB
           ] }),

package/dist/data/JsonView.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonView.js","sources":["../../src/data/JsonView.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nexport type JsonViewProps = {\n  /** JSON-like value to render. */\n  data: unknown;\n  /** Optional property name displayed before nested object/array values. */\n  name?: string;\n  /** Current nesting depth; callers usually leave this unset. */\n  depth?: number;\n  /** Depth that starts expanded by default. */\n  defaultOpenDepth?: number;\n};\n\nexport function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }: JsonViewProps) {\n  const [open, setOpen] = useState(depth < defaultOpenDepth);\n\n  if (data === null || data === undefined) {\n    return <span className=\"text-muted-foreground italic\">null</span>;\n  }\n\n  if (typeof data === \"string\") {\n    return <span className=\"text-green-700 dark:text-green-400\">\"{data}\"</span>;\n  }\n\n  if (typeof data === \"number\" || typeof data === \"boolean\") {\n    return <span className=\"text-blue-700 dark:text-blue-400\">{String(data)}</span>;\n  }\n\n  if (typeof data !== \"object\") {\n    return <span className=\"text-muted-foreground\">{String(data)}</span>;\n  }\n\n  const isArray = Array.isArray(data);\n  const entries: Array<[string | number, unknown]> = isArray\n    ? (data as unknown[]).map((v, i) => [i, v])\n    : Object.entries(data as Record<string, unknown>);\n  const [openB, closeB] = isArray ? [\"[\", \"]\"] : [\"{\", \"}\"];\n\n  if (entries.length === 0) {\n    return (\n      <span className=\"text-muted-foreground\">\n        {openB}\n        {closeB}\n      </span>\n    );\n  }\n\n  return (\n    <div className=\"text-sm font-mono\" style={{ paddingLeft: depth > 0 ? \"12px\" : \"0\" }}>\n      <span\n        className=\"cursor-pointer hover:bg-accent rounded px-0.5 select-none\"\n        onClick={() => setOpen(!open)}\n      >\n        <span className=\"text-muted-foreground text-xs mr-1\">{open ? \"▼\" : \"▶\"}</span>\n        {name && <span className=\"text-purple-600 dark:text-purple-400\">{name}</span>}\n        {name && <span className=\"text-muted-foreground\">: </span>}\n        {!open && (\n          <span className=\"text-muted-foreground\">\n            {openB} {entries.length} {isArray ? \"items\" : \"keys\"} {closeB}\n          </span>\n        )}\n        {open && <span className=\"text-muted-foreground\">{openB}</span>}\n      </span>\n      {open && (\n        <>\n          {entries.map(([key, val]) => (\n            <div key={key} className=\"pl-3 border-l border-border ml-1\">\n              {typeof val === \"object\" && val !== null ? (\n                <JsonView\n                  data={val}\n                  name={String(key)}\n                  depth={depth + 1}\n                  defaultOpenDepth={defaultOpenDepth}\n                />\n              ) : (\n                <div>\n                  <span className=\"text-purple-600 dark:text-purple-400\">\n                    {isArray ? \"\" : String(key)}\n                  </span>\n                  {!isArray && <span className=\"text-muted-foreground\">: </span>}\n                  <JsonView data={val} depth={depth + 1} defaultOpenDepth={defaultOpenDepth} />\n                </div>\n              )}\n            </div>\n          ))}\n          <span className=\"text-muted-foreground\">{closeB}</span>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAaO,SAAS,SAAS,EAAE,MAAM,MAAM,QAAQ,GAAG,mBAAmB,KAAoB;AACvF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,QAAQ,gBAAgB;AAEzD,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WAAO,oBAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,QAAI;AAAA,EAC5D;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,qBAAC,QAAA,EAAK,WAAU,sCAAqC,UAAA;AAAA,MAAA;AAAA,MAAE;AAAA,MAAK;AAAA,IAAA,GAAC;AAAA,EACtE;AAEA,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,WAAW;AACzD,+BAAQ,QAAA,EAAK,WAAU,oCAAoC,UAAA,OAAO,IAAI,GAAE;AAAA,EAC1E;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,+BAAQ,QAAA,EAAK,WAAU,yBAAyB,UAAA,OAAO,IAAI,GAAE;AAAA,EAC/D;AAEA,QAAM,UAAU,MAAM,QAAQ,IAAI;AAClC,QAAM,UAA6C,UAC9C,KAAmB,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IACxC,OAAO,QAAQ,IAA+B;AAClD,QAAM,CAAC,OAAO,MAAM,IAAI,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG;AAExD,MAAI,QAAQ,WAAW,GAAG;AACxB,WACE,qBAAC,QAAA,EAAK,WAAU,yBACb,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,GACH;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,qBAAoB,OAAO,EAAE,aAAa,QAAQ,IAAI,SAAS,IAAA,GAC5E,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM,QAAQ,CAAC,IAAI;AAAA,QAE5B,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,sCAAsC,UAAA,OAAO,MAAM,KAAI;AAAA,UACtE,QAAQ,oBAAC,QAAA,EAAK,WAAU,wCAAwC,UAAA,MAAK;AAAA,UACrE,QAAQ,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,MAAE;AAAA,UAClD,CAAC,QACA,qBAAC,QAAA,EAAK,WAAU,yBACb,UAAA;AAAA,YAAA;AAAA,YAAM;AAAA,YAAE,QAAQ;AAAA,YAAO;AAAA,YAAE,UAAU,UAAU;AAAA,YAAO;AAAA,YAAE;AAAA,UAAA,GACzD;AAAA,UAED,QAAQ,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEzD,QACC,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,MACrB,oBAAC,OAAA,EAAc,WAAU,oCACtB,UAAA,OAAO,QAAQ,YAAY,QAAQ,OAClC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,MAAM,OAAO,GAAG;AAAA,UAChB,OAAO,QAAQ;AAAA,UACf;AAAA,QAAA;AAAA,MAAA,yBAGD,OAAA,EACC,UAAA;AAAA,QAAA,oBAAC,UAAK,WAAU,wCACb,oBAAU,KAAK,OAAO,GAAG,GAC5B;AAAA,QACC,CAAC,WAAW,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,MAAE;AAAA,4BACtD,UAAA,EAAS,MAAM,KAAK,OAAO,QAAQ,GAAG,iBAAA,CAAoC;AAAA,MAAA,GAC7E,EAAA,GAfM,GAiBV,CACD;AAAA,MACD,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,OAAA,CAAO;AAAA,IAAA,EAAA,CAClD;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"JsonView.js","sources":["../../src/data/JsonView.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nexport type JsonViewProps = {\n  /** JSON-like value to render. */\n  data: unknown;\n  /** Optional property name displayed before nested object/array values. */\n  name?: string;\n  /** Current nesting depth; callers usually leave this unset. */\n  depth?: number;\n  /** Depth that starts expanded by default. */\n  defaultOpenDepth?: number;\n};\n\nexport function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }: JsonViewProps) {\n  const [open, setOpen] = useState(depth < defaultOpenDepth);\n\n  if (data === null || data === undefined) {\n    return <span className=\"text-muted-foreground italic\">null</span>;\n  }\n\n  if (typeof data === \"string\") {\n    return <span className=\"text-green-700 dark:text-green-400\">\"{data}\"</span>;\n  }\n\n  if (typeof data === \"number\" || typeof data === \"boolean\") {\n    return <span className=\"text-blue-700 dark:text-blue-400\">{String(data)}</span>;\n  }\n\n  if (typeof data !== \"object\") {\n    return <span className=\"text-muted-foreground\">{String(data)}</span>;\n  }\n\n  const isArray = Array.isArray(data);\n  const entries: Array<[string | number, unknown]> = isArray\n    ? (data as unknown[]).map((v, i) => [i, v])\n    : Object.entries(data as Record<string, unknown>);\n  const [openB, closeB] = isArray ? [\"[\", \"]\"] : [\"{\", \"}\"];\n\n  if (entries.length === 0) {\n    return (\n      <span className=\"text-muted-foreground\">\n        {openB}\n        {closeB}\n      </span>\n    );\n  }\n\n  return (\n    <div className=\"text-sm font-mono\" style={{ paddingLeft: depth > 0 ? \"12px\" : \"0\" }}>\n      <span\n        className=\"cursor-pointer hover:bg-accent rounded px-0.5 select-none\"\n        onClick={() => setOpen(!open)}\n      >\n        <span className=\"text-muted-foreground text-xs mr-1\">{open ? \"▼\" : \"▶\"}</span>\n        {name && <span className=\"text-purple-600 dark:text-purple-400\">{name}</span>}\n        {name && <span className=\"text-muted-foreground\">: </span>}\n        {!open && (\n          <span className=\"text-muted-foreground\">\n            {openB} {entries.length}{\" \"}\n            {isArray\n              ? entries.length === 1\n                ? \"item\"\n                : \"items\"\n              : entries.length === 1\n                ? \"key\"\n                : \"keys\"}{\" \"}\n            {closeB}\n          </span>\n        )}\n        {open && <span className=\"text-muted-foreground\">{openB}</span>}\n      </span>\n      {open && (\n        <>\n          {entries.map(([key, val]) => (\n            <div key={key} className=\"pl-3 border-l border-border ml-1\">\n              {typeof val === \"object\" && val !== null ? (\n                <JsonView\n                  data={val}\n                  name={String(key)}\n                  depth={depth + 1}\n                  defaultOpenDepth={defaultOpenDepth}\n                />\n              ) : (\n                <div>\n                  <span className=\"text-purple-600 dark:text-purple-400\">\n                    {isArray ? \"\" : String(key)}\n                  </span>\n                  {!isArray && <span className=\"text-muted-foreground\">: </span>}\n                  <JsonView data={val} depth={depth + 1} defaultOpenDepth={defaultOpenDepth} />\n                </div>\n              )}\n            </div>\n          ))}\n          <span className=\"text-muted-foreground\">{closeB}</span>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}