@flanksource/clicky-ui 0.3.36 → 0.3.37

package/dist/data/DataTableOverflowCue.cjs

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const UiArrowRight = require("../icons/components/UiArrowRight.cjs");
+const INITIAL_STATE = {
+  overflow: false,
+  atStart: true,
+  atEnd: true,
+  interacted: false
+};
+function DataTableOverflowCue({ scroll }) {
+  const [state, setState] = react.useState(INITIAL_STATE);
+  react.useEffect(() => {
+    if (!scroll) {
+      setState(INITIAL_STATE);
+      return;
+    }
+    const update = () => {
+      const remaining = scroll.scrollWidth - scroll.clientWidth;
+      const atStart = scroll.scrollLeft <= 1;
+      setState((current) => ({
+        overflow: remaining > 1,
+        atStart,
+        atEnd: remaining <= 1 || scroll.scrollLeft >= remaining - 1,
+        interacted: current.interacted || !atStart
+      }));
+    };
+    update();
+    scroll.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update);
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+    observer == null ? void 0 : observer.observe(scroll);
+    const table = scroll.querySelector("table");
+    if (table) observer == null ? void 0 : observer.observe(table);
+    return () => {
+      scroll.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+      observer == null ? void 0 : observer.disconnect();
+    };
+  }, [scroll]);
+  if (!state.overflow) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !state.atStart ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-testid": "data-table-overflow-left",
+        className: "pointer-events-none absolute inset-y-0 left-0 z-20 w-6 bg-gradient-to-r from-background to-transparent"
+      }
+    ) : null,
+    !state.atEnd ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-testid": "data-table-overflow-right",
+        className: "pointer-events-none absolute inset-y-0 right-0 z-20 w-8 bg-gradient-to-l from-background to-transparent"
+      }
+    ) : null,
+    state.atStart && !state.interacted ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: utils.cn(
+          "pointer-events-none absolute right-2 top-10 z-30 inline-flex items-center gap-1 rounded-full",
+          "border border-border bg-background/95 px-2 py-1 text-[10px] font-medium text-muted-foreground shadow-sm"
+        ),
+        children: [
+          "More columns",
+          /* @__PURE__ */ jsxRuntime.jsx(UiArrowRight.UiArrowRight, { "aria-hidden": true, className: "size-3" })
+        ]
+      }
+    ) : null
+  ] });
+}
+exports.DataTableOverflowCue = DataTableOverflowCue;
+//# sourceMappingURL=DataTableOverflowCue.cjs.map

package/dist/data/DataTableOverflowCue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableOverflowCue.cjs","sources":["../../src/data/DataTableOverflowCue.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { UiArrowRight } from \"../icons\";\nimport { cn } from \"../lib/utils\";\n\ntype OverflowState = {\n  overflow: boolean;\n  atStart: boolean;\n  atEnd: boolean;\n  interacted: boolean;\n};\n\nconst INITIAL_STATE: OverflowState = {\n  overflow: false,\n  atStart: true,\n  atEnd: true,\n  interacted: false,\n};\n\nexport function DataTableOverflowCue({ scroll }: { scroll: HTMLDivElement | null }) {\n  const [state, setState] = useState(INITIAL_STATE);\n\n  useEffect(() => {\n    if (!scroll) {\n      setState(INITIAL_STATE);\n      return;\n    }\n\n    const update = () => {\n      const remaining = scroll.scrollWidth - scroll.clientWidth;\n      const atStart = scroll.scrollLeft <= 1;\n      setState((current) => ({\n        overflow: remaining > 1,\n        atStart,\n        atEnd: remaining <= 1 || scroll.scrollLeft >= remaining - 1,\n        interacted: current.interacted || !atStart,\n      }));\n    };\n\n    update();\n    scroll.addEventListener(\"scroll\", update, { passive: true });\n    window.addEventListener(\"resize\", update);\n    const observer =\n      typeof ResizeObserver === \"undefined\"\n        ? undefined\n        : new ResizeObserver(update);\n    observer?.observe(scroll);\n    const table = scroll.querySelector(\"table\");\n    if (table) observer?.observe(table);\n    return () => {\n      scroll.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n      observer?.disconnect();\n    };\n  }, [scroll]);\n\n  if (!state.overflow) return null;\n\n  return (\n    <>\n      {!state.atStart ? (\n        <span\n          aria-hidden\n          data-testid=\"data-table-overflow-left\"\n          className=\"pointer-events-none absolute inset-y-0 left-0 z-20 w-6 bg-gradient-to-r from-background to-transparent\"\n        />\n      ) : null}\n      {!state.atEnd ? (\n        <span\n          aria-hidden\n          data-testid=\"data-table-overflow-right\"\n          className=\"pointer-events-none absolute inset-y-0 right-0 z-20 w-8 bg-gradient-to-l from-background to-transparent\"\n        />\n      ) : null}\n      {state.atStart && !state.interacted ? (\n        <span\n          className={cn(\n            \"pointer-events-none absolute right-2 top-10 z-30 inline-flex items-center gap-1 rounded-full\",\n            \"border border-border bg-background/95 px-2 py-1 text-[10px] font-medium text-muted-foreground shadow-sm\",\n          )}\n        >\n          More columns\n          <UiArrowRight aria-hidden className=\"size-3\" />\n        </span>\n      ) : null}\n    </>\n  );\n}\n"],"names":["useState","useEffect","jsxs","Fragment","jsx","cn","UiArrowRight"],"mappings":";;;;;;AAWA,MAAM,gBAA+B;AAAA,EACnC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AACd;AAEO,SAAS,qBAAqB,EAAE,UAA6C;AAClF,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,aAAa;AAEhDC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX,eAAS,aAAa;AACtB;AAAA,IACF;AAEA,UAAM,SAAS,MAAM;AACnB,YAAM,YAAY,OAAO,cAAc,OAAO;AAC9C,YAAM,UAAU,OAAO,cAAc;AACrC,eAAS,CAAC,aAAa;AAAA,QACrB,UAAU,YAAY;AAAA,QACtB;AAAA,QACA,OAAO,aAAa,KAAK,OAAO,cAAc,YAAY;AAAA,QAC1D,YAAY,QAAQ,cAAc,CAAC;AAAA,MAAA,EACnC;AAAA,IACJ;AAEA,WAAA;AACA,WAAO,iBAAiB,UAAU,QAAQ,EAAE,SAAS,MAAM;AAC3D,WAAO,iBAAiB,UAAU,MAAM;AACxC,UAAM,WACJ,OAAO,mBAAmB,cACtB,SACA,IAAI,eAAe,MAAM;AAC/B,yCAAU,QAAQ;AAClB,UAAM,QAAQ,OAAO,cAAc,OAAO;AAC1C,QAAI,MAAO,sCAAU,QAAQ;AAC7B,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,MAAM;AAC3C,aAAO,oBAAoB,UAAU,MAAM;AAC3C,2CAAU;AAAA,IACZ;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,MAAI,CAAC,MAAM,SAAU,QAAO;AAE5B,SACEC,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,IAAA,CAAC,MAAM,UACNC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,eAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA,IAEV;AAAA,IACH,CAAC,MAAM,QACNA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,eAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA,IAEV;AAAA,IACH,MAAM,WAAW,CAAC,MAAM,aACvBF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWG,MAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UAECD,2BAAAA,IAACE,aAAAA,cAAA,EAAa,eAAW,MAAC,WAAU,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAE7C;AAAA,EAAA,GACN;AAEJ;;"}

