@flanksource/clicky-ui 0.3.43 → 0.3.45

package/dist/data/call-graph/CallGraph.js

@@ -0,0 +1,250 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Button } from "../../components/button.js";
+import { cn } from "../../lib/utils.js";
+import { GraphDiagram } from "../GraphDiagram.js";
+import { matchesExclude } from "./call-graph-exclude.js";
+import { CALL_GRAPH_MAX_DEPTH, CALL_GRAPH_DEFAULT_DEPTH, visibleGraph, DEFAULT_EDGE_LABELS, toDiagram, requireNode, columnGap, expansionDirection, mergeGraph } from "./call-graph-model.js";
+import { UIR_CALL_GRAPH_VOCABULARY } from "./call-graph-vocabulary.js";
+import { GroupCaption, EdgeTypeGlyph, NodeGlyphIcon } from "./CallGraphGlyphs.js";
+import { EdgeSites, NodeDetails, Legend } from "./CallGraphParts.js";
+import { CallGraphToolbar } from "./CallGraphToolbar.js";
+import { CALL_GRAPH_ACCESS } from "./types.js";
+import { useHeld, useGraphLoad, useSiteGuards, errorMessage } from "./use-call-graph.js";
+const NODE_WIDTH = 188;
+const NODE_HEIGHT = 32;
+const COMPACT_NODE_HEIGHT = 22;
+const ROW_GAP = 14;
+const READABLE_SCALE = 0.6;
+const OPTIONS = { truncateAt: 32, grouped: true };
+function Notice({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children }) });
+}
+function Alert({ message }) {
+  if (!message) return null;
+  return /* @__PURE__ */ jsx("div", { role: "alert", className: "whitespace-pre-wrap rounded-md border border-destructive p-3 text-sm text-destructive", children: message });
+}
+const ACCESS_WORDS = { call: "Calls", read: "Reads", write: "Writes" };
+function accessWords(access) {
+  return access.map((type) => ACCESS_WORDS[type]).join(" and ");
+}
+function action(href, onSelect) {
+  if (href === void 0 && onSelect === void 0) return void 0;
+  return { ...href !== void 0 ? { href } : {}, ...onSelect ? { onSelect } : {} };
+}
+function CallGraph(props) {
+  var _a, _b;
+  const { root, fetchGraph, vocabulary = UIR_CALL_GRAPH_VOCABULARY, maxDepth = CALL_GRAPH_MAX_DEPTH } = props;
+  const labels = { ...DEFAULT_EDGE_LABELS, ...props.edgeLabels };
+  const [direction, setDirection] = useHeld(props.direction ?? "both", props.onDirectionChange);
+  const [depth, setDepth] = useHeld(props.depth ?? CALL_GRAPH_DEFAULT_DEPTH, props.onDepthChange);
+  const [exclude, setExclude] = useHeld(props.exclude, props.onExcludeChange);
+  const [access, setAccess] = useHeld(props.access ?? [...CALL_GRAPH_ACCESS], props.onAccessChange);
+  const [columns, setColumns] = useHeld(props.columns ?? false, props.onColumnsChange);
+  if (access.length === 0) throw new Error("call graph: access must name at least one of call, read and write");
+  const [ownSelection, setOwnSelection] = useState();
+  const request = root === void 0 ? void 0 : { root, direction, depth, exclude, access, columns, purpose: "load" };
+  const key = `call-graph:${JSON.stringify([request ?? null, props.fetchKey ?? null])}`;
+  const load = useGraphLoad(fetchGraph, request, key);
+  const [expanded, setExpanded] = useState();
+  const [expanding, setExpanding] = useState();
+  const pendingExpansion = useRef(void 0);
+  const activeKey = useRef(key);
+  activeKey.current = key;
+  useEffect(() => {
+    setExpanding((current) => (current == null ? void 0 : current.request.key) === key && !current.request.controller.signal.aborted ? current : void 0);
+    return () => {
+      var _a2;
+      if (((_a2 = pendingExpansion.current) == null ? void 0 : _a2.key) === key) {
+        pendingExpansion.current.controller.abort();
+        pendingExpansion.current = void 0;
+      }
+    };
+  }, [key]);
+  const [opening, setOpening] = useState({ nonce: 0, fit: false });
+  const fresh = useMemo(
+    () => load.fresh && ((expanded == null ? void 0 : expanded.key) === key ? expanded : { key, graph: load.fresh, revealed: [] }),
+    [load.fresh, expanded, key]
+  );
+  const [last, setLast] = useState();
+  if (fresh && fresh !== last) setLast(fresh);
+  const shown = root === void 0 ? void 0 : fresh ?? last;
+  const graph = shown == null ? void 0 : shown.graph;
+  const visible = useMemo(() => shown && visibleGraph(shown.graph, { direction, depth, revealed: shown.revealed }), [shown, direction, depth]);
+  const glyphs = useMemo(() => ({
+    node: (glyph, words) => /* @__PURE__ */ jsx(NodeGlyphIcon, { vocabulary, glyph, title: words }),
+    edge: (type) => type === "call" ? void 0 : /* @__PURE__ */ jsx(EdgeTypeGlyph, { type, title: labels[type] }),
+    group: (caption) => /* @__PURE__ */ jsx(GroupCaption, { icon: vocabulary.group.icon, caption })
+  }), [vocabulary, labels.dispatch, labels.read, labels.write]);
+  const guardLabel = props.guardLabel ?? "innermost";
+  const diagram = useMemo(
+    () => graph && visible && toDiagram({ graph, visible, direction, options: { ...OPTIONS, guardLabel }, glyphs, vocabulary, edgeLabels: labels }),
+    [graph, visible, direction, guardLabel, glyphs, vocabulary, labels.call, labels.dispatch, labels.read, labels.write]
+  );
+  const rootId = graph == null ? void 0 : graph.roots[0];
+  const selection = props.onSelectedChange ? props.selected : (ownSelection == null ? void 0 : ownSelection.key) === (shown == null ? void 0 : shown.key) ? ownSelection == null ? void 0 : ownSelection.selected : void 0;
+  const select = (next) => {
+    if (props.onSelectedChange) props.onSelectedChange(next);
+    else setOwnSelection(next && shown ? { key: shown.key, selected: next } : void 0);
+  };
+  const openAction = (node, drawn) => {
+    var _a2;
+    const { onOpenNode, canOpenNode } = props;
+    const accepted = onOpenNode && ((canOpenNode == null ? void 0 : canOpenNode(node, drawn)) ?? true) ? () => onOpenNode(node, drawn) : void 0;
+    return action((_a2 = props.nodeHref) == null ? void 0 : _a2.call(props, node, drawn), accepted);
+  };
+  const selectedNode = (selection == null ? void 0 : selection.kind) === "node" ? visible == null ? void 0 : visible.nodes.find((node) => node.id === selection.id) : void 0;
+  const selectedEdge = (selection == null ? void 0 : selection.kind) === "edge" ? visible == null ? void 0 : visible.edges.find((edge) => edge.id === selection.id) : void 0;
+  const guards = useSiteGuards(props.loadSiteGuards, shown == null ? void 0 : shown.key, selectedEdge, graph);
+  const expansion = (expanding == null ? void 0 : expanding.request.key) === key ? expanding : void 0;
+  const expand = async (drawn, id) => {
+    var _a2, _b2;
+    if (drawn.key !== activeKey.current) return;
+    if (((_a2 = pendingExpansion.current) == null ? void 0 : _a2.key) === drawn.key && pendingExpansion.current.nodeId === id) return;
+    (_b2 = pendingExpansion.current) == null ? void 0 : _b2.controller.abort();
+    const node = requireNode(drawn.graph, id);
+    const request2 = { key: drawn.key, nodeId: id, label: node.label, controller: new AbortController() };
+    pendingExpansion.current = request2;
+    setExpanding({ request: request2 });
+    try {
+      const data = await fetchGraph({
+        root: id,
+        direction: expansionDirection(node),
+        depth: 1,
+        exclude,
+        access,
+        columns,
+        purpose: "expand",
+        signal: request2.controller.signal
+      });
+      if (request2.controller.signal.aborted || activeKey.current !== drawn.key || pendingExpansion.current !== request2) return;
+      setExpanded((held) => {
+        if (request2.controller.signal.aborted || activeKey.current !== drawn.key) return held;
+        const base = (held == null ? void 0 : held.key) === drawn.key ? held : drawn;
+        return { key: drawn.key, graph: mergeGraph(base.graph, data), revealed: [...base.revealed, ...data.nodes.map((entry) => entry.id)] };
+      });
+      setExpanding((current) => (current == null ? void 0 : current.request) === request2 ? void 0 : current);
+    } catch (error) {
+      if (request2.controller.signal.aborted || activeKey.current !== drawn.key || pendingExpansion.current !== request2) return;
+      setExpanding((current) => (current == null ? void 0 : current.request) === request2 ? { request: request2, error: `Cannot expand ${node.label}: ${errorMessage(error)}` } : current);
+    } finally {
+      if (pendingExpansion.current === request2) pendingExpansion.current = void 0;
+    }
+  };
+  const groups = graph && ((_a = props.groupFacts) == null ? void 0 : _a.call(props, graph));
+  const effectiveExclude = exclude ?? (graph && props.defaultExclude ? props.defaultExclude(graph) : []);
+  const { onPinnedChange } = props;
+  const toolbar = /* @__PURE__ */ jsx(
+    CallGraphToolbar,
+    {
+      direction,
+      depth,
+      maxDepth,
+      omitted: graph == null ? void 0 : graph.omitted,
+      end: props.toolbarEnd,
+      vocabulary,
+      ...onPinnedChange ? { pin: { pinned: props.pinned ?? false, canPin: rootId !== void 0, onPin: (pinned) => onPinnedChange(pinned, rootId) } } : {},
+      ...groups ? { exclusions: {
+        exclude: effectiveExclude,
+        groups,
+        matches: props.excludeMatcher ?? matchesExclude,
+        busy: load.loading,
+        vocabulary,
+        onExclude: (patterns) => setExclude(patterns),
+        onDefaults: () => setExclude(void 0)
+      } } : {},
+      ...props.dataAccess ? { data: { access, onAccess: setAccess, columns, onColumns: setColumns } } : {},
+      onDirection: setDirection,
+      onDepth: setDepth,
+      onFit: () => setOpening({ nonce: opening.nonce + 1, fit: true }),
+      onReset: () => setOpening({ nonce: opening.nonce + 1, fit: false })
+    }
+  );
+  const frame = cn("flex h-full min-h-0 flex-col gap-2 p-2", props.className);
+  if (root === void 0) {
+    return /* @__PURE__ */ jsxs("div", { className: frame, children: [
+      toolbar,
+      /* @__PURE__ */ jsx(Notice, { children: props.emptyMessage ?? "Select a node to draw its call graph." })
+    ] });
+  }
+  const loadError = load.error && `Cannot draw the call graph: ${load.error}`;
+  return /* @__PURE__ */ jsxs("div", { className: frame, "aria-busy": load.loading, children: [
+    toolbar,
+    /* @__PURE__ */ jsx(Alert, { message: loadError }),
+    graph && ((_b = props.renderHeader) == null ? void 0 : _b.call(props, graph)),
+    !shown && load.loading && /* @__PURE__ */ jsx(Notice, { children: "Loading call graph…" }),
+    graph && !rootId && /* @__PURE__ */ jsx(Notice, { children: "The root resolved to no node in this scope." }),
+    graph && rootId && graph.edges.length === 0 && access.length < CALL_GRAPH_ACCESS.length && /* @__PURE__ */ jsx(Notice, { children: `Nothing is reachable with ${accessWords(access)} only.` }),
+    graph && rootId && graph.edges.length > 0 && !selectedEdge && !selectedNode && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Select an edge to list its sites, or a node to see its details." }),
+    shown && graph && rootId && diagram && /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("relative min-h-64 min-w-0 flex-1 rounded-lg border border-border bg-background", load.loading && "opacity-60"), children: /* @__PURE__ */ jsx(
+        GraphDiagram,
+        {
+          nodes: diagram.nodes,
+          edges: diagram.edges,
+          groups: diagram.groups,
+          layout: "columns",
+          zoomable: true,
+          wheelZoom: "zoom",
+          edgeFocus: "auto",
+          focusId: rootId,
+          ...opening.fit ? {} : { fitMinScale: READABLE_SCALE },
+          nodeWidth: NODE_WIDTH,
+          nodeHeight: NODE_HEIGHT,
+          compactNodeHeight: COMPACT_NODE_HEIGHT,
+          columnGap: columnGap(diagram),
+          rowGap: ROW_GAP,
+          className: "h-full",
+          ariaLabel: `Call graph of ${requireNode(graph, rootId).label}`,
+          onNodeSelect: (id) => select({ kind: "node", id }),
+          onEdgeSelect: (id) => select({ kind: "edge", id }),
+          ...fresh ? { onNodeExpand: (id) => void expand(fresh, id) } : {},
+          ...selectedNode ? { selectedId: selectedNode.id } : {},
+          ...selectedEdge ? { selectedEdgeId: selectedEdge.id } : {}
+        },
+        `${shown.key}:${opening.nonce}`
+      ) }),
+      (selectedEdge || selectedNode || expansion) && /* @__PURE__ */ jsxs("aside", { className: "w-80 max-w-[45%] shrink-0 overflow-y-auto rounded-lg border border-border bg-card p-3", "aria-label": "Selection", children: [
+        expansion && /* @__PURE__ */ jsx("p", { role: "status", className: "mb-2 text-xs text-muted-foreground", children: expansion.error ?? `Loading more around ${expansion.request.label}…` }),
+        (selectedEdge || selectedNode) && /* @__PURE__ */ jsx("div", { className: "mb-1 flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", "aria-label": "Close selection", onClick: () => select(void 0), children: "×" }) }),
+        selectedEdge ? /* @__PURE__ */ jsx(
+          EdgeSites,
+          {
+            edge: selectedEdge,
+            graph,
+            labels,
+            guards,
+            lazyGuards: props.loadSiteGuards !== void 0,
+            siteAction: (props.siteHref || props.onRevealSite) && vocabulary.hasSource(requireNode(graph, selectedEdge.from)) ? (site) => {
+              var _a2;
+              return action((_a2 = props.siteHref) == null ? void 0 : _a2.call(props, site, selectedEdge, graph), props.onRevealSite && (() => {
+                var _a3;
+                return (_a3 = props.onRevealSite) == null ? void 0 : _a3.call(props, site, selectedEdge, graph);
+              })) ?? {};
+            } : void 0
+          }
+        ) : selectedNode && /* @__PURE__ */ jsx(
+          NodeDetails,
+          {
+            node: selectedNode,
+            graph,
+            vocabulary,
+            isRoot: selectedNode.id === rootId,
+            openLabel: props.openLabel ?? "Open",
+            opens: props.nodeHref !== void 0 || props.onOpenNode !== void 0,
+            open: openAction(selectedNode, graph),
+            onFocus: props.onFocusNode && ((id) => {
+              var _a2;
+              return (_a2 = props.onFocusNode) == null ? void 0 : _a2.call(props, id, graph);
+            })
+          }
+        )
+      ] })
+    ] }),
+    graph && rootId && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(Legend, { graph, vocabulary, labels }) })
+  ] });
+}
+export {
+  CallGraph
+};
+//# sourceMappingURL=CallGraph.js.map

