@flanksource/clicky-ui 0.3.7 → 0.3.9

package/dist/data/ObjectGraph.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
 const Tree = require("./Tree.cjs");
 function ObjectGraph({
   roots,
@@ -9,7 +10,9 @@ function ObjectGraph({
   showControls,
   defaultOpenDepth = 2,
   renderLabel,
-  loadChildren
+  loadChildren,
+  onNodeSelect,
+  selectedId
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tree.Tree,
@@ -23,16 +26,48 @@ function ObjectGraph({
       ...showControls !== void 0 ? { showControls } : {},
       ...loadChildren ? { loadChildren, hasMoreChildren: (n) => n.expandable === true } : {},
       renderRow: ({ node, loading, error }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs", children: [
-        renderLabel ? renderLabel(node) : /* @__PURE__ */ jsxRuntime.jsx(DefaultObjectLabel, { node }),
+        renderLabel ? renderLabel(node) : /* @__PURE__ */ jsxRuntime.jsx(
+          DefaultObjectLabel,
+          {
+            node,
+            selected: selectedId != null && node.id === selectedId,
+            ...onNodeSelect ? { onSelect: onNodeSelect } : {}
+          }
+        ),
         loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: "…" }),
         error != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "break-all text-red-600", children: error instanceof Error ? error.message : String(error) })
       ] })
     }
   );
 }
-function DefaultObjectLabel({ node }) {
+function DefaultObjectLabel({
+  node,
+  onSelect,
+  selected = false
+}) {
+  const label = onSelect ? (
+    // A button so the label is a first-class click target; stopPropagation keeps
+    // the row's onClick (which toggles the node) from firing, so selecting a node
+    // never expands or collapses it.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onSelect(node);
+        },
+        title: "Select this path",
+        className: utils.cn(
+          "rounded px-0.5 text-left text-muted-foreground hover:text-foreground hover:underline",
+          selected && "bg-primary/15 text-foreground"
+        ),
+        children: node.label
+      }
+    )
+  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: node.label });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: node.label }),
+    label,
     node.type && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground/60", children: [
       "@",
       node.type