package/dist/data/DataTableOverflowCue.d.ts

@@ -0,0 +1,4 @@
+export declare function DataTableOverflowCue({ scroll }: {
+    scroll: HTMLDivElement | null;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=DataTableOverflowCue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableOverflowCue.d.ts","sourceRoot":"","sources":["../../src/data/DataTableOverflowCue.tsx"],"names":[],"mappings":"AAkBA,wBAAgB,oBAAoB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,cAAc,GAAG,IAAI,CAAA;CAAE,sCAoEjF"}

package/dist/data/DataTableOverflowCue.js

@@ -0,0 +1,77 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { cn } from "../lib/utils.js";
+import { UiArrowRight } from "../icons/components/UiArrowRight.js";
+const INITIAL_STATE = {
+  overflow: false,
+  atStart: true,
+  atEnd: true,
+  interacted: false
+};
+function DataTableOverflowCue({ scroll }) {
+  const [state, setState] = useState(INITIAL_STATE);
+  useEffect(() => {
+    if (!scroll) {
+      setState(INITIAL_STATE);
+      return;
+    }
+    const update = () => {
+      const remaining = scroll.scrollWidth - scroll.clientWidth;
+      const atStart = scroll.scrollLeft <= 1;
+      setState((current) => ({
+        overflow: remaining > 1,
+        atStart,
+        atEnd: remaining <= 1 || scroll.scrollLeft >= remaining - 1,
+        interacted: current.interacted || !atStart
+      }));
+    };
+    update();
+    scroll.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update);
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+    observer == null ? void 0 : observer.observe(scroll);
+    const table = scroll.querySelector("table");
+    if (table) observer == null ? void 0 : observer.observe(table);
+    return () => {
+      scroll.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+      observer == null ? void 0 : observer.disconnect();
+    };
+  }, [scroll]);
+  if (!state.overflow) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !state.atStart ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-testid": "data-table-overflow-left",
+        className: "pointer-events-none absolute inset-y-0 left-0 z-20 w-6 bg-gradient-to-r from-background to-transparent"
+      }
+    ) : null,
+    !state.atEnd ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-testid": "data-table-overflow-right",
+        className: "pointer-events-none absolute inset-y-0 right-0 z-20 w-8 bg-gradient-to-l from-background to-transparent"
+      }
+    ) : null,
+    state.atStart && !state.interacted ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "pointer-events-none absolute right-2 top-10 z-30 inline-flex items-center gap-1 rounded-full",
+          "border border-border bg-background/95 px-2 py-1 text-[10px] font-medium text-muted-foreground shadow-sm"
+        ),
+        children: [
+          "More columns",
+          /* @__PURE__ */ jsx(UiArrowRight, { "aria-hidden": true, className: "size-3" })
+        ]
+      }
+    ) : null
+  ] });
+}
+export {
+  DataTableOverflowCue
+};
+//# sourceMappingURL=DataTableOverflowCue.js.map

package/dist/data/DataTableOverflowCue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableOverflowCue.js","sources":["../../src/data/DataTableOverflowCue.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { UiArrowRight } from \"../icons\";\nimport { cn } from \"../lib/utils\";\n\ntype OverflowState = {\n  overflow: boolean;\n  atStart: boolean;\n  atEnd: boolean;\n  interacted: boolean;\n};\n\nconst INITIAL_STATE: OverflowState = {\n  overflow: false,\n  atStart: true,\n  atEnd: true,\n  interacted: false,\n};\n\nexport function DataTableOverflowCue({ scroll }: { scroll: HTMLDivElement | null }) {\n  const [state, setState] = useState(INITIAL_STATE);\n\n  useEffect(() => {\n    if (!scroll) {\n      setState(INITIAL_STATE);\n      return;\n    }\n\n    const update = () => {\n      const remaining = scroll.scrollWidth - scroll.clientWidth;\n      const atStart = scroll.scrollLeft <= 1;\n      setState((current) => ({\n        overflow: remaining > 1,\n        atStart,\n        atEnd: remaining <= 1 || scroll.scrollLeft >= remaining - 1,\n        interacted: current.interacted || !atStart,\n      }));\n    };\n\n    update();\n    scroll.addEventListener(\"scroll\", update, { passive: true });\n    window.addEventListener(\"resize\", update);\n    const observer =\n      typeof ResizeObserver === \"undefined\"\n        ? undefined\n        : new ResizeObserver(update);\n    observer?.observe(scroll);\n    const table = scroll.querySelector(\"table\");\n    if (table) observer?.observe(table);\n    return () => {\n      scroll.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n      observer?.disconnect();\n    };\n  }, [scroll]);\n\n  if (!state.overflow) return null;\n\n  return (\n    <>\n      {!state.atStart ? (\n        <span\n          aria-hidden\n          data-testid=\"data-table-overflow-left\"\n          className=\"pointer-events-none absolute inset-y-0 left-0 z-20 w-6 bg-gradient-to-r from-background to-transparent\"\n        />\n      ) : null}\n      {!state.atEnd ? (\n        <span\n          aria-hidden\n          data-testid=\"data-table-overflow-right\"\n          className=\"pointer-events-none absolute inset-y-0 right-0 z-20 w-8 bg-gradient-to-l from-background to-transparent\"\n        />\n      ) : null}\n      {state.atStart && !state.interacted ? (\n        <span\n          className={cn(\n            \"pointer-events-none absolute right-2 top-10 z-30 inline-flex items-center gap-1 rounded-full\",\n            \"border border-border bg-background/95 px-2 py-1 text-[10px] font-medium text-muted-foreground shadow-sm\",\n          )}\n        >\n          More columns\n          <UiArrowRight aria-hidden className=\"size-3\" />\n        </span>\n      ) : null}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;AAWA,MAAM,gBAA+B;AAAA,EACnC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AACd;AAEO,SAAS,qBAAqB,EAAE,UAA6C;AAClF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,aAAa;AAEhD,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX,eAAS,aAAa;AACtB;AAAA,IACF;AAEA,UAAM,SAAS,MAAM;AACnB,YAAM,YAAY,OAAO,cAAc,OAAO;AAC9C,YAAM,UAAU,OAAO,cAAc;AACrC,eAAS,CAAC,aAAa;AAAA,QACrB,UAAU,YAAY;AAAA,QACtB;AAAA,QACA,OAAO,aAAa,KAAK,OAAO,cAAc,YAAY;AAAA,QAC1D,YAAY,QAAQ,cAAc,CAAC;AAAA,MAAA,EACnC;AAAA,IACJ;AAEA,WAAA;AACA,WAAO,iBAAiB,UAAU,QAAQ,EAAE,SAAS,MAAM;AAC3D,WAAO,iBAAiB,UAAU,MAAM;AACxC,UAAM,WACJ,OAAO,mBAAmB,cACtB,SACA,IAAI,eAAe,MAAM;AAC/B,yCAAU,QAAQ;AAClB,UAAM,QAAQ,OAAO,cAAc,OAAO;AAC1C,QAAI,MAAO,sCAAU,QAAQ;AAC7B,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,MAAM;AAC3C,aAAO,oBAAoB,UAAU,MAAM;AAC3C,2CAAU;AAAA,IACZ;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,MAAI,CAAC,MAAM,SAAU,QAAO;AAE5B,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,CAAC,MAAM,UACN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,eAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA,IAEV;AAAA,IACH,CAAC,MAAM,QACN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,eAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA,IAEV;AAAA,IACH,MAAM,WAAW,CAAC,MAAM,aACvB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UAEC,oBAAC,cAAA,EAAa,eAAW,MAAC,WAAU,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAE7C;AAAA,EAAA,GACN;AAEJ;"}

