@flanksource/clicky-ui 0.2.4 → 0.2.6

package/dist/data/TreeNode.cjs

@@ -20,10 +20,18 @@ function TreeNode({
   rowClass,
   indentPx = 16,
   basePaddingPx = 8,
-  isSecondary
+  isSecondary,
+  hasMoreChildren,
+  loadChildren
 }) {
-  const children = getChildren(node);
+  const [loadedChildren, setLoadedChildren] = react.useState(null);
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const syncChildren = getChildren(node);
+  const children = loadedChildren ?? syncChildren;
   const hasChildren = ((children == null ? void 0 : children.length) ?? 0) > 0;
+  const lazyUnloaded = ((hasMoreChildren == null ? void 0 : hasMoreChildren(node)) ?? false) && loadedChildren === null;
+  const expandable = hasChildren || lazyUnloaded;
   const initialOpen = defaultOpen ? defaultOpen(node, depth) : depth < 1;
   const [open, setOpen] = react.useState(initialOpen);
   const prevExpandAll = react.useRef(expandAll);
@@ -40,8 +48,33 @@ function TreeNode({
     }
     prevExpandAll.current = expandAll;
   }, [expandAll, skipExpandAll]);
+  const loadRequested = react.useRef(false);
+  const nodeKey = getKey(node);
+  const loadKeyRef = react.useRef(nodeKey);
+  function loadLazyChildren() {
+    if (!loadChildren || loadRequested.current) return;
+    loadRequested.current = true;
+    loadKeyRef.current = nodeKey;
+    setLoading(true);
+    setError(null);
+    loadChildren(node).then((kids) => {
+      if (loadKeyRef.current !== nodeKey) return;
+      setLoadedChildren(kids);
+      setLoading(false);
+    }).catch((err) => {
+      if (loadKeyRef.current !== nodeKey) return;
+      loadRequested.current = false;
+      setError(err);
+      setLoading(false);
+    });
+  }
   function toggle() {
-    if (hasChildren) setOpen((o) => !o);
+    if (!expandable) return;
+    setOpen((o) => {
+      const next = !o;
+      if (next && lazyUnloaded) loadLazyChildren();
+      return next;
+    });
   }
   const defaultRowBg = isSelected ? "bg-primary/10 border-l-2 border-primary" : "hover:bg-accent";
   const rowClassName = rowClass ? rowClass(node, isSelected) : defaultRowBg;
