@flanksource/clicky-ui 0.3.43 → 0.3.45

package/dist/data/GraphDiagram.js.map

@@ -1 +1 @@
-{"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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"}
+{"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, type WheelMode } 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  /**\n   * \"columns\" layout: the height of a node with `size: \"compact\"`, drawn on one line. A group of only\n   * compact nodes stacks them closer and pads them tighter. Defaults to 24.\n   */\n  compactNodeHeight?: 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  /** Zoomable: \"zoom\" makes a plain mouse wheel zoom too, for a diagram that fills its pane. Defaults to \"modifier\". */\n  wheelZoom?: WheelMode;\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;\nconst DEFAULT_COMPACT_NODE_HEIGHT = 24;\n\ninterface LayoutOptions {\n  layout: GraphDiagramLayout;\n  nodeWidth: number;\n  nodeHeight: number;\n  compactNodeHeight: number;\n  columnGap: number | undefined;\n  rowGap: number | undefined;\n}\n\n/** The heights of the nodes not drawn at the node height: the compact ones, in the \"columns\" layout. */\nfunction compactHeights(nodes: GraphDiagramNode[], layout: GraphDiagramLayout, compactNodeHeight: number): Record<string, number> {\n  if (layout !== \"columns\") return {};\n  return Object.fromEntries(nodes.filter((node) => node.size === \"compact\").map((node) => [node.id, compactNodeHeight]));\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, compactNodeHeight, 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          ...(node.size === \"compact\" ? { compact: true } : {}),\n        })),\n        edges,\n        {\n          nodeWidth,\n          nodeHeight,\n          compactNodeHeight,\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  compactNodeHeight = DEFAULT_COMPACT_NODE_HEIGHT,\n  columnGap,\n  rowGap,\n  zoomable = false,\n  wheelZoom = \"modifier\",\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, compactNodeHeight, columnGap, rowGap }),\n    [layout, nodes, edges, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap],\n  );\n  const nodeHeights = useMemo(() => compactHeights(nodes, layout, compactNodeHeight), [nodes, layout, compactNodeHeight]);\n  const routes = useMemo(\n    () =>\n      routeEdges(edges, positions, { nodeWidth, nodeHeight, nodeHeights }, { anchor: layout === \"columns\" ? \"side\" : \"center\" }),\n    [edges, positions, nodeWidth, nodeHeight, nodeHeights, layout],\n  );\n\n  const panZoom = usePanZoom({\n    enabled: zoomable,\n    wheel: wheelZoom,\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            nodeHeights={nodeHeights}\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/GraphDiagramNodes.cjs

@@ -47,6 +47,7 @@ function NodeLabel({ node, oneLine }) {
 function NodeBody({
   node,
   oneLine,
+  compact,
   selected,
   onSelect
 }) {
@@ -55,8 +56,9 @@ function NodeBody({
     "div",
     {
       className: utils.cn(
-        "flex h-full w-full flex-col items-center justify-center gap-0.5 border px-3 py-1.5 text-center text-xs shadow-sm",
-        node.shape === "pill" ? "rounded-full" : "rounded-lg",
+        "flex h-full w-full border text-xs shadow-sm",
+        compact ? "items-center px-2 text-left text-[11px]" : "flex-col items-center justify-center gap-0.5 px-3 py-1.5 text-center",
+        node.shape === "pill" ? "rounded-full" : compact ? "rounded-md" : "rounded-lg",
         graphDiagramModel.TONE_NODE_CLASS[tone],
         node.muted && "border-dashed text-muted-foreground shadow-none",
         node.muted && tone === "neutral" && "bg-muted",
@@ -73,9 +75,9 @@ function NodeBody({
       "aria-label": node.ariaLabel,
       title: node.title,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NodeLabel, { node, oneLine }),
-        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 })
+        /* @__PURE__ */ jsxRuntime.jsx(NodeLabel, { node, oneLine: oneLine || compact }),
+        !compact && node.detail != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-1 text-[10px] leading-tight text-muted-foreground", children: node.detail }),
+        !compact && node.badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5", children: node.badge })
       ]
     }
   );
@@ -86,33 +88,40 @@ function GraphDiagramNodes({
   place,
   nodeWidth,
   nodeHeight,
+  nodeHeights,
   selectedId,
   onNodeSelect,
   onNodeExpand,
   onNodeHover
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      "data-graph-node": node.id,
-      className: "pointer-events-auto absolute -translate-x-1/2 -translate-y-1/2",
-      style: { ...place(graphDiagramModel.requireEntry(positions, node.id, "layout position")), width: nodeWidth, height: nodeHeight },
-      ...onNodeHover ? graphDiagramModel.hoverHandlers(node.id, onNodeHover) : {},
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          NodeBody,
-          {
-            node,
-            oneLine: nodeHeight < TWO_LINE_HEIGHT,
-            selected: selectedId != null && node.id === selectedId,
-            onSelect: onNodeSelect ? () => onNodeSelect(node.id) : void 0
-          }
-        ),
-        node.expandCount != null && node.expandCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(ExpandControl, { node, onExpand: onNodeExpand ? () => onNodeExpand(node.id) : void 0 })
-      ]
-    },
-    node.id
-  )) });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: nodes.map((node) => {
+    const height = nodeHeights[node.id] ?? nodeHeight;
+    const compact = node.id in nodeHeights;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-graph-node": node.id,
+        "data-graph-node-size": compact ? "compact" : "regular",
+        className: "pointer-events-auto absolute -translate-x-1/2 -translate-y-1/2",
+        style: { ...place(graphDiagramModel.requireEntry(positions, node.id, "layout position")), width: nodeWidth, height },
+        ...onNodeHover ? graphDiagramModel.hoverHandlers(node.id, onNodeHover) : {},
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            NodeBody,
+            {
+              node,
+              oneLine: height < TWO_LINE_HEIGHT,
+              compact,
+              selected: selectedId != null && node.id === selectedId,
+              onSelect: onNodeSelect ? () => onNodeSelect(node.id) : void 0
+            }
+          ),
+          node.expandCount != null && node.expandCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(ExpandControl, { node, onExpand: onNodeExpand ? () => onNodeExpand(node.id) : void 0 })
+        ]
+      },
+      node.id
+    );
+  }) });
 }
 function GraphDiagramGroupBoxes({ boxes, groups }) {
   const captions = new Map(groups == null ? void 0 : groups.map((group) => [group.id, group]));
@@ -122,13 +131,13 @@ function GraphDiagramGroupBoxes({ boxes, groups }) {
       "div",
       {
         "data-graph-group": box.id,
-        className: "absolute rounded-xl border border-dashed border-border bg-muted/30",
+        className: "pointer-events-none absolute rounded-xl border border-dashed border-border bg-muted/30",
         style: { left: box.x, top: box.y, width: box.width, height: box.height },
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             title: caption == null ? void 0 : caption.title,
-            className: "absolute left-2 top-0 max-w-[calc(100%-1rem)] -translate-y-1/2 truncate rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground",
+            className: "pointer-events-auto absolute left-2 top-0 max-w-[calc(100%-1rem)] -translate-y-1/2 truncate rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground",
             children: caption ? caption.label : box.group
           }
         )

package/dist/data/GraphDiagramNodes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GraphDiagramNodes.cjs","sources":["../../src/data/GraphDiagramNodes.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { GraphLayoutPosition } from \"./graph-layout\";\nimport type { GraphLayoutGroupBox } from \"./graph-columns-layout\";\nimport {\n  activateOnKey,\n  hoverHandlers,\n  nodeName,\n  requireEntry,\n  TONE_NODE_CLASS,\n  type GraphDiagramGroup,\n  type GraphDiagramNode,\n  type GraphPlacer,\n} from \"./graph-diagram-model\";\n\nexport interface GraphDiagramNodesProps {\n  nodes: GraphDiagramNode[];\n  positions: Record<string, GraphLayoutPosition>;\n  place: GraphPlacer;\n  nodeWidth: number;\n  nodeHeight: number;\n  selectedId: string | undefined;\n  onNodeSelect: ((id: string) => void) | undefined;\n  onNodeExpand: ((id: string) => void) | undefined;\n  onNodeHover: ((id: string | undefined) => void) | undefined;\n}\n\nconst EXPAND_CLASS =\n  \"absolute bottom-0 translate-y-1/2 rounded-full border border-border bg-background px-1.5 text-[10px] font-semibold leading-4 text-muted-foreground shadow-sm\";\n\n/**\n * The `+N` control. It hangs off the node's bottom edge at its outer end —\n * the left for a node left of level 0, the right otherwise — which keeps it\n * clear of the side middles where edges attach. It is a sibling of the node,\n * not a child, so activating it never also selects the node.\n */\nfunction ExpandControl({ node, onExpand }: { node: GraphDiagramNode; onExpand: (() => void) | undefined }) {\n  const side = (node.level ?? 0) < 0 ? \"left-2\" : \"right-2\";\n  const text = `+${node.expandCount}`;\n  if (!onExpand) {\n    return <span className={cn(EXPAND_CLASS, side)}>{text}</span>;\n  }\n  return (\n    <button\n      type=\"button\"\n      aria-label={`Expand ${node.expandCount} more from ${nodeName(node)}`}\n      className={cn(\n        EXPAND_CLASS,\n        side,\n        \"cursor-pointer hover:border-primary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      )}\n      onClick={onExpand}\n    >\n      {text}\n    </button>\n  );\n}\n\n// Two 15px label lines, the body's vertical padding and its border.\nconst TWO_LINE_HEIGHT = 44;\n\n/** The label, behind the node's icon when it has one. `oneLine` cuts it with an ellipsis instead of wrapping. */\nfunction NodeLabel({ node, oneLine }: { node: GraphDiagramNode; oneLine: boolean }) {\n  const label = (\n    <span\n      className={cn(\n        oneLine ? \"max-w-full truncate\" : \"line-clamp-2\",\n        \"font-medium leading-tight\",\n        node.icon != null && \"min-w-0\",\n      )}\n    >\n      {node.label}\n    </span>\n  );\n  if (node.icon == null) return label;\n  return (\n    <span className=\"flex max-w-full items-center gap-1.5\">\n      <span data-graph-node-icon=\"\" className=\"flex shrink-0 text-base leading-none\">\n        {node.icon}\n      </span>\n      {label}\n    </span>\n  );\n}\n\nfunction NodeBody({\n  node,\n  oneLine,\n  selected,\n  onSelect,\n}: {\n  node: GraphDiagramNode;\n  /** The node is too short for two label lines. */\n  oneLine: boolean;\n  selected: boolean;\n  onSelect: (() => void) | undefined;\n}) {\n  const tone = node.tone ?? \"neutral\";\n  return (\n    <div\n      className={cn(\n        \"flex h-full w-full flex-col items-center justify-center gap-0.5 border px-3 py-1.5 text-center text-xs shadow-sm\",\n        node.shape === \"pill\" ? \"rounded-full\" : \"rounded-lg\",\n        TONE_NODE_CLASS[tone],\n        node.muted && \"border-dashed text-muted-foreground shadow-none\",\n        node.muted && tone === \"neutral\" && \"bg-muted\",\n        selected && \"ring-2 ring-primary ring-offset-2 ring-offset-background\",\n        onSelect && \"cursor-pointer\",\n      )}\n      {...(onSelect\n        ? {\n            role: \"button\" as const,\n            tabIndex: 0,\n            \"aria-pressed\": selected,\n            onClick: onSelect,\n            onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => activateOnKey(event, onSelect),\n          }\n        : {})}\n      aria-label={node.ariaLabel}\n      title={node.title}\n    >\n      <NodeLabel node={node} oneLine={oneLine} />\n      {node.detail != null && (\n        <span className=\"line-clamp-1 text-[10px] leading-tight text-muted-foreground\">{node.detail}</span>\n      )}\n      {node.badge != null && <span className=\"mt-0.5\">{node.badge}</span>}\n    </div>\n  );\n}\n\nexport function GraphDiagramNodes({\n  nodes,\n  positions,\n  place,\n  nodeWidth,\n  nodeHeight,\n  selectedId,\n  onNodeSelect,\n  onNodeExpand,\n  onNodeHover,\n}: GraphDiagramNodesProps) {\n  return (\n    <>\n      {nodes.map((node) => (\n        <div\n          key={node.id}\n          data-graph-node={node.id}\n          className=\"pointer-events-auto absolute -translate-x-1/2 -translate-y-1/2\"\n          style={{ ...place(requireEntry(positions, node.id, \"layout position\")), width: nodeWidth, height: nodeHeight }}\n          {...(onNodeHover ? hoverHandlers(node.id, onNodeHover) : {})}\n        >\n          <NodeBody\n            node={node}\n            oneLine={nodeHeight < TWO_LINE_HEIGHT}\n            selected={selectedId != null && node.id === selectedId}\n            onSelect={onNodeSelect ? () => onNodeSelect(node.id) : undefined}\n          />\n          {node.expandCount != null && node.expandCount > 0 && (\n            <ExpandControl node={node} onExpand={onNodeExpand ? () => onNodeExpand(node.id) : undefined} />\n          )}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport interface GraphDiagramGroupBoxesProps {\n  boxes: GraphLayoutGroupBox[];\n  groups: GraphDiagramGroup[] | undefined;\n}\n\n/** Group rectangles, drawn behind the edges and nodes, each captioned on its top border. */\nexport function GraphDiagramGroupBoxes({ boxes, groups }: GraphDiagramGroupBoxesProps) {\n  const captions = new Map(groups?.map((group) => [group.id, group]));\n  return (\n    <>\n      {boxes.map((box) => {\n        const caption = captions.get(box.group);\n        return (\n          <div\n            key={box.id}\n            data-graph-group={box.id}\n            className=\"absolute rounded-xl border border-dashed border-border bg-muted/30\"\n            style={{ left: box.x, top: box.y, width: box.width, height: box.height }}\n          >\n            <span\n              title={caption?.title}\n              className=\"absolute left-2 top-0 max-w-[calc(100%-1rem)] -translate-y-1/2 truncate rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground\"\n            >\n              {caption ? caption.label : box.group}\n            </span>\n          </div>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["cn","jsx","nodeName","jsxs","TONE_NODE_CLASS","activateOnKey","Fragment","requireEntry","hoverHandlers"],"mappings":"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"}
+{"version":3,"file":"GraphDiagramNodes.cjs","sources":["../../src/data/GraphDiagramNodes.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { GraphLayoutPosition } from \"./graph-layout\";\nimport type { GraphLayoutGroupBox } from \"./graph-columns-layout\";\nimport {\n  activateOnKey,\n  hoverHandlers,\n  nodeName,\n  requireEntry,\n  TONE_NODE_CLASS,\n  type GraphDiagramGroup,\n  type GraphDiagramNode,\n  type GraphPlacer,\n} from \"./graph-diagram-model\";\n\nexport interface GraphDiagramNodesProps {\n  nodes: GraphDiagramNode[];\n  positions: Record<string, GraphLayoutPosition>;\n  place: GraphPlacer;\n  nodeWidth: number;\n  nodeHeight: number;\n  /** Heights of the nodes not drawn at `nodeHeight`, by id: the compact ones. */\n  nodeHeights: Readonly<Record<string, number>>;\n  selectedId: string | undefined;\n  onNodeSelect: ((id: string) => void) | undefined;\n  onNodeExpand: ((id: string) => void) | undefined;\n  onNodeHover: ((id: string | undefined) => void) | undefined;\n}\n\nconst EXPAND_CLASS =\n  \"absolute bottom-0 translate-y-1/2 rounded-full border border-border bg-background px-1.5 text-[10px] font-semibold leading-4 text-muted-foreground shadow-sm\";\n\n/**\n * The `+N` control. It hangs off the node's bottom edge at its outer end —\n * the left for a node left of level 0, the right otherwise — which keeps it\n * clear of the side middles where edges attach. It is a sibling of the node,\n * not a child, so activating it never also selects the node.\n */\nfunction ExpandControl({ node, onExpand }: { node: GraphDiagramNode; onExpand: (() => void) | undefined }) {\n  const side = (node.level ?? 0) < 0 ? \"left-2\" : \"right-2\";\n  const text = `+${node.expandCount}`;\n  if (!onExpand) {\n    return <span className={cn(EXPAND_CLASS, side)}>{text}</span>;\n  }\n  return (\n    <button\n      type=\"button\"\n      aria-label={`Expand ${node.expandCount} more from ${nodeName(node)}`}\n      className={cn(\n        EXPAND_CLASS,\n        side,\n        \"cursor-pointer hover:border-primary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      )}\n      onClick={onExpand}\n    >\n      {text}\n    </button>\n  );\n}\n\n// Two 15px label lines, the body's vertical padding and its border.\nconst TWO_LINE_HEIGHT = 44;\n\n/** The label, behind the node's icon when it has one. `oneLine` cuts it with an ellipsis instead of wrapping. */\nfunction NodeLabel({ node, oneLine }: { node: GraphDiagramNode; oneLine: boolean }) {\n  const label = (\n    <span\n      className={cn(\n        oneLine ? \"max-w-full truncate\" : \"line-clamp-2\",\n        \"font-medium leading-tight\",\n        node.icon != null && \"min-w-0\",\n      )}\n    >\n      {node.label}\n    </span>\n  );\n  if (node.icon == null) return label;\n  return (\n    <span className=\"flex max-w-full items-center gap-1.5\">\n      <span data-graph-node-icon=\"\" className=\"flex shrink-0 text-base leading-none\">\n        {node.icon}\n      </span>\n      {label}\n    </span>\n  );\n}\n\nfunction NodeBody({\n  node,\n  oneLine,\n  compact,\n  selected,\n  onSelect,\n}: {\n  node: GraphDiagramNode;\n  /** The node is too short for two label lines. */\n  oneLine: boolean;\n  /** Its icon and label on one short line, left-aligned, without its detail or badge. */\n  compact: boolean;\n  selected: boolean;\n  onSelect: (() => void) | undefined;\n}) {\n  const tone = node.tone ?? \"neutral\";\n  return (\n    <div\n      className={cn(\n        \"flex h-full w-full border text-xs shadow-sm\",\n        compact\n          ? \"items-center px-2 text-left text-[11px]\"\n          : \"flex-col items-center justify-center gap-0.5 px-3 py-1.5 text-center\",\n        node.shape === \"pill\" ? \"rounded-full\" : compact ? \"rounded-md\" : \"rounded-lg\",\n        TONE_NODE_CLASS[tone],\n        node.muted && \"border-dashed text-muted-foreground shadow-none\",\n        node.muted && tone === \"neutral\" && \"bg-muted\",\n        selected && \"ring-2 ring-primary ring-offset-2 ring-offset-background\",\n        onSelect && \"cursor-pointer\",\n      )}\n      {...(onSelect\n        ? {\n            role: \"button\" as const,\n            tabIndex: 0,\n            \"aria-pressed\": selected,\n            onClick: onSelect,\n            onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => activateOnKey(event, onSelect),\n          }\n        : {})}\n      aria-label={node.ariaLabel}\n      title={node.title}\n    >\n      <NodeLabel node={node} oneLine={oneLine || compact} />\n      {!compact && node.detail != null && (\n        <span className=\"line-clamp-1 text-[10px] leading-tight text-muted-foreground\">{node.detail}</span>\n      )}\n      {!compact && node.badge != null && <span className=\"mt-0.5\">{node.badge}</span>}\n    </div>\n  );\n}\n\nexport function GraphDiagramNodes({\n  nodes,\n  positions,\n  place,\n  nodeWidth,\n  nodeHeight,\n  nodeHeights,\n  selectedId,\n  onNodeSelect,\n  onNodeExpand,\n  onNodeHover,\n}: GraphDiagramNodesProps) {\n  return (\n    <>\n      {nodes.map((node) => {\n        const height = nodeHeights[node.id] ?? nodeHeight;\n        const compact = node.id in nodeHeights;\n        return (\n          <div\n            key={node.id}\n            data-graph-node={node.id}\n            data-graph-node-size={compact ? \"compact\" : \"regular\"}\n            className=\"pointer-events-auto absolute -translate-x-1/2 -translate-y-1/2\"\n            style={{ ...place(requireEntry(positions, node.id, \"layout position\")), width: nodeWidth, height }}\n            {...(onNodeHover ? hoverHandlers(node.id, onNodeHover) : {})}\n          >\n            <NodeBody\n              node={node}\n              oneLine={height < TWO_LINE_HEIGHT}\n              compact={compact}\n              selected={selectedId != null && node.id === selectedId}\n              onSelect={onNodeSelect ? () => onNodeSelect(node.id) : undefined}\n            />\n            {node.expandCount != null && node.expandCount > 0 && (\n              <ExpandControl node={node} onExpand={onNodeExpand ? () => onNodeExpand(node.id) : undefined} />\n            )}\n          </div>\n        );\n      })}\n    </>\n  );\n}\n\nexport interface GraphDiagramGroupBoxesProps {\n  boxes: GraphLayoutGroupBox[];\n  groups: GraphDiagramGroup[] | undefined;\n}\n\n/**\n * Group rectangles, drawn behind the edges and nodes, each captioned on its top border. A box lets the\n * pointer through to the stage, so a click inside it never lands on the box; only its caption takes\n * the pointer, for its tooltip.\n */\nexport function GraphDiagramGroupBoxes({ boxes, groups }: GraphDiagramGroupBoxesProps) {\n  const captions = new Map(groups?.map((group) => [group.id, group]));\n  return (\n    <>\n      {boxes.map((box) => {\n        const caption = captions.get(box.group);\n        return (\n          <div\n            key={box.id}\n            data-graph-group={box.id}\n            className=\"pointer-events-none absolute rounded-xl border border-dashed border-border bg-muted/30\"\n            style={{ left: box.x, top: box.y, width: box.width, height: box.height }}\n          >\n            <span\n              title={caption?.title}\n              className=\"pointer-events-auto absolute left-2 top-0 max-w-[calc(100%-1rem)] -translate-y-1/2 truncate rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground\"\n            >\n              {caption ? caption.label : box.group}\n            </span>\n          </div>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["cn","jsx","nodeName","jsxs","TONE_NODE_CLASS","activateOnKey","Fragment","requireEntry","hoverHandlers"],"mappings":";;;;;AA6BA,MAAM,eACJ;AAQF,SAAS,cAAc,EAAE,MAAM,YAA4E;AACzG,QAAM,QAAQ,KAAK,SAAS,KAAK,IAAI,WAAW;AAChD,QAAM,OAAO,IAAI,KAAK,WAAW;AACjC,MAAI,CAAC,UAAU;AACb,0CAAQ,QAAA,EAAK,WAAWA,MAAAA,GAAG,cAAc,IAAI,GAAI,UAAA,MAAK;AAAA,EACxD;AACA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,UAAU,KAAK,WAAW,cAAcC,kBAAAA,SAAS,IAAI,CAAC;AAAA,MAClE,WAAWF,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MAER,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAGA,MAAM,kBAAkB;AAGxB,SAAS,UAAU,EAAE,MAAM,WAAyD;AAClF,QAAM,QACJC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,MAAAA;AAAAA,QACT,UAAU,wBAAwB;AAAA,QAClC;AAAA,QACA,KAAK,QAAQ,QAAQ;AAAA,MAAA;AAAA,MAGtB,UAAA,KAAK;AAAA,IAAA;AAAA,EAAA;AAGV,MAAI,KAAK,QAAQ,KAAM,QAAO;AAC9B,SACEG,2BAAAA,KAAC,QAAA,EAAK,WAAU,wCACd,UAAA;AAAA,IAAAF,+BAAC,UAAK,wBAAqB,IAAG,WAAU,wCACrC,eAAK,MACR;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,OAAO,KAAK,QAAQ;AAC1B,SACEE,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWH,MAAAA;AAAAA,QACT;AAAA,QACA,UACI,4CACA;AAAA,QACJ,KAAK,UAAU,SAAS,iBAAiB,UAAU,eAAe;AAAA,QAClEI,kBAAAA,gBAAgB,IAAI;AAAA,QACpB,KAAK,SAAS;AAAA,QACd,KAAK,SAAS,SAAS,aAAa;AAAA,QACpC,YAAY;AAAA,QACZ,YAAY;AAAA,MAAA;AAAA,MAEb,GAAI,WACD;AAAA,QACE,MAAM;AAAA,QACN,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,WAAW,CAAC,UAAyCC,kBAAAA,cAAc,OAAO,QAAQ;AAAA,MAAA,IAEpF,CAAA;AAAA,MACJ,cAAY,KAAK;AAAA,MACjB,OAAO,KAAK;AAAA,MAEZ,UAAA;AAAA,QAAAJ,2BAAAA,IAAC,WAAA,EAAU,MAAY,SAAS,WAAW,SAAS;AAAA,QACnD,CAAC,WAAW,KAAK,UAAU,uCACzB,QAAA,EAAK,WAAU,gEAAgE,UAAA,KAAK,OAAA,CAAO;AAAA,QAE7F,CAAC,WAAW,KAAK,SAAS,uCAAS,QAAA,EAAK,WAAU,UAAU,UAAA,KAAK,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9E;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,SACEA,2BAAAA,IAAAK,WAAAA,UAAA,EACG,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,UAAM,SAAS,YAAY,KAAK,EAAE,KAAK;AACvC,UAAM,UAAU,KAAK,MAAM;AAC3B,WACEH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEC,mBAAiB,KAAK;AAAA,QACtB,wBAAsB,UAAU,YAAY;AAAA,QAC5C,WAAU;AAAA,QACV,OAAO,EAAE,GAAG,MAAMI,kBAAAA,aAAa,WAAW,KAAK,IAAI,iBAAiB,CAAC,GAAG,OAAO,WAAW,OAAA;AAAA,QACzF,GAAI,cAAcC,kBAAAA,cAAc,KAAK,IAAI,WAAW,IAAI,CAAA;AAAA,QAEzD,UAAA;AAAA,UAAAP,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,SAAS,SAAS;AAAA,cAClB;AAAA,cACA,UAAU,cAAc,QAAQ,KAAK,OAAO;AAAA,cAC5C,UAAU,eAAe,MAAM,aAAa,KAAK,EAAE,IAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAExD,KAAK,eAAe,QAAQ,KAAK,cAAc,KAC9CA,2BAAAA,IAAC,eAAA,EAAc,MAAY,UAAU,eAAe,MAAM,aAAa,KAAK,EAAE,IAAI,OAAA,CAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAf1F,KAAK;AAAA,IAAA;AAAA,EAmBhB,CAAC,EAAA,CACH;AAEJ;AAYO,SAAS,uBAAuB,EAAE,OAAO,UAAuC;AACrF,QAAM,WAAW,IAAI,IAAI,iCAAQ,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,KAAK,EAAE;AAClE,SACEA,2BAAAA,IAAAK,WAAAA,UAAA,EACG,UAAA,MAAM,IAAI,CAAC,QAAQ;AAClB,UAAM,UAAU,SAAS,IAAI,IAAI,KAAK;AACtC,WACEL,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEC,oBAAkB,IAAI;AAAA,QACtB,WAAU;AAAA,QACV,OAAO,EAAE,MAAM,IAAI,GAAG,KAAK,IAAI,GAAG,OAAO,IAAI,OAAO,QAAQ,IAAI,OAAA;AAAA,QAEhE,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,mCAAS;AAAA,YAChB,WAAU;AAAA,YAET,UAAA,UAAU,QAAQ,QAAQ,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MACjC;AAAA,MAVK,IAAI;AAAA,IAAA;AAAA,EAaf,CAAC,EAAA,CACH;AAEJ;;;"}

package/dist/data/GraphDiagramNodes.d.ts

@@ -7,16 +7,22 @@ export interface GraphDiagramNodesProps {
     place: GraphPlacer;
     nodeWidth: number;
     nodeHeight: number;
+    /** Heights of the nodes not drawn at `nodeHeight`, by id: the compact ones. */
+    nodeHeights: Readonly<Record<string, number>>;
     selectedId: string | undefined;
     onNodeSelect: ((id: string) => void) | undefined;
     onNodeExpand: ((id: string) => void) | undefined;
     onNodeHover: ((id: string | undefined) => void) | undefined;
 }
-export declare function GraphDiagramNodes({ nodes, positions, place, nodeWidth, nodeHeight, selectedId, onNodeSelect, onNodeExpand, onNodeHover, }: GraphDiagramNodesProps): import("react").JSX.Element;
+export declare function GraphDiagramNodes({ nodes, positions, place, nodeWidth, nodeHeight, nodeHeights, selectedId, onNodeSelect, onNodeExpand, onNodeHover, }: GraphDiagramNodesProps): import("react").JSX.Element;
 export interface GraphDiagramGroupBoxesProps {
     boxes: GraphLayoutGroupBox[];
     groups: GraphDiagramGroup[] | undefined;
 }
-/** Group rectangles, drawn behind the edges and nodes, each captioned on its top border. */
+/**
+ * Group rectangles, drawn behind the edges and nodes, each captioned on its top border. A box lets the
+ * pointer through to the stage, so a click inside it never lands on the box; only its caption takes
+ * the pointer, for its tooltip.
+ */
 export declare function GraphDiagramGroupBoxes({ boxes, groups }: GraphDiagramGroupBoxesProps): import("react").JSX.Element;
 //# sourceMappingURL=GraphDiagramNodes.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GraphDiagramNodes.d.ts","sourceRoot":"","sources":["../../src/data/GraphDiagramNodes.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAE/B,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC/C,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC7D;AAyGD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,GACZ,EAAE,sBAAsB,+BAwBxB;AAED,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,MAAM,EAAE,iBAAiB,EAAE,GAAG,SAAS,CAAC;CACzC;AAED,4FAA4F;AAC5F,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,2BAA2B,+BAwBpF"}
+{"version":3,"file":"GraphDiagramNodes.d.ts","sourceRoot":"","sources":["../../src/data/GraphDiagramNodes.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAE/B,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC/C,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,WAAW,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAC9C,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC7D;AA+GD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,GACZ,EAAE,sBAAsB,+BA8BxB;AAED,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,MAAM,EAAE,iBAAiB,EAAE,GAAG,SAAS,CAAC;CACzC;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,2BAA2B,+BAwBpF"}

package/dist/data/GraphDiagramNodes.js

@@ -45,6 +45,7 @@ function NodeLabel({ node, oneLine }) {
 function NodeBody({
   node,
   oneLine,
+  compact,
   selected,
   onSelect
 }) {
@@ -53,8 +54,9 @@ function NodeBody({
     "div",
     {
       className: cn(
-        "flex h-full w-full flex-col items-center justify-center gap-0.5 border px-3 py-1.5 text-center text-xs shadow-sm",
-        node.shape === "pill" ? "rounded-full" : "rounded-lg",
+        "flex h-full w-full border text-xs shadow-sm",
+        compact ? "items-center px-2 text-left text-[11px]" : "flex-col items-center justify-center gap-0.5 px-3 py-1.5 text-center",
+        node.shape === "pill" ? "rounded-full" : compact ? "rounded-md" : "rounded-lg",
         TONE_NODE_CLASS[tone],
         node.muted && "border-dashed text-muted-foreground shadow-none",
         node.muted && tone === "neutral" && "bg-muted",
@@ -71,9 +73,9 @@ function NodeBody({
       "aria-label": node.ariaLabel,
       title: node.title,
       children: [
-        /* @__PURE__ */ jsx(NodeLabel, { node, oneLine }),
-        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 })
+        /* @__PURE__ */ jsx(NodeLabel, { node, oneLine: oneLine || compact }),
+        !compact && node.detail != null && /* @__PURE__ */ jsx("span", { className: "line-clamp-1 text-[10px] leading-tight text-muted-foreground", children: node.detail }),
+        !compact && node.badge != null && /* @__PURE__ */ jsx("span", { className: "mt-0.5", children: node.badge })
       ]
     }
   );
@@ -84,33 +86,40 @@ function GraphDiagramNodes({
   place,
   nodeWidth,
   nodeHeight,
+  nodeHeights,
   selectedId,
   onNodeSelect,
   onNodeExpand,
   onNodeHover
 }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-graph-node": node.id,
-      className: "pointer-events-auto absolute -translate-x-1/2 -translate-y-1/2",
-      style: { ...place(requireEntry(positions, node.id, "layout position")), width: nodeWidth, height: nodeHeight },
-      ...onNodeHover ? hoverHandlers(node.id, onNodeHover) : {},
-      children: [
-        /* @__PURE__ */ jsx(
-          NodeBody,
-          {
-            node,
-            oneLine: nodeHeight < TWO_LINE_HEIGHT,
-            selected: selectedId != null && node.id === selectedId,
-            onSelect: onNodeSelect ? () => onNodeSelect(node.id) : void 0
-          }
-        ),
-        node.expandCount != null && node.expandCount > 0 && /* @__PURE__ */ jsx(ExpandControl, { node, onExpand: onNodeExpand ? () => onNodeExpand(node.id) : void 0 })
-      ]
-    },
-    node.id
-  )) });
+  return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node) => {
+    const height = nodeHeights[node.id] ?? nodeHeight;
+    const compact = node.id in nodeHeights;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-graph-node": node.id,
+        "data-graph-node-size": compact ? "compact" : "regular",
+        className: "pointer-events-auto absolute -translate-x-1/2 -translate-y-1/2",
+        style: { ...place(requireEntry(positions, node.id, "layout position")), width: nodeWidth, height },
+        ...onNodeHover ? hoverHandlers(node.id, onNodeHover) : {},
+        children: [
+          /* @__PURE__ */ jsx(
+            NodeBody,
+            {
+              node,
+              oneLine: height < TWO_LINE_HEIGHT,
+              compact,
+              selected: selectedId != null && node.id === selectedId,
+              onSelect: onNodeSelect ? () => onNodeSelect(node.id) : void 0
+            }
+          ),
+          node.expandCount != null && node.expandCount > 0 && /* @__PURE__ */ jsx(ExpandControl, { node, onExpand: onNodeExpand ? () => onNodeExpand(node.id) : void 0 })
+        ]
+      },
+      node.id
+    );
+  }) });
 }
 function GraphDiagramGroupBoxes({ boxes, groups }) {
   const captions = new Map(groups == null ? void 0 : groups.map((group) => [group.id, group]));
@@ -120,13 +129,13 @@ function GraphDiagramGroupBoxes({ boxes, groups }) {
       "div",
       {
         "data-graph-group": box.id,
-        className: "absolute rounded-xl border border-dashed border-border bg-muted/30",
+        className: "pointer-events-none absolute rounded-xl border border-dashed border-border bg-muted/30",
         style: { left: box.x, top: box.y, width: box.width, height: box.height },
         children: /* @__PURE__ */ jsx(
           "span",
           {
             title: caption == null ? void 0 : caption.title,
-            className: "absolute left-2 top-0 max-w-[calc(100%-1rem)] -translate-y-1/2 truncate rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground",
+            className: "pointer-events-auto absolute left-2 top-0 max-w-[calc(100%-1rem)] -translate-y-1/2 truncate rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground",
             children: caption ? caption.label : box.group
           }
         )

package/dist/data/GraphDiagramNodes.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphDiagramNodes.js","sources":["../../src/data/GraphDiagramNodes.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { GraphLayoutPosition } from \"./graph-layout\";\nimport type { GraphLayoutGroupBox } from \"./graph-columns-layout\";\nimport {\n  activateOnKey,\n  hoverHandlers,\n  nodeName,\n  requireEntry,\n  TONE_NODE_CLASS,\n  type GraphDiagramGroup,\n  type GraphDiagramNode,\n  type GraphPlacer,\n} from \"./graph-diagram-model\";\n\nexport interface GraphDiagramNodesProps {\n  nodes: GraphDiagramNode[];\n  positions: Record<string, GraphLayoutPosition>;\n  place: GraphPlacer;\n  nodeWidth: number;\n  nodeHeight: number;\n  selectedId: string | undefined;\n  onNodeSelect: ((id: string) => void) | undefined;\n  onNodeExpand: ((id: string) => void) | undefined;\n  onNodeHover: ((id: string | undefined) => void) | undefined;\n}\n\nconst EXPAND_CLASS =\n  \"absolute bottom-0 translate-y-1/2 rounded-full border border-border bg-background px-1.5 text-[10px] font-semibold leading-4 text-muted-foreground shadow-sm\";\n\n/**\n * The `+N` control. It hangs off the node's bottom edge at its outer end —\n * the left for a node left of level 0, the right otherwise — which keeps it\n * clear of the side middles where edges attach. It is a sibling of the node,\n * not a child, so activating it never also selects the node.\n */\nfunction ExpandControl({ node, onExpand }: { node: GraphDiagramNode; onExpand: (() => void) | undefined }) {\n  const side = (node.level ?? 0) < 0 ? \"left-2\" : \"right-2\";\n  const text = `+${node.expandCount}`;\n  if (!onExpand) {\n    return <span className={cn(EXPAND_CLASS, side)}>{text}</span>;\n  }\n  return (\n    <button\n      type=\"button\"\n      aria-label={`Expand ${node.expandCount} more from ${nodeName(node)}`}\n      className={cn(\n        EXPAND_CLASS,\n        side,\n        \"cursor-pointer hover:border-primary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      )}\n      onClick={onExpand}\n    >\n      {text}\n    </button>\n  );\n}\n\n// Two 15px label lines, the body's vertical padding and its border.\nconst TWO_LINE_HEIGHT = 44;\n\n/** The label, behind the node's icon when it has one. `oneLine` cuts it with an ellipsis instead of wrapping. */\nfunction NodeLabel({ node, oneLine }: { node: GraphDiagramNode; oneLine: boolean }) {\n  const label = (\n    <span\n      className={cn(\n        oneLine ? \"max-w-full truncate\" : \"line-clamp-2\",\n        \"font-medium leading-tight\",\n        node.icon != null && \"min-w-0\",\n      )}\n    >\n      {node.label}\n    </span>\n  );\n  if (node.icon == null) return label;\n  return (\n    <span className=\"flex max-w-full items-center gap-1.5\">\n      <span data-graph-node-icon=\"\" className=\"flex shrink-0 text-base leading-none\">\n        {node.icon}\n      </span>\n      {label}\n    </span>\n  );\n}\n\nfunction NodeBody({\n  node,\n  oneLine,\n  selected,\n  onSelect,\n}: {\n  node: GraphDiagramNode;\n  /** The node is too short for two label lines. */\n  oneLine: boolean;\n  selected: boolean;\n  onSelect: (() => void) | undefined;\n}) {\n  const tone = node.tone ?? \"neutral\";\n  return (\n    <div\n      className={cn(\n        \"flex h-full w-full flex-col items-center justify-center gap-0.5 border px-3 py-1.5 text-center text-xs shadow-sm\",\n        node.shape === \"pill\" ? \"rounded-full\" : \"rounded-lg\",\n        TONE_NODE_CLASS[tone],\n        node.muted && \"border-dashed text-muted-foreground shadow-none\",\n        node.muted && tone === \"neutral\" && \"bg-muted\",\n        selected && \"ring-2 ring-primary ring-offset-2 ring-offset-background\",\n        onSelect && \"cursor-pointer\",\n      )}\n      {...(onSelect\n        ? {\n            role: \"button\" as const,\n            tabIndex: 0,\n            \"aria-pressed\": selected,\n            onClick: onSelect,\n            onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => activateOnKey(event, onSelect),\n          }\n        : {})}\n      aria-label={node.ariaLabel}\n      title={node.title}\n    >\n      <NodeLabel node={node} oneLine={oneLine} />\n      {node.detail != null && (\n        <span className=\"line-clamp-1 text-[10px] leading-tight text-muted-foreground\">{node.detail}</span>\n      )}\n      {node.badge != null && <span className=\"mt-0.5\">{node.badge}</span>}\n    </div>\n  );\n}\n\nexport function GraphDiagramNodes({\n  nodes,\n  positions,\n  place,\n  nodeWidth,\n  nodeHeight,\n  selectedId,\n  onNodeSelect,\n  onNodeExpand,\n  onNodeHover,\n}: GraphDiagramNodesProps) {\n  return (\n    <>\n      {nodes.map((node) => (\n        <div\n          key={node.id}\n          data-graph-node={node.id}\n          className=\"pointer-events-auto absolute -translate-x-1/2 -translate-y-1/2\"\n          style={{ ...place(requireEntry(positions, node.id, \"layout position\")), width: nodeWidth, height: nodeHeight }}\n          {...(onNodeHover ? hoverHandlers(node.id, onNodeHover) : {})}\n        >\n          <NodeBody\n            node={node}\n            oneLine={nodeHeight < TWO_LINE_HEIGHT}\n            selected={selectedId != null && node.id === selectedId}\n            onSelect={onNodeSelect ? () => onNodeSelect(node.id) : undefined}\n          />\n          {node.expandCount != null && node.expandCount > 0 && (\n            <ExpandControl node={node} onExpand={onNodeExpand ? () => onNodeExpand(node.id) : undefined} />\n          )}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport interface GraphDiagramGroupBoxesProps {\n  boxes: GraphLayoutGroupBox[];\n  groups: GraphDiagramGroup[] | undefined;\n}\n\n/** Group rectangles, drawn behind the edges and nodes, each captioned on its top border. */\nexport function GraphDiagramGroupBoxes({ boxes, groups }: GraphDiagramGroupBoxesProps) {\n  const captions = new Map(groups?.map((group) => [group.id, group]));\n  return (\n    <>\n      {boxes.map((box) => {\n        const caption = captions.get(box.group);\n        return (\n          <div\n            key={box.id}\n            data-graph-group={box.id}\n            className=\"absolute rounded-xl border border-dashed border-border bg-muted/30\"\n            style={{ left: box.x, top: box.y, width: box.width, height: box.height }}\n          >\n            <span\n              title={caption?.title}\n              className=\"absolute left-2 top-0 max-w-[calc(100%-1rem)] -translate-y-1/2 truncate rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground\"\n            >\n              {caption ? caption.label : box.group}\n            </span>\n          </div>\n        );\n      })}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"GraphDiagramNodes.js","sources":["../../src/data/GraphDiagramNodes.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { GraphLayoutPosition } from \"./graph-layout\";\nimport type { GraphLayoutGroupBox } from \"./graph-columns-layout\";\nimport {\n  activateOnKey,\n  hoverHandlers,\n  nodeName,\n  requireEntry,\n  TONE_NODE_CLASS,\n  type GraphDiagramGroup,\n  type GraphDiagramNode,\n  type GraphPlacer,\n} from \"./graph-diagram-model\";\n\nexport interface GraphDiagramNodesProps {\n  nodes: GraphDiagramNode[];\n  positions: Record<string, GraphLayoutPosition>;\n  place: GraphPlacer;\n  nodeWidth: number;\n  nodeHeight: number;\n  /** Heights of the nodes not drawn at `nodeHeight`, by id: the compact ones. */\n  nodeHeights: Readonly<Record<string, number>>;\n  selectedId: string | undefined;\n  onNodeSelect: ((id: string) => void) | undefined;\n  onNodeExpand: ((id: string) => void) | undefined;\n  onNodeHover: ((id: string | undefined) => void) | undefined;\n}\n\nconst EXPAND_CLASS =\n  \"absolute bottom-0 translate-y-1/2 rounded-full border border-border bg-background px-1.5 text-[10px] font-semibold leading-4 text-muted-foreground shadow-sm\";\n\n/**\n * The `+N` control. It hangs off the node's bottom edge at its outer end —\n * the left for a node left of level 0, the right otherwise — which keeps it\n * clear of the side middles where edges attach. It is a sibling of the node,\n * not a child, so activating it never also selects the node.\n */\nfunction ExpandControl({ node, onExpand }: { node: GraphDiagramNode; onExpand: (() => void) | undefined }) {\n  const side = (node.level ?? 0) < 0 ? \"left-2\" : \"right-2\";\n  const text = `+${node.expandCount}`;\n  if (!onExpand) {\n    return <span className={cn(EXPAND_CLASS, side)}>{text}</span>;\n  }\n  return (\n    <button\n      type=\"button\"\n      aria-label={`Expand ${node.expandCount} more from ${nodeName(node)}`}\n      className={cn(\n        EXPAND_CLASS,\n        side,\n        \"cursor-pointer hover:border-primary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      )}\n      onClick={onExpand}\n    >\n      {text}\n    </button>\n  );\n}\n\n// Two 15px label lines, the body's vertical padding and its border.\nconst TWO_LINE_HEIGHT = 44;\n\n/** The label, behind the node's icon when it has one. `oneLine` cuts it with an ellipsis instead of wrapping. */\nfunction NodeLabel({ node, oneLine }: { node: GraphDiagramNode; oneLine: boolean }) {\n  const label = (\n    <span\n      className={cn(\n        oneLine ? \"max-w-full truncate\" : \"line-clamp-2\",\n        \"font-medium leading-tight\",\n        node.icon != null && \"min-w-0\",\n      )}\n    >\n      {node.label}\n    </span>\n  );\n  if (node.icon == null) return label;\n  return (\n    <span className=\"flex max-w-full items-center gap-1.5\">\n      <span data-graph-node-icon=\"\" className=\"flex shrink-0 text-base leading-none\">\n        {node.icon}\n      </span>\n      {label}\n    </span>\n  );\n}\n\nfunction NodeBody({\n  node,\n  oneLine,\n  compact,\n  selected,\n  onSelect,\n}: {\n  node: GraphDiagramNode;\n  /** The node is too short for two label lines. */\n  oneLine: boolean;\n  /** Its icon and label on one short line, left-aligned, without its detail or badge. */\n  compact: boolean;\n  selected: boolean;\n  onSelect: (() => void) | undefined;\n}) {\n  const tone = node.tone ?? \"neutral\";\n  return (\n    <div\n      className={cn(\n        \"flex h-full w-full border text-xs shadow-sm\",\n        compact\n          ? \"items-center px-2 text-left text-[11px]\"\n          : \"flex-col items-center justify-center gap-0.5 px-3 py-1.5 text-center\",\n        node.shape === \"pill\" ? \"rounded-full\" : compact ? \"rounded-md\" : \"rounded-lg\",\n        TONE_NODE_CLASS[tone],\n        node.muted && \"border-dashed text-muted-foreground shadow-none\",\n        node.muted && tone === \"neutral\" && \"bg-muted\",\n        selected && \"ring-2 ring-primary ring-offset-2 ring-offset-background\",\n        onSelect && \"cursor-pointer\",\n      )}\n      {...(onSelect\n        ? {\n            role: \"button\" as const,\n            tabIndex: 0,\n            \"aria-pressed\": selected,\n            onClick: onSelect,\n            onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => activateOnKey(event, onSelect),\n          }\n        : {})}\n      aria-label={node.ariaLabel}\n      title={node.title}\n    >\n      <NodeLabel node={node} oneLine={oneLine || compact} />\n      {!compact && node.detail != null && (\n        <span className=\"line-clamp-1 text-[10px] leading-tight text-muted-foreground\">{node.detail}</span>\n      )}\n      {!compact && node.badge != null && <span className=\"mt-0.5\">{node.badge}</span>}\n    </div>\n  );\n}\n\nexport function GraphDiagramNodes({\n  nodes,\n  positions,\n  place,\n  nodeWidth,\n  nodeHeight,\n  nodeHeights,\n  selectedId,\n  onNodeSelect,\n  onNodeExpand,\n  onNodeHover,\n}: GraphDiagramNodesProps) {\n  return (\n    <>\n      {nodes.map((node) => {\n        const height = nodeHeights[node.id] ?? nodeHeight;\n        const compact = node.id in nodeHeights;\n        return (\n          <div\n            key={node.id}\n            data-graph-node={node.id}\n            data-graph-node-size={compact ? \"compact\" : \"regular\"}\n            className=\"pointer-events-auto absolute -translate-x-1/2 -translate-y-1/2\"\n            style={{ ...place(requireEntry(positions, node.id, \"layout position\")), width: nodeWidth, height }}\n            {...(onNodeHover ? hoverHandlers(node.id, onNodeHover) : {})}\n          >\n            <NodeBody\n              node={node}\n              oneLine={height < TWO_LINE_HEIGHT}\n              compact={compact}\n              selected={selectedId != null && node.id === selectedId}\n              onSelect={onNodeSelect ? () => onNodeSelect(node.id) : undefined}\n            />\n            {node.expandCount != null && node.expandCount > 0 && (\n              <ExpandControl node={node} onExpand={onNodeExpand ? () => onNodeExpand(node.id) : undefined} />\n            )}\n          </div>\n        );\n      })}\n    </>\n  );\n}\n\nexport interface GraphDiagramGroupBoxesProps {\n  boxes: GraphLayoutGroupBox[];\n  groups: GraphDiagramGroup[] | undefined;\n}\n\n/**\n * Group rectangles, drawn behind the edges and nodes, each captioned on its top border. A box lets the\n * pointer through to the stage, so a click inside it never lands on the box; only its caption takes\n * the pointer, for its tooltip.\n */\nexport function GraphDiagramGroupBoxes({ boxes, groups }: GraphDiagramGroupBoxesProps) {\n  const captions = new Map(groups?.map((group) => [group.id, group]));\n  return (\n    <>\n      {boxes.map((box) => {\n        const caption = captions.get(box.group);\n        return (\n          <div\n            key={box.id}\n            data-graph-group={box.id}\n            className=\"pointer-events-none absolute rounded-xl border border-dashed border-border bg-muted/30\"\n            style={{ left: box.x, top: box.y, width: box.width, height: box.height }}\n          >\n            <span\n              title={caption?.title}\n              className=\"pointer-events-auto absolute left-2 top-0 max-w-[calc(100%-1rem)] -translate-y-1/2 truncate rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground\"\n            >\n              {caption ? caption.label : box.group}\n            </span>\n          </div>\n        );\n      })}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;AA6BA,MAAM,eACJ;AAQF,SAAS,cAAc,EAAE,MAAM,YAA4E;AACzG,QAAM,QAAQ,KAAK,SAAS,KAAK,IAAI,WAAW;AAChD,QAAM,OAAO,IAAI,KAAK,WAAW;AACjC,MAAI,CAAC,UAAU;AACb,+BAAQ,QAAA,EAAK,WAAW,GAAG,cAAc,IAAI,GAAI,UAAA,MAAK;AAAA,EACxD;AACA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,UAAU,KAAK,WAAW,cAAc,SAAS,IAAI,CAAC;AAAA,MAClE,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MAER,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAGA,MAAM,kBAAkB;AAGxB,SAAS,UAAU,EAAE,MAAM,WAAyD;AAClF,QAAM,QACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,UAAU,wBAAwB;AAAA,QAClC;AAAA,QACA,KAAK,QAAQ,QAAQ;AAAA,MAAA;AAAA,MAGtB,UAAA,KAAK;AAAA,IAAA;AAAA,EAAA;AAGV,MAAI,KAAK,QAAQ,KAAM,QAAO;AAC9B,SACE,qBAAC,QAAA,EAAK,WAAU,wCACd,UAAA;AAAA,IAAA,oBAAC,UAAK,wBAAqB,IAAG,WAAU,wCACrC,eAAK,MACR;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,OAAO,KAAK,QAAQ;AAC1B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,UACI,4CACA;AAAA,QACJ,KAAK,UAAU,SAAS,iBAAiB,UAAU,eAAe;AAAA,QAClE,gBAAgB,IAAI;AAAA,QACpB,KAAK,SAAS;AAAA,QACd,KAAK,SAAS,SAAS,aAAa;AAAA,QACpC,YAAY;AAAA,QACZ,YAAY;AAAA,MAAA;AAAA,MAEb,GAAI,WACD;AAAA,QACE,MAAM;AAAA,QACN,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,WAAW,CAAC,UAAyC,cAAc,OAAO,QAAQ;AAAA,MAAA,IAEpF,CAAA;AAAA,MACJ,cAAY,KAAK;AAAA,MACjB,OAAO,KAAK;AAAA,MAEZ,UAAA;AAAA,QAAA,oBAAC,WAAA,EAAU,MAAY,SAAS,WAAW,SAAS;AAAA,QACnD,CAAC,WAAW,KAAK,UAAU,4BACzB,QAAA,EAAK,WAAU,gEAAgE,UAAA,KAAK,OAAA,CAAO;AAAA,QAE7F,CAAC,WAAW,KAAK,SAAS,4BAAS,QAAA,EAAK,WAAU,UAAU,UAAA,KAAK,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9E;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,SACE,oBAAA,UAAA,EACG,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,UAAM,SAAS,YAAY,KAAK,EAAE,KAAK;AACvC,UAAM,UAAU,KAAK,MAAM;AAC3B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,mBAAiB,KAAK;AAAA,QACtB,wBAAsB,UAAU,YAAY;AAAA,QAC5C,WAAU;AAAA,QACV,OAAO,EAAE,GAAG,MAAM,aAAa,WAAW,KAAK,IAAI,iBAAiB,CAAC,GAAG,OAAO,WAAW,OAAA;AAAA,QACzF,GAAI,cAAc,cAAc,KAAK,IAAI,WAAW,IAAI,CAAA;AAAA,QAEzD,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,SAAS,SAAS;AAAA,cAClB;AAAA,cACA,UAAU,cAAc,QAAQ,KAAK,OAAO;AAAA,cAC5C,UAAU,eAAe,MAAM,aAAa,KAAK,EAAE,IAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAExD,KAAK,eAAe,QAAQ,KAAK,cAAc,KAC9C,oBAAC,eAAA,EAAc,MAAY,UAAU,eAAe,MAAM,aAAa,KAAK,EAAE,IAAI,OAAA,CAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAf1F,KAAK;AAAA,IAAA;AAAA,EAmBhB,CAAC,EAAA,CACH;AAEJ;AAYO,SAAS,uBAAuB,EAAE,OAAO,UAAuC;AACrF,QAAM,WAAW,IAAI,IAAI,iCAAQ,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,KAAK,EAAE;AAClE,SACE,oBAAA,UAAA,EACG,UAAA,MAAM,IAAI,CAAC,QAAQ;AAClB,UAAM,UAAU,SAAS,IAAI,IAAI,KAAK;AACtC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,oBAAkB,IAAI;AAAA,QACtB,WAAU;AAAA,QACV,OAAO,EAAE,MAAM,IAAI,GAAG,KAAK,IAAI,GAAG,OAAO,IAAI,OAAO,QAAQ,IAAI,OAAA;AAAA,QAEhE,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,mCAAS;AAAA,YAChB,WAAU;AAAA,YAET,UAAA,UAAU,QAAQ,QAAQ,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MACjC;AAAA,MAVK,IAAI;AAAA,IAAA;AAAA,EAaf,CAAC,EAAA,CACH;AAEJ;"}