@flanksource/clicky-ui 0.3.40 → 0.3.42

package/dist/data/GraphDiagram.js

@@ -1,23 +1,21 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
 import { cn } from "../lib/utils.js";
-import { routeEdges, ringLayout } from "./graph-layout.js";
+import { IconButton } from "../components/IconButton.js";
+import { columnsLayout } from "./graph-columns-layout.js";
+import { ringLayout } from "./graph-layout.js";
+import { GraphDiagramEdgePaths, GraphDiagramEdgeLabels } from "./GraphDiagramEdges.js";
+import { GraphDiagramGroupBoxes, GraphDiagramNodes } from "./GraphDiagramNodes.js";
+import { requireEntry } from "./graph-diagram-model.js";
+import { useEdgeFocus } from "./use-edge-focus.js";
+import { usePanZoom } from "./use-pan-zoom.js";
+import { routeEdges } from "./graph-edge-routing.js";
+import { UiZoomOut } from "../icons/components/UiZoomOut.js";
+import { UiZoomIn } from "../icons/components/UiZoomIn.js";
+import { UiFullscreen } from "../icons/components/UiFullscreen.js";
+import { UiHome } from "../icons/components/UiHome.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) {
@@ -29,10 +27,31 @@ function assertEdgesReferenceKnownNodes(nodes, edges) {
     }
   }
 }
-function layoutNodes(layout, nodes, nodeWidth, nodeHeight) {
+function requireLevel(node) {
+  if (node.level === void 0 || !Number.isFinite(node.level)) {
+    throw new Error(`GraphDiagram: node "${node.id}" needs a finite level for the "columns" layout`);
+  }
+  return node.level;
+}
+function layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, columnGap, rowGap }) {
   switch (layout) {
     case "ring":
-      return ringLayout(nodes, { nodeWidth, nodeHeight });
+      return { ...ringLayout(nodes, { nodeWidth, nodeHeight }), groups: [] };
+    case "columns":
+      return columnsLayout(
+        nodes.map((node) => ({
+          id: node.id,
+          level: requireLevel(node),
+          ...node.group !== void 0 ? { group: node.group } : {}
+        })),
+        edges,
+        {
+          nodeWidth,
+          nodeHeight,
+          ...columnGap !== void 0 ? { columnGap } : {},
+          ...rowGap !== void 0 ? { rowGap } : {}
+        }
+      );
     default:
       throw new Error(`GraphDiagram: unknown layout "${layout}"`);
   }
@@ -40,25 +59,25 @@ function layoutNodes(layout, nodes, nodeWidth, nodeHeight) {
 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 stageStyle(size, natural, panZoom) {
+  if (!natural) return { aspectRatio: `${size.width} / ${size.height}` };
+  if (!panZoom) return size;
+  const { x, y, scale } = panZoom.transform;
+  return { ...size, transform: `translate(${x}px, ${y}px) scale(${scale})`, transformOrigin: "0 0" };
 }
-function requirePosition(positions, nodeId) {
-  const position = positions[nodeId];
-  if (!position) {
-    throw new Error(`GraphDiagram: no layout position computed for node "${nodeId}"`);
-  }
-  return position;
+function ZoomControls({ panZoom, resettable }) {
+  return /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-2 flex cursor-default gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm", children: [
+    /* @__PURE__ */ jsx(IconButton, { icon: UiZoomOut, label: "Zoom out", className: "size-6", onClick: panZoom.zoomOut }),
+    /* @__PURE__ */ jsx(IconButton, { icon: UiZoomIn, label: "Zoom in", className: "size-6", onClick: panZoom.zoomIn }),
+    /* @__PURE__ */ jsx(IconButton, { icon: UiFullscreen, label: "Fit to view", className: "size-6", onClick: panZoom.fit }),
+    resettable && /* @__PURE__ */ jsx(IconButton, { icon: UiHome, label: "Reset view", className: "size-6", onClick: panZoom.reset })
+  ] });
 }
