@flanksource/clicky-ui 0.3.41 → 0.3.43

package/dist/data/GraphDiagramEdges.d.ts

@@ -0,0 +1,40 @@
+import { EdgeRoute } from './graph-edge-routing.js';
+import { EdgeFocusState } from './use-edge-focus.js';
+import { GraphDiagramEdge, GraphDiagramNode, GraphPlacer } from './graph-diagram-model.js';
+interface EdgeSelection {
+    selectedEdgeId: string | undefined;
+    onEdgeSelect: ((id: string) => void) | undefined;
+    /** Set when the diagram is focused: see `GraphDiagramEdgeFocus`. */
+    focus: EdgeFocusState | undefined;
+}
+export interface GraphDiagramEdgePathsProps extends EdgeSelection {
+    edges: GraphDiagramEdge[];
+    nodes: GraphDiagramNode[];
+    routes: Record<string, EdgeRoute>;
+    width: number;
+    height: number;
+    ariaLabel: string;
+    /** Unique per diagram instance, so two diagrams on a page never share marker ids. */
+    markerPrefix: string;
+    onEdgeHover: ((id: string | undefined) => void) | undefined;
+}
+export declare function GraphDiagramEdgePaths({ edges, nodes, routes, width, height, ariaLabel, markerPrefix, selectedEdgeId, onEdgeSelect, focus, onEdgeHover, }: GraphDiagramEdgePathsProps): import("react").JSX.Element;
+export interface GraphDiagramEdgeLabelsProps extends EdgeSelection {
+    edges: GraphDiagramEdge[];
+    routes: Record<string, EdgeRoute>;
+    place: GraphPlacer;
+    /**
+     * Move pills that would cover one another apart. Only meaningful when the
+     * stage is drawn at its natural size, where a pill's px size and the layout
+     * share one coordinate system.
+     */
+    spread: boolean;
+}
+/**
+ * The label pills, drawn as HTML over the edges. With `onEdgeSelect` a pill is
+ * a pointer shortcut for its edge; the edge's own path stays the one
+ * keyboard and screen-reader target, so the pill is hidden from both.
+ */
+export declare function GraphDiagramEdgeLabels({ edges, routes, place, spread, selectedEdgeId, onEdgeSelect, focus, }: GraphDiagramEdgeLabelsProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=GraphDiagramEdges.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GraphDiagramEdges.d.ts","sourceRoot":"","sources":["../../src/data/GraphDiagramEdges.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAElF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAQL,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAS/B,UAAU,aAAa;IACrB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjD,oEAAoE;IACpE,KAAK,EAAE,cAAc,GAAG,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,0BAA2B,SAAQ,aAAa;IAC/D,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC7D;AAgED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,GACZ,EAAE,0BAA0B,+BA8C5B;AAED,MAAM,WAAW,2BAA4B,SAAQ,aAAa;IAChE,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClC,KAAK,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,MAAM,EAAE,OAAO,CAAC;CACjB;AA0DD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,cAAc,EACd,YAAY,EACZ,KAAK,GACN,EAAE,2BAA2B,+BAsC7B"}

package/dist/data/GraphDiagramEdges.js

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

package/dist/data/GraphDiagramEdges.js.map

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

package/dist/data/GraphDiagramNodes.cjs

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const graphDiagramModel = require("./graph-diagram-model.cjs");
+const EXPAND_CLASS = "absolute bottom-0 translate-y-1/2 rounded-full border border-border bg-background px-1.5 text-[10px] font-semibold leading-4 text-muted-foreground shadow-sm";
+function ExpandControl({ node, onExpand }) {
+  const side = (node.level ?? 0) < 0 ? "left-2" : "right-2";
+  const text = `+${node.expandCount}`;
+  if (!onExpand) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(EXPAND_CLASS, side), children: text });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": `Expand ${node.expandCount} more from ${graphDiagramModel.nodeName(node)}`,
+      className: utils.cn(
+        EXPAND_CLASS,
+        side,
+        "cursor-pointer hover:border-primary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      ),
+      onClick: onExpand,
+      children: text
+    }
+  );
+}
+const TWO_LINE_HEIGHT = 44;
+function NodeLabel({ node, oneLine }) {
+  const label = /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils.cn(
+        oneLine ? "max-w-full truncate" : "line-clamp-2",
+        "font-medium leading-tight",
+        node.icon != null && "min-w-0"
+      ),
+      children: node.label
+    }
+  );
+  if (node.icon == null) return label;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex max-w-full items-center gap-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-graph-node-icon": "", className: "flex shrink-0 text-base leading-none", children: node.icon }),
+    label
+  ] });
+}
+function NodeBody({
+  node,
+  oneLine,
+  selected,
+  onSelect
+}) {
+  const tone = node.tone ?? "neutral";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex h-full w-full flex-col items-center justify-center gap-0.5 border px-3 py-1.5 text-center text-xs shadow-sm",
+        node.shape === "pill" ? "rounded-full" : "rounded-lg",
+        graphDiagramModel.TONE_NODE_CLASS[tone],
+        node.muted && "border-dashed text-muted-foreground shadow-none",
+        node.muted && tone === "neutral" && "bg-muted",
+        selected && "ring-2 ring-primary ring-offset-2 ring-offset-background",
+        onSelect && "cursor-pointer"
+      ),
+      ...onSelect ? {
+        role: "button",
+        tabIndex: 0,
+        "aria-pressed": selected,
+        onClick: onSelect,
+        onKeyDown: (event) => graphDiagramModel.activateOnKey(event, onSelect)
+      } : {},
+      "aria-label": node.ariaLabel,
+      title: node.title,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(NodeLabel, { node, oneLine }),
+        node.detail != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-1 text-[10px] leading-tight text-muted-foreground", children: node.detail }),
+        node.badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5", children: node.badge })
+      ]
+    }
+  );
+}
+function GraphDiagramNodes({
+  nodes,
+  positions,
+  place,
+  nodeWidth,
+  nodeHeight,
+  selectedId,
+  onNodeSelect,
+  onNodeExpand,
+  onNodeHover
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-graph-node": node.id,
+      className: "pointer-events-auto absolute -translate-x-1/2 -translate-y-1/2",
+      style: { ...place(graphDiagramModel.requireEntry(positions, node.id, "layout position")), width: nodeWidth, height: nodeHeight },
+      ...onNodeHover ? graphDiagramModel.hoverHandlers(node.id, onNodeHover) : {},
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NodeBody,
+          {
+            node,
+            oneLine: nodeHeight < TWO_LINE_HEIGHT,
+            selected: selectedId != null && node.id === selectedId,
+            onSelect: onNodeSelect ? () => onNodeSelect(node.id) : void 0
+          }
+        ),
+        node.expandCount != null && node.expandCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(ExpandControl, { node, onExpand: onNodeExpand ? () => onNodeExpand(node.id) : void 0 })
+      ]
+    },
+    node.id
+  )) });
+}
+function GraphDiagramGroupBoxes({ boxes, groups }) {
+  const captions = new Map(groups == null ? void 0 : groups.map((group) => [group.id, group]));
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: boxes.map((box) => {
+    const caption = captions.get(box.group);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-graph-group": box.id,
+        className: "absolute rounded-xl border border-dashed border-border bg-muted/30",
+        style: { left: box.x, top: box.y, width: box.width, height: box.height },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            title: caption == null ? void 0 : caption.title,
+            className: "absolute left-2 top-0 max-w-[calc(100%-1rem)] -translate-y-1/2 truncate rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground",
+            children: caption ? caption.label : box.group
+          }
+        )
+      },
+      box.id
+    );
+  }) });
+}
+exports.GraphDiagramGroupBoxes = GraphDiagramGroupBoxes;
+exports.GraphDiagramNodes = GraphDiagramNodes;
+//# sourceMappingURL=GraphDiagramNodes.cjs.map