package/dist/data/ObjectGraph.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectGraph.cjs","sources":["../../src/data/ObjectGraph.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Tree } from \"./Tree\";\n\n// ObjectGraph renders a generic, type-agnostic expandable object/value\n// inspector — a bean's fields, a map's entries, a list's elements, a scalar\n// leaf. It is the shared home for what used to be per-feature object viewers\n// (e.g. an OGNL inspector): any producer maps its data into ObjectGraphNode and\n// gets the same tree, search, and lazy-expansion behaviour.\n\nexport type ObjectGraphNode = {\n  /** Stable unique key within the tree. */\n  id: string;\n  /** Display label (field name, map key, index, …). */\n  label: string;\n  /** Optional type annotation rendered as `@type`. */\n  type?: string;\n  /** Scalar value for a leaf; absent for containers. */\n  value?: string | number | boolean | null;\n  /** Free-form node kind hint (object|map|list|scalar|…). */\n  kind?: string;\n  /** Accessor path from the root (used by lazy expansion). */\n  path?: string;\n  /** Verbatim preview for an opaque node with no structured children. */\n  raw?: string;\n  /** Node can be expanded via loadChildren even with no inline children. */\n  expandable?: boolean;\n  /** Caller-opaque context (carried through, not rendered by default). */\n  metadata?: Record<string, unknown>;\n  children?: ObjectGraphNode[];\n};\n\nexport type ObjectGraphProps<T extends ObjectGraphNode = ObjectGraphNode> = {\n  roots: T[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  /** Open nodes shallower than this depth on first render (default 2). */\n  defaultOpenDepth?: number;\n  /** Override the row label rendering. */\n  renderLabel?: (node: T) => ReactNode;\n  /**\n   * Lazily fetch a node's children the first time an `expandable` node opens.\n   * When omitted, only inline `children` are shown.\n   */\n  loadChildren?: (node: T) => Promise<T[]>;\n};\n\nexport function ObjectGraph<T extends ObjectGraphNode = ObjectGraphNode>({\n  roots,\n  className,\n  empty,\n  showControls,\n  defaultOpenDepth = 2,\n  renderLabel,\n  loadChildren,\n}: ObjectGraphProps<T>) {\n  return (\n    <Tree<T>\n      roots={roots}\n      getKey={(n) => n.id}\n      getChildren={(n) => n.children as T[] | undefined}\n      defaultOpen={(_n, depth) => depth < defaultOpenDepth}\n      {...(className !== undefined ? { className } : {})}\n      {...(empty !== undefined ? { empty } : {})}\n      {...(showControls !== undefined ? { showControls } : {})}\n      {...(loadChildren ? { loadChildren, hasMoreChildren: (n: T) => n.expandable === true } : {})}\n      renderRow={({ node, loading, error }) => (\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs\">\n          {renderLabel ? renderLabel(node) : <DefaultObjectLabel node={node} />}\n          {loading && <span className=\"shrink-0 text-muted-foreground\">…</span>}\n          {error != null && (\n            <span className=\"break-all text-red-600\">\n              {error instanceof Error ? error.message : String(error)}\n            </span>\n          )}\n        </div>\n      )}\n    />\n  );\n}\n\nfunction DefaultObjectLabel({ node }: { node: ObjectGraphNode }) {\n  return (\n    <>\n      <span className=\"text-muted-foreground\">{node.label}</span>\n      {node.type && <span className=\"text-muted-foreground/60\">@{node.type}</span>}\n      {node.value != null ? (\n        <span className=\"break-all text-foreground\">{String(node.value)}</span>\n      ) : node.raw && !node.children ? (\n        <span className=\"break-all italic text-muted-foreground/70\">{node.raw}</span>\n      ) : null}\n    </>\n  );\n}\n"],"names":["jsx","Tree","jsxs","Fragment"],"mappings":";;;;AA+CO,SAAS,YAAyD;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AACF,GAAwB;AACtB,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,MAAM,EAAE;AAAA,MACjB,aAAa,CAAC,MAAM,EAAE;AAAA,MACtB,aAAa,CAAC,IAAI,UAAU,QAAQ;AAAA,MACnC,GAAI,cAAc,SAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MAC9C,GAAI,UAAU,SAAY,EAAE,MAAA,IAAU,CAAA;AAAA,MACtC,GAAI,iBAAiB,SAAY,EAAE,aAAA,IAAiB,CAAA;AAAA,MACpD,GAAI,eAAe,EAAE,cAAc,iBAAiB,CAAC,MAAS,EAAE,eAAe,KAAA,IAAS,CAAA;AAAA,MACzF,WAAW,CAAC,EAAE,MAAM,SAAS,YAC3BC,2BAAAA,KAAC,OAAA,EAAI,WAAU,sEACZ,UAAA;AAAA,QAAA,cAAc,YAAY,IAAI,IAAIF,2BAAAA,IAAC,sBAAmB,MAAY;AAAA,QAClE,WAAWA,2BAAAA,IAAC,QAAA,EAAK,WAAU,kCAAiC,UAAA,KAAC;AAAA,QAC7D,SAAS,QACRA,2BAAAA,IAAC,QAAA,EAAK,WAAU,0BACb,UAAA,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK,EAAA,CACxD;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,mBAAmB,EAAE,QAAmC;AAC/D,SACEE,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAH,2BAAAA,IAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,KAAK,OAAM;AAAA,IACnD,KAAK,QAAQE,gCAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA;AAAA,MAAA;AAAA,MAAE,KAAK;AAAA,IAAA,GAAK;AAAA,IACpE,KAAK,SAAS,OACbF,2BAAAA,IAAC,UAAK,WAAU,6BAA6B,UAAA,OAAO,KAAK,KAAK,EAAA,CAAE,IAC9D,KAAK,OAAO,CAAC,KAAK,WACpBA,2BAAAA,IAAC,UAAK,WAAU,6CAA6C,UAAA,KAAK,IAAA,CAAI,IACpE;AAAA,EAAA,GACN;AAEJ;;"}
+{"version":3,"file":"ObjectGraph.cjs","sources":["../../src/data/ObjectGraph.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Tree } from \"./Tree\";\n\n// ObjectGraph renders a generic, type-agnostic expandable object/value\n// inspector — a bean's fields, a map's entries, a list's elements, a scalar\n// leaf. It is the shared home for what used to be per-feature object viewers\n// (e.g. an OGNL inspector): any producer maps its data into ObjectGraphNode and\n// gets the same tree, search, and lazy-expansion behaviour.\n\nexport type ObjectGraphNode = {\n  /** Stable unique key within the tree. */\n  id: string;\n  /** Display label (field name, map key, index, …). */\n  label: string;\n  /** Optional type annotation rendered as `@type`. */\n  type?: string;\n  /** Scalar value for a leaf; absent for containers. */\n  value?: string | number | boolean | null;\n  /** Free-form node kind hint (object|map|list|scalar|…). */\n  kind?: string;\n  /** Accessor path from the root (used by lazy expansion). */\n  path?: string;\n  /** Verbatim preview for an opaque node with no structured children. */\n  raw?: string;\n  /** Node can be expanded via loadChildren even with no inline children. */\n  expandable?: boolean;\n  /** Caller-opaque context (carried through, not rendered by default). */\n  metadata?: Record<string, unknown>;\n  children?: ObjectGraphNode[];\n};\n\nexport type ObjectGraphProps<T extends ObjectGraphNode = ObjectGraphNode> = {\n  roots: T[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  /** Open nodes shallower than this depth on first render (default 2). */\n  defaultOpenDepth?: number;\n  /** Override the row label rendering. */\n  renderLabel?: (node: T) => ReactNode;\n  /**\n   * Lazily fetch a node's children the first time an `expandable` node opens.\n   * When omitted, only inline `children` are shown.\n   */\n  loadChildren?: (node: T) => Promise<T[]>;\n  /**\n   * Called when a node's label is clicked. This makes the label an actionable\n   * target (e.g. copy/drill its `path`) **without toggling expansion** — the\n   * chevron stays the only expand/collapse control. Omit for a static tree.\n   */\n  onNodeSelect?: (node: T) => void;\n  /** `id` of the currently-selected node; its label is highlighted. */\n  selectedId?: string;\n};\n\nexport function ObjectGraph<T extends ObjectGraphNode = ObjectGraphNode>({\n  roots,\n  className,\n  empty,\n  showControls,\n  defaultOpenDepth = 2,\n  renderLabel,\n  loadChildren,\n  onNodeSelect,\n  selectedId,\n}: ObjectGraphProps<T>) {\n  return (\n    <Tree<T>\n      roots={roots}\n      getKey={(n) => n.id}\n      getChildren={(n) => n.children as T[] | undefined}\n      defaultOpen={(_n, depth) => depth < defaultOpenDepth}\n      {...(className !== undefined ? { className } : {})}\n      {...(empty !== undefined ? { empty } : {})}\n      {...(showControls !== undefined ? { showControls } : {})}\n      {...(loadChildren ? { loadChildren, hasMoreChildren: (n: T) => n.expandable === true } : {})}\n      renderRow={({ node, loading, error }) => (\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs\">\n          {renderLabel ? (\n            renderLabel(node)\n          ) : (\n            <DefaultObjectLabel\n              node={node}\n              selected={selectedId != null && node.id === selectedId}\n              {...(onNodeSelect ? { onSelect: onNodeSelect } : {})}\n            />\n          )}\n          {loading && <span className=\"shrink-0 text-muted-foreground\">…</span>}\n          {error != null && (\n            <span className=\"break-all text-red-600\">\n              {error instanceof Error ? error.message : String(error)}\n            </span>\n          )}\n        </div>\n      )}\n    />\n  );\n}\n\nfunction DefaultObjectLabel<T extends ObjectGraphNode>({\n  node,\n  onSelect,\n  selected = false,\n}: {\n  node: T;\n  onSelect?: (node: T) => void;\n  selected?: boolean;\n}) {\n  const label = onSelect ? (\n    // A button so the label is a first-class click target; stopPropagation keeps\n    // the row's onClick (which toggles the node) from firing, so selecting a node\n    // never expands or collapses it.\n    <button\n      type=\"button\"\n      onClick={(e) => {\n        e.stopPropagation();\n        onSelect(node);\n      }}\n      title=\"Select this path\"\n      className={cn(\n        \"rounded px-0.5 text-left text-muted-foreground hover:text-foreground hover:underline\",\n        selected && \"bg-primary/15 text-foreground\",\n      )}\n    >\n      {node.label}\n    </button>\n  ) : (\n    <span className=\"text-muted-foreground\">{node.label}</span>\n  );\n  return (\n    <>\n      {label}\n      {node.type && <span className=\"text-muted-foreground/60\">@{node.type}</span>}\n      {node.value != null ? (\n        <span className=\"break-all text-foreground\">{String(node.value)}</span>\n      ) : node.raw && !node.children ? (\n        <span className=\"break-all italic text-muted-foreground/70\">{node.raw}</span>\n      ) : null}\n    </>\n  );\n}\n"],"names":["jsx","Tree","jsxs","cn","Fragment"],"mappings":";;;;;AAwDO,SAAS,YAAyD;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,MAAM,EAAE;AAAA,MACjB,aAAa,CAAC,MAAM,EAAE;AAAA,MACtB,aAAa,CAAC,IAAI,UAAU,QAAQ;AAAA,MACnC,GAAI,cAAc,SAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MAC9C,GAAI,UAAU,SAAY,EAAE,MAAA,IAAU,CAAA;AAAA,MACtC,GAAI,iBAAiB,SAAY,EAAE,aAAA,IAAiB,CAAA;AAAA,MACpD,GAAI,eAAe,EAAE,cAAc,iBAAiB,CAAC,MAAS,EAAE,eAAe,KAAA,IAAS,CAAA;AAAA,MACzF,WAAW,CAAC,EAAE,MAAM,SAAS,YAC3BC,2BAAAA,KAAC,OAAA,EAAI,WAAU,sEACZ,UAAA;AAAA,QAAA,cACC,YAAY,IAAI,IAEhBF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAU,cAAc,QAAQ,KAAK,OAAO;AAAA,YAC3C,GAAI,eAAe,EAAE,UAAU,iBAAiB,CAAA;AAAA,UAAC;AAAA,QAAA;AAAA,QAGrD,WAAWA,2BAAAA,IAAC,QAAA,EAAK,WAAU,kCAAiC,UAAA,KAAC;AAAA,QAC7D,SAAS,QACRA,2BAAAA,IAAC,QAAA,EAAK,WAAU,0BACb,UAAA,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK,EAAA,CACxD;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,mBAA8C;AAAA,EACrD;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAIG;AACD,QAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIZA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,CAAC,MAAM;AACd,YAAE,gBAAA;AACF,mBAAS,IAAI;AAAA,QACf;AAAA,QACA,OAAM;AAAA,QACN,WAAWG,MAAAA;AAAAA,UACT;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAGb,UAAA,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,MAGRH,2BAAAA,IAAC,QAAA,EAAK,WAAU,yBAAyB,eAAK,OAAM;AAEtD,SACEE,2BAAAA,KAAAE,qBAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACA,KAAK,QAAQF,gCAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA;AAAA,MAAA;AAAA,MAAE,KAAK;AAAA,IAAA,GAAK;AAAA,IACpE,KAAK,SAAS,OACbF,2BAAAA,IAAC,UAAK,WAAU,6BAA6B,UAAA,OAAO,KAAK,KAAK,EAAA,CAAE,IAC9D,KAAK,OAAO,CAAC,KAAK,WACpBA,2BAAAA,IAAC,UAAK,WAAU,6CAA6C,UAAA,KAAK,IAAA,CAAI,IACpE;AAAA,EAAA,GACN;AAEJ;;"}