-function handleNodeKeyDown(event, select) {
-  if (event.key === "Enter" || event.key === " ") {
-    event.preventDefault();
-    select();
-  }
+function openingFit(positions, fitMinScale, focusId) {
+  return {
+    ...fitMinScale !== void 0 ? { minScale: fitMinScale } : {},
+    ...focusId !== void 0 ? { focus: requireEntry(positions, focusId, "layout position") } : {}
+  };
 }
 function GraphDiagram({
   nodes,
@@ -66,132 +85,100 @@ function GraphDiagram({
   layout = "ring",
   selectedId,
   onNodeSelect,
+  onNodeExpand,
+  selectedEdgeId,
+  onEdgeSelect,
+  edgeFocus = "auto",
+  groups,
   nodeWidth = DEFAULT_NODE_WIDTH,
   nodeHeight = DEFAULT_NODE_HEIGHT,
+  columnGap,
+  rowGap,
+  zoomable = false,
+  fitMinScale,
+  focusId,
   maxHeight,
   ariaLabel,
   className
 }) {
   assertEdgesReferenceKnownNodes(nodes, edges);
-  const { width, height, positions } = useMemo(
-    () => layoutNodes(layout, nodes, nodeWidth, nodeHeight),
-    [layout, nodes, nodeWidth, nodeHeight]
+  const markerPrefix = `graph-diagram-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const { width, height, positions, groups: groupBoxes } = useMemo(
+    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, columnGap, rowGap }),
+    [layout, nodes, edges, nodeWidth, nodeHeight, columnGap, rowGap]
   );
   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]
+    () => routeEdges(edges, positions, { nodeWidth, nodeHeight }, { anchor: layout === "columns" ? "side" : "center" }),
+    [edges, positions, nodeWidth, nodeHeight, layout]
   );
-  return /* @__PURE__ */ jsx(
+  const panZoom = usePanZoom({
+    enabled: zoomable,
+    contentWidth: width,
+    contentHeight: height,
+    opening: openingFit(positions, fitMinScale, focusId)
+  });
+  const natural = layout === "columns" || zoomable;
+  const place = natural ? ({ x, y }) => ({ left: x, top: y }) : ({ x, y }) => ({ left: toPercent(x, width), top: toPercent(y, height) });
+  const focus = useEdgeFocus({ mode: edgeFocus, edges, selectedId, selectedEdgeId });
+  const edgeSelection = { selectedEdgeId, onEdgeSelect, focus: focus.state };
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("w-full overflow-auto", className),
+      ref: panZoom.viewportRef,
+      className: cn(
+        "w-full",
+        zoomable ? "relative touch-none overflow-hidden" : "overflow-auto",
+        zoomable && (panZoom.panning ? "cursor-grabbing select-none" : "cursor-grab"),
+        className
+      ),
       style: maxHeight != null ? { maxHeight } : void 0,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", style: { aspectRatio: `${width} / ${height}` }, children: [
+      ...panZoom.handlers,
+      children: [
         /* @__PURE__ */ jsxs(
-          "svg",
+          "div",
           {
-            viewBox: `0 0 ${width} ${height}`,
-            preserveAspectRatio: "xMidYMid meet",
-            role: "img",
-            "aria-label": ariaLabel,
-            className: "absolute inset-0 h-full w-full",
+            ref: panZoom.contentRef,
+            "data-graph-stage": "",
+            className: cn("relative", natural ? !zoomable && "mx-auto" : "w-full"),
+            style: stageStyle({ width, height }, natural, zoomable ? panZoom : void 0),
             children: [
-              /* @__PURE__ */ jsx("defs", { children: tones.map((tone) => /* @__PURE__ */ jsx(
-                "marker",
+              /* @__PURE__ */ jsx(GraphDiagramGroupBoxes, { boxes: groupBoxes, groups }),
+              /* @__PURE__ */ jsx(
+                GraphDiagramEdgePaths,
                 {
-                  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",
+                  edges,
+                  nodes,
+                  routes,
+                  width,
+                  height,
+                  ariaLabel,
+                  markerPrefix,
+                  onEdgeHover: focus.onEdgeHover,
+                  ...edgeSelection
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0", children: [
+                /* @__PURE__ */ jsx(GraphDiagramEdgeLabels, { edges, routes, place, spread: natural, ...edgeSelection }),
+                /* @__PURE__ */ jsx(
+                  GraphDiagramNodes,
                   {
-                    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
-                );
-              })
+                    nodes,
+                    positions,
+                    place,
+                    nodeWidth,
+                    nodeHeight,
+                    selectedId,
+                    onNodeSelect,
+                    onNodeExpand,
+                    onNodeHover: focus.onNodeHover
+                  }
+                )
+              ] })
             ]
           }
         ),
-        /* @__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
-            );
-          })
-        ] })
-      ] })
+        zoomable && /* @__PURE__ */ jsx(ZoomControls, { panZoom, resettable: fitMinScale !== void 0 })
+      ]
     }
   );
 }

package/dist/data/GraphDiagram.js.map

@@ -1 +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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"}
+{"version":3,"file":"GraphDiagram.js","sources":["../../src/data/GraphDiagram.tsx"],"sourcesContent":["import { useId, useMemo, type CSSProperties } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { IconButton } from \"../components/IconButton\";\nimport { UiFullscreen, UiHome, UiZoomIn, UiZoomOut } from \"../icons\";\nimport { columnsLayout, type ColumnsLayoutResult } from \"./graph-columns-layout\";\nimport { ringLayout, routeEdges, type GraphLayoutPosition } from \"./graph-layout\";\nimport { GraphDiagramEdgeLabels, GraphDiagramEdgePaths } from \"./GraphDiagramEdges\";\nimport { GraphDiagramGroupBoxes, GraphDiagramNodes } from \"./GraphDiagramNodes\";\nimport {\n  requireEntry,\n  type GraphDiagramEdge,\n  type GraphDiagramEdgeFocus,\n  type GraphDiagramGroup,\n  type GraphDiagramLayout,\n  type GraphDiagramNode,\n  type GraphPlacer,\n} from \"./graph-diagram-model\";\nimport { useEdgeFocus } from \"./use-edge-focus\";\nimport { usePanZoom, type FitOptions, type PanZoom } from \"./use-pan-zoom\";\n\nexport type {\n  GraphDiagramEdge,\n  GraphDiagramEdgeFocus,\n  GraphDiagramGroup,\n  GraphDiagramLayout,\n  GraphDiagramNode,\n} from \"./graph-diagram-model\";\n\n// GraphDiagram renders a generic, type-agnostic node/edge diagram. It knows\n// nothing about the domain: a producer maps its data into\n// GraphDiagramNode/GraphDiagramEdge and gets layout, edge routing and\n// selection behaviour.\n//\n// \"ring\" suits a small cycle of resources and processes — relationships with\n// back edges or reciprocal pairs. \"columns\" suits a directed graph with a\n// natural depth (a call graph, a dependency chain): nodes sit in the column of\n// their `level`, grouped and boxed by `group`.\n//\n// The \"columns\" layout, and any zoomable diagram, is drawn at its natural\n// pixel size so node boxes, edges and group boxes share one coordinate system\n// at every container width and zoom level. A non-zoomable \"ring\" keeps scaling\n// its node positions to the container width.\n\nexport interface GraphDiagramProps {\n  nodes: GraphDiagramNode[];\n  edges: GraphDiagramEdge[];\n  /** Defaults to \"ring\". \"columns\" needs a `level` on every node. */\n  layout?: GraphDiagramLayout;\n  selectedId?: string;\n  onNodeSelect?: (id: string) => void;\n  /** Called by a node's `+N` control (see `expandCount`); does not select the node. */\n  onNodeExpand?: (id: string) => void;\n  selectedEdgeId?: string;\n  /** Makes edges, and their label pills, selectable. */\n  onEdgeSelect?: (id: string) => void;\n  /**\n   * Whether an edge shows its pill only while in focus, and fades while another is. Defaults to\n   * \"auto\": a diagram with more than 32 edges is focused, a smaller one shows everything.\n   */\n  edgeFocus?: GraphDiagramEdgeFocus;\n  /** \"columns\" layout: captions for the group rectangles. A group without an entry shows its id. */\n  groups?: GraphDiagramGroup[];\n  nodeWidth?: number;\n  nodeHeight?: number;\n  /** \"columns\" layout: horizontal gap between columns in px. Leave room for edge label pills. */\n  columnGap?: number;\n  /** \"columns\" layout: vertical gap between stacked nodes in px. */\n  rowGap?: number;\n  /** Ctrl/meta + wheel (or pinch) zooms, dragging the background pans, and zoom controls appear. */\n  zoomable?: boolean;\n  /**\n   * Zoomable: the smallest scale the diagram opens at, so its text stays readable. A diagram too\n   * large for it opens overflowing, centred on `focusId`, and is panned to reach the rest. `Fit to\n   * view` still shows everything, and `Reset view` returns here. Unset, the diagram opens whole.\n   */\n  fitMinScale?: number;\n  /** Zoomable: the node an overflowing diagram opens centred on. Defaults to the diagram's centre. */\n  focusId?: string;\n  maxHeight?: number | string;\n  ariaLabel: string;\n  className?: string;\n}\n\nconst DEFAULT_NODE_WIDTH = 168;\nconst DEFAULT_NODE_HEIGHT = 60;\n\ninterface LayoutOptions {\n  layout: GraphDiagramLayout;\n  nodeWidth: number;\n  nodeHeight: number;\n  columnGap: number | undefined;\n  rowGap: number | undefined;\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 requireLevel(node: GraphDiagramNode): number {\n  if (node.level === undefined || !Number.isFinite(node.level)) {\n    throw new Error(`GraphDiagram: node \"${node.id}\" needs a finite level for the \"columns\" layout`);\n  }\n  return node.level;\n}\n\nfunction layoutNodes(\n  nodes: GraphDiagramNode[],\n  edges: GraphDiagramEdge[],\n  { layout, nodeWidth, nodeHeight, columnGap, rowGap }: LayoutOptions,\n): ColumnsLayoutResult {\n  switch (layout) {\n    case \"ring\":\n      return { ...ringLayout(nodes, { nodeWidth, nodeHeight }), groups: [] };\n    case \"columns\":\n      return columnsLayout(\n        nodes.map((node) => ({\n          id: node.id,\n          level: requireLevel(node),\n          ...(node.group !== undefined ? { group: node.group } : {}),\n        })),\n        edges,\n        {\n          nodeWidth,\n          nodeHeight,\n          ...(columnGap !== undefined ? { columnGap } : {}),\n          ...(rowGap !== undefined ? { rowGap } : {}),\n        },\n      );\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 stageStyle(size: { width: number; height: number }, natural: boolean, panZoom: PanZoom | undefined): CSSProperties {\n  if (!natural) return { aspectRatio: `${size.width} / ${size.height}` };\n  if (!panZoom) return size;\n  const { x, y, scale } = panZoom.transform;\n  return { ...size, transform: `translate(${x}px, ${y}px) scale(${scale})`, transformOrigin: \"0 0\" };\n}\n\n/** `resettable`: the diagram opens at another view than the whole of it, so there is one to return to. */\nfunction ZoomControls({ panZoom, resettable }: { panZoom: PanZoom; resettable: boolean }) {\n  return (\n    <div className=\"absolute right-2 top-2 flex cursor-default gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm\">\n      <IconButton icon={UiZoomOut} label=\"Zoom out\" className=\"size-6\" onClick={panZoom.zoomOut} />\n      <IconButton icon={UiZoomIn} label=\"Zoom in\" className=\"size-6\" onClick={panZoom.zoomIn} />\n      <IconButton icon={UiFullscreen} label=\"Fit to view\" className=\"size-6\" onClick={panZoom.fit} />\n      {resettable && <IconButton icon={UiHome} label=\"Reset view\" className=\"size-6\" onClick={panZoom.reset} />}\n    </div>\n  );\n}\n\n/** How a zoomable diagram opens: no smaller than `fitMinScale`, centred on the `focusId` node. */\nfunction openingFit(\n  positions: Record<string, GraphLayoutPosition>,\n  fitMinScale: number | undefined,\n  focusId: string | undefined,\n): FitOptions {\n  return {\n    ...(fitMinScale !== undefined ? { minScale: fitMinScale } : {}),\n    ...(focusId !== undefined ? { focus: requireEntry(positions, focusId, \"layout position\") } : {}),\n  };\n}\n\nexport function GraphDiagram({\n  nodes,\n  edges,\n  layout = \"ring\",\n  selectedId,\n  onNodeSelect,\n  onNodeExpand,\n  selectedEdgeId,\n  onEdgeSelect,\n  edgeFocus = \"auto\",\n  groups,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodeHeight = DEFAULT_NODE_HEIGHT,\n  columnGap,\n  rowGap,\n  zoomable = false,\n  fitMinScale,\n  focusId,\n  maxHeight,\n  ariaLabel,\n  className,\n}: GraphDiagramProps) {\n  assertEdgesReferenceKnownNodes(nodes, edges);\n  const markerPrefix = `graph-diagram-${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n  const { width, height, positions, groups: groupBoxes } = useMemo(\n    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, columnGap, rowGap }),\n    [layout, nodes, edges, nodeWidth, nodeHeight, columnGap, rowGap],\n  );\n  const routes = useMemo(\n    () =>\n      routeEdges(edges, positions, { nodeWidth, nodeHeight }, { anchor: layout === \"columns\" ? \"side\" : \"center\" }),\n    [edges, positions, nodeWidth, nodeHeight, layout],\n  );\n\n  const panZoom = usePanZoom({\n    enabled: zoomable,\n    contentWidth: width,\n    contentHeight: height,\n    opening: openingFit(positions, fitMinScale, focusId),\n  });\n  const natural = layout === \"columns\" || zoomable;\n  const place: GraphPlacer = natural\n    ? ({ x, y }) => ({ left: x, top: y })\n    : ({ x, y }) => ({ left: toPercent(x, width), top: toPercent(y, height) });\n  const focus = useEdgeFocus({ mode: edgeFocus, edges, selectedId, selectedEdgeId });\n  const edgeSelection = { selectedEdgeId, onEdgeSelect, focus: focus.state };\n\n  return (\n    <div\n      ref={panZoom.viewportRef}\n      className={cn(\n        \"w-full\",\n        zoomable ? \"relative touch-none overflow-hidden\" : \"overflow-auto\",\n        zoomable && (panZoom.panning ? \"cursor-grabbing select-none\" : \"cursor-grab\"),\n        className,\n      )}\n      style={maxHeight != null ? { maxHeight } : undefined}\n      {...panZoom.handlers}\n    >\n      <div\n        ref={panZoom.contentRef}\n        data-graph-stage=\"\"\n        className={cn(\"relative\", natural ? !zoomable && \"mx-auto\" : \"w-full\")}\n        style={stageStyle({ width, height }, natural, zoomable ? panZoom : undefined)}\n      >\n        <GraphDiagramGroupBoxes boxes={groupBoxes} groups={groups} />\n        <GraphDiagramEdgePaths\n          edges={edges}\n          nodes={nodes}\n          routes={routes}\n          width={width}\n          height={height}\n          ariaLabel={ariaLabel}\n          markerPrefix={markerPrefix}\n          onEdgeHover={focus.onEdgeHover}\n          {...edgeSelection}\n        />\n        <div className=\"pointer-events-none absolute inset-0\">\n          <GraphDiagramEdgeLabels edges={edges} routes={routes} place={place} spread={natural} {...edgeSelection} />\n          <GraphDiagramNodes\n            nodes={nodes}\n            positions={positions}\n            place={place}\n            nodeWidth={nodeWidth}\n            nodeHeight={nodeHeight}\n            selectedId={selectedId}\n            onNodeSelect={onNodeSelect}\n            onNodeExpand={onNodeExpand}\n            onNodeHover={focus.onNodeHover}\n          />\n        </div>\n      </div>\n      {zoomable && <ZoomControls panZoom={panZoom} resettable={fitMinScale !== undefined} />}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/GraphDiagramEdges.cjs

@@ -0,0 +1,208 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const graphEdgeRouting = require("./graph-edge-routing.cjs");
+const graphDiagramModel = require("./graph-diagram-model.cjs");
+const ARROW_SIZE = 10.5;
+const EDGE_STROKE = 1.5;
+const SELECTED_EDGE_STROKE = 2.75;
+const HIT_STROKE = 14;
+function EdgePath({
+  edge,
+  d,
+  markerId,
+  name,
+  selected,
+  dimmed,
+  onSelect,
+  onHover
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "g",
+    {
+      "data-graph-edge": edge.id,
+      className: utils.cn("transition-opacity", dimmed && "opacity-20"),
+      ...dimmed ? { "data-graph-edge-dimmed": "" } : {},
+      ...onHover ? graphDiagramModel.hoverHandlers(edge.id, onHover) : {},
+      children: [
+        edge.title !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("title", { children: edge.title }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: selected ? SELECTED_EDGE_STROKE : EDGE_STROKE,
+            strokeDasharray: edge.dashed ? "5 4" : void 0,
+            pointerEvents: "visibleStroke",
+            markerEnd: `url(#${markerId})`,
+            className: graphDiagramModel.TONE_TEXT_CLASS[edge.tone ?? "neutral"]
+          }
+        ),
+        onSelect && /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: "transparent",
+            strokeWidth: HIT_STROKE,
+            strokeLinecap: "round",
+            pointerEvents: "stroke",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": name,
+            "aria-pressed": selected,
+            className: utils.cn(
+              "cursor-pointer outline-none hover:stroke-primary/15 focus-visible:stroke-primary/30",
+              selected && "stroke-primary/15"
+            ),
+            onClick: onSelect,
+            onKeyDown: (event) => graphDiagramModel.activateOnKey(event, onSelect)
+          }
+        )
+      ]
+    }
+  );
+}
+function GraphDiagramEdgePaths({
+  edges,
+  nodes,
+  routes,
+  width,
+  height,
+  ariaLabel,
+  markerPrefix,
+  selectedEdgeId,
+  onEdgeSelect,
+  focus,
+  onEdgeHover
+}) {
+  const tones = Array.from(new Set(edges.map((edge) => edge.tone ?? "neutral")));
+  const names = Object.fromEntries(nodes.map((node) => [node.id, graphDiagramModel.nodeName(node)]));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      preserveAspectRatio: "xMidYMid meet",
+      role: onEdgeSelect ? "group" : "img",
+      "aria-label": ariaLabel,
+      className: "pointer-events-none absolute inset-0 h-full w-full",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: tones.map((tone) => /* @__PURE__ */ jsxRuntime.jsx(
+          "marker",
+          {
+            id: `${markerPrefix}-arrow-${tone}`,
+            viewBox: "0 0 10 10",
+            refX: 8,
+            refY: 5,
+            markerUnits: "userSpaceOnUse",
+            markerWidth: ARROW_SIZE,
+            markerHeight: ARROW_SIZE,
+            orient: "auto-start-reverse",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L10,5 L0,10 z", className: utils.cn(graphDiagramModel.TONE_TEXT_CLASS[tone], "fill-current") })
+          },
+          tone
+        )) }),
+        edges.map((edge) => /* @__PURE__ */ jsxRuntime.jsx(
+          EdgePath,
+          {
+            edge,
+            d: graphDiagramModel.requireEntry(routes, edge.id, "route").path,
+            markerId: `${markerPrefix}-arrow-${edge.tone ?? "neutral"}`,
+            name: graphDiagramModel.edgeName(edge, names),
+            selected: edge.id === selectedEdgeId,
+            dimmed: focus !== void 0 && focus.focused.size > 0 && !focus.focused.has(edge.id),
+            onSelect: onEdgeSelect ? () => onEdgeSelect(edge.id) : void 0,
+            onHover: onEdgeHover
+          },
+          edge.id
+        ))
+      ]
+    }
+  );
+}
+const LABEL_HEIGHT = 19;
+const LABEL_LOOP_GAP = 6;
+const FOCUS_LABEL_T = 0.65;
+const LABEL_NODE_GAP = 4;
+const ANCHOR_CLASS = {
+  start: "translate-x-1.5",
+  end: "-translate-x-[calc(100%+0.375rem)]",
+  center: "-translate-x-1/2"
+};
+function hasPill(edge) {
+  return Boolean(edge.label) || edge.icon != null;
+}
+function labelPoint(edge, route, focus) {
+  const middle = { x: route.labelX, y: route.labelY };
+  if (!route.curve || !focus || focus.nodes.has(edge.from) === focus.nodes.has(edge.to)) return middle;
+  const point = graphEdgeRouting.pointOnCurve(route.curve, focus.nodes.has(edge.from) ? FOCUS_LABEL_T : 1 - FOCUS_LABEL_T);
+  const reserved = graphDiagramModel.edgeLabelWidth(edge) / 2 + LABEL_NODE_GAP;
+  const left = Math.min(route.curve[0].x, route.curve[3].x) + reserved;
+  const right = Math.max(route.curve[0].x, route.curve[3].x) - reserved;
+  return left > right ? { x: middle.x, y: point.y } : { x: Math.min(right, Math.max(left, point.x)), y: point.y };
+}
+function labelYs(edges, routes, points) {
+  return graphEdgeRouting.spreadLabels(
+    edges.map((edge) => {
+      const { labelAnchor } = graphDiagramModel.requireEntry(routes, edge.id, "route");
+      const point = graphDiagramModel.requireEntry(points, edge.id, "label point");
+      const outside = labelAnchor === void 0 ? 0 : labelAnchor === "start" ? LABEL_LOOP_GAP : -LABEL_LOOP_GAP;
+      return {
+        id: edge.id,
+        x: point.x + outside,
+        y: point.y,
+        width: graphDiagramModel.edgeLabelWidth(edge),
+        height: LABEL_HEIGHT,
+        ...labelAnchor ? { anchor: labelAnchor } : {}
+      };
+    })
+  );
+}
+function GraphDiagramEdgeLabels({
+  edges,
+  routes,
+  place,
+  spread,
+  selectedEdgeId,
+  onEdgeSelect,
+  focus
+}) {
+  const labelled = edges.filter((edge) => hasPill(edge) && (!focus || focus.focused.has(edge.id)));
+  const points = Object.fromEntries(
+    labelled.map((edge) => [edge.id, labelPoint(edge, graphDiagramModel.requireEntry(routes, edge.id, "route"), focus)])
+  );
+  const ys = spread ? labelYs(labelled, routes, points) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: labelled.map((edge) => {
+    const route = graphDiagramModel.requireEntry(routes, edge.id, "route");
+    const point = graphDiagramModel.requireEntry(points, edge.id, "label point");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        "data-graph-edge-label": edge.id,
+        title: edge.title,
+        className: utils.cn(
+          "absolute -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",
+          // A pill that only hover put there would take the pointer off what is hovered, and flicker.
+          focus && !focus.pinned.has(edge.id) ? "pointer-events-none" : "pointer-events-auto",
+          edge.icon != null && "flex items-center gap-1",
+          ANCHOR_CLASS[route.labelAnchor ?? "center"],
+          graphDiagramModel.TONE_TEXT_CLASS[edge.tone ?? "neutral"],
+          onEdgeSelect && "cursor-pointer hover:bg-accent",
+          edge.id === selectedEdgeId && "border-primary ring-2 ring-primary/40"
+        ),
+        style: place({ x: point.x, y: ys ? graphDiagramModel.requireEntry(ys, edge.id, "label position") : point.y }),
+        ...onEdgeSelect ? { "aria-hidden": true, onClick: () => onEdgeSelect(edge.id) } : {},
+        children: [
+          edge.icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 text-sm leading-none", children: edge.icon }),
+          edge.label
+        ]
+      },
+      `label-${edge.id}`
+    );
+  }) });
+}
+exports.GraphDiagramEdgeLabels = GraphDiagramEdgeLabels;
+exports.GraphDiagramEdgePaths = GraphDiagramEdgePaths;
+//# sourceMappingURL=GraphDiagramEdges.cjs.map