package/dist/data/GraphDiagramNodes.cjs.map

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

package/dist/data/GraphDiagramNodes.d.ts

@@ -0,0 +1,22 @@
+import { GraphLayoutPosition } from './graph-layout.js';
+import { GraphLayoutGroupBox } from './graph-columns-layout.js';
+import { GraphDiagramGroup, GraphDiagramNode, GraphPlacer } from './graph-diagram-model.js';
+export interface GraphDiagramNodesProps {
+    nodes: GraphDiagramNode[];
+    positions: Record<string, GraphLayoutPosition>;
+    place: GraphPlacer;
+    nodeWidth: number;
+    nodeHeight: number;
+    selectedId: string | undefined;
+    onNodeSelect: ((id: string) => void) | undefined;
+    onNodeExpand: ((id: string) => void) | undefined;
+    onNodeHover: ((id: string | undefined) => void) | undefined;
+}
+export declare function GraphDiagramNodes({ nodes, positions, place, nodeWidth, nodeHeight, selectedId, onNodeSelect, onNodeExpand, onNodeHover, }: GraphDiagramNodesProps): import("react").JSX.Element;
+export interface GraphDiagramGroupBoxesProps {
+    boxes: GraphLayoutGroupBox[];
+    groups: GraphDiagramGroup[] | undefined;
+}
+/** Group rectangles, drawn behind the edges and nodes, each captioned on its top border. */
+export declare function GraphDiagramGroupBoxes({ boxes, groups }: GraphDiagramGroupBoxesProps): import("react").JSX.Element;
+//# sourceMappingURL=GraphDiagramNodes.d.ts.map

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

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