package/dist/data/ObjectGraph.d.ts

@@ -34,6 +34,14 @@ export type ObjectGraphProps<T extends ObjectGraphNode = ObjectGraphNode> = {
      * When omitted, only inline `children` are shown.
      */
     loadChildren?: (node: T) => Promise<T[]>;
+    /**
+     * Called when a node's label is clicked. This makes the label an actionable
+     * target (e.g. copy/drill its `path`) **without toggling expansion** — the
+     * chevron stays the only expand/collapse control. Omit for a static tree.
+     */
+    onNodeSelect?: (node: T) => void;
+    /** `id` of the currently-selected node; its label is highlighted. */
+    selectedId?: string;
 };
-export declare function ObjectGraph<T extends ObjectGraphNode = ObjectGraphNode>({ roots, className, empty, showControls, defaultOpenDepth, renderLabel, loadChildren, }: ObjectGraphProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ObjectGraph<T extends ObjectGraphNode = ObjectGraphNode>({ roots, className, empty, showControls, defaultOpenDepth, renderLabel, loadChildren, onNodeSelect, selectedId, }: ObjectGraphProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ObjectGraph.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ObjectGraph.d.ts","sourceRoot":"","sources":["../../src/data/ObjectGraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,MAAM,MAAM,eAAe,GAAG;IAC5B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IACzC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,IAAI;IAC1E,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wCAAwC;IACxC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;CAC1C,CAAC;AAEF,wBAAgB,WAAW,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,EAAE,EACvE,KAAK,EACL,SAAS,EACT,KAAK,EACL,YAAY,EACZ,gBAAoB,EACpB,WAAW,EACX,YAAY,GACb,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAwBrB"}
+{"version":3,"file":"ObjectGraph.d.ts","sourceRoot":"","sources":["../../src/data/ObjectGraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,MAAM,MAAM,eAAe,GAAG;IAC5B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IACzC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,IAAI;IAC1E,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wCAAwC;IACxC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IACzC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACjC,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,WAAW,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,EAAE,EACvE,KAAK,EACL,SAAS,EACT,KAAK,EACL,YAAY,EACZ,gBAAoB,EACpB,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,GACX,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAgCrB"}

package/dist/data/ObjectGraph.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
 import { Tree } from "./Tree.js";
 function ObjectGraph({
   roots,
@@ -7,7 +8,9 @@ function ObjectGraph({
   showControls,
   defaultOpenDepth = 2,
   renderLabel,
-  loadChildren
+  loadChildren,
+  onNodeSelect,
+  selectedId
 }) {
   return /* @__PURE__ */ jsx(
     Tree,
@@ -21,16 +24,48 @@ function ObjectGraph({
       ...showControls !== void 0 ? { showControls } : {},
       ...loadChildren ? { loadChildren, hasMoreChildren: (n) => n.expandable === true } : {},
       renderRow: ({ node, loading, error }) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs", children: [
-        renderLabel ? renderLabel(node) : /* @__PURE__ */ jsx(DefaultObjectLabel, { node }),
+        renderLabel ? renderLabel(node) : /* @__PURE__ */ jsx(
+          DefaultObjectLabel,
+          {
+            node,
+            selected: selectedId != null && node.id === selectedId,
+            ...onNodeSelect ? { onSelect: onNodeSelect } : {}
+          }
+        ),
         loading && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: "…" }),
         error != null && /* @__PURE__ */ jsx("span", { className: "break-all text-red-600", children: error instanceof Error ? error.message : String(error) })
       ] })
     }
   );
 }
-function DefaultObjectLabel({ node }) {
+function DefaultObjectLabel({
+  node,
+  onSelect,
+  selected = false
+}) {
+  const label = onSelect ? (
+    // A button so the label is a first-class click target; stopPropagation keeps
+    // the row's onClick (which toggles the node) from firing, so selecting a node
+    // never expands or collapses it.
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onSelect(node);
+        },
+        title: "Select this path",
+        className: cn(
+          "rounded px-0.5 text-left text-muted-foreground hover:text-foreground hover:underline",
+          selected && "bg-primary/15 text-foreground"
+        ),
+        children: node.label
+      }
+    )
+  ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: node.label });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: node.label }),
+    label,
     node.type && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60", children: [
       "@",
       node.type