package/dist/data/call-graph/CallGraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallGraph.js","sources":["../../../src/data/call-graph/CallGraph.tsx"],"sourcesContent":["// A call graph around one root: fetched through the host, with `+N` expansions merged in, the call\n// sites of a selected edge (guards fetched on selection when the host's graph leaves them out) and the\n// details of a selected node. It knows no language: the host's vocabulary names and draws node kinds,\n// and the host's callbacks open nodes and sites.\nimport { useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { cn } from \"../../lib/utils\";\nimport { GraphDiagram } from \"../GraphDiagram\";\nimport { matchesExclude, type ExcludeMatcher } from \"./call-graph-exclude\";\nimport type { GuardLabel } from \"./call-graph-labels\";\nimport {\n  CALL_GRAPH_DEFAULT_DEPTH,\n  CALL_GRAPH_MAX_DEPTH,\n  columnGap,\n  DEFAULT_EDGE_LABELS,\n  expansionDirection,\n  mergeGraph,\n  requireNode,\n  toDiagram,\n  visibleGraph,\n  type DiagramGlyphs,\n  type DiagramOptions,\n} from \"./call-graph-model\";\nimport { UIR_CALL_GRAPH_VOCABULARY, type CallGraphVocabulary } from \"./call-graph-vocabulary\";\nimport { EdgeTypeGlyph, GroupCaption, NodeGlyphIcon } from \"./CallGraphGlyphs\";\nimport { EdgeSites, Legend, NodeDetails, type CallGraphAction } from \"./CallGraphParts\";\nimport { CallGraphToolbar } from \"./CallGraphToolbar\";\nimport {\n  CALL_GRAPH_ACCESS,\n  type CallGraph as Graph,\n  type CallGraphAccess,\n  type CallGraphDirection,\n  type CallGraphEdge,\n  type CallGraphEdgeLabels,\n  type CallGraphFetchParams,\n  type CallGraphGroupFact,\n  type CallGraphNode,\n  type CallGraphSelection,\n  type CallGraphSite,\n} from \"./types\";\nimport { errorMessage, useGraphLoad, useHeld, useSiteGuards, type GraphRequest } from \"./use-call-graph\";\n\nexport interface CallGraphProps<G extends Graph = Graph> {\n  /** What the graph is drawn around, in the host's terms. Undefined shows `emptyMessage`. */\n  root: string | undefined;\n  /** Loads the graph around `params.root`, and one hop around a node for its `+N`. */\n  fetchGraph: (params: CallGraphFetchParams) => Promise<G>;\n  /** What else `fetchGraph` reads, such as the host's scope: part of the request's key, so a change refetches. */\n  fetchKey?: string;\n  /** Pass `onDirectionChange` to control it; without one the component holds it, starting here. */\n  direction?: CallGraphDirection;\n  onDirectionChange?: (direction: CallGraphDirection) => void;\n  depth?: number;\n  onDepthChange?: (depth: number) => void;\n  /** The exclusion patterns; undefined takes the host's defaults. Controlled with `onExcludeChange`. */\n  exclude?: string[] | undefined;\n  onExcludeChange?: (exclude: string[] | undefined) => void;\n  selected?: CallGraphSelection | undefined;\n  onSelectedChange?: (selected: CallGraphSelection | undefined) => void;\n  /** The source reports reads and writes of data: shows the Access toggles and the Columns switch. */\n  dataAccess?: boolean;\n  /** The edge types the host follows, never empty; all three by default. Controlled with `onAccessChange`. */\n  access?: CallGraphAccess[];\n  onAccessChange?: (access: CallGraphAccess[]) => void;\n  /** Columns and fields as nodes of their own; collapsed into tables and entities by default. */\n  columns?: boolean;\n  onColumnsChange?: (columns: boolean) => void;\n  /** The groups the graph reached, drawn or excluded. Without it the graph offers no exclusions. */\n  groupFacts?: (graph: G) => CallGraphGroupFact[];\n  /** The patterns in force when `exclude` is undefined: the host's defaults, as its response reports them. */\n  defaultExclude?: (graph: G) => string[];\n  /** How a pattern matches a group, for a host with keywords of its own. */\n  excludeMatcher?: ExcludeMatcher;\n  /**\n   * Where a node opens. A node the vocabulary gives no source is never opened, and Open is disabled on\n   * a node with no href that `onOpenNode` does not accept.\n   */\n  nodeHref?: (node: CallGraphNode, graph: G) => string | undefined;\n  /** Opens a node; with `nodeHref` it handles a plain click on the link. */\n  onOpenNode?: (node: CallGraphNode, graph: G) => void;\n  /** Whether `onOpenNode` opens a node; every node by default. */\n  canOpenNode?: (node: CallGraphNode, graph: G) => boolean;\n  openLabel?: string;\n  /** Re-roots the graph on a node, by id: a drawn node the vocabulary can root, or the column behind a field. */\n  onFocusNode?: (nodeId: string, graph: G) => void;\n  /** Where a call site opens; a site opens only when its caller has a source. */\n  siteHref?: (site: CallGraphSite, edge: CallGraphEdge, graph: G) => string | undefined;\n  onRevealSite?: (site: CallGraphSite, edge: CallGraphEdge, graph: G) => void;\n  /** Fetches the guards of a selected edge's sites, for a host whose graph leaves them out. */\n  loadSiteGuards?: (edge: CallGraphEdge, graph: G, signal: AbortSignal) => Promise<CallGraphSite[]>;\n  edgeLabels?: Partial<CallGraphEdgeLabels>;\n  /** What a conditional edge's pill says of its guards; \"innermost\" by default. The edge's tooltip always lists them. */\n  guardLabel?: GuardLabel;\n  vocabulary?: CallGraphVocabulary;\n  /** Shows a Pin root toggle; the host keeps `root` while pinned. */\n  pinned?: boolean;\n  onPinnedChange?: (pinned: boolean, rootId: string | undefined) => void;\n  /** Host facts above the diagram, such as how the root was resolved. */\n  renderHeader?: (graph: G) => ReactNode;\n  toolbarEnd?: ReactNode;\n  emptyMessage?: ReactNode;\n  maxDepth?: number;\n  className?: string;\n}\n\ntype Held<G> = { key: string; graph: G; revealed: string[] };\ntype PendingExpansion = { key: string; nodeId: string; label: string; controller: AbortController };\n\nconst NODE_WIDTH = 188;\nconst NODE_HEIGHT = 32;\nconst COMPACT_NODE_HEIGHT = 22;\nconst ROW_GAP = 14;\n/** Node labels are 12px: at this scale they are 7.2px, the smallest that still reads. */\nconst READABLE_SCALE = 0.6;\nconst OPTIONS: Omit<DiagramOptions, \"guardLabel\"> = { truncateAt: 32, grouped: true };\n\nfunction Notice({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"flex h-full items-center justify-center p-6 text-center\">\n      <span className=\"text-sm text-muted-foreground\">{children}</span>\n    </div>\n  );\n}\n\nfunction Alert({ message }: { message: string | undefined }) {\n  if (!message) return null;\n  return <div role=\"alert\" className=\"whitespace-pre-wrap rounded-md border border-destructive p-3 text-sm text-destructive\">{message}</div>;\n}\n\nconst ACCESS_WORDS: Record<CallGraphAccess, string> = { call: \"Calls\", read: \"Reads\", write: \"Writes\" };\n\nfunction accessWords(access: readonly CallGraphAccess[]): string {\n  return access.map((type) => ACCESS_WORDS[type]).join(\" and \");\n}\n\nfunction action(href: string | undefined, onSelect: (() => void) | undefined): CallGraphAction | undefined {\n  if (href === undefined && onSelect === undefined) return undefined;\n  return { ...(href !== undefined ? { href } : {}), ...(onSelect ? { onSelect } : {}) };\n}\n\nexport function CallGraph<G extends Graph = Graph>(props: CallGraphProps<G>) {\n  const { root, fetchGraph, vocabulary = UIR_CALL_GRAPH_VOCABULARY, maxDepth = CALL_GRAPH_MAX_DEPTH } = props;\n  const labels: CallGraphEdgeLabels = { ...DEFAULT_EDGE_LABELS, ...props.edgeLabels };\n  const [direction, setDirection] = useHeld(props.direction ?? \"both\", props.onDirectionChange);\n  const [depth, setDepth] = useHeld(props.depth ?? CALL_GRAPH_DEFAULT_DEPTH, props.onDepthChange);\n  const [exclude, setExclude] = useHeld(props.exclude, props.onExcludeChange);\n  const [access, setAccess] = useHeld(props.access ?? [...CALL_GRAPH_ACCESS], props.onAccessChange);\n  const [columns, setColumns] = useHeld(props.columns ?? false, props.onColumnsChange);\n  if (access.length === 0) throw new Error(\"call graph: access must name at least one of call, read and write\");\n  const [ownSelection, setOwnSelection] = useState<{ key: string; selected: CallGraphSelection }>();\n\n  const request: GraphRequest | undefined = root === undefined ? undefined : { root, direction, depth, exclude, access, columns, purpose: \"load\" };\n  const key = `call-graph:${JSON.stringify([request ?? null, props.fetchKey ?? null])}`;\n  const load = useGraphLoad(fetchGraph, request, key);\n\n  const [expanded, setExpanded] = useState<Held<G>>();\n  const [expanding, setExpanding] = useState<{ request: PendingExpansion; error?: string }>();\n  const pendingExpansion = useRef<PendingExpansion | undefined>(undefined);\n  const activeKey = useRef(key);\n  activeKey.current = key;\n  useEffect(() => {\n    setExpanding((current) => current?.request.key === key && !current.request.controller.signal.aborted ? current : undefined);\n    return () => {\n      if (pendingExpansion.current?.key === key) {\n        pendingExpansion.current.controller.abort();\n        pendingExpansion.current = undefined;\n      }\n    };\n  }, [key]);\n  const [opening, setOpening] = useState({ nonce: 0, fit: false });\n  const fresh = useMemo<Held<G> | undefined>(\n    () => load.fresh && (expanded?.key === key ? expanded : { key, graph: load.fresh, revealed: [] }),\n    [load.fresh, expanded, key],\n  );\n  const [last, setLast] = useState<Held<G>>();\n  if (fresh && fresh !== last) setLast(fresh);\n  const shown = root === undefined ? undefined : (fresh ?? last);\n  const graph = shown?.graph;\n\n  const visible = useMemo(() => shown && visibleGraph(shown.graph, { direction, depth, revealed: shown.revealed }), [shown, direction, depth]);\n  const glyphs = useMemo<DiagramGlyphs>(() => ({\n    node: (glyph, words) => <NodeGlyphIcon vocabulary={vocabulary} glyph={glyph} title={words} />,\n    edge: (type) => (type === \"call\" ? undefined : <EdgeTypeGlyph type={type} title={labels[type]} />),\n    group: (caption) => <GroupCaption icon={vocabulary.group.icon} caption={caption} />,\n  }), [vocabulary, labels.dispatch, labels.read, labels.write]);\n  const guardLabel = props.guardLabel ?? \"innermost\";\n  const diagram = useMemo(\n    () => graph && visible && toDiagram({ graph, visible, direction, options: { ...OPTIONS, guardLabel }, glyphs, vocabulary, edgeLabels: labels }),\n    [graph, visible, direction, guardLabel, glyphs, vocabulary, labels.call, labels.dispatch, labels.read, labels.write],\n  );\n\n  const rootId = graph?.roots[0];\n  const selection = props.onSelectedChange ? props.selected : ownSelection?.key === shown?.key ? ownSelection?.selected : undefined;\n  const select = (next: CallGraphSelection | undefined) => {\n    if (props.onSelectedChange) props.onSelectedChange(next);\n    else setOwnSelection(next && shown ? { key: shown.key, selected: next } : undefined);\n  };\n  const openAction = (node: CallGraphNode, drawn: G) => {\n    const { onOpenNode, canOpenNode } = props;\n    const accepted = onOpenNode && (canOpenNode?.(node, drawn) ?? true) ? () => onOpenNode(node, drawn) : undefined;\n    return action(props.nodeHref?.(node, drawn), accepted);\n  };\n  const selectedNode = selection?.kind === \"node\" ? visible?.nodes.find((node) => node.id === selection.id) : undefined;\n  const selectedEdge = selection?.kind === \"edge\" ? visible?.edges.find((edge) => edge.id === selection.id) : undefined;\n  const guards = useSiteGuards(props.loadSiteGuards, shown?.key, selectedEdge, graph);\n  const expansion = expanding?.request.key === key ? expanding : undefined;\n\n  // A `+N` loads one more hop on the node's outer side and merges it into the graph this request drew.\n  const expand = async (drawn: Held<G>, id: string) => {\n    if (drawn.key !== activeKey.current) return;\n    if (pendingExpansion.current?.key === drawn.key && pendingExpansion.current.nodeId === id) return;\n    pendingExpansion.current?.controller.abort();\n    const node = requireNode(drawn.graph, id);\n    const request: PendingExpansion = { key: drawn.key, nodeId: id, label: node.label, controller: new AbortController() };\n    pendingExpansion.current = request;\n    setExpanding({ request });\n    try {\n      const data = await fetchGraph({\n        root: id, direction: expansionDirection(node), depth: 1, exclude, access, columns, purpose: \"expand\", signal: request.controller.signal,\n      });\n      if (request.controller.signal.aborted || activeKey.current !== drawn.key || pendingExpansion.current !== request) return;\n      setExpanded((held) => {\n        if (request.controller.signal.aborted || activeKey.current !== drawn.key) return held;\n        const base = held?.key === drawn.key ? held : drawn;\n        return { key: drawn.key, graph: mergeGraph(base.graph, data), revealed: [...base.revealed, ...data.nodes.map((entry) => entry.id)] };\n      });\n      setExpanding((current) => current?.request === request ? undefined : current);\n    } catch (error) {\n      if (request.controller.signal.aborted || activeKey.current !== drawn.key || pendingExpansion.current !== request) return;\n      setExpanding((current) => current?.request === request\n        ? { request, error: `Cannot expand ${node.label}: ${errorMessage(error)}` } : current);\n    } finally {\n      if (pendingExpansion.current === request) pendingExpansion.current = undefined;\n    }\n  };\n\n  const groups = graph && props.groupFacts?.(graph);\n  const effectiveExclude = exclude ?? (graph && props.defaultExclude ? props.defaultExclude(graph) : []);\n  const { onPinnedChange } = props;\n  const toolbar = (\n    <CallGraphToolbar direction={direction} depth={depth} maxDepth={maxDepth} omitted={graph?.omitted} end={props.toolbarEnd} vocabulary={vocabulary}\n      {...(onPinnedChange ? { pin: { pinned: props.pinned ?? false, canPin: rootId !== undefined, onPin: (pinned: boolean) => onPinnedChange(pinned, rootId) } } : {})}\n      {...(groups ? { exclusions: { exclude: effectiveExclude, groups, matches: props.excludeMatcher ?? matchesExclude, busy: load.loading, vocabulary,\n        onExclude: (patterns: string[]) => setExclude(patterns), onDefaults: () => setExclude(undefined) } } : {})}\n      {...(props.dataAccess ? { data: { access, onAccess: setAccess, columns, onColumns: setColumns } } : {})}\n      onDirection={setDirection} onDepth={setDepth}\n      onFit={() => setOpening({ nonce: opening.nonce + 1, fit: true })} onReset={() => setOpening({ nonce: opening.nonce + 1, fit: false })} />\n  );\n\n  const frame = cn(\"flex h-full min-h-0 flex-col gap-2 p-2\", props.className);\n  if (root === undefined) {\n    return <div className={frame}>{toolbar}<Notice>{props.emptyMessage ?? \"Select a node to draw its call graph.\"}</Notice></div>;\n  }\n  const loadError = load.error && `Cannot draw the call graph: ${load.error}`;\n  return (\n    <div className={frame} aria-busy={load.loading}>\n      {toolbar}\n      <Alert message={loadError} />\n      {graph && props.renderHeader?.(graph)}\n      {!shown && load.loading && <Notice>Loading call graph…</Notice>}\n      {graph && !rootId && <Notice>The root resolved to no node in this scope.</Notice>}\n      {graph && rootId && graph.edges.length === 0 && access.length < CALL_GRAPH_ACCESS.length && (\n        <Notice>{`Nothing is reachable with ${accessWords(access)} only.`}</Notice>\n      )}\n      {graph && rootId && graph.edges.length > 0 && !selectedEdge && !selectedNode && (\n        <p className=\"text-xs text-muted-foreground\">Select an edge to list its sites, or a node to see its details.</p>\n      )}\n      {shown && graph && rootId && diagram && (\n        <div className=\"flex min-h-0 flex-1 gap-3\">\n          <div className={cn(\"relative min-h-64 min-w-0 flex-1 rounded-lg border border-border bg-background\", load.loading && \"opacity-60\")}>\n            <GraphDiagram key={`${shown.key}:${opening.nonce}`} nodes={diagram.nodes} edges={diagram.edges} groups={diagram.groups} layout=\"columns\" zoomable wheelZoom=\"zoom\" edgeFocus=\"auto\"\n              focusId={rootId} {...(opening.fit ? {} : { fitMinScale: READABLE_SCALE })} nodeWidth={NODE_WIDTH} nodeHeight={NODE_HEIGHT} compactNodeHeight={COMPACT_NODE_HEIGHT} columnGap={columnGap(diagram)} rowGap={ROW_GAP}\n              className=\"h-full\" ariaLabel={`Call graph of ${requireNode(graph, rootId).label}`}\n              onNodeSelect={(id: string) => select({ kind: \"node\", id })} onEdgeSelect={(id: string) => select({ kind: \"edge\", id })}\n              {...(fresh ? { onNodeExpand: (id: string) => void expand(fresh, id) } : {})}\n              {...(selectedNode ? { selectedId: selectedNode.id } : {})} {...(selectedEdge ? { selectedEdgeId: selectedEdge.id } : {})} />\n          </div>\n          {(selectedEdge || selectedNode || expansion) && (\n            <aside className=\"w-80 max-w-[45%] shrink-0 overflow-y-auto rounded-lg border border-border bg-card p-3\" aria-label=\"Selection\">\n              {expansion && <p role=\"status\" className=\"mb-2 text-xs text-muted-foreground\">{expansion.error ?? `Loading more around ${expansion.request.label}…`}</p>}\n              {(selectedEdge || selectedNode) && (\n                <div className=\"mb-1 flex justify-end\">\n                  <Button type=\"button\" size=\"sm\" variant=\"ghost\" aria-label=\"Close selection\" onClick={() => select(undefined)}>×</Button>\n                </div>\n              )}\n              {selectedEdge ? (\n                <EdgeSites edge={selectedEdge} graph={graph} labels={labels} guards={guards} lazyGuards={props.loadSiteGuards !== undefined}\n                  siteAction={(props.siteHref || props.onRevealSite) && vocabulary.hasSource(requireNode(graph, selectedEdge.from))\n                    ? (site) => action(props.siteHref?.(site, selectedEdge, graph), props.onRevealSite && (() => props.onRevealSite?.(site, selectedEdge, graph))) ?? {}\n                    : undefined} />\n              ) : selectedNode && (\n                <NodeDetails node={selectedNode} graph={graph} vocabulary={vocabulary} isRoot={selectedNode.id === rootId} openLabel={props.openLabel ?? \"Open\"}\n                  opens={props.nodeHref !== undefined || props.onOpenNode !== undefined} open={openAction(selectedNode, graph)}\n                  onFocus={props.onFocusNode && ((id: string) => props.onFocusNode?.(id, graph))} />\n              )}\n            </aside>\n          )}\n        </div>\n      )}\n      {graph && rootId && <div className=\"shrink-0\"><Legend graph={graph} vocabulary={vocabulary} labels={labels} /></div>}\n    </div>\n  );\n}\n"],"names":["_a","_b","request"],"mappings":";;;;;;;;;;;;;AA4GA,MAAM,aAAa;AACnB,MAAM,cAAc;AACpB,MAAM,sBAAsB;AAC5B,MAAM,UAAU;AAEhB,MAAM,iBAAiB;AACvB,MAAM,UAA8C,EAAE,YAAY,IAAI,SAAS,KAAA;AAE/E,SAAS,OAAO,EAAE,YAAqC;AACrD,SACE,oBAAC,SAAI,WAAU,2DACb,8BAAC,QAAA,EAAK,WAAU,iCAAiC,SAAA,CAAS,EAAA,CAC5D;AAEJ;AAEA,SAAS,MAAM,EAAE,WAA4C;AAC3D,MAAI,CAAC,QAAS,QAAO;AACrB,6BAAQ,OAAA,EAAI,MAAK,SAAQ,WAAU,yFAAyF,UAAA,SAAQ;AACtI;AAEA,MAAM,eAAgD,EAAE,MAAM,SAAS,MAAM,SAAS,OAAO,SAAA;AAE7F,SAAS,YAAY,QAA4C;AAC/D,SAAO,OAAO,IAAI,CAAC,SAAS,aAAa,IAAI,CAAC,EAAE,KAAK,OAAO;AAC9D;AAEA,SAAS,OAAO,MAA0B,UAAiE;AACzG,MAAI,SAAS,UAAa,aAAa,OAAW,QAAO;AACzD,SAAO,EAAE,GAAI,SAAS,SAAY,EAAE,KAAA,IAAS,CAAA,GAAK,GAAI,WAAW,EAAE,SAAA,IAAa,CAAA,EAAC;AACnF;AAEO,SAAS,UAAmC,OAA0B;;AAC3E,QAAM,EAAE,MAAM,YAAY,aAAa,2BAA2B,WAAW,yBAAyB;AACtG,QAAM,SAA8B,EAAE,GAAG,qBAAqB,GAAG,MAAM,WAAA;AACvE,QAAM,CAAC,WAAW,YAAY,IAAI,QAAQ,MAAM,aAAa,QAAQ,MAAM,iBAAiB;AAC5F,QAAM,CAAC,OAAO,QAAQ,IAAI,QAAQ,MAAM,SAAS,0BAA0B,MAAM,aAAa;AAC9F,QAAM,CAAC,SAAS,UAAU,IAAI,QAAQ,MAAM,SAAS,MAAM,eAAe;AAC1E,QAAM,CAAC,QAAQ,SAAS,IAAI,QAAQ,MAAM,UAAU,CAAC,GAAG,iBAAiB,GAAG,MAAM,cAAc;AAChG,QAAM,CAAC,SAAS,UAAU,IAAI,QAAQ,MAAM,WAAW,OAAO,MAAM,eAAe;AACnF,MAAI,OAAO,WAAW,EAAG,OAAM,IAAI,MAAM,mEAAmE;AAC5G,QAAM,CAAC,cAAc,eAAe,IAAI,SAAA;AAExC,QAAM,UAAoC,SAAS,SAAY,SAAY,EAAE,MAAM,WAAW,OAAO,SAAS,QAAQ,SAAS,SAAS,OAAA;AACxI,QAAM,MAAM,cAAc,KAAK,UAAU,CAAC,WAAW,MAAM,MAAM,YAAY,IAAI,CAAC,CAAC;AACnF,QAAM,OAAO,aAAa,YAAY,SAAS,GAAG;AAElD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAA;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAA;AAClC,QAAM,mBAAmB,OAAqC,MAAS;AACvE,QAAM,YAAY,OAAO,GAAG;AAC5B,YAAU,UAAU;AACpB,YAAU,MAAM;AACd,iBAAa,CAAC,aAAY,mCAAS,QAAQ,SAAQ,OAAO,CAAC,QAAQ,QAAQ,WAAW,OAAO,UAAU,UAAU,MAAS;AAC1H,WAAO,MAAM;;AACX,YAAIA,MAAA,iBAAiB,YAAjB,gBAAAA,IAA0B,SAAQ,KAAK;AACzC,yBAAiB,QAAQ,WAAW,MAAA;AACpC,yBAAiB,UAAU;AAAA,MAC7B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,EAAE,OAAO,GAAG,KAAK,OAAO;AAC/D,QAAM,QAAQ;AAAA,IACZ,MAAM,KAAK,WAAU,qCAAU,SAAQ,MAAM,WAAW,EAAE,KAAK,OAAO,KAAK,OAAO,UAAU,CAAA,EAAC;AAAA,IAC7F,CAAC,KAAK,OAAO,UAAU,GAAG;AAAA,EAAA;AAE5B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAA;AACxB,MAAI,SAAS,UAAU,KAAM,SAAQ,KAAK;AAC1C,QAAM,QAAQ,SAAS,SAAY,SAAa,SAAS;AACzD,QAAM,QAAQ,+BAAO;AAErB,QAAM,UAAU,QAAQ,MAAM,SAAS,aAAa,MAAM,OAAO,EAAE,WAAW,OAAO,UAAU,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,KAAK,CAAC;AAC3I,QAAM,SAAS,QAAuB,OAAO;AAAA,IAC3C,MAAM,CAAC,OAAO,8BAAW,eAAA,EAAc,YAAwB,OAAc,OAAO,OAAO;AAAA,IAC3F,MAAM,CAAC,SAAU,SAAS,SAAS,SAAY,oBAAC,eAAA,EAAc,MAAY,OAAO,OAAO,IAAI,EAAA,CAAG;AAAA,IAC/F,OAAO,CAAC,YAAY,oBAAC,gBAAa,MAAM,WAAW,MAAM,MAAM,QAAA,CAAkB;AAAA,EAAA,IAC/E,CAAC,YAAY,OAAO,UAAU,OAAO,MAAM,OAAO,KAAK,CAAC;AAC5D,QAAM,aAAa,MAAM,cAAc;AACvC,QAAM,UAAU;AAAA,IACd,MAAM,SAAS,WAAW,UAAU,EAAE,OAAO,SAAS,WAAW,SAAS,EAAE,GAAG,SAAS,cAAc,QAAQ,YAAY,YAAY,QAAQ;AAAA,IAC9I,CAAC,OAAO,SAAS,WAAW,YAAY,QAAQ,YAAY,OAAO,MAAM,OAAO,UAAU,OAAO,MAAM,OAAO,KAAK;AAAA,EAAA;AAGrH,QAAM,SAAS,+BAAO,MAAM;AAC5B,QAAM,YAAY,MAAM,mBAAmB,MAAM,YAAW,6CAAc,UAAQ,+BAAO,OAAM,6CAAc,WAAW;AACxH,QAAM,SAAS,CAAC,SAAyC;AACvD,QAAI,MAAM,iBAAkB,OAAM,iBAAiB,IAAI;AAAA,QAClD,iBAAgB,QAAQ,QAAQ,EAAE,KAAK,MAAM,KAAK,UAAU,KAAA,IAAS,MAAS;AAAA,EACrF;AACA,QAAM,aAAa,CAAC,MAAqB,UAAa;;AACpD,UAAM,EAAE,YAAY,YAAA,IAAgB;AACpC,UAAM,WAAW,gBAAe,2CAAc,MAAM,WAAU,QAAQ,MAAM,WAAW,MAAM,KAAK,IAAI;AACtG,WAAO,QAAOA,MAAA,MAAM,aAAN,gBAAAA,IAAA,YAAiB,MAAM,QAAQ,QAAQ;AAAA,EACvD;AACA,QAAM,gBAAe,uCAAW,UAAS,SAAS,mCAAS,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,UAAU,MAAM;AAC5G,QAAM,gBAAe,uCAAW,UAAS,SAAS,mCAAS,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,UAAU,MAAM;AAC5G,QAAM,SAAS,cAAc,MAAM,gBAAgB,+BAAO,KAAK,cAAc,KAAK;AAClF,QAAM,aAAY,uCAAW,QAAQ,SAAQ,MAAM,YAAY;AAG/D,QAAM,SAAS,OAAO,OAAgB,OAAe;;AACnD,QAAI,MAAM,QAAQ,UAAU,QAAS;AACrC,UAAIA,MAAA,iBAAiB,YAAjB,gBAAAA,IAA0B,SAAQ,MAAM,OAAO,iBAAiB,QAAQ,WAAW,GAAI;AAC3F,KAAAC,MAAA,iBAAiB,YAAjB,gBAAAA,IAA0B,WAAW;AACrC,UAAM,OAAO,YAAY,MAAM,OAAO,EAAE;AACxC,UAAMC,WAA4B,EAAE,KAAK,MAAM,KAAK,QAAQ,IAAI,OAAO,KAAK,OAAO,YAAY,IAAI,kBAAgB;AACnH,qBAAiB,UAAUA;AAC3B,iBAAa,EAAE,SAAAA,UAAS;AACxB,QAAI;AACF,YAAM,OAAO,MAAM,WAAW;AAAA,QAC5B,MAAM;AAAA,QAAI,WAAW,mBAAmB,IAAI;AAAA,QAAG,OAAO;AAAA,QAAG;AAAA,QAAS;AAAA,QAAQ;AAAA,QAAS,SAAS;AAAA,QAAU,QAAQA,SAAQ,WAAW;AAAA,MAAA,CAClI;AACD,UAAIA,SAAQ,WAAW,OAAO,WAAW,UAAU,YAAY,MAAM,OAAO,iBAAiB,YAAYA,SAAS;AAClH,kBAAY,CAAC,SAAS;AACpB,YAAIA,SAAQ,WAAW,OAAO,WAAW,UAAU,YAAY,MAAM,IAAK,QAAO;AACjF,cAAM,QAAO,6BAAM,SAAQ,MAAM,MAAM,OAAO;AAC9C,eAAO,EAAE,KAAK,MAAM,KAAK,OAAO,WAAW,KAAK,OAAO,IAAI,GAAG,UAAU,CAAC,GAAG,KAAK,UAAU,GAAG,KAAK,MAAM,IAAI,CAAC,UAAU,MAAM,EAAE,CAAC,EAAA;AAAA,MACnI,CAAC;AACD,mBAAa,CAAC,aAAY,mCAAS,aAAYA,WAAU,SAAY,OAAO;AAAA,IAC9E,SAAS,OAAO;AACd,UAAIA,SAAQ,WAAW,OAAO,WAAW,UAAU,YAAY,MAAM,OAAO,iBAAiB,YAAYA,SAAS;AAClH,mBAAa,CAAC,aAAY,mCAAS,aAAYA,WAC3C,EAAE,SAAAA,UAAS,OAAO,iBAAiB,KAAK,KAAK,KAAK,aAAa,KAAK,CAAC,GAAA,IAAO,OAAO;AAAA,IACzF,UAAA;AACE,UAAI,iBAAiB,YAAYA,SAAS,kBAAiB,UAAU;AAAA,IACvE;AAAA,EACF;AAEA,QAAM,SAAS,WAAS,WAAM,eAAN,+BAAmB;AAC3C,QAAM,mBAAmB,YAAY,SAAS,MAAM,iBAAiB,MAAM,eAAe,KAAK,IAAI;AACnG,QAAM,EAAE,mBAAmB;AAC3B,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MAAiB;AAAA,MAAsB;AAAA,MAAc;AAAA,MAAoB,SAAS,+BAAO;AAAA,MAAS,KAAK,MAAM;AAAA,MAAY;AAAA,MACvH,GAAI,iBAAiB,EAAE,KAAK,EAAE,QAAQ,MAAM,UAAU,OAAO,QAAQ,WAAW,QAAW,OAAO,CAAC,WAAoB,eAAe,QAAQ,MAAM,EAAA,EAAE,IAAM,CAAA;AAAA,MAC5J,GAAI,SAAS,EAAE,YAAY;AAAA,QAAE,SAAS;AAAA,QAAkB;AAAA,QAAQ,SAAS,MAAM,kBAAkB;AAAA,QAAgB,MAAM,KAAK;AAAA,QAAS;AAAA,QACpI,WAAW,CAAC,aAAuB,WAAW,QAAQ;AAAA,QAAG,YAAY,MAAM,WAAW,MAAS;AAAA,MAAA,EAAE,IAAM,CAAA;AAAA,MACxG,GAAI,MAAM,aAAa,EAAE,MAAM,EAAE,QAAQ,UAAU,WAAW,SAAS,WAAW,WAAA,EAAW,IAAM,CAAA;AAAA,MACpG,aAAa;AAAA,MAAc,SAAS;AAAA,MACpC,OAAO,MAAM,WAAW,EAAE,OAAO,QAAQ,QAAQ,GAAG,KAAK,MAAM;AAAA,MAAG,SAAS,MAAM,WAAW,EAAE,OAAO,QAAQ,QAAQ,GAAG,KAAK,MAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGxI,QAAM,QAAQ,GAAG,0CAA0C,MAAM,SAAS;AAC1E,MAAI,SAAS,QAAW;AACtB,WAAO,qBAAC,OAAA,EAAI,WAAW,OAAQ,UAAA;AAAA,MAAA;AAAA,MAAQ,oBAAC,QAAA,EAAQ,UAAA,MAAM,gBAAgB,wCAAA,CAAwC;AAAA,IAAA,GAAS;AAAA,EACzH;AACA,QAAM,YAAY,KAAK,SAAS,+BAA+B,KAAK,KAAK;AACzE,8BACG,OAAA,EAAI,WAAW,OAAO,aAAW,KAAK,SACpC,UAAA;AAAA,IAAA;AAAA,IACD,oBAAC,OAAA,EAAM,SAAS,UAAA,CAAW;AAAA,IAC1B,WAAS,WAAM,iBAAN,+BAAqB;AAAA,IAC9B,CAAC,SAAS,KAAK,WAAW,oBAAC,UAAO,UAAA,uBAAmB;AAAA,IACrD,SAAS,CAAC,UAAU,oBAAC,UAAO,UAAA,+CAA2C;AAAA,IACvE,SAAS,UAAU,MAAM,MAAM,WAAW,KAAK,OAAO,SAAS,kBAAkB,8BAC/E,QAAA,EAAQ,UAAA,6BAA6B,YAAY,MAAM,CAAC,UAAS;AAAA,IAEnE,SAAS,UAAU,MAAM,MAAM,SAAS,KAAK,CAAC,gBAAgB,CAAC,gBAC9D,oBAAC,KAAA,EAAE,WAAU,iCAAgC,UAAA,mEAA+D;AAAA,IAE7G,SAAS,SAAS,UAAU,WAC3B,qBAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,MAAA,oBAAC,SAAI,WAAW,GAAG,kFAAkF,KAAK,WAAW,YAAY,GAC/H,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAAmD,OAAO,QAAQ;AAAA,UAAO,OAAO,QAAQ;AAAA,UAAO,QAAQ,QAAQ;AAAA,UAAQ,QAAO;AAAA,UAAU,UAAQ;AAAA,UAAC,WAAU;AAAA,UAAO,WAAU;AAAA,UAC3K,SAAS;AAAA,UAAS,GAAI,QAAQ,MAAM,CAAA,IAAK,EAAE,aAAa,eAAA;AAAA,UAAmB,WAAW;AAAA,UAAY,YAAY;AAAA,UAAa,mBAAmB;AAAA,UAAqB,WAAW,UAAU,OAAO;AAAA,UAAG,QAAQ;AAAA,UAC1M,WAAU;AAAA,UAAS,WAAW,iBAAiB,YAAY,OAAO,MAAM,EAAE,KAAK;AAAA,UAC/E,cAAc,CAAC,OAAe,OAAO,EAAE,MAAM,QAAQ,IAAI;AAAA,UAAG,cAAc,CAAC,OAAe,OAAO,EAAE,MAAM,QAAQ,IAAI;AAAA,UACpH,GAAI,QAAQ,EAAE,cAAc,CAAC,OAAe,KAAK,OAAO,OAAO,EAAE,EAAA,IAAM,CAAA;AAAA,UACvE,GAAI,eAAe,EAAE,YAAY,aAAa,GAAA,IAAO,CAAA;AAAA,UAAM,GAAI,eAAe,EAAE,gBAAgB,aAAa,GAAA,IAAO,CAAA;AAAA,QAAC;AAAA,QALrG,GAAG,MAAM,GAAG,IAAI,QAAQ,KAAK;AAAA,MAAA,GAMlD;AAAA,OACE,gBAAgB,gBAAgB,cAChC,qBAAC,WAAM,WAAU,yFAAwF,cAAW,aACjH,UAAA;AAAA,QAAA,aAAa,oBAAC,KAAA,EAAE,MAAK,UAAS,WAAU,sCAAsC,UAAA,UAAU,SAAS,uBAAuB,UAAU,QAAQ,KAAK,KAAI;AAAA,SAClJ,gBAAgB,iBAChB,oBAAC,OAAA,EAAI,WAAU,yBACb,UAAA,oBAAC,QAAA,EAAO,MAAK,UAAS,MAAK,MAAK,SAAQ,SAAQ,cAAW,mBAAkB,SAAS,MAAM,OAAO,MAAS,GAAG,UAAA,IAAA,CAAC,EAAA,CAClH;AAAA,QAED,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YAAU,MAAM;AAAA,YAAc;AAAA,YAAc;AAAA,YAAgB;AAAA,YAAgB,YAAY,MAAM,mBAAmB;AAAA,YAChH,aAAa,MAAM,YAAY,MAAM,iBAAiB,WAAW,UAAU,YAAY,OAAO,aAAa,IAAI,CAAC,IAC5G,CAAC,SAAA;;AAAS,6BAAOF,MAAA,MAAM,aAAN,gBAAAA,IAAA,YAAiB,MAAM,cAAc,QAAQ,MAAM,iBAAiB,MAAA;;AAAM,wBAAAA,MAAA,MAAM,iBAAN,gBAAAA,IAAA,YAAqB,MAAM,cAAc;AAAA,gBAAO,KAAK,CAAA;AAAA,gBAChJ;AAAA,UAAA;AAAA,QAAA,IACJ,gBACF;AAAA,UAAC;AAAA,UAAA;AAAA,YAAY,MAAM;AAAA,YAAc;AAAA,YAAc;AAAA,YAAwB,QAAQ,aAAa,OAAO;AAAA,YAAQ,WAAW,MAAM,aAAa;AAAA,YACvI,OAAO,MAAM,aAAa,UAAa,MAAM,eAAe;AAAA,YAAW,MAAM,WAAW,cAAc,KAAK;AAAA,YAC3G,SAAS,MAAM,gBAAgB,CAAC;;AAAe,sBAAAA,MAAA,MAAM,gBAAN,gBAAAA,IAAA,YAAoB,IAAI;AAAA;AAAA,UAAK;AAAA,QAAA;AAAA,MAAI,EAAA,CAEtF;AAAA,IAAA,GAEJ;AAAA,IAED,SAAS,UAAU,oBAAC,OAAA,EAAI,WAAU,YAAW,UAAA,oBAAC,QAAA,EAAO,OAAc,YAAwB,OAAA,CAAgB,EAAA,CAAE;AAAA,EAAA,GAChH;AAEJ;"}