package/dist/data/GraphDiagramNodes.js

@@ -0,0 +1,142 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { hoverHandlers, requireEntry, activateOnKey, TONE_NODE_CLASS, nodeName } from "./graph-diagram-model.js";
+const EXPAND_CLASS = "absolute bottom-0 translate-y-1/2 rounded-full border border-border bg-background px-1.5 text-[10px] font-semibold leading-4 text-muted-foreground shadow-sm";
+function ExpandControl({ node, onExpand }) {
+  const side = (node.level ?? 0) < 0 ? "left-2" : "right-2";
+  const text = `+${node.expandCount}`;
+  if (!onExpand) {
+    return /* @__PURE__ */ jsx("span", { className: cn(EXPAND_CLASS, side), children: text });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": `Expand ${node.expandCount} more from ${nodeName(node)}`,
+      className: cn(
+        EXPAND_CLASS,
+        side,
+        "cursor-pointer hover:border-primary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      ),
+      onClick: onExpand,
+      children: text
+    }
+  );
+}
+const TWO_LINE_HEIGHT = 44;
+function NodeLabel({ node, oneLine }) {
+  const label = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        oneLine ? "max-w-full truncate" : "line-clamp-2",
+        "font-medium leading-tight",
+        node.icon != null && "min-w-0"
+      ),
+      children: node.label
+    }
+  );
+  if (node.icon == null) return label;
+  return /* @__PURE__ */ jsxs("span", { className: "flex max-w-full items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { "data-graph-node-icon": "", className: "flex shrink-0 text-base leading-none", children: node.icon }),
+    label
+  ] });
+}
+function NodeBody({
+  node,
+  oneLine,
+  selected,
+  onSelect
+}) {
+  const tone = node.tone ?? "neutral";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full w-full flex-col items-center justify-center gap-0.5 border px-3 py-1.5 text-center text-xs shadow-sm",
+        node.shape === "pill" ? "rounded-full" : "rounded-lg",
+        TONE_NODE_CLASS[tone],
+        node.muted && "border-dashed text-muted-foreground shadow-none",
+        node.muted && tone === "neutral" && "bg-muted",
+        selected && "ring-2 ring-primary ring-offset-2 ring-offset-background",
+        onSelect && "cursor-pointer"
+      ),
+      ...onSelect ? {
+        role: "button",
+        tabIndex: 0,
+        "aria-pressed": selected,
+        onClick: onSelect,
+        onKeyDown: (event) => activateOnKey(event, onSelect)
+      } : {},
+      "aria-label": node.ariaLabel,
+      title: node.title,
+      children: [
+        /* @__PURE__ */ jsx(NodeLabel, { node, oneLine }),
+        node.detail != null && /* @__PURE__ */ jsx("span", { className: "line-clamp-1 text-[10px] leading-tight text-muted-foreground", children: node.detail }),
+        node.badge != null && /* @__PURE__ */ jsx("span", { className: "mt-0.5", children: node.badge })
+      ]
+    }
+  );
+}
+function GraphDiagramNodes({
+  nodes,
+  positions,
+  place,
+  nodeWidth,
+  nodeHeight,
+  selectedId,
+  onNodeSelect,
+  onNodeExpand,
+  onNodeHover
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-graph-node": node.id,
+      className: "pointer-events-auto absolute -translate-x-1/2 -translate-y-1/2",
+      style: { ...place(requireEntry(positions, node.id, "layout position")), width: nodeWidth, height: nodeHeight },
+      ...onNodeHover ? hoverHandlers(node.id, onNodeHover) : {},
+      children: [
+        /* @__PURE__ */ jsx(
+          NodeBody,
+          {
+            node,
+            oneLine: nodeHeight < TWO_LINE_HEIGHT,
+            selected: selectedId != null && node.id === selectedId,
+            onSelect: onNodeSelect ? () => onNodeSelect(node.id) : void 0
+          }
+        ),
+        node.expandCount != null && node.expandCount > 0 && /* @__PURE__ */ jsx(ExpandControl, { node, onExpand: onNodeExpand ? () => onNodeExpand(node.id) : void 0 })
+      ]
+    },
+    node.id
+  )) });
+}
+function GraphDiagramGroupBoxes({ boxes, groups }) {
+  const captions = new Map(groups == null ? void 0 : groups.map((group) => [group.id, group]));
+  return /* @__PURE__ */ jsx(Fragment, { children: boxes.map((box) => {
+    const caption = captions.get(box.group);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-graph-group": box.id,
+        className: "absolute rounded-xl border border-dashed border-border bg-muted/30",
+        style: { left: box.x, top: box.y, width: box.width, height: box.height },
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            title: caption == null ? void 0 : caption.title,
+            className: "absolute left-2 top-0 max-w-[calc(100%-1rem)] -translate-y-1/2 truncate rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground",
+            children: caption ? caption.label : box.group
+          }
+        )
+      },
+      box.id
+    );
+  }) });
+}
+export {
+  GraphDiagramGroupBoxes,
+  GraphDiagramNodes
+};
+//# sourceMappingURL=GraphDiagramNodes.js.map

