@upbound/monarch-blocks 0.7.3 → 0.8.1

package/dist/index.js

@@ -2863,21 +2863,74 @@ function ChatInterface(_a) {
 }
 
 // src/code-block.tsx
-import { useEffect as useEffect3, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useId as useId2, useRef as useRef3, useState as useState5 } from "react";
 import { Icon as Icon3 } from "@upbound/monarch-core";
 import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
+  InputGroup as InputGroup3,
+  InputGroupAddon as InputGroupAddon3,
+  InputGroupButton,
+  InputGroupInput as InputGroupInput2,
+  InputGroupText as InputGroupText2,
   Tooltip as Tooltip3,
   TooltipContent as TooltipContent2,
   TooltipTrigger as TooltipTrigger2
 } from "@upbound/monarch-core";
 
+// src/lib/find-text.ts
+function findTextRanges(root, query) {
+  var _a, _b;
+  const needle = query.toLowerCase();
+  if (!needle) return [];
+  const doc = (_a = root.ownerDocument) != null ? _a : document;
+  const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  const nodes = [];
+  const starts = [];
+  let text = "";
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    nodes.push(node);
+    starts.push(text.length);
+    text += (_b = node.nodeValue) != null ? _b : "";
+  }
+  let nodeIndex = 0;
+  const locate = (offset, isEnd) => {
+    while (nodeIndex < nodes.length - 1 && (isEnd ? starts[nodeIndex + 1] < offset : starts[nodeIndex + 1] <= offset)) {
+      nodeIndex++;
+    }
+    return [nodes[nodeIndex], offset - starts[nodeIndex]];
+  };
+  const haystack = text.toLowerCase();
+  const ranges = [];
+  for (let at = haystack.indexOf(needle); at !== -1; at = haystack.indexOf(needle, at + needle.length)) {
+    const range = doc.createRange();
+    range.setStart(...locate(at, false));
+    range.setEnd(...locate(at + needle.length, true));
+    ranges.push(range);
+  }
+  return ranges;
+}
+
+// src/lib/search-input.ts
+var SEARCH_INPUT_PROPS = {
+  type: "search",
+  autoComplete: "off",
+  "data-1p-ignore": true,
+  // 1Password
+  "data-lpignore": "true",
+  // LastPass
+  "data-bwignore": true,
+  // Bitwarden
+  "data-form-type": "other"
+  // Dashlane
+};
+var SEARCH_INPUT_CLASS = "[&::-webkit-search-cancel-button]:appearance-none";
+
 // src/lib/highlight.ts
 import { createHighlighter } from "shiki";