package/dist/data/DataTablePreferencesSheet.cjs

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const Icon = require("./Icon.cjs");
+const Modal = require("../overlay/Modal.cjs");
+const DataTableMenuSections = require("./DataTableMenuSections.cjs");
+const dataTableUtils = require("./data-table-utils.cjs");
+const UiEyeClosed = require("../icons/components/UiEyeClosed.cjs");
+function DataTablePreferencesSheet({
+  open,
+  columns,
+  hiddenColumns,
+  activeColumnKey,
+  actions,
+  showColumnVisibilityControl,
+  showDensityControl,
+  showThemeControl,
+  themeMenuValue,
+  densityOverride,
+  visibleHideableColumnCount,
+  onToggle,
+  onShowAll,
+  onDensityChange,
+  onThemeChange,
+  onClose
+}) {
+  const activeColumn = activeColumnKey ? columns.find((column) => column.key === activeColumnKey) : void 0;
+  const canHideActiveColumn = activeColumn && dataTableUtils.isColumnHideable(activeColumn) && visibleHideableColumnCount > 1;
+  const hasActions = actions.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Modal.Modal, { open, onClose, title: "Table options", size: "sm", scrollBody: true, children: [
+    showColumnVisibilityControl && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-2 py-1.5 text-xs font-medium text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Columns" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "min-h-10 rounded px-1.5 text-sm text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+            onClick: onShowAll,
+            children: "Show all"
+          }
+        )
+      ] }),
+      activeColumn && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: !canHideActiveColumn,
+            className: utils.cn(
+              "flex min-h-10 w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+              !canHideActiveColumn && "cursor-not-allowed opacity-50"
+            ),
+            onClick: () => {
+              if (!canHideActiveColumn) return;
+              onToggle(activeColumn);
+              onClose();
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Icon.Icon,
+                {
+                  icon: UiEyeClosed.UiEyeClosed,
+                  className: "text-sm text-muted-foreground"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                "Hide ",
+                dataTableUtils.labelText(activeColumn)
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 h-px bg-border" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: columns.map((column) => {
+        const hideable = dataTableUtils.isColumnHideable(column);
+        const visible = hiddenColumns[column.key] !== true;
+        const disabled = !hideable || visible && visibleHideableColumnCount <= 1;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            className: utils.cn(
+              "flex min-h-10 cursor-pointer items-center gap-2 rounded-md px-3 text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
+              disabled && "cursor-not-allowed opacity-50"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: "h-5 w-5 rounded border-border",
+                  checked: visible,
+                  disabled,
+                  onChange: () => onToggle(column)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: dataTableUtils.labelText(column) })
+            ]
+          },
+          column.key
+        );
+      }) })
+    ] }),
+    showDensityControl && /* @__PURE__ */ jsxRuntime.jsx(
+      DataTableMenuSections.DensityMenuSection,
+      {
+        densityOverride,
+        separated: showColumnVisibilityControl,
+        onDensityChange,
+        size: "sheet"
+      }
+    ),
+    hasActions && /* @__PURE__ */ jsxRuntime.jsx(
+      DataTableMenuSections.MenuActionSection,
+      {
+        actions,
+        separated: showColumnVisibilityControl || showDensityControl,
+        onClose,
+        size: "sheet"
+      }
+    ),
+    showThemeControl && onThemeChange && /* @__PURE__ */ jsxRuntime.jsx(
+      DataTableMenuSections.ThemeMenuSection,
+      {
+        value: themeMenuValue ?? "system",
+        separated: showColumnVisibilityControl || showDensityControl || hasActions,
+        onChange: onThemeChange,
+        size: "sheet"
+      }
+    )
+  ] });
+}
+exports.DataTablePreferencesSheet = DataTablePreferencesSheet;
+//# sourceMappingURL=DataTablePreferencesSheet.cjs.map