package/dist/data/GraphDiagramNodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphDiagramNodes.js","sources":["../../src/data/GraphDiagramNodes.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { GraphLayoutPosition } from \"./graph-layout\";\nimport type { GraphLayoutGroupBox } from \"./graph-columns-layout\";\nimport {\n  activateOnKey,\n  hoverHandlers,\n  nodeName,\n  requireEntry,\n  TONE_NODE_CLASS,\n  type GraphDiagramGroup,\n  type GraphDiagramNode,\n  type GraphPlacer,\n} from \"./graph-diagram-model\";\n\nexport interface GraphDiagramNodesProps {\n  nodes: GraphDiagramNode[];\n  positions: Record<string, GraphLayoutPosition>;\n  place: GraphPlacer;\n  nodeWidth: number;\n  nodeHeight: number;\n  selectedId: string | undefined;\n  onNodeSelect: ((id: string) => void) | undefined;\n  onNodeExpand: ((id: string) => void) | undefined;\n  onNodeHover: ((id: string | undefined) => void) | undefined;\n}\n\nconst EXPAND_CLASS =\n  \"absolute bottom-0 translate-y-1/2 rounded-full border border-border bg-background px-1.5 text-[10px] font-semibold leading-4 text-muted-foreground shadow-sm\";\n\n/**\n * The `+N` control. It hangs off the node's bottom edge at its outer end —\n * the left for a node left of level 0, the right otherwise — which keeps it\n * clear of the side middles where edges attach. It is a sibling of the node,\n * not a child, so activating it never also selects the node.\n */\nfunction ExpandControl({ node, onExpand }: { node: GraphDiagramNode; onExpand: (() => void) | undefined }) {\n  const side = (node.level ?? 0) < 0 ? \"left-2\" : \"right-2\";\n  const text = `+${node.expandCount}`;\n  if (!onExpand) {\n    return <span className={cn(EXPAND_CLASS, side)}>{text}</span>;\n  }\n  return (\n    <button\n      type=\"button\"\n      aria-label={`Expand ${node.expandCount} more from ${nodeName(node)}`}\n      className={cn(\n        EXPAND_CLASS,\n        side,\n        \"cursor-pointer hover:border-primary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      )}\n      onClick={onExpand}\n    >\n      {text}\n    </button>\n  );\n}\n\n// Two 15px label lines, the body's vertical padding and its border.\nconst TWO_LINE_HEIGHT = 44;\n\n/** The label, behind the node's icon when it has one. `oneLine` cuts it with an ellipsis instead of wrapping. */\nfunction NodeLabel({ node, oneLine }: { node: GraphDiagramNode; oneLine: boolean }) {\n  const label = (\n    <span\n      className={cn(\n        oneLine ? \"max-w-full truncate\" : \"line-clamp-2\",\n        \"font-medium leading-tight\",\n        node.icon != null && \"min-w-0\",\n      )}\n    >\n      {node.label}\n    </span>\n  );\n  if (node.icon == null) return label;\n  return (\n    <span className=\"flex max-w-full items-center gap-1.5\">\n      <span data-graph-node-icon=\"\" className=\"flex shrink-0 text-base leading-none\">\n        {node.icon}\n      </span>\n      {label}\n    </span>\n  );\n}\n\nfunction NodeBody({\n  node,\n  oneLine,\n  selected,\n  onSelect,\n}: {\n  node: GraphDiagramNode;\n  /** The node is too short for two label lines. */\n  oneLine: boolean;\n  selected: boolean;\n  onSelect: (() => void) | undefined;\n}) {\n  const tone = node.tone ?? \"neutral\";\n  return (\n    <div\n      className={cn(\n        \"flex h-full w-full flex-col items-center justify-center gap-0.5 border px-3 py-1.5 text-center text-xs shadow-sm\",\n        node.shape === \"pill\" ? \"rounded-full\" : \"rounded-lg\",\n        TONE_NODE_CLASS[tone],\n        node.muted && \"border-dashed text-muted-foreground shadow-none\",\n        node.muted && tone === \"neutral\" && \"bg-muted\",\n        selected && \"ring-2 ring-primary ring-offset-2 ring-offset-background\",\n        onSelect && \"cursor-pointer\",\n      )}\n      {...(onSelect\n        ? {\n            role: \"button\" as const,\n            tabIndex: 0,\n            \"aria-pressed\": selected,\n            onClick: onSelect,\n            onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => activateOnKey(event, onSelect),\n          }\n        : {})}\n      aria-label={node.ariaLabel}\n      title={node.title}\n    >\n      <NodeLabel node={node} oneLine={oneLine} />\n      {node.detail != null && (\n        <span className=\"line-clamp-1 text-[10px] leading-tight text-muted-foreground\">{node.detail}</span>\n      )}\n      {node.badge != null && <span className=\"mt-0.5\">{node.badge}</span>}\n    </div>\n  );\n}\n\nexport function GraphDiagramNodes({\n  nodes,\n  positions,\n  place,\n  nodeWidth,\n  nodeHeight,\n  selectedId,\n  onNodeSelect,\n  onNodeExpand,\n  onNodeHover,\n}: GraphDiagramNodesProps) {\n  return (\n    <>\n      {nodes.map((node) => (\n        <div\n          key={node.id}\n          data-graph-node={node.id}\n          className=\"pointer-events-auto absolute -translate-x-1/2 -translate-y-1/2\"\n          style={{ ...place(requireEntry(positions, node.id, \"layout position\")), width: nodeWidth, height: nodeHeight }}\n          {...(onNodeHover ? hoverHandlers(node.id, onNodeHover) : {})}\n        >\n          <NodeBody\n            node={node}\n            oneLine={nodeHeight < TWO_LINE_HEIGHT}\n            selected={selectedId != null && node.id === selectedId}\n            onSelect={onNodeSelect ? () => onNodeSelect(node.id) : undefined}\n          />\n          {node.expandCount != null && node.expandCount > 0 && (\n            <ExpandControl node={node} onExpand={onNodeExpand ? () => onNodeExpand(node.id) : undefined} />\n          )}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport interface GraphDiagramGroupBoxesProps {\n  boxes: GraphLayoutGroupBox[];\n  groups: GraphDiagramGroup[] | undefined;\n}\n\n/** Group rectangles, drawn behind the edges and nodes, each captioned on its top border. */\nexport function GraphDiagramGroupBoxes({ boxes, groups }: GraphDiagramGroupBoxesProps) {\n  const captions = new Map(groups?.map((group) => [group.id, group]));\n  return (\n    <>\n      {boxes.map((box) => {\n        const caption = captions.get(box.group);\n        return (\n          <div\n            key={box.id}\n            data-graph-group={box.id}\n            className=\"absolute rounded-xl border border-dashed border-border bg-muted/30\"\n            style={{ left: box.x, top: box.y, width: box.width, height: box.height }}\n          >\n            <span\n              title={caption?.title}\n              className=\"absolute left-2 top-0 max-w-[calc(100%-1rem)] -translate-y-1/2 truncate rounded border border-border bg-background px-1.5 text-[10px] font-medium leading-4 text-muted-foreground\"\n            >\n              {caption ? caption.label : box.group}\n            </span>\n          </div>\n        );\n      })}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}