package/dist/data/call-graph/CallGraphGlyphs.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const useTheme = require("../../hooks/use-theme.cjs");
+const callGraphVocabulary = require("./call-graph-vocabulary.cjs");
+const UiWriteAccess = require("../../icons/components/UiWriteAccess.cjs");
+const UiReadAccess = require("../../icons/components/UiReadAccess.cjs");
+const UiShowToImplement = require("../../icons/components/UiShowToImplement.cjs");
+const UiArrowRight = require("../../icons/components/UiArrowRight.cjs");
+function Themed({ glyph, ...props }) {
+  const Icon = useTheme.useResolvedTheme() === "dark" && glyph.darkIcon ? glyph.darkIcon : glyph.icon;
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { ...props });
+}
+function GlyphIcon({ glyph, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Themed, { glyph, ...props });
+}
+function NodeGlyphIcon({ vocabulary, glyph, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Themed, { glyph: callGraphVocabulary.requireGlyph(vocabulary, glyph), ...props });
+}
+const EDGE_GLYPHS = {
+  call: { icon: UiArrowRight.UiArrowRight },
+  dispatch: { icon: UiShowToImplement.UiShowToImplement, darkIcon: UiShowToImplement.UiShowToImplementDark },
+  read: { icon: UiReadAccess.UiReadAccess, darkIcon: UiReadAccess.UiReadAccessDark },
+  write: { icon: UiWriteAccess.UiWriteAccess, darkIcon: UiWriteAccess.UiWriteAccessDark }
+};
+function EdgeTypeGlyph({ type, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Themed, { glyph: EDGE_GLYPHS[type], ...props });
+}
+function GroupCaption({ icon: Icon, caption }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mr-1 inline-block align-[-0.15em]" }),
+    caption
+  ] });
+}
+exports.EdgeTypeGlyph = EdgeTypeGlyph;
+exports.GlyphIcon = GlyphIcon;
+exports.GroupCaption = GroupCaption;
+exports.NodeGlyphIcon = NodeGlyphIcon;
+//# sourceMappingURL=CallGraphGlyphs.cjs.map