package/dist/data/DataTablePreferencesSheet.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePreferencesSheet.cjs","sources":["../../src/data/DataTablePreferencesSheet.tsx"],"sourcesContent":["import { type Density } from \"../hooks/use-density\";\nimport { type Theme } from \"../hooks/use-theme\";\nimport { cn } from \"../lib/utils\";\nimport { UiEyeClosed } from \"../icons\";\nimport { Icon } from \"./Icon\";\nimport { Modal } from \"../overlay/Modal\";\nimport {\n  DensityMenuSection,\n  MenuActionSection,\n  ThemeMenuSection,\n} from \"./DataTableMenuSections\";\nimport { isColumnHideable, labelText } from \"./data-table-utils\";\nimport type { DataTableColumn, DataTableMenuAction } from \"./DataTable\";\n\n// The phone counterpart to the floating ColumnVisibilityMenu: same section\n// order and the same show*/on* contract, but rendered inside a full-height\n// Modal sheet with 40px touch targets instead of a positioned popover. Wired\n// in DataTable.tsx behind a `(max-width: 639px)` media query.\nexport type DataTablePreferencesSheetProps<T extends Record<string, unknown>> =\n  {\n    open: boolean;\n    columns: DataTableColumn<T>[];\n    hiddenColumns: Record<string, boolean>;\n    activeColumnKey?: string | undefined;\n    actions: DataTableMenuAction[];\n    showColumnVisibilityControl: boolean;\n    showDensityControl: boolean;\n    showThemeControl: boolean;\n    themeMenuValue: Theme | undefined;\n    densityOverride: Density | undefined;\n    visibleHideableColumnCount: number;\n    onToggle: (column: DataTableColumn<T>) => void;\n    onShowAll: () => void;\n    onDensityChange: (density: Density | undefined) => void;\n    onThemeChange?: (theme: Theme) => void;\n    onClose: () => void;\n  };\n\nexport function DataTablePreferencesSheet<T extends Record<string, unknown>>({\n  open,\n  columns,\n  hiddenColumns,\n  activeColumnKey,\n  actions,\n  showColumnVisibilityControl,\n  showDensityControl,\n  showThemeControl,\n  themeMenuValue,\n  densityOverride,\n  visibleHideableColumnCount,\n  onToggle,\n  onShowAll,\n  onDensityChange,\n  onThemeChange,\n  onClose,\n}: DataTablePreferencesSheetProps<T>) {\n  const activeColumn = activeColumnKey\n    ? columns.find((column) => column.key === activeColumnKey)\n    : undefined;\n  const canHideActiveColumn =\n    activeColumn &&\n    isColumnHideable(activeColumn) &&\n    visibleHideableColumnCount > 1;\n  const hasActions = actions.length > 0;\n\n  return (\n    <Modal open={open} onClose={onClose} title=\"Table options\" size=\"sm\" scrollBody>\n      {showColumnVisibilityControl && (\n        <>\n          <div className=\"flex items-center justify-between gap-3 px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n            <span>Columns</span>\n            <button\n              type=\"button\"\n              className=\"min-h-10 rounded px-1.5 text-sm text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none\"\n              onClick={onShowAll}\n            >\n              Show all\n            </button>\n          </div>\n\n          {activeColumn && (\n            <>\n              <button\n                type=\"button\"\n                disabled={!canHideActiveColumn}\n                className={cn(\n                  \"flex min-h-10 w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none\",\n                  !canHideActiveColumn && \"cursor-not-allowed opacity-50\",\n                )}\n                onClick={() => {\n                  if (!canHideActiveColumn) return;\n                  onToggle(activeColumn);\n                  onClose();\n                }}\n              >\n                <Icon\n                  icon={UiEyeClosed}\n                  className=\"text-sm text-muted-foreground\"\n                />\n                <span>Hide {labelText(activeColumn)}</span>\n              </button>\n              <div className=\"my-1 h-px bg-border\" />\n            </>\n          )}\n\n          <div>\n            {columns.map((column) => {\n              const hideable = isColumnHideable(column);\n              const visible = hiddenColumns[column.key] !== true;\n              const disabled =\n                !hideable || (visible && visibleHideableColumnCount <= 1);\n              return (\n                <label\n                  key={column.key}\n                  className={cn(\n                    \"flex min-h-10 cursor-pointer items-center gap-2 rounded-md px-3 text-sm transition-colors hover:bg-accent hover:text-accent-foreground\",\n                    disabled && \"cursor-not-allowed opacity-50\",\n                  )}\n                >\n                  <input\n                    type=\"checkbox\"\n                    className=\"h-5 w-5 rounded border-border\"\n                    checked={visible}\n                    disabled={disabled}\n                    onChange={() => onToggle(column)}\n                  />\n                  <span className=\"truncate\">{labelText(column)}</span>\n                </label>\n              );\n            })}\n          </div>\n        </>\n      )}\n\n      {showDensityControl && (\n        <DensityMenuSection\n          densityOverride={densityOverride}\n          separated={showColumnVisibilityControl}\n          onDensityChange={onDensityChange}\n          size=\"sheet\"\n        />\n      )}\n\n      {hasActions && (\n        <MenuActionSection\n          actions={actions}\n          separated={showColumnVisibilityControl || showDensityControl}\n          onClose={onClose}\n          size=\"sheet\"\n        />\n      )}\n\n      {showThemeControl && onThemeChange && (\n        <ThemeMenuSection\n          value={themeMenuValue ?? \"system\"}\n          separated={\n            showColumnVisibilityControl || showDensityControl || hasActions\n          }\n          onChange={onThemeChange}\n          size=\"sheet\"\n        />\n      )}\n    </Modal>\n  );\n}\n"],"names":["isColumnHideable","jsxs","Modal","Fragment","jsx","cn","Icon","UiEyeClosed","labelText","DensityMenuSection","MenuActionSection","ThemeMenuSection"],"mappings":"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"}

package/dist/data/DataTablePreferencesSheet.d.ts

@@ -0,0 +1,23 @@
+import { Density } from '../hooks/use-density';
+import { Theme } from '../hooks/use-theme';
+import { DataTableColumn, DataTableMenuAction } from './DataTable';
+export type DataTablePreferencesSheetProps<T extends Record<string, unknown>> = {
+    open: boolean;
+    columns: DataTableColumn<T>[];
+    hiddenColumns: Record<string, boolean>;
+    activeColumnKey?: string | undefined;
+    actions: DataTableMenuAction[];
+    showColumnVisibilityControl: boolean;
+    showDensityControl: boolean;
+    showThemeControl: boolean;
+    themeMenuValue: Theme | undefined;
+    densityOverride: Density | undefined;
+    visibleHideableColumnCount: number;
+    onToggle: (column: DataTableColumn<T>) => void;
+    onShowAll: () => void;
+    onDensityChange: (density: Density | undefined) => void;
+    onThemeChange?: (theme: Theme) => void;
+    onClose: () => void;
+};
+export declare function DataTablePreferencesSheet<T extends Record<string, unknown>>({ open, columns, hiddenColumns, activeColumnKey, actions, showColumnVisibilityControl, showDensityControl, showThemeControl, themeMenuValue, densityOverride, visibleHideableColumnCount, onToggle, onShowAll, onDensityChange, onThemeChange, onClose, }: DataTablePreferencesSheetProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=DataTablePreferencesSheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePreferencesSheet.d.ts","sourceRoot":"","sources":["../../src/data/DataTablePreferencesSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAWhD,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAMxE,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAC1E;IACE,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,2BAA2B,EAAE,OAAO,CAAC;IACrC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,KAAK,GAAG,SAAS,CAAC;IAClC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,0BAA0B,EAAE,MAAM,CAAC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC/C,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEJ,wBAAgB,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3E,IAAI,EACJ,OAAO,EACP,aAAa,EACb,eAAe,EACf,OAAO,EACP,2BAA2B,EAC3B,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,0BAA0B,EAC1B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EACb,OAAO,GACR,EAAE,8BAA8B,CAAC,CAAC,CAAC,+BA6GnC"}

package/dist/data/DataTablePreferencesSheet.js

@@ -0,0 +1,136 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Icon } from "./Icon.js";
+import { Modal } from "../overlay/Modal.js";
+import { DensityMenuSection, MenuActionSection, ThemeMenuSection } from "./DataTableMenuSections.js";
+import { isColumnHideable, labelText } from "./data-table-utils.js";
+import { UiEyeClosed } from "../icons/components/UiEyeClosed.js";
+function DataTablePreferencesSheet({
+  open,
+  columns,
+  hiddenColumns,
+  activeColumnKey,
+  actions,
+  showColumnVisibilityControl,
+  showDensityControl,
+  showThemeControl,
+  themeMenuValue,
+  densityOverride,
+  visibleHideableColumnCount,
+  onToggle,
+  onShowAll,
+  onDensityChange,
+  onThemeChange,
+  onClose
+}) {
+  const activeColumn = activeColumnKey ? columns.find((column) => column.key === activeColumnKey) : void 0;
+  const canHideActiveColumn = activeColumn && isColumnHideable(activeColumn) && visibleHideableColumnCount > 1;
+  const hasActions = actions.length > 0;
+  return /* @__PURE__ */ jsxs(Modal, { open, onClose, title: "Table options", size: "sm", scrollBody: true, children: [
+    showColumnVisibilityControl && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-2 py-1.5 text-xs font-medium text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: "Columns" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "min-h-10 rounded px-1.5 text-sm text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+            onClick: onShowAll,
+            children: "Show all"
+          }
+        )
+      ] }),
+      activeColumn && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: !canHideActiveColumn,
+            className: cn(
+              "flex min-h-10 w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+              !canHideActiveColumn && "cursor-not-allowed opacity-50"
+            ),
+            onClick: () => {
+              if (!canHideActiveColumn) return;
+              onToggle(activeColumn);
+              onClose();
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: UiEyeClosed,
+                  className: "text-sm text-muted-foreground"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Hide ",
+                labelText(activeColumn)
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-border" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: columns.map((column) => {
+        const hideable = isColumnHideable(column);
+        const visible = hiddenColumns[column.key] !== true;
+        const disabled = !hideable || visible && visibleHideableColumnCount <= 1;
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: cn(
+              "flex min-h-10 cursor-pointer items-center gap-2 rounded-md px-3 text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
+              disabled && "cursor-not-allowed opacity-50"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: "h-5 w-5 rounded border-border",
+                  checked: visible,
+                  disabled,
+                  onChange: () => onToggle(column)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: labelText(column) })
+            ]
+          },
+          column.key
+        );
+      }) })
+    ] }),
+    showDensityControl && /* @__PURE__ */ jsx(
+      DensityMenuSection,
+      {
+        densityOverride,
+        separated: showColumnVisibilityControl,
+        onDensityChange,
+        size: "sheet"
+      }
+    ),
+    hasActions && /* @__PURE__ */ jsx(
+      MenuActionSection,
+      {
+        actions,
+        separated: showColumnVisibilityControl || showDensityControl,
+        onClose,
+        size: "sheet"
+      }
+    ),
+    showThemeControl && onThemeChange && /* @__PURE__ */ jsx(
+      ThemeMenuSection,
+      {
+        value: themeMenuValue ?? "system",
+        separated: showColumnVisibilityControl || showDensityControl || hasActions,
+        onChange: onThemeChange,
+        size: "sheet"
+      }
+    )
+  ] });
+}
+export {
+  DataTablePreferencesSheet
+};
+//# sourceMappingURL=DataTablePreferencesSheet.js.map

