@flanksource/clicky-ui 0.3.44 → 0.3.46

package/dist/data/GraphDiagram.js

@@ -5,7 +5,9 @@ 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 { GraphDiagramGroupBoxes } from "./GraphDiagramGroups.js";
+import { GraphDiagramNodes } from "./GraphDiagramNodes.js";
+import { useGroupWindows } from "./use-group-windows.js";
 import { requireEntry } from "./graph-diagram-model.js";
 import { useEdgeFocus } from "./use-edge-focus.js";
 import { usePanZoom } from "./use-pan-zoom.js";
@@ -16,6 +18,25 @@ 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 DEFAULT_COMPACT_NODE_HEIGHT = 24;
+function compactHeights(nodes, layout, compactNodeHeight, standIns, headerHeight) {
+  if (layout !== "columns") return {};
+  return Object.fromEntries(nodes.flatMap((node) => {
+    if (standIns.has(node.id)) return [[node.id, headerHeight]];
+    return node.size === "compact" ? [[node.id, compactNodeHeight]] : [];
+  }));
+}
+function collapsedStandIns(nodes, groups) {
+  const collapsed = new Set(groups == null ? void 0 : groups.filter((group) => group.collapsed === true).map((group) => group.id));
+  const standIns = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    if (node.group === void 0 || !collapsed.has(node.group)) continue;
+    const held = standIns.get(node.group);
+    if (held !== void 0) throw new Error(`GraphDiagram: collapsed group "${node.group}" holds "${held}" and "${node.id}"; it draws one stand-in`);
+    standIns.set(node.group, node.id);
+  }
+  return standIns;
+}
 function assertEdgesReferenceKnownNodes(nodes, edges) {
   const ids = new Set(nodes.map((node) => node.id));
   for (const edge of edges) {
@@ -33,7 +54,7 @@ function requireLevel(node) {
   }
   return node.level;
 }
-function layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, columnGap, rowGap }) {
+function layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, records, collapsed, recordHeaderHeight, columnGap, rowGap }) {
   switch (layout) {
     case "ring":
       return { ...ringLayout(nodes, { nodeWidth, nodeHeight }), groups: [] };
@@ -42,12 +63,17 @@ function layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, columnGap, r
         nodes.map((node) => ({
           id: node.id,
           level: requireLevel(node),
-          ...node.group !== void 0 ? { group: node.group } : {}
+          ...node.group !== void 0 ? { group: node.group } : {},
+          ...node.size === "compact" ? { compact: true } : {}
         })),
         edges,
         {
           nodeWidth,
           nodeHeight,
+          compactNodeHeight,
+          records,
+          collapsed,
+          recordHeaderHeight,
           ...columnGap !== void 0 ? { columnGap } : {},
           ...rowGap !== void 0 ? { rowGap } : {}
         }
@@ -90,11 +116,15 @@ function GraphDiagram({
   onEdgeSelect,
   edgeFocus = "auto",
   groups,
+  onGroupToggle,
   nodeWidth = DEFAULT_NODE_WIDTH,
   nodeHeight = DEFAULT_NODE_HEIGHT,
+  compactNodeHeight = DEFAULT_COMPACT_NODE_HEIGHT,
+  recordHeaderHeight = 24,
   columnGap,
   rowGap,
   zoomable = false,
+  wheelZoom = "modifier",
   fitMinScale,
   focusId,
   maxHeight,
@@ -103,20 +133,39 @@ function GraphDiagram({
 }) {
   assertEdgesReferenceKnownNodes(nodes, edges);
   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 records = useMemo(() => (groups == null ? void 0 : groups.filter((group) => group.variant === "record").map((group) => group.id)) ?? [], [groups]);
+  const recordNodes = useMemo(() => new Set(layout === "columns" ? nodes.filter((node) => node.group !== void 0 && records.includes(node.group)).map((node) => node.id) : []), [layout, nodes, records]);
+  const standIns = useMemo(() => layout === "columns" ? collapsedStandIns(nodes, groups) : /* @__PURE__ */ new Map(), [layout, nodes, groups]);
+  const collapsed = useMemo(() => [...standIns.keys()], [standIns]);
+  const { width, height, positions: laidOut, groups: groupBoxes } = useMemo(
+    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, records, collapsed, recordHeaderHeight, columnGap, rowGap }),
+    [layout, nodes, edges, nodeWidth, nodeHeight, compactNodeHeight, records, collapsed, recordHeaderHeight, columnGap, rowGap]
   );
-  const routes = useMemo(
-    () => routeEdges(edges, positions, { nodeWidth, nodeHeight }, { anchor: layout === "columns" ? "side" : "center" }),
-    [edges, positions, nodeWidth, nodeHeight, layout]
+  const nodeHeights = useMemo(
+    () => compactHeights(nodes, layout, compactNodeHeight, new Set(standIns.values()), recordHeaderHeight),
+    [nodes, layout, compactNodeHeight, standIns, recordHeaderHeight]
   );
   const panZoom = usePanZoom({
     enabled: zoomable,
+    wheel: wheelZoom,
     contentWidth: width,
     contentHeight: height,
-    opening: openingFit(positions, fitMinScale, focusId)
+    opening: openingFit(laidOut, fitMinScale, focusId)
   });
+  const windows = useGroupWindows({ boxes: groupBoxes, positions: laidOut, reveal: selectedId ?? focusId, stageRef: panZoom.contentRef, scale: zoomable ? panZoom.transform.scale : 1 });
+  const { positions } = windows;
+  const routes = useMemo(
+    () => routeEdges(edges, positions, { nodeWidth, nodeHeight, nodeHeights }, { anchor: layout === "columns" ? "side" : "center" }),
+    [edges, positions, nodeWidth, nodeHeight, nodeHeights, layout]
+  );
+  const drawnNodes = useMemo(() => {
+    const standing = new Set(standIns.values());
+    return nodes.filter((node) => !windows.hidden.has(node.id) && !standing.has(node.id));
+  }, [nodes, windows.hidden, standIns]);
+  const windowOf = useMemo(
+    () => new Map(groupBoxes.flatMap((box) => box.window ? box.window.members.map((id) => [id, box.id]) : [])),
+    [groupBoxes]
+  );
   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 });
@@ -142,7 +191,19 @@ function GraphDiagram({
             className: cn("relative", natural ? !zoomable && "mx-auto" : "w-full"),
             style: stageStyle({ width, height }, natural, zoomable ? panZoom : void 0),
             children: [
-              /* @__PURE__ */ jsx(GraphDiagramGroupBoxes, { boxes: groupBoxes, groups }),
+              /* @__PURE__ */ jsx(
+                GraphDiagramGroupBoxes,
+                {
+                  boxes: groupBoxes,
+                  groups,
+                  starts: windows.starts,
+                  onScroll: windows.scroll,
+                  onGroupToggle,
+                  standIns,
+                  selectedId,
+                  onNodeSelect
+                }
+              ),
               /* @__PURE__ */ jsx(
                 GraphDiagramEdgePaths,
                 {
@@ -162,11 +223,14 @@ function GraphDiagram({
                 /* @__PURE__ */ jsx(
                   GraphDiagramNodes,
                   {
-                    nodes,
+                    nodes: drawnNodes,
                     positions,
+                    windowOf,
                     place,
                     nodeWidth,
                     nodeHeight,
+                    nodeHeights,
+                    recordNodes,
                     selectedId,
                     onNodeSelect,
                     onNodeExpand,

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 } from \"./GraphDiagramGroups\";\nimport { GraphDiagramNodes } from \"./GraphDiagramNodes\";\nimport { useGroupWindows } from \"./use-group-windows\";\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  /**\n   * \"columns\" layout: captions for the group rectangles. A group without an entry shows its id. A group\n   * with more than `GROUP_MEMBER_WINDOW` members in a column scrolls them in a window that many rows tall.\n   */\n  groups?: GraphDiagramGroup[];\n  /** \"columns\" layout: the chevron of a group whose `collapsed` is set asks to collapse or expand it. */\n  onGroupToggle?: (groupId: string) => void;\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: height of a record group's header in px. Defaults to 24. */\n  recordHeaderHeight?: 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  records: readonly string[];\n  collapsed: readonly string[];\n  recordHeaderHeight: number;\n  columnGap: number | undefined;\n  rowGap: number | undefined;\n}\n\n/**\n * The heights of the nodes not drawn at the node height, in the \"columns\" layout: the compact ones, and\n * the stand-ins of collapsed groups, as tall as the header they are drawn as.\n */\nfunction compactHeights(nodes: GraphDiagramNode[], layout: GraphDiagramLayout, compactNodeHeight: number, standIns: ReadonlySet<string>, headerHeight: number): Record<string, number> {\n  if (layout !== \"columns\") return {};\n  return Object.fromEntries(nodes.flatMap((node): [string, number][] => {\n    if (standIns.has(node.id)) return [[node.id, headerHeight]];\n    return node.size === \"compact\" ? [[node.id, compactNodeHeight]] : [];\n  }));\n}\n\n/** The one node each collapsed group holds, by group id. */\nfunction collapsedStandIns(nodes: GraphDiagramNode[], groups: GraphDiagramGroup[] | undefined): Map<string, string> {\n  const collapsed = new Set(groups?.filter((group) => group.collapsed === true).map((group) => group.id));\n  const standIns = new Map<string, string>();\n  for (const node of nodes) {\n    if (node.group === undefined || !collapsed.has(node.group)) continue;\n    const held = standIns.get(node.group);\n    if (held !== undefined) throw new Error(`GraphDiagram: collapsed group \"${node.group}\" holds \"${held}\" and \"${node.id}\"; it draws one stand-in`);\n    standIns.set(node.group, node.id);\n  }\n  return standIns;\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, records, collapsed, recordHeaderHeight, 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          records,\n          collapsed,\n          recordHeaderHeight,\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  onGroupToggle,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodeHeight = DEFAULT_NODE_HEIGHT,\n  compactNodeHeight = DEFAULT_COMPACT_NODE_HEIGHT,\n  recordHeaderHeight = 24,\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  const records = useMemo(() => groups?.filter((group) => group.variant === \"record\").map((group) => group.id) ?? [], [groups]);\n  const recordNodes = useMemo(() => new Set(layout === \"columns\" ? nodes.filter((node) => node.group !== undefined && records.includes(node.group)).map((node) => node.id) : []), [layout, nodes, records]);\n  const standIns = useMemo(() => (layout === \"columns\" ? collapsedStandIns(nodes, groups) : new Map<string, string>()), [layout, nodes, groups]);\n  const collapsed = useMemo(() => [...standIns.keys()], [standIns]);\n\n  const { width, height, positions: laidOut, groups: groupBoxes } = useMemo(\n    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, records, collapsed, recordHeaderHeight, columnGap, rowGap }),\n    [layout, nodes, edges, nodeWidth, nodeHeight, compactNodeHeight, records, collapsed, recordHeaderHeight, columnGap, rowGap],\n  );\n  const nodeHeights = useMemo(\n    () => compactHeights(nodes, layout, compactNodeHeight, new Set(standIns.values()), recordHeaderHeight),\n    [nodes, layout, compactNodeHeight, standIns, recordHeaderHeight],\n  );\n\n  const panZoom = usePanZoom({\n    enabled: zoomable,\n    wheel: wheelZoom,\n    contentWidth: width,\n    contentHeight: height,\n    opening: openingFit(laidOut, fitMinScale, focusId),\n  });\n  const windows = useGroupWindows({ boxes: groupBoxes, positions: laidOut, reveal: selectedId ?? focusId, stageRef: panZoom.contentRef, scale: zoomable ? panZoom.transform.scale : 1 });\n  const { positions } = windows;\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  const drawnNodes = useMemo(() => {\n    const standing = new Set(standIns.values());\n    return nodes.filter((node) => !windows.hidden.has(node.id) && !standing.has(node.id));\n  }, [nodes, windows.hidden, standIns]);\n  const windowOf = useMemo(\n    () => new Map(groupBoxes.flatMap((box) => (box.window ? box.window.members.map((id): [string, string] => [id, box.id]) : []))),\n    [groupBoxes],\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} starts={windows.starts} onScroll={windows.scroll} onGroupToggle={onGroupToggle}\n          standIns={standIns} selectedId={selectedId} onNodeSelect={onNodeSelect} />\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={drawnNodes}\n            positions={positions}\n            windowOf={windowOf}\n            place={place}\n            nodeWidth={nodeWidth}\n            nodeHeight={nodeHeight}\n            nodeHeights={nodeHeights}\n            recordNodes={recordNodes}\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/GraphDiagramGroups.cjs

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const IconButton = require("../components/IconButton.cjs");
+const utils = require("../lib/utils.cjs");
+const graphGroupWindow = require("./graph-group-window.cjs");
+const graphDiagramModel = require("./graph-diagram-model.cjs");
+const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
+const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
+const UiChevronUp = require("../icons/components/UiChevronUp.cjs");
+function Chevron({ group, name, onToggle }) {
+  const collapsed = group.collapsed === true;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconButton.IconButton,
+    {
+      icon: collapsed ? UiChevronRight.UiChevronRight : UiChevronDown.UiChevronDown,
+      label: `${collapsed ? "Expand" : "Collapse"} ${name}`,
+      "aria-expanded": !collapsed,
+      className: "pointer-events-auto size-4",
+      onClick: onToggle
+    }
+  );
+}
+function Header({ box, caption, title, chevron, aside, select }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-graph-record-header": "", title, className: "pointer-events-auto flex items-center gap-1 bg-muted px-1.5 text-[11px] font-semibold", style: { height: box.headerHeight }, children: [
+    chevron,
+    select ? /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Select ${select.name}`,
+        "aria-pressed": select.selected,
+        onClick: select.onSelect,
+        className: utils.cn("min-w-0 truncate rounded-sm text-left hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", select.selected && "text-primary"),
+        children: caption
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: caption }),
+    aside != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 pl-2 text-[10px] font-normal text-muted-foreground", children: aside })
+  ] });
+}
+function WindowFooter({ box, rows, start, name, onScroll }) {
+  const { first, last, total } = graphGroupWindow.windowRows(rows, start);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-graph-window-footer": "",
+      className: "pointer-events-auto absolute inset-x-0 flex items-center gap-1 px-2 text-[10px] text-muted-foreground",
+      style: { top: rows.top + rows.height - box.y, height: rows.footerHeight },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1 truncate tabular-nums", children: [
+          "rows ",
+          first,
+          "–",
+          last,
+          " of ",
+          total
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { icon: UiChevronUp.UiChevronUp, label: `Scroll ${name} up`, className: "size-4", disabled: first === 1, onClick: () => onScroll(-rows.rows) }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { icon: UiChevronDown.UiChevronDown, label: `Scroll ${name} down`, className: "size-4", disabled: last === total, onClick: () => onScroll(rows.rows) })
+      ]
+    }
+  );
+}
+function GraphDiagramGroupBoxes({ boxes, groups, starts, onScroll, onGroupToggle, standIns, selectedId, onNodeSelect }) {
+  const entries = new Map(groups == null ? void 0 : groups.map((group) => [group.id, group]));
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: boxes.map((box) => {
+    const group = entries.get(box.group);
+    const name = graphDiagramModel.groupName(group, box.group);
+    const caption = group ? group.label : box.group;
+    const chevron = group && group.collapsed !== void 0 && onGroupToggle ? /* @__PURE__ */ jsxRuntime.jsx(Chevron, { group, name, onToggle: () => onGroupToggle(box.group) }) : null;
+    const standIn = box.collapsed ? standIns.get(box.group) : void 0;
+    const select = standIn !== void 0 && onNodeSelect ? { name, selected: selectedId === standIn, onSelect: () => onNodeSelect(standIn) } : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-graph-group": box.id,
+        "data-graph-group-variant": box.record ? "record" : "box",
+        ...box.collapsed ? { "data-graph-group-collapsed": "" } : {},
+        ...box.window ? { "data-graph-window": box.id } : {},
+        className: utils.cn(
+          "absolute border border-border",
+          box.window ? "pointer-events-auto" : "pointer-events-none",
+          box.record || box.collapsed ? "overflow-hidden rounded-md bg-card shadow-sm" : "rounded-xl bg-muted/30",
+          !box.record && "border-dashed"
+        ),
+        style: { left: box.x, top: box.y, width: box.width, height: box.height },
+        children: [
+          box.record || box.collapsed ? /* @__PURE__ */ jsxRuntime.jsx(Header, { box, caption, title: group == null ? void 0 : group.title, chevron, aside: group == null ? void 0 : group.aside, select }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pointer-events-auto absolute left-2 top-0 flex max-w-[calc(100%-1rem)] -translate-y-1/2 items-center gap-0.5 rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground", children: [
+            chevron,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { title: group == null ? void 0 : group.title, className: "pointer-events-auto min-w-0 truncate", children: caption })
+          ] }),
+          box.window && /* @__PURE__ */ jsxRuntime.jsx(WindowFooter, { box, rows: box.window, start: starts[box.id] ?? 0, name, onScroll: (rows) => onScroll(box.id, rows) })
+        ]
+      },
+      box.id
+    );
+  }) });
+}
+exports.GraphDiagramGroupBoxes = GraphDiagramGroupBoxes;
+//# sourceMappingURL=GraphDiagramGroups.cjs.map

package/dist/data/GraphDiagramGroups.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphDiagramGroups.cjs","sources":["../../src/data/GraphDiagramGroups.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { IconButton } from \"../components/IconButton\";\nimport { UiChevronDown, UiChevronRight, UiChevronUp } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport type { GraphLayoutGroupBox, GroupMemberWindow } from \"./graph-columns-layout\";\nimport { windowRows, type WindowStarts } from \"./graph-group-window\";\nimport { groupName, type GraphDiagramGroup } from \"./graph-diagram-model\";\n\nexport interface GraphDiagramGroupBoxesProps {\n  boxes: GraphLayoutGroupBox[];\n  groups: GraphDiagramGroup[] | undefined;\n  /** Window starts by box id. */\n  starts: WindowStarts;\n  onScroll: (boxId: string, rows: number) => void;\n  /** Shows a chevron on every group whose `collapsed` is set. */\n  onGroupToggle: ((groupId: string) => void) | undefined;\n  /** The stand-in node of each collapsed group, by group id: its header selects it. */\n  standIns: ReadonlyMap<string, string>;\n  selectedId: string | undefined;\n  onNodeSelect: ((id: string) => void) | undefined;\n}\n\nfunction Chevron({ group, name, onToggle }: { group: GraphDiagramGroup; name: string; onToggle: () => void }) {\n  const collapsed = group.collapsed === true;\n  return (\n    <IconButton icon={collapsed ? UiChevronRight : UiChevronDown} label={`${collapsed ? \"Expand\" : \"Collapse\"} ${name}`} aria-expanded={!collapsed}\n      className=\"pointer-events-auto size-4\" onClick={onToggle} />\n  );\n}\n\n/** A record's header, or a collapsed group's whole box: chevron, caption, and what it holds. */\nfunction Header({ box, caption, title, chevron, aside, select }: {\n  box: GraphLayoutGroupBox;\n  caption: ReactNode;\n  title: string | undefined;\n  chevron: ReactNode;\n  aside: ReactNode;\n  select: { name: string; selected: boolean; onSelect: () => void } | undefined;\n}) {\n  return (\n    <div data-graph-record-header=\"\" title={title} className=\"pointer-events-auto flex items-center gap-1 bg-muted px-1.5 text-[11px] font-semibold\" style={{ height: box.headerHeight }}>\n      {chevron}\n      {select ? (\n        <button type=\"button\" aria-label={`Select ${select.name}`} aria-pressed={select.selected} onClick={select.onSelect}\n          className={cn(\"min-w-0 truncate rounded-sm text-left hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\", select.selected && \"text-primary\")}>\n          {caption}\n        </button>\n      ) : <span className=\"min-w-0 truncate\">{caption}</span>}\n      {aside != null && <span className=\"ml-auto shrink-0 pl-2 text-[10px] font-normal text-muted-foreground\">{aside}</span>}\n    </div>\n  );\n}\n\n/** \"rows a–b of n\" under a windowed group's rows, with buttons that page it. */\nfunction WindowFooter({ box, rows, start, name, onScroll }: { box: GraphLayoutGroupBox; rows: GroupMemberWindow; start: number; name: string; onScroll: (rows: number) => void }) {\n  const { first, last, total } = windowRows(rows, start);\n  return (\n    <div data-graph-window-footer=\"\" className=\"pointer-events-auto absolute inset-x-0 flex items-center gap-1 px-2 text-[10px] text-muted-foreground\"\n      style={{ top: rows.top + rows.height - box.y, height: rows.footerHeight }}>\n      <span className=\"min-w-0 flex-1 truncate tabular-nums\">rows {first}–{last} of {total}</span>\n      <IconButton icon={UiChevronUp} label={`Scroll ${name} up`} className=\"size-4\" disabled={first === 1} onClick={() => onScroll(-rows.rows)} />\n      <IconButton icon={UiChevronDown} label={`Scroll ${name} down`} className=\"size-4\" disabled={last === total} onClick={() => onScroll(rows.rows)} />\n    </div>\n  );\n}\n\n/**\n * Group rectangles, drawn behind the edges and nodes. A record is captioned by a header, a box on its top\n * border; a collapsed group is its header alone. A box lets the pointer through to the stage, so a click\n * inside it never lands on the box; only its caption, chevron and footer take the pointer. A windowed box\n * takes the wheel too, to scroll its members.\n */\nexport function GraphDiagramGroupBoxes({ boxes, groups, starts, onScroll, onGroupToggle, standIns, selectedId, onNodeSelect }: GraphDiagramGroupBoxesProps) {\n  const entries = new Map(groups?.map((group) => [group.id, group]));\n  return (\n    <>\n      {boxes.map((box) => {\n        const group = entries.get(box.group);\n        const name = groupName(group, box.group);\n        const caption = group ? group.label : box.group;\n        const chevron = group && group.collapsed !== undefined && onGroupToggle ? <Chevron group={group} name={name} onToggle={() => onGroupToggle(box.group)} /> : null;\n        const standIn = box.collapsed ? standIns.get(box.group) : undefined;\n        const select = standIn !== undefined && onNodeSelect ? { name, selected: selectedId === standIn, onSelect: () => onNodeSelect(standIn) } : undefined;\n        return (\n          <div\n            key={box.id}\n            data-graph-group={box.id}\n            data-graph-group-variant={box.record ? \"record\" : \"box\"}\n            {...(box.collapsed ? { \"data-graph-group-collapsed\": \"\" } : {})}\n            {...(box.window ? { \"data-graph-window\": box.id } : {})}\n            className={cn(\n              \"absolute border border-border\",\n              box.window ? \"pointer-events-auto\" : \"pointer-events-none\",\n              box.record || box.collapsed ? \"overflow-hidden rounded-md bg-card shadow-sm\" : \"rounded-xl bg-muted/30\",\n              !box.record && \"border-dashed\",\n            )}\n            style={{ left: box.x, top: box.y, width: box.width, height: box.height }}\n          >\n            {box.record || box.collapsed ? (\n              <Header box={box} caption={caption} title={group?.title} chevron={chevron} aside={group?.aside} select={select} />\n            ) : (\n              <span className=\"pointer-events-auto absolute left-2 top-0 flex max-w-[calc(100%-1rem)] -translate-y-1/2 items-center gap-0.5 rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground\">\n                {chevron}\n                <span title={group?.title} className=\"pointer-events-auto min-w-0 truncate\">{caption}</span>\n              </span>\n            )}\n            {box.window && <WindowFooter box={box} rows={box.window} start={starts[box.id] ?? 0} name={name} onScroll={(rows) => onScroll(box.id, rows)} />}\n          </div>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["jsx","IconButton","UiChevronRight","UiChevronDown","jsxs","cn","windowRows","UiChevronUp","Fragment","groupName"],"mappings":"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"}

package/dist/data/GraphDiagramGroups.d.ts

@@ -0,0 +1,24 @@
+import { GraphLayoutGroupBox } from './graph-columns-layout.js';
+import { WindowStarts } from './graph-group-window.js';
+import { GraphDiagramGroup } from './graph-diagram-model.js';
+export interface GraphDiagramGroupBoxesProps {
+    boxes: GraphLayoutGroupBox[];
+    groups: GraphDiagramGroup[] | undefined;
+    /** Window starts by box id. */
+    starts: WindowStarts;
+    onScroll: (boxId: string, rows: number) => void;
+    /** Shows a chevron on every group whose `collapsed` is set. */
+    onGroupToggle: ((groupId: string) => void) | undefined;
+    /** The stand-in node of each collapsed group, by group id: its header selects it. */
+    standIns: ReadonlyMap<string, string>;
+    selectedId: string | undefined;
+    onNodeSelect: ((id: string) => void) | undefined;
+}
+/**
+ * Group rectangles, drawn behind the edges and nodes. A record is captioned by a header, a box on its top
+ * border; a collapsed group is its header alone. A box lets the pointer through to the stage, so a click
+ * inside it never lands on the box; only its caption, chevron and footer take the pointer. A windowed box
+ * takes the wheel too, to scroll its members.
+ */
+export declare function GraphDiagramGroupBoxes({ boxes, groups, starts, onScroll, onGroupToggle, standIns, selectedId, onNodeSelect }: GraphDiagramGroupBoxesProps): import("react").JSX.Element;
+//# sourceMappingURL=GraphDiagramGroups.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GraphDiagramGroups.d.ts","sourceRoot":"","sources":["../../src/data/GraphDiagramGroups.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAqB,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAc,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAa,KAAK,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1E,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,MAAM,EAAE,iBAAiB,EAAE,GAAG,SAAS,CAAC;IACxC,+BAA+B;IAC/B,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,+DAA+D;IAC/D,aAAa,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,qFAAqF;IACrF,QAAQ,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAClD;AA8CD;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,2BAA2B,+BAwCzJ"}

package/dist/data/GraphDiagramGroups.js

@@ -0,0 +1,100 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { IconButton } from "../components/IconButton.js";
+import { cn } from "../lib/utils.js";
+import { windowRows } from "./graph-group-window.js";
+import { groupName } from "./graph-diagram-model.js";
+import { UiChevronRight } from "../icons/components/UiChevronRight.js";
+import { UiChevronDown } from "../icons/components/UiChevronDown.js";
+import { UiChevronUp } from "../icons/components/UiChevronUp.js";
+function Chevron({ group, name, onToggle }) {
+  const collapsed = group.collapsed === true;
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      icon: collapsed ? UiChevronRight : UiChevronDown,
+      label: `${collapsed ? "Expand" : "Collapse"} ${name}`,
+      "aria-expanded": !collapsed,
+      className: "pointer-events-auto size-4",
+      onClick: onToggle
+    }
+  );
+}
+function Header({ box, caption, title, chevron, aside, select }) {
+  return /* @__PURE__ */ jsxs("div", { "data-graph-record-header": "", title, className: "pointer-events-auto flex items-center gap-1 bg-muted px-1.5 text-[11px] font-semibold", style: { height: box.headerHeight }, children: [
+    chevron,
+    select ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Select ${select.name}`,
+        "aria-pressed": select.selected,
+        onClick: select.onSelect,
+        className: cn("min-w-0 truncate rounded-sm text-left hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", select.selected && "text-primary"),
+        children: caption
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: caption }),
+    aside != null && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 pl-2 text-[10px] font-normal text-muted-foreground", children: aside })
+  ] });
+}
+function WindowFooter({ box, rows, start, name, onScroll }) {
+  const { first, last, total } = windowRows(rows, start);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-graph-window-footer": "",
+      className: "pointer-events-auto absolute inset-x-0 flex items-center gap-1 px-2 text-[10px] text-muted-foreground",
+      style: { top: rows.top + rows.height - box.y, height: rows.footerHeight },
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate tabular-nums", children: [
+          "rows ",
+          first,
+          "–",
+          last,
+          " of ",
+          total
+        ] }),
+        /* @__PURE__ */ jsx(IconButton, { icon: UiChevronUp, label: `Scroll ${name} up`, className: "size-4", disabled: first === 1, onClick: () => onScroll(-rows.rows) }),
+        /* @__PURE__ */ jsx(IconButton, { icon: UiChevronDown, label: `Scroll ${name} down`, className: "size-4", disabled: last === total, onClick: () => onScroll(rows.rows) })
+      ]
+    }
+  );
+}
+function GraphDiagramGroupBoxes({ boxes, groups, starts, onScroll, onGroupToggle, standIns, selectedId, onNodeSelect }) {
+  const entries = new Map(groups == null ? void 0 : groups.map((group) => [group.id, group]));
+  return /* @__PURE__ */ jsx(Fragment, { children: boxes.map((box) => {
+    const group = entries.get(box.group);
+    const name = groupName(group, box.group);
+    const caption = group ? group.label : box.group;
+    const chevron = group && group.collapsed !== void 0 && onGroupToggle ? /* @__PURE__ */ jsx(Chevron, { group, name, onToggle: () => onGroupToggle(box.group) }) : null;
+    const standIn = box.collapsed ? standIns.get(box.group) : void 0;
+    const select = standIn !== void 0 && onNodeSelect ? { name, selected: selectedId === standIn, onSelect: () => onNodeSelect(standIn) } : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-graph-group": box.id,
+        "data-graph-group-variant": box.record ? "record" : "box",
+        ...box.collapsed ? { "data-graph-group-collapsed": "" } : {},
+        ...box.window ? { "data-graph-window": box.id } : {},
+        className: cn(
+          "absolute border border-border",
+          box.window ? "pointer-events-auto" : "pointer-events-none",
+          box.record || box.collapsed ? "overflow-hidden rounded-md bg-card shadow-sm" : "rounded-xl bg-muted/30",
+          !box.record && "border-dashed"
+        ),
+        style: { left: box.x, top: box.y, width: box.width, height: box.height },
+        children: [
+          box.record || box.collapsed ? /* @__PURE__ */ jsx(Header, { box, caption, title: group == null ? void 0 : group.title, chevron, aside: group == null ? void 0 : group.aside, select }) : /* @__PURE__ */ jsxs("span", { className: "pointer-events-auto absolute left-2 top-0 flex max-w-[calc(100%-1rem)] -translate-y-1/2 items-center gap-0.5 rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground", children: [
+            chevron,
+            /* @__PURE__ */ jsx("span", { title: group == null ? void 0 : group.title, className: "pointer-events-auto min-w-0 truncate", children: caption })
+          ] }),
+          box.window && /* @__PURE__ */ jsx(WindowFooter, { box, rows: box.window, start: starts[box.id] ?? 0, name, onScroll: (rows) => onScroll(box.id, rows) })
+        ]
+      },
+      box.id
+    );
+  }) });
+}
+export {
+  GraphDiagramGroupBoxes
+};
+//# sourceMappingURL=GraphDiagramGroups.js.map

package/dist/data/GraphDiagramGroups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphDiagramGroups.js","sources":["../../src/data/GraphDiagramGroups.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { IconButton } from \"../components/IconButton\";\nimport { UiChevronDown, UiChevronRight, UiChevronUp } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport type { GraphLayoutGroupBox, GroupMemberWindow } from \"./graph-columns-layout\";\nimport { windowRows, type WindowStarts } from \"./graph-group-window\";\nimport { groupName, type GraphDiagramGroup } from \"./graph-diagram-model\";\n\nexport interface GraphDiagramGroupBoxesProps {\n  boxes: GraphLayoutGroupBox[];\n  groups: GraphDiagramGroup[] | undefined;\n  /** Window starts by box id. */\n  starts: WindowStarts;\n  onScroll: (boxId: string, rows: number) => void;\n  /** Shows a chevron on every group whose `collapsed` is set. */\n  onGroupToggle: ((groupId: string) => void) | undefined;\n  /** The stand-in node of each collapsed group, by group id: its header selects it. */\n  standIns: ReadonlyMap<string, string>;\n  selectedId: string | undefined;\n  onNodeSelect: ((id: string) => void) | undefined;\n}\n\nfunction Chevron({ group, name, onToggle }: { group: GraphDiagramGroup; name: string; onToggle: () => void }) {\n  const collapsed = group.collapsed === true;\n  return (\n    <IconButton icon={collapsed ? UiChevronRight : UiChevronDown} label={`${collapsed ? \"Expand\" : \"Collapse\"} ${name}`} aria-expanded={!collapsed}\n      className=\"pointer-events-auto size-4\" onClick={onToggle} />\n  );\n}\n\n/** A record's header, or a collapsed group's whole box: chevron, caption, and what it holds. */\nfunction Header({ box, caption, title, chevron, aside, select }: {\n  box: GraphLayoutGroupBox;\n  caption: ReactNode;\n  title: string | undefined;\n  chevron: ReactNode;\n  aside: ReactNode;\n  select: { name: string; selected: boolean; onSelect: () => void } | undefined;\n}) {\n  return (\n    <div data-graph-record-header=\"\" title={title} className=\"pointer-events-auto flex items-center gap-1 bg-muted px-1.5 text-[11px] font-semibold\" style={{ height: box.headerHeight }}>\n      {chevron}\n      {select ? (\n        <button type=\"button\" aria-label={`Select ${select.name}`} aria-pressed={select.selected} onClick={select.onSelect}\n          className={cn(\"min-w-0 truncate rounded-sm text-left hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\", select.selected && \"text-primary\")}>\n          {caption}\n        </button>\n      ) : <span className=\"min-w-0 truncate\">{caption}</span>}\n      {aside != null && <span className=\"ml-auto shrink-0 pl-2 text-[10px] font-normal text-muted-foreground\">{aside}</span>}\n    </div>\n  );\n}\n\n/** \"rows a–b of n\" under a windowed group's rows, with buttons that page it. */\nfunction WindowFooter({ box, rows, start, name, onScroll }: { box: GraphLayoutGroupBox; rows: GroupMemberWindow; start: number; name: string; onScroll: (rows: number) => void }) {\n  const { first, last, total } = windowRows(rows, start);\n  return (\n    <div data-graph-window-footer=\"\" className=\"pointer-events-auto absolute inset-x-0 flex items-center gap-1 px-2 text-[10px] text-muted-foreground\"\n      style={{ top: rows.top + rows.height - box.y, height: rows.footerHeight }}>\n      <span className=\"min-w-0 flex-1 truncate tabular-nums\">rows {first}–{last} of {total}</span>\n      <IconButton icon={UiChevronUp} label={`Scroll ${name} up`} className=\"size-4\" disabled={first === 1} onClick={() => onScroll(-rows.rows)} />\n      <IconButton icon={UiChevronDown} label={`Scroll ${name} down`} className=\"size-4\" disabled={last === total} onClick={() => onScroll(rows.rows)} />\n    </div>\n  );\n}\n\n/**\n * Group rectangles, drawn behind the edges and nodes. A record is captioned by a header, a box on its top\n * border; a collapsed group is its header alone. A box lets the pointer through to the stage, so a click\n * inside it never lands on the box; only its caption, chevron and footer take the pointer. A windowed box\n * takes the wheel too, to scroll its members.\n */\nexport function GraphDiagramGroupBoxes({ boxes, groups, starts, onScroll, onGroupToggle, standIns, selectedId, onNodeSelect }: GraphDiagramGroupBoxesProps) {\n  const entries = new Map(groups?.map((group) => [group.id, group]));\n  return (\n    <>\n      {boxes.map((box) => {\n        const group = entries.get(box.group);\n        const name = groupName(group, box.group);\n        const caption = group ? group.label : box.group;\n        const chevron = group && group.collapsed !== undefined && onGroupToggle ? <Chevron group={group} name={name} onToggle={() => onGroupToggle(box.group)} /> : null;\n        const standIn = box.collapsed ? standIns.get(box.group) : undefined;\n        const select = standIn !== undefined && onNodeSelect ? { name, selected: selectedId === standIn, onSelect: () => onNodeSelect(standIn) } : undefined;\n        return (\n          <div\n            key={box.id}\n            data-graph-group={box.id}\n            data-graph-group-variant={box.record ? \"record\" : \"box\"}\n            {...(box.collapsed ? { \"data-graph-group-collapsed\": \"\" } : {})}\n            {...(box.window ? { \"data-graph-window\": box.id } : {})}\n            className={cn(\n              \"absolute border border-border\",\n              box.window ? \"pointer-events-auto\" : \"pointer-events-none\",\n              box.record || box.collapsed ? \"overflow-hidden rounded-md bg-card shadow-sm\" : \"rounded-xl bg-muted/30\",\n              !box.record && \"border-dashed\",\n            )}\n            style={{ left: box.x, top: box.y, width: box.width, height: box.height }}\n          >\n            {box.record || box.collapsed ? (\n              <Header box={box} caption={caption} title={group?.title} chevron={chevron} aside={group?.aside} select={select} />\n            ) : (\n              <span className=\"pointer-events-auto absolute left-2 top-0 flex max-w-[calc(100%-1rem)] -translate-y-1/2 items-center gap-0.5 rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground\">\n                {chevron}\n                <span title={group?.title} className=\"pointer-events-auto min-w-0 truncate\">{caption}</span>\n              </span>\n            )}\n            {box.window && <WindowFooter box={box} rows={box.window} start={starts[box.id] ?? 0} name={name} onScroll={(rows) => onScroll(box.id, rows)} />}\n          </div>\n        );\n      })}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}