@@ -49,7 +82,7 @@ function TreeNode({
     "div",
     {
       role: "treeitem",
-      "aria-expanded": hasChildren ? isOpen : void 0,
+      "aria-expanded": expandable ? isOpen : void 0,
       "aria-selected": isSelected,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -63,7 +96,7 @@ function TreeNode({
               toggle();
             },
             children: [
-              hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
+              expandable ? /* @__PURE__ */ jsxRuntime.jsx(
                 Icon.Icon,
                 {
                   icon: isOpen ? UiChevronDown.UiChevronDown : UiChevronRight.UiChevronRight,
@@ -76,7 +109,9 @@ function TreeNode({
                 open: isOpen,
                 selected: isSelected,
                 hasChildren,
-                toggle
+                toggle,
+                loading,
+                error
               })
             ]
           }
@@ -97,7 +132,9 @@ function TreeNode({
             ...defaultOpen ? { defaultOpen } : {},
             ...onSelect ? { onSelect } : {},
             ...rowClass ? { rowClass } : {},
-            ...isSecondary ? { isSecondary } : {}
+            ...isSecondary ? { isSecondary } : {},
+            ...hasMoreChildren ? { hasMoreChildren } : {},
+            ...loadChildren ? { loadChildren } : {}
           },
           getKey(child)
         )) })

package/dist/data/TreeNode.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.cjs","sources":["../../src/data/TreeNode.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"./Icon\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\n\nexport type TreeRowContext<T> = {\n  node: T;\n  depth: number;\n  open: boolean;\n  selected: boolean;\n  hasChildren: boolean;\n  toggle: () => void;\n};\n\nexport type TreeNodeProps<T> = {\n  node: T;\n  depth?: number;\n  expandAll?: boolean | null;\n  forcedOpenKeys?: Set<string | number> | null;\n  selected?: T | null;\n  defaultOpen?: (node: T, depth: number) => boolean;\n  getChildren: (node: T) => T[] | undefined;\n  getKey: (node: T) => string | number;\n  onSelect?: (node: T) => void;\n  renderRow: (ctx: TreeRowContext<T>) => ReactNode;\n  rowClass?: (node: T, selected: boolean) => string;\n  indentPx?: number;\n  basePaddingPx?: number;\n  /**\n   * Marks a node as a **secondary child** of its parent. Secondary\n   * children keep the full tree structure (they render, they can be\n   * opened manually) but opt out of the bulk behaviours a caller\n   * typically wants when they click the toolbar:\n   *\n   *  - Tree-wide filter: their text is skipped during match detection\n   *    so typing in the search box never surfaces a row because one\n   *    of its secondary children happened to match.\n   *  - Expand all: secondary nodes stay at their default-open state\n   *    instead of being forced open, preventing 28k field rows from\n   *    flooding the viewport when an operator hits the button on a\n   *    schema with hundreds of tables.\n   *\n   * Default: every node is primary (returns false).\n   */\n  isSecondary?: (node: T) => boolean;\n};\n\nexport function TreeNode<T>({\n  node,\n  depth = 0,\n  expandAll = null,\n  forcedOpenKeys = null,\n  selected = null,\n  defaultOpen,\n  getChildren,\n  getKey,\n  onSelect,\n  renderRow,\n  rowClass,\n  indentPx = 16,\n  basePaddingPx = 8,\n  isSecondary,\n}: TreeNodeProps<T>) {\n  const children = getChildren(node);\n  const hasChildren = (children?.length ?? 0) > 0;\n  const initialOpen = defaultOpen ? defaultOpen(node, depth) : depth < 1;\n  const [open, setOpen] = useState(initialOpen);\n  const prevExpandAll = useRef(expandAll);\n  const isSelected = selected === node;\n  const key = getKey(node);\n  const isForcedOpen = forcedOpenKeys?.has(key) ?? false;\n  const isOpen = isForcedOpen || open;\n  // A node opts out of bulk expand-all in two distinct cases:\n  //\n  //  1. The node itself is secondary (its edge from the parent is\n  //     secondary) — rare at the root, but the rule is symmetric.\n  //  2. All of the node's children are secondary — the common case.\n  //     This is what keeps an \"Expand all\" on a schema tree from\n  //     flooding the viewport with every table's field rows: the\n  //     table opens to nothing structural worth seeing in bulk, so\n  //     we leave it closed until the operator clicks it manually.\n  //\n  // In both cases the manual toggle still works, and filter matches\n  // still force the row open via forcedOpenKeys, so users never\n  // lose access — they just don't get auto-flooded.\n  const secondaryNode = isSecondary?.(node) ?? false;\n  const childrenAllSecondary =\n    hasChildren && isSecondary != null && children!.every((c) => isSecondary(c));\n  const skipExpandAll = secondaryNode || childrenAllSecondary;\n\n  useEffect(() => {\n    if (expandAll !== null && expandAll !== prevExpandAll.current && !skipExpandAll) {\n      setOpen(expandAll);\n    }\n    prevExpandAll.current = expandAll;\n  }, [expandAll, skipExpandAll]);\n\n  function toggle() {\n    if (hasChildren) setOpen((o) => !o);\n  }\n\n  const defaultRowBg = isSelected ? \"bg-primary/10 border-l-2 border-primary\" : \"hover:bg-accent\";\n  const rowClassName = rowClass ? rowClass(node, isSelected) : defaultRowBg;\n\n  return (\n    <div\n      role=\"treeitem\"\n      aria-expanded={hasChildren ? isOpen : undefined}\n      aria-selected={isSelected}\n    >\n      <div\n        className={cn(\"flex items-center gap-1.5 py-1 px-2 cursor-pointer text-sm\", rowClassName)}\n        style={{ paddingLeft: `${depth * indentPx + basePaddingPx}px` }}\n        onClick={(e) => {\n          e.stopPropagation();\n          onSelect?.(node);\n          toggle();\n        }}\n      >\n        {hasChildren ? (\n          <Icon\n            icon={isOpen ? UiChevronDown : UiChevronRight}\n            className=\"text-muted-foreground text-xs w-3\"\n          />\n        ) : (\n          <span className=\"w-3 shrink-0\" aria-hidden />\n        )}\n        {renderRow({\n          node,\n          depth,\n          open: isOpen,\n          selected: isSelected,\n          hasChildren,\n          toggle,\n        })}\n      </div>\n      {isOpen && hasChildren && (\n        <div role=\"group\">\n          {children!.map((child) => (\n            <TreeNode\n              key={getKey(child)}\n              node={child}\n              depth={depth + 1}\n              expandAll={expandAll}\n              forcedOpenKeys={forcedOpenKeys}\n              selected={selected}\n              getChildren={getChildren}\n              getKey={getKey}\n              renderRow={renderRow}\n              indentPx={indentPx}\n              basePaddingPx={basePaddingPx}\n              {...(defaultOpen ? { defaultOpen } : {})}\n              {...(onSelect ? { onSelect } : {})}\n              {...(rowClass ? { rowClass } : {})}\n              {...(isSecondary ? { isSecondary } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","jsxs","cn","jsx","Icon","UiChevronDown","UiChevronRight"],"mappings":"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"}
+{"version":3,"file":"TreeNode.cjs","sources":["../../src/data/TreeNode.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"./Icon\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\n\nexport type TreeRowContext<T> = {\n  node: T;\n  depth: number;\n  open: boolean;\n  selected: boolean;\n  hasChildren: boolean;\n  toggle: () => void;\n  /** True while this node's lazy children are being fetched via loadChildren. */\n  loading: boolean;\n  /** The rejection value from loadChildren, or null when there was no error. */\n  error: unknown;\n};\n\nexport type TreeNodeProps<T> = {\n  node: T;\n  depth?: number;\n  expandAll?: boolean | null;\n  forcedOpenKeys?: Set<string | number> | null;\n  selected?: T | null;\n  defaultOpen?: (node: T, depth: number) => boolean;\n  getChildren: (node: T) => T[] | undefined;\n  getKey: (node: T) => string | number;\n  onSelect?: (node: T) => void;\n  renderRow: (ctx: TreeRowContext<T>) => ReactNode;\n  rowClass?: (node: T, selected: boolean) => string;\n  indentPx?: number;\n  basePaddingPx?: number;\n  /**\n   * Reports that a node has children that are not yet loaded — it renders an\n   * expand chevron even when `getChildren` returns nothing. On the first open\n   * the node fetches them via `loadChildren`. Without this (the default), a\n   * node is expandable only when `getChildren` already returns children.\n   */\n  hasMoreChildren?: (node: T) => boolean;\n  /**\n   * Lazily fetch a node's children the first time it is opened. Resolves to the\n   * child nodes (which may themselves be lazy). A rejection is surfaced to\n   * `renderRow` via `ctx.error` and is not retried until the node is collapsed\n   * and reopened. Required for any node `hasMoreChildren` returns true for.\n   */\n  loadChildren?: (node: T) => Promise<T[]>;\n  /**\n   * Marks a node as a **secondary child** of its parent. Secondary\n   * children keep the full tree structure (they render, they can be\n   * opened manually) but opt out of the bulk behaviours a caller\n   * typically wants when they click the toolbar:\n   *\n   *  - Tree-wide filter: their text is skipped during match detection\n   *    so typing in the search box never surfaces a row because one\n   *    of its secondary children happened to match.\n   *  - Expand all: secondary nodes stay at their default-open state\n   *    instead of being forced open, preventing 28k field rows from\n   *    flooding the viewport when an operator hits the button on a\n   *    schema with hundreds of tables.\n   *\n   * Default: every node is primary (returns false).\n   */\n  isSecondary?: (node: T) => boolean;\n};\n\nexport function TreeNode<T>({\n  node,\n  depth = 0,\n  expandAll = null,\n  forcedOpenKeys = null,\n  selected = null,\n  defaultOpen,\n  getChildren,\n  getKey,\n  onSelect,\n  renderRow,\n  rowClass,\n  indentPx = 16,\n  basePaddingPx = 8,\n  isSecondary,\n  hasMoreChildren,\n  loadChildren,\n}: TreeNodeProps<T>) {\n  // Lazily-fetched children take precedence over the synchronous ones once a\n  // load has resolved; until then `loadedChildren` is null and we fall back to\n  // getChildren. A node can be \"lazy\" (hasMoreChildren) with no sync children.\n  const [loadedChildren, setLoadedChildren] = useState<T[] | null>(null);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<unknown>(null);\n  const syncChildren = getChildren(node);\n  const children = loadedChildren ?? syncChildren;\n  const hasChildren = (children?.length ?? 0) > 0;\n  const lazyUnloaded = (hasMoreChildren?.(node) ?? false) && loadedChildren === null;\n  // The chevron shows when there is something to reveal: either real children\n  // are present, or the node is lazy and has not been loaded yet.\n  const expandable = hasChildren || lazyUnloaded;\n  const initialOpen = defaultOpen ? defaultOpen(node, depth) : depth < 1;\n  const [open, setOpen] = useState(initialOpen);\n  const prevExpandAll = useRef(expandAll);\n  const isSelected = selected === node;\n  const key = getKey(node);\n  const isForcedOpen = forcedOpenKeys?.has(key) ?? false;\n  const isOpen = isForcedOpen || open;\n  // A node opts out of bulk expand-all in two distinct cases:\n  //\n  //  1. The node itself is secondary (its edge from the parent is\n  //     secondary) — rare at the root, but the rule is symmetric.\n  //  2. All of the node's children are secondary — the common case.\n  //     This is what keeps an \"Expand all\" on a schema tree from\n  //     flooding the viewport with every table's field rows: the\n  //     table opens to nothing structural worth seeing in bulk, so\n  //     we leave it closed until the operator clicks it manually.\n  //\n  // In both cases the manual toggle still works, and filter matches\n  // still force the row open via forcedOpenKeys, so users never\n  // lose access — they just don't get auto-flooded.\n  const secondaryNode = isSecondary?.(node) ?? false;\n  const childrenAllSecondary =\n    hasChildren && isSecondary != null && children!.every((c) => isSecondary(c));\n  const skipExpandAll = secondaryNode || childrenAllSecondary;\n\n  useEffect(() => {\n    if (expandAll !== null && expandAll !== prevExpandAll.current && !skipExpandAll) {\n      setOpen(expandAll);\n    }\n    prevExpandAll.current = expandAll;\n  }, [expandAll, skipExpandAll]);\n\n  // Guards a lazy fetch so a node loads its children at most once per mount and\n  // a resolution arriving after the node was reused (key changed) is ignored.\n  const loadRequested = useRef(false);\n  const nodeKey = getKey(node);\n  const loadKeyRef = useRef(nodeKey);\n\n  function loadLazyChildren() {\n    if (!loadChildren || loadRequested.current) return;\n    loadRequested.current = true;\n    loadKeyRef.current = nodeKey;\n    setLoading(true);\n    setError(null);\n    loadChildren(node)\n      .then((kids) => {\n        if (loadKeyRef.current !== nodeKey) return;\n        setLoadedChildren(kids);\n        setLoading(false);\n      })\n      .catch((err) => {\n        if (loadKeyRef.current !== nodeKey) return;\n        // Surfaced to renderRow via ctx.error; allow a retry on re-toggle.\n        loadRequested.current = false;\n        setError(err);\n        setLoading(false);\n      });\n  }\n\n  function toggle() {\n    if (!expandable) return;\n    setOpen((o) => {\n      const next = !o;\n      // Only fetch when transitioning into the open state, so collapsing a\n      // not-yet-loaded (e.g. previously-failed) lazy node never triggers a load.\n      if (next && lazyUnloaded) loadLazyChildren();\n      return next;\n    });\n  }\n\n  const defaultRowBg = isSelected ? \"bg-primary/10 border-l-2 border-primary\" : \"hover:bg-accent\";\n  const rowClassName = rowClass ? rowClass(node, isSelected) : defaultRowBg;\n\n  return (\n    <div\n      role=\"treeitem\"\n      aria-expanded={expandable ? isOpen : undefined}\n      aria-selected={isSelected}\n    >\n      <div\n        className={cn(\"flex items-center gap-1.5 py-1 px-2 cursor-pointer text-sm\", rowClassName)}\n        style={{ paddingLeft: `${depth * indentPx + basePaddingPx}px` }}\n        onClick={(e) => {\n          e.stopPropagation();\n          onSelect?.(node);\n          toggle();\n        }}\n      >\n        {expandable ? (\n          <Icon\n            icon={isOpen ? UiChevronDown : UiChevronRight}\n            className=\"text-muted-foreground text-xs w-3\"\n          />\n        ) : (\n          <span className=\"w-3 shrink-0\" aria-hidden />\n        )}\n        {renderRow({\n          node,\n          depth,\n          open: isOpen,\n          selected: isSelected,\n          hasChildren,\n          toggle,\n          loading,\n          error,\n        })}\n      </div>\n      {isOpen && hasChildren && (\n        <div role=\"group\">\n          {children!.map((child) => (\n            <TreeNode\n              key={getKey(child)}\n              node={child}\n              depth={depth + 1}\n              expandAll={expandAll}\n              forcedOpenKeys={forcedOpenKeys}\n              selected={selected}\n              getChildren={getChildren}\n              getKey={getKey}\n              renderRow={renderRow}\n              indentPx={indentPx}\n              basePaddingPx={basePaddingPx}\n              {...(defaultOpen ? { defaultOpen } : {})}\n              {...(onSelect ? { onSelect } : {})}\n              {...(rowClass ? { rowClass } : {})}\n              {...(isSecondary ? { isSecondary } : {})}\n              {...(hasMoreChildren ? { hasMoreChildren } : {})}\n              {...(loadChildren ? { loadChildren } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","jsxs","cn","jsx","Icon","UiChevronDown","UiChevronRight"],"mappings":"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"}

package/dist/data/TreeNode.d.ts

@@ -6,6 +6,10 @@ export type TreeRowContext<T> = {
     selected: boolean;
     hasChildren: boolean;
     toggle: () => void;
+    /** True while this node's lazy children are being fetched via loadChildren. */
+    loading: boolean;
+    /** The rejection value from loadChildren, or null when there was no error. */
+    error: unknown;
 };
 export type TreeNodeProps<T> = {
     node: T;
@@ -21,6 +25,20 @@ export type TreeNodeProps<T> = {
     rowClass?: (node: T, selected: boolean) => string;
     indentPx?: number;
     basePaddingPx?: number;
+    /**
+     * Reports that a node has children that are not yet loaded — it renders an
+     * expand chevron even when `getChildren` returns nothing. On the first open
+     * the node fetches them via `loadChildren`. Without this (the default), a
+     * node is expandable only when `getChildren` already returns children.
+     */
+    hasMoreChildren?: (node: T) => boolean;
+    /**
+     * Lazily fetch a node's children the first time it is opened. Resolves to the
+     * child nodes (which may themselves be lazy). A rejection is surfaced to
+     * `renderRow` via `ctx.error` and is not retried until the node is collapsed
+     * and reopened. Required for any node `hasMoreChildren` returns true for.
+     */
+    loadChildren?: (node: T) => Promise<T[]>;
     /**
      * Marks a node as a **secondary child** of its parent. Secondary
      * children keep the full tree structure (they render, they can be
@@ -39,5 +57,5 @@ export type TreeNodeProps<T> = {
      */
     isSecondary?: (node: T) => boolean;
 };
-export declare function TreeNode<T>({ node, depth, expandAll, forcedOpenKeys, selected, defaultOpen, getChildren, getKey, onSelect, renderRow, rowClass, indentPx, basePaddingPx, isSecondary, }: TreeNodeProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TreeNode<T>({ node, depth, expandAll, forcedOpenKeys, selected, defaultOpen, getChildren, getKey, onSelect, renderRow, rowClass, indentPx, basePaddingPx, isSecondary, hasMoreChildren, loadChildren, }: TreeNodeProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TreeNode.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.d.ts","sourceRoot":"","sources":["../../src/data/TreeNode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpE,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAClD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,CAAC;IAC1C,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,SAAS,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;;;;;;;OAeG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;CACpC,CAAC;AAEF,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAC1B,IAAI,EACJ,KAAS,EACT,SAAgB,EAChB,cAAqB,EACrB,QAAe,EACf,WAAW,EACX,WAAW,EACX,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAa,EACb,aAAiB,EACjB,WAAW,GACZ,EAAE,aAAa,CAAC,CAAC,CAAC,2CAmGlB"}
+{"version":3,"file":"TreeNode.d.ts","sourceRoot":"","sources":["../../src/data/TreeNode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpE,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,+EAA+E;IAC/E,OAAO,EAAE,OAAO,CAAC;IACjB,8EAA8E;IAC9E,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAClD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,CAAC;IAC1C,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,SAAS,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACvC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IACzC;;;;;;;;;;;;;;;OAeG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;CACpC,CAAC;AAEF,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAC1B,IAAI,EACJ,KAAS,EACT,SAAgB,EAChB,cAAqB,EACrB,QAAe,EACf,WAAW,EACX,WAAW,EACX,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAa,EACb,aAAiB,EACjB,WAAW,EACX,eAAe,EACf,YAAY,GACb,EAAE,aAAa,CAAC,CAAC,CAAC,2CAoJlB"}

package/dist/data/TreeNode.js

@@ -18,10 +18,18 @@ function TreeNode({
   rowClass,
   indentPx = 16,
   basePaddingPx = 8,
-  isSecondary
+  isSecondary,
+  hasMoreChildren,
+  loadChildren
 }) {
-  const children = getChildren(node);
+  const [loadedChildren, setLoadedChildren] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const syncChildren = getChildren(node);
+  const children = loadedChildren ?? syncChildren;
   const hasChildren = ((children == null ? void 0 : children.length) ?? 0) > 0;
+  const lazyUnloaded = ((hasMoreChildren == null ? void 0 : hasMoreChildren(node)) ?? false) && loadedChildren === null;
+  const expandable = hasChildren || lazyUnloaded;
   const initialOpen = defaultOpen ? defaultOpen(node, depth) : depth < 1;
   const [open, setOpen] = useState(initialOpen);
   const prevExpandAll = useRef(expandAll);
@@ -38,8 +46,33 @@ function TreeNode({
     }
     prevExpandAll.current = expandAll;
   }, [expandAll, skipExpandAll]);
+  const loadRequested = useRef(false);
+  const nodeKey = getKey(node);
+  const loadKeyRef = useRef(nodeKey);
+  function loadLazyChildren() {
+    if (!loadChildren || loadRequested.current) return;
+    loadRequested.current = true;
+    loadKeyRef.current = nodeKey;
+    setLoading(true);
+    setError(null);
+    loadChildren(node).then((kids) => {
+      if (loadKeyRef.current !== nodeKey) return;
+      setLoadedChildren(kids);
+      setLoading(false);
+    }).catch((err) => {
+      if (loadKeyRef.current !== nodeKey) return;
+      loadRequested.current = false;
+      setError(err);
+      setLoading(false);
+    });
+  }
   function toggle() {
-    if (hasChildren) setOpen((o) => !o);
+    if (!expandable) return;
+    setOpen((o) => {
+      const next = !o;
+      if (next && lazyUnloaded) loadLazyChildren();
+      return next;
+    });
   }
   const defaultRowBg = isSelected ? "bg-primary/10 border-l-2 border-primary" : "hover:bg-accent";
   const rowClassName = rowClass ? rowClass(node, isSelected) : defaultRowBg;
@@ -47,7 +80,7 @@ function TreeNode({
     "div",
     {
       role: "treeitem",
-      "aria-expanded": hasChildren ? isOpen : void 0,
+      "aria-expanded": expandable ? isOpen : void 0,
       "aria-selected": isSelected,
       children: [
         /* @__PURE__ */ jsxs(
@@ -61,7 +94,7 @@ function TreeNode({
               toggle();
             },
             children: [
-              hasChildren ? /* @__PURE__ */ jsx(
+              expandable ? /* @__PURE__ */ jsx(
                 Icon,
                 {
                   icon: isOpen ? UiChevronDown : UiChevronRight,
@@ -74,7 +107,9 @@ function TreeNode({
                 open: isOpen,
                 selected: isSelected,
                 hasChildren,
-                toggle
+                toggle,
+                loading,
+                error
               })
             ]
           }
@@ -95,7 +130,9 @@ function TreeNode({
             ...defaultOpen ? { defaultOpen } : {},
             ...onSelect ? { onSelect } : {},
             ...rowClass ? { rowClass } : {},
-            ...isSecondary ? { isSecondary } : {}
+            ...isSecondary ? { isSecondary } : {},
+            ...hasMoreChildren ? { hasMoreChildren } : {},
+            ...loadChildren ? { loadChildren } : {}
           },
           getKey(child)
         )) })

package/dist/data/TreeNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.js","sources":["../../src/data/TreeNode.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"./Icon\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\n\nexport type TreeRowContext<T> = {\n  node: T;\n  depth: number;\n  open: boolean;\n  selected: boolean;\n  hasChildren: boolean;\n  toggle: () => void;\n};\n\nexport type TreeNodeProps<T> = {\n  node: T;\n  depth?: number;\n  expandAll?: boolean | null;\n  forcedOpenKeys?: Set<string | number> | null;\n  selected?: T | null;\n  defaultOpen?: (node: T, depth: number) => boolean;\n  getChildren: (node: T) => T[] | undefined;\n  getKey: (node: T) => string | number;\n  onSelect?: (node: T) => void;\n  renderRow: (ctx: TreeRowContext<T>) => ReactNode;\n  rowClass?: (node: T, selected: boolean) => string;\n  indentPx?: number;\n  basePaddingPx?: number;\n  /**\n   * Marks a node as a **secondary child** of its parent. Secondary\n   * children keep the full tree structure (they render, they can be\n   * opened manually) but opt out of the bulk behaviours a caller\n   * typically wants when they click the toolbar:\n   *\n   *  - Tree-wide filter: their text is skipped during match detection\n   *    so typing in the search box never surfaces a row because one\n   *    of its secondary children happened to match.\n   *  - Expand all: secondary nodes stay at their default-open state\n   *    instead of being forced open, preventing 28k field rows from\n   *    flooding the viewport when an operator hits the button on a\n   *    schema with hundreds of tables.\n   *\n   * Default: every node is primary (returns false).\n   */\n  isSecondary?: (node: T) => boolean;\n};\n\nexport function TreeNode<T>({\n  node,\n  depth = 0,\n  expandAll = null,\n  forcedOpenKeys = null,\n  selected = null,\n  defaultOpen,\n  getChildren,\n  getKey,\n  onSelect,\n  renderRow,\n  rowClass,\n  indentPx = 16,\n  basePaddingPx = 8,\n  isSecondary,\n}: TreeNodeProps<T>) {\n  const children = getChildren(node);\n  const hasChildren = (children?.length ?? 0) > 0;\n  const initialOpen = defaultOpen ? defaultOpen(node, depth) : depth < 1;\n  const [open, setOpen] = useState(initialOpen);\n  const prevExpandAll = useRef(expandAll);\n  const isSelected = selected === node;\n  const key = getKey(node);\n  const isForcedOpen = forcedOpenKeys?.has(key) ?? false;\n  const isOpen = isForcedOpen || open;\n  // A node opts out of bulk expand-all in two distinct cases:\n  //\n  //  1. The node itself is secondary (its edge from the parent is\n  //     secondary) — rare at the root, but the rule is symmetric.\n  //  2. All of the node's children are secondary — the common case.\n  //     This is what keeps an \"Expand all\" on a schema tree from\n  //     flooding the viewport with every table's field rows: the\n  //     table opens to nothing structural worth seeing in bulk, so\n  //     we leave it closed until the operator clicks it manually.\n  //\n  // In both cases the manual toggle still works, and filter matches\n  // still force the row open via forcedOpenKeys, so users never\n  // lose access — they just don't get auto-flooded.\n  const secondaryNode = isSecondary?.(node) ?? false;\n  const childrenAllSecondary =\n    hasChildren && isSecondary != null && children!.every((c) => isSecondary(c));\n  const skipExpandAll = secondaryNode || childrenAllSecondary;\n\n  useEffect(() => {\n    if (expandAll !== null && expandAll !== prevExpandAll.current && !skipExpandAll) {\n      setOpen(expandAll);\n    }\n    prevExpandAll.current = expandAll;\n  }, [expandAll, skipExpandAll]);\n\n  function toggle() {\n    if (hasChildren) setOpen((o) => !o);\n  }\n\n  const defaultRowBg = isSelected ? \"bg-primary/10 border-l-2 border-primary\" : \"hover:bg-accent\";\n  const rowClassName = rowClass ? rowClass(node, isSelected) : defaultRowBg;\n\n  return (\n    <div\n      role=\"treeitem\"\n      aria-expanded={hasChildren ? isOpen : undefined}\n      aria-selected={isSelected}\n    >\n      <div\n        className={cn(\"flex items-center gap-1.5 py-1 px-2 cursor-pointer text-sm\", rowClassName)}\n        style={{ paddingLeft: `${depth * indentPx + basePaddingPx}px` }}\n        onClick={(e) => {\n          e.stopPropagation();\n          onSelect?.(node);\n          toggle();\n        }}\n      >\n        {hasChildren ? (\n          <Icon\n            icon={isOpen ? UiChevronDown : UiChevronRight}\n            className=\"text-muted-foreground text-xs w-3\"\n          />\n        ) : (\n          <span className=\"w-3 shrink-0\" aria-hidden />\n        )}\n        {renderRow({\n          node,\n          depth,\n          open: isOpen,\n          selected: isSelected,\n          hasChildren,\n          toggle,\n        })}\n      </div>\n      {isOpen && hasChildren && (\n        <div role=\"group\">\n          {children!.map((child) => (\n            <TreeNode\n              key={getKey(child)}\n              node={child}\n              depth={depth + 1}\n              expandAll={expandAll}\n              forcedOpenKeys={forcedOpenKeys}\n              selected={selected}\n              getChildren={getChildren}\n              getKey={getKey}\n              renderRow={renderRow}\n              indentPx={indentPx}\n              basePaddingPx={basePaddingPx}\n              {...(defaultOpen ? { defaultOpen } : {})}\n              {...(onSelect ? { onSelect } : {})}\n              {...(rowClass ? { rowClass } : {})}\n              {...(isSecondary ? { isSecondary } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA+CO,SAAS,SAAY;AAAA,EAC1B;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AACF,GAAqB;AACnB,QAAM,WAAW,YAAY,IAAI;AACjC,QAAM,gBAAe,qCAAU,WAAU,KAAK;AAC9C,QAAM,cAAc,cAAc,YAAY,MAAM,KAAK,IAAI,QAAQ;AACrE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,WAAW;AAC5C,QAAM,gBAAgB,OAAO,SAAS;AACtC,QAAM,aAAa,aAAa;AAChC,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,gBAAe,iDAAgB,IAAI,SAAQ;AACjD,QAAM,SAAS,gBAAgB;AAc/B,QAAM,iBAAgB,2CAAc,UAAS;AAC7C,QAAM,uBACJ,eAAe,eAAe,QAAQ,SAAU,MAAM,CAAC,MAAM,YAAY,CAAC,CAAC;AAC7E,QAAM,gBAAgB,iBAAiB;AAEvC,YAAU,MAAM;AACd,QAAI,cAAc,QAAQ,cAAc,cAAc,WAAW,CAAC,eAAe;AAC/E,cAAQ,SAAS;AAAA,IACnB;AACA,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,WAAW,aAAa,CAAC;AAE7B,WAAS,SAAS;AAChB,QAAI,YAAa,SAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,EACpC;AAEA,QAAM,eAAe,aAAa,4CAA4C;AAC9E,QAAM,eAAe,WAAW,SAAS,MAAM,UAAU,IAAI;AAE7D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAe,cAAc,SAAS;AAAA,MACtC,iBAAe;AAAA,MAEf,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,8DAA8D,YAAY;AAAA,YACxF,OAAO,EAAE,aAAa,GAAG,QAAQ,WAAW,aAAa,KAAA;AAAA,YACzD,SAAS,CAAC,MAAM;AACd,gBAAE,gBAAA;AACF,mDAAW;AACX,qBAAA;AAAA,YACF;AAAA,YAEC,UAAA;AAAA,cAAA,cACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAM,SAAS,gBAAgB;AAAA,kBAC/B,WAAU;AAAA,gBAAA;AAAA,cAAA,IAGZ,oBAAC,QAAA,EAAK,WAAU,gBAAe,eAAW,MAAC;AAAA,cAE5C,UAAU;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA,MAAM;AAAA,gBACN,UAAU;AAAA,gBACV;AAAA,gBACA;AAAA,cAAA,CACD;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,UAAU,eACT,oBAAC,OAAA,EAAI,MAAK,SACP,UAAA,SAAU,IAAI,CAAC,UACd;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAM;AAAA,YACN,OAAO,QAAQ;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACC,GAAI,cAAc,EAAE,YAAA,IAAgB,CAAA;AAAA,YACpC,GAAI,WAAW,EAAE,SAAA,IAAa,CAAA;AAAA,YAC9B,GAAI,WAAW,EAAE,SAAA,IAAa,CAAA;AAAA,YAC9B,GAAI,cAAc,EAAE,gBAAgB,CAAA;AAAA,UAAC;AAAA,UAdjC,OAAO,KAAK;AAAA,QAAA,CAgBpB,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"TreeNode.js","sources":["../../src/data/TreeNode.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"./Icon\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\n\nexport type TreeRowContext<T> = {\n  node: T;\n  depth: number;\n  open: boolean;\n  selected: boolean;\n  hasChildren: boolean;\n  toggle: () => void;\n  /** True while this node's lazy children are being fetched via loadChildren. */\n  loading: boolean;\n  /** The rejection value from loadChildren, or null when there was no error. */\n  error: unknown;\n};\n\nexport type TreeNodeProps<T> = {\n  node: T;\n  depth?: number;\n  expandAll?: boolean | null;\n  forcedOpenKeys?: Set<string | number> | null;\n  selected?: T | null;\n  defaultOpen?: (node: T, depth: number) => boolean;\n  getChildren: (node: T) => T[] | undefined;\n  getKey: (node: T) => string | number;\n  onSelect?: (node: T) => void;\n  renderRow: (ctx: TreeRowContext<T>) => ReactNode;\n  rowClass?: (node: T, selected: boolean) => string;\n  indentPx?: number;\n  basePaddingPx?: number;\n  /**\n   * Reports that a node has children that are not yet loaded — it renders an\n   * expand chevron even when `getChildren` returns nothing. On the first open\n   * the node fetches them via `loadChildren`. Without this (the default), a\n   * node is expandable only when `getChildren` already returns children.\n   */\n  hasMoreChildren?: (node: T) => boolean;\n  /**\n   * Lazily fetch a node's children the first time it is opened. Resolves to the\n   * child nodes (which may themselves be lazy). A rejection is surfaced to\n   * `renderRow` via `ctx.error` and is not retried until the node is collapsed\n   * and reopened. Required for any node `hasMoreChildren` returns true for.\n   */\n  loadChildren?: (node: T) => Promise<T[]>;\n  /**\n   * Marks a node as a **secondary child** of its parent. Secondary\n   * children keep the full tree structure (they render, they can be\n   * opened manually) but opt out of the bulk behaviours a caller\n   * typically wants when they click the toolbar:\n   *\n   *  - Tree-wide filter: their text is skipped during match detection\n   *    so typing in the search box never surfaces a row because one\n   *    of its secondary children happened to match.\n   *  - Expand all: secondary nodes stay at their default-open state\n   *    instead of being forced open, preventing 28k field rows from\n   *    flooding the viewport when an operator hits the button on a\n   *    schema with hundreds of tables.\n   *\n   * Default: every node is primary (returns false).\n   */\n  isSecondary?: (node: T) => boolean;\n};\n\nexport function TreeNode<T>({\n  node,\n  depth = 0,\n  expandAll = null,\n  forcedOpenKeys = null,\n  selected = null,\n  defaultOpen,\n  getChildren,\n  getKey,\n  onSelect,\n  renderRow,\n  rowClass,\n  indentPx = 16,\n  basePaddingPx = 8,\n  isSecondary,\n  hasMoreChildren,\n  loadChildren,\n}: TreeNodeProps<T>) {\n  // Lazily-fetched children take precedence over the synchronous ones once a\n  // load has resolved; until then `loadedChildren` is null and we fall back to\n  // getChildren. A node can be \"lazy\" (hasMoreChildren) with no sync children.\n  const [loadedChildren, setLoadedChildren] = useState<T[] | null>(null);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<unknown>(null);\n  const syncChildren = getChildren(node);\n  const children = loadedChildren ?? syncChildren;\n  const hasChildren = (children?.length ?? 0) > 0;\n  const lazyUnloaded = (hasMoreChildren?.(node) ?? false) && loadedChildren === null;\n  // The chevron shows when there is something to reveal: either real children\n  // are present, or the node is lazy and has not been loaded yet.\n  const expandable = hasChildren || lazyUnloaded;\n  const initialOpen = defaultOpen ? defaultOpen(node, depth) : depth < 1;\n  const [open, setOpen] = useState(initialOpen);\n  const prevExpandAll = useRef(expandAll);\n  const isSelected = selected === node;\n  const key = getKey(node);\n  const isForcedOpen = forcedOpenKeys?.has(key) ?? false;\n  const isOpen = isForcedOpen || open;\n  // A node opts out of bulk expand-all in two distinct cases:\n  //\n  //  1. The node itself is secondary (its edge from the parent is\n  //     secondary) — rare at the root, but the rule is symmetric.\n  //  2. All of the node's children are secondary — the common case.\n  //     This is what keeps an \"Expand all\" on a schema tree from\n  //     flooding the viewport with every table's field rows: the\n  //     table opens to nothing structural worth seeing in bulk, so\n  //     we leave it closed until the operator clicks it manually.\n  //\n  // In both cases the manual toggle still works, and filter matches\n  // still force the row open via forcedOpenKeys, so users never\n  // lose access — they just don't get auto-flooded.\n  const secondaryNode = isSecondary?.(node) ?? false;\n  const childrenAllSecondary =\n    hasChildren && isSecondary != null && children!.every((c) => isSecondary(c));\n  const skipExpandAll = secondaryNode || childrenAllSecondary;\n\n  useEffect(() => {\n    if (expandAll !== null && expandAll !== prevExpandAll.current && !skipExpandAll) {\n      setOpen(expandAll);\n    }\n    prevExpandAll.current = expandAll;\n  }, [expandAll, skipExpandAll]);\n\n  // Guards a lazy fetch so a node loads its children at most once per mount and\n  // a resolution arriving after the node was reused (key changed) is ignored.\n  const loadRequested = useRef(false);\n  const nodeKey = getKey(node);\n  const loadKeyRef = useRef(nodeKey);\n\n  function loadLazyChildren() {\n    if (!loadChildren || loadRequested.current) return;\n    loadRequested.current = true;\n    loadKeyRef.current = nodeKey;\n    setLoading(true);\n    setError(null);\n    loadChildren(node)\n      .then((kids) => {\n        if (loadKeyRef.current !== nodeKey) return;\n        setLoadedChildren(kids);\n        setLoading(false);\n      })\n      .catch((err) => {\n        if (loadKeyRef.current !== nodeKey) return;\n        // Surfaced to renderRow via ctx.error; allow a retry on re-toggle.\n        loadRequested.current = false;\n        setError(err);\n        setLoading(false);\n      });\n  }\n\n  function toggle() {\n    if (!expandable) return;\n    setOpen((o) => {\n      const next = !o;\n      // Only fetch when transitioning into the open state, so collapsing a\n      // not-yet-loaded (e.g. previously-failed) lazy node never triggers a load.\n      if (next && lazyUnloaded) loadLazyChildren();\n      return next;\n    });\n  }\n\n  const defaultRowBg = isSelected ? \"bg-primary/10 border-l-2 border-primary\" : \"hover:bg-accent\";\n  const rowClassName = rowClass ? rowClass(node, isSelected) : defaultRowBg;\n\n  return (\n    <div\n      role=\"treeitem\"\n      aria-expanded={expandable ? isOpen : undefined}\n      aria-selected={isSelected}\n    >\n      <div\n        className={cn(\"flex items-center gap-1.5 py-1 px-2 cursor-pointer text-sm\", rowClassName)}\n        style={{ paddingLeft: `${depth * indentPx + basePaddingPx}px` }}\n        onClick={(e) => {\n          e.stopPropagation();\n          onSelect?.(node);\n          toggle();\n        }}\n      >\n        {expandable ? (\n          <Icon\n            icon={isOpen ? UiChevronDown : UiChevronRight}\n            className=\"text-muted-foreground text-xs w-3\"\n          />\n        ) : (\n          <span className=\"w-3 shrink-0\" aria-hidden />\n        )}\n        {renderRow({\n          node,\n          depth,\n          open: isOpen,\n          selected: isSelected,\n          hasChildren,\n          toggle,\n          loading,\n          error,\n        })}\n      </div>\n      {isOpen && hasChildren && (\n        <div role=\"group\">\n          {children!.map((child) => (\n            <TreeNode\n              key={getKey(child)}\n              node={child}\n              depth={depth + 1}\n              expandAll={expandAll}\n              forcedOpenKeys={forcedOpenKeys}\n              selected={selected}\n              getChildren={getChildren}\n              getKey={getKey}\n              renderRow={renderRow}\n              indentPx={indentPx}\n              basePaddingPx={basePaddingPx}\n              {...(defaultOpen ? { defaultOpen } : {})}\n              {...(onSelect ? { onSelect } : {})}\n              {...(rowClass ? { rowClass } : {})}\n              {...(isSecondary ? { isSecondary } : {})}\n              {...(hasMoreChildren ? { hasMoreChildren } : {})}\n              {...(loadChildren ? { loadChildren } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/diagnostics/DiagnosticsDetailPanel.cjs

@@ -9,10 +9,11 @@ const GoroutineCard = require("./GoroutineCard.cjs");
 const ThreadCard = require("./ThreadCard.cjs");
 const UiServerProcess = require("../../icons/components/UiServerProcess.cjs");
 const UiDebug = require("../../icons/components/UiDebug.cjs");
-const UiSearch = require("../../icons/components/UiSearch.cjs");
 const UiLoader = require("../../icons/components/UiLoader.cjs");
 const UiDebugSmall = require("../../icons/components/UiDebugSmall.cjs");
 const UiRefresh = require("../../icons/components/UiRefresh.cjs");
+const format = require("../../lib/format.cjs");
+const UiSearch = require("../../icons/components/UiSearch.cjs");
 const STACK_MIN_LINES = 10;
 const STACK_LINE_HEIGHT_REM = 1;
 const STACK_MIN_HEIGHT = `${STACK_MIN_LINES * STACK_LINE_HEIGHT_REM}rem`;
@@ -33,7 +34,10 @@ function DiagnosticsDetailPanel({
   process,
   collectBusy,
   onCollectStack,
-  runMeta
+  runMeta,
+  resolveSource,
+  headerActions,
+  singleItem
 }) {
   const [search, setSearch] = react.useState("");
   const [selectedStates, setSelectedStates] = react.useState(/* @__PURE__ */ new Set());
@@ -44,13 +48,14 @@ function DiagnosticsDetailPanel({
   const filtered = react.useMemo(() => {
     const needle = search.trim().toLowerCase();
     const items = parsed.format === "jvm" ? parsed.threads : parsed.format === "go" ? parsed.goroutines : [];
+    if (singleItem) return items;
     return items.filter((item) => {
       if (selectedStates.size > 0 && !selectedStates.has(item.state)) return false;
       if (hideRuntimeOnly && item.userFrameCount === 0) return false;
       if (needle && !item.searchText.includes(needle)) return false;
       return true;
     });
-  }, [parsed, search, selectedStates, hideRuntimeOnly]);
+  }, [parsed, search, selectedStates, hideRuntimeOnly, singleItem]);
   react.useEffect(() => {
     setSearch("");
     setSelectedStates(/* @__PURE__ */ new Set());
@@ -63,7 +68,16 @@ function DiagnosticsDetailPanel({
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full min-h-0 flex flex-col gap-density-3 p-density-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Header, { process }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Header,
+      {
+        process,
+        actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-density-2", children: [
+          singleItem && onCollectStack && /* @__PURE__ */ jsxRuntime.jsx(CollectButton, { pid: process.pid, busy: collectBusy ?? false, onClick: onCollectStack }),
+          headerActions
+        ] })
+      }
+    ),
     runMeta && /* @__PURE__ */ jsxRuntime.jsx(RunSection, { runMeta }),
     process.command && /* @__PURE__ */ jsxRuntime.jsx(PanelSection, { title: "Command", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-foreground whitespace-pre-wrap font-mono bg-blue-50 dark:bg-blue-500/10 rounded p-2 break-all", children: process.command }) }),
     /* @__PURE__ */ jsxRuntime.jsx(PanelSection, { title: "Metrics", children: /* @__PURE__ */ jsxRuntime.jsx(ProcessMetrics, { process }) }),
@@ -81,46 +95,51 @@ function DiagnosticsDetailPanel({
         hideRuntimeOnly,
         setHideRuntimeOnly,
         collectBusy: collectBusy ?? false,
-        ...onCollectStack ? { onCollectStack } : {}
+        singleItem: singleItem ?? false,
+        ...onCollectStack ? { onCollectStack } : {},
+        ...resolveSource ? { resolveSource } : {}
       }
     ) })
   ] });
 }
-function Header({ process }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-density-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-density-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Icon.Icon,
-        {
-          icon: process.is_root ? UiServerProcess.UiServerProcess : UiDebug.UiDebug,
-          className: "text-2xl text-blue-600"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-foreground break-words", children: utils.processLabel(process) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-center gap-density-2 flex-wrap text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
-        "pid ",
-        process.pid
+function Header({ process, actions }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-density-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-density-2 flex-wrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            icon: process.is_root ? UiServerProcess.UiServerProcess : UiDebug.UiDebug,
+            className: "text-2xl text-blue-600"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-foreground break-words", children: utils.processLabel(process) }),
+        process.status ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: `inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs ${utils.processStateColor(
+              process.status
+            )}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: utils.processStateIcon(process.status) }),
+              process.status
+            ]
+          }
+        ) : null
       ] }),
-      process.ppid ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
-        "ppid ",
-        process.ppid
-      ] }) : null,
-      process.status ? /* @__PURE__ */ jsxRuntime.jsxs(
-        "span",
-        {
-          className: `inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 ${utils.processStateColor(
-            process.status
-          )}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: utils.processStateIcon(process.status) }),
-            process.status
-          ]
-        }
-      ) : null
-    ] })
-  ] }) });
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-center gap-density-2 flex-wrap text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+          "pid ",
+          process.pid
+        ] }),
+        process.ppid ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+          "ppid ",
+          process.ppid
+        ] }) : null
+      ] })
+    ] }),
+    actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: actions }) : null
+  ] });
 }
 function RunSection({ runMeta }) {
   return /* @__PURE__ */ jsxRuntime.jsx(PanelSection, { title: "Run", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-density-2 text-sm", children: [
@@ -166,7 +185,9 @@ function StackBlock(props) {
     hideRuntimeOnly,
     setHideRuntimeOnly,
     collectBusy,
-    onCollectStack
+    onCollectStack,
+    resolveSource,
+    singleItem
   } = props;
   const stack = process.stack_capture;
   if (!(stack == null ? void 0 : stack.text)) {
@@ -206,7 +227,7 @@ function StackBlock(props) {
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full min-h-0 flex flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-1 py-1.5 space-y-density-2", children: [
+    !singleItem && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-1 py-1.5 space-y-density-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-density-2 text-[11px] text-muted-foreground flex-wrap", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-density-2 flex-wrap", children: [
           /* @__PURE__ */ jsxRuntime.jsx(StackStatusBadge, { status: stack.status }),
@@ -314,7 +335,8 @@ function StackBlock(props) {
             {
               thread: t,
               search,
-              hideRuntimeOnly
+              hideRuntimeOnly,
+              ...resolveSource ? { resolveSource } : {}
             },
             t.id
           )),
@@ -393,12 +415,12 @@ function ProcessMetrics({ process }) {
       MetricTile,
       {
         label: "RSS",
-        value: rss !== void 0 ? utils.formatBytes(rss) : "n/a",
+        value: rss !== void 0 ? format.formatBytes(rss) : "n/a",
         barPct: memRatioPct,
         tone: memoryTone(rss, vms)
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(MetricTile, { label: "VMS", value: vms !== void 0 ? utils.formatBytes(vms) : "n/a", tone: "neutral" }),
+    /* @__PURE__ */ jsxRuntime.jsx(MetricTile, { label: "VMS", value: vms !== void 0 ? format.formatBytes(vms) : "n/a", tone: "neutral" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       MetricTile,
       {