@flanksource/clicky-ui 0.3.44 → 0.3.45

package/dist/data/GraphDiagramNodes.cjs

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

package/dist/data/GraphDiagramNodes.cjs.map

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

package/dist/data/GraphDiagramNodes.d.ts

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

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

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

package/dist/data/GraphDiagramNodes.js

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

package/dist/data/GraphDiagramNodes.js.map

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

package/dist/data/JsonView.cjs

@@ -2,73 +2,142 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }) {
+const yaml = require("yaml");
+const button = require("../components/button.cjs");
+const useDensity = require("../hooks/use-density.cjs");
+const utils = require("../lib/utils.cjs");
+const JsonSource = require("./json-view/JsonSource.cjs");
+const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
+const DENSITY_CLASSES = {
+  compact: "text-xs leading-4 [--json-view-indent:0.75rem] [--json-view-row-space:0px]",
+  comfortable: "text-sm leading-5 [--json-view-indent:1rem] [--json-view-row-space:1px]",
+  spacious: "text-base leading-6 [--json-view-indent:1.25rem] [--json-view-row-space:2px]"
+};
+function JsonView({
+  density,
+  format = "yaml",
+  ...props
+}) {
+  const inheritedDensity = useDensity.useDensityValue();
+  const activeDensity = density ?? inheritedDensity;
+  const hasSource = Object.hasOwn(props, "source");
+  if (hasSource === Object.hasOwn(props, "data"))
+    throw new Error("JsonView requires exactly one of data or source");
+  if (!hasSource && Object.hasOwn(props, "inputFormat"))
+    throw new Error("JsonView inputFormat requires source");
+  if (hasSource && typeof props.source !== "string")
+    throw new Error("JsonView source must be a string");
+  const { data, source, inputFormat = "json", ...options } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-format": format,
+      "data-density": activeDensity,
+      className: utils.cn(
+        "font-mono whitespace-pre-wrap break-words",
+        DENSITY_CLASSES[activeDensity]
+      ),
+      children: hasSource && source !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        JsonSource.JsonSource,
+        {
+          source,
+          inputFormat,
+          renderValue: (value) => /* @__PURE__ */ jsxRuntime.jsx(JsonViewNode, { ...options, data: value, format })
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(JsonViewNode, { ...options, data, format })
+    }
+  );
+}
+function JsonViewNode({
+  data,
+  name,
+  depth = 0,
+  defaultOpenDepth = 2,
+  format,
+  sequenceItem = false
+}) {
   const [open, setOpen] = react.useState(depth < defaultOpenDepth);
-  if (data === null || data === void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground italic", children: "null" });
-  }
-  if (typeof data === "string") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-green-700 dark:text-green-400", children: [
-      '"',
-      data,
-      '"'
-    ] });
-  }
-  if (typeof data === "number" || typeof data === "boolean") {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-blue-700 dark:text-blue-400", children: String(data) });
-  }
-  if (typeof data !== "object") {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: String(data) });
-  }
   const isArray = Array.isArray(data);