package/dist/data/ObjectGraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectGraph.js","sources":["../../src/data/ObjectGraph.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Tree } from \"./Tree\";\n\n// ObjectGraph renders a generic, type-agnostic expandable object/value\n// inspector — a bean's fields, a map's entries, a list's elements, a scalar\n// leaf. It is the shared home for what used to be per-feature object viewers\n// (e.g. an OGNL inspector): any producer maps its data into ObjectGraphNode and\n// gets the same tree, search, and lazy-expansion behaviour.\n\nexport type ObjectGraphNode = {\n  /** Stable unique key within the tree. */\n  id: string;\n  /** Display label (field name, map key, index, …). */\n  label: string;\n  /** Optional type annotation rendered as `@type`. */\n  type?: string;\n  /** Scalar value for a leaf; absent for containers. */\n  value?: string | number | boolean | null;\n  /** Free-form node kind hint (object|map|list|scalar|…). */\n  kind?: string;\n  /** Accessor path from the root (used by lazy expansion). */\n  path?: string;\n  /** Verbatim preview for an opaque node with no structured children. */\n  raw?: string;\n  /** Node can be expanded via loadChildren even with no inline children. */\n  expandable?: boolean;\n  /** Caller-opaque context (carried through, not rendered by default). */\n  metadata?: Record<string, unknown>;\n  children?: ObjectGraphNode[];\n};\n\nexport type ObjectGraphProps<T extends ObjectGraphNode = ObjectGraphNode> = {\n  roots: T[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  /** Open nodes shallower than this depth on first render (default 2). */\n  defaultOpenDepth?: number;\n  /** Override the row label rendering. */\n  renderLabel?: (node: T) => ReactNode;\n  /**\n   * Lazily fetch a node's children the first time an `expandable` node opens.\n   * When omitted, only inline `children` are shown.\n   */\n  loadChildren?: (node: T) => Promise<T[]>;\n};\n\nexport function ObjectGraph<T extends ObjectGraphNode = ObjectGraphNode>({\n  roots,\n  className,\n  empty,\n  showControls,\n  defaultOpenDepth = 2,\n  renderLabel,\n  loadChildren,\n}: ObjectGraphProps<T>) {\n  return (\n    <Tree<T>\n      roots={roots}\n      getKey={(n) => n.id}\n      getChildren={(n) => n.children as T[] | undefined}\n      defaultOpen={(_n, depth) => depth < defaultOpenDepth}\n      {...(className !== undefined ? { className } : {})}\n      {...(empty !== undefined ? { empty } : {})}\n      {...(showControls !== undefined ? { showControls } : {})}\n      {...(loadChildren ? { loadChildren, hasMoreChildren: (n: T) => n.expandable === true } : {})}\n      renderRow={({ node, loading, error }) => (\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs\">\n          {renderLabel ? renderLabel(node) : <DefaultObjectLabel node={node} />}\n          {loading && <span className=\"shrink-0 text-muted-foreground\">…</span>}\n          {error != null && (\n            <span className=\"break-all text-red-600\">\n              {error instanceof Error ? error.message : String(error)}\n            </span>\n          )}\n        </div>\n      )}\n    />\n  );\n}\n\nfunction DefaultObjectLabel({ node }: { node: ObjectGraphNode }) {\n  return (\n    <>\n      <span className=\"text-muted-foreground\">{node.label}</span>\n      {node.type && <span className=\"text-muted-foreground/60\">@{node.type}</span>}\n      {node.value != null ? (\n        <span className=\"break-all text-foreground\">{String(node.value)}</span>\n      ) : node.raw && !node.children ? (\n        <span className=\"break-all italic text-muted-foreground/70\">{node.raw}</span>\n      ) : null}\n    </>\n  );\n}\n"],"names":[],"mappings":";;AA+CO,SAAS,YAAyD;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AACF,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,MAAM,EAAE;AAAA,MACjB,aAAa,CAAC,MAAM,EAAE;AAAA,MACtB,aAAa,CAAC,IAAI,UAAU,QAAQ;AAAA,MACnC,GAAI,cAAc,SAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MAC9C,GAAI,UAAU,SAAY,EAAE,MAAA,IAAU,CAAA;AAAA,MACtC,GAAI,iBAAiB,SAAY,EAAE,aAAA,IAAiB,CAAA;AAAA,MACpD,GAAI,eAAe,EAAE,cAAc,iBAAiB,CAAC,MAAS,EAAE,eAAe,KAAA,IAAS,CAAA;AAAA,MACzF,WAAW,CAAC,EAAE,MAAM,SAAS,YAC3B,qBAAC,OAAA,EAAI,WAAU,sEACZ,UAAA;AAAA,QAAA,cAAc,YAAY,IAAI,IAAI,oBAAC,sBAAmB,MAAY;AAAA,QAClE,WAAW,oBAAC,QAAA,EAAK,WAAU,kCAAiC,UAAA,KAAC;AAAA,QAC7D,SAAS,QACR,oBAAC,QAAA,EAAK,WAAU,0BACb,UAAA,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK,EAAA,CACxD;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,mBAAmB,EAAE,QAAmC;AAC/D,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,KAAK,OAAM;AAAA,IACnD,KAAK,QAAQ,qBAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA;AAAA,MAAA;AAAA,MAAE,KAAK;AAAA,IAAA,GAAK;AAAA,IACpE,KAAK,SAAS,OACb,oBAAC,UAAK,WAAU,6BAA6B,UAAA,OAAO,KAAK,KAAK,EAAA,CAAE,IAC9D,KAAK,OAAO,CAAC,KAAK,WACpB,oBAAC,UAAK,WAAU,6CAA6C,UAAA,KAAK,IAAA,CAAI,IACpE;AAAA,EAAA,GACN;AAEJ;"}
+{"version":3,"file":"ObjectGraph.js","sources":["../../src/data/ObjectGraph.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Tree } from \"./Tree\";\n\n// ObjectGraph renders a generic, type-agnostic expandable object/value\n// inspector — a bean's fields, a map's entries, a list's elements, a scalar\n// leaf. It is the shared home for what used to be per-feature object viewers\n// (e.g. an OGNL inspector): any producer maps its data into ObjectGraphNode and\n// gets the same tree, search, and lazy-expansion behaviour.\n\nexport type ObjectGraphNode = {\n  /** Stable unique key within the tree. */\n  id: string;\n  /** Display label (field name, map key, index, …). */\n  label: string;\n  /** Optional type annotation rendered as `@type`. */\n  type?: string;\n  /** Scalar value for a leaf; absent for containers. */\n  value?: string | number | boolean | null;\n  /** Free-form node kind hint (object|map|list|scalar|…). */\n  kind?: string;\n  /** Accessor path from the root (used by lazy expansion). */\n  path?: string;\n  /** Verbatim preview for an opaque node with no structured children. */\n  raw?: string;\n  /** Node can be expanded via loadChildren even with no inline children. */\n  expandable?: boolean;\n  /** Caller-opaque context (carried through, not rendered by default). */\n  metadata?: Record<string, unknown>;\n  children?: ObjectGraphNode[];\n};\n\nexport type ObjectGraphProps<T extends ObjectGraphNode = ObjectGraphNode> = {\n  roots: T[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  /** Open nodes shallower than this depth on first render (default 2). */\n  defaultOpenDepth?: number;\n  /** Override the row label rendering. */\n  renderLabel?: (node: T) => ReactNode;\n  /**\n   * Lazily fetch a node's children the first time an `expandable` node opens.\n   * When omitted, only inline `children` are shown.\n   */\n  loadChildren?: (node: T) => Promise<T[]>;\n  /**\n   * Called when a node's label is clicked. This makes the label an actionable\n   * target (e.g. copy/drill its `path`) **without toggling expansion** — the\n   * chevron stays the only expand/collapse control. Omit for a static tree.\n   */\n  onNodeSelect?: (node: T) => void;\n  /** `id` of the currently-selected node; its label is highlighted. */\n  selectedId?: string;\n};\n\nexport function ObjectGraph<T extends ObjectGraphNode = ObjectGraphNode>({\n  roots,\n  className,\n  empty,\n  showControls,\n  defaultOpenDepth = 2,\n  renderLabel,\n  loadChildren,\n  onNodeSelect,\n  selectedId,\n}: ObjectGraphProps<T>) {\n  return (\n    <Tree<T>\n      roots={roots}\n      getKey={(n) => n.id}\n      getChildren={(n) => n.children as T[] | undefined}\n      defaultOpen={(_n, depth) => depth < defaultOpenDepth}\n      {...(className !== undefined ? { className } : {})}\n      {...(empty !== undefined ? { empty } : {})}\n      {...(showControls !== undefined ? { showControls } : {})}\n      {...(loadChildren ? { loadChildren, hasMoreChildren: (n: T) => n.expandable === true } : {})}\n      renderRow={({ node, loading, error }) => (\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs\">\n          {renderLabel ? (\n            renderLabel(node)\n          ) : (\n            <DefaultObjectLabel\n              node={node}\n              selected={selectedId != null && node.id === selectedId}\n              {...(onNodeSelect ? { onSelect: onNodeSelect } : {})}\n            />\n          )}\n          {loading && <span className=\"shrink-0 text-muted-foreground\">…</span>}\n          {error != null && (\n            <span className=\"break-all text-red-600\">\n              {error instanceof Error ? error.message : String(error)}\n            </span>\n          )}\n        </div>\n      )}\n    />\n  );\n}\n\nfunction DefaultObjectLabel<T extends ObjectGraphNode>({\n  node,\n  onSelect,\n  selected = false,\n}: {\n  node: T;\n  onSelect?: (node: T) => void;\n  selected?: boolean;\n}) {\n  const label = onSelect ? (\n    // A button so the label is a first-class click target; stopPropagation keeps\n    // the row's onClick (which toggles the node) from firing, so selecting a node\n    // never expands or collapses it.\n    <button\n      type=\"button\"\n      onClick={(e) => {\n        e.stopPropagation();\n        onSelect(node);\n      }}\n      title=\"Select this path\"\n      className={cn(\n        \"rounded px-0.5 text-left text-muted-foreground hover:text-foreground hover:underline\",\n        selected && \"bg-primary/15 text-foreground\",\n      )}\n    >\n      {node.label}\n    </button>\n  ) : (\n    <span className=\"text-muted-foreground\">{node.label}</span>\n  );\n  return (\n    <>\n      {label}\n      {node.type && <span className=\"text-muted-foreground/60\">@{node.type}</span>}\n      {node.value != null ? (\n        <span className=\"break-all text-foreground\">{String(node.value)}</span>\n      ) : node.raw && !node.children ? (\n        <span className=\"break-all italic text-muted-foreground/70\">{node.raw}</span>\n      ) : null}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;AAwDO,SAAS,YAAyD;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,MAAM,EAAE;AAAA,MACjB,aAAa,CAAC,MAAM,EAAE;AAAA,MACtB,aAAa,CAAC,IAAI,UAAU,QAAQ;AAAA,MACnC,GAAI,cAAc,SAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MAC9C,GAAI,UAAU,SAAY,EAAE,MAAA,IAAU,CAAA;AAAA,MACtC,GAAI,iBAAiB,SAAY,EAAE,aAAA,IAAiB,CAAA;AAAA,MACpD,GAAI,eAAe,EAAE,cAAc,iBAAiB,CAAC,MAAS,EAAE,eAAe,KAAA,IAAS,CAAA;AAAA,MACzF,WAAW,CAAC,EAAE,MAAM,SAAS,YAC3B,qBAAC,OAAA,EAAI,WAAU,sEACZ,UAAA;AAAA,QAAA,cACC,YAAY,IAAI,IAEhB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAU,cAAc,QAAQ,KAAK,OAAO;AAAA,YAC3C,GAAI,eAAe,EAAE,UAAU,iBAAiB,CAAA;AAAA,UAAC;AAAA,QAAA;AAAA,QAGrD,WAAW,oBAAC,QAAA,EAAK,WAAU,kCAAiC,UAAA,KAAC;AAAA,QAC7D,SAAS,QACR,oBAAC,QAAA,EAAK,WAAU,0BACb,UAAA,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK,EAAA,CACxD;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,mBAA8C;AAAA,EACrD;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAIG;AACD,QAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,CAAC,MAAM;AACd,YAAE,gBAAA;AACF,mBAAS,IAAI;AAAA,QACf;AAAA,QACA,OAAM;AAAA,QACN,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAGb,UAAA,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,MAGR,oBAAC,QAAA,EAAK,WAAU,yBAAyB,eAAK,OAAM;AAEtD,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACA,KAAK,QAAQ,qBAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA;AAAA,MAAA;AAAA,MAAE,KAAK;AAAA,IAAA,GAAK;AAAA,IACpE,KAAK,SAAS,OACb,oBAAC,UAAK,WAAU,6BAA6B,UAAA,OAAO,KAAK,KAAK,EAAA,CAAE,IAC9D,KAAK,OAAO,CAAC,KAAK,WACpB,oBAAC,UAAK,WAAU,6CAA6C,UAAA,KAAK,IAAA,CAAI,IACpE;AAAA,EAAA,GACN;AAEJ;"}

package/dist/data/version-info.cjs

@@ -15,9 +15,9 @@ function detectMode() {
 }
 function getVersionInfo() {
   return {
-    commit: read(() => "7b72fcb", ""),
-    tag: read(() => "clicky-ui@0.3.6", ""),
-    date: read(() => "2026-06-29T05:08:37.021Z", ""),
+    commit: read(() => "497ab24", ""),
+    tag: read(() => "clicky-ui@0.3.8", ""),
+    date: read(() => "2026-07-06T10:59:12.540Z", ""),
     dirty: read(() => true, false),
     mode: detectMode()
   };

package/dist/data/version-info.js

@@ -13,9 +13,9 @@ function detectMode() {
 }
 function getVersionInfo() {
   return {
-    commit: read(() => "7b72fcb", ""),
-    tag: read(() => "clicky-ui@0.3.6", ""),
-    date: read(() => "2026-06-29T05:08:20.947Z", ""),
+    commit: read(() => "497ab24", ""),
+    tag: read(() => "clicky-ui@0.3.8", ""),
+    date: read(() => "2026-07-06T10:58:57.956Z", ""),
     dirty: read(() => true, false),
     mode: detectMode()
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flanksource/clicky-ui",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.",
   "homepage": "https://github.com/flanksource/clicky-ui#readme",
   "bugs": "https://github.com/flanksource/clicky-ui/issues",
@@ -113,7 +113,7 @@
     "@tanstack/react-query": "^5.66.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "dompurify": "^3.4.7",
+    "dompurify": "^3.4.11",
     "jotai": "^2.20.1",
     "tailwind-merge": "^2.6.0"
   },
@@ -138,9 +138,9 @@
     "tailwindcss": "^4.2.4",
     "tsx": "^4.7.0",
     "typescript": "^5.7.2",
-    "vite": "^6.0.3",
+    "vite": "^6.4.3",
     "vite-plugin-dts": "^4.3.0",
-    "vitest": "^3.0.5"
+    "vitest": "^3.2.6"
   },
   "peerDependencies": {
     "@ai-sdk/react": "^3.0.0",