package/dist/data/call-graph/CallGraphGlyphs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallGraphGlyphs.cjs","sources":["../../../src/data/call-graph/CallGraphGlyphs.tsx"],"sourcesContent":["// The icons the call graph uses in place of words. The vocabulary decides which glyph a node gets;\n// this file only draws it, picking a glyph's dark drawing in the dark theme.\nimport { useResolvedTheme } from \"../../hooks/use-theme\";\nimport {\n  UiArrowRight,\n  UiReadAccess,\n  UiReadAccessDark,\n  UiShowToImplement,\n  UiShowToImplementDark,\n  UiWriteAccess,\n  UiWriteAccessDark,\n  type IconComponent,\n  type IconProps,\n} from \"../../icons\";\nimport { requireGlyph, type CallGraphGlyph, type CallGraphVocabulary } from \"./call-graph-vocabulary\";\nimport type { CallGraphEdgeType } from \"./types\";\n\nfunction Themed({ glyph, ...props }: IconProps & { glyph: Pick<CallGraphGlyph, \"icon\" | \"darkIcon\"> }) {\n  const Icon = useResolvedTheme() === \"dark\" && glyph.darkIcon ? glyph.darkIcon : glyph.icon;\n  return <Icon {...props} />;\n}\n\nexport function GlyphIcon({ glyph, ...props }: IconProps & { glyph: CallGraphGlyph }) {\n  return <Themed glyph={glyph} {...props} />;\n}\n\nexport function NodeGlyphIcon({ vocabulary, glyph, ...props }: IconProps & { vocabulary: CallGraphVocabulary; glyph: string }) {\n  return <Themed glyph={requireGlyph(vocabulary, glyph)} {...props} />;\n}\n\n// Each edge type's icon: a plain call is the arrow the graph draws; dispatch reaches one of several\n// targets chosen at run time; a read and a write touch data.\nconst EDGE_GLYPHS: Record<CallGraphEdgeType, Pick<CallGraphGlyph, \"icon\" | \"darkIcon\">> = {\n  call: { icon: UiArrowRight },\n  dispatch: { icon: UiShowToImplement, darkIcon: UiShowToImplementDark },\n  read: { icon: UiReadAccess, darkIcon: UiReadAccessDark },\n  write: { icon: UiWriteAccess, darkIcon: UiWriteAccessDark },\n};\n\nexport function EdgeTypeGlyph({ type, ...props }: IconProps & { type: CallGraphEdgeType }) {\n  return <Themed glyph={EDGE_GLYPHS[type]} {...props} />;\n}\n\n/** A group box caption: the group icon, then the shortened label, kept inline so the caption still truncates. */\nexport function GroupCaption({ icon: Icon, caption }: { icon: IconComponent; caption: string }) {\n  return (\n    <>\n      <Icon className=\"mr-1 inline-block align-[-0.15em]\" />\n      {caption}\n    </>\n  );\n}\n"],"names":["useResolvedTheme","jsx","requireGlyph","UiArrowRight","UiShowToImplement","UiShowToImplementDark","UiReadAccess","UiReadAccessDark","UiWriteAccess","UiWriteAccessDark","jsxs","Fragment"],"mappings":";;;;;;;;;AAiBA,SAAS,OAAO,EAAE,OAAO,GAAG,SAA2E;AACrG,QAAM,OAAOA,gCAAuB,UAAU,MAAM,WAAW,MAAM,WAAW,MAAM;AACtF,SAAOC,+BAAC,MAAA,EAAM,GAAG,MAAA,CAAO;AAC1B;AAEO,SAAS,UAAU,EAAE,OAAO,GAAG,SAAgD;AACpF,SAAOA,2BAAAA,IAAC,QAAA,EAAO,OAAe,GAAG,MAAA,CAAO;AAC1C;AAEO,SAAS,cAAc,EAAE,YAAY,OAAO,GAAG,SAAyE;AAC7H,SAAOA,2BAAAA,IAAC,UAAO,OAAOC,oBAAAA,aAAa,YAAY,KAAK,GAAI,GAAG,OAAO;AACpE;AAIA,MAAM,cAAoF;AAAA,EACxF,MAAM,EAAE,MAAMC,0BAAA;AAAA,EACd,UAAU,EAAE,MAAMC,qCAAmB,UAAUC,kBAAAA,sBAAA;AAAA,EAC/C,MAAM,EAAE,MAAMC,2BAAc,UAAUC,aAAAA,iBAAA;AAAA,EACtC,OAAO,EAAE,MAAMC,cAAAA,eAAe,UAAUC,cAAAA,kBAAA;AAC1C;AAEO,SAAS,cAAc,EAAE,MAAM,GAAG,SAAkD;AACzF,wCAAQ,QAAA,EAAO,OAAO,YAAY,IAAI,GAAI,GAAG,OAAO;AACtD;AAGO,SAAS,aAAa,EAAE,MAAM,MAAM,WAAqD;AAC9F,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAV,2BAAAA,IAAC,MAAA,EAAK,WAAU,oCAAA,CAAoC;AAAA,IACnD;AAAA,EAAA,GACH;AAEJ;;;;;"}