package/dist/data/DataTablePreferencesSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePreferencesSheet.js","sources":["../../src/data/DataTablePreferencesSheet.tsx"],"sourcesContent":["import { type Density } from \"../hooks/use-density\";\nimport { type Theme } from \"../hooks/use-theme\";\nimport { cn } from \"../lib/utils\";\nimport { UiEyeClosed } from \"../icons\";\nimport { Icon } from \"./Icon\";\nimport { Modal } from \"../overlay/Modal\";\nimport {\n  DensityMenuSection,\n  MenuActionSection,\n  ThemeMenuSection,\n} from \"./DataTableMenuSections\";\nimport { isColumnHideable, labelText } from \"./data-table-utils\";\nimport type { DataTableColumn, DataTableMenuAction } from \"./DataTable\";\n\n// The phone counterpart to the floating ColumnVisibilityMenu: same section\n// order and the same show*/on* contract, but rendered inside a full-height\n// Modal sheet with 40px touch targets instead of a positioned popover. Wired\n// in DataTable.tsx behind a `(max-width: 639px)` media query.\nexport type DataTablePreferencesSheetProps<T extends Record<string, unknown>> =\n  {\n    open: boolean;\n    columns: DataTableColumn<T>[];\n    hiddenColumns: Record<string, boolean>;\n    activeColumnKey?: string | undefined;\n    actions: DataTableMenuAction[];\n    showColumnVisibilityControl: boolean;\n    showDensityControl: boolean;\n    showThemeControl: boolean;\n    themeMenuValue: Theme | undefined;\n    densityOverride: Density | undefined;\n    visibleHideableColumnCount: number;\n    onToggle: (column: DataTableColumn<T>) => void;\n    onShowAll: () => void;\n    onDensityChange: (density: Density | undefined) => void;\n    onThemeChange?: (theme: Theme) => void;\n    onClose: () => void;\n  };\n\nexport function DataTablePreferencesSheet<T extends Record<string, unknown>>({\n  open,\n  columns,\n  hiddenColumns,\n  activeColumnKey,\n  actions,\n  showColumnVisibilityControl,\n  showDensityControl,\n  showThemeControl,\n  themeMenuValue,\n  densityOverride,\n  visibleHideableColumnCount,\n  onToggle,\n  onShowAll,\n  onDensityChange,\n  onThemeChange,\n  onClose,\n}: DataTablePreferencesSheetProps<T>) {\n  const activeColumn = activeColumnKey\n    ? columns.find((column) => column.key === activeColumnKey)\n    : undefined;\n  const canHideActiveColumn =\n    activeColumn &&\n    isColumnHideable(activeColumn) &&\n    visibleHideableColumnCount > 1;\n  const hasActions = actions.length > 0;\n\n  return (\n    <Modal open={open} onClose={onClose} title=\"Table options\" size=\"sm\" scrollBody>\n      {showColumnVisibilityControl && (\n        <>\n          <div className=\"flex items-center justify-between gap-3 px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n            <span>Columns</span>\n            <button\n              type=\"button\"\n              className=\"min-h-10 rounded px-1.5 text-sm text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none\"\n              onClick={onShowAll}\n            >\n              Show all\n            </button>\n          </div>\n\n          {activeColumn && (\n            <>\n              <button\n                type=\"button\"\n                disabled={!canHideActiveColumn}\n                className={cn(\n                  \"flex min-h-10 w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none\",\n                  !canHideActiveColumn && \"cursor-not-allowed opacity-50\",\n                )}\n                onClick={() => {\n                  if (!canHideActiveColumn) return;\n                  onToggle(activeColumn);\n                  onClose();\n                }}\n              >\n                <Icon\n                  icon={UiEyeClosed}\n                  className=\"text-sm text-muted-foreground\"\n                />\n                <span>Hide {labelText(activeColumn)}</span>\n              </button>\n              <div className=\"my-1 h-px bg-border\" />\n            </>\n          )}\n\n          <div>\n            {columns.map((column) => {\n              const hideable = isColumnHideable(column);\n              const visible = hiddenColumns[column.key] !== true;\n              const disabled =\n                !hideable || (visible && visibleHideableColumnCount <= 1);\n              return (\n                <label\n                  key={column.key}\n                  className={cn(\n                    \"flex min-h-10 cursor-pointer items-center gap-2 rounded-md px-3 text-sm transition-colors hover:bg-accent hover:text-accent-foreground\",\n                    disabled && \"cursor-not-allowed opacity-50\",\n                  )}\n                >\n                  <input\n                    type=\"checkbox\"\n                    className=\"h-5 w-5 rounded border-border\"\n                    checked={visible}\n                    disabled={disabled}\n                    onChange={() => onToggle(column)}\n                  />\n                  <span className=\"truncate\">{labelText(column)}</span>\n                </label>\n              );\n            })}\n          </div>\n        </>\n      )}\n\n      {showDensityControl && (\n        <DensityMenuSection\n          densityOverride={densityOverride}\n          separated={showColumnVisibilityControl}\n          onDensityChange={onDensityChange}\n          size=\"sheet\"\n        />\n      )}\n\n      {hasActions && (\n        <MenuActionSection\n          actions={actions}\n          separated={showColumnVisibilityControl || showDensityControl}\n          onClose={onClose}\n          size=\"sheet\"\n        />\n      )}\n\n      {showThemeControl && onThemeChange && (\n        <ThemeMenuSection\n          value={themeMenuValue ?? \"system\"}\n          separated={\n            showColumnVisibilityControl || showDensityControl || hasActions\n          }\n          onChange={onThemeChange}\n          size=\"sheet\"\n        />\n      )}\n    </Modal>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/ExecutionTree.cjs