-var CODE_BLOCK_LANGUAGES = ["tsx", "typescript", "bash", "shell", "json", "css", "yaml"];
+var CODE_BLOCK_LANGUAGES = ["tsx", "typescript", "bash", "shell", "json", "css", "yaml", "python"];
 var HIGHLIGHTER_KEY = "__monarch_shiki_highlighter__";
 function getHighlighter() {
   const g = globalThis;
@@ -2956,23 +3009,84 @@ var LINE_NUMBER_GUTTER = cn(
   "[&_.line]:before:text-[0.75rem]",
   "[&_.line]:before:select-none"
 );
+var SHIKI_DARK_THEME = [
+  "dark:[&_.shiki]:text-(--shiki-dark)!",
+  "dark:[&_.shiki_span]:text-(--shiki-dark)!",
+  "dark:[&_.shiki_span]:[font-style:var(--shiki-dark-font-style)]!",
+  "dark:[&_.shiki_span]:[font-weight:var(--shiki-dark-font-weight)]!",
+  "dark:[&_.shiki_span]:[text-decoration:var(--shiki-dark-text-decoration)]!"
+];
+var CODE_BLOCK_ICON_BUTTON = cn(
+  "border-border bg-background inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border motion-safe:transition-colors",
+  "text-muted-foreground hover:bg-accent hover:text-foreground",
+  "focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none",
+  "group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted group-data-[variant=terminal]/code-block:hover:bg-terminal-muted-hover-bg group-data-[variant=terminal]/code-block:hover:text-terminal-muted-hover-fg"
+);
+function supportsHighlights() {
+  return typeof CSS !== "undefined" && "highlights" in CSS && typeof Highlight !== "undefined";
+}
+function useCodeSearch(codeRef, query, renderedCode) {
+  const id = useId2().replace(/[^a-zA-Z0-9_-]/g, "");
+  const names = { all: `code-find-${id}`, current: `code-find-${id}-current` };
+  const [ranges, setRanges] = useState5([]);
+  const [current, setCurrent] = useState5(0);
+  useEffect3(() => {
+    const root = codeRef.current;
+    const next = root ? findTextRanges(root, query) : [];
+    setRanges(next);
+    setCurrent(0);
+    if (!supportsHighlights() || next.length === 0) return;
+    CSS.highlights.set(names.all, new Highlight(...next));
+    return () => {
+      CSS.highlights.delete(names.all);
+    };
+  }, [codeRef, query, renderedCode, names.all]);
+  useEffect3(() => {
+    var _a, _b;
+    const range = ranges[current];
+    if (!range) return;
+    (_b = (_a = range.startContainer.parentElement) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, { block: "nearest", inline: "nearest" });
+    if (!supportsHighlights()) return;
+    CSS.highlights.set(names.current, new Highlight(range));
+    return () => {
+      CSS.highlights.delete(names.current);
+    };
+  }, [ranges, current, names.current]);
+  const step = (by) => setCurrent((i) => ranges.length ? (i + by + ranges.length) % ranges.length : 0);
+  return {
+    count: ranges.length,
+    current,
+    next: () => step(1),
+    previous: () => step(-1),
+    highlightCss: `::highlight(${names.all}){background-color:color-mix(in oklch,var(--status-warning) 30%,transparent)}::highlight(${names.current}){background-color:color-mix(in oklch,var(--status-warning) 65%,transparent)}`
+  };
+}
 function CodeBlockBody(_a) {
   var _b = _a, {
     className,
     code,
     maxHeight,
+    searchable = false,
     copyButton,
     downloadButton
   } = _b, props = __objRest(_b, [
     "className",
     "code",
     "maxHeight",
+    "searchable",
     "copyButton",
     "downloadButton"
   ]);
   const { content, lineNumbers } = code;
   const [html, setHtml] = useState5(null);
   const language = code.type === "parsed" ? code.language : null;
+  const [searchOpen, setSearchOpen] = useState5(false);
+  const [query, setQuery] = useState5("");
+  const codeRef = useRef3(null);
+  const searchInputRef = useRef3(null);
+  const searchInputId = `code-search-${useId2()}`;
+  const searchButtonRef = useRef3(null);
+  const search = useCodeSearch(codeRef, searchOpen ? query : "", html != null ? html : content);
   useEffect3(() => {
     if (!language) {
       setHtml(null);
@@ -2986,32 +3100,127 @@ function CodeBlockBody(_a) {
       cancelled = true;
     };
   }, [content, language]);
-  return /* @__PURE__ */ jsxs4(CardContent, __spreadProps(__spreadValues({ "data-line-numbers": lineNumbers || void 0, className: cn("relative p-0!", className) }, props), { children: [
-    (copyButton || downloadButton) && /* @__PURE__ */ jsxs4("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition-opacity group-hover/code-block:opacity-100", children: [
-      copyButton,
-      downloadButton
-    ] }),
-    /* @__PURE__ */ jsx6(
-      "div",
+  const openSearch = () => {
+    var _a2, _b2;
+    setSearchOpen(true);
+    (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+    (_b2 = searchInputRef.current) == null ? void 0 : _b2.select();
+  };
+  const closeSearch = useCallback3(() => {
+    var _a2;
+    setSearchOpen(false);
+    setQuery("");
+    (_a2 = searchButtonRef.current) == null ? void 0 : _a2.focus();
+  }, []);
+  useEffect3(() => {
+    if (!searchOpen) return;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.target !== searchInputRef.current) return;
+      event.preventDefault();
+      event.stopPropagation();
+      closeSearch();
+    };
+    window.addEventListener("keydown", onKeyDown, { capture: true });
+    return () => window.removeEventListener("keydown", onKeyDown, { capture: true });
+  }, [searchOpen, closeSearch]);
+  const searchButton = searchable && /* @__PURE__ */ jsxs4(Tooltip3, { children: [
+    /* @__PURE__ */ jsx6(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx6(
+      "button",
       {
-        className: cn("overflow-x-auto", maxHeight && "overflow-y-auto"),
-        style: maxHeight ? { maxHeight } : void 0,
-        children: /* @__PURE__ */ jsx6(
-          "div",
-          {
-            className: cn(
-              "[&_code]:font-mono [&_pre]:m-0 [&_pre]:p-4 group-data-[size=sm]/code-block:[&_pre]:p-3",
-              html && "[&_pre]:bg-transparent!",
-              lineNumbers && LINE_NUMBER_GUTTER
-            ),
-            children: html ? /* @__PURE__ */ jsx6("div", { dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx6("pre", { children: /* @__PURE__ */ jsx6("code", { className: lineNumbers ? void 0 : "whitespace-pre", children: lineNumbers ? content.split("\n").map((line, i) => /* @__PURE__ */ jsxs4("span", { className: "line", children: [
-              line,
-              "\n"
-            ] }, i)) : content }) })
-          }
-        )
+        ref: searchButtonRef,
+        type: "button",
+        "data-slot": "code-block-search-button",
+        "aria-label": "Search",
+        "aria-expanded": searchOpen,
+        onClick: openSearch,
+        className: CODE_BLOCK_ICON_BUTTON,
+        children: /* @__PURE__ */ jsx6(Icon3, { name: "magnifying-glass", size: "sm" })
       }
-    )
+    ) }),
+    /* @__PURE__ */ jsx6(TooltipContent2, { children: "Search" })
+  ] });
+  return /* @__PURE__ */ jsxs4(CardContent, __spreadProps(__spreadValues({ "data-line-numbers": lineNumbers || void 0, className: cn("relative p-0!", className) }, props), { children: [
+    searchable && searchOpen && /* @__PURE__ */ jsxs4("div", { "data-slot": "code-block-search", className: "p-2", children: [
+      /* @__PURE__ */ jsx6("style", { children: search.highlightCss }),
+      /* @__PURE__ */ jsxs4(InputGroup3, { children: [
+        /* @__PURE__ */ jsx6(InputGroupAddon3, { children: /* @__PURE__ */ jsx6(Icon3, { name: "magnifying-glass" }) }),
+        /* @__PURE__ */ jsx6(
+          InputGroupInput2,
+          __spreadProps(__spreadValues({
+            ref: searchInputRef,
+            autoFocus: true
+          }, SEARCH_INPUT_PROPS), {
+            id: searchInputId,
+            className: SEARCH_INPUT_CLASS,
+            placeholder: "Find\u2026",
+            "aria-label": "Find in code",
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                if (e.shiftKey) search.previous();
+                else search.next();
+              }
+            }
+          })
+        ),
+        /* @__PURE__ */ jsxs4(InputGroupAddon3, { align: "inline-end", children: [
+          /* @__PURE__ */ jsx6(InputGroupText2, { "aria-live": "polite", className: "text-caption tabular-nums", children: query ? search.count ? `${search.current + 1} of ${search.count}` : "No results" : null }),
+          /* @__PURE__ */ jsx6(
+            InputGroupButton,
+            {
+              size: "icon-xs",
+              "aria-label": "Previous match",
+              disabled: search.count === 0,
+              onClick: search.previous,
+              children: /* @__PURE__ */ jsx6(Icon3, { name: "chevron-up" })
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            InputGroupButton,
+            {
+              size: "icon-xs",
+              "aria-label": "Next match",
+              disabled: search.count === 0,
+              onClick: search.next,
+              children: /* @__PURE__ */ jsx6(Icon3, { name: "chevron-down" })
+            }
+          ),
+          /* @__PURE__ */ jsx6(InputGroupButton, { size: "icon-xs", "aria-label": "Close search", onClick: closeSearch, children: /* @__PURE__ */ jsx6(Icon3, { name: "xmark" }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+      (searchButton || copyButton || downloadButton) && /* @__PURE__ */ jsxs4("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition-opacity group-focus-within/code-block:opacity-100 group-hover/code-block:opacity-100", children: [
+        searchButton,
+        copyButton,
+        downloadButton
+      ] }),
+      /* @__PURE__ */ jsx6(
+        "div",
+        {
+          className: cn("overflow-x-auto", maxHeight && "overflow-y-auto"),
+          style: maxHeight ? { maxHeight } : void 0,
+          children: /* @__PURE__ */ jsx6(
+            "div",
+            {
+              ref: codeRef,
+              className: cn(
+                "[&_code]:font-mono [&_pre]:m-0 [&_pre]:p-4 group-data-[size=sm]/code-block:[&_pre]:p-3",
+                html && "[&_pre]:bg-transparent!",
+                html && SHIKI_DARK_THEME,
+                lineNumbers && LINE_NUMBER_GUTTER
+              ),
+              children: html ? /* @__PURE__ */ jsx6("div", { dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx6("pre", { children: /* @__PURE__ */ jsx6("code", { className: lineNumbers ? void 0 : "whitespace-pre", children: lineNumbers ? content.split("\n").map((line, i) => /* @__PURE__ */ jsxs4("span", { className: "line", children: [
+                line,
+                "\n"
+              ] }, i)) : content }) })
+            }
+          )
+        }
+      )
+    ] })
   ] }));
 }
 function CodeBlockFooter(_a) {
@@ -3046,13 +3255,7 @@ function CodeBlockCopyButton(_a) {
       __spreadProps(__spreadValues({
         "data-slot": "code-block-copy-button",
         onClick: handleCopy,
-        className: cn(
-          "border-border bg-background inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border motion-safe:transition-colors",
-          "text-muted-foreground hover:bg-accent hover:text-foreground",
-          "focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none",
-          "group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted group-data-[variant=terminal]/code-block:hover:bg-terminal-muted-hover-bg group-data-[variant=terminal]/code-block:hover:text-terminal-muted-hover-fg",
-          className
-        ),
+        className: cn(CODE_BLOCK_ICON_BUTTON, className),
         "aria-label": copied ? "Copied" : "Copy code"
       }, props), {
         children: copied ? /* @__PURE__ */ jsx6(Icon3, { name: "check", size: "sm", className: "text-green-500" }) : /* @__PURE__ */ jsx6(Icon3, { name: "copy", size: "sm" })
@@ -3093,13 +3296,7 @@ function CodeBlockDownloadButton(_a) {
       __spreadProps(__spreadValues({
         "data-slot": "code-block-download-button",
         onClick: handleDownload,
-        className: cn(
-          "border-border bg-background inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border motion-safe:transition-colors",
-          "text-muted-foreground hover:bg-accent hover:text-foreground",
-          "focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none",
-          "group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted group-data-[variant=terminal]/code-block:hover:bg-terminal-muted-hover-bg group-data-[variant=terminal]/code-block:hover:text-terminal-muted-hover-fg",
-          className
-        ),
+        className: cn(CODE_BLOCK_ICON_BUTTON, className),
         "aria-label": downloaded ? "Downloaded" : "Download code"
       }, props), {
         children: downloaded ? /* @__PURE__ */ jsx6(Icon3, { name: "check", size: "sm", className: "text-green-500" }) : /* @__PURE__ */ jsx6(Icon3, { name: "download", size: "sm" })
@@ -3645,7 +3842,7 @@ import {
   useReactTable
 } from "@tanstack/react-table";
 import { Icon as Icon11 } from "@upbound/monarch-core";
-import { InputGroup as InputGroup3, InputGroupAddon as InputGroupAddon3, InputGroupInput as InputGroupInput2 } from "@upbound/monarch-core";
+import { InputGroup as InputGroup4, InputGroupAddon as InputGroupAddon4, InputGroupInput as InputGroupInput3 } from "@upbound/monarch-core";
 
 // src/lib/data-table/contextual-filters.ts
 function valueToString(value) {
@@ -3741,7 +3938,7 @@ function getColumnFilterCount(filterValue, filter) {
 }
 
 // src/hooks/use-table-column-resizing.ts
-import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef3, useState as useState7 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef4, useState as useState7 } from "react";
 var RESIZE_MIN = 40;
 var RESIZE_MAX = 500;
 var RESIZE_MAX_UNBOUNDED = Number.MAX_SAFE_INTEGER;
@@ -3829,7 +4026,7 @@ function useTableColumnResizing({
   maxSize
 } = {}) {
   const [columnSizing, setColumnSizing] = useState7(() => clampSizing(initialSizing != null ? initialSizing : {}, maxSize));
-  const persistTimerRef = useRef3(null);
+  const persistTimerRef = useRef4(null);
   useEffect4(() => {
     if (!initialSizing) return;
     const next = clampSizing(initialSizing, maxSize);
@@ -3844,14 +4041,14 @@ function useTableColumnResizing({
       if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
     };
   }, []);
-  const debouncedPersist = useCallback4(
+  const debouncedPersist = useCallback5(
     (sizing) => {
       if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
       persistTimerRef.current = setTimeout(() => onColumnSizingPersist == null ? void 0 : onColumnSizingPersist(sizing), PERSIST_DEBOUNCE_MS);
     },
     [onColumnSizingPersist]
   );
-  const handleColumnSizingChange = useCallback4(
+  const handleColumnSizingChange = useCallback5(
     (updaterOrValue) => {
       setColumnSizing((prev) => {
         const raw = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
@@ -3862,18 +4059,18 @@ function useTableColumnResizing({
     },
     [debouncedPersist, maxSize]
   );
-  const cancelPendingPersist = useCallback4(() => {
+  const cancelPendingPersist = useCallback5(() => {
     if (persistTimerRef.current) {
       clearTimeout(persistTimerRef.current);
       persistTimerRef.current = null;
     }
   }, []);
-  const handleAutosizeAll = useCallback4(() => {
+  const handleAutosizeAll = useCallback5(() => {
     cancelPendingPersist();
     setColumnSizing({});
     onColumnSizingPersist == null ? void 0 : onColumnSizingPersist({});
   }, [cancelPendingPersist, onColumnSizingPersist]);
-  const handleAutosizeColumn = useCallback4(
+  const handleAutosizeColumn = useCallback5(
     (columnId) => {
       cancelPendingPersist();
       setColumnSizing((prev) => {
@@ -3887,7 +4084,7 @@ function useTableColumnResizing({
     },
     [cancelPendingPersist, onColumnSizingPersist]
   );
-  const handleResetColumnSize = useCallback4(
+  const handleResetColumnSize = useCallback5(
     (columnId) => {
       cancelPendingPersist();
       setColumnSizing((prev) => {
@@ -4280,8 +4477,7 @@ function DataTableEmptyView({
   emptyView,
   tableState,
   filterCount,
-  resetFilters,
-  className
+  resetFilters
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
   const isFilteredEmpty = tableState === "empty" && filterCount > 0;
@@ -4291,9 +4487,7 @@ function DataTableEmptyView({
     /* @__PURE__ */ jsx10(Icon6, { name: "xmark" }),
     "Clear filters"
   ] }) : null;
-  return /* @__PURE__ */ jsx10("div", { className: cn("flex size-full flex-col justify-center p-6", wrapperClassName, className), children: config && // The error state ignores its own config's `className` for outer
-  // padding, matching the source's forced `pt-0` on that branch.
-  /* @__PURE__ */ jsxs8(Empty, { className: tableState === "error" ? "pt-0" : config.className, children: [
+  return /* @__PURE__ */ jsx10("div", { className: cn("flex size-full flex-col justify-center", wrapperClassName), children: config && /* @__PURE__ */ jsxs8(Empty, { className: cn("border border-dashed", config.className), children: [
     /* @__PURE__ */ jsxs8(EmptyHeader, { children: [
       config.icon && /* @__PURE__ */ jsx10(EmptyMedia, { children: /* @__PURE__ */ jsx10(IconTile, { variant: "branded", children: /* @__PURE__ */ jsx10(Icon6, { name: config.icon }) }) }),
       config.header && /* @__PURE__ */ jsx10(EmptyTitle, { children: config.header }),
@@ -4504,7 +4698,7 @@ import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-r
 var HEADER_SURFACE_BG = "bg-[color-mix(in_oklch,var(--muted)_50%,var(--card))]";
 var TABLE_HEAD_CLASSES = "text-body-sm text-muted-foreground h-10 px-4 text-left align-middle font-medium whitespace-nowrap has-[[role=checkbox]]:pr-0";
 var TABLE_CELL_CLASSES = "px-4 py-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pr-0";
-var TABLE_ROW_CLASSES = "hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted border-b motion-safe:transition-colors";
+var TABLE_ROW_CLASSES = "hover:bg-muted/50 has-[[aria-haspopup][aria-expanded=true]]:bg-muted/50 data-[state=selected]:bg-muted border-b motion-safe:transition-colors";
 function DataTableRoot({
   layout = "auto",
   gridTemplateColumns,
@@ -4968,18 +5162,19 @@ function DataTableBody({
     );
   }
   const rows = tableRows.map((row) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if ((_a = row.getIsGrouped) == null ? void 0 : _a.call(row)) {
       const groupLabel = (_c = row.groupingValue) != null ? _c : row.groupingColumnId ? (_b = row.getGroupingValue) == null ? void 0 : _b.call(row, row.groupingColumnId) : void 0;
       return /* @__PURE__ */ jsx13(DataTableGroupRow, { groupLabel: String(groupLabel != null ? groupLabel : ""), colSpan, layout }, row.id);
     }
-    const isExpanded = !!(renderExpandedRow && ((_d = row.getIsExpanded) == null ? void 0 : _d.call(row)));
-    const expandedRow = renderExpandedRow ? renderExpandedRow(row.original) : null;
+    const isExpanded = !!(((_d = row.getCanExpand) == null ? void 0 : _d.call(row)) && ((_e = row.getIsExpanded) == null ? void 0 : _e.call(row)));
+    const expandedRow = renderExpandedRow && isExpanded ? renderExpandedRow(row.original) : null;
     return /* @__PURE__ */ jsxs11(React8.Fragment, { children: [
       /* @__PURE__ */ jsx13(
         DataTableRow,
-        __spreadProps(__spreadValues({}, onRowRender ? onRowRender(row.original) : {}), {
+        __spreadProps(__spreadValues({}, onRowRender ? onRowRender(row.original, row) : {}), {
           "data-expanded": isExpanded || void 0,
+          "data-depth": row.depth || void 0,
           layout,
           children: row.getVisibleCells().filter((cell) => !isFilterOnlyColumn(cell.column)).map((cell) => /* @__PURE__ */ jsx13(
             DataTableCell,
@@ -4995,7 +5190,7 @@ function DataTableBody({
           ))
         })
       ),
-      /* @__PURE__ */ jsx13(DataTableExpandedRow, { colSpan, show: isExpanded, layout, children: expandedRow })
+      /* @__PURE__ */ jsx13(DataTableExpandedRow, { colSpan, show: expandedRow != null, layout, children: expandedRow })
     ] }, row.id);
   });
   if (isGrid) {
@@ -5730,7 +5925,8 @@ function DataTable({
   renderExpandedRow,
   expanded: parentExpanded,
   onExpandedChange: parentOnExpandedChange,
-  disableSearch = false,
+  disableSearch: deprecatedDisableSearch = false,
+  search,
   disableFilters = false,
   disableSorting = false,
   paginationConfig = true,
@@ -5765,8 +5961,9 @@ function DataTable({
   celFilterConfig,
   filterVisibility
 }) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const isGrid = layout === "grid";
+  const searchInputId = `table-search-${React11.useId()}`;
   const tableBodyScrollRef = React11.useRef(null);
   const [innerGlobalFilter, setInnerGlobalFilter] = React11.useState("");
   const [innerColumnOrdering, setInnerColumnOrdering] = React11.useState([]);
@@ -5839,23 +6036,24 @@ function DataTable({
   const grouping = parentGrouping != null ? parentGrouping : innerGrouping;
   const setGrouping = parentSetGrouping != null ? parentSetGrouping : setInnerGrouping;
   const hasGrouping = grouping.length > 0;
+  const hasSubRows = !!config.getSubRows;
+  const hasExpansion = !!renderExpandedRow || hasSubRows;
+  const disableSearch = (_f = search == null ? void 0 : search.disabled) != null ? _f : deprecatedDisableSearch;
   const hasExternalSearch = parentGlobalFilter !== void 0;
   const hasExternalFilters = parentColumnFilters !== void 0;
   const shouldDisableFiltersModels = !!disableFilters && !!disableSearch && !hasExternalSearch && !hasExternalFilters;
-  const table = useReactTable(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, config), {
+  const table = useReactTable(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, config), {
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: !disableSorting ? getSortedRowModel() : void 0,
     getPaginationRowModel: !shouldDisablePagination ? getPaginationRowModel() : void 0,
     getFilteredRowModel: !shouldDisableFiltersModels ? getFilteredRowModel() : void 0,
     getFacetedRowModel: !shouldDisableFiltersModels ? getFacetedRowModel() : void 0,
     getFacetedUniqueValues: !shouldDisableFiltersModels ? getFacetedUniqueValues() : void 0
-  }), !!renderExpandedRow && {
-    getExpandedRowModel: getExpandedRowModel(),
-    getRowCanExpand: () => true,
-    paginateExpandedRows: false
-  }), {
+  }), !!renderExpandedRow && { getRowCanExpand: () => true }), hasExpansion && { paginateExpandedRows: false }), {
     getGroupedRowModel: hasGrouping ? getGroupedRowModel() : void 0,
-    getExpandedRowModel: hasGrouping ? getExpandedRowModel() : void 0,
+    // Only grouping and `getSubRows` put extra rows in the row model; `renderExpandedRow`
+    // content renders outside it (see `DataTableBody`).
+    getExpandedRowModel: hasGrouping || hasSubRows ? getExpandedRowModel() : void 0,
     groupedColumnMode: hasGrouping ? "reorder" : void 0,
     enableFilters: !shouldDisableFiltersModels,
     enableGlobalFilter: !shouldDisableFiltersModels,
@@ -5878,7 +6076,7 @@ function DataTable({
       columnVisibility: disableColumnVisibility ? {} : columnVisibility,
       columnSizing: disableColumnResizing ? {} : columnSizing,
       columnPinning: disableColumnPinning ? { left: [], right: [] } : columnPinning
-    }, !!renderExpandedRow && { expanded }), {
+    }, hasExpansion && { expanded }), {
       grouping
     }), hasGrouping && { expanded: true }),
     manualSorting: serverSidePagination,
@@ -5892,7 +6090,7 @@ function DataTable({
     onColumnVisibilityChange: disableColumnVisibility ? noop : setColumnVisibility,
     onColumnSizingChange: disableColumnResizing ? noop : handleColumnSizingChange,
     onColumnPinningChange: disableColumnPinning ? noop : setColumnPinning
-  }), !!renderExpandedRow && {
+  }), hasExpansion && {
     onExpandedChange: (updater) => setExpanded((prev) => typeof updater === "function" ? updater(prev) : updater)
   }), {
     onGroupingChange: setGrouping
@@ -5981,17 +6179,19 @@ function DataTable({
   }, [columnOrdering, disableColumnReordering, flatColumns, setColumnOrdering]);
   const showViewHeader = !!title || !!Actions;
   const showColumnOptions = !disableColumnReordering || !disableColumnVisibility;
-  const toolbarSearch = !disableSearch && /* @__PURE__ */ jsxs13(InputGroup3, { className: "w-70", children: [
-    /* @__PURE__ */ jsx17(InputGroupAddon3, { align: "inline-start", children: /* @__PURE__ */ jsx17(Icon11, { name: "magnifying-glass" }) }),
+  const toolbarSearch = !disableSearch && /* @__PURE__ */ jsxs13(InputGroup4, { className: cn("w-70", search == null ? void 0 : search.className), children: [
+    /* @__PURE__ */ jsx17(InputGroupAddon4, { align: "inline-start", children: /* @__PURE__ */ jsx17(Icon11, { name: "magnifying-glass" }) }),
     /* @__PURE__ */ jsx17(
-      InputGroupInput2,
-      {
+      InputGroupInput3,
+      __spreadProps(__spreadValues({}, SEARCH_INPUT_PROPS), {
+        id: searchInputId,
+        className: SEARCH_INPUT_CLASS,
         "aria-label": "Search",
-        placeholder: "Search\u2026",
+        placeholder: (_g = search == null ? void 0 : search.placeholder) != null ? _g : "Search\u2026",
         disabled: shouldDisable,
         value: globalFilter,
         onChange: (e) => setGlobalFilter(e.target.value)
-      }
+      })
     )
   ] });
   const toolbarColumns = !!showColumnOptions && /* @__PURE__ */ jsx17(
@@ -6100,7 +6300,7 @@ function DataTable({
             DataTablePagination,
             {
               rowCount,
-              rowCountRelation: (_f = config.rowCountRelation) != null ? _f : "eq",
+              rowCountRelation: (_h = config.rowCountRelation) != null ? _h : "eq",
               paginationConfig,
               pageSize: pagination.pageSize,
               pageIndex: pagination.pageIndex,
@@ -6313,7 +6513,7 @@ var useGraphActionsContext = () => {
 };
 
 // src/graph/hooks/useGraphActions.ts
-import { useCallback as useCallback9, useState as useState12 } from "react";
+import { useCallback as useCallback10, useState as useState12 } from "react";
 
 // src/graph/graph-node.tsx
 import * as React13 from "react";
@@ -6608,37 +6808,37 @@ function GraphNodeSkeleton(_props) {
 var useGraphActions = (initialNodes = [], initialEdges = []) => {
   const [nodes, setNodes] = useState12(initialNodes);
   const [edges, setEdges] = useState12(initialEdges);
-  const addNodes = useCallback9((newNodes) => {
+  const addNodes = useCallback10((newNodes) => {
     setNodes((prevNodes) => {
       const existingIds = new Set(prevNodes.map((node) => node.id));
       const uniqueNewNodes = newNodes.filter((node) => !existingIds.has(node.id));
       return [...prevNodes, ...uniqueNewNodes];
     });
   }, []);
-  const addEdges = useCallback9((newEdges) => {
+  const addEdges = useCallback10((newEdges) => {
     setEdges((prevEdges) => {
       const existingIds = new Set(prevEdges.map((edge) => edge.id));
       const uniqueNewEdges = newEdges.filter((edge) => !existingIds.has(edge.id));
       return [...prevEdges, ...uniqueNewEdges];
     });
   }, []);
-  const removeNodes = useCallback9((nodeIds) => {
+  const removeNodes = useCallback10((nodeIds) => {
     const nodeIdSet = new Set(nodeIds);
     setNodes((prevNodes) => prevNodes.filter((node) => !nodeIdSet.has(node.id)));
     setEdges((prevEdges) => prevEdges.filter((edge) => !nodeIdSet.has(edge.source) && !nodeIdSet.has(edge.target)));
   }, []);
-  const removeEdges = useCallback9((edgeIds) => {
+  const removeEdges = useCallback10((edgeIds) => {
     const edgeIdSet = new Set(edgeIds);
     setEdges((prevEdges) => prevEdges.filter((edge) => !edgeIdSet.has(edge.id)));
   }, []);
-  const resetGraph = useCallback9(() => {
+  const resetGraph = useCallback10(() => {
     setNodes(initialNodes);
     setEdges(initialEdges);
   }, [initialNodes, initialEdges]);
-  const updateNode = useCallback9((nodeId, node) => {
+  const updateNode = useCallback10((nodeId, node) => {
     setNodes((prevNodes) => prevNodes.map((n) => n.id === nodeId ? node : n));
   }, []);
-  const toggleNodeExpansion = useCallback9((nodeId) => {
+  const toggleNodeExpansion = useCallback10((nodeId) => {
     setNodes(
       (prevNodes) => prevNodes.map((node) => {
         if (node.id === nodeId && isDefaultNode(node)) {
@@ -6699,7 +6899,7 @@ import {
   getFilteredRowModel as getFilteredRowModel2,
   useReactTable as useReactTable2
 } from "@tanstack/react-table";
-import { Icon as Icon14, InputGroup as InputGroup4, InputGroupAddon as InputGroupAddon4, InputGroupInput as InputGroupInput3 } from "@upbound/monarch-core";
+import { Icon as Icon14, InputGroup as InputGroup5, InputGroupAddon as InputGroupAddon5, InputGroupInput as InputGroupInput4 } from "@upbound/monarch-core";
 
 // src/graph/graph-view.tsx
 import * as React16 from "react";
@@ -6842,9 +7042,9 @@ var useAutoLayout = (nodes, edges, { viewportFocusNodeId }) => {
 };
 
 // src/graph/hooks/useNodeVisibility.ts
-import { useCallback as useCallback10, useMemo as useMemo11 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo11 } from "react";
 var useNodeVisibility = (nodes, edges) => {
-  const hasRealChildren = useCallback10(
+  const hasRealChildren = useCallback11(
     (nodeId) => {
       const childEdges = edges.filter((edge) => edge.source === nodeId);
       const childNodes = childEdges.map((edge) => nodes.find((node) => node.id === edge.target)).filter(Boolean);
@@ -6852,7 +7052,7 @@ var useNodeVisibility = (nodes, edges) => {
     },
     [nodes, edges]
   );
-  const areAllAncestorsExpanded = useCallback10(
+  const areAllAncestorsExpanded = useCallback11(
     (nodeId) => {
       const parentEdges = edges.filter((edge) => edge.target === nodeId);
       if (parentEdges.length === 0) {
@@ -7042,6 +7242,7 @@ function Graph({
 }) {
   var _a, _b, _c;
   const graphRef = React17.useRef(null);
+  const searchInputId = `graph-search-${React17.useId()}`;
   const [innerGlobalFilter, setInnerGlobalFilter] = React17.useState("");
   const [innerColumnFilters, setInnerColumnFilters] = React17.useState([]);
   const globalFilter = parentGlobalFilter != null ? parentGlobalFilter : innerGlobalFilter;
@@ -7107,17 +7308,19 @@ function Graph({
   return /* @__PURE__ */ jsxs18("div", { id: `graph-${id}`, className: cn("flex size-full flex-1 flex-col", className), children: [
     !!title && /* @__PURE__ */ jsx23(SectionHeader, { className: "mb-4", children: /* @__PURE__ */ jsx23(SectionHeaderContent, { children: /* @__PURE__ */ jsx23(SectionHeaderTitle, { children: title }) }) }),
     showToolbar && /* @__PURE__ */ jsxs18("div", { className: "mb-4 flex flex-row gap-2", children: [
-      !disableSearch && /* @__PURE__ */ jsxs18(InputGroup4, { className: "w-70", children: [
-        /* @__PURE__ */ jsx23(InputGroupAddon4, { align: "inline-start", children: /* @__PURE__ */ jsx23(Icon14, { name: "magnifying-glass" }) }),
+      !disableSearch && /* @__PURE__ */ jsxs18(InputGroup5, { className: "w-70", children: [
+        /* @__PURE__ */ jsx23(InputGroupAddon5, { align: "inline-start", children: /* @__PURE__ */ jsx23(Icon14, { name: "magnifying-glass" }) }),
         /* @__PURE__ */ jsx23(
-          InputGroupInput3,
-          {
+          InputGroupInput4,
+          __spreadProps(__spreadValues({}, SEARCH_INPUT_PROPS), {
+            id: searchInputId,
+            className: SEARCH_INPUT_CLASS,
             "aria-label": "Search",
             placeholder: "Search\u2026",
             disabled: shouldDisable,
             value: globalFilter,
             onChange: (e) => setGlobalFilter(e.target.value)
-          }
+          })
         )
       ] }),
       !!Actions && /* @__PURE__ */ jsx23("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsx23(Actions, { state: graphState }) })
@@ -7156,10 +7359,10 @@ function Graph({
 }
 
 // src/graph/hooks/useGetViewportNodeIds.ts
-import { useEffect as useEffect10, useMemo as useMemo14, useRef as useRef9, useState as useState14 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo14, useRef as useRef10, useState as useState14 } from "react";
 import { useStore as useStore2, useViewport } from "reactflow";
 var useGetDebouncedViewport = (debounceDelay = 1e3) => {
-  const timerRef = useRef9(null);
+  const timerRef = useRef10(null);
   const [debouncedValues, setDebouncedValues] = useState14({ x: 0, y: 0, zoom: 1, width: 0, height: 0, nodes: [] });
   const { x, y, zoom } = useViewport();
   const { width, height, nodes } = useStore2((state) => ({