package/dist/data/call-graph/CallGraphGlyphs.d.ts

@@ -0,0 +1,19 @@
+import { IconComponent, IconProps } from '../../icons.js';
+import { CallGraphGlyph, CallGraphVocabulary } from './call-graph-vocabulary.js';
+import { CallGraphEdgeType } from './types.js';
+export declare function GlyphIcon({ glyph, ...props }: IconProps & {
+    glyph: CallGraphGlyph;
+}): import("react").JSX.Element;
+export declare function NodeGlyphIcon({ vocabulary, glyph, ...props }: IconProps & {
+    vocabulary: CallGraphVocabulary;
+    glyph: string;
+}): import("react").JSX.Element;
+export declare function EdgeTypeGlyph({ type, ...props }: IconProps & {
+    type: CallGraphEdgeType;
+}): import("react").JSX.Element;
+/** A group box caption: the group icon, then the shortened label, kept inline so the caption still truncates. */
+export declare function GroupCaption({ icon: Icon, caption }: {
+    icon: IconComponent;
+    caption: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=CallGraphGlyphs.d.ts.map

package/dist/data/call-graph/CallGraphGlyphs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallGraphGlyphs.d.ts","sourceRoot":"","sources":["../../../src/data/call-graph/CallGraphGlyphs.tsx"],"names":[],"mappings":"AAGA,OAAO,EAQL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,aAAa,CAAC;AACrB,OAAO,EAAgB,KAAK,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACtG,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAOjD,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,GAAG;IAAE,KAAK,EAAE,cAAc,CAAA;CAAE,+BAEnF;AAED,wBAAgB,aAAa,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,GAAG;IAAE,UAAU,EAAE,mBAAmB,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,+BAE5H;AAWD,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,GAAG;IAAE,IAAI,EAAE,iBAAiB,CAAA;CAAE,+BAExF;AAED,iHAAiH;AACjH,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,+BAO7F"}

package/dist/data/call-graph/CallGraphGlyphs.js

@@ -0,0 +1,39 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useResolvedTheme } from "../../hooks/use-theme.js";
+import { requireGlyph } from "./call-graph-vocabulary.js";
+import { UiWriteAccessDark, UiWriteAccess } from "../../icons/components/UiWriteAccess.js";
+import { UiReadAccessDark, UiReadAccess } from "../../icons/components/UiReadAccess.js";
+import { UiShowToImplementDark, UiShowToImplement } from "../../icons/components/UiShowToImplement.js";
+import { UiArrowRight } from "../../icons/components/UiArrowRight.js";
+function Themed({ glyph, ...props }) {
+  const Icon = useResolvedTheme() === "dark" && glyph.darkIcon ? glyph.darkIcon : glyph.icon;
+  return /* @__PURE__ */ jsx(Icon, { ...props });
+}
+function GlyphIcon({ glyph, ...props }) {
+  return /* @__PURE__ */ jsx(Themed, { glyph, ...props });
+}
+function NodeGlyphIcon({ vocabulary, glyph, ...props }) {
+  return /* @__PURE__ */ jsx(Themed, { glyph: requireGlyph(vocabulary, glyph), ...props });
+}
+const EDGE_GLYPHS = {
+  call: { icon: UiArrowRight },
+  dispatch: { icon: UiShowToImplement, darkIcon: UiShowToImplementDark },
+  read: { icon: UiReadAccess, darkIcon: UiReadAccessDark },
+  write: { icon: UiWriteAccess, darkIcon: UiWriteAccessDark }
+};
+function EdgeTypeGlyph({ type, ...props }) {
+  return /* @__PURE__ */ jsx(Themed, { glyph: EDGE_GLYPHS[type], ...props });
+}
+function GroupCaption({ icon: Icon, caption }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Icon, { className: "mr-1 inline-block align-[-0.15em]" }),
+    caption
+  ] });
+}
+export {
+  EdgeTypeGlyph,
+  GlyphIcon,
+  GroupCaption,
+  NodeGlyphIcon
+};
+//# sourceMappingURL=CallGraphGlyphs.js.map