@@ -10,6 +10,8 @@ function ExecutionTree({
   defaultOpenDepth = 1,
   costThreshold,
   renderRow,
+  renderDetail,
+  renderAfterChildren,
   loadChildren
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -22,6 +24,8 @@ function ExecutionTree({
       ...className !== void 0 ? { className } : {},
       ...empty !== void 0 ? { empty } : {},
       ...showControls !== void 0 ? { showControls } : {},
+      ...renderDetail ? { renderDetail } : {},
+      ...renderAfterChildren ? { renderAfterChildren } : {},
       ...loadChildren ? { loadChildren, hasMoreChildren: (n) => n.expandable === true } : {},
       renderRow: ({ node }) => renderRow ? renderRow(node) : /* @__PURE__ */ jsxRuntime.jsx(DefaultExecutionRow, { node, costThreshold })
     }

package/dist/data/ExecutionTree.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExecutionTree.cjs","sources":["../../src/data/ExecutionTree.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Tree } from \"./Tree\";\n\n// ExecutionTree renders a generic, type-agnostic call/execution tree — a method\n// call tree, a span tree, an activity sequence — where each node carries a cost\n// and a status and may nest. It is the shared home for what used to be\n// per-feature call-tree renderers: any producer maps its data into\n// ExecutionNode and gets the same tree, timing, and status rendering.\n\nexport type ExecutionNode = {\n  /** Stable unique key within the tree. */\n  id: string;\n  /** Display label (method/operation/step name). */\n  label: string;\n  /** Free-form node kind hint. */\n  kind?: string;\n  /** Outcome: ok | error | warning | running | pending. */\n  status?: string;\n  /** Numeric cost in `unit`. */\n  cost?: number;\n  /** Cost unit (default \"ms\"). */\n  unit?: string;\n  /** Aggregated invocation count (renders ×N when > 1). */\n  times?: number;\n  /** Owning class / file, rendered as a muted suffix. */\n  className?: string;\n  lineNumber?: number;\n  /** Extra key/values rendered as muted chips. */\n  detail?: Record<string, string>;\n  /** Node can be expanded via loadChildren even with no inline children. */\n  expandable?: boolean;\n  children?: ExecutionNode[];\n};\n\nexport type ExecutionTreeProps<T extends ExecutionNode = ExecutionNode> = {\n  roots: T[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  /** Open nodes shallower than this depth on first render (default 1). */\n  defaultOpenDepth?: number;\n  /** Costs at or above this value render in red (slow-path highlight). */\n  costThreshold?: number;\n  /** Override the entire row rendering. */\n  renderRow?: (node: T) => ReactNode;\n  loadChildren?: (node: T) => Promise<T[]>;\n};\n\nexport function ExecutionTree<T extends ExecutionNode = ExecutionNode>({\n  roots,\n  className,\n  empty,\n  showControls,\n  defaultOpenDepth = 1,\n  costThreshold,\n  renderRow,\n  loadChildren,\n}: ExecutionTreeProps<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 }) =>\n        renderRow ? renderRow(node) : <DefaultExecutionRow node={node} costThreshold={costThreshold} />\n      }\n    />\n  );\n}\n\nfunction DefaultExecutionRow({ node, costThreshold }: { node: ExecutionNode; costThreshold: number | undefined }) {\n  const slow = costThreshold != null && node.cost != null && node.cost >= costThreshold;\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs\">\n      {node.status && <StatusDot status={node.status} />}\n      <span className=\"font-semibold text-foreground\">{node.label}</span>\n      {node.cost != null && (\n        <span className={slow ? \"text-red-600\" : \"text-muted-foreground\"}>{formatCost(node)}</span>\n      )}\n      {node.times != null && node.times > 1 && (\n        <span className=\"text-muted-foreground/60\">×{node.times}</span>\n      )}\n      {node.className && (\n        <span className=\"break-all text-muted-foreground/60\">\n          {node.className}\n          {node.lineNumber != null && node.lineNumber > 0 ? `:${node.lineNumber}` : \"\"}\n        </span>\n      )}\n      {node.detail &&\n        Object.entries(node.detail).map(([k, v]) => (\n          <span key={k} className=\"text-muted-foreground/60\">\n            {k}={v}\n          </span>\n        ))}\n    </div>\n  );\n}\n\nfunction formatCost(node: ExecutionNode): string {\n  const unit = node.unit || \"ms\";\n  const value = node.cost ?? 0;\n  return unit === \"ms\" ? `${value.toFixed(3)}ms` : `${value} ${unit}`;\n}\n\nconst STATUS_COLOR: Record<string, string> = {\n  ok: \"text-green-600\",\n  success: \"text-green-600\",\n  error: \"text-red-600\",\n  warning: \"text-amber-500\",\n  running: \"text-blue-600\",\n  pending: \"text-muted-foreground\",\n};\n\nfunction StatusDot({ status }: { status: string }) {\n  return (\n    <span className={`shrink-0 ${STATUS_COLOR[status] ?? \"text-muted-foreground\"}`} title={status}>\n      ●\n    </span>\n  );\n}\n"],"names":["jsx","Tree","jsxs"],"mappings":";;;;AAgDO,SAAS,cAAuD;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,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,KAAA,MACZ,YAAY,UAAU,IAAI,IAAID,+BAAC,qBAAA,EAAoB,MAAY,cAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AAIrG;AAEA,SAAS,oBAAoB,EAAE,MAAM,iBAA6E;AAChH,QAAM,OAAO,iBAAiB,QAAQ,KAAK,QAAQ,QAAQ,KAAK,QAAQ;AACxE,SACEE,2BAAAA,KAAC,OAAA,EAAI,WAAU,sEACZ,UAAA;AAAA,IAAA,KAAK,UAAUF,+BAAC,WAAA,EAAU,QAAQ,KAAK,QAAQ;AAAA,IAChDA,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCAAiC,eAAK,OAAM;AAAA,IAC3D,KAAK,QAAQ,QACZA,2BAAAA,IAAC,QAAA,EAAK,WAAW,OAAO,iBAAiB,yBAA0B,UAAA,WAAW,IAAI,EAAA,CAAE;AAAA,IAErF,KAAK,SAAS,QAAQ,KAAK,QAAQ,KAClCE,2BAAAA,KAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA;AAAA,MAAA;AAAA,MAAE,KAAK;AAAA,IAAA,GAAM;AAAA,IAEzD,KAAK,aACJA,gCAAC,QAAA,EAAK,WAAU,sCACb,UAAA;AAAA,MAAA,KAAK;AAAA,MACL,KAAK,cAAc,QAAQ,KAAK,aAAa,IAAI,IAAI,KAAK,UAAU,KAAK;AAAA,IAAA,GAC5E;AAAA,IAED,KAAK,UACJ,OAAO,QAAQ,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MACpCA,gCAAC,QAAA,EAAa,WAAU,4BACrB,UAAA;AAAA,MAAA;AAAA,MAAE;AAAA,MAAE;AAAA,IAAA,EAAA,GADI,CAEX,CACD;AAAA,EAAA,GACL;AAEJ;AAEA,SAAS,WAAW,MAA6B;AAC/C,QAAM,OAAO,KAAK,QAAQ;AAC1B,QAAM,QAAQ,KAAK,QAAQ;AAC3B,SAAO,SAAS,OAAO,GAAG,MAAM,QAAQ,CAAC,CAAC,OAAO,GAAG,KAAK,IAAI,IAAI;AACnE;AAEA,MAAM,eAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,UAAU,EAAE,UAA8B;AACjD,SACEF,2BAAAA,IAAC,QAAA,EAAK,WAAW,YAAY,aAAa,MAAM,KAAK,uBAAuB,IAAI,OAAO,QAAQ,UAAA,IAAA,CAE/F;AAEJ;;"}
+{"version":3,"file":"ExecutionTree.cjs","sources":["../../src/data/ExecutionTree.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Tree } from \"./Tree\";\n\n// ExecutionTree renders a generic, type-agnostic call/execution tree — a method\n// call tree, a span tree, an activity sequence — where each node carries a cost\n// and a status and may nest. It is the shared home for what used to be\n// per-feature call-tree renderers: any producer maps its data into\n// ExecutionNode and gets the same tree, timing, and status rendering.\n\nexport type ExecutionNode = {\n  /** Stable unique key within the tree. */\n  id: string;\n  /** Display label (method/operation/step name). */\n  label: string;\n  /** Free-form node kind hint. */\n  kind?: string;\n  /** Outcome: ok | error | warning | running | pending. */\n  status?: string;\n  /** Numeric cost in `unit`. */\n  cost?: number;\n  /** Cost unit (default \"ms\"). */\n  unit?: string;\n  /** Aggregated invocation count (renders ×N when > 1). */\n  times?: number;\n  /** Owning class / file, rendered as a muted suffix. */\n  className?: string;\n  lineNumber?: number;\n  /** Extra key/values rendered as muted chips. */\n  detail?: Record<string, string>;\n  /** Node can be expanded via loadChildren even with no inline children. */\n  expandable?: boolean;\n  children?: ExecutionNode[];\n};\n\nexport type ExecutionTreeProps<T extends ExecutionNode = ExecutionNode> = {\n  roots: T[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  /** Open nodes shallower than this depth on first render (default 1). */\n  defaultOpenDepth?: number;\n  /** Costs at or above this value render in red (slow-path highlight). */\n  costThreshold?: number;\n  /** Override the entire row rendering. */\n  renderRow?: (node: T) => ReactNode;\n  /**\n   * Render extra content beneath a node's row and above its children (e.g. the\n   * decompiled source line a call was made from). Rendered for leaf and parent\n   * nodes alike; a click or keydown inside it never toggles the row. Returning\n   * `null`/`undefined`/`false` renders nothing.\n   */\n  renderDetail?: (node: T) => ReactNode;\n  /** Render a call's return or error after its nested calls. */\n  renderAfterChildren?: (node: T) => ReactNode;\n  loadChildren?: (node: T) => Promise<T[]>;\n};\n\nexport function ExecutionTree<T extends ExecutionNode = ExecutionNode>({\n  roots,\n  className,\n  empty,\n  showControls,\n  defaultOpenDepth = 1,\n  costThreshold,\n  renderRow,\n  renderDetail,\n  renderAfterChildren,\n  loadChildren,\n}: ExecutionTreeProps<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      {...(renderDetail ? { renderDetail } : {})}\n      {...(renderAfterChildren ? { renderAfterChildren } : {})}\n      {...(loadChildren ? { loadChildren, hasMoreChildren: (n: T) => n.expandable === true } : {})}\n      renderRow={({ node }) =>\n        renderRow ? renderRow(node) : <DefaultExecutionRow node={node} costThreshold={costThreshold} />\n      }\n    />\n  );\n}\n\nfunction DefaultExecutionRow({ node, costThreshold }: { node: ExecutionNode; costThreshold: number | undefined }) {\n  const slow = costThreshold != null && node.cost != null && node.cost >= costThreshold;\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2 font-mono text-xs\">\n      {node.status && <StatusDot status={node.status} />}\n      <span className=\"font-semibold text-foreground\">{node.label}</span>\n      {node.cost != null && (\n        <span className={slow ? \"text-red-600\" : \"text-muted-foreground\"}>{formatCost(node)}</span>\n      )}\n      {node.times != null && node.times > 1 && (\n        <span className=\"text-muted-foreground/60\">×{node.times}</span>\n      )}\n      {node.className && (\n        <span className=\"break-all text-muted-foreground/60\">\n          {node.className}\n          {node.lineNumber != null && node.lineNumber > 0 ? `:${node.lineNumber}` : \"\"}\n        </span>\n      )}\n      {node.detail &&\n        Object.entries(node.detail).map(([k, v]) => (\n          <span key={k} className=\"text-muted-foreground/60\">\n            {k}={v}\n          </span>\n        ))}\n    </div>\n  );\n}\n\nfunction formatCost(node: ExecutionNode): string {\n  const unit = node.unit || \"ms\";\n  const value = node.cost ?? 0;\n  return unit === \"ms\" ? `${value.toFixed(3)}ms` : `${value} ${unit}`;\n}\n\nconst STATUS_COLOR: Record<string, string> = {\n  ok: \"text-green-600\",\n  success: \"text-green-600\",\n  error: \"text-red-600\",\n  warning: \"text-amber-500\",\n  running: \"text-blue-600\",\n  pending: \"text-muted-foreground\",\n};\n\nfunction StatusDot({ status }: { status: string }) {\n  return (\n    <span className={`shrink-0 ${STATUS_COLOR[status] ?? \"text-muted-foreground\"}`} title={status}>\n      ●\n    </span>\n  );\n}\n"],"names":["jsx","Tree","jsxs"],"mappings":";;;;AAyDO,SAAS,cAAuD;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,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,aAAA,IAAiB,CAAA;AAAA,MACtC,GAAI,sBAAsB,EAAE,oBAAA,IAAwB,CAAA;AAAA,MACpD,GAAI,eAAe,EAAE,cAAc,iBAAiB,CAAC,MAAS,EAAE,eAAe,KAAA,IAAS,CAAA;AAAA,MACzF,WAAW,CAAC,EAAE,KAAA,MACZ,YAAY,UAAU,IAAI,IAAID,+BAAC,qBAAA,EAAoB,MAAY,cAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AAIrG;AAEA,SAAS,oBAAoB,EAAE,MAAM,iBAA6E;AAChH,QAAM,OAAO,iBAAiB,QAAQ,KAAK,QAAQ,QAAQ,KAAK,QAAQ;AACxE,SACEE,2BAAAA,KAAC,OAAA,EAAI,WAAU,sEACZ,UAAA;AAAA,IAAA,KAAK,UAAUF,+BAAC,WAAA,EAAU,QAAQ,KAAK,QAAQ;AAAA,IAChDA,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCAAiC,eAAK,OAAM;AAAA,IAC3D,KAAK,QAAQ,QACZA,2BAAAA,IAAC,QAAA,EAAK,WAAW,OAAO,iBAAiB,yBAA0B,UAAA,WAAW,IAAI,EAAA,CAAE;AAAA,IAErF,KAAK,SAAS,QAAQ,KAAK,QAAQ,KAClCE,2BAAAA,KAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA;AAAA,MAAA;AAAA,MAAE,KAAK;AAAA,IAAA,GAAM;AAAA,IAEzD,KAAK,aACJA,gCAAC,QAAA,EAAK,WAAU,sCACb,UAAA;AAAA,MAAA,KAAK;AAAA,MACL,KAAK,cAAc,QAAQ,KAAK,aAAa,IAAI,IAAI,KAAK,UAAU,KAAK;AAAA,IAAA,GAC5E;AAAA,IAED,KAAK,UACJ,OAAO,QAAQ,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MACpCA,gCAAC,QAAA,EAAa,WAAU,4BACrB,UAAA;AAAA,MAAA;AAAA,MAAE;AAAA,MAAE;AAAA,IAAA,EAAA,GADI,CAEX,CACD;AAAA,EAAA,GACL;AAEJ;AAEA,SAAS,WAAW,MAA6B;AAC/C,QAAM,OAAO,KAAK,QAAQ;AAC1B,QAAM,QAAQ,KAAK,QAAQ;AAC3B,SAAO,SAAS,OAAO,GAAG,MAAM,QAAQ,CAAC,CAAC,OAAO,GAAG,KAAK,IAAI,IAAI;AACnE;AAEA,MAAM,eAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,UAAU,EAAE,UAA8B;AACjD,SACEF,2BAAAA,IAAC,QAAA,EAAK,WAAW,YAAY,aAAa,MAAM,KAAK,uBAAuB,IAAI,OAAO,QAAQ,UAAA,IAAA,CAE/F;AAEJ;;"}