-  const entries = isArray ? data.map((v, i) => [i, v]) : Object.entries(data);
-  const [openB, closeB] = isArray ? ["[", "]"] : ["{", "}"];
+  const entries = data !== null && typeof data === "object" ? Object.entries(data) : [];
+  const prefix = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    sequenceItem && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "- " }),
+    name !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 [[data-theme=dark]_&]:text-purple-400", children: format === "yaml" ? yamlString(name) : name }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: ": " })
+    ] })
+  ] });
   if (entries.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
-      openB,
-      closeB
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-[var(--json-view-row-space)]", children: [
+      prefix,
+      /* @__PURE__ */ jsxRuntime.jsx(JsonViewScalar, { data, format })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-mono", style: { paddingLeft: depth > 0 ? "12px" : "0" }, children: [
+  const [openB, closeB] = isArray ? ["[", "]"] : ["{", "}"];
+  const summary = `${entries.length} ${isArray ? entries.length === 1 ? "item" : "items" : entries.length === 1 ? "key" : "keys"}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
+      button.Button,
       {
-        className: "cursor-pointer hover:bg-accent rounded px-0.5 select-none",
+        variant: "ghost",
+        type: "button",
+        "aria-expanded": open,
+        "aria-label": `${open ? "Collapse" : "Expand"} ${name ?? "value"}`,
+        className: "h-auto max-w-full justify-start gap-0 rounded px-0 py-[var(--json-view-row-space)] text-left font-normal text-[length:inherit] leading-[inherit] whitespace-pre-wrap [&_svg]:size-[0.75em]",
         onClick: () => setOpen(!open),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs mr-1", children: open ? "▼" : "▶" }),
-          name && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 dark:text-purple-400", children: name }),
-          name && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: ": " }),
-          !open && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
-            openB,
-            " ",
-            entries.length,
-            " ",
-            isArray ? entries.length === 1 ? "item" : "items" : entries.length === 1 ? "key" : "keys",
-            " ",
-            closeB
-          ] }),
-          open && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: openB })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            UiChevronRight.UiChevronRight,
+            {
+              "aria-hidden": "true",
+              className: utils.cn(
+                "mr-1 shrink-0 text-muted-foreground",
+                open && "rotate-90"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            prefix,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: format === "json" ? open ? openB : `${openB} ${summary} ${closeB}` : !open || name === void 0 && !sequenceItem ? summary : null })
+          ] })
         ]
       }
     ),
     open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      entries.map(([key, val]) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-3 border-l border-border ml-1", children: typeof val === "object" && val !== null ? /* @__PURE__ */ jsxRuntime.jsx(
-        JsonView,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-l border-border pl-[var(--json-view-indent)]", children: entries.map(([key, val]) => /* @__PURE__ */ jsxRuntime.jsx(
+        JsonViewNode,
         {
           data: val,
-          name: String(key),
+          ...!isArray ? { name: key } : {},
+          sequenceItem: isArray && format === "yaml",
           depth: depth + 1,
-          defaultOpenDepth
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 dark:text-purple-400", children: isArray ? "" : String(key) }),
-        !isArray && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: ": " }),
-        /* @__PURE__ */ jsxRuntime.jsx(JsonView, { data: val, depth: depth + 1, defaultOpenDepth })
-      ] }) }, key)),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: closeB })
+          defaultOpenDepth,
+          format
+        },
+        key
+      )) }),
+      format === "json" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground py-[var(--json-view-row-space)]", children: closeB })
     ] })
   ] });
 }
+function JsonViewScalar({
+  data,
+  format
+}) {
+  if (data === null || data === void 0)
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground italic", children: "null" });
+  if (typeof data === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-700 [[data-theme=dark]_&]:text-green-400", children: format === "yaml" ? yamlString(data) : JSON.stringify(data) });
+  }
+  if (typeof data === "number" || typeof data === "boolean") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-blue-700 [[data-theme=dark]_&]:text-blue-400", children: String(data) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: typeof data === "object" ? Array.isArray(data) ? "[]" : "{}" : String(data) });
+}
+function yamlString(value) {
+  return yaml.stringify(value, {
+    lineWidth: 0,
+    defaultStringType: value.includes("\n") ? "QUOTE_DOUBLE" : "PLAIN"
+  }).trimEnd();
+}
 exports.JsonView = JsonView;
 //# sourceMappingURL=JsonView.cjs.map

package/dist/data/JsonView.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JsonView.cjs","sources":["../../src/data/JsonView.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nexport type JsonViewProps = {\n  /** JSON-like value to render. */\n  data: unknown;\n  /** Optional property name displayed before nested object/array values. */\n  name?: string;\n  /** Current nesting depth; callers usually leave this unset. */\n  depth?: number;\n  /** Depth that starts expanded by default. */\n  defaultOpenDepth?: number;\n};\n\nexport function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }: JsonViewProps) {\n  const [open, setOpen] = useState(depth < defaultOpenDepth);\n\n  if (data === null || data === undefined) {\n    return <span className=\"text-muted-foreground italic\">null</span>;\n  }\n\n  if (typeof data === \"string\") {\n    return <span className=\"text-green-700 dark:text-green-400\">\"{data}\"</span>;\n  }\n\n  if (typeof data === \"number\" || typeof data === \"boolean\") {\n    return <span className=\"text-blue-700 dark:text-blue-400\">{String(data)}</span>;\n  }\n\n  if (typeof data !== \"object\") {\n    return <span className=\"text-muted-foreground\">{String(data)}</span>;\n  }\n\n  const isArray = Array.isArray(data);\n  const entries: Array<[string | number, unknown]> = isArray\n    ? (data as unknown[]).map((v, i) => [i, v])\n    : Object.entries(data as Record<string, unknown>);\n  const [openB, closeB] = isArray ? [\"[\", \"]\"] : [\"{\", \"}\"];\n\n  if (entries.length === 0) {\n    return (\n      <span className=\"text-muted-foreground\">\n        {openB}\n        {closeB}\n      </span>\n    );\n  }\n\n  return (\n    <div className=\"text-sm font-mono\" style={{ paddingLeft: depth > 0 ? \"12px\" : \"0\" }}>\n      <span\n        className=\"cursor-pointer hover:bg-accent rounded px-0.5 select-none\"\n        onClick={() => setOpen(!open)}\n      >\n        <span className=\"text-muted-foreground text-xs mr-1\">{open ? \"▼\" : \"▶\"}</span>\n        {name && <span className=\"text-purple-600 dark:text-purple-400\">{name}</span>}\n        {name && <span className=\"text-muted-foreground\">: </span>}\n        {!open && (\n          <span className=\"text-muted-foreground\">\n            {openB} {entries.length}{\" \"}\n            {isArray\n              ? entries.length === 1\n                ? \"item\"\n                : \"items\"\n              : entries.length === 1\n                ? \"key\"\n                : \"keys\"}{\" \"}\n            {closeB}\n          </span>\n        )}\n        {open && <span className=\"text-muted-foreground\">{openB}</span>}\n      </span>\n      {open && (\n        <>\n          {entries.map(([key, val]) => (\n            <div key={key} className=\"pl-3 border-l border-border ml-1\">\n              {typeof val === \"object\" && val !== null ? (\n                <JsonView\n                  data={val}\n                  name={String(key)}\n                  depth={depth + 1}\n                  defaultOpenDepth={defaultOpenDepth}\n                />\n              ) : (\n                <div>\n                  <span className=\"text-purple-600 dark:text-purple-400\">\n                    {isArray ? \"\" : String(key)}\n                  </span>\n                  {!isArray && <span className=\"text-muted-foreground\">: </span>}\n                  <JsonView data={val} depth={depth + 1} defaultOpenDepth={defaultOpenDepth} />\n                </div>\n              )}\n            </div>\n          ))}\n          <span className=\"text-muted-foreground\">{closeB}</span>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","jsx","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"JsonView.cjs","sources":["../../src/data/JsonView.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { stringify } from \"yaml\";\nimport { Button } from \"../components/button\";\nimport { useDensityValue, type Density } from \"../hooks/use-density\";\nimport { UiChevronRight } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { JsonSource } from \"./json-view/JsonSource\";\nimport type { JsonViewOptions } from \"./json-view/types\";\n\nexport type JsonViewProps = JsonViewOptions &\n  (\n    | {\n        /** Parsed JSON-like value. Strings remain literal values. */\n        data: unknown;\n        source?: never;\n        inputFormat?: never;\n      }\n    | {\n        /** Raw JSON or NDJSON, including input interrupted at EOF. */\n        source: string;\n        /** Source encoding. This is independent of the YAML/JSON display format. */\n        inputFormat?: \"json\" | \"ndjson\";\n        data?: never;\n      }\n  );\n\nconst DENSITY_CLASSES: Record<Density, string> = {\n  compact:\n    \"text-xs leading-4 [--json-view-indent:0.75rem] [--json-view-row-space:0px]\",\n  comfortable:\n    \"text-sm leading-5 [--json-view-indent:1rem] [--json-view-row-space:1px]\",\n  spacious:\n    \"text-base leading-6 [--json-view-indent:1.25rem] [--json-view-row-space:2px]\",\n};\n\nexport function JsonView({\n  density,\n  format = \"yaml\",\n  ...props\n}: JsonViewProps) {\n  const inheritedDensity = useDensityValue();\n  const activeDensity = density ?? inheritedDensity;\n  const hasSource = Object.hasOwn(props, \"source\");\n  if (hasSource === Object.hasOwn(props, \"data\"))\n    throw new Error(\"JsonView requires exactly one of data or source\");\n  if (!hasSource && Object.hasOwn(props, \"inputFormat\"))\n    throw new Error(\"JsonView inputFormat requires source\");\n  if (hasSource && typeof props.source !== \"string\")\n    throw new Error(\"JsonView source must be a string\");\n  const { data, source, inputFormat = \"json\", ...options } = props;\n  return (\n    <div\n      data-format={format}\n      data-density={activeDensity}\n      className={cn(\n        \"font-mono whitespace-pre-wrap break-words\",\n        DENSITY_CLASSES[activeDensity],\n      )}\n    >\n      {hasSource && source !== undefined ? (\n        <JsonSource\n          source={source}\n          inputFormat={inputFormat}\n          renderValue={(value) => (\n            <JsonViewNode {...options} data={value} format={format} />\n          )}\n        />\n      ) : (\n        <JsonViewNode {...options} data={data} format={format} />\n      )}\n    </div>\n  );\n}\n\ntype JsonViewNodeProps = Omit<JsonViewOptions, \"density\"> & {\n  data: unknown;\n  format: \"yaml\" | \"json\";\n  sequenceItem?: boolean;\n};\n\nfunction JsonViewNode({\n  data,\n  name,\n  depth = 0,\n  defaultOpenDepth = 2,\n  format,\n  sequenceItem = false,\n}: JsonViewNodeProps) {\n  const [open, setOpen] = useState(depth < defaultOpenDepth);\n  const isArray = Array.isArray(data);\n  const entries =\n    data !== null && typeof data === \"object\" ? Object.entries(data) : [];\n  const prefix = (\n    <>\n      {sequenceItem && <span className=\"text-muted-foreground\">- </span>}\n      {name !== undefined && (\n        <>\n          <span className=\"text-purple-600 [[data-theme=dark]_&]:text-purple-400\">\n            {format === \"yaml\" ? yamlString(name) : name}\n          </span>\n          <span className=\"text-muted-foreground\">: </span>\n        </>\n      )}\n    </>\n  );\n  if (entries.length === 0) {\n    return (\n      <div className=\"py-[var(--json-view-row-space)]\">\n        {prefix}\n        <JsonViewScalar data={data} format={format} />\n      </div>\n    );\n  }\n  const [openB, closeB] = isArray ? [\"[\", \"]\"] : [\"{\", \"}\"];\n  const summary = `${entries.length} ${isArray ? (entries.length === 1 ? \"item\" : \"items\") : entries.length === 1 ? \"key\" : \"keys\"}`;\n  return (\n    <div>\n      <Button\n        variant=\"ghost\"\n        type=\"button\"\n        aria-expanded={open}\n        aria-label={`${open ? \"Collapse\" : \"Expand\"} ${name ?? \"value\"}`}\n        className=\"h-auto max-w-full justify-start gap-0 rounded px-0 py-[var(--json-view-row-space)] text-left font-normal text-[length:inherit] leading-[inherit] whitespace-pre-wrap [&_svg]:size-[0.75em]\"\n        onClick={() => setOpen(!open)}\n      >\n        <UiChevronRight\n          aria-hidden=\"true\"\n          className={cn(\n            \"mr-1 shrink-0 text-muted-foreground\",\n            open && \"rotate-90\",\n          )}\n        />\n        <span>\n          {prefix}\n          <span className=\"text-muted-foreground\">\n            {format === \"json\"\n              ? open\n                ? openB\n                : `${openB} ${summary} ${closeB}`\n              : !open || (name === undefined && !sequenceItem)\n                ? summary\n                : null}\n          </span>\n        </span>\n      </Button>\n      {open && (\n        <>\n          <div className=\"border-l border-border pl-[var(--json-view-indent)]\">\n            {entries.map(([key, val]) => (\n              <JsonViewNode\n                key={key}\n                data={val}\n                {...(!isArray ? { name: key } : {})}\n                sequenceItem={isArray && format === \"yaml\"}\n                depth={depth + 1}\n                defaultOpenDepth={defaultOpenDepth}\n                format={format}\n              />\n            ))}\n          </div>\n          {format === \"json\" && (\n            <div className=\"text-muted-foreground py-[var(--json-view-row-space)]\">\n              {closeB}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nfunction JsonViewScalar({\n  data,\n  format,\n}: Pick<JsonViewProps, \"data\" | \"format\">) {\n  if (data === null || data === undefined)\n    return <span className=\"text-muted-foreground italic\">null</span>;\n  if (typeof data === \"string\") {\n    return (\n      <span className=\"text-green-700 [[data-theme=dark]_&]:text-green-400\">\n        {format === \"yaml\" ? yamlString(data) : JSON.stringify(data)}\n      </span>\n    );\n  }\n  if (typeof data === \"number\" || typeof data === \"boolean\") {\n    return (\n      <span className=\"text-blue-700 [[data-theme=dark]_&]:text-blue-400\">\n        {String(data)}\n      </span>\n    );\n  }\n  return (\n    <span className=\"text-muted-foreground\">\n      {typeof data === \"object\"\n        ? Array.isArray(data)\n          ? \"[]\"\n          : \"{}\"\n        : String(data)}\n    </span>\n  );\n}\n\nfunction yamlString(value: string): string {\n  return stringify(value, {\n    lineWidth: 0,\n    defaultStringType: value.includes(\"\\n\") ? \"QUOTE_DOUBLE\" : \"PLAIN\",\n  }).trimEnd();\n}\n"],"names":["useDensityValue","jsx","cn","JsonSource","useState","jsxs","Fragment","Button","UiChevronRight","stringify"],"mappings":"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"}