package/dist/data/call-graph/CallGraphGlyphs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallGraphGlyphs.js","sources":["../../../src/data/call-graph/CallGraphGlyphs.tsx"],"sourcesContent":["// The icons the call graph uses in place of words. The vocabulary decides which glyph a node gets;\n// this file only draws it, picking a glyph's dark drawing in the dark theme.\nimport { useResolvedTheme } from \"../../hooks/use-theme\";\nimport {\n  UiArrowRight,\n  UiReadAccess,\n  UiReadAccessDark,\n  UiShowToImplement,\n  UiShowToImplementDark,\n  UiWriteAccess,\n  UiWriteAccessDark,\n  type IconComponent,\n  type IconProps,\n} from \"../../icons\";\nimport { requireGlyph, type CallGraphGlyph, type CallGraphVocabulary } from \"./call-graph-vocabulary\";\nimport type { CallGraphEdgeType } from \"./types\";\n\nfunction Themed({ glyph, ...props }: IconProps & { glyph: Pick<CallGraphGlyph, \"icon\" | \"darkIcon\"> }) {\n  const Icon = useResolvedTheme() === \"dark\" && glyph.darkIcon ? glyph.darkIcon : glyph.icon;\n  return <Icon {...props} />;\n}\n\nexport function GlyphIcon({ glyph, ...props }: IconProps & { glyph: CallGraphGlyph }) {\n  return <Themed glyph={glyph} {...props} />;\n}\n\nexport function NodeGlyphIcon({ vocabulary, glyph, ...props }: IconProps & { vocabulary: CallGraphVocabulary; glyph: string }) {\n  return <Themed glyph={requireGlyph(vocabulary, glyph)} {...props} />;\n}\n\n// Each edge type's icon: a plain call is the arrow the graph draws; dispatch reaches one of several\n// targets chosen at run time; a read and a write touch data.\nconst EDGE_GLYPHS: Record<CallGraphEdgeType, Pick<CallGraphGlyph, \"icon\" | \"darkIcon\">> = {\n  call: { icon: UiArrowRight },\n  dispatch: { icon: UiShowToImplement, darkIcon: UiShowToImplementDark },\n  read: { icon: UiReadAccess, darkIcon: UiReadAccessDark },\n  write: { icon: UiWriteAccess, darkIcon: UiWriteAccessDark },\n};\n\nexport function EdgeTypeGlyph({ type, ...props }: IconProps & { type: CallGraphEdgeType }) {\n  return <Themed glyph={EDGE_GLYPHS[type]} {...props} />;\n}\n\n/** A group box caption: the group icon, then the shortened label, kept inline so the caption still truncates. */\nexport function GroupCaption({ icon: Icon, caption }: { icon: IconComponent; caption: string }) {\n  return (\n    <>\n      <Icon className=\"mr-1 inline-block align-[-0.15em]\" />\n      {caption}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAiBA,SAAS,OAAO,EAAE,OAAO,GAAG,SAA2E;AACrG,QAAM,OAAO,uBAAuB,UAAU,MAAM,WAAW,MAAM,WAAW,MAAM;AACtF,SAAO,oBAAC,MAAA,EAAM,GAAG,MAAA,CAAO;AAC1B;AAEO,SAAS,UAAU,EAAE,OAAO,GAAG,SAAgD;AACpF,SAAO,oBAAC,QAAA,EAAO,OAAe,GAAG,MAAA,CAAO;AAC1C;AAEO,SAAS,cAAc,EAAE,YAAY,OAAO,GAAG,SAAyE;AAC7H,SAAO,oBAAC,UAAO,OAAO,aAAa,YAAY,KAAK,GAAI,GAAG,OAAO;AACpE;AAIA,MAAM,cAAoF;AAAA,EACxF,MAAM,EAAE,MAAM,aAAA;AAAA,EACd,UAAU,EAAE,MAAM,mBAAmB,UAAU,sBAAA;AAAA,EAC/C,MAAM,EAAE,MAAM,cAAc,UAAU,iBAAA;AAAA,EACtC,OAAO,EAAE,MAAM,eAAe,UAAU,kBAAA;AAC1C;AAEO,SAAS,cAAc,EAAE,MAAM,GAAG,SAAkD;AACzF,6BAAQ,QAAA,EAAO,OAAO,YAAY,IAAI,GAAI,GAAG,OAAO;AACtD;AAGO,SAAS,aAAa,EAAE,MAAM,MAAM,WAAqD;AAC9F,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAK,WAAU,oCAAA,CAAoC;AAAA,IACnD;AAAA,EAAA,GACH;AAEJ;"}