package/dist/data/ExecutionTree.d.ts

@@ -34,7 +34,16 @@ export type ExecutionTreeProps<T extends ExecutionNode = ExecutionNode> = {
     costThreshold?: number;
     /** Override the entire row rendering. */
     renderRow?: (node: T) => ReactNode;
+    /**
+     * Render extra content beneath a node's row and above its children (e.g. the
+     * decompiled source line a call was made from). Rendered for leaf and parent
+     * nodes alike; a click or keydown inside it never toggles the row. Returning
+     * `null`/`undefined`/`false` renders nothing.
+     */
+    renderDetail?: (node: T) => ReactNode;
+    /** Render a call's return or error after its nested calls. */
+    renderAfterChildren?: (node: T) => ReactNode;
     loadChildren?: (node: T) => Promise<T[]>;
 };
-export declare function ExecutionTree<T extends ExecutionNode = ExecutionNode>({ roots, className, empty, showControls, defaultOpenDepth, costThreshold, renderRow, loadChildren, }: ExecutionTreeProps<T>): import("react").JSX.Element;
+export declare function ExecutionTree<T extends ExecutionNode = ExecutionNode>({ roots, className, empty, showControls, defaultOpenDepth, costThreshold, renderRow, renderDetail, renderAfterChildren, loadChildren, }: ExecutionTreeProps<T>): import("react").JSX.Element;
 //# sourceMappingURL=ExecutionTree.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExecutionTree.d.ts","sourceRoot":"","sources":["../../src/data/ExecutionTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,MAAM,MAAM,aAAa,GAAG;IAC1B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI;IACxE,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,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yCAAyC;IACzC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;CAC1C,CAAC;AAEF,wBAAgB,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,EAAE,EACrE,KAAK,EACL,SAAS,EACT,KAAK,EACL,YAAY,EACZ,gBAAoB,EACpB,aAAa,EACb,SAAS,EACT,YAAY,GACb,EAAE,kBAAkB,CAAC,CAAC,CAAC,+BAgBvB"}