package/dist/data/GraphDiagramEdges.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphDiagramEdges.cjs","sources":["../../src/data/GraphDiagramEdges.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { pointOnCurve, spreadLabels, type EdgeRoute } from \"./graph-edge-routing\";\nimport type { GraphLayoutPosition } from \"./graph-layout\";\nimport type { EdgeFocusState } from \"./use-edge-focus\";\nimport {\n  activateOnKey,\n  edgeLabelWidth,\n  edgeName,\n  hoverHandlers,\n  nodeName,\n  requireEntry,\n  TONE_TEXT_CLASS,\n  type GraphDiagramEdge,\n  type GraphDiagramNode,\n  type GraphPlacer,\n} from \"./graph-diagram-model\";\n\n// Arrowhead size in layout px. Fixed (userSpaceOnUse) so a thicker, selected\n// edge does not also grow its arrowhead.\nconst ARROW_SIZE = 10.5;\nconst EDGE_STROKE = 1.5;\nconst SELECTED_EDGE_STROKE = 2.75;\nconst HIT_STROKE = 14;\n\ninterface EdgeSelection {\n  selectedEdgeId: string | undefined;\n  onEdgeSelect: ((id: string) => void) | undefined;\n  /** Set when the diagram is focused: see `GraphDiagramEdgeFocus`. */\n  focus: EdgeFocusState | undefined;\n}\n\nexport interface GraphDiagramEdgePathsProps extends EdgeSelection {\n  edges: GraphDiagramEdge[];\n  nodes: GraphDiagramNode[];\n  routes: Record<string, EdgeRoute>;\n  width: number;\n  height: number;\n  ariaLabel: string;\n  /** Unique per diagram instance, so two diagrams on a page never share marker ids. */\n  markerPrefix: string;\n  onEdgeHover: ((id: string | undefined) => void) | undefined;\n}\n\nfunction EdgePath({\n  edge,\n  d,\n  markerId,\n  name,\n  selected,\n  dimmed,\n  onSelect,\n  onHover,\n}: {\n  edge: GraphDiagramEdge;\n  d: string;\n  markerId: string;\n  name: string;\n  selected: boolean;\n  /** Out of focus while another edge is in it. */\n  dimmed: boolean;\n  onSelect: (() => void) | undefined;\n  onHover: ((id: string | undefined) => void) | undefined;\n}) {\n  return (\n    <g\n      data-graph-edge={edge.id}\n      className={cn(\"transition-opacity\", dimmed && \"opacity-20\")}\n      {...(dimmed ? { \"data-graph-edge-dimmed\": \"\" } : {})}\n      {...(onHover ? hoverHandlers(edge.id, onHover) : {})}\n    >\n      {edge.title !== undefined && <title>{edge.title}</title>}\n      <path\n        d={d}\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={selected ? SELECTED_EDGE_STROKE : EDGE_STROKE}\n        strokeDasharray={edge.dashed ? \"5 4\" : undefined}\n        pointerEvents=\"visibleStroke\"\n        markerEnd={`url(#${markerId})`}\n        className={TONE_TEXT_CLASS[edge.tone ?? \"neutral\"]}\n      />\n      {onSelect && (\n        <path\n          d={d}\n          fill=\"none\"\n          stroke=\"transparent\"\n          strokeWidth={HIT_STROKE}\n          strokeLinecap=\"round\"\n          pointerEvents=\"stroke\"\n          role=\"button\"\n          tabIndex={0}\n          aria-label={name}\n          aria-pressed={selected}\n          className={cn(\n            \"cursor-pointer outline-none hover:stroke-primary/15 focus-visible:stroke-primary/30\",\n            selected && \"stroke-primary/15\",\n          )}\n          onClick={onSelect}\n          onKeyDown={(event) => activateOnKey(event, onSelect)}\n        />\n      )}\n    </g>\n  );\n}\n\nexport function GraphDiagramEdgePaths({\n  edges,\n  nodes,\n  routes,\n  width,\n  height,\n  ariaLabel,\n  markerPrefix,\n  selectedEdgeId,\n  onEdgeSelect,\n  focus,\n  onEdgeHover,\n}: GraphDiagramEdgePathsProps) {\n  const tones = Array.from(new Set(edges.map((edge) => edge.tone ?? \"neutral\")));\n  const names = Object.fromEntries(nodes.map((node) => [node.id, nodeName(node)]));\n\n  // The layer covers the whole stage, so it lets the pointer through: only an edge's own stroke\n  // takes it, and the group captions under the layer keep their tooltips.\n  return (\n    <svg\n      viewBox={`0 0 ${width} ${height}`}\n      preserveAspectRatio=\"xMidYMid meet\"\n      role={onEdgeSelect ? \"group\" : \"img\"}\n      aria-label={ariaLabel}\n      className=\"pointer-events-none absolute inset-0 h-full w-full\"\n    >\n      <defs>\n        {tones.map((tone) => (\n          <marker\n            key={tone}\n            id={`${markerPrefix}-arrow-${tone}`}\n            viewBox=\"0 0 10 10\"\n            refX={8}\n            refY={5}\n            markerUnits=\"userSpaceOnUse\"\n            markerWidth={ARROW_SIZE}\n            markerHeight={ARROW_SIZE}\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        <EdgePath\n          key={edge.id}\n          edge={edge}\n          d={requireEntry(routes, edge.id, \"route\").path}\n          markerId={`${markerPrefix}-arrow-${edge.tone ?? \"neutral\"}`}\n          name={edgeName(edge, names)}\n          selected={edge.id === selectedEdgeId}\n          dimmed={focus !== undefined && focus.focused.size > 0 && !focus.focused.has(edge.id)}\n          onSelect={onEdgeSelect ? () => onEdgeSelect(edge.id) : undefined}\n          onHover={onEdgeHover}\n        />\n      ))}\n    </svg>\n  );\n}\n\nexport interface GraphDiagramEdgeLabelsProps extends EdgeSelection {\n  edges: GraphDiagramEdge[];\n  routes: Record<string, EdgeRoute>;\n  place: GraphPlacer;\n  /**\n   * Move pills that would cover one another apart. Only meaningful when the\n   * stage is drawn at its natural size, where a pill's px size and the layout\n   * share one coordinate system.\n   */\n  spread: boolean;\n}\n\nconst LABEL_HEIGHT = 19;\n/** A loop's pill sits this far outside its point (the `translate-x` classes below). */\nconst LABEL_LOOP_GAP = 6;\n/** How far along its edge, from the node in focus, a pill sits: past the middle, where a fan has spread out. */\nconst FOCUS_LABEL_T = 0.65;\n/** Air kept between a slid pill and the nodes at either end of its edge. */\nconst LABEL_NODE_GAP = 4;\n\nconst ANCHOR_CLASS = {\n  start: \"translate-x-1.5\",\n  end: \"-translate-x-[calc(100%+0.375rem)]\",\n  center: \"-translate-x-1/2\",\n} as const;\n\nfunction hasPill(edge: GraphDiagramEdge): boolean {\n  return Boolean(edge.label) || edge.icon != null;\n}\n\n/**\n * Where an edge's pill is centred: the route's midpoint, unless exactly one\n * end of the edge is a node in focus. Then every pill of that node would sit\n * in one stack beside it, so each moves toward its own far end, kept between\n * the two nodes.\n */\nfunction labelPoint(edge: GraphDiagramEdge, route: EdgeRoute, focus: EdgeFocusState | undefined): GraphLayoutPosition {\n  const middle = { x: route.labelX, y: route.labelY };\n  if (!route.curve || !focus || focus.nodes.has(edge.from) === focus.nodes.has(edge.to)) return middle;\n  const point = pointOnCurve(route.curve, focus.nodes.has(edge.from) ? FOCUS_LABEL_T : 1 - FOCUS_LABEL_T);\n  const reserved = edgeLabelWidth(edge) / 2 + LABEL_NODE_GAP;\n  const left = Math.min(route.curve[0].x, route.curve[3].x) + reserved;\n  const right = Math.max(route.curve[0].x, route.curve[3].x) - reserved;\n  return left > right ? { x: middle.x, y: point.y } : { x: Math.min(right, Math.max(left, point.x)), y: point.y };\n}\n\nfunction labelYs(\n  edges: GraphDiagramEdge[],\n  routes: Record<string, EdgeRoute>,\n  points: Record<string, GraphLayoutPosition>,\n): Record<string, number> {\n  return spreadLabels(\n    edges.map((edge) => {\n      const { labelAnchor } = requireEntry(routes, edge.id, \"route\");\n      const point = requireEntry(points, edge.id, \"label point\");\n      const outside = labelAnchor === undefined ? 0 : labelAnchor === \"start\" ? LABEL_LOOP_GAP : -LABEL_LOOP_GAP;\n      return {\n        id: edge.id,\n        x: point.x + outside,\n        y: point.y,\n        width: edgeLabelWidth(edge),\n        height: LABEL_HEIGHT,\n        ...(labelAnchor ? { anchor: labelAnchor } : {}),\n      };\n    }),\n  );\n}\n\n/**\n * The label pills, drawn as HTML over the edges. With `onEdgeSelect` a pill is\n * a pointer shortcut for its edge; the edge's own path stays the one\n * keyboard and screen-reader target, so the pill is hidden from both.\n */\nexport function GraphDiagramEdgeLabels({\n  edges,\n  routes,\n  place,\n  spread,\n  selectedEdgeId,\n  onEdgeSelect,\n  focus,\n}: GraphDiagramEdgeLabelsProps) {\n  const labelled = edges.filter((edge) => hasPill(edge) && (!focus || focus.focused.has(edge.id)));\n  const points = Object.fromEntries(\n    labelled.map((edge) => [edge.id, labelPoint(edge, requireEntry(routes, edge.id, \"route\"), focus)]),\n  );\n  const ys = spread ? labelYs(labelled, routes, points) : undefined;\n  return (\n    <>\n      {labelled.map((edge) => {\n        const route = requireEntry(routes, edge.id, \"route\");\n        const point = requireEntry(points, edge.id, \"label point\");\n        return (\n          <span\n            key={`label-${edge.id}`}\n            data-graph-edge-label={edge.id}\n            title={edge.title}\n            className={cn(\n              \"absolute -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              // A pill that only hover put there would take the pointer off what is hovered, and flicker.\n              focus && !focus.pinned.has(edge.id) ? \"pointer-events-none\" : \"pointer-events-auto\",\n              edge.icon != null && \"flex items-center gap-1\",\n              ANCHOR_CLASS[route.labelAnchor ?? \"center\"],\n              TONE_TEXT_CLASS[edge.tone ?? \"neutral\"],\n              onEdgeSelect && \"cursor-pointer hover:bg-accent\",\n              edge.id === selectedEdgeId && \"border-primary ring-2 ring-primary/40\",\n            )}\n            style={place({ x: point.x, y: ys ? requireEntry(ys, edge.id, \"label position\") : point.y })}\n            {...(onEdgeSelect\n              ? { \"aria-hidden\": true, onClick: () => onEdgeSelect(edge.id) }\n              : {})}\n          >\n            {edge.icon != null && <span className=\"flex shrink-0 text-sm leading-none\">{edge.icon}</span>}\n            {edge.label}\n          </span>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["jsxs","cn","hoverHandlers","jsx","TONE_TEXT_CLASS","activateOnKey","nodeName","requireEntry","edgeName","pointOnCurve","edgeLabelWidth","spreadLabels","Fragment"],"mappings":"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"}