package/dist/data/call-graph/CallGraphMembers.cjs

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../../lib/utils.cjs");
+const Badge = require("../Badge.cjs");
+const MEMBER_LIMIT = 8;
+const ACCESS_MARK = {
+  read: { text: "R", words: "read", className: "text-emerald-600 dark:text-emerald-400" },
+  write: { text: "W", words: "written", className: "text-amber-600 dark:text-amber-400" },
+  both: { text: "RW", words: "read and written", className: "text-sky-600 dark:text-sky-400" }
+};
+function Overflowing({ label, items, limit, className }) {
+  const [expanded, setExpanded] = react.useState(false);
+  const hidden = expanded ? 0 : Math.max(0, items.length - limit);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: utils.cn("flex min-w-0 flex-wrap items-center gap-1", className), "aria-label": label, children: hidden > 0 ? items.slice(0, limit) : items }),
+    hidden > 0 && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "rounded px-1 text-xs font-medium text-primary hover:underline", onClick: () => setExpanded(true), children: [
+      "+",
+      hidden,
+      " more"
+    ] })
+  ] });
+}
+function MemberChipList({ label, members, limit = MEMBER_LIMIT }) {
+  const marked = new Set(members.map((member) => member.access)).size > 1;
+  const chips = members.map((member) => {
+    const mark = ACCESS_MARK[member.access];
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { "data-member": member.name, ...marked ? { "data-access": member.access, title: `${member.name}: ${mark.words}` } : {}, children: /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { variant: "outline", size: "sm", clickToCopy: false, className: "gap-1 font-mono", children: [
+      member.name,
+      marked && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: utils.cn("text-[9px] font-semibold", mark.className), children: mark.text })
+    ] }) }, member.name);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Overflowing, { label, items: chips, limit });
+}
+function MemberChips({ label, members }) {
+  if (members.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1.5 text-xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 leading-5 text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(MemberChipList, { label, members })
+  ] });
+}
+function NameList({ label, names, limit = MEMBER_LIMIT }) {
+  const items = names.map((name, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "break-words text-xs", children: name }, `${index}:${name}`));
+  return /* @__PURE__ */ jsxRuntime.jsx(Overflowing, { label, items, limit, className: "gap-x-2" });
+}
+exports.MemberChipList = MemberChipList;
+exports.MemberChips = MemberChips;
+exports.NameList = NameList;
+//# sourceMappingURL=CallGraphMembers.cjs.map

package/dist/data/call-graph/CallGraphMembers.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallGraphMembers.cjs","sources":["../../../src/data/call-graph/CallGraphMembers.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Badge } from \"../Badge\";\nimport type { MemberAccess, MemberAccessKind } from \"./call-graph-labels\";\n\n/** How many chips or names a list shows before a \"+N more\" button reveals the rest. */\nconst MEMBER_LIMIT = 8;\n\nconst ACCESS_MARK: Record<MemberAccessKind, { text: string; words: string; className: string }> = {\n  read: { text: \"R\", words: \"read\", className: \"text-emerald-600 dark:text-emerald-400\" },\n  write: { text: \"W\", words: \"written\", className: \"text-amber-600 dark:text-amber-400\" },\n  both: { text: \"RW\", words: \"read and written\", className: \"text-sky-600 dark:text-sky-400\" },\n};\n\n/** The first `limit` items on one wrapping line, then a button that shows the rest. */\nfunction Overflowing({ label, items, limit, className }: { label: string; items: ReactNode[]; limit: number; className?: string }) {\n  const [expanded, setExpanded] = useState(false);\n  const hidden = expanded ? 0 : Math.max(0, items.length - limit);\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-1\">\n      <ul className={cn(\"flex min-w-0 flex-wrap items-center gap-1\", className)} aria-label={label}>\n        {hidden > 0 ? items.slice(0, limit) : items}\n      </ul>\n      {hidden > 0 && (\n        <button type=\"button\" className=\"rounded px-1 text-xs font-medium text-primary hover:underline\" onClick={() => setExpanded(true)}>\n          +{hidden} more\n        </button>\n      )}\n    </div>\n  );\n}\n\n/**\n * The columns or fields a read or write touches, as chips on one wrapping line. When they are not all\n * touched the same way, each chip is marked R, W or RW.\n */\nexport function MemberChipList({ label, members, limit = MEMBER_LIMIT }: { label: string; members: readonly MemberAccess[]; limit?: number }) {\n  const marked = new Set(members.map((member) => member.access)).size > 1;\n  const chips = members.map((member) => {\n    const mark = ACCESS_MARK[member.access];\n    return (\n      <li key={member.name} data-member={member.name} {...(marked ? { \"data-access\": member.access, title: `${member.name}: ${mark.words}` } : {})}>\n        <Badge variant=\"outline\" size=\"sm\" clickToCopy={false} className=\"gap-1 font-mono\">\n          {member.name}\n          {marked && <span aria-hidden className={cn(\"text-[9px] font-semibold\", mark.className)}>{mark.text}</span>}\n        </Badge>\n      </li>\n    );\n  });\n  return <Overflowing label={label} items={chips} limit={limit} />;\n}\n\n/** `MemberChipList` after its label, or nothing when there are no members. */\nexport function MemberChips({ label, members }: { label: string; members: readonly MemberAccess[] }) {\n  if (members.length === 0) return null;\n  return (\n    <div className=\"flex items-start gap-1.5 text-xs\">\n      <span className=\"shrink-0 leading-5 text-muted-foreground\">{label}</span>\n      <MemberChipList label={label} members={members} />\n    </div>\n  );\n}\n\n/** Node names on one wrapping line, such as who reads or writes a column. */\nexport function NameList({ label, names, limit = MEMBER_LIMIT }: { label: string; names: readonly string[]; limit?: number }) {\n  // Two rules in different tiers can share a name.\n  const items = names.map((name, index) => <li key={`${index}:${name}`} className=\"break-words text-xs\">{name}</li>);\n  return <Overflowing label={label} items={items} limit={limit} className=\"gap-x-2\" />;\n}\n"],"names":["useState","jsxs","jsx","cn","Badge"],"mappings":";;;;;;AAMA,MAAM,eAAe;AAErB,MAAM,cAA4F;AAAA,EAChG,MAAM,EAAE,MAAM,KAAK,OAAO,QAAQ,WAAW,yCAAA;AAAA,EAC7C,OAAO,EAAE,MAAM,KAAK,OAAO,WAAW,WAAW,qCAAA;AAAA,EACjD,MAAM,EAAE,MAAM,MAAM,OAAO,oBAAoB,WAAW,iCAAA;AAC5D;AAGA,SAAS,YAAY,EAAE,OAAO,OAAO,OAAO,aAAuF;AACjI,QAAM,CAAC,UAAU,WAAW,IAAIA,MAAAA,SAAS,KAAK;AAC9C,QAAM,SAAS,WAAW,IAAI,KAAK,IAAI,GAAG,MAAM,SAAS,KAAK;AAC9D,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,6CACb,UAAA;AAAA,IAAAC,2BAAAA,IAAC,MAAA,EAAG,WAAWC,MAAAA,GAAG,6CAA6C,SAAS,GAAG,cAAY,OACpF,UAAA,SAAS,IAAI,MAAM,MAAM,GAAG,KAAK,IAAI,OACxC;AAAA,IACC,SAAS,KACRF,2BAAAA,KAAC,UAAA,EAAO,MAAK,UAAS,WAAU,iEAAgE,SAAS,MAAM,YAAY,IAAI,GAAG,UAAA;AAAA,MAAA;AAAA,MAC9H;AAAA,MAAO;AAAA,IAAA,EAAA,CACX;AAAA,EAAA,GAEJ;AAEJ;AAMO,SAAS,eAAe,EAAE,OAAO,SAAS,QAAQ,gBAAqF;AAC5I,QAAM,SAAS,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,OAAO,MAAM,CAAC,EAAE,OAAO;AACtE,QAAM,QAAQ,QAAQ,IAAI,CAAC,WAAW;AACpC,UAAM,OAAO,YAAY,OAAO,MAAM;AACtC,WACEC,2BAAAA,IAAC,MAAA,EAAqB,eAAa,OAAO,MAAO,GAAI,SAAS,EAAE,eAAe,OAAO,QAAQ,OAAO,GAAG,OAAO,IAAI,KAAK,KAAK,KAAK,GAAA,IAAO,CAAA,GACvI,UAAAD,2BAAAA,KAACG,MAAAA,OAAA,EAAM,SAAQ,WAAU,MAAK,MAAK,aAAa,OAAO,WAAU,mBAC9D,UAAA;AAAA,MAAA,OAAO;AAAA,MACP,UAAUF,2BAAAA,IAAC,QAAA,EAAK,eAAW,MAAC,WAAWC,MAAAA,GAAG,4BAA4B,KAAK,SAAS,GAAI,UAAA,KAAK,KAAA,CAAK;AAAA,IAAA,GACrG,EAAA,GAJO,OAAO,IAKhB;AAAA,EAEJ,CAAC;AACD,SAAOD,2BAAAA,IAAC,aAAA,EAAY,OAAc,OAAO,OAAO,OAAc;AAChE;AAGO,SAAS,YAAY,EAAE,OAAO,WAAgE;AACnG,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACED,2BAAAA,KAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,IAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,4CAA4C,UAAA,OAAM;AAAA,IAClEA,2BAAAA,IAAC,gBAAA,EAAe,OAAc,QAAA,CAAkB;AAAA,EAAA,GAClD;AAEJ;AAGO,SAAS,SAAS,EAAE,OAAO,OAAO,QAAQ,gBAA6E;AAE5H,QAAM,QAAQ,MAAM,IAAI,CAAC,MAAM,UAAUA,2BAAAA,IAAC,MAAA,EAA4B,WAAU,uBAAuB,kBAArD,GAAG,KAAK,IAAI,IAAI,EAA0C,CAAK;AACjH,wCAAQ,aAAA,EAAY,OAAc,OAAc,OAAc,WAAU,WAAU;AACpF;;;;"}