+{"version":3,"file":"ExecutionTree.d.ts","sourceRoot":"","sources":["../../src/data/ExecutionTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,MAAM,MAAM,aAAa,GAAG;IAC1B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI;IACxE,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,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yCAAyC;IACzC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACnC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACtC,8DAA8D;IAC9D,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;CAC1C,CAAC;AAEF,wBAAgB,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,EAAE,EACrE,KAAK,EACL,SAAS,EACT,KAAK,EACL,YAAY,EACZ,gBAAoB,EACpB,aAAa,EACb,SAAS,EACT,YAAY,EACZ,mBAAmB,EACnB,YAAY,GACb,EAAE,kBAAkB,CAAC,CAAC,CAAC,+BAkBvB"}

package/dist/data/ExecutionTree.js

@@ -8,6 +8,8 @@ function ExecutionTree({
   defaultOpenDepth = 1,
   costThreshold,
   renderRow,
+  renderDetail,
+  renderAfterChildren,
   loadChildren
 }) {
   return /* @__PURE__ */ jsx(
@@ -20,6 +22,8 @@ function ExecutionTree({
       ...className !== void 0 ? { className } : {},
       ...empty !== void 0 ? { empty } : {},
       ...showControls !== void 0 ? { showControls } : {},
+      ...renderDetail ? { renderDetail } : {},
+      ...renderAfterChildren ? { renderAfterChildren } : {},
       ...loadChildren ? { loadChildren, hasMoreChildren: (n) => n.expandable === true } : {},
       renderRow: ({ node }) => renderRow ? renderRow(node) : /* @__PURE__ */ jsx(DefaultExecutionRow, { node, costThreshold })
     }