package/dist/data/call-graph/CallGraphMembers.d.ts

@@ -0,0 +1,22 @@
+import { MemberAccess } from './call-graph-labels.js';
+/**
+ * The columns or fields a read or write touches, as chips on one wrapping line. When they are not all
+ * touched the same way, each chip is marked R, W or RW.
+ */
+export declare function MemberChipList({ label, members, limit }: {
+    label: string;
+    members: readonly MemberAccess[];
+    limit?: number;
+}): import("react").JSX.Element;
+/** `MemberChipList` after its label, or nothing when there are no members. */
+export declare function MemberChips({ label, members }: {
+    label: string;
+    members: readonly MemberAccess[];
+}): import("react").JSX.Element | null;
+/** Node names on one wrapping line, such as who reads or writes a column. */
+export declare function NameList({ label, names, limit }: {
+    label: string;
+    names: readonly string[];
+    limit?: number;
+}): import("react").JSX.Element;
+//# sourceMappingURL=CallGraphMembers.d.ts.map

package/dist/data/call-graph/CallGraphMembers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallGraphMembers.d.ts","sourceRoot":"","sources":["../../../src/data/call-graph/CallGraphMembers.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,qBAAqB,CAAC;AA6B1E;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAoB,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAc3I;AAED,8EAA8E;AAC9E,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;CAAE,sCAQlG;AAED,6EAA6E;AAC7E,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAoB,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAI3H"}

package/dist/data/call-graph/CallGraphMembers.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../Badge.js";
+const MEMBER_LIMIT = 8;
+const ACCESS_MARK = {
+  read: { text: "R", words: "read", className: "text-emerald-600 dark:text-emerald-400" },
+  write: { text: "W", words: "written", className: "text-amber-600 dark:text-amber-400" },
+  both: { text: "RW", words: "read and written", className: "text-sky-600 dark:text-sky-400" }
+};
+function Overflowing({ label, items, limit, className }) {
+  const [expanded, setExpanded] = useState(false);
+  const hidden = expanded ? 0 : Math.max(0, items.length - limit);
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1", children: [
+    /* @__PURE__ */ jsx("ul", { className: cn("flex min-w-0 flex-wrap items-center gap-1", className), "aria-label": label, children: hidden > 0 ? items.slice(0, limit) : items }),
+    hidden > 0 && /* @__PURE__ */ jsxs("button", { type: "button", className: "rounded px-1 text-xs font-medium text-primary hover:underline", onClick: () => setExpanded(true), children: [
+      "+",
+      hidden,
+      " more"
+    ] })
+  ] });
+}
+function MemberChipList({ label, members, limit = MEMBER_LIMIT }) {
+  const marked = new Set(members.map((member) => member.access)).size > 1;
+  const chips = members.map((member) => {
+    const mark = ACCESS_MARK[member.access];
+    return /* @__PURE__ */ jsx("li", { "data-member": member.name, ...marked ? { "data-access": member.access, title: `${member.name}: ${mark.words}` } : {}, children: /* @__PURE__ */ jsxs(Badge, { variant: "outline", size: "sm", clickToCopy: false, className: "gap-1 font-mono", children: [
+      member.name,
+      marked && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("text-[9px] font-semibold", mark.className), children: mark.text })
+    ] }) }, member.name);
+  });
+  return /* @__PURE__ */ jsx(Overflowing, { label, items: chips, limit });
+}
+function MemberChips({ label, members }) {
+  if (members.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5 text-xs", children: [
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 leading-5 text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx(MemberChipList, { label, members })
+  ] });
+}
+function NameList({ label, names, limit = MEMBER_LIMIT }) {
+  const items = names.map((name, index) => /* @__PURE__ */ jsx("li", { className: "break-words text-xs", children: name }, `${index}:${name}`));
+  return /* @__PURE__ */ jsx(Overflowing, { label, items, limit, className: "gap-x-2" });
+}
+export {
+  MemberChipList,
+  MemberChips,
+  NameList
+};
+//# sourceMappingURL=CallGraphMembers.js.map

package/dist/data/call-graph/CallGraphMembers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallGraphMembers.js","sources":["../../../src/data/call-graph/CallGraphMembers.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Badge } from \"../Badge\";\nimport type { MemberAccess, MemberAccessKind } from \"./call-graph-labels\";\n\n/** How many chips or names a list shows before a \"+N more\" button reveals the rest. */\nconst MEMBER_LIMIT = 8;\n\nconst ACCESS_MARK: Record<MemberAccessKind, { text: string; words: string; className: string }> = {\n  read: { text: \"R\", words: \"read\", className: \"text-emerald-600 dark:text-emerald-400\" },\n  write: { text: \"W\", words: \"written\", className: \"text-amber-600 dark:text-amber-400\" },\n  both: { text: \"RW\", words: \"read and written\", className: \"text-sky-600 dark:text-sky-400\" },\n};\n\n/** The first `limit` items on one wrapping line, then a button that shows the rest. */\nfunction Overflowing({ label, items, limit, className }: { label: string; items: ReactNode[]; limit: number; className?: string }) {\n  const [expanded, setExpanded] = useState(false);\n  const hidden = expanded ? 0 : Math.max(0, items.length - limit);\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-1\">\n      <ul className={cn(\"flex min-w-0 flex-wrap items-center gap-1\", className)} aria-label={label}>\n        {hidden > 0 ? items.slice(0, limit) : items}\n      </ul>\n      {hidden > 0 && (\n        <button type=\"button\" className=\"rounded px-1 text-xs font-medium text-primary hover:underline\" onClick={() => setExpanded(true)}>\n          +{hidden} more\n        </button>\n      )}\n    </div>\n  );\n}\n\n/**\n * The columns or fields a read or write touches, as chips on one wrapping line. When they are not all\n * touched the same way, each chip is marked R, W or RW.\n */\nexport function MemberChipList({ label, members, limit = MEMBER_LIMIT }: { label: string; members: readonly MemberAccess[]; limit?: number }) {\n  const marked = new Set(members.map((member) => member.access)).size > 1;\n  const chips = members.map((member) => {\n    const mark = ACCESS_MARK[member.access];\n    return (\n      <li key={member.name} data-member={member.name} {...(marked ? { \"data-access\": member.access, title: `${member.name}: ${mark.words}` } : {})}>\n        <Badge variant=\"outline\" size=\"sm\" clickToCopy={false} className=\"gap-1 font-mono\">\n          {member.name}\n          {marked && <span aria-hidden className={cn(\"text-[9px] font-semibold\", mark.className)}>{mark.text}</span>}\n        </Badge>\n      </li>\n    );\n  });\n  return <Overflowing label={label} items={chips} limit={limit} />;\n}\n\n/** `MemberChipList` after its label, or nothing when there are no members. */\nexport function MemberChips({ label, members }: { label: string; members: readonly MemberAccess[] }) {\n  if (members.length === 0) return null;\n  return (\n    <div className=\"flex items-start gap-1.5 text-xs\">\n      <span className=\"shrink-0 leading-5 text-muted-foreground\">{label}</span>\n      <MemberChipList label={label} members={members} />\n    </div>\n  );\n}\n\n/** Node names on one wrapping line, such as who reads or writes a column. */\nexport function NameList({ label, names, limit = MEMBER_LIMIT }: { label: string; names: readonly string[]; limit?: number }) {\n  // Two rules in different tiers can share a name.\n  const items = names.map((name, index) => <li key={`${index}:${name}`} className=\"break-words text-xs\">{name}</li>);\n  return <Overflowing label={label} items={items} limit={limit} className=\"gap-x-2\" />;\n}\n"],"names":[],"mappings":";;;;AAMA,MAAM,eAAe;AAErB,MAAM,cAA4F;AAAA,EAChG,MAAM,EAAE,MAAM,KAAK,OAAO,QAAQ,WAAW,yCAAA;AAAA,EAC7C,OAAO,EAAE,MAAM,KAAK,OAAO,WAAW,WAAW,qCAAA;AAAA,EACjD,MAAM,EAAE,MAAM,MAAM,OAAO,oBAAoB,WAAW,iCAAA;AAC5D;AAGA,SAAS,YAAY,EAAE,OAAO,OAAO,OAAO,aAAuF;AACjI,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,SAAS,WAAW,IAAI,KAAK,IAAI,GAAG,MAAM,SAAS,KAAK;AAC9D,SACE,qBAAC,OAAA,EAAI,WAAU,6CACb,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAG,WAAW,GAAG,6CAA6C,SAAS,GAAG,cAAY,OACpF,UAAA,SAAS,IAAI,MAAM,MAAM,GAAG,KAAK,IAAI,OACxC;AAAA,IACC,SAAS,KACR,qBAAC,UAAA,EAAO,MAAK,UAAS,WAAU,iEAAgE,SAAS,MAAM,YAAY,IAAI,GAAG,UAAA;AAAA,MAAA;AAAA,MAC9H;AAAA,MAAO;AAAA,IAAA,EAAA,CACX;AAAA,EAAA,GAEJ;AAEJ;AAMO,SAAS,eAAe,EAAE,OAAO,SAAS,QAAQ,gBAAqF;AAC5I,QAAM,SAAS,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,OAAO,MAAM,CAAC,EAAE,OAAO;AACtE,QAAM,QAAQ,QAAQ,IAAI,CAAC,WAAW;AACpC,UAAM,OAAO,YAAY,OAAO,MAAM;AACtC,WACE,oBAAC,MAAA,EAAqB,eAAa,OAAO,MAAO,GAAI,SAAS,EAAE,eAAe,OAAO,QAAQ,OAAO,GAAG,OAAO,IAAI,KAAK,KAAK,KAAK,GAAA,IAAO,CAAA,GACvI,UAAA,qBAAC,OAAA,EAAM,SAAQ,WAAU,MAAK,MAAK,aAAa,OAAO,WAAU,mBAC9D,UAAA;AAAA,MAAA,OAAO;AAAA,MACP,UAAU,oBAAC,QAAA,EAAK,eAAW,MAAC,WAAW,GAAG,4BAA4B,KAAK,SAAS,GAAI,UAAA,KAAK,KAAA,CAAK;AAAA,IAAA,GACrG,EAAA,GAJO,OAAO,IAKhB;AAAA,EAEJ,CAAC;AACD,SAAO,oBAAC,aAAA,EAAY,OAAc,OAAO,OAAO,OAAc;AAChE;AAGO,SAAS,YAAY,EAAE,OAAO,WAAgE;AACnG,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,qBAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAU,4CAA4C,UAAA,OAAM;AAAA,IAClE,oBAAC,gBAAA,EAAe,OAAc,QAAA,CAAkB;AAAA,EAAA,GAClD;AAEJ;AAGO,SAAS,SAAS,EAAE,OAAO,OAAO,QAAQ,gBAA6E;AAE5H,QAAM,QAAQ,MAAM,IAAI,CAAC,MAAM,UAAU,oBAAC,MAAA,EAA4B,WAAU,uBAAuB,kBAArD,GAAG,KAAK,IAAI,IAAI,EAA0C,CAAK;AACjH,6BAAQ,aAAA,EAAY,OAAc,OAAc,OAAc,WAAU,WAAU;AACpF;"}